规格弹窗样式完成

src/components/goodsItem/IndexSkuDialog.vue

@@ -40,18 +40,18 @@
                 </div>
               </div>
             </div>
-            <div v-if="index == 1">
+            <div v-if="index == 1" class="check_box">
               <el-checkbox-group v-model="checkedCities">
                 <el-checkbox v-for="city in cities" :label="city" :key="city">
-                  <div style="width: 100%">{{ city }}</div>
+                  <div class="box_centen">{{ city }}<span>￥1234.88</span></div>
                 </el-checkbox>
               </el-checkbox-group>
             </div>
           </div>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button
+      <div slot="footer" class="dialog-footer f_c_b">
+        <!-- <el-button
           type="primary"
           size="small"
           :disabled="
@@ -59,8 +59,22 @@
           "
           @click="confirms()"
           >确 定</el-button
+        > -->
+        <div class="price">
+          <div>
+            <span>总价：</span><span><i>￥</i>1788.88</span>
+          </div>
+          <p>已选择2个商品</p>
+        </div>
+        <el-button
+          :disabled="
+            Object.keys(skuItem).length == 0 || specList.length != isCheckSku
+          "
+          style="width: 136px"
+          type="primary"
+          >{{ isCarOrBuy == 1 ? "加入购物车" : "立即购买" }}</el-button
         >
-      </span>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -87,7 +101,7 @@ export default {
       loading: false,
       skuItem: {},
       specList: [], // 规格列表
-      checkedCities: "",
+      checkedCities: ["上海"],
       cities: ["上海", "北京", "广州", "深圳"],
     };
   },
@@ -240,56 +254,68 @@ export default {
     }
     .el-checkbox {
       width: 100%;
-	  height: 44px;
-	  background: #F8F8F8;
-	  margin-bottom: 16px;
-	  line-height: 44px;
-	  padding: 0 28px 0 16px;
-	  box-sizing: border-box;
-	  color: #222222;
-	  border-radius: 8px;
+      background: #f8f8f8;
+      margin-bottom: 16px;
+      padding: 0 28px 0 16px;
+      box-sizing: border-box;
+      color: #222222;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      .el-checkbox__label {
+        flex: 1;
+      }
+      &:nth-last-of-type(1) {
+        margin-bottom: 0;
+      }
+    }
+    .is-checked {
+      background: #ebf2ff;
     }
   }
-}
-.contents {
-  width: 100%;
-  padding: 0 8px;
-  .pop_prices {
-    width: 100%;
-    min-height: 80px;
+  .dialog-footer {
+    padding: 0 8px;
+    .price {
+      p {
+        font-size: 16px;
+        color: #666666;
+        text-align: left;
+      }
+      div {
+        span {
+          &:nth-of-type(1) {
+            color: #222222;
+            font-size: 16px;
+          }
+          &:nth-of-type(2) {
+            i {
+              font-size: 17px;
+              font-style: normal;
+            }
+            font-weight: bold;
+            color: #eb445a;
+            font-size: 28px;
+          }
+        }
+      }
+    }
+  }
+  .f_c_b {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 0px 0px 8px 0px;
-    .imgs {
-      width: 136px;
-      height: 80px;
-      border-radius: 8px;
-      margin-right: 16px;
-    }
-    .rights {
-      width: 100%;
-      min-height: 80px;
-    }
-    .goods_titles {
-      font-size: 16px;
-      font-weight: 500;
-      color: #222222;
-    }
-    .goods_price {
-      font-size: 16px;
-      font-weight: 500;
-      color: #fc3f3f;
-      margin-top: 14px;
-    }
   }
+}
+.contents {
+  width: 100%;
+  padding: 0 8px;
   .check_con {
     width: 100%;
-    // height: 500px;
-    // overflow-y: auto;
     .check_items {
-      width: 100%;
       margin-bottom: 32px;
+      &:nth-last-of-type(1) {
+        margin-bottom: 10px;
+      }
     }
     .grades {
       font-size: 16px;
@@ -302,6 +328,26 @@ export default {
       max-height: 200px;
       overflow-y: auto;
     }
+    .check_box {
+      max-height: 400px;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .box_centen {
+        height: 44px;
+        line-height: 42px;
+        display: flex;
+        justify-content: space-between;
+        span {
+          font-weight: bold;
+          color: #eb445a;
+          font-size: 16px;
+          font-family: DIN Alternate-Bold, DIN Alternate;
+        }
+      }
+    }
+
     .grade_names {
       width: 100%;
       display: flex;