样式修改

src/components/orderBtn.vue

@@ -33,18 +33,30 @@
             </div>
             <div class="popup" v-for="(item, index) in allreadyGoodsList" :key="index">
                 <div class="merchantroCon">
-                    <img :src="item.image" alt="" />
+                    <img class="imgLeft" :src="item.image" alt="" />
                     <div>
                         <div class="text1">{{ item.name }}</div>
                         <div class="bottom" @click.stop>
                             <div class="price">¥{{ item.price }}.00</div>
-                            <van-stepper
-                                :min="min"
-                                :value="item.currentNum"
-                                disable-input
-                                @minus="minus(item)"
-                                @plus="add(item)"
-                            />
+                            <div class="addcon">
+                                <img
+                                    class="add"
+                                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
+                                    alt=""
+                                    @click="minus(item)"
+                                />
+                                <div class="text">
+                                    {{ item.currentNum }}
+                                </div>
+                                <div>
+                                    <img
+                                        class="add"
+                                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-41-46reAOWvaa.png"
+                                        alt=""
+                                        @click="add(item)"
+                                    />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -168,7 +180,7 @@ export default {
     .merchantroCon {
         .flex();
         margin-top: 20px;
-        img {
+        .imgLeft {
             width: 80px;
             height: 80px;
             border-radius: 8px;
@@ -193,8 +205,20 @@ export default {
             .price {
                 .price();
             }
-            .add {
-                .add();
+            .addcon {
+                display: flex;
+                .text {
+                    width: 24px;
+                    height: 24px;
+                    text-align: center;
+                    line-height: 24px;
+                    background: #f5f7fa;
+                    margin: 0 4px;
+                }
+                .add {
+                    width: 24px;
+                    height: 24px;
+                }
             }
         }
     }

src/pages/Home.vue

@@ -37,12 +37,16 @@
                 <div class="search">
                     <van-field
                         :value="searchVal"
-                        left-icon="search"
                         placeholder="搜索"
                         @click="navigateTo('/pages/shopsearch')"
                         type="text"
                         clearable
                     />
+                    <img
+                        class="sousuo"
+                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-09-53-26QAqibCrM.png"
+                        alt=""
+                    />
                 </div>
                 <swiper class="swiper" :autoplay="true" :indicator-dots="true">
                     <swiper-item v-for="(item, index) in banners" :key="index">
@@ -51,7 +55,7 @@
                 </swiper>
             </div>
         </div>
-        <van-sticky :offset-top="125">
+        <van-sticky :offset-top="122">
             <div class="tab">
                 <img
                     class="imges"
@@ -146,7 +150,7 @@ export default {
             }
             .mytest {
                 .mytest();
-                height: 122px;
+                height: 244rpx;
                 img {
                     width: 100vw;
                     display: block;
@@ -164,23 +168,29 @@ export default {
                 }
             }
             .search {
-                margin: 15px 0 20px;
+                margin: 30rpx 0 40rpx;
                 /deep/ .van-cell {
                     --cell-vertical-padding: 4px;
                     width: 100%;
-                    height: 32px;
+                    height: 64rpx;
                     background: rgb(99, 184, 252);
                     border-radius: 21px;
                 }
                 ::after {
                     border-bottom: 0;
                 }
-                /deep/ .van-cell__left-icon-wrap {
-                    margin-left: 44%;
-                    color: #fff;
-                }
                 /deep/ .van-field__placeholder {
                     color: #fff;
+                    margin-left: 50%;
+                }
+                .sousuo {
+                    position: absolute;
+                    left: 163px;
+                    top: 17.5%;
+                    // top: 16.7%;
+                    width: 16px;
+                    height: 16px;
+                    // background: red;
                 }
             }
             .swiper {
@@ -206,7 +216,6 @@ export default {
             line-height: 22px;
             z-index: 88;
             margin: 9px 34px 0 0;
-            // margin: 26px 34px 0 0;
             padding-bottom: 10px;
             &.active {
                 font-size: 18px;

src/pages/merchantorders.vue

@@ -68,7 +68,7 @@
                                 v-for="(item, index) in merchantorListsData"
                                 :key="index"
                             >
-                                <img :src="item.image" alt="" />
+                                <img class="imgLeft" :src="item.image" alt="" />
                                 <div>
                                     <div class="text1">{{ item.name }}</div>
                                     <div class="text2">月销{{ item.num }}&nbsp;&nbsp; 赞{{ item.fabulous }}</div>
@@ -76,13 +76,23 @@
                                         <div class="price">¥{{ item.price }}.00</div>
                                         <div class="addcon">
                                             <div v-if="item.currentNum > 0">
-                                                <div class="add" @click="minus(item)">-</div>
+                                                <img
+                                                    class="add"
+                                                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
+                                                    alt=""
+                                                    @click="minus(item)"
+                                                />
                                             </div>
                                             <div class="text" v-show="item.currentNum > 0">
                                                 {{ item.currentNum }}
                                             </div>
                                             <div>
-                                                <div class="add" @click="add(item)">+</div>
+                                                <img
+                                                    class="add"
+                                                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-41-46reAOWvaa.png"
+                                                    alt=""
+                                                    @click="add(item)"
+                                                />
                                             </div>
                                         </div>
                                     </div>
@@ -454,7 +464,7 @@ export default {
         .merchantroCon {
             .flex();
             margin-bottom: 20px;
-            img {
+            .imgLeft {
                 width: 80px;
                 height: 80px;
                 border-radius: 8px;
@@ -489,7 +499,7 @@ export default {
                         margin: 0 4px;
                     }
                     .add {
-                        .add();
+                        .add2();
                     }
                 }
             }

src/pages/shoppingCart.vue

@@ -53,17 +53,30 @@
                             alt=""
                             @click="pushId(item.id)"
                         />
-                        <img :src="item.image" alt="" />
+                        <img class="imgLeft" :src="item.image" alt="" />
                         <div>
                             <div class="text1">{{ item.name }}</div>
                             <div class="text2">规格200g</div>
                             <div class="bottom" @click.stop>
-                                <van-stepper
-                                    min="1"
-                                    @minus="minus(item.price)"
-                                    @plus="add(item.price)"
-                                    @change="onChange"
-                                />
+                                <div class="addcon">
+                                    <img
+                                        class="add"
+                                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
+                                        alt=""
+                                        @click="minus(item)"
+                                    />
+                                    <div class="text6">
+                                        {{ item.currentNum || 1 }}
+                                    </div>
+                                    <div>
+                                        <img
+                                            class="add"
+                                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-41-46reAOWvaa.png"
+                                            alt=""
+                                            @click="add(item)"
+                                        />
+                                    </div>
+                                </div>
                                 <div class="price">¥{{ item.price }}.00</div>
                             </div>
                         </div>
@@ -210,27 +223,6 @@ export default {
     /deep/ .van-button {
         .button();
     }
-    /deep/ .van-stepper__minus {
-        width: 24px;
-        height: 24px;
-        background: @prim;
-        border-radius: 2px;
-        color: #fff;
-    }
-    /deep/ .van-stepper__plus {
-        width: 24px;
-        height: 24px;
-        background: @prim;
-        border-radius: 2px;
-        color: #fff;
-    }
-    /deep/ .van-stepper__input {
-        width: 24px;
-        height: 24px;
-        background: #f5f7fa;
-        border-radius: 2px;
-        margin: 0 2px;
-    }
     .top {
         padding: 108px 12px 0;
         .mytest {
@@ -278,7 +270,7 @@ export default {
             .merchantroCon {
                 .flex();
                 margin-bottom: 10px;
-                img {
+                .imgLeft {
                     width: 80px;
                     height: 80px;
                     border-radius: 8px;
@@ -302,6 +294,21 @@ export default {
                     .price {
                         .price();
                     }
+                    .addcon {
+                        display: flex;
+                        .text6 {
+                            width: 24px;
+                            height: 24px;
+                            text-align: center;
+                            line-height: 24px;
+                            background: #f5f7fa;
+                            margin: 0 4px;
+                        }
+                        .add {
+                            width: 24px;
+                            height: 24px;
+                        }
+                    }
                 }
             }
             .order {

src/pages/storedetails.vue

@@ -29,6 +29,7 @@
             <div class="buttom" v-for="(item, index) in merchantorLists" :key="index">
                 <div class="text">
                     <img
+                        class="imgTop"
                         src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
                         alt=""
                     />
@@ -37,13 +38,27 @@
                     <div class="text2">另外配送费2元</div>
                 </div>
                 <div class="calculationCon">
-                    <van-stepper
-                        :min="0"
-                        disable-input
-                        @minus="minus(item.price)"
-                        @plus="add(item.price)"
-                        @change="onChange"
-                    />
+                    <div class="addcon">
+                        <div v-if="item.currentNum > 0">
+                            <img
+                                class="add"
+                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
+                                alt=""
+                                @click="minus(item)"
+                            />
+                        </div>
+                        <div class="text" v-show="item.currentNum > 0">
+                            {{ item.currentNum }}
+                        </div>
+                        <div>
+                            <img
+                                class="add"
+                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-41-46reAOWvaa.png"
+                                alt=""
+                                @click="add(item)"
+                            />
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -109,7 +124,7 @@
                 </div>
             </div>
         </div>
-        <orderBtn :tal="tal" :count="count" :merchantorLists="merchantorLists"></orderBtn>
+        <orderBtn :tal="tal" :merchantorLists="merchantorLists"></orderBtn>
     </div>
 </template>
 <script>
@@ -121,7 +136,6 @@ export default {
     data() {
         return {
             swiperCurrent: 0,
-            count: 1,
             tal: 0,
             banners: [
                 {
@@ -193,27 +207,6 @@ export default {
     /deep/ .van-button {
         .button();
     }
-    /deep/ .van-stepper__minus {
-        width: 24px;
-        height: 24px;
-        background: @prim;
-        border-radius: 2px;
-        color: #fff;
-    }
-    /deep/ .van-stepper__plus {
-        width: 24px;
-        height: 24px;
-        background: @prim;
-        border-radius: 2px;
-        color: #fff;
-    }
-    /deep/ .van-stepper__input {
-        width: 24px;
-        height: 24px;
-        background: #f5f7fa;
-        border-radius: 2px;
-        margin: 0 2px;
-    }
     .swiper {
         height: 375px;
         img {
@@ -280,7 +273,7 @@ export default {
             justify-content: space-between;
             .text {
                 .flex();
-                img {
+                .imgTop {
                     width: 13px;
                     height: 13px;
                     margin-top: 10px;
@@ -306,13 +299,20 @@ export default {
             .calculationCon {
                 .flex();
                 text-align: center;
-                .calculation {
-                    width: 24px;
-                    height: 24px;
-                    background: @prim;
-                    line-height: 24px;
-                    font-weight: bold;
-                    color: #fff;
+                .addcon {
+                    display: flex;
+                    .text {
+                        width: 24px;
+                        height: 24px;
+                        text-align: center;
+                        line-height: 24px;
+                        background: #f5f7fa;
+                        margin: 0 4px;
+                    }
+                    .add {
+                        width: 24px;
+                        height: 24px;
+                    }
                 }
             }
         }

src/styles/common.less

@@ -99,6 +99,12 @@
      color: #fff;
      border-radius: 2px;
 }
+.add2(){
+     width: 24px;
+     height: 24px;
+     margin-top: 4px;
+     line-height: 24px;
+}
 .mytest(){
     position: absolute;
     top: 0;

src/vant/sticky/index.wxs

@@ -7,7 +7,7 @@ function wrapStyle(data) {
   }
 
   if (data.fixed) {
-    style += 'top: ' + data.offsetTop + 'px;';
+    style += 'top: ' + data.offsetTop*2 + 'rpx;';
   }
 
   if (data.zIndex) {