Bladeren bron

样式修改

xuqiang 4 jaren geleden
bovenliggende
commit
6294386a50
4 gewijzigde bestanden met toevoegingen van 83 en 37 verwijderingen
  1. 52 18
      src/components/orderBtn.vue
  2. 23 3
      src/pages/Home.vue
  3. 2 2
      src/pages/merchantorders.vue
  4. 6 14
      src/pages/storedetails.vue

+ 52 - 18
src/components/orderBtn.vue

@@ -17,7 +17,7 @@
                             src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
                             alt=""
                         />
-                        <p>{{ totalPrice }}</p>
+                        <p>{{ totalPrice || 0 }}</p>
                         <div class="text1">.00</div>
                     </div>
                     <div class="text1">另外配送费2元</div>
@@ -27,10 +27,21 @@
         </div>
         <van-popup :show="show && totalPrice > 0" position="bottom" @close="show = false">
             <div class="popupTop">
-                <div class="text1">已选商品</div>
-                <div class="text2">(包装费&nbsp;&nbsp;</div>
-                <div class="text3">¥5)</div>
+                <div class="text">
+                    <div class="text1">已选商品</div>
+                    <div class="text2">(包装费&nbsp;&nbsp;</div>
+                    <div class="text3">¥5)</div>
+                </div>
+                <div class="title">
+                    <img
+                        class="ImgDele"
+                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-17-20-46JgwTHKrC.png"
+                        alt=""
+                    />
+                    <div class="title2">清空</div>
+                </div>
             </div>
+            <div class="border"></div>
             <div class="popup" v-for="(item, index) in allreadyGoodsList" :key="index">
                 <div class="merchantroCon">
                     <img class="imgLeft" :src="item.image" alt="" />
@@ -117,7 +128,7 @@ export default {
 </script>
 <style lang="less" scoped>
 /deep/ .van-popup {
-    // padding-bottom: 73px;
+    margin-bottom: 60px;
     border-radius: 12px 12px 0 0;
 }
 .box-total {
@@ -160,26 +171,49 @@ export default {
 }
 .popupTop {
     .flex();
+    justify-content: space-between;
     margin: 16px 0 0 16px;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 18px;
-    .text1 {
-        color: #1c1c1c;
-        margin-right: 6px;
-    }
-    .text2 {
-        color: #939599;
+
+    .text {
+        .flex();
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 18px;
+        .text1 {
+            color: #1c1c1c;
+            margin-right: 6px;
+        }
+        .text2 {
+            color: #939599;
+        }
+        .text3 {
+            color: #ff7f1f;
+        }
     }
-    .text3 {
-        color: #ff7f1f;
+    .title {
+        .flex();
+        .ImgDele {
+            width: 18px;
+            height: 18px;
+        }
+        .title2 {
+            font-size: 13px;
+            font-weight: 400;
+            color: #1a1a1a;
+            line-height: 18px;
+            margin: 0 16px 0 6px;
+        }
     }
 }
+.border {
+    border-bottom: 1px solid @bg;
+    margin: 16px;
+}
 .popup {
-    padding: 0 16px 0 16px;
+    padding: 0 16px;
     .merchantroCon {
         .flex();
-        margin-top: 20px;
+        margin-bottom: 18px;
         .imgLeft {
             width: 80px;
             height: 80px;

+ 23 - 3
src/pages/Home.vue

@@ -40,6 +40,7 @@
                     <van-field
                         :value="searchVal"
                         readonly
+                        left-icon="search"
                         placeholder="搜索"
                         @click="navigateTo('/pages/shopsearch')"
                         type="text"
@@ -52,11 +53,12 @@
                             alt=""
                     /></span> -->
                 </div>
-                <swiper class="swiper" :autoplay="true" :indicator-dots="true">
+                <swiper class="swiper" :autoplay="true" @change="swiperChange" :current="current">
                     <swiper-item v-for="(item, index) in banners" :key="index">
                         <img :src="item" alt="" />
                     </swiper-item>
                 </swiper>
+                <div class="index"></div>
             </div>
         </div>
         <van-sticky :offset-top="122">
@@ -116,7 +118,7 @@ export default {
     },
     data() {
         return {
-            scrollTop: 0,
+            swiperCurrent: 0,
             banners: ['https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-40-54wLiqaRNi.png'],
             merchantorLists: [
                 {
@@ -132,6 +134,9 @@ export default {
     methods: {
         tab(item) {
             this.active = item;
+        },
+        swiperChange(e) {
+            this.swiperCurrent = e.detail.current;
         }
     }
 };
@@ -188,7 +193,10 @@ export default {
                 }
                 /deep/ .van-field__placeholder {
                     color: #fff;
-                    margin-left: 156px;
+                }
+                /deep/ .van-icon {
+                    color: #fff;
+                    margin-left: 130px;
                 }
                 .sousuo {
                     // position: absolute;
@@ -209,6 +217,18 @@ export default {
                     height: 100%;
                 }
             }
+            .index {
+                position: absolute;
+                right: 182px;
+                top: 324px;
+                z-index: 66;
+                width: 8px;
+                height: 3px;
+                background: #ffffff;
+                border-radius: 2px;
+                text-align: center;
+                color: #ffffff;
+            }
         }
     }
     .tab {

+ 2 - 2
src/pages/merchantorders.vue

@@ -448,7 +448,6 @@ export default {
                 }
             }
         }
-
         border-bottom: 1px solid @bg;
         .text {
             .flex();
@@ -460,12 +459,13 @@ export default {
             }
             .text2 {
                 .text13();
+                margin-top: 2px;
             }
         }
         .search {
             width: 16px;
             height: 16px;
-            padding: 0 0 10px 19px;
+            padding: 0 0 10px 23px;
         }
     }
     .content {

+ 6 - 14
src/pages/storedetails.vue

@@ -39,7 +39,7 @@
                 </div>
                 <div class="calculationCon">
                     <div class="addcon">
-                        <div v-if="item.currentNum > 0">
+                        <div>
                             <img
                                 class="add"
                                 src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
@@ -47,8 +47,8 @@
                                 @click="minus(item)"
                             />
                         </div>
-                        <div class="text" v-show="item.currentNum > 0">
-                            {{ item.currentNum }}
+                        <div class="text6">
+                            {{ item.currentNum || 1 }}
                         </div>
                         <div>
                             <img
@@ -184,19 +184,11 @@ export default {
         },
         falgs(price) {
             this.tal = price * 1;
-            this.count = 1;
-            this.min = 1;
         },
         add(price) {
-            this.tal = this.tal + price + this.count;
-        },
-        onChange(e) {
-            this.count = e.detail;
+            // this.tal = this.tal + price + this.count;
         },
-        minus(price) {
-            this.min = 0;
-            this.tal = price * this.count;
-        }
+        minus(price) {}
     }
 };
 </script>
@@ -301,7 +293,7 @@ export default {
                 text-align: center;
                 .addcon {
                     display: flex;
-                    .text {
+                    .text6 {
                         width: 24px;
                         height: 24px;
                         text-align: center;