样式

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>