修改小样式

src/assets/less/drawer.css

@@ -15,6 +15,10 @@
   height: 124px;
   background-color: #90caf9;
 }
+.selectTag /deep/ .ant-card-head-title {
+  color: #003f88;
+  margin-top: 10px;
+}
 .selectTag .selected {
   display: flex;
   flex-flow: row wrap;
@@ -28,19 +32,26 @@
   align-items: center;
   border-radius: 0;
 }
-.selectTag /deep/ .ant-card-head-title {
-  color: #003f88;
-  margin-top: 10px;
-}
-.selectTag .ant-tag {
+.selectTag .selected /deep/ .ant-tag {
+  background-color: white;
   border: none;
+  color: black;
+}
+.selectTag .selected /deep/ .anticon-close {
+  color: black;
+}
+.selectTag .selected /deep/ .anticon-close:hover {
+  font-weight: 700;
+  color: red;
 }
 .second {
   background-color: white;
   margin: 0 20px 0 12px;
   height: 50px;
   line-height: 50px;
+  padding-left: px;
   margin-bottom: 100px;
+  border-bottom: 1px dashed #ccc;
 }
 .second span {
   font-size: 14px;
@@ -48,50 +59,38 @@
   display: inline-block;
 }
 .searchLine {
-  margin-top: 106px;
+  margin-top: 100px;
 }
 .searchLine /deep/ .ant-row {
   margin: 10px 0;
 }
-.searchLine /deep/ .ant-row /deep/ .ant-card {
-  background-color: gray;
-}
-.searchLine /deep/ .ant-row /deep/ .ant-card /deep/ .ant-card-head {
-  display: none !important;
-}
-.searchLine /deep/ .ant-row /deep/ .ant-card /deep/ .ant-card-body {
-  background-color: pink !important;
-}
-.searchLine .active {
+.searchLine a.active {
   background-color: rgba(19, 116, 206, 0.5);
   border-radius: 10px;
+  color: white !important;
 }
-.searchLine .active a {
-  color: white;
-}
-.oneMenuItem {
-  text-align: center;
-}
-.LevelTwoMenu {
+.searchLine .LevelTwoMenu {
   display: flex;
   flex-flow: row wrap;
   box-sizing: border-box;
 }
-.LevelTwoMenu .twoMenuItem {
+.searchLine .LevelTwoMenu .twoMenuItem {
   text-align: center;
   background-color: #f3f3f3 !important;
   border: 1px solid #dfdfdf;
-  width: calc((100% - 50px) / 4);
+  width: calc((100% - 38px) / 3);
   display: flex;
-  margin: 0 6px 6px 6px;
+  justify-content: center;
+  align-items: center;
+  margin: 6px;
 }
-.LevelTwoMenu .twoMenuItem a {
+.searchLine .LevelTwoMenu .twoMenuItem a {
   color: #333 !important;
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.LevelTwoMenu .bg {
+.searchLine .LevelTwoMenu .bg {
   background-color: blue;
 }

src/assets/less/drawer.less

@@ -18,6 +18,10 @@
 .selectTag {
   height: 124px; //固定高度
   background-color: #90caf9;
+  /deep/ .ant-card-head-title {
+    color: #003f88;
+    margin-top: 10px;
+  }
   .selected {
     display: flex;
     flex-flow: row wrap;
@@ -30,14 +34,18 @@
       align-items: center;
       border-radius: 0;
     }
-  }
-  /deep/ .ant-card-head-title {
-    color: #003f88;
-    margin-top: 10px;
-  }
-  //不要边框
-  .ant-tag {
-    border: none;
+    /deep/ .ant-tag {
+      background-color: white;
+      border: none;
+      color: black;
+    }
+    /deep/ .anticon-close {
+      color: black;
+    }
+    /deep/ .anticon-close:hover {
+      font-weight: 700;
+      color: red;
+    }
   }
 }
 
@@ -47,65 +55,52 @@
   margin: 0 20px 0 12px;
   height: 50px;
   line-height: 50px;
+  padding-left: px;
   margin-bottom: 100px;
+  border-bottom: 1px dashed #ccc;
   span {
     font-size: 14px;
     color: #333;
     display: inline-block;
   }
 }
-
+// 功能菜单
 .searchLine {
-  margin-top: 106px;
+  margin-top: 100px; //不遮挡 二级菜单
   /deep/ .ant-row {
     margin: 10px 0; //每个菜单的间距
-    /deep/ .ant-card {
-      background-color: gray;
-      /deep/ .ant-card-head {
-        display: none !important;
-      }
-      /deep/ .ant-card-body {
-        background-color: pink !important;
-      }
-    }
   }
 
   //选中的样式
-  .active {
+  a.active {
     background-color: rgba(19, 116, 206, 0.5);
     border-radius: 10px;
-    a {
-      color: white;
-    }
+    color: white !important;
   }
-}
-// 功能列表----------------
-// 一级
-.oneMenuItem {
-  text-align: center;
-}
-// 二级
-.LevelTwoMenu {
-  display: flex;
-  flex-flow: row wrap;
-  box-sizing: border-box;
-  .twoMenuItem {
-    text-align: center;
-    background-color: #f3f3f3 !important;
-    border: 1px solid #dfdfdf;
-    width: calc((100% - 50px) / 4);
+  // 二级菜单
+  .LevelTwoMenu {
     display: flex;
-    margin: 0 6px 6px 6px;
-    // padding: 0 4px;
-    a {
-      color: #333 !important;
-      text-decoration: none;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    flex-flow: row wrap;
+    box-sizing: border-box;
+    .twoMenuItem {
+      text-align: center;
+      background-color: #f3f3f3 !important;
+      border: 1px solid #dfdfdf;
+      width: calc((100% - 38px) / 3);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 6px;
+      a {
+        color: #333 !important;
+        text-decoration: none;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+    .bg {
+      background-color: blue;
     }
-  }
-  .bg {
-    background-color: blue;
   }
 }

src/components/page/GlobalNavFooter.vue

@@ -2,9 +2,9 @@
 <template>
   <div id="navFooter">
     <!-- 底部快捷菜单 -->
-    <a-row style="background:rgba(24, 144, 255,.9);">
+    <a-row>
       <!-- 左 小箭头 -->
-      <a-col :span="1" @click="handleChange">
+      <a-col :span="1" @click="handleChange" style="background:rgba(24, 144, 255,.9);">
         <a class="arrowBtn">
           <a-icon v-if="isShow" type="arrow-left" />
           <a-divider type="vertical" style="width:3px;height:20px;marginBottom:6px;borderRadius:4px;" />
@@ -12,11 +12,11 @@
         </a>
       </a-col>
 
-      <!-- 右 菜单 -->
+      <!-- 右 菜单  -->
       <a-col :span="23">
         <transition-group name="animation">
           <div class="shortcut" v-if="isShow" :key="1">
-            <a-row style="textAlign:center;">
+            <a-row style="textAlign:center;background:rgba(24, 144, 255,.9);">
               <!-- 设置快捷抽屉 -->
               <a-col :span="1">
                 <a href="#" @click="showDrawer" class="setBtn">设置快捷</a>
@@ -29,7 +29,7 @@
               </a-col>
               <!-- 公司名称 -->
               <a-col :span="3">
-                <span style="color:rgba(224, 224, 224);">上海萃颠信息科技有限公司出品</span>
+                <span style="color:#ccc;">上海萃颠信息科技有限公司出品</span>
               </a-col>
             </a-row>
           </div>
@@ -62,7 +62,7 @@
         <a-row>
           <a-col :span="24">
             <a-card title="已选功能" :bordered="false" class="selectTag">
-              <div class="selected">
+              <div v-if="selectList.length > 0" class="selected">
                 <a-tag
                   :key="item.id"
                   v-for="item in selectList"
@@ -71,9 +71,12 @@
                   class="selectedItem"
                 >
                   {{ item.name }}
-                  <!-- <a-empty v-show="this.selectList.length == 0" /> -->
                 </a-tag>
               </div>
+              <!-- 无快捷 -->
+              <span v-if="selectList.length == 0" style="color:#6a040f;marginLeft:12px;">
+                请点击选择快捷菜单
+              </span>
             </a-card>
           </a-col>
         </a-row>
@@ -95,18 +98,17 @@
       <a-row>
         <a-col a-col :span="24">
           <a-card title="" :bordered="false" class="searchLine">
-            <!-- 所有菜单 -->
+            <!-- 一级菜单 -->
             <a-row v-for="menu in menuALL" :key="menu.name">
               <a-col :span="4">
                 <span>{{ menu.name }}：</span>
               </a-col>
-
+              <!-- 二级菜单 -->
               <a-col :span="20" class="LevelTwoMenu">
                 <span v-for="item in menu.childList" :key="item.id" class="twoMenuItem">
-                  <!-- active: 返回的值是布尔值，调用判断布尔值的方法 -->
                   <a
                     href="#"
-                    style="width: 6em"
+                    style="width: 8em"
                     @click.stop="selectItem(item)"
                     :class="{ active: getActive(item.sysPermissionId) }"
                   >
@@ -114,7 +116,7 @@
                   </a>
                 </span>
               </a-col>
-              <a-divider />
+              <a-divider :dashed="true" />
             </a-row>
           </a-card>
         </a-col>
@@ -299,13 +301,14 @@ export default {
 
   // 可消失行
   .shortcut {
+    // background-color: transparent;
     //设置快捷(文字)
     .setBtn {
       font-size: 14px;
       font-weight: 700;
       color: white;
     }
-    .setBtn:hover {
+    .setBtn:active {
       color: orange;
       font-weight: 400;
     }
@@ -324,17 +327,13 @@ export default {
         font-weight: 400;
       }
     }
-    // 右侧公司名称
-    span {
-      // border-radius: ;
-    }
   }
 
   // 动画效果
   .animation-enter,
   .animation-leave-to {
     opacity: 0;
-    transform: translateX(-40px);
+    transform: translateX(-20px);
   }
   .animation-enter-to,
   .animation-leave {