样式修改

src/page/index/index.vue

@@ -1,18 +1,18 @@
 <template>
   <el-watermark :content="watermark" style="height: 100%">
     <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
-      <top ref="top" v-if="setting.styleRadio == '3'" />
+      <top ref="top" v-if="setting.styleRadio == '3' || setting.styleRadio == '6'" />
       <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }"
-        :style="{ height: setting.styleRadio == '3' ? 'calc(100% - 50px)' : '100%' }">
+        :style="{ height: (setting.styleRadio == '3' || setting.styleRadio == '6') ? 'calc(100% - 50px)' : '100%' }">
         <div class="avue-sidebar" v-show="validSidebar"
-          :class="setting.styleRadio == '2' ? 'styleRadio' : setting.styleRadio == '3' || setting.styleRadio == '5' ? 'thirdBar' : ''">
+          :class="setting.styleRadio == '2' ? 'styleRadio' : setting.styleRadio == '3' || setting.styleRadio == '5' || setting.styleRadio == '6' ? 'thirdBar' : ''">
           <!-- 左侧导航栏 -->
           <logo v-if="setting.styleRadio == '1' || setting.styleRadio == '4' || setting.styleRadio == '5'" />
           <sidebar />
         </div>
         <div class="avue-main">
           <!-- 顶部导航栏 -->
-          <top ref="top" v-if="setting.styleRadio != '3'" />
+          <top ref="top" v-if="setting.styleRadio != '3' && setting.styleRadio != '6'" />
           <!-- 顶部标签卡 -->
           <tags />
           <search class="avue-view" v-show="isSearch"></search>
