顶部

src/pages/modules/workorder/index.vue

@@ -11,21 +11,29 @@
             </div>
         </div>
         <div class="header_wrap_left">
-            <div class="header-user-content" @click="toSelect">
+            <div class="header-user-content">
-                <div class="header-user-txt">
+                <div class="header-user-txt" @click="toSelect">
-                    <span class="span2">{{userName}}</span>
+                    <div class="span2">姓名{{userName}}</div>
-                    <span class="span1 icon_user"></span>
+                    <div class="span1"></div>
-                </div>
-                <div class="drop-button-wraper">
-                    <div class="colors_3_wrap">
-                        <div class="color_item color_1"></div>
-                        <div class="color_item color_2"></div>
-                        <div class="color_item color_3"></div>
-                    </div>
                 </div>
                 <div v-show="show" class="dropdown-wrap">
                     <ul class="dropdown-list drift">
-                        <li class="dropdown-item" @click="exit">退出</li>
+                        <li class="dropdown-item__1" @click="exit">
+                            <i class="icon_exit"></i>
+                            <i class="exit_txt">退出</i>
+                        </li>
+                    </ul>
+                    <div class="popper__arrow"></div>
+                </div>
+            </div>
+            <div class="drop-button-wraper">
+                <div class="colors_3_wrap" @click="toSelectColor">
+                    <div class="color_item color_1"></div>
+                    <div class="color_item color_2"></div>
+                    <div class="color_item color_3"></div>
+                </div>
+                <div v-show="showColor" class="dropdown-wrap">
+                    <ul class="dropdown-list drift">
                         <li class="dropdown-item color_button_wrap">
                             <div class="color_button overall_orange" @click="switchColor(1)"></div>
                             <div class="color_button overall_lightgreen" @click="switchColor(2)"></div>
@@ -141,18 +149,17 @@ export default {
     height 45px
     _fj(flex-start)
     cursor pointer
-.set_color_wrap
-    margin-left 20px
 .header-user-txt
-    padding 14.5px 0
+    _fj()
-    line-height 1
     .span1
-        _font(16px, 1, #fff,bold,)
+        _wh(18px, 18px)
-        vertical-align middle
+        background url(../../../images/user.png) center center / 100% 100% no-repeat
+        margin-left 10px
     .span2
-        _font(16px, 1, #fff,,)
+        _font(16px, 20px, #fff,,)
-        vertical-align middle
+        margin-bottom -2px
 .drop-button-wraper
+    position relative
     height 100%
     line-height 45px
     font-size 14px
@@ -162,7 +169,8 @@ export default {
     _fj(center)
 .dropdown-wrap
     position absolute
-    top 39px
+    min-width 75px
+    top 35px
     right 0
     z-index 1
     transform-origin center top
@@ -172,15 +180,27 @@ export default {
     background-color #fff
     box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
     margin 5px 0
-    padding 5px 0
 .dropdown-list
     padding 0
 .dropdown-item
     height 34px
     _font(14px, 34px, #606266,,center)
-    padding 0 20px
+    padding 0 10px
     &:hover
         background-color $gray2
+.dropdown-item__1
+    height 34px
+    _font(14px, 34px, #606266,,center)
+    padding 0 10px
+    _fj(center)
+    &:hover
+        background-color $gray2
+.icon_exit
+    _font(14px, 34px, #606266,,center)
+.exit_txt
+    _font(14px, 34px, #606266,,center)
+    font-style normal
+    margin-left 5px
 .popper__arrow
     position absolute
     display block
@@ -190,12 +210,10 @@ export default {
     border-style solid
     border-width 6px
     filter drop-shadow(0 2px 12px rgba(0,0,0,.03))
-    top -6px
+    top -5px
-    left 50%
+    right 2px
-    transform translateX(-50%)
-    margin-right 3px
     border-top-width 0
-    border-bottom-color #ebeef5
+    border-bottom-color #fff
 .header-time-wrap
     height 45px
 .header-time
@@ -238,21 +256,17 @@ export default {
         border-top-right-radius 12px
 .main-container
     _wh(100%, calc(100% - 44px))
-.set_color_wrap
+.drop-button-wraper
-    .dropdown-wrap
-        width 132px
-        left 50%
-        transform translateX(-50%)
     .dropdown-list
         padding 0 10px
     .dropdown-item
         float left
-        padding 10px 0
+        padding 0
         &:nth-child(2)
-            padding 10px 10px
+            padding 0 10px
 .colors_3_wrap
     position relative
-    _wh(20px, 20px)
+    _wh(18px, 18px)
     border 1px solid $gray3
     border-radius 50%
     overflow hidden

src/pages/modules/workorder/work-order-query.vue

@@ -82,7 +82,7 @@ import { deviceList, getTable } from '../../../config/getData2.js'
 export default {
   data () {
     return {
-      value1: [new Date(), new Date()],
+      value1: [],
       options: [],
       value: '',
       keyValue: '',

src/style/iconfont.styl

@@ -11,8 +11,9 @@
   content '\e60f'
 .select_icon::before
   content '\e608'
-.icon_user::before
+.icon_exit
-  content '\e7a3'
+  &::before
+   content '\e892'
 
 // new
 [class*=" icon_"],[class^=icon_]