Bläddra i källkod

feat: 添加朦胧层组件

lihai 2 år sedan
förälder
incheckning
6815e54c6e
2 ändrade filer med 157 tillägg och 11 borttagningar
  1. 45 0
      src/components/minePupop/index.vue
  2. 112 11
      src/pages/testSkin/details/index.vue

+ 45 - 0
src/components/minePupop/index.vue

@@ -0,0 +1,45 @@
1
+<!-- 弹窗 -->
2
+<template>
3
+  <div class="pupop"
4
+       v-if="show">
5
+    <slot></slot>
6
+  </div>
7
+</template>
8
+
9
+<script>
10
+export default {
11
+  data () {
12
+    return {
13
+
14
+    }
15
+  },
16
+  computed: {},
17
+  watch: {},
18
+  props: {
19
+    show: {
20
+      type: Boolean,
21
+      default: true
22
+    }
23
+  },
24
+  created () {
25
+
26
+  },
27
+  mounted () {
28
+
29
+  }
30
+}
31
+</script>
32
+<style lang='less' scoped >
33
+.pupop {
34
+  width: 100vw;
35
+  height: 100vh;
36
+  position: fixed;
37
+  top: 0;
38
+  left: 0;
39
+  z-index: 1000;
40
+  background: rgba(0, 0, 0, 0.7);
41
+  display: flex;
42
+  justify-content: center;
43
+  align-items: center;
44
+}
45
+</style>

+ 112 - 11
src/pages/testSkin/details/index.vue

@@ -80,28 +80,46 @@
80 80
           <div class="add">新增</div>
81 81
         </div>
82 82
         <div class="programme-list">
83
-          <div class="programme-info">
83
+          <div :class="['programme-info',item.onSelect?'programme-active':'']"
84
+               v-for="(item,index) in programmeList"
85
+               :key="index"
86
+               @click="onOperation(index)">
84 87
             <div class="programme-left">
85 88
               <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
86 89
                      alt=""></div>
87 90
               <div class="programme-tips">
88
-                <div class="tips-title">【清洁补水】华熙智慧…</div>
89
-                <div class="tips-title">美白、祛痘、抗皱</div>
90
-                <div class="tips-title">仪器:<span>无创水光</span></div>
91
+                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
92
+                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
93
+                <div class="tips-title">仪器:<span>{{'无创水光'|ellipsis(9)}}</span></div>
91 94
               </div>
92 95
             </div>
93
-            <div class="programme-right"></div>
96
+            <div class="programme-right">
97
+              <div class="frequency">执行频率:<span>{{item.frequency}}</span></div>
98
+              <div class="duration">持续时长:<span>{{item.duration}}</span></div>
99
+            </div>
100
+            <div class="operation"
101
+                 v-if="item.onSelect">
102
+              <div class="edit">编辑</div>
103
+              <div class="delete">删除</div>
104
+            </div>
94 105
           </div>
95 106
         </div>
96 107
       </div>
108
+      <div class="submit"
109
+           @click="onSubmit">保存</div>
97 110
     </div>
111
+    <mine-pupop :show="isPupop">
112
+      <div class=""></div>
113
+    </mine-pupop>
98 114
   </div>
99 115
 </template>
100 116
 
101 117
 <script>
102 118
 import { mapActions } from 'vuex'
