左侧自动化菜单入口

src/components/newLayout/components/menu.vue

@@ -2,44 +2,44 @@
   <span style="margin-top: auto">
     <el-popover placement="right-end" trigger="hover" width="400" :open-delay="200">
       <div class="menu-wrapper">
-        <div class="children-menu-wrapper borderBottom normal">
-          <div v-for="(elm, index) in menuBaseData" :key="elm.key">
+        <div class="children-menu-wrapper borderBottom normal no-children">
+          <div v-for="(elm, index) in menuBaseData" :key="elm.key" :style="{width: elm.width}">
             <div
-              v-if="index < 3"
+              v-if="index < 4"
               class="title"
               :class="{ active: active === elm.key }"
               @click="switchProjects(elm)"
             >
             <!-- :style="{ display:index === 2 ? 'none' : 'auto' }" -->
               <img width="16" height="14" :src="elm.iconData" style="position: relative; top: -2px;">
-              {{ elm.name }}
-              <span v-if="elm.key === 'thothFrontend'" style="  position: absolute; top: -8px; right: -25px;">
+              <span class="content">{{ elm.name }}</span>
+              <span v-if="elm.key === 'thothFrontend'" style="  position: absolute; top: -5px; right: -10-px;">
                 <svg xmlns="http://www.w3.org/2000/svg" width="25.925" height="11.431" viewBox="0 0 25.925 11.431"> <g id="组_3108" data-name="组 3108" transform="translate(-1132.681 -133.742)"> <path id="标签_3_" data-name="标签 (3)" d="M10.629,0c.443,0,.8.548.8,1.224V20.483a1.328,1.328,0,0,1-.51,1.14L6.007,25.842a.55.55,0,0,1-.583,0L.511,21.623A1.328,1.328,0,0,1,0,20.483V1.224C0,.548.359,0,.8,0Z" transform="translate(1158.606 133.742) rotate(90)" fill="#409eff" /> <text id="当前" transform="translate(1140 142)" fill="#fff" font-size="8" fontFamily="PingFangSC-Regular, PingFang SC" letterSpacing="0.038em"> <tspan x="0" y="0">当前</tspan> </text> <circle id="椭圆_263" data-name="椭圆 263" cx="1.5" cy="1.5" r="1.5" transform="translate(1136 138)" fill="#fff" /> </g> </svg>
               </span>
             </div>
           </div>
         </div>
-        <div :key="menuBaseData[3].key" class="children-menu-wrapper">
+        <div :key="menuBaseData[4].key" class="children-menu-wrapper">
           <div
             class="title"
-            :class="{ active: active === menuBaseData[3].key }"
-            @click="switchProjects(menuBaseData[3])"
+            :class="{ active: active === menuBaseData[4].key }"
+            @click="switchProjects(menuBaseData[4])"
           >
             <img
               width="16"
               height="16"
-              :src="menuBaseData[3].iconData"
+              :src="menuBaseData[4].iconData"
               style="position: relative; top: -2px;"
             >
-            {{ menuBaseData[3].name }}
+            {{ menuBaseData[4].name }}
           </div>
           <el-row
-            v-if="menuBaseData[3].menuList.length"
+            v-if="menuBaseData[4].menuList.length"
             class="box"
             style="margin-top: 5px"
           >
             <el-col
-              v-for="elm in menuBaseData[3].menuList"
+              v-for="elm in menuBaseData[4].menuList"
               :key="elm.key"
               :span="6"
               class="item-wrapper"
@@ -176,6 +176,18 @@ export default {
         right: 20px;
       }
     }
+    &.no-children {
+      flex-wrap: wrap;
+      padding-bottom: 10px;
+      .title{
+        margin-bottom: 10px;
+        width: 91px;
+        .content {
+          position: relative;
+          margin-left: 5px;
+        }
+      }
+    }
 
     .title {
       cursor: pointer;