导航、车辆、系统、弹窗、登录

src/components/dialog.vue

@@ -4,16 +4,16 @@
       <div class="dialog">
         <div class="dialog_header">
           <span class="dialog_title">{{title}}</span>
-          <button class="dialog_headerbtn" @click="toCancle">
+          <!-- <button class="dialog_headerbtn" @click="toCancle">
             <i class="iconfont icon_close"></i>
-          </button>
+          </button> -->
         </div>
         <div class="dialog_body">
           <slot></slot>
         </div>
         <div class="dialog_footer">
-          <button class="button button--primary" @click="toCancle">取消</button>
-          <button class="button button--primary" :class="{'button--info': unclick === true}" :disabled="disabled" @click="toSure">确定</button>
+          <button class="button_control button_control_s button_control_disabled mgr31" @click="toCancle"><p>取消</p></button>
+          <button class="button_control button_control_s" :class="{'button--info': unclick === true}" :disabled="disabled" @click="toSure"><p>确定</p></button>
         </div>
       </div>
     </div>
@@ -49,3 +49,8 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.mgr31
+  margin-right 31px
+</style>

src/components/time.vue

@@ -59,9 +59,9 @@ export default {
 .date-wraper
   width 130px
   _font(34px, 36px, #B4C1D8,,right)
-  font-family Source Han Sans CN
+  font-family SourceHanSansCN-Regular
 .time-wraper
   width 130px
   _font(16px, 30px, #B4C1D8,,right)
-  font-family Source Han Sans CN
+  font-family SourceHanSansCN-Regular
 </style>

src/config/http.js

@@ -54,7 +54,7 @@ export const post = (sevmethod, params) => {
       .then(response => {
         resolve(response.data)
       }, error => {
-        Dialog(error.message)
+        // Dialog(error.message)
         reject(error.message)
       })
       .catch((error) => {

src/pages/modules/login/login.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="login-container">
+    <div class="login-header">
+      <div class="login_logo"></div>
+    </div>
+    <div class="login-bottom"></div>
     <div class="login-wraper">
-      <div class="login-logo-wraper">
-        <div class="login-logo"></div>
-        <div class="login-logo-txts">
-          <p class="login-logo-txt1">诺力智能搬运车系统</p>
-          <p class="login-logo-txt2">NoBleLift intelligent truck system</p>
+      <div class="navs-wraper">
+        <button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">密码登录</button>
+        <button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">配置</button>
       </div>
-      </div>
-      <div class="login-content">
       <div v-show="tab === 0" class="login-content_wraper">
-          <div class="dl">登录</div>
         <div class="login-items-wraper">
           <div class="login-item">
             <div class="login-label" @click="toFocus(1)">用户名</div>
@@ -21,35 +20,23 @@
             <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
           </div>
         </div>
-          <!-- <div class="login-setup-wraper">
-            <div class="setup-info pointer" @click="toSetup">配置信息</div>
-            <router-link to="/home">忘记密码</router-link>
-          </div> -->
-          <div class="login-setup-wraper login-setup-wraper__r">
-            <div class="setup-info pointer" @click="toSetup">配置信息</div>
-          </div>
         <div class="login-buttons-wraper">
-            <button class="button button--primary button-login" :disabled="disabled" @click="saveLogin">登录</button>
+          <button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
         </div>
       </div>
       <div v-show="tab === 1" class="login-content_wraper">
-          <div class="dl">配置</div>
         <div class="login-items-wraper">
           <div class="login-item">
-              <div class="login-label" @click="toFocus(3)">域名地址</div>
-              <input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
+            <div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
+            <input type="text" class="login-input login-input_1" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
           </div>
           <div class="login-item">
-              <div class="login-label" @click="toFocus(4)">刷新时间（秒）</div>
-              <input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
+            <div class="login-label login-label_1" @click="toFocus(4)">刷新时间（秒）</div>
+            <input type="number" class="login-input login-input_1" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
           </div>
         </div>
-          <div class="login-setup-wraper login-setup-wraper__r">
-            <div class="setup-info pointer" @click="toLogin">立即登录</div>
-          </div>
         <div class="login-buttons-wraper">
-            <button class="button button--primary button-login" @click="saveSetup">配置</button>
-          </div>
+          <button class="button_control" @click="saveSetup"><p>配置</p></button>
         </div>
       </div>
     </div>
@@ -186,74 +173,72 @@ export default {
 .login-container
   position relative
   _wh(100%, 100%)
-  background-color #64b4dc
-  background-image linear-gradient(to right bottom,#4489e0, #55a1df, #64b4dc)
+  background center / 100% 100% url(../../../images/new/login_bg.png) no-repeat
   _fj(center)
+.login-header
+  position absolute
+  top 0
+  _wh(100%, 181px)
+  background center / 1682px 100% url(../../../images/new/login_header_bg.png) no-repeat
+.login_logo
+  _wh(100%, 100%)
+  background center / 532px 127px url(../../../images/new/logo.png) no-repeat
+.login-bottom
+  position absolute
+  bottom 0
+  _wh(100%, 175px)
+  background center / 900px 100% url(../../../images/new/login_dy.png) no-repeat
 .login-wraper
-  _fj()
-  _wh(60%, 65%)
-  padding 20px
-  background-color #fff
-  border-radius 20px
-.login-logo-wraper
-  width 50%
-  padding 20px
-  _fj(center,,column)
-.login-logo
-  width 100px
-  height 112px
-  background center / 100% 100% url(../../../images/aio/car1.png) no-repeat
-.login-logo-txts
-  // margin-top 20px
-  text-align center
-.login-logo-txt1
-  _font(24px, 34px, $red2,bold,center)
-.login-logo-txt2
-  _font(20px, 34px, #464646,,center)
-.login-content
-  width 50%
-  padding 20px 10px
+  _wh(900px, 702px)
+  padding 87px 85px 50px 70px
+  background center / 100% url(../../../images/new/login_w_bg.png) no-repeat
 .login-content_wraper
   width 100%
-  padding 0 10%
+  padding 51px 45px 51px
   margin 0 auto
   _fj(center,,column)
-.dl
-  width 100%
-  _font(20px, 50px, #333, bold, center)
-  margin-bottom 30px
+.navs-wraper
+  _wh(100%, 107px)
+  _fj(flex-start)
+  background center / 100% url(../../../images/new/login_nav_bg.png) no-repeat
+  padding 1px 0 35px 28px
+.nav_item
+  _wh(270px, 73px)
+  padding 10px 0 0 52px
+  _font(40px, 40px, #99B1DD,,)
+  font-family: YouSheBiaoTiHei;
+  background none
+  &:first-child
+    background center / 100% url(../../../images/new/login_tab.png) no-repeat
+.nav_item_active
+  color #fff
 .login-items-wraper
   width 100%
 .login-item
   _fj()
-  _wh(100%, 40px)
-  background-color #fff
-  padding 5px 10px
-  border 1px solid $gray2
-  border-radius 8px
-  +.login-item
-    margin-top 20px
+  width 100%
+  margin-bottom 40px
 .login-label
   width 115px
-  _font(16px, 30px, $gray1,,)
+  _font(30px, 80px, #AFBED8,,right)
+.login-label_1
+  width 215px
 .login-input
-  width calc(100% - 115px)
-  _font(16px, 30px, $gray1,,)
-.login-setup-wraper
-  width 100%
-  margin-top 10px
-  _fj()
-  a
-    _font(16px, 30px, $red1,,)
-.login-setup-wraper__r
-  justify-content flex-end
-  .setup-info
-    color $red1
-.setup-info
-  _font(16px, 30px, $fc1,,)
+  width calc(100% - 140px)
+  _font(30px, 78px, #fff,,)
+  background: rgba(45,88,184,0.1);
+  border: 1px solid #4980BD;
+  padding 0 22px
+  &:focus
+    background: rgba(45,88,184,0.25);
+    border: 2px solid #21D0F2;
+    line-height 76px
+.login-input_1
+  width calc(100% - 240px)
 .login-buttons-wraper
   width 100%
-  margin-top 10px
+  margin-top 12px
+  padding-left 180px
 .button-login
   width 100%
   border-radius 20px

src/pages/modules/systemmanage/developer.vue

@@ -1,6 +1,11 @@
 <template>
 <div class="main-container">
   <div class="right_side">
+    <div class="content_wrap">
+      <div class="title_wrap">
+        <h2>开发者选项</h2>
+      </div>
+      <div class="page_container">
         <div class="tabs_container">
           <div class="tabs_header">
             <div class="tabs_wrap">
@@ -22,6 +27,8 @@
         </div>
       </div>
     </div>
+  </div>
+</div>
 </template>
 
 <script>
@@ -128,14 +135,12 @@ export default {
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .tabs_container
-  _wh(100%,100%)
-  background #fff
-  border 1px solid #dcdfe6
-  box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
-.tabs_header
   position relative
-  background-color #f5f7fa
-  border-bottom 1px solid #e4e7ed
+  _wh(100%,100%)
+.tabs_header
+  position absolute
+  top: -92px;
+  right: -52px;
 .tabs_wrap
   overflow hidden
   margin-bottom -1px
@@ -149,34 +154,33 @@ export default {
   float left
   z-index 2
 .tabs_item
-  padding 0 40px
-  height 40px
+  padding 0 10px
+  width 200px
+  height 46px
   box-sizing border-box
-  line-height 40px
+  line-height 46px
   display inline-block
   list-style none
-  font-size 14px
-  font-weight 500
+  _font(24px, 46px, #ACBFE3, 500, center)
+  font-family: SourceHanSansCN-Medium;
   position relative
   transition all .3s cubic-bezier(.645,.045,.355,1)
-  border 1px solid transparent
   margin-top -1px
-  color #909399
+  background center / 100% 100% url(../../../images/new/tab_bg.png) no-repeat
   &:first-child
     margin-left -1px
 .is_active
-  color: #409eff;
-  background-color: #fff;
-  border-right-color: #dcdfe6;
-  border-left-color: #dcdfe6;
+  color: #3CC1FF;
+  background center / 100% 100% url(../../../images/new/tab_bg_active.png) no-repeat
 .tabs_content
-  _wh(100%, calc(100% - 39px))
+  _wh(100%, 100%)
   overflow: hidden;
   position: relative;
   padding: 15px;
 .tab_pane
   _wh(100%,100%)
-  _font(14px, 21px, #323232,,)
+  _font(24px, 36px, #fff,,)
+  font-family SourceHanSansCN-Regular
   white-space pre-line
   word-break break-all
   overflow-y auto

src/pages/modules/systemmanage/role.vue

@@ -1,20 +1,19 @@
 <template>
 <div class="main-container">
   <div class="right_side">
-    <div class="buttons_wrapper">
-      <div class="row">
-        <button class="button button--primary" @click="showDialog('1')">新增角色</button>
+    <div class="content_wrap">
+      <div class="title_wrap">
+        <h2>角色管理</h2>
       </div>
-    </div>
-    <div class="row_2">
+      <div class="page_container">
         <div class="grid_wrapper">
           <table>
             <tr>
               <!-- <th>选中</th> -->
-            <th width="20%">角色名称</th>
-            <th width="20%">描述</th>
-            <th width="30%">创建日期</th>
-            <th width="30%">操作</th>
+              <th>角色名称</th>
+              <th>描述</th>
+              <th>创建日期</th>
+              <th width="330px">操作</th>
             </tr>
             <tr v-for="(e, i) in datalist" :key="i" :class="{'tr_selected': pkId === e.roleId}" @click="toCheck(e)">
               <!-- <td>
@@ -23,7 +22,7 @@
               <td>{{ e.name }}</td>
               <td>{{ e.remark }}</td>
               <td>{{ e.createTime }}</td>
-            <td>
+              <td width="330px">
                 <div class="row">
                   <button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
                   <button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
@@ -32,36 +31,11 @@
             </tr>
           </table>
         </div>
-      <div class="tree_wrapper">
-        <div class="tree_header">
-          <span>角色名称</span>
-          <button class="button button--primary grid_button button1" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave">保存</button>
-        </div>
-        <div class="tree_body_container">
-          <el-tree
-            :data="tree"
-            show-checkbox
-            default-expand-all
-            node-key="menuId"
-            :default-checked-keys=checkedKeys
-            ref="tree"
-            highlight-current
-            :props="defaultProps">
-          </el-tree>
+        <div class="buttons_wrapper">
+          <button class="button_control" @click="showDialog('1')"><p>新增角色</p></button>
         </div>
       </div>
     </div>
-    <!-- <div class="row_2">
-      <div v-for="e in tree" :key="e.menuId">
-        <div>{{e.title+e.menuId}}</div>
-        <div v-for="el in e.children" :key="el.menuId">
-          <div>{{el.title+el.menuId}}</div>
-          <div v-for="ell in el.children" :key="ell.menuId">
-            <div>{{ell.title+ell.menuId}}</div>
-          </div>
-        </div>
-      </div>
-    </div> -->
     <jxDialog
     ref="child"
     :title="title"
@@ -90,6 +64,38 @@
     </div>
     <div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
     </jxDialog>
+    <div v-show="active1" class="dialog_wrapper">
+      <div class="dialog dialog_1">
+        <div class="dialog_header">
+          <span class="dialog_title">角色名称</span>
+        </div>
+        <div class="dialog_body dialog_body_1">
+          <div class="tree_wrapper">
+            <!-- <div class="tree_header">
+              <span>角色名称</span>
+              <button class="button button--primary grid_button button1" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave">保存</button>
+            </div> -->
+            <div class="tree_body_container">
+              <el-tree
+                :data="tree"
+                show-checkbox
+                default-expand-all
+                node-key="menuId"
+                :default-checked-keys=checkedKeys
+                ref="tree"
+                highlight-current
+                :props="defaultProps">
+              </el-tree>
+            </div>
+          </div>
+        </div>
+        <div class="dialog_footer">
+          <button class="button_control button_control_s button_control_disabled mgr31" @click="toCancle1"><p>取消</p></button>
+          <button class="button_control button_control_s" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave"><p>保存</p></button>
+        </div>
+      </div>
+    </div>
+    <div v-show="active1" class="modal"></div>
   </div>
   <vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
 </div>
@@ -106,6 +112,7 @@ export default {
     return {
       datalist: [],
       active: false,
+      active1: false,
       type: '',
       title: '',
       rolename: '',
@@ -289,6 +296,8 @@ export default {
       if (!this.pkId) {
         return
       }
+      this.active1 = false
+      this.pkId = ''
       let arr1 = this.$refs.tree.getCheckedKeys()
       let arr2 = this.$refs.tree.getHalfCheckedKeys()
       arr2.map((e, i) => {
@@ -308,6 +317,7 @@ export default {
     },
     toCheck (e) {
       this.pkId = this.pkId === e.roleId ? '' : e.roleId
+      this.active1 = this.pkId === e.roleId
       this.checkedKeys = this.pkId === e.roleId ? e.menus1 : []
       this.tree.map(e => {
         this.$refs.tree.setChecked(e, false, true)
@@ -318,6 +328,10 @@ export default {
         this.checkedKeys = []
       }
     },
+    toCancle1 () {
+      this.active1 = false
+      this.pkId = ''
+    },
     show (e) {
       this.input = e.target
       this.layout = e.target.dataset.layout
@@ -353,32 +367,18 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
-.row_2
-  _fj()
-  _wh(100%, calc(100% - 50px))
+.page_container
+  padding 31px 31px 31px 45px
 .grid_wrapper
-  _wh(calc(50% - 10px), 100%)
+  height calc(100% - 122px)
   overflow-y auto
-.grid_wrapper table td
-  white-space normal
+.dialog_1
+  height 892px
+.dialog_body_1
+  height 618px
 .tree_wrapper
-  _wh(calc(50% - 10px), 100%)
+  _wh(100%, 100%)
   overflow-y auto
-.tree_header
-  position sticky
-  top -1px
-  z-index 99
-  background #d7d7d7
-  _font(14px, 23px, #323232, bold, center)
-  padding 12px 10px
-.button1
-  position absolute
-  right 10px
-  top 50%
-  transform translateY(-50%)
-.tree_body_container
-  height calc(100% - 47px)
-  padding 12px 10px
-.grid_wrapper table .row .button
-  margin 5px
+.mgr31
+  margin-right 31px
 </style>

src/pages/modules/systemmanage/system.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="main-container">
   <div class="right_side">
-    <div class="buttons_wrapper">
-      <div class="row">
-        <button class="button button--primary" @click="showDialog('1')">添加参数</button>
-      </div>
+    <div class="content_wrap">
+      <div class="title_wrap">
+        <h2>系统管理</h2>
       </div>
+      <div class="page_container">
         <div class="grid_wrapper">
           <table>
             <tr>
@@ -31,6 +31,11 @@
             </tr>
           </table>
         </div>
+        <div class="buttons_wrapper">
+          <button class="button_control" @click="showDialog('1')"><p>添加参数</p></button>
+        </div>
+      </div>
+    </div>
     <jxDialog
     ref="child"
     :title="title"
@@ -307,7 +312,9 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
+.page_container
+  padding 31px 31px 31px 45px
 .grid_wrapper
-  height calc(100% - 50px)
+  height calc(100% - 122px)
   overflow-y auto
 </style>

src/pages/modules/systemmanage/user.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="main-container">
   <div class="right_side">
-    <div class="buttons_wrapper">
-      <div class="row">
-        <button class="button button--primary" @click="showDialog('1')">添加用户</button>
-      </div>
+    <div class="content_wrap">
+      <div class="title_wrap">
+        <h2>用户管理</h2>
       </div>
+      <div class="page_container">
         <div class="grid_wrapper">
           <table>
             <tr>
@@ -15,7 +15,7 @@
               <th>电话</th>
               <th>性别</th>
               <th>创建日期</th>
-          <th>操作</th>
+              <th width="430px">操作</th>
             </tr>
             <tr v-for="(e, i) in datalist" :key="i">
               <td>{{i+1}}</td>
@@ -24,16 +24,21 @@
               <td>{{ e.phone }}</td>
               <td>{{ e.gender }}</td>
               <td>{{ e.createTime }}</td>
-          <td>
+              <td width="430px">
                 <div class="row">
-              <button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
-              <button class="button button--primary grid_button" @click="showDialog('3', e)">重置密码</button>
-              <button class="button button--primary grid_button" @click="showDialog('4', e)">删除</button>
+                  <button class="button button--primary grid_button mgr" @click="showDialog('2', e)">修改</button>
+                  <button class="button button--primary grid_button mgr" @click="showDialog('3', e)">重置密码</button>
+                  <button class="button button--primary grid_buttonmgr" @click="showDialog('4', e)">删除</button>
                 </div>
               </td>
             </tr>
           </table>
         </div>
+        <div class="buttons_wrapper">
+          <button class="button_control" @click="showDialog('1')"><p>添加用户</p></button>
+        </div>
+      </div>
+    </div>
     <jxDialog
     ref="child"
     :title="title"
@@ -69,10 +74,9 @@
           <div class="form_item__content">
             <div class="form_item__radio" v-for="(e, i) in sexArr" :key="i">
               <div class="radio__input" :class="{'icon_radio_checked': e.value === sex}" @click="toRadio(e)">
-                <i class="icon_radio"></i>
                 <input type="radio" class="radio__original" v-model="e.value">
               </div>
-              <div class="radio__label">{{ e.label }}</div>
+              <div class="radio__label" :class="{'radio__label_checked': e.value === sex}">{{ e.label }}</div>
             </div>
           </div>
         </div>
@@ -387,7 +391,9 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
+.page_container
+  padding 31px 31px 31px 45px
 .grid_wrapper
-  height calc(100% - 70px)
+  height calc(100% - 122px)
   overflow-y auto
 </style>

src/pages/modules/vehicleinformation/vehiclecontrol.vue

@@ -2,116 +2,93 @@
 <div class="main-container">
   <div class="right_side">
     <div class="content_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 state_wrap_1">
-          <div class="state_tip">更新状态</div>
-          <div class="state_content">
-            <div class="state_item_1">{{status.UpdateStatus_name}}</div>
-          </div>
+      <div class="title_wrap">
+        <h2>车辆控制</h2>
       </div>
+      <div class="page_container">
+        <div class="state_title-wrap">
+          <h3>状态</h3>
         </div>
         <div class="state_wrap">
-        <div class="state_tip">显示屏控制</div>
-        <div class="state_content">
+          <div class="state_item_wrap">
+            <div class="state_item_label">偏离状态：</div>
+            <div class="state_item_val" :class="{'state_item_val_disabled': status.inLineStatus === '1'}">{{status.inLineStatus_name}}</div>
+          </div>
+          <div class="state_item_wrap">
+            <div class="state_item_label">更新状态：</div>
+            <div class="state_item_val" :class="{'state_item_val_disabled': status.UpdateStatus === '0'}">{{status.UpdateStatus_name}}</div>
+          </div>
+        </div>
+        <div class="state_title-wrap">
+          <h3>AGV</h3>
+        </div>
+        <div class="agv_wrap">
+          <!-- 跳过起点 -->
+          <button class="switch_item switch_item_1" @click="switchDown('9', '0')" :disabled="disabled"></button>
+          <!-- 初始化坐标 -->
+          <button class="switch_item switch_item_2" @click="_queryRestPoint" :disabled="disabled"></button>
+          <!-- 全屏 -->
+          <button class="switch_item switch_item_3" @click="switchDown('11', '0')" :disabled="disabled"></button>
+          <!-- 退出 -->
+          <button class="switch_item switch_item_4" @click="switchDown('7', '0')" :disabled="disabled"></button>
+          <!-- 关机 -->
+          <button class="switch_item switch_item_5" @click="switchDown('1', '0')" :disabled="disabled"></button>
+          <!-- 软启动 -->
+          <button class="switch_item switch_item_6" @click="switchDown('8', '0')" :disabled="disabled"></button>
+          <!-- 重启 -->
+          <button class="switch_item switch_item_7" @click="switchDown('10', '0')" :disabled="disabled"></button>
+          <!-- 跳过检测 -->
+          <button class="switch_item switch_item_8" @click="switchDown('12', '0')" :disabled="disabled"></button>
+        </div>
+        <div class="state_title-wrap">
+          <h3>控制</h3>
+        </div>
+        <div class="control_wrap">
+          <div class="control_item">
+            <div class="control_label">显示屏控制</div>
+            <div class="control_val">
               <button class="state_item_switch" :class="{'is-checked': switch1 === '1'}" :disabled="disabled" @click="switchDown('2', switch1)">
                 <input type="checkbox" class="switch__input">
                 <span class="switch_core"></span>
               </button>
             </div>
           </div>
-      <div class="state_wrap">
-        <div class="state_tip">TCS控制</div>
-        <div class="state_content">
-          <div class="state_item_switch" :class="{'is-checked': switch2 === '1'}" :disabled="disabled" @click="switchDown('3', switch2)">
+          <div class="control_item">
+            <div class="control_label">TCS控制</div>
+            <div class="control_val">
+              <button class="state_item_switch" :class="{'is-checked': switch2 === '1'}" :disabled="disabled" @click="switchDown('3', switch2)">
                 <input type="checkbox" class="switch__input">
                 <span class="switch_core"></span>
+              </button>
             </div>
           </div>
-      </div>
-      <div class="state_wrap">
-        <div class="state_tip">SCHE控制</div>
-        <div class="state_content">
-          <div class="state_item_switch" :class="{'is-checked': switch3 === '1'}" :disabled="disabled" @click="switchDown('4', switch3)">
+          <div class="control_item">
+            <div class="control_label">SCHE控制</div>
+            <div class="control_val">
+              <button class="state_item_switch" :class="{'is-checked': switch3 === '1'}" :disabled="disabled" @click="switchDown('4', switch3)">
                 <input type="checkbox" class="switch__input">
                 <span class="switch_core"></span>
+              </button>
             </div>
           </div>
-      </div>
-      <div class="state_wrap">
-        <div class="state_tip">RC控制</div>
-        <div class="state_content">
-          <div class="state_item_switch" :class="{'is-checked': switch4 === '1'}" :disabled="disabled" @click="switchDown('5', switch4)">
+          <div class="control_item">
+            <div class="control_label">RC控制</div>
+            <div class="control_val">
+              <button class="state_item_switch" :class="{'is-checked': switch4 === '1'}" :disabled="disabled" @click="switchDown('5', switch4)">
                 <input type="checkbox" class="switch__input">
                 <span class="switch_core"></span>
+              </button>
             </div>
           </div>
-      </div>
-      <div class="state_wrap">
-        <div class="state_tip">Joy控制</div>
-        <div class="state_content">
-          <div class="state_item_switch" :class="{'is-checked': switch5 === '1'}" :disabled="disabled" @click="switchDown('6', switch5)">
+          <div class="control_item">
+            <div class="control_label">Joy控制</div>
+            <div class="control_val">
+              <button class="state_item_switch" :class="{'is-checked': switch5 === '1'}" :disabled="disabled" @click="switchDown('6', switch5)">
                 <input type="checkbox" class="switch__input">
                 <span class="switch_core"></span>
-          </div>
-        </div>
-      </div>
-      <div class="state_wrap">
-        <div class="state_tip">AGV</div>
-        <div class="state_content">
-          <button class="state_item_4 pointer" @click="switchDown('9', '0')" :disabled="disabled">
-            <div class="state_item_4_wrap">
-              <span class="state_item_4_btn state_icon_2"></span>
-              <span class="state_item_4_txt">跳过起点</span>
-            </div>
               </button>
-          <button class="state_item_4 pointer" @click="_queryRestPoint" :disabled="disabled">
-            <div class="state_item_4_wrap">
-              <span class="state_item_4_btn state_icon_6"></span>
-              <span class="state_item_4_txt">初始化坐标</span>
             </div>
-          </button>
-          <button class="state_item_4 pointer" @click="switchDown('11', '0')" :disabled="disabled">
-            <div class="state_item_4_wrap">
-              <span class="state_item_4_btn state_icon_4"></span>
-              <span class="state_item_4_txt">全屏</span>
           </div>
-          </button>
-          <button class="state_item_4 pointer" @click="switchDown('7', '0')" :disabled="disabled">
-            <div class="state_item_4_wrap">
-              <span class="state_item_4_btn state_icon_3"></span>
-              <span class="state_item_4_txt">退出</span>
-            </div>
-          </button>
-          <button class="state_item_4 pointer" @click="switchDown('1', '0')" :disabled="disabled">
-            <div class="state_item_4_wrap">
-              <span class="state_item_4_btn state_icon_5"></span>
-              <span class="state_item_4_txt">关机</span>
-            </div>
-          </button>
-          <button class="state_item_4 pointer" @click="switchDown('8', '0')" :disabled="disabled">
-            <div class="state_item_4_wrap">
-              <span class="state_item_4_btn state_icon_1"></span>
-              <span class="state_item_4_txt">软启动</span>
-            </div>
-          </button>
-          <button class="state_item_4 pointer" @click="switchDown('10', '0')" :disabled="disabled">
-            <div class="state_item_4_wrap">
-              <span class="state_item_4_btn state_icon_7"></span>
-              <span class="state_item_4_txt">重启</span>
-            </div>
-          </button>
-          <button class="state_item_4 pointer" @click="switchDown('12', '0')" :disabled="disabled">
-            <div class="state_item_4_wrap">
-              <span class="state_item_4_btn state_icon_8"></span>
-              <span class="state_item_4_txt">跳过检测</span>
-            </div>
-          </button>
         </div>
       </div>
     </div>
@@ -164,6 +141,9 @@ export default {
     clearInterval(this.timer)
   },
   methods: {
+    text () {
+      this.switch1 = '0'
+    },
     refresh () {
       this._queryAgvStatus()
       this.timer = setInterval(() => {
@@ -258,6 +238,59 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
+.state_wrap
+  width 100%
+  _fj()
+  padding 17px 30px 32px 80px
+.state_item_wrap
+  width 50%
+  _fj(flex-start)
+.state_item_label
+  width 190px
+  _font(36px, 56px, #B4C1D8, 500,)
+  font-family: SourceHanSansCN-Medium;
+.state_item_val
+  width calc(100% - 190px)
+  _font(36px, 56px, #fff, 500,)
+  font-family: SourceHanSansCN-Medium;
+  padding-left 66px
+  background left center url(../../../images/new/state_btn.png) no-repeat
+.state_item_val_disabled
+  background-image url(../../../images/new/state_btn_disable.png)
+.agv_wrap
+  width 100%
+  _fj()
+  padding 10px 30px 29px 80px
+.switch_item
+  _wh(157px, 157px)
+.switch_item_1
+  background center url(../../../images/new/switch_1.png) no-repeat
+.switch_item_2
+  background center url(../../../images/new/switch_2.png) no-repeat
+.switch_item_3
+  background center url(../../../images/new/switch_3.png) no-repeat
+.switch_item_4
+  background center url(../../../images/new/switch_4.png) no-repeat
+.switch_item_5
+  background center url(../../../images/new/switch_5.png) no-repeat
+.switch_item_6
+  background center url(../../../images/new/switch_6.png) no-repeat
+.switch_item_7
+  background center url(../../../images/new/switch_7.png) no-repeat
+.switch_item_8
+  background center url(../../../images/new/switch_8.png) no-repeat
+.control_wrap
+  width 100%
+  _fj(flex-start, flex-start)
+  flex-wrap wrap
+  padding 10px 30px 29px 80px
+.control_item
+  width calc(100% / 3)
+  _fj(flex-start, flex-start)
+.control_label
+  width 190px
+  _font(36px, 56px, #B4C1D8, 500,)
+  font-family: SourceHanSansCN-Medium;
 .content_wrap_inner
   _fj()
 .state_item_4

src/pages/modules/vehicleinformation/vehiclestatus.vue

@@ -2,77 +2,72 @@
 <div class="main-container">
   <div class="right_side">
     <div class="content_wrap">
-      <div class="state_wrap">
-        <div class="state_tip">车辆状态</div>
-        <div class="state_content">
-          <div class="state_item_1" :style="result.working_status === '运行' ? {'border': '1.6px solid #54c0b3', 'color': '#54c0b3'} : {'border': '1.6px solid #8b90a6', 'color': '#696969'}">{{result.vehicle_status}}</div>
+      <div class="title_wrap">
+        <h2>车辆状态</h2>
       </div>
+      <div class="page_container">
+        <div class="state_title-wrap">
+          <h3>AGV</h3>
+        </div>
+        <div class="agv_wrap">
+          <div class="agv_item_wrap">
+            <div class="agv_item_label">X坐标：</div>
+            <div class="agv_item_val">{{result.x}}</div>
+          </div>
+          <div class="agv_item_wrap">
+            <div class="agv_item_label">Y坐标：</div>
+            <div class="agv_item_val">{{result.y}}</div>
+          </div>
+          <div class="agv_item_wrap">
+            <div class="agv_item_label">航向角：</div>
+            <div class="agv_item_val">{{result.z}}</div>
+          </div>
+          <div class="agv_item_wrap">
+            <div class="agv_item_label">舵轮角度：</div>
+            <div class="agv_item_val">{{result.carrier}}</div>
+          </div>
+          <div class="agv_item_wrap">
+            <div class="agv_item_label">下发速度：</div>
+            <div class="agv_item_val">{{result.send_speed}}</div>
+          </div>
+          <div class="agv_item_wrap">
+            <div class="agv_item_label">实际速度：</div>
+            <div class="agv_item_val">{{result.real_speed}}</div>
+          </div>
+          <div class="agv_item_wrap">
+            <div class="agv_item_label">横向偏差：</div>
+            <div class="agv_item_val">{{result.landscape_deviation}}</div>
+          </div>
+          <div class="agv_item_wrap">
+            <div class="agv_item_label">航向偏差：</div>
+            <div class="agv_item_val">{{result.course_deviation}}</div>
+          </div>
+        </div>
+        <div class="state_line_dot_1"></div>
+        <div class="state_title-wrap">
+          <h3>状态</h3>
         </div>
         <div class="state_wrap">
-        <div class="state_tip">工作状态</div>
-        <div class="state_content">
-          <div class="state_item_1" :style="result.working_status === '正常' ? {'border': '1.6px solid #54c0b3', 'color': '#54c0b3'} : {'border': '1.6px solid #fa6400', 'color': '#fa6400'}">{{result.working_status}}</div>
+          <div class="state_left_wrap">
+            <div class="state_item_wrap">
+              <div class="agv_item_label">车辆状态：</div>
+              <div class="agv_item_val" :style="result.vehicle_status === '运行' ? {'color': '#3CC1FF'} : {'color': '#E54F29'}">{{result.vehicle_status}}</div>
+            </div>
+            <div class="state_item_wrap">
+              <div class="agv_item_label">工作状态：</div>
+              <div class="agv_item_val" :style="result.working_status === '正常' ? {'color': '#3CC1FF'} : {'color': '#E54F29'}">{{result.working_status}}</div>
             </div>
           </div>
-      <div class="state_wrap">
-        <div class="state_tip">传感器状态</div>
-        <div class="state_content state_content__h2">
-          <div class="state_item_2" :class="result1.stopButton_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
-            <span class="state_item_2_dot"></span>
-            <span class="state_item_2_txt">急停按钮</span>
+          <div class="state_line_dot_2"></div>
+          <div class="state_right_wrap">
+            <div class="state_item_label">传感器状态：</div>
+            <div class="state_item_val_wrap">
+              <div class="state_item_val" :class="{'state_item_val_disabled': result1.stopButton_status === '1'}">急停按钮</div>
+              <div class="state_item_val" :class="{'state_item_val_disabled': result1.speedReduction_status === '1'}">避障减速</div>
+              <div class="state_item_val" :class="{'state_item_val_disabled': result1.resetButton_status === '1'}">复位按钮</div>
+              <div class="state_item_val" :class="{'state_item_val_disabled': result1.speedStop_status === '1'}">避障停车</div>
+              <div class="state_item_val" :class="{'state_item_val_disabled': result1.securityTentacle_status === '1'}">安全触边</div>
             </div>
-          <div class="state_item_2" :class="result1.speedReduction_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
-            <span class="state_item_2_dot"></span>
-            <span class="state_item_2_txt">避障减速</span>
-          </div>
-          <div class="state_item_2" :class="result1.resetButton_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
-            <span class="state_item_2_dot"></span>
-            <span class="state_item_2_txt">复位按钮</span>
-          </div>
-          <div class="state_item_2" :class="result1.speedStop_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
-            <span class="state_item_2_dot"></span>
-            <span class="state_item_2_txt">避障停车</span>
-          </div>
-          <div class="state_item_2" :class="result1.securityTentacle_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
-            <span class="state_item_2_dot"></span>
-            <span class="state_item_2_txt">安全触边</span>
-          </div>
-        </div>
-      </div>
-      <div class="state_wrap">
-        <div class="state_tip">AGV</div>
-        <div class="state_content">
-          <div class="state_item_3">
-            <span class="state_item_3_txt1">X坐标：</span>
-            <span class="state_item_3_txt2">{{result.x}}</span>
-          </div>
-          <div class="state_item_3">
-            <span class="state_item_3_txt1">Y坐标：</span>
-            <span class="state_item_3_txt2">{{result.y}}</span>
-          </div>
-          <div class="state_item_3">
-            <span class="state_item_3_txt1">航向角：</span>
-            <span class="state_item_3_txt2">{{result.z}}</span>
-          </div>
-          <div class="state_item_3">
-            <span class="state_item_3_txt1">下发速度：</span>
-            <span class="state_item_3_txt2">{{result.send_speed}}</span>
-          </div>
-          <div class="state_item_3">
-            <span class="state_item_3_txt1">实际速度：</span>
-            <span class="state_item_3_txt2">{{result.real_speed}}</span>
-          </div>
-          <div class="state_item_3">
-            <span class="state_item_3_txt1">舵轮角度：</span>
-            <span class="state_item_3_txt2">{{result.carrier}}</span>
-          </div>
-          <div class="state_item_3">
-            <span class="state_item_3_txt1">横向偏差：</span>
-            <span class="state_item_3_txt2">{{result.landscape_deviation}}</span>
-          </div>
-          <div class="state_item_3">
-            <span class="state_item_3_txt1">航向偏差：</span>
-            <span class="state_item_3_txt2">{{result.course_deviation}}</span>
           </div>
         </div>
       </div>
@@ -132,45 +127,60 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
-.right_side_box_1
-  _wh(100%,100%)
-  padding .26rem .34rem 0 .48rem
-.site_btn_box
-  _wh(100%,auto)
-  overflow hidden
-.site_btn_box_1
-  margin-top .2rem
-  _fj(flex-start)
+.state_line_dot_1
+  _wh(100%, 1px)
+  background center / 100% 100% url(../../../images/new/line_1.png) no-repeat
+  margin-bottom 49px
+.agv_wrap
+  width 100%
+  _fj()
   flex-wrap wrap
-.site_btn
-  float left
-  _wh(2.6rem,1rem)
-  background #FFFFFF
-  border 1.6px solid #54C0B3
-  box-shadow 2px 0px 5px 0px rgba(222,222,222,1)
-  border-radius .16rem
-  _font(.32rem,1rem,#54C0B3,,center)
-  margin-right .3rem
-  margin-bottom .2rem
-.site_btn_1
-  width 30%
-  border 1.6px solid #8B90A6
-  color: #696969
-  margin-right 3%
-  margin-bottom .24rem
-.site_btn_disabled
-  // opacity 0.5
-  .state_item_2_dot
-    background-color #fa6400
-.site_btn_active
-  opacity 1
-  .state_item_2_dot
-    background-color #00c852
-.state_content__h2
-  height auto
-.state_item_3_txt1
-  width 170px
-.state_item_3_txt2
-  width calc(100% - 170px)
-  word-break break-all
+  padding 47px 30px 10px 30px
+.agv_item_wrap
+  width 25%
+  _fj()
+  margin-bottom 50px
+.agv_item_label
+  width 190px
+  _font(36px, 36px, #B4C1D8, 500, right)
+  font-family: SourceHanSansCN-Medium;
+.agv_item_val
+  width calc(100% - 190px)
+  _font(36px, 36px, #3CC1FF, 500, left)
+  font-family: SourceHanSansCN-Medium;
+.state_wrap
+  width 100%
+  _fj(,flex-start)
+  padding 47px 30px 10px 30px
+.state_left_wrap
+  width 412px
+.state_item_wrap
+  width 100%
+  _fj(flex-start)
+  margin-bottom 52px
+.state_line_dot_2
+  _wh(1px, 201px)
+  background center / 100% 100% url(../../../images/new/line_2.png) no-repeat
+  margin 0 49px
+.state_right_wrap
+  width calc(100% - 511px)
+  _fj(flex-start, flex-start)
+.state_item_label
+  width 250px
+  _font(36px, 36px, #B4C1D8, 500, right)
+  font-family: SourceHanSansCN-Medium;
+.state_item_val_wrap
+  position relative
+  top -10px
+  width calc(100% - 250px)
+  _fj(flex-start, flex-start)
+  flex-wrap: wrap
+.state_item_val
+  _wh(50%, 56px)
+  _font(36px, 56px, #fff, 500,,)
+  padding-left 66px
+  margin-bottom 30px
+  background left center url(../../../images/new/state_btn.png) no-repeat
+.state_item_val_disabled
+  background-image url(../../../images/new/state_btn_disable.png)
 </style>

src/pages/shells/index/index.vue

@@ -39,7 +39,7 @@
       <div class="bottom_bg"></div>
       <div v-show="$route.path !== '/index/teach' && $route.path !== '/index/home' && $route.path !== '/index/errorinfo'" 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>
+          <el-menu-item :index="menu.index" v-for="menu in childmenus" :key="menu.index" :class="{'el-menu-item-long': menu.label.length === 5 }">{{menu.label}}</el-menu-item>
         </el-menu>
       </div>
       <router-view></router-view>
@@ -399,7 +399,7 @@ export default {
   .el-menu-item
     _wh(105px, 77px)
     _font(30px, 77px, #8DBFEE, bold, center)
-    font-family Source Han Sans CN
+    font-family SourceHanSansCN-Bold
     font-style italic
     background linear-gradient(0deg, #A2C3E3 0%, #5E9ED9 11.9140625%, #A2C3E3 100%)
     -webkit-background-clip text
@@ -461,7 +461,7 @@ export default {
   height 77px
 .user_name
   _font(22px, 77px, #fff,,left)
-  font-family: Source Han Sans CN
+  font-family: SourceHanSansCN-Regular
   padding-left 50px
   margin-right 4px
   background left center / 50px 52px url(../../../images/new/user_icon.png) no-repeat
@@ -478,22 +478,17 @@ export default {
   left 50%
   transform translateX(-50%)
   z-index 1000
-  width 100%
-  min-width 100px
-  background-color #fff
-  border 1px solid #ebeef5
-  border-radius 4px
-  box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
-  padding 10px 0
+  width 180px
+  background: rgba(7,31,62,0.95);
+  border: 1px solid #4980BD;
   ul
     width 100%
     li
       width 100%
-      _font(16px, 32px, #909399,,center)
+      _font(30px, 80px, #fff,,center)
       padding 0 10px
       &:hover
-        background-color #ffc3a7
-        color #fd6a35
+        color #3CC1FF
 .popper__arrow
   position absolute
   width: 0;
@@ -507,7 +502,7 @@ export default {
   transform: translateX(-6px)
   margin-right: 3px;
   border-top-width: 0;
-  border-bottom-color: #ebeef5;
+  border-bottom-color: #4980BD;
   &:after
     position: absolute;
     display: block;
@@ -520,19 +515,19 @@ export default {
     top: 1px;
     margin-left: -6px;
     border-top-width: 0;
-    border-bottom-color: #fff;
+    border-bottom-color: rgba(7,31,62,0.95);
 .side-bar-container
   .el-menu
     border-right 0
     background-color transparent
   .el-menu-item
     height 120px
-    _font(36px, 40px, #fff,,center)
+    _font(36px, 40px, #fff,,)
     font-family: YouSheBiaoTiHei
     white-space wrap
     background center / 100% 100% url(../../../images/new/sidebar_bg.png) no-repeat
     _fj(center)
-    padding 0 63px 10px 63px !important
+    padding 0 43px 10px 87px !important
   .el-menu-item.is-active
     background center / 100% 100% url(../../../images/new/sidebar_active_bg.png) no-repeat
 .hud_left
@@ -550,4 +545,7 @@ export default {
   bottom 0
   _wh(100%, 92px)
   background center bottom / 100% 100% url(../../../images/new/bottom_bg.png) no-repeat
+.side-bar-container
+  .el-menu-item-long
+    padding 0 30px 10px 87px !important
 </style>

src/style/common.styl

@@ -6,6 +6,22 @@
        url('iconfont/iconfont.woff?t=1631676179964') format('woff'),
        url('iconfont/iconfont.ttf?t=1631676179964') format('truetype');
 }
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url('font/YouSheBiaoTiHei.ttf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Bold";
+  src: url('font/SourceHanSansCN-Bold.otf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Regular";
+  src: url('font/SourceHanSansCN-Regular.otf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Medium";
+  src: url('font/SourceHanSansCN-Medium.otf') format('truetype');
+}
 [class*=" icon_"],[class^=icon_]
   font-family: "iconfont" !important;
   speak: none;
@@ -44,7 +60,7 @@
   _fj()
   _wh(100%, 100%)
   padding-top 124px
-  padding-bottom 92px
+  padding-bottom 54px
   background center / 100% 100% url(../images/new/bg.png) no-repeat
 .body-conatiner_1
   background center / 100% 100% url(../images/new/bg_1.png) no-repeat
@@ -54,12 +70,34 @@
 .main-container
   _wh(calc(100% - 228px), 100%)
   padding-right 53px
-.site_container
-  _fj()
-  _wh(100%, 100%)
-  overflow hidden
 .left_side
   _wh(2.72rem, 100%)
+.right_side
+  _wh(100%, 100%)
+  padding 0 30px 0 30px
+.content_wrap
+  _wh(100%, 100%)
+.title_wrap
+  _wh(100%, 102px)
+  padding 52px 39px 0 39px
+  background center / 100% 100% url(../images/new/bg-task-r1.png) no-repeat
+  h2
+    _font(36px, 36px,  #F6F9FE,,)
+    font-family: YouSheBiaoTiHei
+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+.page_container
+  _wh(100%, calc(100% - 102px))
+  background center / 100% 100% url(../images/new/bg-task-r2.png) no-repeat
+  padding 41px 54px
+.state_title-wrap
+  _wh(405px, 75px)
+  padding 22px 0 0 83px
+  background center / 100% 100% url(../images/new/state_title_bg.png) no-repeat
+  h3
+    _font(36px, 36px,  #F6F9FE,,)
+    font-family: SourceHanSansCN-Bold
 
 .filter-table
   width 100%
@@ -122,12 +160,11 @@
   clear: both
 .button
   display: inline-block;
-  line-height: 1;
+  line-height: 30px;
   white-space: nowrap;
   cursor: pointer;
-  background: #fff;
-  border: 1px solid #dcdfe6;
-  color: #606266;
+  color: #3CC1FF;
+  background transparent
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
@@ -138,23 +175,16 @@
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
-  padding: 12px 20px;
-  font-size: 14px;
-  border-radius: 20px;
+  padding: 0 20px;
+  font-size: 30px;
   &:disabled
-    color: #fff;
-    background-color: $gray;
-    border-color: $gray1;
-.button+.button
-  margin-left: 10px;
+    color: #E54F29;
+.mgr
+  margin-right 10px
 .button--primary
-  color: #fff;
-  background-color: $red;
-  border-color: $red1;
+  color: #3CC1FF;
 .button--info
   color: #fff;
-  background-color: $gray;
-  border-color: $gray1;
 .modal
   position: fixed;
   left: 0;
@@ -174,19 +204,24 @@
   z-index: 202;
 .dialog
   position: relative;
-  margin: 0 auto 50px;
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 1px 3px rgba(0,0,0,.3);
-  box-sizing: border-box;
-  width: 65%;
-  margin-top: 15%;
+  margin: 0 auto;
+  background center / 100% 100% url(../images/new/modal_bg.png) no-repeat
+  width: 885px;
+  min-height: 354px;
+  max-height: 1000px;
+  top: 50%
+  transform: translateY(-50%)
 .dialog_header
-  padding: 20px 20px 10px;
+  height 86px
+  padding 25px 29px
 .dialog_title
-  line-height: 24px;
-  font-size: 18px;
-  color: #303133;
+  line-height: 36px;
+  font-size: 36px;
+  color: #FFFFFF;
+  font-family: YouSheBiaoTiHei;
+  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 .dialog_headerbtn
   position: absolute;
   top: 20px;
@@ -198,72 +233,77 @@
   cursor: pointer;
   font-size: 16px;
 .dialog_body
-  padding: 30px 20px;
-  color: #606266;
-  font-size: 14px;
-  line-height: 32px
+  // height 538
+  // overflow-y auto
+  padding: 0 48px 0 62px;
+  color: #FFF;
+  font-size: 30px;
+  font-family: SourceHanSansCN-Regular;
+  line-height: 80px;
   word-break: break-all;
 .form_wraper
   width 100%
+  color: #FFF;
+  font-size: 30px;
+  font-family: SourceHanSansCN-Regular;
+  line-height: 80px;
 .form
   width 100%
-  _fj(flex-start, flex-start)
   .form_item
-    width 48%
-    margin-bottom: 20px
-  .form_item+.form_item
-    margin-left 4%
+    width 100%
+    margin-bottom: 30px
+    _fj(,flex-start)
 .form_item__label
-  width: 100px;
-  text-align: left;
+  width: 160px;
+  text-align: right;
   vertical-align: middle;
-  float: left;
-  font-size: 14px;
-  color: #606266;
-  line-height: 32px;
-  padding: 0 10px;
+  font-size: 30px;
+  font-family: SourceHanSansCN-Regular;
+  line-height: 80px;
+  padding-right: 20px;
   box-sizing: border-box;
   i
-    color $red2
+    color #E54F29
 .form_item__content
-  width: calc(100% - 100px)
-  margin-left: 100px;
-  line-height: 32px;
+  width: calc(100% - 160px)
+  line-height: 80px;
   position: relative;
-  font-size: 14px;
+  font-size: 30px;
 .form_item__input
   width 100%
   -webkit-appearance: none;
-  background-color: #fff;
   background-image: none;
-  border-radius: 4px;
-  border: 1px solid $gray1;
+  background: rgba(45,88,184,0.1);
+  border: 1px solid #4980BD;
   box-sizing: border-box;
-  color: #696969;
+  color: #fff;
   display: inline-block;
-  font-size: 14px;
-  height: 32px;
-  line-height: 30px;
+  font-size: 30px;
+  height: 80px;
+  line-height: 78px;
   outline: none;
   padding: 0 10px;
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   width: 100%;
   border-radius: 8px
+  &:focus
+    background: rgba(45,88,184,0.25);
+    border: 2px solid #21D0F2;
 .form_item__textarea
   line-height 30px
   height 120px
   padding 10px
 .form_item__radio
-  color: #606266;
+  color: #fff;
   font-weight: 500;
-  line-height: 32px;
+  line-height: 40px;
   position: relative;
   cursor: pointer;
   display: inline-block;
   white-space: nowrap;
   outline: none;
-  font-size: 14px;
-  margin-right: 30px;
+  font-size: 30px;
+  margin: 0 40px 0 20px;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -272,18 +312,21 @@
   cursor: pointer;
   outline: none;
   display: inline-block;
-  padding: 2px
+  width: 40px;
+  height: 40px;
   position: relative;
   vertical-align: middle;
-  border 1px solid $green1
-  background-color #fff
-  border-radius 50%
+  background center / 100% 100% url(../images/new/radio_bg.png) no-repeat
 .radio__label
   display: inline-block;
-  font-size: 14px;
+  font-size: 30px;
   padding-left: 20px;
+  font-family: SourceHanSansCN-Regular;
+  vertical-align: text-top
 .icon_radio_checked
-  background-color $green1
+  background center / 100% 100% url(../images/new/radio_bg_checked.png) no-repeat
+.radio__label_checked
+  color #3CC1FF
 .radio__original
   opacity: 0;
   outline: none;
@@ -296,25 +339,35 @@
   margin: 0;
 .el-select
   width 100%
+.el-select-dropdown
+  background: rgba(7,31,62,0.95);
+  border: 1px solid #4980BD;
 .el-input, .el-select .el-input .el-select__caret, .el-select-dropdown__item
-  font-size 14px
-  line-height 30px
-  height 30px
+  font-size 30px
+  color #fff
+  line-height 80px
+  height 80px
 .el-select:hover .el-input__inner, .el-input__inner
-  border-color $gray1
+  border-color #4980BD
+  background: rgba(45,88,184,0.1);
 .el-select .el-input__inner:focus, .el-select .el-input.is-focus .el-input__inner
-  border-color $red1
+  border-color #21D0F2
+  background: rgba(45,88,184,0.25);
 .el-select-dropdown__item.selected
-  color $red2
+  color #4980BD
+.el-select-dropdown__item.hover
+  background-color transparent
 .el-input__inner
-  color #696969
-  font-size 14px
-  line-height 30px
-  height 30px
+  color fff
+  font-size 30px
+  line-height 80px
+  height 80px
 .dialog_footer
-  padding: 10px 20px 20px;
+  height 188px
+  padding: 50px 20px;
   text-align: center;
   box-sizing: border-box;
+  _fj(center)
 #keyboard
   position fixed
   left 0
@@ -330,11 +383,21 @@
   border-radius 10px
 
 // 用户管理
-.right_side
-  _wh(100%, 100%)
-  padding 20px 20px 30px 20px
 .buttons_wrapper
-  margin-bottom 30px
+  margin 31px 55px 36px 55px
+.button_control
+  _wh(335px, 91px)
+  background center url(../images/new/button.png) no-repeat
+  p
+    _font(48px, 48px, #EFF2FF,,center)
+    font-family: YouSheBiaoTiHei
+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+.button_control_s
+  _wh(331px, 88px)
+.button_control_disabled
+  background center url(../images/new/button_disabled.png) no-repeat
 .grid_wrapper
   width 100%
   table
@@ -348,33 +411,39 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      text-align: center;
+      text-align: left;
       position: sticky;
       top: -1px;
-      background: #d7d7d7;
-      font-size: 14px;
-      line-height: 23px;
-      color: #323232;
+      height: 81px;
+      font-size: 36px;
+      font-family: SourceHanSansCN-Bold;
+      line-height: 81px;
+      color: #AFBED8;
       font-weight: bold;
+      font-style: italic;
       z-index: 99;
-      padding 12px 10px;
+      padding 0 25px;
+      background left center / 1px 81px url(../images/new/th_bg.png) repeat-x
     td
       box-sizing: border-box;
       overflow: hidden;
-      white-space: nowrap;
+      // white-space: nowrap;
       text-overflow: ellipsis;
-      padding: 12px 10px;
-      border-bottom: 1px dashed $gray1;
-      border-right: 1px dashed $gray1;
-      text-align: center;
-      font-size: 14px;
-      line-height: 23px;
-      color: #323232;
-      background: #fff;
+      padding: 5px 5px 5px 25px;
+      border-bottom: 2px solid rgba(122,159,224,0.17);
+      text-align: left;
+      font-size: 30px;
+      line-height: 35px;
+      height: 82px;
+      color: #fff;
       &:last-child
         border-right: none;
+.grid_wrapper table .tr:nth-child(odd) td
+  background: rgba(31,46,73,0.3);
+.grid_wrapper table .tr:nth-child(even) td
+  background: rgba(31,46,73,0.5);
 .grid_wrapper table .tr_selected td
-  background-color #ffc3a7
+  background: rgba(63,106,202,0.3);
 .grid_wrapper table th:first-child
 	position: sticky;
 	left: 0;
@@ -384,19 +453,49 @@
 	left: 0;
 	z-index: 99;
 .grid_button
-  padding 12px 20px
+  padding 0 20px
 
 // tree
+.tree_body_container
+  padding 0
+  .el-tree
+    background transparent
+    color #fff
+  .el-tree-node__content
+    height 80px
+    &:hover
+      background: rgba(63,106,202,0.3);
+  .el-tree-node__expand-icon
+    font-size 40px
+    color #fff
+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 80%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  .el-checkbox
+    font-size 80px
+  .el-checkbox__inner
+    _wh(40px, 40px)
+    background: rgba(45,88,184,0.1);
+    border: 1px solid #4980BD;
+    &::after
+      height: 28px
+      left 18px
+  .el-tree-node__content>.el-checkbox
+    margin-right 20px
+  .el-tree-node__label
+    font-size 30px
+    font-family: SourceHanSansCN-Regular
 .el-checkbox__inner:hover, .el-checkbox__input.is-focus .el-checkbox__inner
-  border-color $green1
+  border-color #4980BD
+  background: linear-gradient(0deg,#1F57BB 0%, #296BFF 100%);
 .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner
-  background-color $green1
-  border-color $green1
+  border-color #4980BD
+  background: linear-gradient(0deg,#1F57BB 0%, #296BFF 100%);
+.el-checkbox__input.is-indeterminate .el-checkbox__inner
+  &::before
+    top 17px
 
 // 车辆信息
-.content_wrap
-  _wh(100%, 100%)
-  overflow-y auto
 .state_wrap
   width 100%
   _fj(, flex-start)
@@ -465,8 +564,8 @@
   display: inline-flex;
   align-items: center;
   position: relative;
-  line-height: 100px;
-  height: 100px;
+  line-height: 88px;
+  height: 88px;
   vertical-align: middle;
   margin-bottom 20px
   margin-right 24px
@@ -483,35 +582,30 @@
   margin: 0;
   display: inline-block;
   position: relative;
-  width: 260px;
-  height: 100px;
-  border: 1px solid #dcdfe6;
+  width: 168px;
+  height: 88px;
   outline: none;
-  border-radius: 60px;
   box-sizing: border-box;
-  background: #dcdfe6;
   cursor: pointer;
   transition: border-color .3s,background-color .3s;
   vertical-align: middle;
-  border-color: $gray2;
-  background-color: $gray3;
+  background center bottom / 100% 100% url(../images/new/switch_bg_off.png) no-repeat
   &::after
     content: "";
     position: absolute;
-    top: 1px;
-    left: 1px;
-    border-radius: 100%;
+    top: 11px;
+    left: 11px;
     transition: all .3s;
-    width: 97px;
-    height: 97px;
-    background-color: #fff;
+    width: 66px;
+    height: 66px;
+    background center bottom / 100% 100% url(../images/new/switch_off.png) no-repeat
 .is-checked
   .switch_core
-    border-color: rgb(19, 206, 102);
-    background-color: rgb(19, 206, 102);
+    background center bottom / 100% 100% url(../images/new/switch_bg_on.png) no-repeat
     &::after
       left: 100%;
-      margin-left: -98px;
+      margin-left: -77px;
+      background center bottom / 100% 100% url(../images/new/switch_on.png) no-repeat
 
 // tree
 // .el-tree-node__content