导航菜单样式

src/components/time.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="data_box">
-    <div class="date-wraper">{{date}}</div>
+    <div class="date-wraper">{{hours}}:{{minutes}}:{{seconds}}</div>
-    <div class="time-wraper">{{hours}}:{{minutes}}:{{seconds}}&nbsp;&nbsp;{{week}}</div>
+    <div class="time-wraper">{{date}}</div>
   </div>
 </template>
 
@@ -55,10 +55,13 @@ export default {
 .data_box
   _fj(center,flex-end)
   flex-direction column
-  height 61px
+  height 77px
-  padding-left 40px
 .date-wraper
-  _font(16px, 26px, #909399,,)
+  width 130px
+  _font(34px, 36px, #B4C1D8,,right)
+  font-family Source Han Sans CN
 .time-wraper
-  _font(16px, 26px, #909399,,)
+  width 130px
+  _font(16px, 30px, #B4C1D8,,right)
+  font-family Source Han Sans CN
 </style>

src/pages/shells/index/index.vue

@@ -1,52 +1,41 @@
 <template>
   <div class="index-container">
     <div class="header-container">
-      <div class="title-container">
-        <img src="../../../images/aio/logo_0.png" alt="诺力">
-      </div>
       <div class="horizontal-menu-container">
         <el-menu :default-active="$route.meta.jumpPath" 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="header-wraper__right">
+      <div class="header_state_wraper">
-        <div class="header_user_wraper">
+        <div class="state-item">{{ topInfo.agvrun_status_name }}</div>
-          <div class="header_user_wraper_inn">
+        <div class="state-item">{{ topInfo.automatic_status_name }}</div>
-            <div class="state-item">{{ topInfo.agvrun_status_name }}</div>
+        <div class="elec-qty-wrap">
-            <div class="state-line"></div>
+          <div class="elec-qty" :style="{width: Number(topInfo.electric) + '%'}" :class="{'elec-qty_s': Number(topInfo.electric) <= 40}"></div>
-            <div class="state-item">{{ topInfo.automatic_status_name }}</div>
+          <div class="elec-qty_border"></div>
-            <!-- <div class="state-line"></div> -->
+          <div class="elec-txt">{{ topInfo.electric }}%</div>
-            <!-- <div class="state-item">中文&nbsp;<i class="icon_dropdown"></i></div> -->
-          </div>
         </div>
-        <div class="header_user_wraper">
+        <div class="state-line"></div>
-          <div class="header_user_wraper_inn">
+      </div>
-            <div class="elec-qty-wrap">
+      <div class="header_user_wraper">
-              <div class="elec-qty" :style="{height: Number(topInfo.electric) + '%', backgroundColor: Number(topInfo.electric) <= 40 ? 'fa6400' : '#54c0b3'}"></div>
+        <div class="header_user_wraper_i" @click="showDropdown">
-              <div class="elec-qty-top"></div>
+          <div class="user_name">{{ username }}</div>
-            </div>
-            <div class="elec-txt">{{ topInfo.electric }}%</div>
-          </div>
         </div>
-        <div class="header_user_wraper">
+        <div v-show="dropdown" class="header_dropdown_wraper">
-          <div class="header_user_wraper_inn" @click="showDropdown">
+          <ul>
-            <div class="iconfont icon_admin"></div>
+            <li @click="showDialog">修改密码</li>
-            <div class="elec-txt">{{ username }}</div>
+            <li @click="toEixt">退出</li>
-          </div>
+          </ul>
-          <div v-show="dropdown" class="header_dropdown_wraper">
+          <div class="popper__arrow"></div>
-            <ul>
-              <li @click="showDialog">修改密码</li>
-              <li @click="toEixt">退出</li>
-            </ul>
-            <div class="popper__arrow"></div>
-          </div>
-        </div>
-        <div class="time-container">
-          <jxTime></jxTime>
         </div>
+        <div class="state-line"></div>
+      </div>
+      <div class="time-container">
+        <jxTime></jxTime>
       </div>
     </div>
     <div class="body-conatiner">
+      <div class="hud_left"></div>
+      <div class="hud_right"></div>
       <div v-show="$route.path !== '/index/teach'" class="side-bar-container">
         <el-menu :default-active="$route.meta.guidePath" @select="handleSelectChild">
           <el-menu-item :index="menu.index" v-for="menu in childmenus" :key="menu.index">{{menu.label}}</el-menu-item>
@@ -398,80 +387,90 @@ export default {
   left 0
   top 0
   z-index 150
-  _fj()
+  _fj(flex-end,  flex-start)
-  _wh(100%, 81px)
+  _wh(100%, 124px)
-  line-height 79px
+  background center / 100% 100% url(../../../images/new/header_bg.png) no-repeat
-  padding 0 10px
-  border-bottom 1px solid #f1f1f1
-  background-color #fff
-.title-container
-  _fj(center)
-  _wh(300px, 100%)
-  img
-    _wh(100%, auto)
 .horizontal-menu-container
-  height 100%
+  height 77px
-  padding 0 10px
+  .el-menu
->>>.el-menu--horizontal>.el-menu-item
+    border none
-  line-height 80px
+    background-color transparent
-  height 80px
+  .el-menu-item
-  font-size 18px
+    _wh(105px, 77px)
->>>.el-menu.el-menu--horizontal
+    _font(30px, 77px, #8DBFEE, bold, center)
-  border-bottom 0
+    font-family Source Han Sans CN
+    font-style italic
+    background linear-gradient(0deg, #A2C3E3 0%, #5E9ED9 11.9140625%, #A2C3E3 100%)
+    -webkit-background-clip text
+    -webkit-text-fill-color transparent
+    border-bottom 0
+    padding 0
+  .el-menu-item.is-active
+    color #fff
+  .el-menu--horizontal>.el-menu-item.is-active
+    border-bottom 0
+    width 128px
+    color #fff
+    -webkit-text-fill-color #fff
+    background center / 100% 100% url(../../../images/new/nav_bg.png) no-repeat
 .time-container
-  _fj()
+  height 77px
+  margin 0 10px
 .state-item
-  border 1px solid #54C0B3
+  _wh(67px, 43px)
-  border-radius 4px
+  _font(20px,43px,#fff,,center)
-  _font(16px,32px,#54C0B3,,center)
+  font-family Adobe Heiti Std
-  padding 0 15px
+  margin-right 3px
+  background center / 100% 100% url(../../../images/new/state-item_bg.png) no-repeat
 .state-line
-  _wh(2px,32px)
+  _wh(1px,42px)
   opacity 0.3
-  background #8991A6
+  background #AECAF5
-  margin 0 20px
 .elec-qty-wrap
   position relative
-  width 30px
+  _wh(67px, 43px)
-  height 60px
-  border 1px solid #dddddd
   margin-right 5px
-  border-radius 2px
   z-index 151
 .elec-qty
   position absolute
-  width 100%
-  height 100%
-  left 0
-  bottom 0
-.elec-qty-top
-  position absolute
-  _wh(8px, 3px)
-  top -3px
-  left 50%
-  transform translateX(-50%)
   z-index 152
-  border 1px solid #ddd
+  _wh(0, 100%)
+  background-color green
+  background left top url(../../../images/new/elec.png) no-repeat
+  background-size cover
+.elec-qty_s
+  background-image url(../../../images/new/elec.png)
+.elec-qty_border
+  position absolute
+  z-index 152
+  _wh(100%, 100%)
+  background center / 100% 100% url(../../../images/new/elec_bg.png) no-repeat
 .elec-txt
-  _font(16px, 60px, #909399,,left)
+  position relative
+  z-index 153
+  _font(20px, 43px, #fff,,center)
+  font-family Adobe Heiti Std
+.header_user_wraper
+  position relative
+  _fj(flex-start)
+  height 77px
+  margin-left 5px
+.header_user_wraper_i
+  _fj(flex-start)
+  height 77px
+.user_name
+  _font(22px, 77px, #fff,,left)
+  font-family: Source Han Sans CN
+  padding-left 50px
+  margin-right 4px
+  background left center / 50px 52px url(../../../images/new/user_icon.png) no-repeat
 .icon_admin
   _font(32px, 60px, #54C0B3,,left)
   margin-right 2px
->>>.el-menu
+.header_state_wraper
-  border-right none
+  _fj(flex-start)
-.header-wraper__right
+  height 77px
-  height 100%
+  margin-left 60px
-  _fj(flex-end)
-.header_user_wraper
-  padding 0 10px
-  height 100%
-  position relative
-  &:hover
-    background-color #f0f0f0
-.header_user_wraper_inn
-  _fj()
-  _wh(100%, 100%)
-  padding 0 15px
 .header_dropdown_wraper
   position absolute
   top 90%
@@ -522,14 +521,27 @@ export default {
     border-top-width: 0;
     border-bottom-color: #fff;
 .side-bar-container
-    >>>.el-menu-item a
+  .el-menu
-        color #909399
+    border-right 0
-    >>>.el-menu-item
+    background-color transparent
-        font-size 18px
+  .el-menu-item
-        line-height 80px
+    height 120px
-        height 80px
+    _font(36px, 40px, #fff,,center)
-    >>>.is-active
+    font-family: YouSheBiaoTiHei
-        background-color: #ecf5ff
+    white-space wrap
-    >>>.is-active a
+    background center / 100% 100% url(../../../images/new/sidebar_bg.png) no-repeat
-        color #409EFF
+    _fj(center)
+    padding 0 63px 10px 63px !important
+  .el-menu-item.is-active
+    background center / 100% 100% url(../../../images/new/sidebar_active_bg.png) no-repeat
+.hud_left
+  position absolute
+  left 0
+  _wh(53px, 735px)
+  background center / 100% 100% url(../../../images/new/hud_left.png) no-repeat
+.hud_right
+  position absolute
+  right 0
+  _wh(53px, 735px)
+  background center / 100% 100% url(../../../images/new/hud_right.png) no-repeat
 </style>

src/style/common.styl

@@ -40,15 +40,17 @@
 }
 
 .body-conatiner
+  position relative
   _fj()
   _wh(100%, 100%)
-  padding-top 80px
+  padding-top 124px
+  background center / 100% 100% url(../images/new/bg.png) no-repeat
 .side-bar-container
-  _wh(240px, 100%)
+  _wh(228px, 100%)
-  border-right solid 1px #e6e6e6
+  padding-top 101px
 .main-container
-  _wh(calc(100% - 240px), 100%)
+  _wh(calc(100% - 228px), 100%)
-
+  padding-right 53px
 .site_container
   _fj()
   _wh(100%, 100%)