diff --git a/src/pages.json b/src/pages.json
index d151b35..b246ed0 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -51,18 +51,6 @@
         "navigationBarTitleText": "订单列表"
       }
     },
-    {
-      "path": "pages/cart/cart",
-      "style": {
-        "navigationBarTitleText": "购物车"
-      }
-    },
-    {
-      "path": "pages/cart/cart2",
-      "style": {
-        "navigationBarTitleText": "购物车"
-      }
-    },
     {
       "path": "pages/my/my",
       "style": {
diff --git a/src/pages/serviceSite/components/SiteItem.vue b/src/pages/serviceSite/components/SiteItem.vue
new file mode 100644
index 0000000..0cba594
--- /dev/null
+++ b/src/pages/serviceSite/components/SiteItem.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+// const handlePhone = () => {
+//   uni.makePhoneCall({
+//     phoneNumber: '400-123-000', //仅为示例
+//   })
+// }
+const handleToto = () => {
+  uni.navigateTo({ url: '/pages/siteDetail/siteDetail' })
+}
+</script>
+<template>
+  <view class="item-site" @tap="handleToto">
+    <view class="module-cont">
+      <image
+        class="left"
+        src="https://img.36krcdn.com/20200410/v2_41365a0f26a244fdab8e3f5be081ed2b_img_000"
+      />
+      <view class="md">
+        <view class="name"> <span class="zuijin"> 最近 </span>上海市松江区佘山镇 </view>
+        <view class="time">营业时间：09-18:00</view>
+        <view class="loction">上海市松江区新松江路92弄开元地中海园区</view>
+      </view>
+      <view class="right">
+        <view class="num">1.03km</view>
+        <image
+          class="img"
+          src="https://img.36krcdn.com/20200410/v2_41365a0f26a244fdab8e3f5be081ed2b_img_000"
+        />
+      </view>
+    </view>
+    <view class="md-tag"
+      ><span class="tag-before">回收品类</span>旧衣·纸品·金属·家电·塑料·玻璃</view
+    >
+    <view class="foot-desc">
+      <view class="item">特色服务：上门服务、家电维修</view>
+      <view class="item">优惠活动：预约回收立享双倍积分</view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.item-site {
+  padding: 32rpx 20rpx;
+  margin: 16rpx;
+  background-color: #fff;
+  border-radius: 4rpx;
+
+  .module-cont {
+    padding: 20rpx 0;
+    display: flex;
+    flex-direction: row;
+    .left {
+      width: 140rpx;
+      height: 140rpx;
+      border-radius: 12rpx;
+    }
+    .md {
+      flex: 1;
+      margin: 0 10rpx;
+      font-size: 24rpx;
+      color: #0d0d26;
+      .name {
+        font-size: 30rpx;
+        .zuijin {
+          font-size: 24rpx;
+          color: #ff7d00;
+          background: #fff7e8;
+          padding: 4rpx 4rpx;
+          margin-right: 6rpx;
+          border-radius: 4rpx;
+        }
+      }
+      .time {
+        color: #95969d;
+        margin: 8rpx 0;
+      }
+      .loction {
+        color: #0d0d26;
+      }
+    }
+    .right {
+      .num {
+        font-size: 28rpx;
+        color: #95969d;
+      }
+      .img {
+        width: 72rpx;
+        height: 72rpx;
+        margin-top: 20rpx;
+        border-radius: 10rpx;
+      }
+    }
+  }
+  .md-tag {
+    background: #e8fffb;
+    color: #0fc6c2;
+    margin: 10rpx 0;
+    font-weight: 400;
+    font-size: 24rpx;
+    padding: 6rpx 0rpx;
+    .tag-before {
+      background: #0fc6c2;
+      color: #fff;
+      font-size: 24rpx;
+      font-weight: 500;
+      padding: 4rpx 8rpx;
+      border-radius: 4rpx;
+      margin-right: 10rpx;
+    }
+  }
+  .foot-desc {
+    .item {
+      font-size: 24rpx;
+      color: #95969d;
+      margin: 10rpx 0;
+    }
+  }
+}
+</style>
diff --git a/src/pages/serviceSite/serviceSite.vue b/src/pages/serviceSite/serviceSite.vue
new file mode 100644
index 0000000..549d48a
--- /dev/null
+++ b/src/pages/serviceSite/serviceSite.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import SiteItem from './components/siteItem.vue'
+const activeMenuKey = ref(0)
+const menuList = [
+  {
+    id: 1,
+    name: '地区',
+  },
+  {
+    id: 2,
+    name: '回收品类',
+  },
+  {
+    id: 3,
+    name: '服务',
+  },
+  {
+    id: 4,
+    name: '筛选',
+  },
+]
+type siteParams = {
+  page: Number
+  pageSize: Number
+  menuState: String
+}
+// 请求参数
+const queryParams: Required<siteParams> = {
+  page: 1,
+  pageSize: 5,
+  menuState: '1',
+}
+
+// 获取订单列表
+const dataList = ref<any[]>([])
+// 是否加载中标记，用于防止滚动触底触发多次请求
+const isLoading = ref(false)
+// 是否分页结束
+const isFinish = ref(false)
+
+const getDataList = async () => {
+  // 如果数据出于加载中，退出函数
+  if (isLoading.value) return
+  // 退出分页判断
+  if (isFinish.value === true) {
+    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
+  }
+  // 发送请求前，标记为加载中
+  isLoading.value = true
+  // 发送请求
+  // const res = await getMemberOrderAPI(queryParams)
+  const res = await new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const data = [
+        {
+          id: 1,
+        },
+        {
+          id: 2,
+        },
+        {
+          id: 3,
+        },
+        {
+          id: 4,
+        },
+        {
+          id: 5,
+        },
+        {
+          id: 6,
+        },
+        {
+          id: 7,
+        },
+        {
+          id: 8,
+        },
+      ]
+      const obj = {
+        result: data,
+        pages: 4,
+      }
+      resolve(obj)
+    }, 100)
+  })
+  // 发送请求后，重置标记
+  isLoading.value = false
+  // 数组追加
+  dataList.value.push(...res.result)
+  // 分页条件
+  if (queryParams.page < res.result.pages) {
+    // 页码累加
+    queryParams.page++
+  } else {
+    // 分页已结束
+    isFinish.value = true
+  }
+}
+const isTriggered = ref(false)
+// 自定义下拉刷新被触发
+const onRefresherrefresh = async () => {
+  // 开始动画
+  isTriggered.value = true
+  // 重置数据
+  queryParams.page = 1
+  dataList.value = []
+  isFinish.value = false
+  // 加载数据
+  await getDataList()
+  // 关闭动画
+  isTriggered.value = false
+}
+const handleMenuChange = (val) => {
+  activeMenuKey.value = val
+  getDataList()
+}
+onMounted(() => {
+  getDataList()
+})
+</script>
+<template>
+  <view class="service-site">
+    <view class="menu-list">
+      <view
+        class="item"
+        @tap="handleMenuChange(index)"
+        :class="{ active: activeMenuKey == index }"
+        v-for="(item, index) in menuList"
+        :key="item.id"
+        >{{ item.name }} >
+      </view>
+    </view>
+    <scroll-view
+      enable-back-to-top
+      scroll-y
+      class="scroll-view"
+      :refresher-triggered="isTriggered"
+      @refresherrefresh="onRefresherrefresh"
+      @scrolltolower="getDataListList"
+    >
+      <siteItem class="item" v-for="item in dataList" :key="item.id" />
+    </scroll-view>
+  </view>
+  <!-- 底部占位空盒子 -->
+  <view class="toolbar-height" safe-area-inset-bottom></view>
+</template>
+
+<style lang="scss">
+page {
+  height: 100%;
+}
+.service-site {
+  height: calc(100% - 100rpx);
+  .menu-list {
+    height: 80rpx;
+    line-height: 80rpx;
+    display: flex;
+    justify-content: space-around;
+    .item {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &.active {
+        color: #5386e4;
+      }
+    }
+  }
+  .scroll-view {
+    overflow: auto;
+  }
+}
+// 底部占位空盒子
+.toolbar-height {
+  height: 100rpx;
+}
+</style>
diff --git a/src/pages/siteDetail/siteDetail.vue b/src/pages/siteDetail/siteDetail.vue
new file mode 100644
index 0000000..2a7f762
--- /dev/null
+++ b/src/pages/siteDetail/siteDetail.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const bannerList = [
+  {
+    hrefUrl: '1005000',
+    id: '25',
+    imgUrl:
+      'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/e83efb1b-309c-46f7-98a3-f1fefa694338.jpg',
+    type: '1',
+  },
+  {
+    hrefUrl: '1005000',
+    id: '21',
+    imgUrl:
+      'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg',
+    type: '1',
+  },
+]
+const leiList = [
+  {
+    id: 1,
+    name: '旧衣服',
+  },
+  {
+    id: 2,
+    name: '家用电器',
+  },
+  {
+    id: 2,
+    name: '废纸废书',
+  },
+  {
+    id: 3,
+    name: '废金属',
+  },
+  {
+    id: 4,
+    name: '废塑料',
+  },
+]
+const rateValue = ref(2)
+</script>
+<template>
+  <view class="site-detail">
+    <XtxSwiper :list="bannerList" />
+    <view class="cont">
+      <view class="info">
+        <view class="hd">
+          <view class="name">上海松江区佘山镇</view>
+          <view class="num">1.03km</view>
+        </view>
+        <view class="md">
+          <view class="label">营业时间：</view>
+          <view class="time">09:00 - 18:00</view>
+        </view>
+        <view class="fd">
+          <view class="label">地址：上海市松江区新松江路92弄开元地中海园区</view>
+          <view class="img"></view>
+        </view>
+      </view>
+      <view class="module-menu">
+        <view
+          class="item"
+          @tab="handleMenuChange(index)"
+          :class="{ active: activeMenuKey == index }"
+          v-for="(item, index) in leiList"
+          :key="item.id"
+          >{{ item.name }}</view
+        >
+      </view>
+      <view class="detail-list">
+        <view class="item arrow flex-row">
+          <view class="service-title">服务</view>
+          <view class="tag-list">
+            <view class="tag">上门服务</view>
+            <view class="tag">家电维修</view>
+            <view class="tag">品控质检</view>
+          </view>
+        </view>
+        <view class="item flex-column rate">
+          <view class="service-title">评分</view>
+          <uni-rate active-color="#FF7D00" v-model="rateValue" />
+        </view>
+        <view class="item flex-column activity">
+          <view class="activity-title">活动</view>
+          <view class="activity-list">
+            <view class="activity-item">会员价</view>
+            <view class="activity-item">赠送积分</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<style lang="scss" scoped>
+.site-detail {
+  background: #f2f2fa;
+  .cont {
+    background-color: #fff;
+    margin: 32rpx;
+    padding: 16rpx;
+    min-height: 80vh;
+    .info {
+      padding: 20rpx 0;
+      box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);
+      .hd {
+        display: flex;
+        justify-content: space-between;
+        .name {
+          font-size: 30rpx;
+          font-weight: 500;
+          color: #0d0d26;
+        }
+        .num {
+          font-size: 28rpx;
+          color: #95969d;
+        }
+      }
+      .md {
+        margin: 10rpx 0;
+        font-size: 24rpx;
+        color: #95969d;
+        display: flex;
+      }
+      .fd {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .label {
+          font-size: 24rpx;
+        }
+        .img {
+          width: 72rpx;
+          height: 72rpx;
+          border-radius: 50%;
+          background-color: #3a82fb;
+        }
+      }
+    }
+    .module-menu {
+      display: flex;
+      padding: 36rpx 0rpx;
+      box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);
+      .item {
+        flex: 1;
+        color: #95969d;
+        padding: 10rpx 0;
+        border-radius: 10rpx;
+        text-align: center;
+        &.active {
+          background: #fff7e8;
+        }
+      }
+    }
+
+    /* 列表 */
+    .detail-list {
+      padding: 0 20rpx;
+      background-color: #fff;
+      margin-bottom: 20rpx;
+      border-radius: 10rpx;
+      .item {
+        // line-height: 90rpx;
+        padding-left: 10rpx;
+        font-size: 30rpx;
+        color: #333;
+        border-bottom: 1rpx solid #ddd;
+        position: relative;
+        text-align: left;
+        border-radius: 0;
+        background-color: #fff;
+        display: flex;
+        &::after {
+          width: auto;
+          height: auto;
+          left: auto;
+          border: none;
+        }
+        // &:first-child {
+        //   border: none;
+        // }
+        &::after {
+          right: 5rpx;
+        }
+        &.flex-column {
+          flex-direction: column;
+          &:first-child {
+          }
+        }
+        &.rate {
+          line-height: 90rpx;
+          padding-bottom: 20rpx;
+        }
+
+        &.flex-row {
+          line-height: 90rpx;
+          flex-direction: row;
+        }
+        .tag-list {
+          display: flex;
+          margin-left: 20rpx;
+          .tag {
+            color: #95969d;
+            font-size: 24rpx;
+          }
+        }
+        &.activity {
+          margin: 20rpx 0;
+          .activity-list {
+            display: flex;
+            .activity-item {
+              margin: 20rpx 10rpx;
+              &:first-child {
+                background: #484540;
+                padding: 4rpx 6rpx;
+                border-radius: 10rpx;
+                color: #ffe6b5;
+                font-size: 24rpx;
+              }
+              &:last-child {
+                padding: 4rpx 6rpx;
+                border-radius: 10rpx;
+                color: #ffb739;
+                border: 2rpx solid #ffb739;
+                font-size: 24rpx;
+              }
+            }
+          }
+        }
+      }
+      .arrow::after {
+        content: '\e6c2';
+        position: absolute;
+        top: 50%;
+        color: #ccc;
+        font-family: 'erabbit' !important;
+        font-size: 32rpx;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+</style>