adaptive md

src/assets/styles/adaptive.scss

@@ -7,3 +7,262 @@
     }
   }
 }
+@media screen and (max-width: 1100px) {
+  .home-header {
+    .head-logo {
+      width: 180px;
+    }
+    .menu-list {
+      li {
+        width: 110px;
+
+        span {
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+  .home-navs {
+    width: 180px;
+
+    .nav-head {
+      padding: 15px;
+    }
+
+    .nav-list {
+      padding: 0 15px;
+    }
+  }
+  .home-main {
+    padding-left: 180px;
+  }
+  .home-breadcrumb {
+    padding: 20px;
+  }
+  .home-view {
+    padding: 0 20px;
+  }
+  // part
+  .part-box {
+    margin-bottom: 15px;
+  }
+  .part-box-filter {
+    padding: 15px 15px 0;
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+  }
+  // rule-warning
+  .rule-warning {
+    .el-form {
+      margin: 0 auto;
+      width: 400px;
+    }
+    .rule-btns {
+      margin: 26px 0 0;
+      text-align: center;
+    }
+  }
+}
+@media screen and (max-width: 768px) {
+  .home-header {
+    .head-logo {
+      width: auto;
+    }
+    .menu-list {
+      display: none;
+    }
+    .head-menu-btn {
+      display: block;
+    }
+  }
+  .home-navs {
+    display: none;
+  }
+  .home-navs-full {
+    display: block;
+    position: relative;
+    top: 0;
+    width: 100%;
+    background: transparent;
+    margin-bottom: 20px;
+    font-size: 14px;
+    &::before {
+      display: none;
+    }
+
+    .nav-head {
+      padding: 10px 0;
+    }
+
+    .nav-list {
+      padding: 0;
+    }
+    .nav-item-main {
+      padding: 10px 0;
+    }
+    .nav-item-icon {
+      top: 15px;
+    }
+  }
+  .home-main {
+    padding-left: 0;
+  }
+  // el-dialog
+  .el-dialog {
+    width: 100% !important;
+  }
+  // .el-pagination
+  .el-pagination {
+    > button {
+      margin: 0 !important;
+    }
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .login-home {
+    overflow: hidden;
+  }
+  .login-box {
+    width: 100%;
+  }
+  .login-body {
+    width: auto;
+    margin: 0 15px;
+    padding: 50px 20px;
+  }
+  .home-breadcrumb {
+    padding: 15px;
+  }
+  .home-view {
+    padding: 0 15px;
+  }
+  .home-header {
+    height: 50px;
+    .head-logo {
+      padding: 10px 15px;
+    }
+    .head-menu-btn {
+      padding: 7px 15px;
+    }
+  }
+  .home-body {
+    top: 50px;
+  }
+
+  .part-box-filter {
+    padding: 15px;
+    .el-form {
+      .el-form-item {
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .part-box-pad {
+    padding: 15px;
+  }
+  // .rule-warning
+  .rule-warning {
+    border-radius: 0;
+    border: none;
+    padding: 0;
+    .rule-tips {
+      line-height: 1.2;
+      padding: 10px 0;
+    }
+    .el-form {
+      padding: 15px;
+    }
+  }
+  .rule-card {
+    padding: 15px;
+    > .el-form {
+      padding: 0 !important;
+    }
+    .el-form-item {
+      margin-left: 0 !important;
+    }
+  }
+  .business-fields {
+    padding: 15px;
+  }
+  // .task-detail
+  .task-detail {
+    border: none;
+    .task-title {
+      font-size: 14px;
+      line-height: 24px;
+      padding: 10px 0;
+      border: none;
+      h2 span {
+        display: block;
+      }
+    }
+
+    .task-body {
+      padding: 0;
+      &::before {
+        display: none;
+      }
+    }
+  }
+  // .table
+  .table {
+    th,
+    td {
+      font-size: 14px !important;
+      padding: 10px !important;
+    }
+  }
+  // .upload-file-view
+  .upload-file-view {
+    display: block !important;
+    > .el-input {
+      width: 100% !important;
+
+      + div {
+        width: 50%;
+        margin: 5px 5px 5px 0 !important;
+      }
+    }
+    .el-upload {
+      .el-button {
+        width: 100%;
+      }
+    }
+
+    + .el-button {
+      width: 50%;
+      margin: 0 !important;
+    }
+  }
+
+  // le-form
+  .el-form {
+    width: 100% !important;
+    box-sizing: border-box;
+    min-width: 0 !important;
+    .el-form-item {
+      display: block;
+      margin-right: 0;
+    }
+    .el-form-item__label {
+      float: none;
+      display: block;
+      line-height: 30px;
+      text-align: left;
+    }
+    .el-form-item__content {
+      display: block;
+      margin: 0 !important;
+      > div[class^="el"] {
+        width: 100% !important;
+      }
+    }
+  }
+  // el-table
+  .el-table__header thead {
+    font-size: 14px;
+  }
+}

src/assets/styles/home.scss

@@ -168,6 +168,39 @@
       }
     }
   }
+  // .head-menu-btn
+  .head-menu-btn {
+    display: none;
+    float: right;
+    line-height: 36px;
+    padding: 12px 15px;
+    text-align: center;
+    > span {
+      display: block;
+      height: 36px;
+      width: 36px;
+      border-radius: 5px;
+      background-color: rgba($color: #fff, $alpha: 0.3);
+    }
+    i {
+      font-size: 22px;
+      vertical-align: middle;
+    }
+  }
+}
+// menu-dialog
+.menu-dialog {
+  .el-dialog.is-fullscreen {
+    border-radius: 0;
+    box-shadow: none;
+
+    .el-dialog__body {
+      padding: 10px 20px;
+      &::after {
+        display: none;
+      }
+    }
+  }
 }
 
 // home-breadcrumb

src/views/Home.vue

@@ -35,6 +35,9 @@
           </li>
         </ul>
       </div>
+      <div class="head-menu-btn" @click="showMenu">
+        <span><i class="el-icon-menu"></i></span>
+      </div>
     </div>
 
     <div class="home-navs" v-if="curNav">
@@ -92,6 +95,59 @@
         </div>
       </div>
     </div>
+
+    <!-- popover menu-->
+    <el-dialog
+      class="menu-dialog"
+      :visible.sync="menuDailogIsShow"
+      title="导航菜单"
+      top="60px"
+      fullscreen
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+    >
+      <div
+        class="home-navs home-navs-full"
+        v-for="(mainNav, mainNo) in navs"
+        :key="mainNo"
+      >
+        <div class="nav-head">
+          <i :class="['icon', `icon-${mainNav.router}-gray`]"></i>
+          <span>{{ mainNav.title }}</span>
+        </div>
+        <ul class="nav-list">
+          <li
+            class="nav-item"
+            v-for="(nav, subNo) in mainNav.children"
+            :key="subNo"
+          >
+            <div
+              :class="[
+                'nav-item-main',
+                {
+                  'nav-item-main-act':
+                    curMainIndex === mainNo && curSubIndex === subNo
+                }
+              ]"
+              @click="switchNavDetail(mainNo, subNo)"
+            >
+              <p class="nav-item-cont">{{ nav.title }}</p>
+              <span class="nav-item-icon nav-item-icon-right">
+                <i
+                  :class="[
+                    'icon',
+                    curMainIndex === mainNo && curSubIndex === subNo
+                      ? 'icon-arrow-right-act'
+                      : 'icon-arrow-right'
+                  ]"
+                ></i>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -109,7 +165,8 @@ export default {
       validRoutes: [],
       curMainIndex: 0,
       curSubIndex: 0,
-      breadcrumbs: []
+      breadcrumbs: [],
+      menuDailogIsShow: false
     };
   },
   watch: {
@@ -124,6 +181,8 @@ export default {
   },
   created() {
     this.getMenus();
+    // this.navs = localNavs;
+    // this.actCurNav();
   },
   methods: {
     async getMenus() {
@@ -245,6 +304,15 @@ export default {
           this.$router.push({ name: "Login" });
         })
         .catch(() => {});
+    },
+    // popover menu
+    showMenu() {
+      this.menuDailogIsShow = !this.menuDailogIsShow;
+    },
+    switchNavDetail(mainNo, subNo) {
+      this.curMainIndex = mainNo;
+      this.switchNav(subNo);
+      this.showMenu();
     }
   }
 };