img

src/pages/modules/taskmanage/CarryPoint.vue

@@ -2,14 +2,14 @@
 <div class="main-container">
   <div class="movepoint">
     <div class="con">
+      <div class="box0">
+        <div class="title">搬运起点</div>
+      </div>
       <div class="box1">
-        <div class="point fl" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
+        <div class="point fl" :class="{'statusbg': pkId === e.point_code}" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
       </div>
       <div class="box2">
-        <span class="span1">目标站点：</span>
-        <span class="span2">{{selectObj.code_name}}</span>
-        <button class="btn btn1" @click="toSure">确定</button>
-        <button class="btn btn2" @click="toClear">清除</button>
+        <div class="btn" @click="toSure">定为目标站点</div>
       </div>
     </div>
   </div>
@@ -22,51 +22,53 @@ export default {
   name: 'MovePoint',
   data () {
     return {
+      statusbg: false,
+      pkId: '',
       selectObj: {},
       // dataList: []
       dataList: [
         {
-          id: '1',
+          point_code: '1',
           code_name: 'A-ZD101'
         },
         {
-          id: '2',
+          point_code: '2',
           code_name: 'A-ZD102'
         },
         {
-          id: '3',
+          point_code: '3',
           code_name: 'A-ZD103'
         },
         {
-          id: '4',
+          point_code: '4',
           code_name: 'A-ZD101'
         },
         {
-          id: '5',
+          point_code: '5',
           code_name: 'A-ZD101'
         },
         {
-          id: '6',
+          point_code: '6',
           code_name: 'A-ZD101'
         },
         {
-          id: '7',
+          point_code: '7',
           code_name: 'A-ZD101'
         },
         {
-          id: '8',
+          point_code: '8',
           code_name: 'A-ZD101'
         },
         {
-          id: '9',
+          point_code: '9',
           code_name: 'A-ZD101'
         },
         {
-          id: '10',
+          point_code: '10',
           code_name: 'A-ZD101'
         },
         {
-          id: '11',
+          point_code: '11',
           code_name: 'A-ZD101'
         }
       ]
@@ -94,6 +96,7 @@ export default {
       }
     },
     toRadio (e) {
+      this.pkId = this.pkId === e.point_code ? '' : e.point_code
       this.selectObj = e
     },
     toSure () {
@@ -111,61 +114,65 @@ export default {
 <style lang="stylus" scoped>
 .con
   float left
-  margin-left .95rem
-  margin-top .39rem
+.box0
+  width 1586px
+  height 102px
+  background center / 100% 100% url(../../../images/new/bg-task-r1.png) no-repeat
+  .title
+    font-size 36px
+    color #F6F9FE
+    padding-left 39px
+    padding-top 48px
 .box1
-  width 10rem
-  // height 6.1rem
+  width 1592px
+  height 819px
+  background center / 100% 100% url(../../../images/new/bg-task-r2.png) no-repeat
+  padding 28px 41px
   .point
-    width 1.8rem
-    line-height .9rem
-    color #FA6400
-    font-size .24rem
+    width 232px
+    height 120px
+    line-height 120px
+    // width 246px
+    // height 134px
+    // line-height 134px
+    color #B4C1D8
+    font-size 36px
     text-align center
-    border .1rem solid #DFE1E6
-    border-radius .2rem
-    background #ffffff
-    margin-right .2rem
-    margin-bottom .35rem
+    margin-right 19px
+    margin-bottom 20px
+    background #3D486C
+    border 1px solid #cccccc
+    // margin-right 13px
+    // margin-bottom 13px
+    // background center / 100% 100% url(../../../images/new/bg2.png) no-repeat
+  .statusbg
+    // width 246px
+    // height 134px
+    // line-height 134px
+    width 232px
+    height 120px
+    line-height 120px
+    box-sizing border-box
+    color #3CC1FF
+    font-size 36px
+    text-align center
+    margin-right 19px
+    margin-bottom 20px
+    background #3D486C
+    border 1px solid #3CC1FF
+    // margin-right 13px
+    // margin-top -10px
+    // background center / 232px 120px url(../../../images/new/bg1.png) no-repeat !important
 .box2
   position fixed
-  bottom .5rem
-  width 9.8rem
-  height 1.5rem
-  border .16rem solid #DFE1E6
-  border-radius .2rem
+  left 935px
+  bottom 88px
   background #ffffff
-  .span1
-    position absolute
-    left .3rem
-    top .34rem
-    display inline-block
-    line-height .5rem
-    font-size .24rem
-    border-right 3px solid #FA6400
-    width 1.6rem
-    color #464646
-  .span2
-    position absolute
-    left 2.5rem
-    top .38rem
-    display inline-block
-    font-size .3rem
-    color #fa6400
   .btn
-    width 1.4rem
-    line-height .88rem
-    font-size .24rem
-    border-radius .28rem
-    color #ffffff
-  .btn1
-    position absolute
-    left 6rem
-    top .15rem
-    background #FD6A35
-  .btn2
-    position absolute
-    left 7.6rem
-    top .15rem
-    background #989EBB
+    width 335px
+    line-height 91px
+    font-size 36px
+    text-align center
+    color #EFF2FF
+    background center / 100% 100% url(../../../images/new/button.png) no-repeat
 </style>