style: 修改购买弹窗CSS样式

src/components/TagSelection.vue

@@ -71,7 +71,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   span{
-    margin: 0 0.15rem 0.2rem 0.15rem;
+    margin: 0 0.15rem 0.2rem 0;
     padding:4px 10px;
     background: #F5F5F5;
     color:#4D4D4D;
@@ -84,4 +84,4 @@ export default {
     color:#fff;
   }
 }
-</style>
+</style>
\ No newline at end of file

src/pages/buy/components/BuyPopup.vue

 <template>
-  <van-popup v-model="popupVisiable" position="bottom" class="buy-popup" :style="{ height: '60%' }" >
+  <van-popup v-model="popupVisiable" position="bottom" class="buy-popup" :style="{ height: '60%' }">
     <div class="goods-card van-hairline--bottom">
       <div class="thumb">
-        <img :src="thumb">
+        <img :src="thumb" />
       </div>
       <div class="content">
-        <div class="price">￥<span>{{price}}</span></div>
-        <p class="surplus">剩余 {{surplus}}</p>
+        <div class="price">
+          ￥<span>{{ price }}</span>
+        </div>
+        <p class="surplus">剩余 {{ surplus }}</p>
       </div>
     </div>
-    <van-field :label="spec_title" class="tag-item">
+    <van-field :label="spec_title" class="tag-item is-vertical">
       <template #input>
-        <tag-selection v-model="spec" :data="specList" :options="{ label: 'spec_values', value: 'sku_id'}" @currentSelected="handleTagSelected"/>
+        <tag-selection
+          v-model="spec"
+          :data="specList"
+          :options="{ label: 'spec_values', value: 'sku_id' }"
+          @currentSelected="handleTagSelected"
+        />
       </template>
     </van-field>
     <van-form :show-error="false" @submit="handleSuccess">
       <van-field name="count" label="购买数量">
         <template #input>
           <div class="space-bt">
-            <span style="color:#B4B4B4;"></span>
+            <span style="color: #b4b4b4"></span>
             <van-stepper v-model="form.count" />
           </div>
         </template>
       </van-field>
-      <van-field v-for="item in fieldsMap" v-model="form[item.key]" :key="item.key" :name="item.key" :label="item.label" :type="item.type" :placeholder="item.placeholder" :rules="[{ required: item.required, message: item.placeholder }, { validator: item.validator, message: item.errorMsg || '输入格式有误' }]">
+      <van-field
+        v-for="item in fieldsMap"
+        v-model="form[item.key]"
+        :key="item.key"
+        :name="item.key"
+        :label="item.label"
+        :type="item.type"
+        :placeholder="item.placeholder"
+        :rules="[
+          { required: item.required, message: item.placeholder },
+          { validator: item.validator, message: item.errorMsg || '输入格式有误' }
+        ]"
+        class="is-vertical"
+      >
         <template #input v-if="item.type === 'image'">
           <app-upload v-model="form[item.key]" :max-count="1"></app-upload>
         </template>
       </van-field>
-      <div style="margin: 16px;">
+      <div style="margin: 16px">
         <van-button type="primary" round block color="#C01540" size="small">下一步</van-button>
       </div>
     </van-form>
-    <van-dialog v-model="dialogVisiable" title="请选择支付方式" show-cancel-button getContainer="body" @confirm="handleDialogConfirm">
+    <van-dialog
+      v-model="dialogVisiable"
+      title="请选择支付方式"
+      show-cancel-button
+      getContainer="body"
+      @confirm="handleDialogConfirm"
+    >
       <van-radio-group v-model="payType">
         <van-radio name="12">支付宝支付</van-radio>
         <van-radio name="4">微信支付</van-radio>
@@ -73,17 +99,20 @@ export default {
       },
       fieldsMap: {},
       validatorMap: {
-        phone: (val) => {
+        phone: val => {
           if (val === '') return true
-          return /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(val);
+          return /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(val)
         },
-        email: (val) => {
+        email: val => {
           if (val === '') return true
-          return /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@[A-Za-z0-9-.]+$/.test(val);
+          return /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@[A-Za-z0-9-.]+$/.test(val)
         },
-        idCard: (val) => {
+        idCard: val => {
           if (val === '') return true
-          return /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val) || /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/.test(val)
+          return (
+            /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val) ||
+            /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/.test(val)
+          )
         }
       },
       dialogVisiable: false,
@@ -96,10 +125,10 @@ export default {
     query() {
       return this.$route.query
     },
-    spu_id () {
+    spu_id() {
       return this.query.spu_id || '6805043172159258624'
     },
-    shop_id () {
+    shop_id() {
       return this.query.shop_id || '6800681447305773056'
     }
   },
@@ -221,58 +250,65 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.buy-popup{
-  box-sizing:border-box;
+.is-vertical {
+  flex-direction: column;
+  ::v-deep .van-field__label {
+    width: auto;
+    margin-right: 0;
+  }
+}
+.buy-popup {
+  box-sizing: border-box;
 }
-.goods-card{
-  position:relative;
-  box-sizing:border-box;
-  padding:2.6vw 0 2.6vw 30vw;
-  height:26vw;
-  margin:0 0.24rem 10px;
-  border-radius:3px;
-  .thumb{
-    width:26vw;
-    height:26vw;
-    position:absolute;
-    left:0;
-    top:0;
-    img{
-      width:80%;
-      display:block;
-      margin:10% auto;
+.goods-card {
+  position: relative;
+  box-sizing: border-box;
+  padding: 2.6vw 0 2.6vw 30vw;
+  height: 26vw;
+  margin: 0 0.24rem 10px;
+  border-radius: 3px;
+  .thumb {
+    width: 26vw;
+    height: 26vw;
+    position: absolute;
+    left: 0;
+    top: 0;
+    img {
+      width: 80%;
+      display: block;
+      margin: 10% auto;
     }
   }
-  .content{
-    display:flex;
-    flex-direction:column;
-    height:100%;
-    padding-right:10px;
-    .price{
-      color:#C01540;
-      font-size:12px;
-      line-height:0.64rem;
-      flex:1;
-      span{
-        font-size:0.4rem;
+  .content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-right: 10px;
+    .price {
+      color: #c01540;
+      font-size: 12px;
+      line-height: 0.64rem;
+      flex: 1;
+      span {
+        font-size: 0.4rem;
       }
     }
-    .surplus{
-      line-height:0.64rem;
-      color:#B4B4B4;
+    .surplus {
+      line-height: 0.64rem;
+      color: #b4b4b4;
     }
   }
 }
-.tag-item{
-  display:block;
-  ::v-deep.van-field__value{
-    margin-top:8px;
+.tag-item {
+  display: block;
+  ::v-deep.van-field__value {
+    margin-top: 8px;
   }
 }
-.van-radio-group{
-  padding:0.4rem;
-  .van-radio{
-    padding:0.2rem;
+.van-radio-group {
+  padding: 0.4rem;
+  .van-radio {
+    padding: 0.2rem;
   }
 }
 </style>