119
+import minePupop from '../../../components/minePupop/index.vue'
120
+
103 121
 export default {
104
-  components: {},
122
+  components: { minePupop },
105 123
   data () {
106 124
     return {
107 125
       userInfo: {
@@ -111,6 +129,7 @@ export default {
111 129
         age: '23',
112 130
         skinType: '中性皮肤'
113 131
       },
132
+      //面部标签
114 133
       lableList: [
115 134
         {
116 135
           text: '对话框的',
@@ -153,8 +172,22 @@ export default {
153 172
           disabled: false
154 173
         },
155 174
       ],
175
+      //执行方案
176
+      programmeList: [
177
+        {
178
+          frequency: '1周1次',
179
+          duration: '28天'
180
+        }, {
181
+          frequency: '1周1次',
182
+          duration: '28天'
183
+        }, {
184
+          frequency: '1周1次',
185
+          duration: '28天'
186
+        },
187
+      ],
188
+      programmeIndex: '',
156 189
       remarks: '',
157
-
190
+      isPupop: true
158 191
     };
159 192
   },
160 193
   computed: {
@@ -163,12 +196,20 @@ export default {
163 196
   watch: {},
164 197
 
165 198
   methods: {
199
+    onOperation (index) {
200
+      if (this.programmeList[index].onSelect) {
201
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
202
+      } else {
203
+        this.$set(this.programmeList[index], 'onSelect', true)
204
+      }
205
+    },
206
+    onSubmit () {
207
+
208
+    }
166 209
   },
167 210
 
168 211
   created () {
169 212
 
170
-
171
-
172 213
   },
173 214
 
174 215
   mounted () {
@@ -304,6 +345,7 @@ export default {
304 345
   }
305 346
   .right {
306 347
     margin-left: 18px;
348
+    position: relative;
307 349
     flex: 1;
308 350
     .lable {
309 351
       width: 100%;
@@ -364,15 +406,16 @@ export default {
364 406
     .programme {
365 407
       margin-top: 18px;
366 408
       width: 100%;
367
-      height: 208px;
409
+      // height: 208px;
368 410
       background: #ffffff;
369 411
       box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
370 412
       border-radius: 8px;
413
+      padding: 14px 12px 0 12px;
414
+
371 415
       .tab {
372 416
         display: flex;
373 417
         align-items: center;
374 418
         justify-content: space-between;
375
-        padding: 14px 12px 0 12px;
376 419
         .tab-title {
377 420
           font-size: 14px;
378 421
           font-family: PingFangSC-Medium, PingFang SC;
@@ -395,11 +438,18 @@ export default {
395 438
       }
396 439
       .programme-list {
397 440
         margin-top: 10px;
441
+        height: 150px;
442
+        overflow: scroll;
443
+        position: relative;
444
+        z-index: 1;
398 445
         .programme-info {
446
+          position: relative;
399 447
           padding: 8px 10px;
400 448
           margin-bottom: 10px;
401 449
           display: flex;
402 450
           align-items: center;
451
+          border-radius: 4px;
452
+          border: 1px solid #f5f5f5;
403 453
           .programme-left {
404 454
             flex: 1;
405 455
             display: flex;
@@ -411,6 +461,7 @@ export default {
411 461
               }
412 462
             }
413 463
             .programme-tips {
464
+              margin-left: 10px;
414 465
               font-size: 10px;
415 466
               font-family: PingFangSC-Regular, PingFang SC;
416 467
               font-weight: 400;
@@ -420,10 +471,60 @@ export default {
420 471
           }
421 472
           .programme-right {
422 473
             flex: 1;
474
+            font-size: 12px;
475
+            font-family: PingFangSC-Regular, PingFang SC;
476
+            font-weight: 400;
477
+            color: #333333;
478
+            line-height: 17px;
479
+            padding-left: 125px;
480
+            .duration {
481
+              margin-top: 14px;
482
+            }
483
+          }
484
+          .operation {
485
+            position: absolute;
486
+            left: 50%;
487
+            transform: translateX(-50%);
488
+            top: 10px;
489
+            z-index: 10;
490
+            width: 44px;
491
+            background: #ffffff;
492
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
493
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
494
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
495
+            border-radius: 2px;
496
+            padding: 10px;
497
+            font-size: 12px;
498
+            font-family: PingFangSC-Regular, PingFang SC;
499
+            font-weight: 400;
500
+            color: #333333;
501
+            line-height: 17px;
502
+            .delete {
503
+              margin-top: 20px;
504
+            }
423 505
           }
424 506
         }
507
+        .programme-active {
508
+          border: 1px solid #fa852f;
509
+        }
425 510
       }
426 511
     }
512
+    .submit {
513
+      margin-top: 18px;
514
+      position: relative;
515
+      left: 50%;
516
+      transform: translateX(-50%);
517
+      width: 176px;
518
+      height: 28px;
519
+      line-height: 28px;
520
+      background: #fa7d22;
521
+      border-radius: 14px;
522
+      text-align: center;
523
+      font-size: 14px;
524
+      font-family: PingFangSC-Medium, PingFang SC;
525
+      font-weight: 500;
526
+      color: #ffffff;
527
+    }
427 528
   }
428 529
 }
429 530
 </style>