手机端适配

src/App.vue

@@ -4,14 +4,24 @@
   </div>
 </template>
 <script>
-import DevicePixelRatio from "./components/common/devicePixelRatio";
 export default {
   name: "App",
   data() {
-    return {};
+    return {
+      pageScreen: window.innerWidth,
+    };
+  },
+  mounted() {
+    this.pageWidth();
+  },
+  methods: {
+    pageWidth() {
+      console.log(this.pageScreen);
+      window.addEventListener("resize", () => {
+        this.pageScreen = window.innerWidth;
+      });
+    },
   },
-  mounted() {},
-  methods: {},
   created() {
     //new DevicePixelRatio().init();
   },

src/components/common/Home.vue

@@ -46,4 +46,204 @@ export default {
     box-sizing: border-box;
   }
 }
+@media (max-width: 900px) {
+  .greenStyle .header {
+    // background: #000;
+    width: 100%;
+    height: 40px;
+    font-size: 12px;
+    .logo {
+      display: none;
+    }
+    .el-menu-item {
+      padding: 0 10px;
+    }
+    .el-menu-item [class^="el-icon-"] {
+      width: 12px;
+    }
+    .sidebar .el-menu--horizontal .el-menu-item {
+      height: 40px;
+      line-height: 40px;
+
+      font-size: 12px;
+      i {
+        font-size: 12px;
+      }
+    }
+    .sidebar .el-menu--horizontal .el-submenu .el-submenu__title {
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+      i {
+        font-size: 12px;
+      }
+    }
+    .header-user-con {
+      height: 40px;
+      .user-avator {
+        margin-left: 4px;
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .user-avator {
+        //display: none;
+      }
+    }
+    .header-right {
+      padding-right: 12px;
+    }
+  }
+  .content-box {
+    top: 41px;
+    //首页
+    .stritleEchartsPage {
+      .el-card .el-card__body {
+        padding: 8px;
+        height: calc(100% - 16px);
+      }
+      .echart-top {
+        .box-card {
+          h3 {
+            font-size: 12px;
+            line-height: 20px;
+          }
+          .bottomM {
+            p {
+              padding: 1.5%;
+              margin: 1.5%;
+              span {
+                font-size: 12px !important;
+              }
+            }
+          }
+          .chartClass {
+            zoom: 0.5;
+          }
+          .dateBox {
+            top: 8px;
+            right: 8px;
+            .el-input__inner {
+              height: 20px;
+              line-height: 20px;
+            }
+            .el-input__icon {
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+    //realMonitor实时监控
+    .realMonitor {
+      .monitor-container {
+        .sideBar {
+          width: 200px;
+          .radioFilter {
+            .refresh {
+              display: none;
+            }
+          }
+        }
+        .picSetBox {
+          .parameterArea {
+            width: 180px;
+            .setTimebtn .buttonGroup .el-button {
+              width: 84px;
+            }
+            .setfocalLength {
+              .selectChannel {
+                .labelname {
+                  font-size: 12px;
+                }
+              }
+              .buttonGroup .el-button {
+                width: 84px;
+              }
+            }
+          }
+        }
+        .el-date-editor.el-input,
+        .el-date-editor.el-input__inner {
+          width: 174px;
+        }
+      }
+      .infoDialog {
+        .el-dialog {
+        }
+      }
+      .setTimeDialog {
+        .el-dialog {
+          width: 80% !important;
+          margin-top: 15vh !important;
+        }
+      }
+    }
+    //realTimeSearch历史图片
+    .realTimeSearch {
+      height: auto;
+      .searchMain {
+        .searchBox {
+          .el-form-item__label {
+            font-size: 12px;
+          }
+          .el-select {
+            width: 100px;
+          }
+          .el-date-editor.el-input,
+          .el-date-editor.el-input__inner {
+            width: 188px;
+          }
+        }
+      }
+      .pictureBox {
+        height: 100%;
+        overflow: auto;
+        .imgList {
+          width: calc((100% - 50px) / 3);
+          height: auto;
+          margin: 2px;
+          .bigpic {
+            position: relative;
+            img {
+              height: auto;
+            }
+            .caption {
+              position: absolute;
+              bottom: 0px;
+              background: #169e8ca1;
+              width: calc(100% - 8px);
+              padding: 4px;
+              .infoTop {
+                color: #fff;
+                font-size: 12px;
+              }
+              .infoBottom {
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+    //告警处理
+    .alarmHandBox {
+      height: auto;
+    }
+    .lineInformation,
+    .towerinfobox,
+    .camerChannel,
+    .photoGraphicDevice,
+    .deviceInformation,
+    .deviceReport,
+    .globalBox {
+      height: auto;
+      .el-dialog {
+        width: 100% !important;
+        margin-top: 120px !important;
+      }
+    }
+  }
+}
 </style>

src/components/common/Sidebar.vue

@@ -328,6 +328,9 @@ export default {
       height: 70px;
       line-height: 70px;
     }
+    .el-submenu__title {
+      padding: 0 10px;
+    }
     .el-dropdown-menu__item,
     .el-menu-item,
     .el-submenu__title {

src/main.js

@@ -2,7 +2,7 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-//import "./utils/rem";
+
 //引入element-ui
 import "../src/assets/css/theme/index.css"; //l绿色主题
 import ElementUI from "element-ui";

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import MobilePage from "../views/realTimeMonitor/mobile_index.vue";
-import PCPage from "../views/realTimeMonitor/index.vue";
+// import MobilePage from "../views/realTimeMonitor/mobile_index.vue";
+// import PCPage from "../views/realTimeMonitor/index.vue";
 Vue.use(VueRouter);
 
 const routes = [
@@ -30,7 +30,10 @@ const routes = [
 
       {
         path: "/realTimeMonitor",
-        component: window.innerWidth < 768 ? MobilePage : PCPage,
+        component: () =>
+          import(
+            /* webpackChunkName: "home" */ "../views/realTimeMonitor/index.vue"
+          ),
         meta: {
           title: "实时监控",
           permission: true,