兼容视图到1100

src/App.vue

@@ -39,5 +39,6 @@ body {
   // overflow-y: auto;
   width: 100%;
   height: 100%;
+  min-width: 1100px;
 }
 </style>

src/assets/index.scss

@@ -64,3 +64,138 @@ html, body, #app{
 .large-icon {
   font-size: 2em;
 }
+@media screen {
+  @media (max-width: 1366px) {
+    h4 {
+      font-size: 16px !important;
+    }
+    // 主页
+    .heads {
+      .top {
+        height: 300px;
+      }
+      .nav {
+        .el-menu {
+          width: 90%;
+        }
+      }
+    }
+    .home {
+      .listBox {
+        width: 80% !important;
+      }
+      .links {
+        width: 80% !important;
+      }
+    }
+    .foots {
+      .main {
+        width: 70% !important;
+      }
+    }
+    // 列表
+    .list {
+      h2 {
+        font-size: 20px;
+      }
+      width: 90% !important;
+      .listHome {
+        .listBoxLeft {
+          .nav{
+            .titlename {
+              font-size: 28px;
+            }
+          }
+        }
+        .listBoxRight {
+          .listBox {
+            .el-card__body {
+              .el-image {
+                height: 120px !important;
+              }
+            }
+          } 
+        }
+      }
+    }
+  }
+  // 小于1800
+  @media (max-width: 1260px) {
+    h4 {
+      font-size: 16px !important;
+    }
+    // 主页
+    .heads {
+      .top {
+        height: 250px;
+      }
+      .nav {
+        .el-menu {
+          width: 100%;
+        }
+      }
+    }
+    .home {
+      .listBox {
+        width: 95% !important;
+      }
+      .links {
+        width: 95% !important;
+      }
+    }
+    .foots {
+      .main {
+        width: 80% !important;
+      }
+    }
+    // 列表
+    .list {
+      h2 {
+        font-size: 18px;
+      }
+      width: 95% !important;
+      .listHome {
+        .listBoxLeft {
+          .nav{
+            .titlename {
+              font-size: 24px;
+            }
+          }
+        }
+        .listBoxRight {
+          .listBox {
+            .el-card__body {
+              .el-image {
+                margin-top: 2%;
+                height: 100px !important;
+              }
+            }
+          } 
+        }
+      }
+    }
+  }
+  @media (max-width: 1170px) {
+    // 主页
+    .heads {
+      .top {
+        height: 250px;
+      }
+      .nav {
+        .el-menu {
+          width: 100%;
+          .menuitem {
+            .menubox {
+              li {
+                font-size: 15px;
+              }
+            }
+            .title {
+              font-size: 15px;
+            }
+          }
+        }
+      }
+    }
+  }
+}