风格调整

index.html

@@ -11,7 +11,7 @@
   <meta name='apple-mobile-web-app-capable' content='yes'>
   <meta name='apple-mobile-web-app-status-bar-style' content='black'>
   <meta name='format-detection' content='telephone=no'>
-  <link rel='icon' href='/favicon.png' />
+  <link rel='icon' href='/favicon.ico' />
   <link rel='stylesheet' href='/iconfont/index.css'>
   <link rel='stylesheet' href='/iconfont/avue/iconfont.css'>
   <link rel='stylesheet' href='/iconfont/saber/iconfont.css'>

src/page/index/index.vue

@@ -5,7 +5,7 @@
         <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'|| setting.styleRadio == '4'" />
           <sidebar />
         </div>
         <div class="avue-main">

src/page/index/setting.vue

@@ -4,9 +4,10 @@
     <div class="setting">
       <h5>菜单风格</h5>
       <el-radio-group v-model="setting.styleRadio" @change="styleRadioChange">
-        <el-radio value="1">默认</el-radio>
+        <el-radio value="1">风格一</el-radio>
-        <el-radio value="2">风格一</el-radio>
+        <el-radio value="2">风格二</el-radio>
-        <el-radio value="3">风格二</el-radio>
+        <el-radio value="3">风格三</el-radio>
+        <el-radio value="4">风格四</el-radio>
       </el-radio-group>
       <!-- <h5>导航模式</h5>
       <div class="setting-checkbox">
