样式

src/components/time.vue

@@ -58,7 +58,7 @@ export default {
   height 61px
   padding-left 10px
 .date-wraper
-  _font(12px, 20px, #909399,,)
+  _font(16px, 24px, #909399,,)
 .time-wraper
-  _font(12px, 20px, #909399,,)
+  _font(16px, 24px, #909399,,)
 </style>

src/config/rem.js

@@ -1,5 +1,5 @@
 /** 10.4寸屏，4:3的，1366*768 */
-// apt设备尺寸分辨率1024*768
+// apt设备尺寸分辨率1024*768 现在新设备1920*1080
 (function (doc, win) {
   var docEl = doc.documentElement
   var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

src/pages/modules/login/login.vue

@@ -68,6 +68,7 @@ export default {
     }
   },
   mounted () {
+    window.localStorage.removeItem('defaultActive')
     // 点对点项目分辨率 1024 * 768
     // alert(document.body.clientWidth, 'a')
     // alert(document.body.clientHeight, 'b')

src/pages/modules/vehicleinformation/vehiclecontrol.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="right_side">
     <div class="content_wrap">
-      <div class="content_wrap_inner">
-        <div class="state_wrap">
+      <div class="content_wrap_inner content_wrap_inner_1">
+        <div class="state_wrap state_wrap_1">
           <div class="state_tip">偏离状态</div>
           <div class="state_content">
             <div class="state_item_1">{{status.inLineStatus_name}}</div>
           </div>
         </div>
-        <div class="state_wrap">
+        <div class="state_wrap state_wrap_1">
           <div class="state_tip">更新状态</div>
           <div class="state_content">
             <div class="state_item_1">{{status.UpdateStatus_name}}</div>
@@ -429,4 +429,9 @@ export default {
   color #fff
 .pop_btns_box
   margin-top 20px
+.content_wrap_inner_1
+  justify-content flex-start
+.state_wrap_1
+  width auto
+  margin-right 50px
 </style>

src/pages/shells/index/index.vue

@@ -2,25 +2,31 @@
   <div class="index-container">
     <div class="header-container">
       <div class="title-container">
-        <span class="company-logo"></span>
+        <img src="../../../images/aio/logo_1.png" alt="诺力">
       </div>
       <div class="horizontal-menu-container">
         <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
           <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
         </el-menu>
       </div>
-      <div class="state-container">
-        <div class="state-item">运行</div>
-        <div class="state-line"></div>
-        <div class="state-item">自动</div>
-        <div class="state-line"></div>
-        <div class="state-item">中文<i class="icon_dropdown"></i></div>
-      </div>
-      <div class="user-container">
-        <div class="elec-qty-wrap">
-          <div class="elec-qty"></div>
+      <div class="header-wraper__right">
+        <div class="header_user_wraper">
+          <div class="header_user_wraper_inn">
+            <div class="state-item">运行</div>
+            <div class="state-line"></div>
+            <div class="state-item">自动</div>
+            <div class="state-line"></div>
+            <div class="state-item">中文&nbsp;<i class="icon_dropdown"></i></div>
+          </div>
+        </div>
+        <div class="header_user_wraper">
+          <div class="header_user_wraper_inn">
+            <div class="elec-qty-wrap">
+              <div class="elec-qty"></div>
+            </div>
+            <div class="elec-txt">90%</div>
+          </div>
         </div>
-        <div class="elec-txt">90%</div>
         <div class="header_user_wraper">
           <div class="header_user_wraper_inn" @click="showDropdown">
             <div class="iconfont icon_admin"></div>
@@ -34,9 +40,9 @@
             <div class="popper__arrow"></div>
           </div>
         </div>
-      </div>
-      <div class="time-container">
-        <jxTime></jxTime>
+        <div class="time-container">
+          <jxTime></jxTime>
+        </div>
       </div>
     </div>
     <router-view></router-view>
@@ -216,32 +222,36 @@ export default {
 .index-container
   _wh(100%, 100%)
 .header-container
+  position fixed
+  left 0
+  top 0
+  z-index 150
   _fj()
-  _wh(100%, 61px)
+  _wh(100%, 81px)
+  overflow-x auto
+  line-height 79px
   padding 0 10px
-  border-bottom 2px solid #f1f1f1
+  border-bottom 1px solid #f1f1f1
+  background-color #fff
 .title-container
   _fj(center)
-  _wh(130px, 61px)
-.company-logo
-  display block
-  _wh(100%, 100%)
-  background url(../../../images/aio/logo_1.png) left center / 100% auto no-repeat
+  _wh(300px, 100%)
+  img
+    _wh(100%, auto)
 .horizontal-menu-container
-  height 61px
->>>.el-menu-item
-  padding 0 7px
-.state-container
-  _fj()
-.user-container
-  _fj()
+  height 100%
+  padding 0 10px
+>>>.el-menu--horizontal>.el-menu-item
+  line-height 79px
+  height 79px
+  font-size 18px
 .time-container
   _fj()
 .state-item
   border 1px solid #54C0B3
   border-radius 4px
-  _font(15px,25px,#54C0B3,,center)
-  padding 0 7px
+  _font(18px,32px,#54C0B3,,center)
+  padding 0 15px
 .state-line
   _wh(2px,20px)
   opacity 0.3
@@ -250,9 +260,9 @@ export default {
 .elec-qty-wrap
   position relative
   width 15px
-  height 25px
+  height 32px
   border 1px solid #dddddd
-  margin-right 2px
+  margin-right 5px
 .elec-qty
   position absolute
   width 100%
@@ -262,16 +272,18 @@ export default {
   background-color #54C0B3
   // background-color #fa6400
 .elec-txt
-  _font(15px, 25px, #909399,,left)
+  _font(18px, 32px, #909399,,left)
 .icon_admin
-  _font(20px, 25px, #54C0B3,,left)
+  _font(20px, 32px, #54C0B3,,left)
   margin-right 2px
 >>>.el-menu
   border-right none
+.header-wraper__right
+  height 100%
+  _fj(flex-end)
 .header_user_wraper
   padding 0 10px
-  height 59px
-  margin 0 10px
+  height 100%
   position relative
   &:hover
     background-color #f0f0f0
@@ -280,7 +292,7 @@ export default {
   _wh(100%, 100%)
 .header_dropdown_wraper
   position absolute
-  top 52px
+  top 90%
   left 0
   z-index 1000
   width 100%
@@ -324,4 +336,16 @@ export default {
     margin-left: -6px;
     border-top-width: 0;
     border-bottom-color: #fff;
+@media only screen and (max-width: 1620px) {
+.title-container {
+  width 150px
+  height 15px
+}
+>>>.el-menu--horizontal>.el-menu-item {
+  font-size 16px
+}
+>>>.el-menu-item {
+  padding 0 10px
+}
+}
 </style>

src/style/common.styl

@@ -41,7 +41,8 @@
 
 .body-conatiner
   _fj()
-  _wh(100%, calc(100% - 61px))
+  _wh(100%, 100%)
+  padding-top 80px
 .side-bar-container
   _wh(120px, 100%)
   border-right solid 1px #e6e6e6
@@ -50,7 +51,7 @@
 
 .site_container
   _fj()
-  _wh(100%, calc(100% - 82px))
+  _wh(100%, 100%)
   overflow hidden
 .left_side
   _wh(2.72rem, 100%)
@@ -157,7 +158,7 @@
   height: 100%;
   opacity: .5;
   background: #000;
-  z-index: 101;
+  z-index: 201;
 .dialog_wrapper
   position: fixed;
   top: 0;
@@ -165,7 +166,7 @@
   bottom: 0;
   left: 0;
   overflow: auto;
-  z-index: 102;
+  z-index: 202;
 .dialog
   position: relative;
   margin: 0 auto 50px;
@@ -370,29 +371,31 @@
   width 100%
   _fj(, flex-start)
 .state_tip
-  _wh(150px, 50px)
+  _wh(200px, 100px)
   _fj(center)
-  _font(18px, 15px, #ffffff,,center)
+  _font(32px, 33px, #ffffff,,center)
   border 1px solid $red
   background-color #ffc3a7
   border-radius 6px
   margin-right 70px
   overflow hidden
 .state_content
-  width calc(100% - 220px)
+  width calc(100% - 270px)
+  height 100px
+  margin-bottom 20px
   _fj(flex-start)
   flex-wrap wrap
 .state_item_1
-  _wh(150px, 50px)
+  _wh(260px, 100px)
   _fj(center)
   border 1.6px solid #54C0B3
   background-color #fff
-  _font(18px,25px,#54C0B3,,center)
+  _font(32px,33px,#54C0B3,,center)
   border-radius 6px
   margin-bottom 20px
   margin-right 24px
 .state_item_2
-  _wh(calc(33.333333% - 16px), 60px)
+  _wh(calc(33.333333% - 16px), 100px)
   _fj(center)
   border 10px solid #DFE1E6
   background-color #fff
@@ -406,12 +409,12 @@
   _wh(24px,24px)
   background-color #ffffff
   border-radius 50%
-  margin-right 20px
+  margin-right 24px
 .state_item_2_txt
   display block
-  _font(18px,25px,#696969,,)
+  _font(32px,33px,#696969,,)
 .state_item_3
-  _wh(calc(33.333333% - 16px), 50px)
+  _wh(calc(33.333333% - 16px), 100px)
   _fj(flex-start)
   border 1.6px solid #8B90A6
   background-color #fff
@@ -423,11 +426,11 @@
     margin-right 0
 .state_item_3_txt1
   display block
-  _font(18px,25px,#696969,,)
+  _font(32px,33px,#696969,,)
   margin-right 12px
 .state_item_3_txt2
   display block
-  _font(18px,25px,#FA6400,,)
+  _font(32px,33px,#FA6400,,)
 .state_item_switch
   display: inline-flex;
   align-items: center;

src/style/reset.css

@@ -65,10 +65,10 @@ html,body {
      -webkit-tap-highlight-color: #ffffff;
      background-color: #ffffff;
      width: 100%;
-     /* max-width: 1366px; */
      height: 100%;
      font-size: 16px;
-     overflow: hidden;
+     min-width: 1440px;
+     /* max-width: 1920px; */
 }
 
 select, option, textarea {