首页优化

src/pages/index/building.vue

@@ -28,6 +28,7 @@
             style="height: 176rpx; margin-left: 8rpx"
           />
           <img
+            @tap="toPresale"
             class="fresh"
             src="/static/assets/fresh.png"
             style="height: 176rpx; margin-left: 8rpx"
@@ -47,8 +48,14 @@
         color="#ABAAAA"
         style="position: relative; float: right; top: -42rpx"
       ></wd-icon>
-      <img class="rice" src="/static/assets/rice.png" style="width: 670rpx; height: 236rpx" />
       <img
+        @tap="toDetail"
+        class="rice"
+        src="/static/assets/rice.png"
+        style="width: 670rpx; height: 236rpx"
+      />
+      <img
+        @tap="toDetail"
         class="potato"
         src="/static/assets/potato.png"
         style="width: 650rpx; height: 236rpx; margin-left: 20rpx; margin-top: -20rpx"
@@ -123,6 +130,18 @@ function handleClick(e) {
 function onChange(e) {
   console.log(e);
 }
+function toPresale() {
+  // TODO: 跳转到预售
+  xma.navigateTo({
+    url: '/pages/index/presale',
+  });
+}
+function toDetail() {
+  // TODO: 跳转到详情页
+  xma.navigateTo({
+    url: '/pages/detail/detail',
+  });
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/index/index.vue

@@ -9,18 +9,106 @@
       </view>
       <view class="sort">
         <view style="display: flex; flex-direction: row">
-          <view
-            class="borderClass"
-            @tap="toBuilding"
-            v-for="(item, index) in sortList"
-            :key="index"
-          >
-            <img :src="item.img" style="width: 96rpx; height: 96rpx" />
-            <view class="sort-text">{{ item.text }}</view>
+          <view class="borderClass" @tap="toBuilding">
+            <img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
+            <view class="sort-text">筑农严选</view>
+          </view>
+          <view class="borderClass">
+            <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
+            <view class="sort-text">认养农业</view>
+          </view>
+          <view class="borderClass">
+            <img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
+            <view class="sort-text">乡村旅居</view>
+          </view>
+          <view class="borderClass">
+            <img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
+            <view class="sort-text">特色农庄</view>
           </view>
         </view>
+        <!--        <view style="display: flex; flex-direction: row">-->
+        <!--          <view-->
+        <!--            class="borderClass"-->
+        <!--            @tap="toBuilding"-->
+        <!--            v-for="(item, index) in sortList"-->
+        <!--            :key="index"-->
+        <!--          >-->
+        <!--            <img :src="item.img" style="width: 96rpx; height: 96rpx" />-->
+        <!--            <view class="sort-text">{{ item.text }}</view>-->
+        <!--          </view>-->
+        <!--        </view>-->
       </view>
-      <view class="product-page" @tap="toPresale" v-for="(item, index) in list" :key="index">
+      <view class="product-page">
+        <view>
+          <view class="page-title">特色美食</view>
+          <img src="/static/assets/mainPicture.png" class="main-img" />
+          <view style="display: flex; flex-direction: row">
+            <view class="detail-border">
+              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
+              <view class="detail-title">干辣椒炒肉</view>
+              <view class="jiage-page">
+                <text class="jiage">￥25</text>
+                /份
+              </view>
+              <view class="yushou">预售</view>
+            </view>
+            <view class="detail-border">
+              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
+              <view class="detail-title">贵阳辣子鸡</view>
+              <view class="jiage-page">
+                <text class="jiage">￥25</text>
+                /份
+              </view>
+              <view class="yushou">预售</view>
+            </view>
+            <view class="detail-border">
+              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
+              <view class="detail-title">麻辣鱼豆腐</view>
+              <view class="jiage-page">
+                <text class="jiage">￥25</text>
+                /份
+              </view>
+              <view class="yushou">预售</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="product-page" @tap="toDetail">
+        <view>
+          <view class="page-title">农货预售</view>
+          <img src="/static/assets/img4.png" class="main-img" />
+          <view style="display: flex; flex-direction: row">
+            <view class="detail-border">
+              <img src="/static/assets/img1.png" style="width: 216rpx; height: 176rpx" />
+              <view class="detail-title">这是农村种的土豆</view>
+              <view class="jiage-page">
+                <text class="jiage">￥25</text>
+                /份
+              </view>
+              <view class="yushou">预售</view>
+            </view>
+            <view class="detail-border">
+              <img src="/static/assets/img2.png" style="width: 216rpx; height: 176rpx" />
+              <view class="detail-title">这是农村玉米</view>
+              <view class="jiage-page">
+                <text class="jiage">￥25</text>
+                /份
+              </view>
+              <view class="yushou">预售</view>
+            </view>
+            <view class="detail-border">
+              <img src="/static/assets/img3.png" style="width: 216rpx; height: 176rpx" />
+              <view class="detail-title">这是农村中的猕猴桃</view>
+              <view class="jiage-page">
+                <text class="jiage">￥25</text>
+                /份
+              </view>
+              <view class="yushou">预售</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="product-page" @tap="toDetail" v-for="(item, index) in list" :key="index">
         <view>
           <view class="page-title">{{ item.text }}</view>
           <img :src="item.img" class="main-img" />
@@ -45,8 +133,8 @@
 import Search from '../../components/index/Search.vue';
 
 const list = ref([
-  { img: '/static/assets/mainPicture.png', text: '特色美食' },
-  { img: '/static/assets/presale.png', text: '农货预售' },
+  // { img: '/static/assets/mainPicture.png', text: '特色美食' },
+  // { img: '/static/assets/presale.png', text: '农货预售' },
   { img: '/static/assets/mainPicture.png', text: '乡村非遗' },
   { img: '/static/assets/mainPicture.png', text: '认养农业' },
   { img: '/static/assets/mainPicture.png', text: '乡村旅居' },
@@ -69,13 +157,13 @@ function toBuilding() {
     url: '/pages/index/building',
   });
 }
-function toPresale() {
-  // TODO: 跳转到预售
+// 跳转详情页
+function toDetail() {
+  // TODO: 跳转到筑农严选
   xma.navigateTo({
-    url: '/pages/index/presale',
+    url: '/pages/detail/detail',
   });
 }
-const goBack = () => {};
 </script>
 
 <style lang="scss">
@@ -175,8 +263,7 @@ page {
   font-weight: 500;
   line-height: 28rpx;
   letter-spacing: 0em;
-  margin-left: 48rpx;
-  margin-top: -20rpx;
+  margin-left: 30rpx;
   color: #3d3d3d;
   width: 190rpx;
   white-space: nowrap;

src/pages/index/presale.vue

@@ -16,7 +16,7 @@
     </view>
     <view class="sort">
       <view style="display: flex; flex-direction: row">
-        <view class="borderClass" @tap="toDetail" v-for="(item, index) in sortList" :key="index">
+        <view class="borderClass" @tap="toPresale" v-for="(item, index) in sortList" :key="index">
           <img :src="item.img" style="width: 48rpx; height: 48rpx" />
           <view class="sort-text">{{ item.text }}</view>
         </view>