Browse Source

问题修改

wangcahngsheng 1 year ago
parent
commit
c6d14b0fbb
1 changed files with 43 additions and 6 deletions
  1. 43 6
      src/views/homePage.vue

+ 43 - 6
src/views/homePage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="homePage">
         <div class="frameMain" :style="allHeight">
-            <div class="menuList">
+            <div class="menuList" :class="showMenuSty()">
                 <el-menu :default-active="$route.path" router :unique-opened="true" :default-openeds="openeds"
                     @select="handleNodeClick" text-color="#fff" background-color="#184FB4" active-text-color="#fff">
                     <!-- 引入组件 -->
@@ -69,7 +69,9 @@
                 },
                 closeBtn: closeBtn,
                 userName: '',
-                isSinglePoint: true
+                isSinglePoint: true,
+                winPix: window.devicePixelRatio,
+                innerWidth: window.innerWidth
             }
         },
         created() {
@@ -374,6 +376,18 @@
                     }
                 })
             },
+            showMenuSty() {
+                let str = ''
+                console.log('innerWidth===>>>', this.innerWidth)
+                if (this.winPix === 1.25) {
+                    str = 'menuList125'
+                } else {
+                    if (this.innerWidth > 1800) {
+                        str = 'menuList100'
+                    }
+                }
+                return str
+            },
             changeMenuData(data) {
                 let childArr = []
                 data.forEach(item => {
@@ -560,8 +574,6 @@
                                 margin-bottom: 10px;
                                 border-radius: 15px 0 0 15px;
                                 width: 90%;
-                                position: relative;
-                                left: 12%;
                                 padding-left: 15px;
                             }
 
@@ -571,8 +583,6 @@
                                 border-radius: 15px 0 0 15px;
                                 color: #2778FF;
                                 width: 90%;
-                                position: relative;
-                                left: 12%;
                                 padding-left: 15px;
                             }
 
@@ -584,6 +594,33 @@
                 }
             }
 
+            .menuList100{
+                .el-sub-menu {
+                    .el-menu-item {
+                        position: relative;
+                        left: 10%;
+                    }
+                    .el-menu-item:hover,
+                    .el-menu-item.is-active {
+                        position: relative;
+                        left: 10% !important;
+                    }
+                }
+            }
+            .menuList125{
+                .el-sub-menu {
+                    .el-menu-item {
+                        position: relative;
+                        left: 7%;
+                    }
+                    .el-menu-item:hover,
+                    .el-menu-item.is-active {
+                        position: relative;
+                        left: 7% !important;
+                    }
+                }
+            }
+
             .homeMain {
                 width: 86vw;