ui update

src/assets/style/fixed/element.scss

@@ -5,7 +5,7 @@
   }
   &.is-hover-shadow {
     &:hover {
-      box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+      // box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
     }
   }
 }

src/assets/style/public-class.scss

@@ -90,18 +90,19 @@ $sizes: (0, 5, 10, 15, 20);
 // }
 // //头部导航一级菜单的样式
 .theme-d2 .d2-theme-header .el-menu .el-menu-item{
-  height: 50px;
+  height: 2.6vw;
   // border-right:linear-gradient(#193a6d, #487B98 20%,#193a6d 80%) !important;
   border-right:linear-gradient(red yellow) !important;
 }
 // 去除二级子菜单的上下padding
 .el-menu--horizontal .el-menu--popup {
   padding: 0;
+  box-shadow: none !important;
 }
 .el-menu--horizontal .el-menu {
   // 设置子菜单四周上左和右下的阴影
-  box-shadow: 2px 2px 2px 1px rgba(228, 231, 235, 0.2),-2px -2px 2px 1px rgba(228, 231, 235, 0.2);
-  border-radius: 2px;
+  // box-shadow: 2px 2px 2px 1px rgba(228, 231, 235, 0.2),-2px -2px 2px 1px rgba(228, 231, 235, 0.2);
+  // border-radius: 2px;
   background-color: transparent;
 }
 //头部导航二级菜单选中后整体的背景色
@@ -116,7 +117,7 @@ $sizes: (0, 5, 10, 15, 20);
   // color: #fff !important;
 }
 .el-menu--horizontal .el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
