Merge branch 'edit' of daiyanrong/live-telecast-ui-h5 into sit

src/components/inputNumber.vue

@@ -22,6 +22,7 @@ export default {
   mounted() {},
   watch: {
     numb: function (val) {
+      console.log(val);
       this.num = val ? parseInt(val) : 0;
     },
   },
@@ -56,16 +57,18 @@ export default {
       this.leix();
       if (this.num > 0) {
         this.num--;
+        console.log(this.num);
         this.$emit("backNum", this.num);
       }
     },
     jia() {
       this.leix();
       this.num++;
-      this.num = parseInt(this.num);
 
+      this.num = parseInt(this.num);
+      console.log(this.num);
       if (this.num < this.max) {
-        this.num++;
+        console.log(this.num);
         this.$emit("backNum", this.num);
       }
     },

src/views/address/component/addrList.vue

@@ -4,7 +4,7 @@
       class="addressList"
       v-for="(n, i) in cardData.length"
       :key="i"
-      @click="handleSelect(cardData[i])"
+      @click.stop="handleSelect(cardData[i])"
     >
       <div class="addressDetai">
         <div class="addrTitle">
@@ -28,7 +28,7 @@
             />
             <span>删除</span>
           </div>
-          <div class="edit" @click="selected">
+          <div class="edit" @click.stop="handleEdit(cardData[i])">
             <img src="@/assets/images/delete/select.png" />
 
             <span>编辑</span>
@@ -85,6 +85,9 @@ export default {
     });
   },
   methods: {
+    handleEdit(e) {
+      this.$emit("edit", e);
+    },
     handleSelect(e) {
       this.$emit("select", e);
     },

src/views/address/view.vue

@@ -12,6 +12,7 @@
       :area-list="areaList"
       :show-postal="false"
       :show-delete="false"
+      :tel-validator="validator"
       :address-info="addressInfo"
       :show-set-default="false"
       :show-search-result="false"
@@ -31,6 +32,7 @@ export default {
   mixins: [resToken],
   data() {
     return {
+      // /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(s)
       id: "0",
       title: "",
       areaList: areaList,
@@ -56,6 +58,16 @@ export default {
     }
   },
   methods: {
+    validator(e) {
+      let myreg1 = /^[1][3,4,5,7,8][0-9]{9}$/;
+      let myreg2 = /^[2][3,4,5,7,8][0-9]{6}$/;
+      if (!myreg1.test(e) && !myreg2.test(e)) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+
     onClickLeft() {
       window.history.back(-1);
     },

src/views/live/index.vue

@@ -140,7 +140,7 @@ export default {
   .videoList {
     padding: 0 16px 60px 16px;
     box-sizing: border-box;
-    background: transparent;
+    background: #e6e6dc;
     position: relative;
     height: auto;
     width: 100%;

src/views/login/index.vue

@@ -10,87 +10,87 @@
         </div>
         <p class="logo-header-title">Hello</p>
         <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
-      </div>
-      <van-form validate-first class="login-form">
-        <div class="loginBox">
-          <img src="@/assets/img/loginBox.png" alt="" />
-        </div>
-        <ul class="clear oUl" style="width: 83vw">
-          <!-- <li class="label">
+        <van-form validate-first class="login-form">
+          <div class="loginBox">
+            <!-- <img src="@/assets/img/loginBox.png" alt="" /> -->
+
+            <ul class="clear oUl" style="width: 83vw">
+              <!-- <li class="label">
             卡号:
            
           </li> -->
-          <li class="van-field-input">
-            <van-row style="width: 83vw">
-              <van-col span="3" style="width: 14px">
-                <div class="cardNo">
-                  <img src="@/assets/img/cardNo.png" alt="" />
-                </div>
-              </van-col>
-              <van-col span="5" style="width: 42px">
-                <div class="myCard">CJ1745</div>
-              </van-col>
-              <van-col span="16" style="width: calc(100% - 86px)">
-                <van-field
-                  style="margin: 0 0 0 30px; background: transParent"
-                  size="large"
-                  v-model="form.mobile"
-                  name="mobile"
-                  placeholder="XXXXXX"
-                  type="text"
-                  maxlength="6"
-                  :rules="[{ validator: asyncmobileValidator }]"
-                >
-                </van-field>
-              </van-col>
-            </van-row>
-          </li>
-        </ul>
-        <ul class="clear" style="width: 83vw; border-radius: 10px">
-          <!-- <li class="label">
+              <li class="van-field-input">
+                <van-row style="width: 83vw">
+                  <van-col span="3" style="width: 14px">
+                    <div class="cardNo">
+                      <img src="@/assets/img/cardNo.png" alt="" />
+                    </div>
+                  </van-col>
+                  <van-col span="5" style="width: 42px">
+                    <div class="myCard">CJ1745</div>
+                  </van-col>
+                  <van-col span="16" style="width: calc(100% - 86px)">
+                    <van-field
+                      style="margin: 0 0 0 30px; background: transParent"
+                      size="large"
+                      v-model="form.mobile"
+                      name="mobile"
+                      placeholder="XXXXXX"
+                      type="text"
+                      maxlength="6"
+                      :rules="[{ validator: asyncmobileValidator }]"
+                    >
+                    </van-field>
+                  </van-col>
+                </van-row>
+              </li>
+            </ul>
+            <ul class="clear" style="width: 83vw; border-radius: 10px">
+              <!-- <li class="label">
             密码:
             <img src="@/assets/img/password.png" alt="" />
           </li> -->
-          <van-row style="width: 84vw">
-            <van-col span="3" style="width: 14px">
-              <div class="cardPwd">
-                <img src="@/assets/img/password.png" alt="" />
-              </div>
-            </van-col>
-            <van-col :span="21" style="width: calc(100% - 50px)">
-              <li class="van-field-input">
-                <van-field
-                  style="background: transparent; margin: 0 0 0 28px"
-                  size="large"
-                  v-model="form.code"
-                  name="code"
-                  maxlength="6"
-                  placeholder="请输入密码"
-                  :rules="[{ validator: asyncpwodValidator }]"
-                  :type="!passwordStatus ? 'password' : 'text'"
-                  @click-right-icon="showPassword"
-                >
-                  <!--  :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
-                </van-field>
-              </li>
-            </van-col></van-row
-          >
-        </ul>
-
-        <van-button
-          style="font-size: 16px; font-weight: 400"
-          class="login-form-button"
-          block
-          type="info"
-          :disabled="loadding"
-          :loadding="loadding"
-          loadding-text="加载中..."
-          native-type="submit"
-          @click="onSubmit()"
-        >
-          登&nbsp;录
-        </van-button>
-      </van-form>
+              <van-row style="width: 84vw">
+                <van-col span="3" style="width: 14px">
+                  <div class="cardPwd">
+                    <img src="@/assets/img/password.png" alt="" />
+                  </div>
+                </van-col>
+                <van-col :span="21" style="width: calc(100% - 50px)">
+                  <li class="van-field-input">
+                    <van-field
+                      style="background: transparent; margin: 0 0 0 28px"
+                      size="large"
+                      v-model="form.code"
+                      name="code"
+                      maxlength="6"
+                      placeholder="请输入密码"
+                      :rules="[{ validator: asyncpwodValidator }]"
+                      :type="!passwordStatus ? 'password' : 'text'"
+                      @click-right-icon="showPassword"
+                    >
+                      <!--  :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
+                    </van-field>
+                  </li>
+                </van-col></van-row
+              >
+            </ul>
+          </div>
+        </van-form>
+      </div>
+      <van-button
+        style="font-size: 16px; font-weight: 400"
+        class="login-form-button"
+        block
+        type="info"
+        :disabled="loadding"
+        :loadding="loadding"
+        loadding-text="加载中..."
+        native-type="submit"
+        @click="onSubmit()"
+      >
+        登&nbsp;录
+      </van-button>
       <div class="footerP">
         <div class="footer">
           <img src="@/assets/img/footer.png" alt="" />
@@ -252,16 +252,15 @@ export default {
     left: 0;
     width: 100%; //继承最外层login的宽高
     height: 100%;
-    // background-color: #fff;
     background-color: #e6e6dc;
     .logo-header {
       //上半部分登陆盒子，用来展示一张图片
-      // padding: 50% 0 10% 0;
       width: 100%;
       height: 355px;
       .login-img {
         width: 100%;
         position: absolute;
+
         left: 0;
         top: 0;
         img {
@@ -318,11 +317,16 @@ export default {
     }
     .loginBox {
       width: 84vw;
-      background: rgba(0, 0, 0, 0);
+      height: 50vw;
+      margin: 0 auto 0;
+      background: url("../../assets/img/loginBox.png") no-repeat;
+      background-size: 100% 100%;
       // border: 1px solid red;
       border-radius: 10px;
       position: absolute;
-      margin: 0 30.5px 0 28.5px;
+      left: 8vw;
+      top: 8vw;
+      // margin: 0 30.5px 0 28.5px;
 
       top: -59px;
       // z-index: 99999;
@@ -341,16 +345,16 @@ export default {
       // border-top-right-radius: 20px;
       position: relative;
       // top: -145px;
-      top: -135.5px; //新版
+      top: 232.5px; //新版
       left: 0;
       // border: 1px solid green;
       ul {
         position: relative;
-        left: 0;
-        top: 0;
+        left: 0vw;
+        top: 9vw;
         // border-radius: 20px;
         overflow: hidden;
-        margin: 0 0 11.5px 30px;
+        // margin: 0 0 11.5px 30px;
         // border-bottom: 1px solid #f0f0f0;
         z-index: 9999;
         li {
@@ -373,6 +377,9 @@ export default {
           }
         }
       }
+      ul:last-child {
+        top: 14vw;
+      }
       .van-cell--large {
         padding: 0;
         input {
@@ -393,7 +400,10 @@ export default {
     .login-form-button.van-button,
     .login-form-button.van-button--disabled {
       border: 0;
-      margin: 98px auto 10px auto;
+      // margin: 98px auto 10px auto;
+      position: absolute;
+      left: 5vw;
+      bottom: 30vh;
       color: #333;
       // background: #f4d022;
       background: linear-gradient(0deg, #f2c482, #a07947);
@@ -424,8 +434,10 @@ export default {
     width: 14px;
     height: 11px;
     vertical-align: 10px;
-    padding: 15.5px 0 0 21px;
-    position: relative;
+    // padding: 15.5px 0 0 21px;
+    top: 4vw;
+    left: 4vw;
+    position: absolute;
     img {
       width: 14px;
       height: 11px;
@@ -434,9 +446,9 @@ export default {
   .cardPwd {
     width: 14px;
     height: 11px;
-    vertical-align: 10px;
-    padding: 15.5px 0 0 21px;
-    position: relative;
+    top: 4vw;
+    left: 4vw;
+    position: absolute;
     img {
       width: 12px;
       height: 14px;
@@ -452,30 +464,32 @@ export default {
   }
   .footer {
     width: 325.5px;
+    transform: scale(1.2);
     img {
       width: 100%;
       // border-radius: 10px;
     }
   }
   @media screen and (min-width: 320px) {
-    .login-main .login-form.van-form ul {
-      top: -25px;
-    }
     .footer {
       width: 270.5px;
+      transform: scale(1);
     }
     .footerP {
       bottom: 20px;
     }
   }
+
   @media screen and (min-width: 414px) {
-    .login-main .login-form.van-form ul {
-      top: -10px;
+    .footer {
+      transform: scale(1);
     }
   }
-  @media screen and (min-height: 812px) {
-    .login-main .login-form.van-form ul {
-      top: -18px;
+  @media screen and (min-height: 810px) {
+    .cardNo,
+    .cardPwd {
+      top: 16px;
+      left: 19px;
     }
   }
 }

src/views/my/index.vue

@@ -221,6 +221,7 @@ export default {
     position: relative;
     box-sizing: border-box;
     width: 100%;
+    height: 100vh;
     background: #e6e6dc;
 
     .mine-resume-main {
@@ -435,7 +436,6 @@ export default {
     /**vip服务区域样式 */
     .cell-vip {
       // width: 331px;
-      width: 90vw;
       height: 81px;
       background: #fcfcf0;
       border-radius: 16px;
@@ -493,7 +493,7 @@ export default {
   }
 
   .bottom {
-    width: 100%;
+    width: 100vw;
     box-sizing: border-box;
     background: #e6e6dc;
     margin: 0 0 0 0;
@@ -502,7 +502,7 @@ export default {
     }
     /**地址栏收获样式 */
     .cell-list {
-      width: 90vw;
+      padding: 0 20px;
       height: 81px;
       background: #fcfcf0;
       border-radius: 16px;
@@ -511,8 +511,7 @@ export default {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
-      // margin: 0 auto;
-      margin: 0 0 0 16px;
+      margin: 0 20px;
       .van-cell__title {
         width: 200px;
         position: relative;

src/views/paddy/index.vue

@@ -58,20 +58,22 @@
     </div>
     <div class="detail">
       <p>产品展示</p>
+      <div class="baozhuangBox">
+        <li @click="goto('/referMenu', '五常大米-实惠装')">
+          <div class="riceBag">
+            <p class="riceBag-title">实惠装</p>
+          </div>
 
-      <li @click="goto('/referMenu', '五常大米-实惠装')">
-        <div class="riceBag">
-          <p class="riceBag-title">实惠装</p>
-        </div>
+          <img src="@/assets/images/home/detail/bag.png" alt="" />
+        </li>
+        <li @click="goto('/referMenu', '五常大米-礼盒装')">
+          <div class="riceBox">
+            <p class="riceBox-title">礼盒装</p>
+          </div>
+          <img src="@/assets/images/home/detail/box.png" alt="" />
+        </li>
+      </div>
 
-        <img src="@/assets/images/home/detail/bag.png" alt="" />
-      </li>
-      <li @click="goto('/referMenu', '五常大米-礼盒装')">
-        <div class="riceBox">
-          <p class="riceBox-title">礼盒装</p>
-        </div>
-        <img src="@/assets/images/home/detail/box.png" alt="" />
-      </li>
       <!-- <img src="@/assets/images/home/paddy-title.png" alt="" /> -->
       <!-- <img src="@/assets/images/home/paddy-detail.png" alt="" /> -->
     </div>
@@ -82,7 +84,7 @@
         <van-col
           span="12"
           style="padding: 2px 0px 0px 0"
-          @click="goto('/referMenu', '实时监控')"
+          @click="goto('/live', '实时监控')"
         >
           <div class="card">
             <img
@@ -93,7 +95,7 @@
             <p class="first">实时监控</p>
             <p class="second">全程溯源信赖保证</p>
             <div class="lastP">
-              <span>查看更多</span>
+              <p>查看更多</p>
             </div>
           </div>
           <div class="camera">
@@ -132,7 +134,7 @@
             </div>
           </van-col>
         </van-col>
-        <van-col span="12" style="padding: 8px 0px 0px 0">
+        <van-col span="12">
           <div class="cardFour" @click="goto('/referMenu', '自然耕种')">
             <img
               src="@/assets/images/home/middle/cardTwo.png"
@@ -146,7 +148,7 @@
             </div>
           </div>
         </van-col>
-        <van-col span="12" style="padding: 8px 0 0px 0px">
+        <van-col span="12">
           <div class="cardFive" @click="goto('/referMenu', '生态有机')">
             <img
               src="@/assets/images/home/middle/cardTwo.png"
@@ -235,7 +237,6 @@ export default {
   }
   .top {
     width: 90vw;
-    height: 26.5vh;
     margin: 34.5px auto 0 auto;
     img {
       width: 90vw;
@@ -261,7 +262,7 @@ export default {
     // top: 23vh;
     // left: 48vw;\
     padding: 0 0 0 0;
-    margin: -2vh 0 0 48vw;
+    margin: -2vh 0 0 44vw;
   }
   .custom-indicator {
     right: 155px;
@@ -282,16 +283,17 @@ export default {
   }
   .centerBtn {
     z-index: 99;
-    width: 300px;
+    width: 90vw;
     height: 65px;
     position: relative;
+    display: flex;
+    justify-content: center;
     // top: 209px;
-    margin: 2vh auto 0 auto;
+    margin: 0 auto 0 auto;
     li {
-      width: 60px;
       height: 100%;
-      margin: 0 20px;
-      float: left;
+      margin: 0 auto;
+
       list-style: none;
       text-align: center;
       img {
@@ -322,10 +324,17 @@ export default {
     }
   }
   .detail {
-    width: 90vw;
-    height: 150px;
-    margin: 3vh auto 0;
+    width: 84vw;
+    height: 20vh;
+    // margin: 3vh auto 0;
     position: relative;
+    top: 5vw;
+    // left: 8vw;
+    margin: 0 auto;
+    .baozhuangBox {
+      display: flex;
+      justify-content: center;
+    }
     // display: flex;
     // justify-content: center;
     p {
@@ -341,9 +350,9 @@ export default {
     li {
       float: left;
       list-style: none;
-      width: 42vw;
+      width: 40vw;
       height: 105px;
-      margin: 0 0 0 9px;
+      margin: 0 auto;
       img {
         width: 100%;
       }
@@ -354,18 +363,21 @@ export default {
         border-radius: 10px 0;
         text-align: center;
         position: absolute;
-        left: 8px;
-        top: 25px;
 
+        display: flex;
+        justify-content: center;
+        align-items: center;
         .riceBag-title {
+          margin: 0;
           // width: 26.5px;
+          transform: scale(0.8);
           width: 36.5px;
-          height: 8.5px;
+          height: 17.5px;
           font-size: 0.5rem;
           font-family: Source Han Sans CN;
           font-weight: 150;
           color: #f1cda9;
-          line-height: 13px;
+          line-height: 16.5px;
         }
       }
       .riceBox {
@@ -375,25 +387,26 @@ export default {
         border-radius: 10px 0;
         text-align: center;
         position: absolute;
-        right: 120px;
-        top: 25px;
 
+        display: flex;
+        justify-content: center;
+        align-items: center;
         .riceBox-title {
+          margin: 0;
           // width: 26.5px;
+          transform: scale(0.8);
           width: 36.5px;
-          height: 8.5px;
+          height: 17.5px;
           font-size: 0.75rem;
-
           font-family: Source Han Sans CN;
           font-weight: 150;
           color: #f1cda9;
-          line-height: 13px;
         }
       }
     }
   }
   .middle {
-    width: 90vw;
+    width: 86vw;
     margin: 3vh auto 15px;
     position: relative;
     p {
@@ -449,10 +462,16 @@ export default {
         position: absolute;
         top: 15vh;
         left: 4vw;
-        span {
-          width: 28px;
-          height: 6.5px;
-          font-size: 0.6rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        p {
+          margin: 0;
+          transform: scale(0.8);
+          width: 48px;
+          height: 12px;
+          line-height: 12px;
+          font-size: 0.5rem;
           font-family: Source Han Sans CN;
           font-weight: 300;
           color: #c5a06b;
@@ -473,7 +492,8 @@ export default {
     .cardTwo {
       width: 40vw;
       display: flex;
-      justify-content: center;
+      margin: 0 auto;
+      // justify-content: center;
       // align-items: center;
       .first {
         position: absolute;
@@ -514,12 +534,15 @@ export default {
 
     .cardThree {
       width: 40vw;
-      display: flex;
-      justify-content: center;
+      // display: flex;
+      margin: 0 auto;
+
+      // justify-content: center;
+      position: relative;
       .first {
         position: absolute;
-        left: 50vw;
-        top: 14vh;
+        left: 3vw;
+        top: 3vh;
         width: 60px;
         height: 14.5px;
         font-size: 15px;
@@ -530,8 +553,8 @@ export default {
       }
       .second {
         position: absolute;
-        left: 50vw;
-        top: 16vh;
+        left: 3vw;
+        top: 5vh;
 
         width: 48px;
         height: 24px;
@@ -545,12 +568,14 @@ export default {
     .freshRice {
       width: 14vw;
       position: absolute;
-      top: 13vh;
-      left: 71vw;
+      top: 1vh;
+      left: 24vw;
     }
     .cardFour {
       width: 45vw;
+      position: relative;
       // position: absolute;
+
       display: flex;
       justify-content: center;
       align-items: center;
@@ -591,13 +616,14 @@ export default {
     .cardFive {
       width: 40vw;
       display: flex;
+      margin: 0 auto;
+
+      position: relative;
       justify-content: center;
-      // align-items: center;
       .first {
         position: absolute;
-        left: 45vw;
-        top: 40vh;
-        margin: -9vh 0 0 5vw;
+        left: 2vw;
+        top: 16px;
         width: 60px;
         height: 14.5px;
         font-size: 15px;
@@ -631,113 +657,106 @@ export default {
     }
   }
 
-  @media screen and (max-width: 320px) {
-    .productPack .box {
-      p {
-        margin: 7.5px 0 7px 4px;
-      }
-      span {
-        margin: 12.5px 0 0px 8px;
-      }
-    }
+  @media screen and (max-width: 414px) {
     .middle .card {
       .first {
-        font-size: 0.9rem;
-        left: 3vw;
-        top: 9vh;
+        // margin-top: 27px;
+        font-size: 18px;
+        left: 4vw;
+        top: 7vh;
       }
       .second {
-        top: 12vh;
-        left: 3vw;
-        font-size: 0.7rem;
+        font-size: 11px;
       }
       .lastP {
-        top: 18vh;
-        left: 4vw;
-        span {
-          font-size: 0.6rem;
-        }
+        left: 18px;
       }
     }
 
-    .middle .camera {
-      left: 22vw;
-      top: 8vh;
-    }
-
     .middle .cardTwo {
       .first {
-        left: 45vw;
-        top: 16vh;
-        font-size: 14px;
+        left: 44vw;
+        top: 15vh;
       }
       .second {
-        left: 45vw;
-        top: 9vh;
+        left: 44vw;
+        top: 8vh;
+      }
+      .keepAlive {
+        width: 11.5vw;
+        left: 70vw;
+        top: 5vh;
       }
     }
 
-    .middle .keepAlive {
-      width: 11.5vw;
-      left: 70vw;
-      top: 6vh;
+    //
+    .middle .freshRice {
+      top: 1vh;
+      left: 24vw;
+    }
+    .middle .cardThree {
+      .first {
+        left: 3vw;
+        top: 3vh;
+      }
+      .second {
+        left: 3vw;
+        top: 5vh;
+      }
     }
     .middle .cardFour {
       .first {
-        font-size: 0.9rem;
-
         left: 4vw;
-        top: 32vh;
+        top: 3vh;
       }
       .second {
-        font-size: 0.5rem;
-        top: 34vh;
         left: 4vw;
+        top: 5vh;
+      }
+      .normalGrow {
+        left: 24vw;
+        top: 2vh;
       }
     }
-
-    //
-    .middle .freshRice {
-      top: 18vh;
-      left: 70vw;
-    }
-    .middle .cardThree .first {
-      left: 48vw;
-      top: 19vh;
-    }
-    .middle .cardThree .second {
-      left: 48vw;
-      top: 21vh;
-    }
-    .middle .cardFive .first {
-      top: 41vh;
-      font-size: 0.9rem;
-    }
-    .middle .cardFive .second {
-      top: 34vh;
+    .middle .cardFive {
+      .first {
+        left: 2vw;
+        top: 19px;
+      }
+      .second {
+        left: -2vw;
+        top: 34px;
+      }
+      .organic {
+        left: 22vw;
+        top: 13px;
+      }
     }
     .detail li .riceBox {
-      right: 94px;
+      right: 128px;
     }
   }
-  @media screen and (min-width: 375px) {
-    .middle .card .first {
-      // margin-top: 27px;
-      font-size: 16px;
-      left: 4vw;
-      top: 9vh;
-    }
-    .middle .card .second {
-      top: 12vh;
-      left: 4vw;
-    }
-    .middle .card .lastP {
-      top: 17vh;
-      left: 5vw;
-      span {
-        font-size: 0.6rem;
+  @media screen and (max-width: 375px) {
+    .middle .card {
+      .first {
+        // margin-top: 27px;
+        font-size: 16px;
+        left: 4vw;
+        top: 9vh;
+      }
+      .second {
+        top: 12vh;
+        left: 4vw;
+      }
+      .lastP {
+        top: 17vh;
+        left: 5vw;
+        span {
+          font-size: 0.6rem;
+        }
       }
     }
+
     .middle .cardTwo {
       .first {
         left: 44vw;
@@ -755,106 +774,253 @@ export default {
     }
     //
     .middle .freshRice {
-      top: 17vh;
-      left: 70vw;
+      top: 1vh;
+      left: 24vw;
     }
     .middle .cardThree {
       .first {
-        left: 48vw;
-        top: 19vh;
+        left: 3vw;
+        top: 3vh;
       }
       .second {
-        left: 48vw;
-        top: 21vh;
+        left: 3vw;
+        top: 5vh;
       }
     }
     .middle .cardFour {
       .first {
         left: 4vw;
-        top: 31vh;
+        top: 3vh;
       }
       .second {
-        top: 33vh;
         left: 4vw;
+        top: 5vh;
       }
       .normalGrow {
-        left: 26vw;
-        top: 30vh;
+        left: 24vw;
+        top: 2vh;
       }
     }
     .middle .cardFive {
       .first {
-        left: 44vw;
-        top: 40vh;
+        left: 2vw;
+        top: 19px;
       }
       .second {
-        left: 44vw;
-        top: 33vh;
+        left: -2vw;
+        top: 34px;
+      }
+      .organic {
+        left: 22vw;
+        top: 13px;
       }
     }
+    .detail li .riceBox {
+      right: 112px;
+    }
   }
-  @media screen and (min-width: 414px) {
-    .middle .card .second {
-      font-size: 11px;
+  @media screen and (max-width: 360px) {
+    .detail li .riceBox {
+      right: 105px;
     }
-    .middle .card .first {
-      // margin-top: 27px;
-      font-size: 18px;
-      left: 4vw;
-      top: 9vh;
+    .middle .card {
+      .first {
+        // margin-top: 27px;
+        font-size: 15px;
+        left: 14px;
+        top: 47px;
+      }
+      .second {
+        left: 14px;
+        top: 62px;
+      }
+      .lastP {
+        top: 17vh;
+        left: 5vw;
+        span {
+          font-size: 0.6rem;
+        }
+      }
     }
     .middle .cardTwo {
       .first {
-        left: 44vw;
-        top: 15vh;
+        left: 157px;
+        top: 99px;
       }
       .second {
-        left: 44vw;
-        top: 8vh;
+        left: 157px;
+        top: 55px;
+      }
+      .keepAlive {
+        width: 13vw;
+        left: 243px;
+        top: 32px;
+      }
+    }
+    .middle .cardThree {
+      .first {
+        left: 3vw;
+        top: 3vh;
+      }
+      .second {
+        left: 3vw;
+        top: 5vh;
+      }
+    }
+    .middle .freshRice {
+      top: 1vh;
+      left: 23vw;
+    }
+    .middle .cardFour {
+      .first {
+        left: 4vw;
+        top: 3vh;
+      }
+      .second {
+        left: 4vw;
+        top: 5vh;
+      }
+      .normalGrow {
+        left: 24vw;
+        top: 2vh;
+      }
+    }
+    .middle .cardFive {
+      .first {
+        left: 2vw;
+        top: 16px;
+      }
+      .second {
+        left: -2vw;
+        top: 30px;
+      }
+      .organic {
+        left: 22vw;
+        top: 13px;
+      }
+    }
+  }
+  @media screen and (max-width: 320px) {
+    .productPack .box {
+      p {
+        margin: 7.5px 0 7px 4px;
+      }
+      span {
+        margin: 12.5px 0 0px 8px;
+      }
+    }
+    .middle .card {
+      .first {
+        font-size: 0.9rem;
+        left: 12px;
+        top: 9vh;
+      }
+      .second {
+        top: 64px;
+        left: 7px;
+        font-size: 0.7rem;
+        transform: scale(0.8);
+      }
+      .lastP {
+        top: 18vh;
+        left: 4vw;
+        span {
+          font-size: 0.6rem;
+        }
+      }
+    }
+
+    .middle .camera {
+      left: 22vw;
+      top: 8vh;
+    }
+
+    .middle .cardTwo {
+      .first {
+        left: 138px;
+        top: 90px;
+        font-size: 14px;
+      }
+      .second {
+        transform: scale(0.8);
+
+        left: 134px;
+        top: 51px;
+        font-size: 0.7rem;
+      }
+      .keepAlive {
+        width: 13vw;
+        left: 223px;
+        top: 32px;
       }
     }
 
     .middle .keepAlive {
       width: 11.5vw;
       left: 70vw;
-      top: 5vh;
+      top: 6vh;
+    }
+    .middle .cardFour {
+      .first {
+        left: 4vw;
+        top: 3vh;
+      }
+      .second {
+        transform: scale(0.8);
+        left: 3vw;
+        top: 5vh;
+      }
+      .normalGrow {
+        left: 26vw;
+        top: 2vh;
+      }
     }
 
     //
     .middle .freshRice {
-      top: 16vh;
-      left: 70vw;
+      top: 1vh;
+      left: 24vw;
     }
     .middle .cardThree {
       .first {
-        left: 50vw;
-        top: 18vh;
-      }
-      .second {
-        left: 50vw;
-        top: 20vh;
+        font-size: 14px;
+        left: 3vw;
+        top: 3vh;
       }
-    }
-    .middle .cardThree {
-      .first,
       .second {
-        left: 48vw;
+        left: 2vw;
+        top: 5vh;
+        transform: scale(0.8);
       }
     }
+
     .middle .cardFive {
-      .first,
+      .first {
+        left: 2vw;
+        top: 17px;
+      }
       .second {
-        left: 44vw;
+        transform: scale(0.8);
+
+        left: -3vw;
+        top: 30px;
+      }
+      .organic {
+        left: 25vw;
+        top: 13px;
       }
     }
+
     .detail li .riceBox {
-      right: 137px;
+      right: 28vw;
     }
   }
+
   @media screen and (min-height: 812px) {
     .middle .card .first {
       // margin-top: 27px;
       font-size: 16px;
+
       left: 4vw;
       top: 7vh;
     }
@@ -888,39 +1054,44 @@ export default {
     }
     //
     .middle .freshRice {
-      top: 14vh;
-      left: 70vw;
+      top: 2vh;
+      left: 25vw;
     }
     .middle .cardThree .first {
-      left: 47vw;
-      top: 15vh;
+      left: 3vw;
+      top: 2vh;
     }
     .middle .cardThree .second {
-      left: 47vw;
-      top: 17vh;
-    }
-    .middle .cardFour .first {
-      left: 4vw;
-      top: 26vh;
-    }
-    .middle .cardFour .second {
-      top: 28vh;
-      left: 4vw;
+      left: 3vw;
+      top: 4vh;
     }
-    .middle .cardFour .normalGrow {
-      left: 26vw;
-      top: 25vh;
+    .middle .cardFour {
+      .first {
+        left: 4vw;
+        top: 3vh;
+      }
+      .second {
+        left: 4vw;
+        top: 5vh;
+      }
+      .normalGrow {
+        left: 24vw;
+        top: 2vh;
+      }
     }
 
     .middle .cardFive {
       .first {
-        top: 35vh;
+        left: 2vw;
+        top: 19px;
       }
       .second {
-        top: 28vh;
+        left: -2vw;
+        top: 34px;
       }
       .organic {
-        top: 25vh;
+        left: 24vw;
+        top: 21px;
       }
     }
   }

src/views/product/index.vue

@@ -13,45 +13,44 @@
     <div v-loading="loading" class="clear">
       <div class="product-baozhuang">
         <div class="productPack">
-          <li @click="handleClick(0)" style="float: left">
-            <!-- <img :src="currIndex == '0' ? selectActive : select" alt="" /> -->
-            <img
-              src="@/assets/images/product/select.png"
-              alt=""
-              v-if="currIndex != '0'"
-            />
-            <img
-              src="@/assets/images/product/select-active.png"
-              alt=""
-              v-if="currIndex == '0'"
-            />
-            <div class="box">
-              <img src="@/assets/images/product/box.png" alt="" />
-              <p>藏金·1745-实惠装</p>
-              <span>可用库存:{{ canStockBag }}</span>
-            </div>
-          </li>
-          <li @click="handleClick(1)" style="float: right">
-            <img
-              src="@/assets/images/product/select.png"
-              alt=""
-              v-if="currIndex != '1'"
-            />
-            <img
-              src="@/assets/images/product/select-active.png"
-              alt=""
-              v-if="currIndex == '1'"
-            />
-            <div class="bag">
+          <div class="packageBox">
+            <li @click="handleClick(0)">
+              <!-- <img :src="currIndex == '0' ? selectActive : select" alt="" /> -->
               <img
-                src="@/assets/images/product/bag.png"
+                src="@/assets/images/product/select.png"
                 alt=""
-                style="padding: 0 7px"
+                v-if="currIndex != '0'"
               />
-              <p>藏金·1745-礼盒装</p>
-              <span>可用库存:{{ canStockBox }}</span>
-            </div>
-          </li>
+              <img
+                src="@/assets/images/product/select-active.png"
+                alt=""
+                v-if="currIndex == '0'"
+              />
+              <div class="box">
+                <img src="@/assets/images/product/box.png" alt="" />
+                <p>藏金·1745-实惠装</p>
+                <span>可用库存:{{ canStockBag }}</span>
+              </div>
+            </li>
+            <li @click="handleClick(1)" style="float: right">
+              <img
+                src="@/assets/images/product/select.png"
+                alt=""
+                v-if="currIndex != '1'"
+              />
+              <img
+                src="@/assets/images/product/select-active.png"
+                alt=""
+                v-if="currIndex == '1'"
+              />
+              <div class="bag">
+                <img src="@/assets/images/product/bag.png" alt="" />
+                <p>藏金·1745-礼盒装</p>
+                <span>可用库存:{{ canStockBox }}</span>
+              </div>
+            </li>
+          </div>
+
           <div v-if="ad && ad.id" @click="getaddress" class="item-ad clear">
             <p class="item-ad__name">
               <span>{{ ad.name }}</span
@@ -119,7 +118,7 @@ export default {
   mixins: [resToken],
   data() {
     return {
-      select: "@/assets/images/product/select.png",
+      select: "/static/img/select.bed55bd9.png",
       selectActive: "@/assets/images/product/select-active.png",
       currIndex: null,
       num: 0,
@@ -174,8 +173,8 @@ export default {
           if (!(limit && limit.length > 0)) {
             limit = [];
           }
-          this.canStockBag = res.data.limit[0].weight;
-          this.canStockBox = res.data.limit[1].weight;
+          this.canStockBag = res.data.stock;
+          this.canStockBox = res.data.stock;
 
           this.distributeGoods(limit);
           // await this.getUnitist(limit);
@@ -231,7 +230,10 @@ export default {
       }
     },
     backNum(e) {
+      console.log(e, "eeee");
+
       this.num = e;
+      console.log(this.num);
     },
     async placeOrder() {
       if (!this.loading) {
@@ -348,39 +350,41 @@ export default {
   }
   .product-baozhuang {
     width: 100vw;
-    margin: -10vh 0 0 0;
+    // margin: -10vh 0 0 0;
   }
   .productPack {
     width: calc(100vw - 30px);
-    height: calc(100vh - 335.5px);
+    height: 50vh;
     z-index: 99999;
     margin: 0 auto;
     position: relative;
-
     top: -1vh;
+
     li {
       float: left;
       list-style: none;
       width: 43vw;
+
       img {
         // width: 100%;
         width: 43vw;
       }
-      .box,
+      .box {
+        width: 40vw;
+      }
       .bag {
-        width: 43vw;
-        height: 110px;
+        width: 40vw;
       }
     }
-    li:first-child {
-      margin: 0 5px 0 5px;
+    li:last-child {
+      margin-left: 10px;
     }
 
     .box {
       position: absolute;
-      left: 11px;
-      top: 0;
-      padding-top: 5px;
+      top: 2vw;
+      left: 1.5vw;
+
       img {
         width: 39vw;
       }
@@ -407,9 +411,8 @@ export default {
     }
     .bag {
       position: absolute;
-      top: 0;
-      right: 0;
-      padding-top: 5px;
+      top: 2vw;
+      right: 1vw;
       img {
         width: 39vw;
       }
@@ -555,10 +558,12 @@ export default {
   .kongParents {
     width: calc(100vw - 30px);
     position: absolute;
-    top: 199.5px;
-    box-sizing: border-box;
+    left: 0;
+    bottom: 0;
+    // top: 199.5px;
     display: flex;
     justify-content: center;
+    align-items: center;
   }
   .kong {
     top: 199.5px;
@@ -623,9 +628,9 @@ export default {
     .kongParents {
       top: 174px;
     }
-    .product-baozhuang {
-      margin: -15vh 0 0 0;
-    }
+    // .product-baozhuang {
+    //   margin: -15vh 0 0 0;
+    // }
     .productPack {
       .box {
         p {
@@ -642,7 +647,12 @@ export default {
       }
     }
   }
-  @media screen and (max-width: 375px) {
+  @media screen and (max-width: 375px) and (max-width: 414px) {
+    .product-baozhuang {
+      margin: -80px 0 0 0;
+    }
+  }
+  @media screen and (min-width: 414px) {
     .product-baozhuang {
       margin: -80px 0 0 0;
     }