frontend/src/layout/components/Topbar.vue

@@ -24,7 +24,7 @@
     </el-menu>
 
     <div class="right-menu" style="color: var(--TopTextColor)">
-      <template v-if="false">
+      <template>
 
         <notification class="right-menu-item hover-effect" />
         <lang-select class="right-menu-item hover-effect" />
@@ -35,14 +35,12 @@
         </div>
       </template>
 
-      <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:200px;" trigger="click">
-        <div class="el-dropdown-link" style="display: flex;color: #f7f7f4;font-size: 14px; width:100%;">
-          <el-avatar></el-avatar>
-        <div style="display: flex; align-items: center; margin-left: 10px">
+      <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;" trigger="click">
+        <div class="el-dropdown-link" style="display: flex;color: var(--TopTextColor);font-size: 14px; width:100%;">
+
           <span style="max-width:80px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ name }}</span>
           <span><i class="el-icon-arrow-down el-icon--right" /></span>
         </div>
-        </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/person-info/index">
             <el-dropdown-item>{{ $t('commons.personal_info') }}</el-dropdown-item>
@@ -295,7 +293,7 @@ export default {
 <style lang="scss" scoped>
   .el-dropdown-link {
     cursor: pointer;
-    color: #f7f7f4;
+    color: #1e212a;
   }
   .el-icon-arrow-down {
     font-size: 12px;

frontend/src/styles/topbar.scss

@@ -5,15 +5,14 @@
   left: 0;
   z-index: 1001;
   overflow: hidden;
-  color: #f7f7f4 !important;
   border-bottom: 1px solid var(--TopBG, #E6E6E6);
-  background-color: var(--TopBG, #484198); 
+  background-color: var(--TopBG, #f1f3f8); 
   .log {
     padding: 0 16px;
     line-height: 56px;
     height: 56px;
     font-size: 24px;
-    background-color: var(--MenuActiveBG, $--color-primary) ;
+    font-weight: bold;
 
     float: left;
 
@@ -26,12 +25,13 @@
   .el-menu {
     float: left;
     border: none !important;
-    background-color: var(--TopBG, #484198) !important;
+    background-color: var(--TopBG, #f1f3f8) !important;
     .nav-item {
       display: inline-block;
 
       .el-menu-item:not(.is-active) {
-        color: var(--TopTextColor, #f7f7f4);
+        color: var(--TopTextColor, #1e212a);
+        opacity: 0.65;
         &:hover {
           background-color: var(--MenuHovorBG, rgba(158,158,158,.2)) !important;
           opacity: 1;

frontend/src/styles/variables.scss

@@ -12,7 +12,7 @@ $--color-success: #67C23A;
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C; */
 // $--color-info: #1E1E1E;
-$--color-primary: #887dd3;
+$--color-primary: #3A4197;
 $--button-font-weight: 400;
 
 $--border-color-light: #dfe4ed;
@@ -24,10 +24,10 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
 
 @import "~element-ui/packages/theme-chalk/src/index";
 // topBar
-$topBarBg: #484198;
+$topBarBg: #f1f3f8;
 $topBarMenuHovor: rgba(158,158,158,.2);
 $topBarMenuActive: $--color-primary;
-$topBarMenuText: #f7f7f4;
+$topBarMenuText: #1e212a;
 $topBarMenuTextActive: #f4f4f5;
 // sidebar
 $leftMenuBg: #ffffff;
@@ -39,8 +39,8 @@ $leftMenuTextActive: $--color-primary;
 
 $colorBg: rgba(10, 123, 224, .1); 
 $sideBarWidth: 210px;
-$topBarHeight: 64px;
-$contentHeight: calc(100vh - 64px);
+$topBarHeight: 56px;
+$contentHeight: calc(100vh - 56px);
 
 
 :export {