1

src/pages/index/index.vue

 <template>
-  <wd-watermark content="小程序平台" :opacity="0.25"></wd-watermark>
-  <view class="content">
-    <image src="/static/logo-icon.png" class="logo" />
-    <text>{{ title }}</text>
-    <wd-button type="primary" @click="toUIComponentsDoc">wot-design-uni 文档</wd-button>
-    <text>pinia count: {{ countInfo.count }}</text>
-    <wd-button type="primary" @click="onHandleClick">add count</wd-button>
+  <view style="background-color: #f3f3f3; height: 100vh">
+    <view class="container">
+      <view class="top">
+        <view class="left-icon"></view>
+        <view class="bottom-image">
+          <view class="right-image"></view>
+        </view>
+      </view>
+      <view class="sort">
+        <view style="display: flex; flex-direction: row">
+          <view class="borderClass">
+            <img src="/static/assets/buildingAgriculture.png" style="width: 48px; height: 48px" />
+            <view class="sort-text">筑农严选</view>
+          </view>
+          <view class="borderClass">
+            <img src="/static/assets/rural.png" style="width: 48px; height: 48px" />
+            <view class="sort-text">认养农业</view>
+          </view>
+          <view class="borderClass">
+            <img src="/static/assets/adoption.png" style="width: 48px; height: 48px" />
+            <view class="sort-text">乡村旅居</view>
+          </view>
+          <view class="borderClass">
+            <img src="/static/assets/adoption.png" style="width: 48px; height: 48px" />
+            <view class="sort-text">特色农庄</view>
+          </view>
+        </view>
+      </view>
+      <view class="product-page">
+        <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: 108px; height: 88px" />
+            <view class="detail-title">干辣椒炒肉</view>
+          </view>
+          <view class="detail-border">
+            <img src="/static/assets/detailedMapTwo.png" style="width: 108px; height: 88px" />
+            <view class="detail-title">贵阳辣子鸡</view>
+          </view>
+          <view class="detail-border">
+            <img src="/static/assets/detailedMapThree.png" style="width: 108px; height: 88px" />
+            <view class="detail-title">麻辣鱼豆腐</view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
-<script setup lang="ts">
-import { useCountStore } from '@/store';
+<script setup lang="ts"></script>
 
-const title = ref('小程序平台');
-const { countInfo, addCount } = useCountStore();
+<style lang="scss">
+.container {
+  position: relative;
+  left: 0px;
+  top: 0px;
+  width: 375px;
+  height: 220px;
+  opacity: 1;
+  background-image: url('@/static/assets/矩形 196@1x.png');
+}
+.bottom-image {
+  position: relative;
+  left: 0px;
+  top: 204px;
+  width: 375px;
+  height: 16px;
+  opacity: 1;
+  background: url('@/static/assets/矩形 198@1x.png');
+}
+.right-image {
+  float: right;
+  position: relative;
+  left: 231px;
+  top: -45px;
+  width: 144px;
+  height: 62px;
+  opacity: 1;
+  background: url('@/static/assets/图层 1@1x.png');
+}
+.sort {
+  position: relative;
+  left: 0px;
+  top: 200px;
+  width: 375px;
+  height: 93px;
+  opacity: 1;
+  background: url('@/static/assets/矩形 197@1x.png');
+}
+.borderClass {
+  width: 100px;
+  height: 100px;
+  background-color: transparent;
+  margin: 20px;
+}
+.sort-text {
+  font-family: Source Han Sans;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  text-align: center;
+  letter-spacing: 0em;
 
-function toUIComponentsDoc() {
-  window.open('https://wot-design-uni.netlify.app/component/button.html');
+  font-variation-settings: 'opsz' auto;
+  font-feature-settings: 'kern' on;
+  color: #3d3d3d;
+}
+.product-page {
+  position: relative;
+  width: 355px;
+  height: 371px;
+  border-radius: 8px;
+  opacity: 1;
+  background: #ffffff;
+  top: 210px;
+  left: 10px;
 }
+.page-title {
+  position: relative;
+  left: 10px;
+  top: 10px;
+  width: 56px;
+  height: 14px;
+  opacity: 1;
+
+  font-family: Source Han Sans;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 14px;
+  text-align: center;
+  letter-spacing: 0em;
 
-function onHandleClick() {
-  addCount();
+  font-variation-settings: 'opsz' auto;
+  font-feature-settings: 'kern' on;
+  color: #3d3d3d;
 }
-</script>
+.main-img {
+  width: 335px;
+  height: 181px;
+  border-radius: 8px;
+  opacity: 1;
+  margin-top: 20px;
+}
+.detail-title {
+  font-family: Source Han Sans;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: 0em;
 
-<style lang="scss">
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40rpx {
-    top: 200rpx;
-  }
-  gap: 24rpx;
-  
-  .logo {
-    width: 80rpx;
-    height: 80rpx;
-  }
+  font-variation-settings: 'opsz' auto;
+  font-feature-settings: 'kern' on;
+  color: #3d3d3d;
 }
 </style>