diff --git a/src/layouts/fg-tabbar/tabbarList.ts b/src/layouts/fg-tabbar/tabbarList.ts
index 0e84b9a..0001a77 100644
--- a/src/layouts/fg-tabbar/tabbarList.ts
+++ b/src/layouts/fg-tabbar/tabbarList.ts
@@ -29,14 +29,14 @@ export const tabbarList = [
   {
     iconPath: 'static/images/2-001.png',
     selectedIconPath: 'static/images/2-002.png',
-    pagePath: 'pages/index/home',
-    text: '榜单',
+    pagePath: 'pages/about/index',
+    text: '推荐',
     // icon: 'i-carbon-code',
     // // 注意 unocss 的图标需要在 页面上引入一下，或者配置到 unocss.config.ts 的 safelist 中
     // iconType: 'unocss',
   },
   {
-    pagePath: 'pages/about/about',
+    pagePath: 'pages/service/index',
     iconPath: 'static/images/3-001.png',
     selectedIconPath: 'static/images/3-002.png',
     text: '服务',
diff --git a/src/pages.json b/src/pages.json
index f590a85..82b7308 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -33,11 +33,11 @@
       {
         "iconPath": "static/images/2-001.png",
         "selectedIconPath": "static/images/2-002.png",
-        "pagePath": "pages/index/home",
-        "text": "榜单"
+        "pagePath": "pages/about/index",
+        "text": "推荐"
       },
       {
-        "pagePath": "pages/about/about",
+        "pagePath": "pages/service/index",
         "iconPath": "static/images/3-001.png",
         "selectedIconPath": "static/images/3-002.png",
         "text": "服务"
@@ -61,12 +61,12 @@
       }
     },
     {
-      "path": "pages/about/about",
+      "path": "pages/about/index",
       "type": "page",
-      "layout": "tabbar",
+      "layout": "default",
       "style": {
         "navigationStyle": "custom",
-        "navigationBarTitleText": "服务"
+        "navigationBarTitleText": "首页"
       }
     },
     {
@@ -102,6 +102,15 @@
         "navigationBarTitleText": "我的"
       }
     },