-  min-width: 142px !important;
+  // min-width: 142px !important;
 }
 .el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title {
   color: #fff !important;
@@ -377,6 +378,7 @@ button.el-button.el-button--delebtn.el-button--mini{
 }
 .main .zt_right{
   // background-color: #fff;
+  height: 72vh;
 }
 .el-checkbox__input.is-checked+.el-checkbox__label{
   color: #008775 !important;

src/assets/style/theme/theme-base.scss

@@ -1,12 +1,12 @@
 // 减小弹出菜单的项目高度
 .el-menu--popup {
   .el-menu-item {
-    height: 36px;
-    line-height: 36px;
+    height: 1.875vw;
+    line-height: 1.875vw;
   }
   .el-submenu__title {
-    height: 36px;
-    line-height: 36px;
+    height: 1.875vw;
+    line-height: 1.875vw;
   }
 }
 
@@ -27,10 +27,10 @@
   .d2-layout-header-aside-content {
     @extend %full;
     .d2-theme-header {
-      height: 90px;
+      height: 4.69vw;
       .d2-theme-header-menu {
         overflow: hidden;
-        margin-left:20px;
+        margin-left:7vw;
         &.is-scrollable {
           position: relative;
           padding: 0 20px;
@@ -42,7 +42,7 @@
         }
         .d2-theme-header-menu__content {
           overflow: hidden;
-          height: 50px;
+          height: 2.6vw;
           .d2-theme-header-menu__scroll {
             white-space: nowrap;
             position: relative;
@@ -53,6 +53,10 @@
             transition: transform .3s,-webkit-transform .3s;
             float: left;
           }
+          .fa{
+            font-size: 0.83vw !important;
+            margin-right: 0.3vw !important;
+          }
         }
         .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
           height: 60px;
@@ -172,7 +176,7 @@
       // 顶栏右侧的按钮
       .d2-header-right {
         float: right;
-        height: 90px;
+        height: 4.69vw;
         display: flex;
         align-items: center;
         .btn-text {
@@ -183,8 +187,14 @@
             padding: 9px 6px;
           }
         }
+        .fa-user{
+          font-size: 0.83vw !important;
+        }
         .el-dropdown {
           @extend %unable-select;
+          span{
+          font-size: 0.83vw !important;
+          }
         }
       }
     }

src/layout/header-aside/layout.vue

@@ -175,13 +175,17 @@ export default {
 //头部导航背景色
 .d2-theme-header {
   background-image: url(../../assets/images/nav-bg.jpg);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 .theme-d2 .d2-theme-header .el-menu .el-submenu .el-submenu__title{
-  height: 50px;
-  line-height: 50px;
+  height: 2.6vw;
+  line-height: 2.6vw;
+  font-size: 0.94vw;
+
 }
 .d2-layout-header-aside-group .d2-layout-header-aside-content .d2-theme-header .el-menu .el-menu-item{
-  line-height: 50px;
+  line-height: 2.6vw;
 }
 //头部每个菜单宽度
 .theme-d2 .d2-theme-header .el-menu .el-menu-item{
@@ -219,14 +223,24 @@ export default {
   align-items: center;
   padding-left: 10px;
   // margin-right: 170px;
+  img{
+    width: 20vw;
+  }
 }
 
 // 设置导航右边框
 .theme-d2 .d2-theme-header .el-menu .el-submenu {
   // border-right: 1px solid rgba(255, 255, 255, 0.5);
   //  border-image: linear-gradient(red,yellow) 30 30;
-  width: 170px;
+  width: 8.85vw;
   text-align: center;
+  i{
+    font-size: 0.83vw !important;
+  }
+}
+.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
+  margin-left: 0.7vw !important;
+  margin-top: 0.06vw !important;
 }
 .theme-d2 .d2-theme-header .el-menu .el-submenu:last-child {
   border: none ;
@@ -238,8 +252,9 @@ export default {
 }
 .theme-d2 .d2-theme-header .el-menu .el-menu-item {
   // border-right: 1px solid rgba(255, 255, 255, 0.5);
-  width: 170px;
+  width: 8.85vw;
   text-align: center;
+  font-size: 0.94vw;
   //  border-image: linear-gradient(red,yellow) 30 30;
 }
 .theme-d2 .d2-theme-header .el-menu {
@@ -251,9 +266,9 @@ export default {
   display: inline-block;
   position: absolute;
   right: 0;
-  top: 8px;
+  top: 0.4vw;
   width: 1px;
-  height: 34px;
+  height: 1.77vw;
   background: rgba(255, 255, 255, 0.61);
   border-radius: 50%;
 }
@@ -262,9 +277,9 @@ export default {
   display: inline-block;
   position: absolute;
   right: 0;
-  top: 8px;
+  top: 0.4vw;
   width: 1px;
-  height: 34px;
+  height: 1.77vw;
   background: rgba(255, 255, 255, 0.61);
   border-radius: 50%;
 }
@@ -282,13 +297,18 @@ export default {
 // 导航菜单二级菜单字体颜色
 .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
   color: #333;
+  // font-size: 0.94vw;
 }
 .el-menu--horizontal .el-menu .el-menu-item.is-active{
   color: #008775 !important;
 }
 .el-menu--horizontal .el-menu .el-menu-item{
   font-weight: bold;
-  width: 170px;
+  width: 8.85vw;
+  height: 2.6vw;
+  line-height: 2.6vw;
+  font-size: 0.83vw;
+
 }
 .el-menu--horizontal .el-menu .el-menu-item:hover{
   color: #008775 !important;

src/views/demo/equipmentManage/equipment/index.vue

@@ -111,6 +111,7 @@
                   prop="id"
                   label="设备ID"
                   align="center"
+                  show-overflow-tooltip
                 >
                 </el-table-column>
                 <el-table-column
@@ -446,6 +447,7 @@ export default {
     width: 100%;
 border: 1px solid #DEDEDE;
 border-radius: 6px;
+background: #fff;
     // margin-left: 20px;
     // width: calc(100% - 250px);
     .right_title{

src/views/demo/system/operationLog/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
     <d2-container>
+          <div class="nav">当前所在位置:首页>操作日志</div>
+
       <!-- <template slot="header">首页/数据查询</template> -->
       <div class="main">
         <div class="zt_right">
           <!-- <template slot="header">首页/数据查询</template> -->
-          <div class="nav">当前所在位置:首页>操作日志</div>
           <div class="right_main">
             <!-- <div class="right_title">
               <i
@@ -378,33 +379,42 @@ export default {
  
   .zt_right {
     width: 100%;
+border: 1px solid #DEDEDE;
+border-radius: 6px;
+background: #fff;
     // margin-left: 20px;
     // width: calc(100% - 250px);
-    .nav {
+    .right_title{
+      font-weight: bold;
+      font-size: 16px;
+      border-bottom:1px solid #ebeef5;
+      background-color: rgba(233, 244, 243, 0.5);
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      color: #008775;
+      border-bottom: 1px solid rgba(1, 164, 143, 0.3);
+      padding-left: 0;
+      span{
+        padding: 10px;
+        padding-bottom: 9px;
+        border-bottom: 2px solid #01a48f;
+
+      }
+    }
+
+  }
+}
+     .nav {
       padding: 10px 0 10px 10px;
+      margin-bottom: 20px;
       // color: #fff;
 
       font-size: 14px;
 
-      background: #fff;
+      background: #FFFFFF;
+      border: 1px solid #DEDEDE;
     }
-    // .right_main {
-    //   border: 1px solid #67a7df;
-    //   background: #112f5d;
 
-    //   margin-top: 10px;
-    //   .right_title {
-    //     color: #fff;
-    //     border-bottom: 1px solid #67a7df;
-    //     padding: 10px;
-    //     font-size: 14px;
-    //   }
-    //   .right_table {
-    //     padding: 20px;
-    //   }
-    // }
-  }
-}
 .float-left {
   float: left;
 }

src/views/demo/system/organization/index.vue

@@ -2,10 +2,11 @@
   <div>
     <d2-container>
       <!-- <template slot="header">首页/数据查询</template> -->
+          <div class="nav">当前所在位置:首页>组织机构</div>
+
       <div class="main">
         <div class="zt_right">
           <!-- <template slot="header">首页/数据查询</template> -->
-          <div class="nav">当前所在位置:首页>组织机构</div>
           <div class="ztnr">
           <div class="right_main">
             <!-- <div class="right_title">
@@ -674,34 +675,43 @@ export default {
     color: #fff;
   }
   .zt_right {
-    width:100%;
+    width: 100%;
+border: 1px solid #DEDEDE;
+border-radius: 6px;
+background: #fff;
     // margin-left: 20px;
     // width: calc(100% - 250px);
-    .nav {
+    .right_title{
+      font-weight: bold;
+      font-size: 16px;
+      border-bottom:1px solid #ebeef5;
+      background-color: rgba(233, 244, 243, 0.5);
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      color: #008775;
+      border-bottom: 1px solid rgba(1, 164, 143, 0.3);
+      padding-left: 0;
+      span{
+        padding: 10px;
+        padding-bottom: 9px;
+        border-bottom: 2px solid #01a48f;
+
+      }
+    }
+
+  }
+}
+     .nav {
       padding: 10px 0 10px 10px;
+      margin-bottom: 20px;
       // color: #fff;
 
       font-size: 14px;
 
-      background: #fff;
+      background: #FFFFFF;
+      border: 1px solid #DEDEDE;
     }
-    .right_main {
-      // border: 1px solid #67a7df;
-      // background: #112f5d;
 
-      margin-top: 10px;
-      .right_title {
-        color: #fff;
-        // border-bottom: 1px solid #67a7df;
-        padding: 10px;
-        font-size: 14px;
-      }
-      .right_table {
-        padding: 20px;
-      }
-    }
-  }
-}
 .float-left {
   float: left;
 }

src/views/demo/system/roleManagement/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
     <d2-container>
+      <div class="nav">当前所在位置:首页>角色管理</div>
+
       <!-- <template slot="header">首页/数据查询</template> -->
       <div class="main">
         <div class="zt_right">
           <!-- <template slot="header">首页/数据查询</template> -->
-          <div class="nav">当前所在位置:首页>角色管理</div>
           <div class="right_main">
             <!-- <div class="right_title">
               <i class="fa fa-bar-chart" aria-hidden="true" style="padding-right: 5px"></i>
@@ -465,33 +466,42 @@ export default {
  
   .zt_right {
     width: 100%;
+border: 1px solid #DEDEDE;
+border-radius: 6px;
+background: #fff;
     // margin-left: 20px;
     // width: calc(100% - 250px);
-    .nav {
+    .right_title{
+      font-weight: bold;
+      font-size: 16px;
+      border-bottom:1px solid #ebeef5;
+      background-color: rgba(233, 244, 243, 0.5);
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      color: #008775;
+      border-bottom: 1px solid rgba(1, 164, 143, 0.3);
+      padding-left: 0;
+      span{
+        padding: 10px;
+        padding-bottom: 9px;
+        border-bottom: 2px solid #01a48f;
+
+      }
+    }
+
+  }
+}
+     .nav {
       padding: 10px 0 10px 10px;
+      margin-bottom: 20px;
       // color: #fff;
 
       font-size: 14px;
 
-      background: #fff;
+      background: #FFFFFF;
+      border: 1px solid #DEDEDE;
     }
-    .right_main {
-      // border: 1px solid #67a7df;
-      // background: #112f5d;
 
-      margin-top: 10px;
-      .right_title {
-        color: #fff;
-        border-bottom: 1px solid #67a7df;
-        padding: 10px;
-        font-size: 14px;
-      }
-      .right_table {
-        padding: 20px;
-      }
-    }
-  }
-}
 .float-left {
   float: left;
 }

src/views/demo/system/userManagement/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
     <d2-container>
+          <div class="nav">当前所在位置:首页>用户管理</div>
+
       <!-- <template slot="header">首页/数据查询</template> -->
       <div class="main">
+
         <div class="zt_right">
           <!-- <template slot="header">首页/数据查询</template> -->
-          <div class="nav">当前所在位置:首页>用户管理</div>
           <div class="right_main">
             <!-- <div class="right_title">
               <i class="fa fa-bar-chart" aria-hidden="true" style="padding-right: 5px"></i>
@@ -628,34 +630,43 @@ export default {
   display: flex;
  
   .zt_right {
-    width:100%;
+    width: 100%;
+border: 1px solid #DEDEDE;
+border-radius: 6px;
+background: #fff;
     // margin-left: 20px;
     // width: calc(100% - 250px);
-    .nav {
+    .right_title{
+      font-weight: bold;
+      font-size: 16px;
+      border-bottom:1px solid #ebeef5;
+      background-color: rgba(233, 244, 243, 0.5);
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      color: #008775;
+      border-bottom: 1px solid rgba(1, 164, 143, 0.3);
+      padding-left: 0;
+      span{
+        padding: 10px;
+        padding-bottom: 9px;
+        border-bottom: 2px solid #01a48f;
+
+      }
+    }
+
+  }
+}
+     .nav {
       padding: 10px 0 10px 10px;
+      margin-bottom: 20px;
       // color: #fff;
 
       font-size: 14px;
 
-      background: #fff;
+      background: #FFFFFF;
+      border: 1px solid #DEDEDE;
     }
-    // .right_main {
-    //   border: 1px solid #67a7df;
-    //   background: #112f5d;
-
-    //   margin-top: 10px;
-    //   .right_title {
-    //     color: #fff;
-    //     border-bottom: 1px solid #67a7df;
-    //     padding: 10px;
-    //     font-size: 14px;
-    //   }
-    //   .right_table {
-    //     padding: 20px;
-    //   }
-    // }
-  }
-}
+
 .float-left {
   float: left;
 }

src/views/system/index/page.vue

@@ -56,7 +56,7 @@
           </div>
           <div class="tableBox">
             <el-table
-            height="500"
+            height="26.04vw"
               :data="tableData"
               :header-cell-style="{ background: '#E9F4F3', color: '#445D5A' }"
               style="width: 100%">
@@ -123,6 +123,7 @@
 </template>
 <script>
 import api from "@/api";
+// import rem from "./rem";
 export default {
   name: "home",
   data() {
@@ -338,7 +339,7 @@ export default {
   margin-top: 36px;
   margin-bottom: 28px;
   .box {
-    width: 16%;
+    width: 15.1vw;
     // min-width: 296px;
     // height: 184px;
     background-color: #fff;
@@ -347,25 +348,25 @@ export default {
     // aspect-ratio: 4/3;
     .num {
       text-align: center;
-      font-size: 30px;
+      font-size: 1.56vw;
       font-weight: 500;
       color: #445d5a;
-      padding-top: 24px;
+      // padding-top: 0.24rem;
     }
     .name {
       text-align: center;
-      padding: 8px 0 20px 0;
-      font-size: 18px;
+      padding: 0.42vw 0 1.04vw 0;
+      font-size: 0.94vw;
       font-weight: 500;
       color: #008775;
       border-bottom: 2px solid rgba(54, 204, 126, 0.09);
     }
     .bottom {
-      padding: 4px 15px;
+      padding: 0.21vw 0.78vw;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      font-size: 16px;
+      font-size: 0.83vw;
       color: #888888;
     }
   }
@@ -374,19 +375,19 @@ export default {
 .bottomTitle {
   display: flex;
   align-items: center;
-  font-size: 24px;
+  font-size: 1.25vw;
   font-weight: 500;
   color: #445d5a;
-  padding-bottom: 18px;
+  padding-bottom: 0.94vw;
   img{
-    margin-right: 10px;
+    margin-right: 0.52vw;
   }
   span{
     color:#008775
   }
 }
 .echartsBox {
-  height: 610px;
+  height: 29.24vw;
   background: #ffffff;
   border: 1px solid #dedede;
   border-radius: 8px;
@@ -431,7 +432,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   .more{
-    font-size: 16px;
+    font-size: 0.83vw;
     color: #888888;
     cursor: pointer;
   padding-bottom: 18px;
@@ -439,7 +440,7 @@ export default {
   }
 }
 .tableBox{
-  height: 570px;
+  height: 26.52vw;
   background: #FFFFFF;
   border: 1px solid #DEDEDE;
   border-radius: 8px;
@@ -447,9 +448,9 @@ export default {
 }
 .topIcon{
   display: block;
-  width: 70px;
+  width: 5.21vw;
   margin: auto;
-  margin-top: -32px;
+  margin-top: -2.08vw;
 }
 
 </style>

src/views/system/index/rem.js

@@ -0,0 +1,25 @@
+
+if(window.location.hash=='#/index'){
+    fnResize();
+    window.onresize = function () {
+      fnResize();
+    }
+    function fnResize() {
+
+        document.documentElement.style.fontSize = 100 / 1920 * window.innerWidth + 'px';
+      }
+      // 禁止双击放大
+      document.documentElement.addEventListener('touchstart', function (event) {
+        if (event.touches.length > 1) {
+          event.preventDefault();
+        }
+      }, false);
+      var lastTouchEnd = 0;
+      document.documentElement.addEventListener('touchend', function (event) {
+        var now = Date.now();
+        if (now - lastTouchEnd <= 300) {
+          event.preventDefault();
+        }
+        lastTouchEnd = now;
+      }, false)
+}

src/views/system/login/page.vue

@@ -27,7 +27,7 @@
                 :rules="rules"
                 :model="formLogin"
                 size="default">
-                <div style="font-size:30px;text-align:center;color:#fff;margin-bottom:30px">用户登录</div>
+                <div style="font-size:1.56vw;text-align:center;color:#fff;margin-bottom:1.56vw">用户登录</div>
                 <el-form-item prop="username">
                   <el-input
                     type="text"
@@ -278,8 +278,8 @@ export default {
   }
   // 登录表单
   .page-login--form {
-    width: 28em;
-    height: 26em;
+    width: 26.06vw;
+    height: 20.21vw;
     background-image: url("./image/dengluk.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -292,7 +292,7 @@ export default {
     // 登录按钮
     .button-login {
       width: 100%;
-      height: 56px;
+      height: 2.97vw;
       background: linear-gradient(0deg, #01E9BD, #00D6B9);
       border-radius: 6px;
     }
@@ -303,7 +303,7 @@ border: 1px solid #6DF6E4;
 box-shadow: 0px 0px 9px 0px rgba(0,87,75,0.3100);
 border-radius: 6px;
 color: #fff;
-height: 57px;
+height: 2.97vw;
     }
     // 输入框左边的图表区域缩窄
     .el-input-group__prepend {
@@ -328,6 +328,9 @@ height: 57px;
     .page-login--quick {
       width: 100%;
     }
+    .fa{
+      font-size: 1.15vw !important;
+    }
   }
   // 快速选择用户面板
   .page-login--quick-user {
@@ -496,8 +499,8 @@ height: 57px;
   }
 .el-input__inner{
         border: none;
-        height: 57px;
-        line-height: 57px;
+        height:  2.97vw;
+        line-height:  2.97vw;
         padding-left: 10px;
         padding-right: 0;
         background: transparent;