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

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