样式修改

src/pages/Home.vue

@@ -46,12 +46,13 @@
                         type="text"
                         clearable
                     />
-                    <!-- <span slot="right-icon">
-                        <img
-                            class="sousuo"
-                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-09-53-26QAqibCrM.png"
-                            alt=""
-                    /></span> -->
+                    <!-- <span slot="right-icon"> -->
+                    <img
+                        class="sousuo"
+                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-09-53-26QAqibCrM.png"
+                        alt=""
+                    />
+                    <!-- </span> -->
                 </div>
                 <swiper class="swiper" :autoplay="true" @change="swiperChange" :current="current">
                     <swiper-item v-for="(item, index) in banners" :key="index">
@@ -63,11 +64,11 @@
         </div>
         <van-sticky :offset-top="122">
             <div class="tab">
-                <img
+                <!-- <img
                     class="imges"
                     src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-10-36-12iLAzbiVk.png"
                     alt=""
-                />
+                /> -->
                 <div
                     class="tabs"
                     :class="{ active: item === active }"
@@ -181,6 +182,7 @@ export default {
             }
             .search {
                 margin: 20px 0 20px;
+                position: relative;
                 /deep/ .van-cell {
                     --cell-vertical-padding: 4px;
                     width: 100%;
@@ -196,16 +198,15 @@ export default {
                 }
                 /deep/ .van-icon {
                     color: #fff;
-                    margin-left: 130px;
+                    font-size: 0;
+                    margin-left: 152px;
                 }
                 .sousuo {
-                    // position: absolute;
-                    // left: 163px;
-                    // top: 17.5%;
-                    // // top: 16.7%;
+                    position: absolute;
+                    left: 147px;
+                    top: 22.5%;
                     width: 16px;
                     height: 16px;
-                    // background: red;
                 }
             }
             .swiper {

src/pages/confirmorder.vue

@@ -7,61 +7,77 @@
 <template>
     <div class="container">
         <nav-title>提交订单</nav-title>
-        <van-sticky>
-            <div class="top">
-                <img
-                    class="mytest"
-                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-02-06RPYZopsT.png"
-                    alt=""
-                />
-                <div class="box">
-                    <div class="tabs">
-                        <div
-                            class="tab"
-                            :class="{ active: item === active }"
-                            v-for="(item, index) in tabs"
-                            :key="index"
-                            @click="change(item)"
-                        >
-                            {{ item }}
-                            <div class="slip" :class="{ active: item === active }"></div>
-                        </div>
+        <!-- <van-sticky> -->
+        <div class="top">
+            <img
+                class="mytest"
+                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-02-06RPYZopsT.png"
+                alt=""
+            />
+            <div class="box">
+                <div class="tabs">
+                    <div
+                        class="tab"
+                        :class="{ active: item === active }"
+                        v-for="(item, index) in tabs"
+                        :key="index"
+                        @click="change(item)"
+                    >
+                        {{ item }}
+                        <div class="slip" :class="{ active: item === active }"></div>
                     </div>
-                    <div class="address" @click.stop="navigateTo('/pages/chooseAddress')">
-                        <div>
-                            <div class="text">
-                                <img
-                                    v-if="active == '外卖配送'"
-                                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-16-00-50JDBrQbgB.png"
-                                    alt=""
-                                />
-                                <div class="text1">江宁学院一食堂楼 益禾堂</div>
-                            </div>
-                            <div v-if="userInfo">
-                                <div v-if="active == '外卖配送'" class="text2">
-                                    {{ userInfo.nickname }} {{ userInfo.phone }}
-                                </div>
+                </div>
+                <div class="address" @click.stop="navigateTo('/pages/chooseAddress')">
+                    <div>
+                        <div class="text">
+                            <img
+                                v-if="active == '外卖配送'"
+                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-16-00-50JDBrQbgB.png"
+                                alt=""
+                            />
+                            <div class="text1">江宁学院一食堂楼 益禾堂</div>
+                        </div>
+                        <div v-if="userInfo">
+                            <div v-if="active == '外卖配送'" class="text2">
+                                {{ userInfo.nickname }} {{ userInfo.phone }}
                             </div>
-                            <div v-if="active == '到店自取'" class="text2 text3">商家地址</div>
                         </div>
-                        <img
-                            v-if="active == '外卖配送'"
-                            class="imgBox1"
-                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-16-00-00LxfIfsLZ.png"
-                            alt=""
-                        />
-                        <img
-                            v-else
-                            class="imgBox2"
-                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-16-40-17lRmfLjlp.png"
-                            alt=""
-                        />
+                        <div v-if="active == '到店自取'" class="text2 text3">商家地址</div>
+                    </div>
+                    <img
+                        v-if="active == '外卖配送'"
+                        class="imgBox1"
+                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-16-00-00LxfIfsLZ.png"
+                        alt=""
+                    />
+                    <img
+                        v-else
+                        class="imgBox2"
+                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-16-40-17lRmfLjlp.png"
+                        alt=""
+                    />
+                </div>
+                <div class="border"></div>
+                <div class="time" @click="show = true">
+                    <div class="text" v-if="active == '到店自取'">
+                        <div class="text3">预留信息</div>
+                        <div class="textCon">
+                            <div class="text2">奶盖 18789898888</div>
+                            <img
+                                style="width:12px;height:24px"
+                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-16-00-00LxfIfsLZ.png"
+                                alt=""
+                            />
+                        </div>
                     </div>
-                    <div class="border"></div>
-                    <div class="time" @click="show = true">
-                        <div class="text1">{{ active == '外卖配送' ? '立即送出' : '自取时间' }}</div>
+                    <div v-if="active == '到店自取'" class="quarantine"></div>
+                    <div class="text1" v-if="active == '外卖配送'">立即送出</div>
+                    <div>
+                        <div class="text1 text4" v-if="active == '到店自取'">自取时间</div>
                         <div class="time1">
-                            <div class="text2">{{ active == '外卖配送' ? `预计${time}配送` : `预计${time}自取` }}</div>
+                            <div class="text2">
+                                {{ active == '外卖配送' ? `预计${time}配送` : `今天${time}自取` }}
+                            </div>
                             <img
                                 src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-15-58-50tLAIsjgR.png"
                                 alt=""
@@ -70,7 +86,8 @@
                     </div>
                 </div>
             </div>
-        </van-sticky>
+        </div>
+        <!-- </van-sticky> -->
         <div class="content">
             <div class="store">
                 <div class="title">
@@ -290,7 +307,7 @@ export default {
                     ]
                 }
             ],
