【update 系统】顶部样式

src/components/page/GlobalLayout.vue

@@ -359,16 +359,18 @@ body {
   .header, .top-nav-header-index {
 
     .user-wrapper {
+      display: flex;
       float: right;
       height: 100%;
 
       .action {
         cursor: pointer;
-        padding: 0 14px;
+        padding: 0 8px;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         transition: all .3s;
 
-        height: 70%;
+        //height: 70%;
         line-height: 46px;
 
         &.action-full {

src/components/tools/HeaderNotice.vue

@@ -30,7 +30,8 @@
     </template>
     <span @click="fetchNotice" class="header-notice">
       <a-badge :count="msgTotal">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
+        <!--<a-icon style="font-size: 16px; padding: 4px" type="bell" />-->
+        <img :src="require('@/assets/image/icon/notice.png')" alt='' class="header-notice-btn">
       </a-badge>
     </span>
     <show-announcement ref="ShowAnnouncement" @ok="modalFormOk"></show-announcement>
@@ -299,4 +300,8 @@ export default {
     vertical-align: initial;
   }
 }
+.header-notice-btn {
+  width: 32px;
+  height: 32px;
+}
 </style>

src/components/tools/UserMenu.vue

@@ -31,6 +31,16 @@
     <!--    <a-icon type="question-circle-o"></a-icon>-->
     <!--  </a>-->
     <!--</span>-->
+    <div class="action">
+      <span class="action-lang" v-show="localeval=='zh-cn'">
+        <span @click="changeLocale('en-us')" v-if="!isLoading">En</span>
+        <a-icon v-else type="sync" spin/>
+      </span>
+      <span class="action-lang" v-show="localeval=='en-us'">
+        <span @click="changeLocale('zh-cn')" v-if="!isLoading">中</span>
+        <a-icon v-else type="sync" spin/>
+      </span>
+    </div>
     <header-notice class="action"/>
     <!--<span style="padding: 12px">-->
     <!--  <a-avatar class="avatar" size="small" :src="getAvatar()"/>-->
@@ -91,12 +101,12 @@
     <!--    </a-menu-item>&ndash;&gt;-->
     <!--  </a-menu>-->
     <!--</a-dropdown>-->
-    <span class="action">
+    <div class="action-item">
-      <a class="logout_title" href="javascript:;" @click="handleLogout">
+      <a class="action-btn logout_title" href="javascript:;" @click="handleLogout">
-        <a-icon type="logout"/>
+        <span class="action-btn-icon"><a-icon type="poweroff" style="color:#FFF;"/></span>
-        <span v-if="isDesktop()"> {{ $t('header.logOutOfUserMenu') }}</span>
+        <span class="action-btn-text" v-if="isDesktop()"> {{ $t('header.logOutOfUserMenu') }}</span>
       </a>
-    </span>
+    </div>
     <user-password ref="userPassword"></user-password>
     <depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
     <setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
@@ -360,9 +370,71 @@ export default {
   /* update_end author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
 </style>
 
-<style scoped>
+<style lang="less" scoped>
   .logout_title {
     color: inherit;
     text-decoration: none;
   }
+  // 语言切换按钮样式
+  .action-lang {
+    border: 1px solid @primary-color;
+    background-color: #FFFFFF;
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+
+    & > span {
+      display: inline-flex;
+      font-family: sans-serif;
+      width: 20px;
+      height: 20px;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      font-size: 12px;
+      background-color: @primary-color;
+      color: #FFFFFF;
+    }
+  }
+  // 退出登录按钮样式
+  .action-item {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 8px;
+    transition: all 0.3s;
+    height: 100%;
+    line-height: 46px;
+
+    // 操作按钮
+    .action-btn {
+      padding: 4px;
+      background-color: white;
+      border-radius: 32px;
+      display: flex;
+      align-items: center;
+      height: 32px;
+      border: 1px solid @primary-color;
+
+      img {
+        width: 24px;
+        height: 24px;
+      }
+
+      &-icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 24px;
+        height: 24px;
+        background-color: @primary-color;
+        border-radius: 50%;
+      }
+      &-text {
+        margin: 0 4px;
+      }
+    }
+  }
 </style>