소스 검색

bug 修复

lilei 3 년 전
부모
커밋
1e14286749
3개의 변경된 파일45개의 추가작업 그리고 6개의 파일을 삭제
  1. 1 2
      src/components/NoticeIcon/NoticeIcon.vue
  2. 43 3
      src/components/tools/UserMenu.vue
  3. 1 1
      src/layouts/BasicLayout.vue

+ 1 - 2
src/components/NoticeIcon/NoticeIcon.vue

@@ -48,7 +48,7 @@
   </a-popover> -->
   <span @click="fetchNotice" class="header-notice" ref="noticeRef">
     <a-badge :count="unreadCount">
-      <a-icon style="font-size: 16px; padding: 0 5px" type="bell" />
+      <a-icon style="font-size: 16px; padding: 0 5px 0 0" type="bell" />
       <span>公告</span>
     </a-badge>
   </span>
@@ -126,7 +126,6 @@ export default {
   .header-notice{
     display: inline-block;
     transition: all 0.3s;
-    margin: 0 10px;
     span {
       vertical-align: initial;
     }

+ 43 - 3
src/components/tools/UserMenu.vue

@@ -5,7 +5,42 @@
         <img style="width: 22px;height: 22px;vertical-align: middle;margin: 0 5px;" src="../../assets/icon_movie.png"/>
         <span style="vertical-align: middle;">帮助</span>
       </p>
+      <!-- 通知 -->
       <notice-icon class="action"/>
+      <!-- 皮肤设置 -->
+      <a-popover trigger="click">
+        <div slot="content" style="width: 200px;">
+          <a-form-model :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+            <a-form-model-item label="主题">
+              <a-radio-group @change="changeTheme">
+                <a-radio-button value="dark">
+                  深色
+                </a-radio-button>
+                <a-radio-button value="light">
+                  浅色
+                </a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+            <a-form-model-item label="字体大小">
+              <a-radio-group>
+                <a-radio-button value="small">
+                  小
+                </a-radio-button>
+                <a-radio-button value="middle">
+                  中
+                </a-radio-button>
+                <a-radio-button value="large">
+                  大
+                </a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-form-model>
+        </div>
+        <span class="skin">
+          <a-icon style="font-size: 15px; padding: 0 3px 0 0" type="skin" />
+          设置
+        </span>
+      </a-popover>
       <a-dropdown>
         <span class="action ant-dropdown-link user-dropdown-menu">
           <!-- <a-avatar class="avatar" size="small" :src="avatar==''?defaultAvatar:avatar"/> -->
@@ -137,20 +172,25 @@ export default {
         description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
         duration: 4
       })
+    },
+    // 切换主题
+    changeTheme (e) {
+      console.log(e)
+      this.$store.dispatch('ToggleTheme', e.target.value)
     }
   }
 }
 </script>
 <style scoped="scoped">
-.help-cont{
+.help-cont,.skin{
 	display: inline-block;
 	cursor: pointer;
 	transition: all 0.3s;
-	padding: 0 5px;
+	padding: 0 12px;
   margin: 0;
   vertical-align: bottom;
 }
-.help-cont:hover {
+.help-cont:hover, .skin:hover {
 	background-color: rgba(0, 0, 0, 0.04);
 }
 </style>

+ 1 - 1
src/layouts/BasicLayout.vue

@@ -199,7 +199,7 @@ export default {
     this.collapsed = !this.sidebarOpened
     this.$store.dispatch('ToggleMultiTab', true)
 	  this.$store.dispatch('ToggleColor', '#2A86F4')
-    this.$store.dispatch('ToggleTheme', 'dark')
+    this.$store.dispatch('ToggleTheme', this.$ls.get('DEFAULT_THEME'))
     // 判断是否是当月25日后
     this.$store.state.app.isLastDayForMonth = moment().date() >= 25
     if (this.$store.state.app.isLastDayForMonth && this.$hasPermissions('M_mothEndTips')) {