助农页面样式优化

package.json

@@ -26,7 +26,7 @@
     "pinia": "2.0.36",
     "vue": "^3.3.11",
     "vue-i18n": "^9.1.9",
-    "wot-design-uni": "^1.2.26"
+    "wot-design-uni": "^1.3.6"
   },
   "devDependencies": {
     "@dcloudio/types": "^3.3.2",

src/components/index/Search.vue

+<template>
+  <view class="search">
+    <img class="icon" src="/static/assets/return.png" />
+    <slot></slot>
+    <view class="searchBox">
+      <image
+        class="magnifyingGlass"
+        src="../../static/preSale/magnifyingGlass.png"
+        mode="aspectFit|aspectFill|widthFix"
+      />
+      <input type="text" :value="value" class="text" placeholder="请输入要搜索的内容" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+// 返回上一级
+const back = () => {};
+</script>
+
+<style lang="scss">
+.search {
+  position: absolute;
+  width: 710rpx;
+  height: 80rpx;
+  border-radius: 16rpx 16rpx 16rpx 16rpx;
+  opacity: 0.8;
+  margin: 0 auto;
+  margin-top: 44rpx;
+  display: flex;
+  align-items: center;
+  padding-left: 20rpx;
+  box-sizing: border-box;
+  .arrow {
+    width: 15rpx;
+    height: 24rpx;
+  }
+  .icon {
+    width: 40rpx;
+    height: 40rpx;
+    margin-left: 40rpx;
+  }
+  .searchBox {
+    opacity: 1;
+    width: 256rpx;
+    height: 56rpx;
+    background: #ffffff;
+    border-radius: 28rpx 28rpx 28rpx 28rpx;
+    display: flex;
+    align-items: center;
+    padding-left: 20rpx;
+    margin-left: 167rpx;
+    .magnifyingGlass {
+      width: 26rpx;
+      height: 26rpx;
+    }
+    .text {
+      margin-left: 10rpx;
+      font-size: 24rpx;
+    }
+  }
+}
+</style>

src/pages/index/index.vue

 <template>
-  <view style="background-color: #f3f3f3; height: 100vh">
+  <view>
     <view class="container">
+      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
       <view>
         <img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
         <img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
@@ -26,38 +27,20 @@
           </view>
         </view>
       </view>
-      <view class="product-page">
+      <view class="product-page" @tap="goPreSale()" v-for="(item, index) in list" :key="index">
         <view>
-          <view class="page-title">特色美食</view>
-          <img src="/static/assets/mainPicture.png" class="main-img" />
-        </view>
-        <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/detailedMapTwo.png" style="width: 216rpx; height: 176rpx" />
-            <view class="detail-title">贵阳辣子鸡</view>
-            <view class="jiage-page">
-              <text class="jiage">￥25</text>
-              /份
+          <view class="page-title">{{ item.text }}</view>
+          <img :src="item.img" class="main-img" />
+          <view style="display: flex; flex-direction: row">
+            <view class="detail-border" v-for="(item, index) in detailList" :key="index">
+              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
+              <view class="detail-title">{{ item.text }}</view>
+              <view class="jiage-page">
+                <text class="jiage">￥{{ item.price }}</text>
+                /份
+              </view>
+              <view class="yushou">预售</view>
             </view>
-            <view class="yushou">预售</view>
-          </view>
-          <view class="detail-border">
-            <img src="/static/assets/detailedMapThree.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>
@@ -65,9 +48,33 @@
   </view>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+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/mainPicture.png', text: '认养农业' },
+  { img: '/static/assets/mainPicture.png', text: '乡村旅居' },
+  { img: '/static/assets/mainPicture.png', text: '特色农庄' },
+]);
+const detailList = ref([
+  { img: '/static/assets/detailedMapOne.png', price: '25', text: '干辣椒炒肉' },
+  { img: '/static/assets/detailedMapTwo.png', price: '25', text: '贵阳辣子鸡' },
+  { img: '/static/assets/detailedMapThree.png', price: '25', text: '麻辣鱼豆腐' },
+]);
+const goPreSale = () => {
+  xma.navigateTo({
+    url: '/pages/index/preSale',
+  });
+};
+</script>
 
 <style lang="scss">
+page {
+  background-color: #f3f3f3;
+}
 .container {
   position: relative;
   left: 0rpx;
@@ -103,13 +110,12 @@
 .sort {
   width: 750rpx;
   height: 186rpx;
-  padding-left: 40rpx;
   background: linear-gradient(180deg, #82ce8b -39%, #ffffff 36%);
 }
 .borderClass {
   width: 96rpx;
   height: 96rpx;
-  margin-left: 60rpx;
+  margin-left: 75rpx;
   margin-top: 22rpx;
 }
 .sort-text {
@@ -165,6 +171,10 @@
   margin-left: 48rpx;
   margin-top: -20rpx;
   color: #3d3d3d;
+  width: 190rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .jiage-page {
   width: 96rpx;

src/pages/preSale/preSale.vue

+<template>
+  <view class="container">
+    <view class="top">
+      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import Search from '../../components/index/Search.vue';
+</script>
+
+<style lang="scss" scoped>
+page {
+  background: #f3f3f3;
+}
+.container {
+  .top {
+    width: 100%;
+    height: 440rpx;
+    background: linear-gradient(180deg, #71c456 0%, rgba(243, 243, 243, 0) 100%);
+    border-radius: 0rpx 0rpx 0rpx 0rpx;
+    overflow: hidden;
+  }
+}
+</style>