优化政务公开页面样式

src/style/zwgk/menuStyle.less

@@ -1,20 +1,55 @@
-.page {
-  background: #fff !important;
+.featureBox {
+  width: 240px;
+  float: left;
+  border-radius: 5px 5px 0 0;
+
+  ::v-deep(.el-menu) {
+    border: none;
+    background: transparent;
+
+    .el-menu-item {
+      height: 80px;
+      font-size: 23px;
+      border-radius: 6px;
+      margin-bottom: 15px;
+      background: #f2f2f2;
+      border: 1px solid #ddd;
+
+      img {
+        width: 40px;
+        float: left;
+        margin-top: 6px;
+        margin-left: 20px;
+        padding-right: 20px;
+      }
+
+      .muneName {
+        width: 110px;
+        display: block;
+        font-size: 23px;
+        color: #1c68c0;
+        line-height: 28px;
+        white-space: normal;
+        word-wrap: break-word;
+      }
+
+      &.is-active {
+        background: #1b68c0;
 
-  .featureBox {
-    width: 240px;
-    float: left;
-    border-radius: 5px 5px 0 0;
+        .muneName {
+          color: #fff;
+        }
+      }
+    }
 
-    ::v-deep(.el-menu) {
-      border: none;
-      background: transparent;
+    //  二级菜单样式
+    .el-sub-menu {
+      margin-bottom: 14px;
 
-      .el-menu-item {
+      .el-sub-menu__title {
         height: 80px;
         font-size: 23px;
         border-radius: 6px;
-        margin-bottom: 15px;
         background: #f2f2f2;
         border: 1px solid #ddd;
 
@@ -36,82 +71,45 @@
           word-wrap: break-word;
         }
 
-        &.is-active {
-          background: #1b68c0;
-
-          .muneName {
-            color: #fff;
-          }
+        .el-icon {
+          color: #1c68c0;
+          font-size: 20px;
         }
       }
 
-      //  二级菜单样式
-      .el-sub-menu {
-        margin-bottom: 14px;
-
-        .el-sub-menu__title {
-          height: 80px;
-          font-size: 23px;
-          border-radius: 6px;
-          background: #f2f2f2;
-          border: 1px solid #ddd;
-
-          img {
-            width: 40px;
-            float: left;
-            margin-top: 6px;
-            margin-left: 20px;
-            padding-right: 20px;
+      .el-menu {
+        .el-menu-item-group {
+          .el-menu-item-group__title {
+            padding: 3px 0 3px 0;
           }
 
-          .muneName {
-            width: 110px;
-            display: block;
-            font-size: 23px;
+          .el-menu-item {
+            margin: 0;
             color: #1c68c0;
-            line-height: 28px;
+            font-size: 20px;
             white-space: normal;
             word-wrap: break-word;
-          }
-          .el-icon{
-            color: #1c68c0;
-            font-size: 20px;
-          }
-        }
 
-        .el-menu {
-          .el-menu-item-group {
-            .el-menu-item-group__title {
-              padding: 3px 0 3px 0;
-            }
-
-            .el-menu-item {
-              margin: 0;
-              color: #1c68c0;
-              font-size: 20px;
-              white-space: normal;
-              word-wrap: break-word;
-
-              &.is-active {
-                color: #fff;
-                background: #1b68c0;
-              }
+            &.is-active {
+              color: #fff;
+              background: #1b68c0;
             }
           }
         }
+      }
+
+      &.is-active {
+        background: transparent;
 
-        &.is-active {
-          background: transparent;
+        .el-sub-menu__title {
+          background: #1b68c0;
 
-          .el-sub-menu__title {
-            background: #1b68c0;
+          .muneName {
+            color: #fff;
+          }
 
-            .muneName {
-              color: #fff;
-            }
-            .el-icon{
-              color: #fff;
-            }
+          .el-icon {
+            color: #fff;
           }
         }
       }

src/views/zwgk/modules/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page" :class="{ homeStyle: props.showView == 'IPP' }">
+  <div class="menuView" :class="{ homeStyle: props.showView == 'IPP' }">
     <div class="searchBox" v-if="props.showView != 'IPP'">
       <input
         type="text"
@@ -39,11 +39,11 @@ function chkSearch() {
 }
 </script>
 <style scoped lang="less">
-.page {
+.menuView {
   width: 1128px;
   height: 100%;
   overflow: hidden;
-  background-color: rgb(242, 242, 242);
+  background-color: #fff;
   margin: 0 auto;
   padding: 20px 36px 20px 36px;