dingdan

src/views/login/index.vue

@@ -12,69 +12,70 @@
         <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
         <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">
+            <!-- <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-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
@@ -251,11 +252,9 @@ 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 {
@@ -318,8 +317,10 @@ export default {
     }
     .loginBox {
       width: 84vw;
+      height: 50vw;
       margin: 0 auto 0;
-      background: rgba(0, 0, 0, 0);
+      background: url("/static/img/loginBox.59a8c576.png") no-repeat;
+      background-size: 100% 100%;
       // border: 1px solid red;
       border-radius: 10px;
       position: absolute;
@@ -349,8 +350,8 @@ export default {
       // border: 1px solid green;
       ul {
         position: relative;
-        left: 9vw;
-        top: 0;
+        left: 0vw;
+        top: 9vw;
         // border-radius: 20px;
         overflow: hidden;
         // margin: 0 0 11.5px 30px;
@@ -376,6 +377,9 @@ export default {
           }
         }
       }
+      ul:last-child {
+        top: 14vw;
+      }
       .van-cell--large {
         padding: 0;
         input {
@@ -430,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;
@@ -440,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;
@@ -465,9 +471,6 @@ export default {
     }
   }
   @media screen and (min-width: 320px) {
-    .login-main .login-form.van-form ul {
-      top: -25px;
-    }
     .footer {
       width: 270.5px;
       transform: scale(1);
@@ -476,39 +479,17 @@ export default {
       bottom: 20px;
     }
   }
-  @media screen and (min-width: 320px) {
-    .footer {
-      width: 270.5px;
-      transform: scale(1.2);
-    }
-  }
+
   @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: -1vh;
-    }
-  }
-
-  @media screen and (max-width: 375px) {
-    .login-main .login-form.van-form ul {
-      top: -3vh;
-    }
-  }
-  @media screen and (max-width: 360px) {
-    .login-main .login-form.van-form ul {
-      top: -3vh;
-    }
-  }
-  @media screen and (max-width: 320px) {
-    .login-main .login-form.van-form ul {
-      top: -4vh;
+  @media screen and (min-height: 810px) {
+    .cardNo,
+    .cardPwd {
+      top: 16px;
+      left: 19px;
     }
   }
 }

src/views/my/index.vue

@@ -436,7 +436,6 @@ export default {
     /**vip服务区域样式 */
     .cell-vip {
       // width: 331px;
-      width: 90vw;
       height: 81px;
       background: #fcfcf0;
       border-radius: 16px;
@@ -494,7 +493,7 @@ export default {
   }
 
   .bottom {
-    width: 100%;
+    width: 100vw;
     box-sizing: border-box;
     background: #e6e6dc;
     margin: 0 0 0 0;
@@ -503,7 +502,7 @@ export default {
     }
     /**地址栏收获样式 */
     .cell-list {
-      width: 90vw;
+      padding: 0 20px;
       height: 81px;
       background: #fcfcf0;
       border-radius: 16px;
@@ -512,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/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,
@@ -353,35 +352,37 @@ export default {
   }
   .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;
       }
@@ -408,9 +409,8 @@ export default {
     }
     .bag {
       position: absolute;
-      top: 0;
-      right: 0;
-      padding-top: 5px;
+      top: 2vw;
+      right: 1vw;
       img {
         width: 39vw;
       }
@@ -556,10 +556,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;
@@ -648,5 +650,11 @@ export default {
       margin: -80px 0 0 0;
     }
   }
+  @media screen and (max-wdith: 768px) {
+    .productPack {
+      width: calc(100vw - 44px);
+      top: 2vh;
+    }
+  }
 }
 </style>