feat: 更改样式

src/pages/customerMan/details/index.vue

@@ -67,7 +67,7 @@
             <div class="lable-title">面诊标签</div>
             <div class="problem">
               <div class="problem-title">问题标签</div>
-              <div class="problem-lable">
+              <div class="problem-lable-top">
                 <div class="lable-text problem-text">{{problem}}</div>
               </div>
             </div>
@@ -85,22 +85,25 @@
         <div class="right-top-list">
           <div class="dataList"
                @click="toOrder(1)">
-            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/project_icon.png" />
-            <p>项目订单</p>
-            <span>{{order_total.project}}</span>
+            <div class="data-list-left"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/project_icon.png" />
+              <p>项目订单</p>
+            </div>
+            <div><span>{{order_total.project}}</span></div>
           </div>
           <div class="dataList"
                style="margin:18px 0px"
                @click="toOrder(2)">
-            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/coupon_icon.png" />
-            <p>优惠券</p>
-            <span>{{order_total.coupon}}</span>
+            <div class="data-list-left"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/coupon_icon.png" />
+              <p>优惠券</p>
+            </div>
+            <div><span>{{order_total.coupon}}</span></div>
           </div>
           <div class="dataList"
                @click="toOrder(3)">
-            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/order_total_icon.png" />
-            <p>商品订单</p>
-            <span>{{order_total.goods}}</span>
+            <div class="data-list-left"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/order_total_icon.png" />
+              <p>商品订单</p>
+            </div>
+            <div><span>{{order_total.goods}}</span></div>
           </div>
         </div>
       </div>
