From bc2db52d966c8bc2805422b979ee65b5d0ffd121 Mon Sep 17 00:00:00 2001
From: jinna <jn517618@163.com>
Date: Thu, 4 Sep 2025 11:21:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/right_pull.png        | Bin 0 -> 272 bytes
 src/assets/right_pull_white.png  | Bin 0 -> 251 bytes
 src/page/index/index.vue         |   2 +-
 src/page/index/sidebar/index.vue | 106 +++++++++++++++++++++++--------
 4 files changed, 80 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/right_pull.png
 create mode 100644 src/assets/right_pull_white.png

diff --git a/src/assets/right_pull.png b/src/assets/right_pull.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e82522fccc24e50d6447650f096089d0c3111b6
GIT binary patch
literal 272
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0y_qn<8~Ar*{sCK_@bG7xEtuiM+b
zn7u$?b!b6ARH3ko_xZ&4imdA9qIW~IzDj)4^F8zWK|u5+vk$CHKMyI(uXyNG(HA1@
z(8Sl|qLX!i&nA7x&0W_P@V!Z>uVPbMk-*3le0H74g41&La&e2QD{4!B^q8%j>hp8~
zkL|R>;>IGqnxXl+=QotOckbWv*vM#M!s<zne|%=KU7`Bx-kn{N#U84{Vt-p@Uu;y5
z`t{-FjAqt-GnNPO{kv%MOor+IN{0J07HbG|?9~VQ<NyDeAMectGT1;KVrGa}m7jKg
S&xtyq2!p4qpUXO@geCy#Lu!=(

literal 0
HcmV?d00001

diff --git a/src/assets/right_pull_white.png b/src/assets/right_pull_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca68287b8413d9f30ca3dac7389e64c0d7d51664
GIT binary patch
literal 251
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0y_4W2HJAr*{sChp}uWFXL58`n08
zQ6oTVg2sdwnL!5Za;l=t7aT>8DV#p=U1h?eBbM45-<?dqf8TnqgxI_vkrgHz6Em!Z
zeN8ssI-@naJt{;vC-y*E%A%?V-(My8>in5yzazYA^@pBd-$qftBmcG?t_-ZX(kFYc
zj7ufW*ZR_dt<md0b?#3+5gX!NRHDK@N%%(d_Irz>CMjzcas-wxP3X*t0m?jCvTMbK
usmxuLE6w78PX7Ntmy5?7$Y2Axota@l=^IOyzi%vnA`G6celF{r5}E*d&|wGw

literal 0
HcmV?d00001

diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index 369cc4f..7625922 100644
--- a/src/page/index/index.vue
+++ b/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'" />
diff --git a/src/page/index/sidebar/index.vue b/src/page/index/sidebar/index.vue
index 1c47f9b..0dc00cd 100644
--- a/src/page/index/sidebar/index.vue
+++ b/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;
+    }
   }
 }