左侧导航显示修改

src/components/SliderScondThree.vue

@@ -11,10 +11,12 @@
                 </div>
             </template>
             <div v-for="(item1, index1) in item.list" @click="setActiveCur(item1, item, index)"
-                :class="['flex-between point gap8', activeFloor == item1[renderKeyNew.subtitle] ? 'curActive' : '']"
+                :class="['flex-between point gap8 menuListItem', activeFloor == item1[renderKeyNew.subtitle] ? 'curActive' : '']"
                 :key="index1">
                 <span class="l-menu-name">{{ item1[renderKeyNew.subtitle] }}</span>
-                <span class="l-price-ing" v-if="!currentMenuItem.unit_price && !currentMenuItem.unit_num">设置价格中</span>
+                <span class="l-price-ing curActive_ing" v-if="!currentMenuItem.unit_price && !currentMenuItem.unit_num">设置价格中</span>
+                <span class="l-price-ing" v-if="item1.unit_price && item1.unit_num">{{ item1.unit_price }}元/{{ item1.unit_num }}字</span>
+                <!-- <span class="l-price-ing" v-if="(!item1.unit_price || !item1.unit_num) && activeFloor == item1[renderKeyNew.subtitle]">设置价格中</span> -->
                 <!-- <span class="l-price-ed">{{unit_desc(item)}}</span> -->
                 <!-- <img v-if="item1[renderKeyNew.SubSelected]" class="selected" src="../assets/menu/is_selected.png" alt=""> -->
             </div>
@@ -22,6 +24,7 @@
     </el-collapse>
 </template>
 
+
 <script>
 import store from '../store';
 import GuipToolTip from "@/components/GuipToolTip.vue";
@@ -299,7 +302,7 @@ export default {
     padding: 11px 0;
     height: 40px;
     line-height: 18px;
-    width: 120px;
+    width: 100%;
     // max-width: 96px;
     box-sizing: border-box;
     span{
@@ -312,8 +315,34 @@ export default {
     }
 }
 
-.l-menu-name {
-    // max-width: 90px;
+.l-price-ed{
+    width: auto;
+    height: 23px;
+    display: flex;
+    flex-direction: column;
+    padding: 5px 8px;
+    gap: 10px;
+    z-index: 1;
+    border-radius: 4px;
+    background: #F2F3F5;
+}
+
+.menuListItem {
+    padding: 0 15px 0 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: Microsoft YaHei UI;
+    gap: 8px;
+    min-width: 0; /* 重要：防止flex容器溢出 */
+}
+.curActive_ing{
+    display: none !important;
+    opacity: 0;
+}
+.menuListItem .l-menu-name {
+    // flex: 1; /* 自动占满剩余空间 */
+    min-width: 0; /* 重要：允许文本截断 */
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -322,36 +351,38 @@ export default {
     height: 36px;
     box-sizing: border-box;
 }
-.l-price-ing{
-    display: none;
-    width: 84px;
+
+.menuListItem .l-price-ing {
+    flex-shrink: 0;
+    min-width: 84px; 
     height: 23px;
     display: flex;
     flex-direction: column;
+    justify-content: center;
     padding: 5px 8px;
     box-sizing: border-box;
-    gap: 10px;
     border-radius: 4px;
     background: #BFDAFF;
+    opacity: 1;
+    white-space: nowrap; 
+    font-family: Microsoft YaHei;
     font-size: 12px;
     font-weight: normal;
     line-height: 13px;
-    opacity: 0;
     letter-spacing: 0.08em;
-}
-.l-price-ed{
-    width: auto;
-    height: 23px;
-    display: flex;
-    flex-direction: column;
-    padding: 5px 8px;
-    gap: 10px;
-    z-index: 1;
-    border-radius: 4px;
+    color: #8A9099;
     background: #F2F3F5;
 }
+.menuListItem{
+    padding: 0 15px 0 16px;
+}
 
 .curActive {
+    .curActive_ing{
+        display: block !important;
+        opacity: 1;
+    }
+    background: #F2F7FF;
     .l-menu-name {
         color: #006AFF;
         font-weight: bold;
@@ -360,6 +391,7 @@ export default {
         opacity: 1;
         display: block;
         color: #006AFF;
+        white-space: nowrap;
         background: #BFDAFF;
     }
     .l-price-ed{
@@ -367,7 +399,6 @@ export default {
         background: #BFDAFF;
     }
 }
-
 .menu-select {
     width: 8px;
     height: 8px;
@@ -381,7 +412,7 @@ export default {
     background-color: #fff;
     height: 100%;
     overflow-y: auto;
-    padding: 21px 15px 21px 16px;
+    padding: 21px 0px 21px 0px;
     box-sizing: border-box;
     box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
 }
@@ -394,6 +425,7 @@ export default {
 ::v-deep .el-collapse-item__header {
     height: 40px;
     border-bottom: none;
+    padding: 0 15px 0 16px;
 }
 
 ::v-deep .el-collapse-item__content {