+    {
+      "path": "pages/service/index",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "服务"
+      }
+    },
     {
       "path": "pages/web_view/index",
       "type": "page",
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
new file mode 100644
index 0000000..0b3c21f
--- /dev/null
+++ b/src/pages/about/index.vue
@@ -0,0 +1,386 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    // 'custom' 表示开启自定义导航栏，默认 'default'
+    navigationStyle: 'custom',
+    navigationBarTitleText: '首页',
+  },
+}
+</route>
+
+<template>
+  <view class="">
+    <view class="pt-3 background_home">
+      <!-- 顶部搜索栏 -->
+      <wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search>
+      <!-- 横幅广告 -->
+      <view class="relative h-40 p-2">
+        <wd-img
+          radius="10rpx"
+          :width="'100%'"
+          :height="'100%'"
+          src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
+        />
+        <!-- <view
+          class="absolute bottom-4 left-0 right-0 text-center text-white bg-black bg-opacity-50 py-2"
+        >
+          <text class="text-xl">新鲜蔬菜，自然生态健康美味</text>
+          <text class="block text-sm">同城一小时新鲜送到家</text>
+        </view> -->
+      </view>
+    </view>
+
+    <wd-grid class="p-2" bg-color="rgba(0, 0, 0, 0)">
+      <view
+        v-for="item in [
+          { name: '乡村振兴', icon: 'home', color: 'green' },
+          { name: '公益助力', icon: 'heart', color: 'blue' },
+          { name: '县域好货', icon: 'gift', color: 'orange' },
+          { name: '品质保障', icon: 'secured', color: 'red' },
+        ]"
+      >
+        <wd-grid-item use-slot>
+          <wd-tag
+            custom-class="space"
+            bg-color="rgba(0, 0, 0, 0)"
+            color="#595959"
+            mark
+            use-icon-slot
+          >
+            <text>{{ item.name }}</text>
+            <template #icon>
+              <wd-icon size="32rpx" color="#595959" :name="item.icon" />
+            </template>
+          </wd-tag>
+        </wd-grid-item>
+      </view>
+    </wd-grid>
+    <wd-card>
+      <wd-grid :gutter="10" :column="4" custom-class=" ">
+        <view
+          @click="more"
+          v-for="item in [
+            { name: '村庄服务', icon: '/static/icons/village_service.png', color: 'green' },
+            { name: '农资服务', icon: '/static/icons/agriculture_service.png', color: 'blue' },
+            { name: '农技课堂', icon: '/static/icons/agriculture_course.png', color: 'orange' },
+            { name: '乡村电商', icon: '/static/icons/rural_ecommerce.png', color: 'red' },
+          ]"
+        >
+          <wd-grid-item use-slot>
+            <view class="detail-box" style="border: none; padding: 0; margin: 0">
+              <wd-img radius="10rpx" :width="'100rpx'" :height="'100rpx'" :src="item.icon" />
+              <view class="pt-2 pb-2 text-center text-gray-500 font-size-3">{{ item.name }}</view>
+            </view>
+          </wd-grid-item>
+        </view>
+      </wd-grid>
+    </wd-card>
+
+    <wd-row class="pe-2 ps-2">
+      <wd-col :span="12">
+        <view class="detail-box m-1" style="" @click="moreVillage">
+          <wd-card custom-class="card-content">
+            <template #title>
+              <view class="title">
+                <view>寻美乡村</view>
+                <view class="title-tip">
+                  <wd-button type="primary" size="small">
+                    <wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
+                    <wd-icon name="arrow-right" size="24rpx" />
+                  </wd-button>
+                </view>
+              </view>
+            </template>
+            <view class="pb-2">回归自然 从新开始</view>
+            <view style="height: 200rpx">
+              <wd-img
+                radius="10rpx"
+                :width="'100%'"
+                :height="'100%'"
+                src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
+              />
+            </view>
+          </wd-card>
+        </view>
+      </wd-col>
+      <wd-col :span="12">
+        <view class="detail-box m-1" style="" @click="moreTourism">
+          <wd-card custom-class="card-content">
+            <template #title>
+              <view class="title">
+                <view>优选榜单</view>
+                <view class="title-tip">
+                  <wd-button type="primary" size="small">
+                    <wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
+                    <wd-icon name="arrow-right" size="24rpx" />
+                  </wd-button>
+                </view>
+              </view>
+            </template>
+            <view class="pb-2">优选精品 榜单集萃</view>
+            <view style="height: 200rpx">
+              <wd-grid :column="2">
+                <view
+                  v-for="item in [
+                    {
+                      name: '村庄服务',
+                      icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
+                      color: 'green',
+                      price: '320',
+                      line_price: '320',
+                    },
+                    {
+                      name: '农资服务',
+                      icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
+                      price: '320',
+                      line_price: '320',
+                    },
+                  ]"
+                >
+                  <wd-grid-item use-slot>
+                    <view class="detail-box" style="border: none; padding: 0; margin: 0">
+                      <wd-img
+                        radius="10rpx"
+                        :width="'140rpx'"
+                        :height="'140rpx'"
+                        :src="item.icon"
+                      />
+                      <view class="text-sm text-gray-500 pt-1">
+                        <wd-text
+                          size="18rpx"
+                          :text="item.price"
+                          mode="price"
+                          type="error"
+                          prefix="￥"
+                        />
+                        <wd-text
+                          size="16rpx"
+                          :text="item.line_price"
+                          mode="price"
+                          decoration="line-through"
+                          prefix="￥"
+                        />
+                      </view>
+                    </view>
+                  </wd-grid-item>
+                </view>
+              </wd-grid>
+            </view>
+          </wd-card>
+        </view>
+      </wd-col>
+      <wd-col :span="12">
+        <view class="detail-box m-1" style="" @click="more">
+          <wd-card custom-class="card-content">
+            <template #title>
+              <view class="title">
+                <view>区域特产</view>
+                <view class="title-tip">
+                  <wd-button type="primary" size="small">
+                    <wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
+                    <wd-icon name="arrow-right" size="24rpx" />
+                  </wd-button>
+                </view>
+              </view>
+            </template>
+
+            <view class="pb-2">区特臻品 质纯味美</view>
+            <view style="height: 200rpx">
+              <wd-img
+                radius="10rpx"
+                :width="'100%'"
+                :height="'100%'"
+                src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
+              />
+            </view>
+          </wd-card>
+        </view>
+      </wd-col>
+
+      <wd-col :span="12">
+        <view class="detail-box m-1" style="" @click="more">
+          <wd-card custom-class="card-content">
+            <template #title>
+              <view class="title">
+                <view>助农产销</view>
+                <view class="title-tip">
+                  <wd-button type="primary" size="small">
+                    <wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
+                    <wd-icon name="arrow-right" size="24rpx" />
+                  </wd-button>
+                </view>
+              </view>
+            </template>
+            <view class="pb-2">助农兴产 丰产畅销</view>
+            <view style="height: 200rpx">
+              <wd-grid :column="2">
+                <view
+                  v-for="item in [
+                    {
+                      name: '助农兴产',
+                      icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
+                      color: 'green',
+                      price: '320',
+                      line_price: '320',
+                    },
+                    {
+                      name: '助农畅销',
+                      icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
+                      price: '320',
+                      line_price: '320',
+                    },
+                  ]"
+                >
+                  <wd-grid-item use-slot>
+                    <view class="detail-box" style="border: none; padding: 0; margin: 0">
+                      <wd-img
+                        radius="10rpx"
+                        :width="'140rpx'"
+                        :height="'140rpx'"
+                        :src="item.icon"
+                      />
+                      <view class="pt-2 pb-2 text-center text-black font-size-3">
+                        {{ item.name }}
+                      </view>
+                    </view>
+                  </wd-grid-item>
+                </view>
+              </wd-grid>
+            </view>
+          </wd-card>
+        </view>
+      </wd-col>
+    </wd-row>
+    <wd-cell-group custom-class="background-none pe-2 ps-2">
+      <wd-cell size="large">
+        <template #title>
+          <view>
+            <view class="title">热门发布</view>
+          </view>
+        </template>
+
+        <view class="custom-text font-size-3 text-gray-500">
+          查看更多 》
+          <!-- <wd-icon name="arrow-right" size="24rpx" /> -->
+        </view>
+      </wd-cell>
+    </wd-cell-group>
+    <view class="pe-2 ps-2">
+      <wd-grid :gutter="10" :column="5" custom-class=" ">
+        <wd-button
+          v-for="item in [
+            {
+              name: '农产品',
+              id: 1,
+            },
+            {
+              name: '农资供应',
+              id: 2,
+            },
+            {
+              name: '土地流转',
+              id: 3,
+            },
+            {
+              name: '技术服务',
+              id: 4,
+            },
+            {
+              name: '乡村旅游',
+              id: 5,
+            },
+          ]"
+          :type="item.id === currentTab ? 'primary' : 'none'"
+          size="small"
+          @click="changeTab(item)"
+        >
+          {{ item.name }}
+        </wd-button>
+      </wd-grid>
+    </view>
+    <wd-row class="pe-2 ps-2">
+      <wd-col :span="12">
+        <view class="detail-box m-1" style="" @click="goToShop()">
+          <wd-card custom-class="card-content">
+            <view style="height: 200rpx">
+              <wd-img
+                radius="10rpx"
+                :width="'100%'"
+                :height="'100%'"
+                src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
+              />
+            </view>
+            <view class="pt-2 font-size-4 font-bold">xxx蔬菜基地</view>
+            <view class="pt-2 font-size-3">我们这里的食物很新鲜</view>
+            <view class="pt-2 pb-2">
+              <wd-tag custom-class="space">标签</wd-tag>
+              <wd-tag custom-class="space" type="primary">标签</wd-tag>
+              <wd-tag custom-class="space" type="danger">标签</wd-tag>
+              <wd-tag custom-class="space" type="warning">标签</wd-tag>
+              <wd-tag custom-class="space" type="success">标签</wd-tag>
+            </view>
+          </wd-card>
+        </view>
+      </wd-col>
+    </wd-row>
+
+    <view class="p-1"></view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+// import { toLogin } from '@/libs/login.js'
+const currentTab = ref(1)
+function changeTab(e) {
+  console.log(e)
+  currentTab.value = e.id
+}
+
+function moreVillage() {
+  console.log('查看乡村')
+  uni.navigateTo({
+    url: '/pages-village-sub/home/index',
+  })
+}
+
+function moreTourism() {
+  console.log('查看旅游')
+  uni.navigateTo({
+    url: '/pages-tourism-sub/home/index',
+  })
+}
+function more() {
+  console.log('数字乡村详情')
+  uni.navigateTo({
+    url: '/pages/index/detail',
+  })
+}
+function goToShop() {
+  // if (this.isLogin) {
+  let urls = 'https://shop.lihaink.cn/'
+  uni.navigateTo({
+    url: `/pages/web_view/index?local_url=${urls}&title=区域特产`,
+  })
+  // } else {
+  //   this.openAuto()
+  // }
+}
+
+// 打开授权
+function openAuto() {
+  toLogin()
+}
+</script>
+
+<style lang="scss" scoped>
+.section {
+  width: 100%;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+  &-slot {
+    padding: 4px;
+  }
+}
+</style>
diff --git a/src/pages/about/components/request.vue b/src/pages/service/components/request.vue
similarity index 100%
rename from src/pages/about/components/request.vue
rename to src/pages/service/components/request.vue
diff --git a/src/pages/about/components/upload.vue b/src/pages/service/components/upload.vue
similarity index 100%
rename from src/pages/about/components/upload.vue
rename to src/pages/service/components/upload.vue
diff --git a/src/pages/about/about.vue b/src/pages/service/index.vue
similarity index 100%
rename from src/pages/about/about.vue
rename to src/pages/service/index.vue