style: 菜单样式

template/admin/src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="custom-bread-crumb">
     <Breadcrumb :style="{ fontSize: `${fontSize}px` }">
-      <BreadcrumbItem v-for="item in list" :key="`${item.path}`" :to="item.path" v-if="listLast[0].path !== homePath">
+      <BreadcrumbItem v-for="item in list" :key="`${item.path}`" v-if="listLast[0].path !== homePath">
         <common-icon style="margin-right: 4px" :type="item.icon || ''" />
         {{ item.title }}
       </BreadcrumbItem>

template/admin/src/components/main/components/side-menu/collapsed-menu.vue

@@ -5,6 +5,7 @@
     :class="hideTitle ? '' : 'collased-menu-dropdown'"
     :transfer="hideTitle"
     :placement="placement"
+    transfer-class-name="dro-style"
   >
     <a
       class="drop-menu-a"
@@ -89,18 +90,32 @@ export default {
 <style lang="less" scoped>
 @import './side-menu.less';
 
-.collased-menu-dropdown {
+/deep/ .collased-menu-dropdown {
   width: 100%;
 }
+
 .child-menu {
   display: flex;
   justify-content: space-between;
   width: 100%;
 }
-/deep/ .ivu-dropdown-rel {
-  width: @side-width !important;
+.ivu-dropdown-menu /deep/ .ivu-dropdown-rel {
+  width: 100% !important;
+  font-size: 14px;
+  line-height: 14px;
+  padding: 14px 10px;
+
+}
+.ivu-dropdown-menu /deep/ .ivu-dropdown-item {
+  width: 130px !important;
+  padding: 14px 10px;
+  font-size: 14px !important;
+  line-height: 14px;
 }
 .drop-menu-a /deep/ .ivu-dropdown-rel {
-  width: @side-width !important;
+  width: 160px !important;
+  font-size: 14px;
+  line-height: 14px;
+  color: #fff;
 }
 </style>

template/admin/src/components/main/components/side-menu/side-menu.vue

@@ -44,9 +44,7 @@
                   :parent-item="item"
                 ></side-menu-item>
                 <menu-item v-else :name="item.path" :key="`menu${item.path}`"
-                  ><span class="title">{{
-                    item.children[0].title
-                  }}</span></menu-item
+                  ><span class="title">{{ item.children[0].title }}</span></menu-item
                 >
               </template>
               <template v-else>
@@ -226,11 +224,10 @@ export default {
 /deep/ .ivu-menu-vertical .ivu-menu-submenu-title-icon {
   right: 8px;
 }
-
 </style>
 <style lang="less">
 @import './side-menu.less';
-.ivu-layout-sider{
+.ivu-layout-sider {
   overflow: unset !important;
 }
 .ivu-menu {
@@ -373,24 +370,24 @@ export default {
         line-height: 14px;
       }
     }
-    // .ivu-menu-submenu {
-    //   .ivu-menu-item {
-    //     padding-left: 23px !important;
-    //   }
-    //   .ivu-menu-submenu {
-    //     .ivu-menu-submenu-title {
-    //       padding-left: 23px !important;
-    //     }
-    //     .ivu-menu-item {
-    //       padding-left: 35px !important;
-    //     }
-    //   }
-    // }
-    // .ivu-menu-vertical .ivu-menu-submenu-title {
-    //   font-size: 14px;
-    //   padding: 12px 10px;
-    //   line-height: 16px;
-    // }
+    .ivu-menu-submenu {
+      .ivu-menu-item {
+        padding-left: 35px !important;
+      }
+      .ivu-menu-submenu {
+        .ivu-menu-submenu-title {
+          padding-left: 35px !important;
+        }
+        .ivu-menu-item {
+          padding-left: 48px !important;
+        }
+      }
+    }
+    .ivu-menu-vertical .ivu-menu-submenu-title {
+      font-size: 14px;
+      padding: 16px 20px;
+      line-height: 16px;
+    }
     .cat-name {
       width: 100%;
       font-size: 14px;
@@ -456,7 +453,7 @@ export default {
     flex-wrap: nowrap;
     .ivu-icon {
       font-size: 14px;
-      margin-right: 8px;
+      margin-right: 6px;
     }
     .title {
       font-size: 14px;

template/admin/src/components/main/components/tags-nav/tags-nav.less

@@ -10,6 +10,18 @@
   width: 100%;
   height: 100%;
 }
+.tag-nav-wrapper {
+  // height: 10px;
+  background: unset;
+  width: 100%;
+  margin: 0 15px 0 0px;
+  overflow: hidden;
+  padding: 0;
+  height: 42px;
+  margin-bottom: 14px;
+  background-color: #fff;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
+}
 .tags-nav {
   position: relative;
   margin-top: 4px;
@@ -31,7 +43,6 @@
     position: absolute;
     top: 0px;
     height: 100%;
-    background: #f5f7f9;
     padding-top: 3px;
     z-index: 10;
     button {
@@ -40,10 +51,10 @@
       text-align: center;
     }
     &.left-btn {
-      left: -16px;
+      left: 1px;
     }
     &.right-btn {
-      right: -16px;
+      right: 16px;
       // border-right: 1px solid #f0f0f0;
     }
   }
@@ -57,7 +68,7 @@
     .scroll-body {
       height: ~'calc(100% - 1px)';
       display: inline-block;
-      padding: 1px 4px 0;
+      padding: 1px 20px 0 20px;
       position: absolute;
       overflow: visible;
       white-space: nowrap;
@@ -65,6 +76,10 @@
       .ivu-tag-dot-inner {
         transition: background 0.2s ease;
       }
+       .ivu-tag-dot{
+        border: none !important;
+        border-right: 1px solid #f2f2f2 !important;
+      }
     }
   }
   .contextmenu {

template/admin/src/components/main/components/tags-nav/tags-nav.vue

@@ -41,6 +41,7 @@
             @contextmenu.prevent.native="contextMenu(item, $event)"
             >{{ showTitleInside(item) }}</Tag
           >
+          <!-- <div class="tag" v-for="(item, index) in list" :key="`tag-nav-${index}`">{{ showTitleInside(item) }}</div> -->
         </transition-group>
       </div>
     </div>

template/admin/src/components/main/main.less

@@ -14,6 +14,7 @@
     background: #fff;
     padding: 0 20px;
     width: 100%;
+    border-bottom: 1px solid #f2f2f2;
   }
   .ivu-layout-header {
     height: @bar-height;
@@ -27,12 +28,6 @@
     height: ~'calc(100vh - 60px)';
     overflow: hidden;
   }
-  .tag-nav-wrapper {
-    padding: 0;
-    height: 42px;
-    background: #f0f0f0;
-    margin-bottom: 14px;
-  }
   .content-wrapper {
     padding: 0 16px;
     height: ~'calc(100% - 80px)';
@@ -47,16 +42,16 @@
   }
 }
 .ivu-menu-item > i {
-  margin-right: 8px !important;
+  margin-right: 6px !important;
 }
 .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
-  margin-right: 8px !important;
+  margin-right: 6px !important;
 }
 .collased-menu-dropdown {
   width: 100%;
   margin: 0;
   line-height: normal;
-  padding: 7px 0 6px 16px;
+  // padding: 7px 0 6px 16px;
   clear: both;
   font-size: 12px !important;
   white-space: nowrap;
@@ -78,5 +73,9 @@
 }
 
 .ivu-select-dropdown.ivu-dropdown-transfer {
-  max-height: 400px;
+  max-height: 800px;
 }
+
+.dro-style {
+  // padding: 0 !important;
+}

template/admin/src/components/main/main.vue

@@ -287,11 +287,6 @@ export default {
   height: 50px;
   transition: all 1s;
 }
-.main .tag-nav-wrapper {
-  // height: 10px;
-  background: unset;
-  padding: 0 15px 0 17px;
-}
 .open-image {
   display: flex;
   align-items: center;