样式调整

src/page/index/index.vue

@@ -2,9 +2,10 @@
   <el-watermark :content="watermark" style="height: 100%">
     <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
       <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
-        <div class="avue-sidebar" v-show="validSidebar" :style="{width:setting.styleRadio == '3' && '195px'}" :class="setting.styleRadio=='2'?'styleRadio':''">
+        <div class="avue-sidebar" v-show="validSidebar" :style="{ width: setting.styleRadio == '3' && '195px' }"
+          :class="setting.styleRadio == '2' ? 'styleRadio' : ''">
           <!-- 左侧导航栏 -->
-          <logo v-if="setting.styleRadio == '1'||setting.styleRadio == '3'" />
+          <logo v-if="setting.styleRadio == '1' || setting.styleRadio == '3'" />
           <sidebar />
         </div>
         <div class="avue-main">
@@ -54,7 +55,7 @@ export default {
   provide() {
     return {
       index: this,
-      leftMenu:[]
+      leftMenu: []
     };
   },
   computed: {
@@ -67,7 +68,7 @@ export default {
       'menu',
       'setting',
       'leftMenu',
-      'selectIndex','selectedIndex'
+      'selectIndex', 'selectedIndex'
     ]),
     validSidebar() {
       return !(
@@ -82,7 +83,7 @@ export default {
   methods: {
     //打开菜单  风格2
     openMenu2(item = {}) {
-      if(!item.id){
+      if (!item.id) {
         this.$store.dispatch('GetMenu', item.id).then(data => {
           if (data.length !== 0) {
             this.$router.$avueRouter.formatRoutes(data, true);
@@ -109,7 +110,7 @@ export default {
             });
           }*/
         });
-      }else{
+      } else {
         if (item.children.length !== 0) {
           this.$store.commit('SET_LEFT_MENU', item.children);
           let tmpIndex = item.children.findIndex(item1 => item1.id == this.selectedIndex)
@@ -124,8 +125,8 @@ export default {
     //打开菜单
     openMenu(item = {}) {
       this.$store.dispatch('GetMenu', item.id).then(data => {
-        console.log('data=================',data)
-        console.log('item.id--------------------',item.id)
+        console.log('data=================', data)
+        console.log('item.id--------------------', item.id)
         if (data.length !== 0) {
           this.$router.$avueRouter.formatRoutes(data, true);
         }
@@ -156,7 +157,11 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-  .styleRadio{
+.avue-sidebar {
+  overflow: auto;
+}
+
+.styleRadio {
   margin-right: 8px !important;
-  }
+}
 </style>

src/page/index/logo.vue

@@ -33,7 +33,7 @@ export default {
   font-size: 20px;
   background-image: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #2c77f1);
   -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  /* -webkit-text-fill-color: transparent; */
   font-weight: 700;
   padding-left: 30px;
 }

src/page/index/setting.vue

@@ -3,7 +3,7 @@
   <el-drawer append-to-body :with-header="false" v-model="show" size="30%">
     <div class="setting">
       <h5>菜单风格</h5>
-      <el-radio-group v-model="setting.styleRadio">
+      <el-radio-group v-model="setting.styleRadio" @change="styleRadioChange">
         <el-radio value="1">默认</el-radio>
         <el-radio value="2">风格一</el-radio>
         <el-radio value="3">风格二</el-radio>
@@ -17,7 +17,7 @@
           <div @click="setting.sidebar = 'horizontal'" class="setting-checkbox-item setting-checkbox-item--top"></div>
         </el-tooltip>
       </div> -->
-      <h5>页面布局</h5>
+      <!-- <h5>页面布局</h5>
       <div class="setting-checkbox">
         <div class="setting-item" v-for="(item, index) in list1" :key="index">
           {{ item.label }}:
@@ -30,13 +30,14 @@
           {{ item.label }}:
           <el-switch v-model="setting[item.value]"></el-switch>
         </div>
-      </div>
+      </div> -->
     </div>
   </el-drawer>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import { setTheme } from 'utils/util';
 
 export default {
   data() {
@@ -81,8 +82,42 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['isHorizontal', 'setting']),
+    ...mapGetters(['isHorizontal', 'setting', 'tagWel', 'themeName']),
+  },
+  watch: {
+    setting: function (val) {
+      if (setting.styleRadio == '3') {
+        this.$store.commit('SET_THEME_NAME', 'theme-white');
+        setTheme('theme-white');
+        if (this.$store.getters.isMacOs) {
+          this.$router.push(this.tagWel);
+          setTimeout(() => location.reload());
+        }
+      }
+
+    },
   },
+  methods: {
+    styleRadioChange(val) {
+      console.log(9999, val)
+      if (val == '3') {
+        this.$store.commit('SET_THEME_NAME', 'theme-white');
+        setTheme('theme-white');
+        if (this.$store.getters.isMacOs) {
+          this.$router.push(this.tagWel);
+          setTimeout(() => location.reload());
+        }
+      }else{
+         this.$store.commit('SET_THEME_NAME', 'theme-go');
+        setTheme('theme-go');
+        if (this.$store.getters.isMacOs) {
+          this.$router.push(this.tagWel);
+          setTimeout(() => location.reload());
+        }
+      }
+    }
+  }
+
 };
 </script>
 

src/page/index/sidebar/leftMenu.vue

@@ -1,12 +1,15 @@
 <template>
     <div class="menu_flex">
         <div class="first_menu">
+            <div class="first_menu_bg">
                 <div class="menu_item" v-for="(item, index) in newMneu" :class="item.activeMenu == true ? 'xz_bg' : ''"
                 @click="slectMenu(item, index)" :title="item.name">
                 <span><i :class="item.source"></i></span>
                 <span>{{ item.name }}</span>
             </div>
             </div>
+            
+        </div>
         <div class="second_menu">
             <transition name="fade">
                 <span class="avue-logo_subtitle" key="0">
@@ -32,7 +35,7 @@
                         popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
                         <template #reference>
                             <span class="right_menu_item_box second_title" @click='open(item)'
-                                style="display:block;height: 60px;line-height: 60px;padding-left: 12px;">
+                                style="display:block;height: 50px;line-height: 50px;padding-left: 12px;">
                                 <div>{{ v.name }}
                                     <el-icon>
                                         <ArrowRight />
@@ -43,7 +46,7 @@
                         <template #default v-if="v.children && v.children.length != 0">
                             <div class="third_box" v-if="v.children && v.children.length != 0">
                                 <div class="third_box_item second_title" v-for="third in v.children" :key="third.id"
-                                    style="display:block;height: 60px;line-height: 60px;padding-left: 12px;" @click='open(third)'>
+                                    style="display:block;height: 40px;line-height: 40px;padding-left: 12px;" @click='open(third)'>
                                     {{ third.name }}
                                 </div>
                             </div>
@@ -131,7 +134,6 @@ const open = (item) => {
 }
 
 onMounted(() => {
-    console.log(22222,store.getters.setting.styleRadio)
     initMenu()
 })
 </script>
@@ -143,14 +145,19 @@ onMounted(() => {
 
     .first_menu {
         width: 75px;
-        background: #2c77f1;
+        background: url(@/assets/menu_bg.jpg) no-repeat center;
+        background-size: auto 100%;
         min-height: 100%;
         overflow: auto;
-        padding-top: 60px;
+       
         box-shadow: none;
         border-radius: 0px 60px 0px 0px;
         color: rgb(190, 194, 201);
-
+        .first_menu_bg{
+             padding-top: 60px;
+            background: url(@/assets/menu_bg.svg) no-repeat center;
+            background-size: 100% 100%;
+        }
         .menu_item {
             width: 100%;
             height: 68px;
@@ -225,7 +232,7 @@ onMounted(() => {
             text-align: center;
             color: rgb(102, 102, 102);
             font-size: 18px;
-            font-weight: 400;
+            font-weight: 550;
             line-height: 25px;
             margin-top: 18px;
             position: relative;
@@ -257,18 +264,18 @@ onMounted(() => {
             color: rgb(102, 102, 102);
 
             .second_title {
-                height: 60px;
-                line-height: 60px;
+                height: 50px;
+                line-height: 50px;
                 cursor: pointer;
-                font-size: 18px;
+                font-size: 14px;
                 color: rgb(102, 102, 102);
             }
 
 
 
             .second_ch {
-                height: 60px;
-                line-height: 60px;
+                height: 40px;
+                line-height: 40px;
                 cursor: pointer;
 
                 &:hover {
@@ -279,10 +286,10 @@ onMounted(() => {
         }
 
         .three_menu {
-            height: 60px;
-            line-height: 60px;
+            height: 40px;
+            line-height: 40px;
             cursor: pointer;
-            font-size: 18px;
+            font-size: 14px;
             color: rgb(102, 102, 102);
             text-align: center;
         }
@@ -317,5 +324,12 @@ onMounted(() => {
         }
     }
 
+    .third_box{
+        background: #000;
+    }
+
+}
+:deep(.iconfont ){
+    font-size: 20px;
 }
 </style>

src/page/index/top/index.vue

@@ -17,9 +17,9 @@
       <!-- <div v-if="setting.color" class="top-bar__item">
         <top-color></top-color>
       </div> -->
-      <div v-if="setting.theme" class="top-bar__item">
+      <!-- <div v-if="setting.theme" class="top-bar__item">
         <top-theme></top-theme>
-      </div>
+      </div> -->
       <!-- <div v-if="setting.lock" class="top-bar__item">
         <top-lock></top-lock>
       </div> -->