样式修改

src/page/index/index.vue

@@ -2,7 +2,7 @@
   <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' }"
+        <div class="avue-sidebar" v-show="validSidebar" :style="{ width: setting.styleRadio == '3' && '195px',background: setting.styleRadio == '3' && '#f7fafc'}"
           :class="setting.styleRadio == '2' ? 'styleRadio' : ''">
           <!-- 左侧导航栏 -->
           <logo v-if="setting.styleRadio == '1' || setting.styleRadio == '3'|| setting.styleRadio == '4'" />

src/page/index/sidebar/index.vue

@@ -10,23 +10,35 @@
   </el-menu>
 
   <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
-  <div style="display: flex;" v-if="setting.styleRadio == '3'">
+  <div class="left_menu_box" style="display: flex;" 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"
         :class="index == selectIndex ? 'active' : ''">
-        <el-tooltip v-if="item.name && item.name.length > 4" class="item" effect="dark" :content="item.name" placement="right-start">
-          <div class="left_menu_item">
-            <i :class="item.source" style="margin-bottom: 5px;"></i>
-                <span class="name_text">{{ item.name }}</span>
-          </div>
-        </el-tooltip>
-        <div class="left_menu_item" v-else>
-          <i :class="item.source" style="margin-bottom: 5px;"></i>
-              <span class="name_text">{{ item.name }}</span>
-        </div>
+        <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;">
+            <template #reference>
+              <div class="left_menu_item">
+                <div style="display: flex;align-items: center;">
+                  <i :class="item.source" ></i>
+                  <span class="name_text">{{ item.name }}</span>
+                </div>
+                <div class="img_box" v-if="item.children"></div>
+              </div>
+            </template>
+             <template #default v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
+              <div class="third_box" v-if="item.children && item.children.length != 0">
+                  <div class="third_box_item" v-for="third in item.children" :key="third.id"  @click='clickPage(third)'>
+                    {{ third.name }}
+                  </div>
+                </div>
+             </template>
+        </el-popover>
+          
       </div>
     </div>
-    <div style="flex: 1;">
+    <!-- <div style="flex: 1;">
       <div
         v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
         <div class="left_top">{{ leftMenu[selectIndex].name }} </div>
@@ -54,7 +66,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -86,6 +98,8 @@ export default {
     },
   },
   mounted() {
+    console.log('left--------------------------',this.leftMenu)
+    console.log('menu--------------------------',this.menu)
     if(this.setting.styleRadio=='3'){
       this.index.openMenu2();
     }else{
@@ -117,50 +131,76 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+
+.left_menu_box{
+  // background: #f7fafc;
+}
 .no_child {
-  width: 185px;
+  width: 195px;
 }
 
 .children {
-  width: 60px;
+  width: 195px;
+}
+.top_title{
+  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;
 }
 
 .left_menu {
   width: 100%;
-  background: #f7fafc;
-  color: #41a5ff;
+  // color: #41a5ff;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: #333;
+  font-family: Helvetica Neue, Helvetica, BlinkMacSystemFont, Segoe UI, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-size: 14px;
 
   &.active {
-    background: #41a5ff;
-    color: #fff;
+    // background: #41a5ff;
+    // color: #fff;
   }
+  
 
   .left_menu_item {
     cursor: pointer;
-    padding: 10px 0;
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
+    padding: 0 10px;
+    height: 46px;
     align-items: center;
     font-size: 12px;
     font-family: Microsoft YaHei-Regular, Microsoft YaHei;
     font-weight: 500;
     color: var(--header-bkColor-hover);
     text-align: center;
-    width: 60px;
+    width: 100%;
     word-break: keep-all;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
+    .img_box{
+      width: 14px;
+      height: 14px;
+      background: url('@/assets/right_pull.png');
+    }
+
     .name_text{
-      display: inline-block;
-      width: 52px;
-      overflow: hidden;
-      text-overflow: ellipsis;  /* 超出宽度200px后显示省略号 */
-      white-space: nowrap;  /* 限制不允许换行 */
+      // display: inline-block;
+      // width: 52px;
+      margin-left: 10px;
+      // overflow: hidden;
+      // text-overflow: ellipsis;  /* 超出宽度200px后显示省略号 */
+      // white-space: nowrap;  /* 限制不允许换行 */
     }
 
     
@@ -168,6 +208,12 @@ export default {
     &:hover {
       background: #0066ff;
       color: #fff;
+
+      .img_box{
+        width: 14px;
+        height: 14px;
+        background: url('@/assets/right_pull_white.png');
+      }
     }
   }
 }
@@ -241,6 +287,7 @@ export default {
   .third_box_item {
     min-width: 140px;
     color: #5a6f82;
+    cursor: pointer;
     text-align: left;
     font-size: 14px;
     line-height: 46px;
@@ -252,6 +299,11 @@ export default {
     word-break: keep-all;
     white-space: nowrap;
     box-sizing: border-box;
+
+    &:hover{
+      background: #0066ff;
+      color: #fff;
+    }
   }
 }