@@ -375,15 +378,15 @@ export default {
   }
 
   .right {
+    width: calc(100% - 294px);
     margin-left: 18px;
     position: relative;
-    flex: 1;
     .right-top {
       height: 205px;
       // border: 1px solid red;
       display: flex;
       .right-top-list {
-        width: 239ppx;
+        width: 239px;
         margin-left: 18px;
         display: flex;
         flex-direction: column;
@@ -395,7 +398,12 @@ export default {
           border-radius: 8px;
           padding: 16px 12px 12px 12px;
           display: flex;
+          justify-content: space-between;
           align-items: center;
+          .data-list-left {
+            display: flex;
+            align-items: center;
+          }
           img {
             width: 33px;
             height: 33px;
@@ -403,7 +411,6 @@ export default {
           p {
             font-size: 14px;
             margin-left: 14px;
-            margin-right: 80px;
           }
           span {
             font-size: 16px;
@@ -416,7 +423,7 @@ export default {
         box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
         border-radius: 8px;
         padding: 16px 12px 12px 12px;
-        width: 310px;
+        width: calc(100% - 239px);
         height: 100%;
         .lable {
           //   margin-top: 23px;
@@ -440,6 +447,30 @@ export default {
               color: #333333;
               line-height: 18px;
             }
+            .problem-lable-top {
+              flex: 1;
+              overflow-y: hidden;
+              width: 100%;
+              height: 68px;
+              font-size: 12px;
+              font-family: PingFang-SC-Regular, PingFang-SC;
+              font-weight: 400;
+              color: #333333;
+              line-height: 17px;
+              display: flex;
+              flex-flow: column wrap;
+              list-style-type: none;
+              overflow-x: scroll;
+              align-items: baseline;
+
+              .lable-text {
+                margin-left: 10px;
+                margin-bottom: 10px;
+                border: 1px solid #42d351;
+                padding: 0 12px;
+                border-radius: 2px;
+              }
+            }
             .problem-lable {
               flex: 1;
               overflow-y: hidden;
@@ -521,19 +552,22 @@ export default {
     }
     .right-bottom {
       margin-top: 18px;
-      width: 575px;
-      height: 286px;
+      // width: 575px;
+      overflow: auto;
+      height: calc(100% - 223px);
       background: #ffffff;
       box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
       border-radius: 8px;
       padding: 16px 12px 12px 12px;
       .programme {
         //   margin-top: 20px;
+        height: 100%;
         width: 100%;
         background: #ffffff;
         border-radius: 8px;
         .programmeList {
-          width: 550px;
+          height: calc(100% - 20px);
+          // width: 550px;
           .programmeWeek {
             display: flex;
             align-items: center;
@@ -575,7 +609,7 @@ export default {
             color: #333333;
           }
           .weekDetails {
-            height: 180px;
+            height: calc(100% - 63px);
             border-radius: 6px;
             border: 1px solid #f5f5f5;
             display: flex;
@@ -586,7 +620,7 @@ export default {
           .contentItem {
             margin-left: 10px;
             width: 317px;
-            min-height: 211px;
+            height: 100%;
             border-right: 1px solid #f5f5f5;
             // overflow-y: scroll;
           }

src/pages/testSkin/details/index.vue

@@ -65,7 +65,7 @@
         </div>
         <div class="problem">
           <div class="problem-title">问题标签</div>
-          <div class="problem-lable">
+          <div class="problem-lable-top">
             <div class="lable-text problem-text">{{problem}}</div>
           </div>
         </div>
@@ -88,7 +88,7 @@
         </div>
       </div>
       <div class="programme"
-           :style="isOpen?'height: 265px;':'height: 464px;'">
+           :style="isOpen?'height: calc(100% - 293px);':'height: calc(100% - 94px);'">
         <div class="tab">
           <div class="tab-title">执行方案</div>
           <div class="add"
@@ -234,7 +234,8 @@ export default {
         user_id: '',
         skin_id: '',
         face_names: '',
-        remark: ""
+        remark: "",
+        id: ''
       },
       //皮肤状态
       skin_status: [],
@@ -319,6 +320,7 @@ export default {
       api.getSkinInfo({ id: this.id }).then(res => {
         this.userInfo = res.data.user;
         this.saveScheme.user_id = this.userInfo.user_id
+        this.saveScheme.id = res.data.id
         this.detail_list = res.data.detail_list;
         this.programmeList = res.data.scheme_list;
         this.problem = res.data.skin_name;
@@ -663,6 +665,7 @@ export default {
     }
   }
   .right {
+    width: calc(100% - 336px);
     margin-left: 18px;
     position: relative;
     flex: 1;
@@ -712,6 +715,30 @@ export default {
           color: #333333;
           line-height: 18px;
         }
+        .problem-lable-top {
+          flex: 1;
+          overflow-y: hidden;
+          width: 100%;
+          height: 45px;
+          font-size: 12px;
+          font-family: PingFang-SC-Regular, PingFang-SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 17px;
+          display: flex;
+          flex-flow: column wrap;
+          list-style-type: none;
+          overflow-x: scroll;
+          align-items: baseline;
+
+          .lable-text {
+            margin-left: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #42d351;
+            padding: 0 12px;
+            border-radius: 2px;
+          }
+        }
         .problem-lable {
           flex: 1;
           overflow-y: hidden;
@@ -758,6 +785,7 @@ export default {
     .programme {
       margin-top: 18px;
       width: 100%;
+      height: calc(100% - 94px);
       background: #ffffff;
       box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
       border-radius: 8px;
@@ -789,12 +817,11 @@ export default {
       }
 
       .programmeList {
-        width: 510px;
         height: 270px;
+        height: calc(100% - 35px);
       }
 
       .programmeWeek {
-        width: 510px;
         display: flex;
         align-items: center;
       }
@@ -836,8 +863,7 @@ export default {
         color: #333333;
       }
       .weekDetails {
-        width: 509px;
-        height: 232px;
+        height: calc(100% - 63px);
         border-radius: 6px;
         border: 1px solid #f5f5f5;
         display: flex;
@@ -848,7 +874,7 @@ export default {
       .contentItem {
         margin-left: 10px;
         width: 317px;
-        min-height: 211px;
+        height: 100%;
         border-right: 1px solid #f5f5f5;
         // overflow-y: scroll;
       }
@@ -1050,12 +1076,14 @@ export default {
     .skin-item {
       margin-top: 20px;
       width: 172px;
-
       background: #f4f7ff;
       border-radius: 2px;
       border: 1px solid #557cff;
-      line-height: 23px;
-
+      line-height: 16px;
+      padding: 3px 0 4px 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       font-size: 12px;
       font-weight: 400;
       color: #333333;
@@ -1065,10 +1093,13 @@ export default {
 
     .skin-item-not {
       margin-top: 20px;
+      padding: 3px 0 4px 0;
       width: 172px;
-      height: 25px;
       background: #f5f5f5;
-      line-height: 25px;
+      line-height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       border-radius: 2px;
       font-size: 12px;
       font-weight: 400;
@@ -1077,16 +1108,6 @@ export default {
       margin-right: 20px;
     }
 
-    // <div class="skinDiv">
-
-    //            <div class="skin-item"
-    //                  v-for="item,index in skinTag"
-    //                  :key="index">
-    //               {{item.title}}
-    //             </div>
-
-    //         </div>
-
     .faceTag {
       margin-top: 20px;
       width: 426px;

src/pages/testSkin/updates/index.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="problem">
           <div class="problem-title">问题标签</div>
-          <div class="problem-lable">
+          <div class="problem-lable-top">
             <div class="lable-text problem-text">{{problem}}</div>
           </div>
         </div>
@@ -695,6 +695,32 @@ export default {
           color: #333333;
           line-height: 18px;
         }
+        .problem-lable-top {
+          flex: 1;
+          overflow-y: hidden;
+          width: 100%;
+          height: 45px;
+          font-size: 12px;
+          font-family: PingFang-SC-Regular, PingFang-SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 17px;
+          display: flex;
+          flex-flow: column wrap;
+          list-style-type: none;
+          overflow-x: scroll;
+          align-items: baseline;
+
+          .lable-text {
+            margin-left: 10px;
+            margin-bottom: 10px;
+            height: 24px;
+            line-height: 24px;
+            border: 1px solid #42d351;
+            padding: 0 12px;
+            border-radius: 2px;
+          }
+        }
         .problem-lable {
           flex: 1;
           overflow-y: hidden;