wip:

src/pages/index/index.scss

@@ -1,5 +1,5 @@
 page {
-  background-image: url("//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png");
+  background-image: url('//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png');
   background-size: 100% 57%;
   background-repeat: no-repeat;
   box-sizing: border-box;
@@ -10,10 +10,6 @@ page {
   display: flex;
   align-items: flex-end;
   color: #fff;
-
-  text {
-    font-size: 25px;
-  }
 }
 
 .search {
@@ -43,7 +39,7 @@ page {
 
 .banner {
   .title {
-    background-image: url("//p0.meituan.net/csc/542112fc072d4687b437848bc29b0a1730495.png");
+    background-image: url('//p0.meituan.net/csc/542112fc072d4687b437848bc29b0a1730495.png');
     background-size: 100% 100%;
     width: 600px;
     height: 90px;
@@ -52,7 +48,7 @@ page {
 
   .jf-btn {
     margin: 15px auto;
-    background-image: url("//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png");
+    background-image: url('//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png');
     background-size: 100% 100%;
     width: 350px;
     height: 70px;
@@ -66,21 +62,21 @@ page {
     padding: 0 15px;
 
     .btn-1 {
-      background-image: url("//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png");
+      background-image: url('//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png');
       background-size: 100% 100%;
       width: 200px;
       height: 220px;
     }
 
     .btn-2 {
-      background-image: url("//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png");
+      background-image: url('//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png');
       background-size: 100% 100%;
       width: 300px;
       height: 220px;
     }
 
     .btn-3 {
-      background-image: url("//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png");
+      background-image: url('//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png');
       background-size: 100% 100%;
       width: 200px;
       height: 220px;
@@ -91,13 +87,12 @@ page {
 .navigation {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-gap: 10px;
-  margin: 10px auto;
-  width: 730px;
+  grid-gap: 40px;
+  margin: 20px;
   height: auto;
   background-color: #fff;
   border-radius: 20px;
-  padding: 20px;
+  padding: 32px 26px;
 
   .item {
     display: flex;
@@ -112,15 +107,15 @@ page {
 
     .text {
       color: #333333;
-      font-size: 23px;
+      font-size: 26px;
       margin-top: 6px;
     }
   }
 }
 
 .ad {
-  background-image: url("https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png");
+  background-image: url('https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png');
   background-size: 100% 100%;
-  width: 100%;
   height: 180px;
+  margin: 20px;
 }

src/pages/index/index.vue

@@ -3,7 +3,7 @@
     <view :style="{marginTop: BarHeight + 'px'}"></view>
     <view class="local">
       <view class="iconfont icon-dizhi" style="font-size: 20px"></view>
-      <text>{{ address }}</text>
+      <text class="text-[28px]">{{ address }}</text>
     </view>
     <view class="search">
       <view
@@ -31,12 +31,7 @@
         v-for="(item, index) in navigationList"
         :key="index"
         @click="toPage(item)">
-        <view
-          class="icon"
-          :style="{
-            backgroundImage: `url(${item.icon})`,
-          }">
-        </view>
+        <image class="icon" :src="item.icon" />
         <view class="text">{{ item.name }}</view>
       </view>
     </view>
@@ -72,6 +67,7 @@ Taro.useShareAppMessage(() => ({
 }));
 
 const searchVal = ref('');
+
 const clickSearch = () => {
   if (!searchVal.value)
     return Taro.showToast({
@@ -97,7 +93,7 @@ const getUserLocal = async () => {
         method: 'GET',
         success: res => {
           const data = res.data.result.address_component;
-          address.value = `${data.city}${data.district}${data.street_number}`;
+          address.value = `${data.district}${data.street_number}`;
         },
       });
     },