-            active: '外卖配送',
+            active: '到店自取',
             tabs: ['外卖配送', '到店自取'],
             takeout: [],
             list: {
@@ -393,9 +410,9 @@ export default {
         }
         .box {
             width: 351px;
-            height: 202px;
             background: #ffffff;
             border-radius: 12px;
+            // margin-bottom: 16px;
             .tabs {
                 padding: 16px 59px 0;
                 color: #878787;
@@ -452,20 +469,50 @@ export default {
             .imgBox2 {
                 width: 28px;
                 height: 28px;
+                margin-right: 6px;
             }
         }
         .border {
             border-bottom: 1px solid @bg;
-            margin: 16px 12px 20px;
+            margin: 16px 12px;
         }
         .time {
             .flex();
             justify-content: space-between;
-            margin: 0 12px 0 32px;
-
+            padding-bottom: 16px;
+            .text {
+                padding-left: 12px;
+                .text3 {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #000000;
+                    line-height: 24px;
+                    margin-bottom: 4px;
+                }
+                .textCon {
+                    .flex();
+                    .text2 {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #000000;
+                        line-height: 24px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+            .quarantine {
+                width: 1px;
+                height: 42px;
+                background: #f5f7fa;
+                // margin: 0 -13px;
+            }
             .text1 {
                 .span();
                 font-weight: 400;
+                margin-left: 30px;
+                &.text4 {
+                    margin-left: 0;
+                }
             }
             .time1 {
                 .flex();
@@ -479,6 +526,7 @@ export default {
                 img {
                     width: 12px;
                     height: 24px;
+                    margin-right: 12px;
                 }
             }
         }
@@ -487,7 +535,8 @@ export default {
         width: 351px;
         background: #ffffff;
         border-radius: 12px;
-        margin: 20px 0 0 12px;
+        // margin: 20px 0 0 12px;
+        margin-left: 12px;
         padding: 16px 0;
         .store {
             .flex();

src/pages/merchantorders.vue

@@ -53,9 +53,9 @@
         </van-sticky>
         <div class="content">
             <div v-if="active == '点餐'">
+                <!-- height="115vw" -->
                 <van-tree-select
                     :items="items"
-                    height="115vw"
                     :main-item-class="red"
                     :main-active-index="mainActiveIndex"
                     :active-id="activeId"
@@ -349,12 +349,13 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
-    padding-bottom: 150px;
+    // padding-bottom: 150px;
     /deep/ .van-button {
         .button();
     }
     /deep/ .van-tree-select {
         margin-top: 20px;
+        min-height: 425px;
     }
     /deep/ .van-sidebar-item--selected {
         border: 0;

src/pages/storedetails.vue

@@ -224,12 +224,14 @@ export default {
         z-index: 99;
         background: #ffffff;
         border-radius: 12px;
-        padding: 20px 14px;
+        width: 100%;
+        padding: 20px 0;
         margin-top: -15px;
         .top {
             .flex();
             width: 347px;
             justify-content: space-between;
+            padding-left: 14px;
             .text1 {
                 font-size: 20px;
                 font-weight: bold;
@@ -250,8 +252,8 @@ export default {
         }
         .con {
             .flex();
-            margin-top: 6px;
-            margin-bottom: 8px;
+            margin: 6px 0 8px 0;
+            padding-left: 14px;
             .text1 {
                 font-size: 14px;
                 font-weight: 400;
@@ -262,6 +264,7 @@ export default {
         }
         .buttom {
             .flex();
+            padding-left: 14px;
             justify-content: space-between;
             .text {
                 .flex();
@@ -293,6 +296,7 @@ export default {
                 text-align: center;
                 .addcon {
                     display: flex;
+                    padding-right: 14px;
                     .text6 {
                         width: 24px;
                         height: 24px;