右边个人信息抽屉页

public/css/common.scss

@@ -528,14 +528,12 @@ i{
   }
 }
 .user-info{
-  & .el-dropdown{
-    color: #C8CBE0;
-    cursor: pointer;
-    width: 67px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+  color: #C8CBE0;
+  width: 67px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
 }
 
 .el-input.is-active .el-input__inner, .el-input__inner:focus{
@@ -585,6 +583,98 @@ i{
     padding-top: 20px;
     padding-left: 28px;
     padding-right: 32px;
+    .basic-user-info{
+      text-align: center !important;
+    }
+    p.user-name{
+      margin: 10px 0;
+    }
+    & .hasAuth{
+      color: #FF9E29;
+    }
+    p.auth-info{
+      padding-bottom: 30px;
+      border-bottom: 1px solid #EFF1F8;
+    }
+
+    .buttonul{
+      padding-bottom: 25px;
+      border-bottom: 1px solid #eff1f8;
+      ul{
+        display: -webkit-flex;/*新版本语法：chrome 21+*/
+        display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
+        display: -moz-box;/*老版本语法：Firefox(buggy)*/
+        display: -ms-flexbox;/*混合版本语法：IE 10*/
+        display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
+        justify-content: space-around;
+        padding-top: 30px;
+        li{
+          cursor: pointer;
+          font-weight: 400;
+        }
+        & .iconfont{
+          font-size: 22px;
+          color: #9EA2BA;
+        }
+        & p:last-child{
+          padding-top: 10px;
+        }
+      }
+    }
+
+    .projectUl{
+      padding-top: 28px;
+      p.title{
+        border-left: 3px solid #5D78FF;
+        height: 16px;
+        line-height: 16px;
+        display: -webkit-flex;/*新版本语法：chrome 21+*/
+        display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
+        display: -moz-box;/*老版本语法：Firefox(buggy)*/
+        display: -ms-flexbox;/*混合版本语法：IE 10*/
+        display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
+        justify-content: space-between;
+        &>span:first-child{
+          display: inline-block;
+          padding-left: 10px;
+        }
+        &>span:last-child{
+          color: #5D78FF;
+          cursor: pointer;
+        }
+      }
+      ul{
+        padding-top: 18px;
+        li{
+          margin: 10px 0;
+          width: 100%;
+          text-align: left;
+          &>img{
+            width: 40px;
+            height: 40px;
+            border-radius: 3px;
+          }
+          &>span{
+            display: inline-block;
+            padding: 0 10px;
+          }
+        }
+
+      }
+    }
+
+    .buttonwrapper{
+      margin-top:50px;
+      & .el-button{
+        width: 100%;
+        border: 1px solid #EFF1F8;
+      }
+      & .el-button:hover{
+        color: #5D78FF;
+        background-color: unset;
+        border-color: #5D78FF;
+      }
+    }
   }
   & .el-drawer__close-btn{
     position: absolute;
@@ -592,6 +682,7 @@ i{
     margin: 0;
     top: 13px;
     left: 20px;
+    outline: none;
 
   }
   & .basic-user-info{
@@ -600,4 +691,7 @@ i{
       height: 60px;
     }
   }
+}
+.drawer{
+  color: #565B79;
 }
\ No newline at end of file

src/components/index/PageTop.vue

@@ -21,16 +21,7 @@
         <div class="header-right">
             <span @click="handleSearch"><i class="iconfont icon-iconsearch"></i></span>
             <span v-if="!userInfo"><i @click="handleLogin">{{$t("topNav.login")}}/</i><i @click="handleRegister">{{$t("topNav.register")}}</i></span>
-            <span v-if="userInfo" class="user-info">
-                <el-dropdown @command="handleLogout">
-                  <span class="el-dropdown-link">
-                    {{userInfo.empName?userInfo.empName:userInfo.empAccount}}<i class="el-icon-arrow-down el-icon--right"></i>
-                  </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item>{{$t("topNav.logout")}}</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-            </span>
+            <span v-if="userInfo" class="user-info" @click="handleOpen">{{userInfo.empName?userInfo.empName:userInfo.empAccount}}</span>
             <span @click="changeLangEvent()"><i :class="lang==='zh-CN'?'selectedLang':''">中文 / </i><i
                     :class="lang==='en'?'selectedLang':''">En</i></span>
         </div>
@@ -51,6 +42,7 @@
                         <span class="iconfont icon-vip hasAuth"  v-if="userInfo&&userInfo.authenticationState==2"></span>
                     </p>
                 </div>
+
                 <div class="buttonul">
                     <ul>
                         <li>
@@ -67,6 +59,25 @@
                         </li>
                     </ul>
                 </div>
+
+                <div class="projectUl">
+                    <p class="title"><span>我提交的项目</span><span>发布项目</span></p>
+                    <ul>
+                        <li>
+                            <img src="../../assets/img/index/Bitmap(1).png" alt="">
+                            <span>创新奇智</span>
+                        </li>
+                        <li>
+                            <img src="../../assets/img/index/Bitmap(1).png" alt="">
+                            <span>创新奇智qqq</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="buttonwrapper">
+                    <el-button @click="handleLogout">
+                        退出登录
+                    </el-button>
+                </div>
             </el-drawer>
         </div>
     </div>
@@ -167,15 +178,21 @@
                 console.log(this.userInfo);
             },
 
+            //打开抽屉
+            handleOpen(){
+                this.drawer = true;
+            },
+
+
+            //退出登录
             handleLogout(){
-                // this.drawer = true;
                 window.localStorage.removeItem("userInfo");
                 if (this.$i18n.locale == "zh-CN") this.$router.push("/mobileLoginCmpt");
                 else this.$router.push('/emailLoginCmpt');
 
             },
 
-            handleClose(){
+            handleClose(done){
                 this.$confirm(this.$t("drawerInfo.closeTitle"))
                     .then(_ => {
                         done();
@@ -228,7 +245,7 @@
         & li.activeLi {
             color: #3F3F53;
         }
-        & .el-dropdown{
+        & .user-info{
             color: #3F3F53 !important;
         }
     }
@@ -324,18 +341,7 @@
             font-weight: bold;
         }
     }
-    .drawer{
-        color: #565B79;
-        p.user-name{
-            margin: 10px 0;
-        }
-        & .hasAuth{
-            color: #FF9E29;
-        }
-        p.auth-info{
-            padding-bottom: 30px;
-            border-bottom: 1px solid #EFF1F8;
-        }
-    }
+
+
 
 </style>