@@ -168,5 +168,6 @@ export default {
 
 .thirdBar {
   width: auto !important;
+  background: #fff !important;
 }
 </style>

src/page/index/setting.vue

@@ -8,7 +8,8 @@
         <el-radio value="2">风格二</el-radio>
         <el-radio value="3">风格三</el-radio>
         <el-radio value="4">风格四</el-radio>
-        <el-radio value="5">风格五</el-radio>
+        <!-- <el-radio value="5">风格五</el-radio> -->
+        <el-radio value="6">风格五</el-radio>
       </el-radio-group>
       <!-- <h5>导航模式</h5>
       <div class="setting-checkbox">

src/page/index/sidebar/index.vue

@@ -11,7 +11,8 @@
 
   <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
   <leftMenuSec :menulist="menu" v-if="setting.styleRadio == '5'"></leftMenuSec>
-  <div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''" style="display: flex;height: 100%;background: #fff;" v-if="setting.styleRadio == '3'">
+  <div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''" style="display: flex;height: 100%;background: #fff;" 
+  v-if="setting.styleRadio == '3'">
     <div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'">
       <!-- <div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> -->
       <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" @mouseenter="mouseEnter(item,index)" 
@@ -23,7 +24,6 @@
       </div>
     </div>
     <div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children" @mouseleave="mouseleave(leftMenu[selectIndex])">
-     
       <div
         v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
         <div class="left_top">{{ leftMenu[selectIndex].name }} </div>
@@ -64,6 +64,54 @@
       </div>
     </div>
   </div>
+  <div v-if="setting.styleRadio == '6'" class="left_menu_box six">
+    <div class="left_menu six_menu">
+      <div class="left_menu_item" v-for="(item,index) in menu" :key="item.id" @click="clickMenu(item,index)" :class="activeIndex == index ? 'hover' : ''">
+        <i :class="item.source" style="font-size: 20px;"></i>
+        <span class="name_text">{{ item.name.substring(0,2) }}</span>
+      </div>
+    </div>
+    <div style="flex: 1;height: 100%;" v-show="menu[activeIndex].children" @mouseleave="mouseleave(menu[activeIndex])">
+      <div
+        v-if="menu && menu.length != 0 && menu[activeIndex].children && menu[activeIndex].children.length != 0">
+        <div class="left_top">{{ menu[activeIndex].name }} </div>
+        <div class="right_menu" v-for="item in menu[activeIndex].children" :key="item.id" @mouseenter="mounseEnter(item)"  @mouseleave="mounseLeave(menu[activeIndex],item)">
+          <div class="right_menu_item">
+            <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
+              popper-class="log-popover"
+              popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
+              @hide="hidePopover(menu[activeIndex],item)">
+              <template #reference>
+                <div class="right_menu_item_box" @click='clickPage(item)'>
+                  <div class="second_name">{{ item.name }}</div>
+                  <el-icon v-if="item.children && item.children.length != 0">
+                    <ArrowRight />
+                  </el-icon>
+                </div>
+              </template>
+              <template #default >
+                <div class="third_box" v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
+                  <div class="third_box_item" v-for="third in item.children" :key="third.id" @click="handleClick(third)">
+                    {{ third.name }}
+                  </div>
+                </div>
+                <div class="four_box" v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
+                  <div class="four_box_item" v-for="third in item.children" :key="third.id">
+                    <div class="third_name"  @click="handleClick(third)"><span></span>{{ third.name }}</div>
+                    <div class="four_con_box" v-if="third.children">
+                      <div class="four_con_item" v-for="four in third.children" :key="four.id"  @click="handleClick(four)">
+                        {{ four.name }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </el-popover>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -79,7 +127,8 @@ export default {
   data() {
     return {
       isCollapse: false,
-      showRight:false
+      showRight:false,
+      activeIndex:0,
       // selectIndex:0
     }
   },
@@ -106,6 +155,9 @@ export default {
     }
   },
   methods: {
+    clickMenu(item,index){
+      this.activeIndex = index
+    },
     clickItem(item, index) {
       if (!item.children) {
         this.$router.push({
@@ -190,6 +242,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.left_menu_box_six{
+  
+}
 
 .left_menu_box{
   width: 70px !important;
@@ -198,6 +253,13 @@ export default {
     width: 200px !important;
     background: #fff;
   }
+
+  &.six{
+    width: 215px !important;
+    background: #f7fafc !important;
+    display: flex;
+    height: 100%;
+  }
 }
 .no_child {
   width: 70px;
@@ -238,6 +300,20 @@ export default {
     background: #0066ff;
     color: #fff;
   }
+
+  &.six_menu{
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 60px;
+    color: #0066ff;
+
+    &:hover{
+      transition: all .5s;
+      box-shadow: 5px 5px 30px #afaeae;
+    }
+  }
   
 
   .left_menu_item {
@@ -278,6 +354,17 @@ export default {
       text-overflow: ellipsis;
     }
 
+    &.hover {
+      background: #0066ff;
+      color: #fff;
+
+      .img_box{
+        width: 14px;
+        height: 14px;
+        background: url('@/assets/right_pull_white.png');
+      }
+    }
+
     
 
     &:hover {
@@ -290,19 +377,21 @@ export default {
         background: url('@/assets/right_pull_white.png');
       }
     }
+
+
   }
 }
 
 .left_top {
   font-size: 14px;
-  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
-  font-weight: 700;
-  text-align: center;
-  height: 48px;
-  display: flex;
-  color: #5a6f82;
-  align-items: center;
-  justify-content: center;
+    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+    font-weight: 700;
+    text-align: center;
+    height: 48px;
+    display: flex;
+    color: #5a6f82;
+    align-items: center;
+    justify-content: center;
 }
 
 .right_menu {
@@ -337,6 +426,21 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      color: #333;
+
+      .second_name{
+        width: 100%;
+        height: 46px;
+        font-size: 14px;
+        line-height: 46px;
+        cursor: pointer;
+        padding: 0 10px;
+        box-sizing: border-box;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
 
       &:hover {
         background: #0066ff;

src/page/index/top/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="avue-top" :class="setting.styleRadio == '4' ? 'logo_bg' : setting.styleRadio == '3' ? 'third_bg' : ''">
-     <div class="top_bag" v-if="setting.styleRadio == 3">
+  <div class="avue-top" :class="setting.styleRadio == '4' ? 'logo_bg' : (setting.styleRadio == '3' || setting.styleRadio == '6') ? 'third_bg' : ''">
+     <div class="top_bag" v-if="setting.styleRadio == 3 || setting.styleRadio == 6">
       <img src="@/assets/logo_bai.png" class="logo_img" />
        <!-- <logo></logo> -->
     </div>
@@ -13,15 +13,18 @@
     <div class="top-bar__title" :class="setting.styleRadio == '1' ? 'bar__title_fff' : setting.styleRadio == '3' ? 'bar_title_third' : ''">
       <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" :style="{left:setting.styleRadio == '3' && '225px'}"></top-search>
+      <top-search class="top-bar__item" v-if="setting.search" :style="{left:(setting.styleRadio == '3' || setting.styleRadio == '6') && '225px'}"></top-search>
     </div>
-    <div class="top-bar__right">
+    <div class="top-bar__right" :class="setting.styleRadio == '3' || setting.styleRadio == '6' ? 'top-bar__right_third' : ''">
       <!-- <div v-if="setting.color" class="top-bar__item">
         <top-color></top-color>
       </div> -->
       <div v-show="!setting.theme" class="top-bar__item">
         <top-theme></top-theme>
       </div>
+      <div class="top-bar__item">
+        <top-login></top-login>
+      </div>
       <div class="top-bar__item" :title="'消息'">
         <el-badge :value="200" :max="99" class="item">
           <el-icon>
@@ -47,7 +50,7 @@
       <div class="top-user">
         <img class="top-bar__img" :src="userInfo.avatar" />
         <el-dropdown :hide-on-click="false">
-          <span class="el-dropdown-link">
+          <span class="el-dropdown-link" :style="{color:setting.styleRadio == '3' || setting.styleRadio == '6' ? '#fff' : ''}">
             {{ userInfo.real_name }}
             <el-icon class="el-icon--right">
               <arrow-down />
@@ -119,6 +122,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import topLogin from './top-login.vue';
 import topLock from './top-lock.vue';
 import topMenu from './top-menu.vue';
 import topSearch from './top-search.vue';
@@ -144,6 +148,7 @@ export default {
     topLang,
     topFull,
     topSetting,
+    topLogin
   },
   name: 'top',
   data() {
@@ -366,6 +371,8 @@ export default {
   display: flex;
   background: #1881FF !important;
   align-items: center;
+  height: 54px !important;
+  line-height: 54px !important;
 
   .top_bag{
     display: flex;

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

@@ -18,7 +18,7 @@
         </el-menu-item>
       </template>
     </el-menu>
-    <div class="top_menu_box" v-if="setting.styleRadio == '3'">
+    <div class="top_menu_box" v-if="setting.styleRadio == '3' || setting.styleRadio == '6'">
       <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>

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

@@ -1,7 +1,7 @@
 <template>
   <el-autocomplete
     class="top-search"
-    :class="setting.styleRadio == 3 ? 'search_radio' : ''"
+    :class="setting.styleRadio == 3 || setting.styleRadio == 6 ? 'search_radio' : ''"
     popper-class="my-autocomplete"
     v-model="value"
     :fetch-suggestions="querySearch"

src/styles/theme/go.scss

@@ -60,6 +60,9 @@
     .top-bar__left i, .top-bar__right i{
       line-height: 50px;
     }
+    .top-bar__left i,.top-bar__right_third i{
+      line-height: 54px !important;
+    }
     .el-menu--horizontal.el-menu{
       border:none
     }

src/styles/top.scss

@@ -65,6 +65,10 @@
       box-shadow: none;
       background-color: #fff !important;
     }
+
+    .el-input__inner::placeholder {
+      color:  #c0c4cc;
+    }
   }
 }
 
@@ -86,6 +90,11 @@
   margin-top: 2px;
   top: 0;
 
+  &.top-bar__right_third{
+    height: 54px !important;
+    color: #fff !important;
+  }
+
   i {
     line-height: variables.$top_height;
   }