feat: 添加朦胧层组件

src/components/minePupop/index.vue

@@ -0,0 +1,45 @@
+<!-- 弹窗 -->
+<template>
+  <div class="pupop"
+       v-if="show">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  watch: {},
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
+  created () {
+
+  },
+  mounted () {
+
+  }
+}
+</script>
+<style lang='less' scoped >
+.pupop {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/pages/testSkin/details/index.vue

@@ -80,28 +80,46 @@
           <div class="add">新增</div>
         </div>
         <div class="programme-list">
-          <div class="programme-info">
+          <div :class="['programme-info',item.onSelect?'programme-active':'']"
+               v-for="(item,index) in programmeList"
+               :key="index"
+               @click="onOperation(index)">
             <div class="programme-left">
               <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
                      alt=""></div>
               <div class="programme-tips">
-                <div class="tips-title">【清洁补水】华熙智慧…</div>
-                <div class="tips-title">美白、祛痘、抗皱</div>
-                <div class="tips-title">仪器：<span>无创水光</span></div>
+                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
+                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
+                <div class="tips-title">仪器：<span>{{'无创水光'|ellipsis(9)}}</span></div>
               </div>
             </div>
-            <div class="programme-right"></div>
+            <div class="programme-right">
+              <div class="frequency">执行频率：<span>{{item.frequency}}</span></div>
+              <div class="duration">持续时长：<span>{{item.duration}}</span></div>
+            </div>
+            <div class="operation"
+                 v-if="item.onSelect">
+              <div class="edit">编辑</div>
+              <div class="delete">删除</div>
+            </div>
           </div>
         </div>
       </div>
+      <div class="submit"
+           @click="onSubmit">保存</div>
     </div>
+    <mine-pupop :show="isPupop">
+      <div class=""></div>
+    </mine-pupop>
   </div>
 </template>
 
 <script>
 import { mapActions } from 'vuex'
+import minePupop from '../../../components/minePupop/index.vue'
+
 export default {
-  components: {},
+  components: { minePupop },
   data () {
     return {
       userInfo: {
@@ -111,6 +129,7 @@ export default {
         age: '23',
         skinType: '中性皮肤'
       },
+      //面部标签
       lableList: [
         {
           text: '对话框的',
@@ -153,8 +172,22 @@ export default {
           disabled: false
         },
       ],
+      //执行方案
+      programmeList: [
+        {
+          frequency: '1周1次',
+          duration: '28天'
+        }, {
+          frequency: '1周1次',
+          duration: '28天'
+        }, {
+          frequency: '1周1次',
+          duration: '28天'
+        },
+      ],
+      programmeIndex: '',
       remarks: '',
-
+      isPupop: true
     };
   },
   computed: {
@@ -163,12 +196,20 @@ export default {
   watch: {},
 
   methods: {
+    onOperation (index) {
+      if (this.programmeList[index].onSelect) {
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
+      } else {
+        this.$set(this.programmeList[index], 'onSelect', true)
+      }
+    },
+    onSubmit () {
+
+    }
   },
 
   created () {
 
-
-
   },
 
   mounted () {
@@ -304,6 +345,7 @@ export default {
   }
   .right {
     margin-left: 18px;
+    position: relative;
     flex: 1;
     .lable {
       width: 100%;
@@ -364,15 +406,16 @@ export default {
     .programme {
       margin-top: 18px;
       width: 100%;
-      height: 208px;
+      // height: 208px;
       background: #ffffff;
       box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
       border-radius: 8px;
+      padding: 14px 12px 0 12px;
+
       .tab {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 14px 12px 0 12px;
         .tab-title {
           font-size: 14px;
           font-family: PingFangSC-Medium, PingFang SC;
@@ -395,11 +438,18 @@ export default {
       }
       .programme-list {
         margin-top: 10px;
+        height: 150px;
+        overflow: scroll;
+        position: relative;
+        z-index: 1;
         .programme-info {
+          position: relative;
           padding: 8px 10px;
           margin-bottom: 10px;
           display: flex;
           align-items: center;
+          border-radius: 4px;
+          border: 1px solid #f5f5f5;
           .programme-left {
             flex: 1;
             display: flex;
@@ -411,6 +461,7 @@ export default {
               }
             }
             .programme-tips {
+              margin-left: 10px;
               font-size: 10px;
               font-family: PingFangSC-Regular, PingFang SC;
               font-weight: 400;
@@ -420,10 +471,60 @@ export default {
           }
           .programme-right {
             flex: 1;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 17px;
+            padding-left: 125px;
+            .duration {
+              margin-top: 14px;
+            }
+          }
+          .operation {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 10px;
+            z-index: 10;
+            width: 44px;
+            background: #ffffff;
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+            border-radius: 2px;
+            padding: 10px;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 17px;
+            .delete {
+              margin-top: 20px;
+            }
           }
         }
+        .programme-active {
+          border: 1px solid #fa852f;
+        }
       }
     }
+    .submit {
+      margin-top: 18px;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 176px;
+      height: 28px;
+      line-height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      text-align: center;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+    }
   }
 }
 </style>