@@ -99,7 +100,6 @@ export default {
   },
   methods: {
     styleRadioChange(val) {
-      console.log(9999, val)
       if (val == '3') {
         this.$store.commit('SET_THEME_NAME', 'theme-white');
         setTheme('theme-white');
@@ -107,8 +107,15 @@ export default {
           this.$router.push(this.tagWel);
           setTimeout(() => location.reload());
         }
-      }else{
+      } else if (val == '4') {
-         this.$store.commit('SET_THEME_NAME', 'theme-go');
+        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);

src/page/index/sidebar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
-    v-if="setting.styleRadio == '1'">
+    v-if="setting.styleRadio == '1'||setting.styleRadio == '4'">
     <sidebar-item :menu="menu"></sidebar-item>
   </el-menu>
   <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
@@ -85,8 +85,6 @@ export default {
     }else{
       this.index.openMenu();
     }
-    
-    console.log(8888,leftMenu)
   },
   methods: {
     clickItem(item, index) {

src/page/index/top/index.vue

@@ -10,16 +10,16 @@
       </div>
     </div>
     <div class="top-bar__title">
-      <top-menu ref="topMenu" v-if="setting.menu&&setting.styleRadio=='3'"></top-menu>
+      <top-menu ref="topMenu" v-if="setting.menu&&(setting.styleRadio=='3'||setting.styleRadio=='4')"></top-menu>
       <top-search class="top-bar__item" v-if="setting.search"></top-search>
     </div>
     <div class="top-bar__right">
       <!-- <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> -->

src/page/index/top/top-menu.vue

@@ -1,64 +1,51 @@
 <template>
-  <!-- <el-menu class="top-menu" :default-active="activeIndex" mode="horizontal" text-color="#333">
+  <div>
-    <el-menu-item index="0" @click="openHome(itemHome)">
+    <el-menu class="top-menu" :default-active="activeIndex" mode="horizontal" text-color="#333"  ellipsis style="width: 900px">
+      <!-- <el-menu-item index="0" @click="openHome(itemHome)">
       <template #title>
         <i :class="itemHome.source" style="padding-right: 5px"></i>
         <span>{{ itemHome.name }}</span>
       </template>
-    </el-menu-item>
+</el-menu-item> -->
       
-    <template v-for="(item, index) in items" :key="index">
+      <template v-for="(item, index) in items" :key="index">
-      <el-menu-item :index="item.id + ''" @click="openMenu(item)">
+        <el-menu-item :index="item.id + ''" @click="openMenu(item)">
-        <template #title>
+          <template #title>
+            <i :class="item.source" style="padding-right: 5px"></i>
+            <span>{{ item.name }}</span>
+          </template>
+        </el-menu-item>
+      </template>
+    </el-menu>
+    <div class="top_menu_box" v-if="setting.styleRadio == '3'">
+      <div v-for="(item, index) in items" :key="index" @click="openMenu(item)">
+        <div class="top_menu_box_item" v-if="index <= 7" :class="activeIndex == item.id ? 'active' : ''">
           <i :class="item.source" style="padding-right: 5px"></i>
           <span>{{ item.name }}</span>
-        </template>
+        </div>
-      </el-menu-item>
-    </template>
-  </el-menu> -->
-  <div class="top_menu_box" v-if="setting.styleRadio=='3'">
-    <div   v-for="(item, index) in items" :key="index"  @click="openMenu(item)">
-      <div class="top_menu_box_item" v-if="index <= 7" :class="activeIndex == item.id ? 'active' : ''">
-        <i :class="item.source" style="padding-right: 5px"></i>
-        <span>{{ item.name }}</span>
       </div>
-    </div>
+      <div v-show="items.length > 9">
-    <div v-show="items.length > 9" >
+        <el-popover placement="bottom-start" :show-arrow="false" :offset="0" :hide-after='0' popper-class="log-popover"
-      <el-popover
+          popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
-        placement="bottom-start"
+          <template #reference>
-        :show-arrow="false"
+            <div style="height:100%;display: flex;align-items: center;">
-        :offset="0"
+              <el-icon class="el-icon--right" style="width: 16px;height: 16px;" color="#fff">
-        :hide-after='0'
+                <arrow-down />
-        popper-class="log-popover"
+              </el-icon>
-        popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
-       >
-        <template #reference>
-          <div style="height:100%;display: flex;align-items: center;">
-             <el-icon class="el-icon--right" style="width: 16px;height: 16px;" color="#fff">
-              <arrow-down />
-            </el-icon>
-          </div>
-         
-
-         <!-- <div class="right_menu_item_box" @click='clickPage(item)'>
-           <div>{{ item.name }}</div>
-           <el-icon><ArrowRight /></el-icon>
-         </div> -->
-        </template>
-        <template #default >
-          <div v-if="items.length > 7">
-            <div v-for="item in items.filter((item,index) => index > 7)" style="padding: 10px;cursor: pointer; " @click="openMenu(item)">
-              <div>{{ item.name }}</div>
             </div>
-          </div>
+          </template>
-         <!-- <div class="third_box" v-if="item.children && item.children.length != 0">
+          <template #default>
-          <div class="third_box_item" v-for="third in item.children" :key="third.id">
+            <div v-if="items.length > 7">
-           {{ third.name }}
+              <div v-for="item in items.filter((item, index) => index > 7)" style="padding: 10px;cursor: pointer; "
-          </div>
+                @click="openMenu(item)">
-         </div> -->
+                <div>{{ item.name }}</div>
-        </template>
+              </div>
-       </el-popover>
+            </div>
+
+          </template>
+        </el-popover>
 
+      </div>
     </div>
   </div>
 </template>
@@ -76,7 +63,7 @@ export default {
       },
       // activeIndex: '0',
       items: [],
-      timer:null
+      timer: null
     };
   },
   inject: ['index'],
@@ -85,11 +72,11 @@ export default {
     this.interval()
   },
   computed: {
-    ...mapGetters(['tagCurrent', 'menu', 'tagWel','activeIndex','selectIndex','selectedIndex','leftMenu','setting']),
+    ...mapGetters(['tagCurrent', 'menu', 'tagWel', 'activeIndex', 'selectIndex', 'selectedIndex', 'leftMenu', 'setting']),
   },
   methods: {
     openMenu(item) {
-      console.log('item------------------------',item)
+      console.log('item------------------------', item)
       this.index.openMenu2(item);
       this.$store.commit('SET_ACTIVE_INDEX', item.id + '');
     },
@@ -97,24 +84,24 @@ export default {
       this.index.openMenu(itemHome);
       this.$router.push(this.tagWel);
     },
-    interval(){
+    interval() {
       console.log('1111111111111111111111111111111111111')
-       this.timer = setInterval(() =>{
+      this.timer = setInterval(() => {
         this.getMenu()
-      },1000)
+      }, 1000)
     },
     getMenu() {
       this.items = this.menu
-      console.log('menu-------------------------------------',this.menu)
+      console.log('menu222-------------------------------------', this.menu)
-      console.log('items-------------------------------------',this.items)
+      console.log('items-------------------------------------', this.items)
-      if(this.menu.length != 0){
+      if (this.menu.length != 0) {
         clearInterval(this.timer)
       }
-      if(this.activeIndex){
+      if (this.activeIndex) {
         let tmp = this.menu.find(item => item.id == this.activeIndex)
         this.openMenu(tmp)
-      }else{
+      } else {
-        if(this.menu.length != 0){
+        if (this.menu.length != 0) {
           this.openMenu(this.menu[0])
         }
       }
@@ -131,10 +118,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.top_menu_box{
+.top_menu_box {
   display: flex;
 
-  .top_menu_box_item{
+  .top_menu_box_item {
     font-weight: 400;
     font-size: 14px;
     color: #fff;
@@ -144,7 +131,7 @@ export default {
     padding: 0 24px 0 12px;
     cursor: pointer;
 
-    &.active{
+    &.active {
       background: #dceeff;
       color: #06f;
     }