zpy

src/views/zyyq/index.vue

@@ -37,14 +37,19 @@
                     <div v-for="outerItem3 in outerItem2.children2" :key="outerItem3.mc">
                     <div v-for="outerItem3 in outerItem2.children2" :key="outerItem3.mc">
                       <el-menu-item :index="outerItem3.name + '-' + outerItem3.mc"
                       <el-menu-item :index="outerItem3.name + '-' + outerItem3.mc"
                         @click.native="handleInnerClick(outerItem2.name, outerItem3.mc, outerItem3.id, outerItem3.remark, outerItem.cplx)"
                         @click.native="handleInnerClick(outerItem2.name, outerItem3.mc, outerItem3.id, outerItem3.remark, outerItem.cplx)"
-                        :class="{ 'menu-item-active': activeNameInner === outerItem3.name + '-' + outerItem3.mc }">
+                        :class="{ 'menu-item-active': activeNameInner === outerItem3.name + '-' + outerItem3.mc }"
+                        :style="{
+                          display: 'block',
+                          overflowWrap: 'break-word',
+                          wordWrap: 'break-word',
+                          whiteSpace: 'normal'
+                        }">
                         <img v-if="outerItem3.zx === '1'" src="../../assets/images/new.png" alt="new"
                         <img v-if="outerItem3.zx === '1'" src="../../assets/images/new.png" alt="new"
                           style="width: 20px; height: 20px; margin-left: -20px; vertical-align: middle;" />
                           style="width: 20px; height: 20px; margin-left: -20px; vertical-align: middle;" />
                         <span
                         <span
                           :style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginLeft: '6px' }"></span>
                           :style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginLeft: '6px' }"></span>
 
 
                         <span :style="{
                         <span :style="{
-
                           fontFamily: 'PingFang SC',
                           fontFamily: 'PingFang SC',
                           fontWeight: '500',
                           fontWeight: '500',
                           fontSize: '15px',
                           fontSize: '15px',
@@ -53,7 +58,6 @@
                           textDecorationColor: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '#165BFF' : 'transparent',
                           textDecorationColor: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '#165BFF' : 'transparent',
                           textUnderlineOffset: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '8px' : '0',
                           textUnderlineOffset: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '8px' : '0',
 
 
-
                         }">
                         }">
                           {{ outerItem3.mc }}<span v-if="outerItem3.remark"> ({{ outerItem3.remark }})</span>
                           {{ outerItem3.mc }}<span v-if="outerItem3.remark"> ({{ outerItem3.remark }})</span>
                         </span>
                         </span>
@@ -406,11 +410,24 @@ export default {
   /* 其他可能需要的样式 */
   /* 其他可能需要的样式 */
 }
 }
 
 
-::v-deep.el-submenu .el-menu-item {
-  height: 39px;
-  line-height: 50px;
+::v-deep .el-submenu .el-menu-item {
+  height: auto;
+  /* 默认高度 */
+  line-height: 30px;
   padding: 0 45px;
   padding: 0 45px;
   min-width: 200px;
   min-width: 200px;
+  margin: 10px 0;
+}
+
+@media (max-width: 600px) {
+
+  /* 根据需要调整最大宽度 */
+  ::v-deep .el-submenu .el-menu-item {
+    height: auto;
+    /* 换行时自动高度 */
+    margin: 5px 0;
+    /* 换行时间隔小一点 */
+  }
 }
 }
 
 
 ::v-deep.el-submenu .el-submenu__title {
 ::v-deep.el-submenu .el-submenu__title {