header: 布局调整

src/components/newLayout/components/menu.vue

@@ -1,9 +1,9 @@
 <template>
   <span style="margin-top: auto">
-    <el-popover placement="right-end" trigger="hover" width="466" :open-delay="200">
+    <el-popover placement="right-end" trigger="hover" width="400" :open-delay="200">
       <div class="menu-wrapper">
-        <div class="children-menu-wrapper borderBottom">
-          <div v-for="(elm, index) in [...menuBaseData].splice(0,3)" :key="elm.key">
+        <div class="children-menu-wrapper borderBottom normal">
+          <div v-for="(elm, index) in [...menuBaseData].splice(0, 3)" :key="elm.key">
             <div
               v-if="index < 3"
               class="title"
@@ -11,7 +11,7 @@
               :style="{ display:index === 2 ? 'none' : 'auto' }"
               @click="switchProjects(elm)"
             >
-              <img width="16" height="14" :src="elm.iconData" style="position: relative; top: -2px; margin-right: 10px">
+              <img width="16" height="14" :src="elm.iconData" style="position: relative; top: -2px; margin-right: 5px">
               {{ elm.name }}
               <span v-if="elm.key === 'thothFrontend'" style="  position: absolute; top: -8px; right: -25px;">
                 <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>
@@ -29,7 +29,7 @@
               width="16"
               height="16"
               :src="menuBaseData[3].iconData"
-              style="position: relative; top: -2px; margin-right: 10px"
+              style="position: relative; top: -2px; margin-right: 5px"
             >
             {{ menuBaseData[3].name }}
           </div>
@@ -50,7 +50,7 @@
                     class="iconfont icon"
                     :class="elm.menuBase.class"
                     :style="{
-                      fontSize: '22px',
+                      fontSize: '18px',
                       color: elm.menuBase.color && !elm.menuBase.class ? elm.menuBase.color : 'transparent'
                     }"
                     >{{ translateHtmlCharater(elm.menuBase.icon) }}</i
@@ -136,6 +136,9 @@ export default {
 </script>
 
 <style scoped lang="less">
+/deep/.el-popover{
+  padding: 0;
+}
 .menu-wrapper-icon {
   font-size: 30px;
   line-height: 1;
@@ -145,8 +148,9 @@ export default {
 }
 
 .menu-wrapper {
-  width: 440px;
-  padding: 12px 0px 0px;
+  width: 100%;
+  padding: 0;
+  // padding: 12px 0px 0px;
 
   .children-menu-wrapper {
     line-height: normal;
@@ -158,8 +162,8 @@ export default {
     padding: 0 20px;
 
     &.borderBottom {
-      margin-bottom: 20px;
-      padding-bottom: 20px;
+      margin-bottom: 18px;
+      padding-bottom: 18px;
       position: relative;
 
       &:after {
@@ -203,18 +207,18 @@ export default {
       //grid-template-columns: repeat(3, 33.33%);
       //grid-row-gap: 40px;
       //grid-column-gap: 40px;
-      padding: 0 15px;
+      padding: 0 0px;
 
       .item-wrapper {
         cursor: pointer;
         margin-top: 14px;
         text-align: center !important;
-        height: 65px;
+        height: 50px;
         padding: 0 !important;
 
         .name {
           margin-top: 6px;
-          font-size: 14px;
+          font-size: 12px;
           line-height: 1;
         }
 
@@ -237,6 +241,12 @@ export default {
         display: none;
       }
     }
+    &.normal{
+      justify-content: normal;
+      .title{
+        margin-right: 30px
+      }
+    }
   }
 
   .active {