diff --git a/components.d.ts b/components.d.ts
index 99c6524..060eda8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,7 +8,20 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    HomeGoodsItem: typeof import('./components/guyu-home-container/home-goods-item.vue')['default']
+    HomeNotice: typeof import('./components/guyu-home-container/home-notice.vue')['default']
+    HomeRecommend: typeof import('./components/guyu-home-container/home-recommend.vue')['default']
+    HomeSearch: typeof import('./components/guyu-home-container/home-search.vue')['default']
+    HomeSwiper: typeof import('./components/guyu-home-container/home-swiper.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ZPaging: typeof import('./components/z-paging/z-paging.vue')['default']
+    ZPagingCell: typeof import('./components/z-paging-cell/z-paging-cell.vue')['default']
+    ZPagingEmptyView: typeof import('./components/z-paging-empty-view/z-paging-empty-view.vue')['default']
+    ZPagingLoadMore: typeof import('./components/z-paging/components/z-paging-load-more.vue')['default']
+    ZPagingRefresh: typeof import('./components/z-paging/components/z-paging-refresh.vue')['default']
+    ZPagingSwiper: typeof import('./components/z-paging-swiper/z-paging-swiper.vue')['default']
+    ZPagingSwiperItem: typeof import('./components/z-paging-swiper-item/z-paging-swiper-item.vue')['default']
+    ZTabs: typeof import('./components/z-tabs/z-tabs.vue')['default']
   }
 }
diff --git a/components/guyu-home-container/home-goods-item.vue b/components/guyu-home-container/home-goods-item.vue
new file mode 100644
index 0000000..42e5923
--- /dev/null
+++ b/components/guyu-home-container/home-goods-item.vue
@@ -0,0 +1,43 @@
+<template>
+    <view class=""
+        style="height: 490.28rpx; background-color: #FEF6D6; border: 3rpx solid #F9D051; border-radius: 40rpx;display: flex; flex-direction: column;">
+        <view class=""
+            style="width: 100%; height: 320.83rpx; background-color: #FFFFFF;border-radius: 40rpx 40rpx 0 0; ">
+            <!-- <image :src="goodsItem.imgUrl" mode=""></image> -->
+        </view>
+
+        <text class="myZt-500w"
+            style="width: 280.56rpx; margin: 15.28rpx auto; font-size: 25rpx; color: #685952;
+                display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{
+                goodsItem.title }}
+        </text>
+
+        <text class="myZt-300w"
+            style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
+
+        <view class="" style="display: flex; flex-direction: row; margin-left: 20.31rpx;">
+            <text class="myZt-500w" style="font-size: 29.17rpx; color: #87644E;">￥{{ goodsItem.price }}</text>
+            <text class="myZt-500w" style="font-size: 19.44rpx; color: #87644E; margin-top: 10rpx;"> /
+                包</text>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    goodsItem: {
+        type: Object,
+        required: true,
+        default: () => ({
+            title: '',
+            imgUrl: '',
+            price: '0',
+        })
+    }
+});
+</script>
+
+<style lang="scss">
+</style> 
\ No newline at end of file
diff --git a/components/guyu-home-container/home-notice.vue b/components/guyu-home-container/home-notice.vue
new file mode 100644
index 0000000..f619126
--- /dev/null
+++ b/components/guyu-home-container/home-notice.vue
@@ -0,0 +1,39 @@
+<template>
+    <view class=""
+        style="width:100%; height: 57.64rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 20rpx; margin-top: 33.33rpx; display: flex; align-items: center;">
+        <image src="@@:static/ic_notice.png" style="width: 23.61rpx; height: 22.92rpx; margin-left: 24.31rpx;"
+            mode=""></image>
+        <view class="news-text">
+            <uni-notice-bar scrollable single :style="{ width: `100%` }" :speed="8"
+                background-color="transparent" color="#6B5E4B" v-if="noticeInfo"
+                :text="noticeInfo"></uni-notice-bar>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue';
+
+const props = defineProps({
+    noticeInfo: {
+        type: String,
+        default: ''
+    }
+});
+</script>
+
+<style lang="scss">
+.news-text {
+    width: 600rpx;
+    height: 57.64rpx;
+    display: flex;
+    align-items: center;
+    margin-left: 18rpx;
+    padding-top: 20rpx;
+
+    ::v-deep.uni-noticebar__content-text {
+        font-size: 22.22rpx;
+        font-family: "JiangChengYuanTi-300W", sans-serif;
+    }
+}
+</style> 
\ No newline at end of file
diff --git a/components/guyu-home-container/home-recommend.vue b/components/guyu-home-container/home-recommend.vue
new file mode 100644
index 0000000..8424787
--- /dev/null
+++ b/components/guyu-home-container/home-recommend.vue
@@ -0,0 +1,34 @@
+<template>
+    <view class="" v-if="recList && recList.length > 0"
+        style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top: 29.86rpx;">
+        <view class="" v-for="(item, index) in recList" :key="index" @click="handleItemClick(index)"
+            style="display: flex; flex-direction: column; justify-content: center;">
+            <image :src="item.imageUrl"
+                style="width: 159.72rpx; height: 159.72rpx; background-color: #FDF4D5; border-radius: 40rpx;">
+            </image>
+            <text class="myZt-500w"
+                style="text-align: center; margin-top: 13.19rpx; font-size: 22.22rpx; color: #685952; width: 159.72rpx; text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;">{{
+                    item.name }}</text>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+    recList: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['itemClick']);
+
+const handleItemClick = (index) => {
+    emit('itemClick', index);
+};
+</script>
+
+<style lang="scss">
+</style> 
\ No newline at end of file
diff --git a/components/guyu-home-container/home-search.vue b/components/guyu-home-container/home-search.vue
new file mode 100644
index 0000000..e6edbbe
--- /dev/null
+++ b/components/guyu-home-container/home-search.vue
@@ -0,0 +1,15 @@
+<template>
+    <view class="" style="width: 100%; margin-top: 96.53rpx;">
+        <view class=""
+            style="width: 450.56rpx; height: 71.53rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 50rpx;  display: flex; align-items: center;">
+            <image src="@@:static/ic_search.png" style="width: 28.47rpx; height: 28.47rpx; margin-left: 25rpx;" mode="">
+            </image>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/components/guyu-home-container/home-swiper.vue b/components/guyu-home-container/home-swiper.vue
new file mode 100644
index 0000000..7bde089
--- /dev/null
+++ b/components/guyu-home-container/home-swiper.vue
@@ -0,0 +1,26 @@
+<template>
+    <view class="" style="width: 100%; margin-top: 30.56rpx; ">
+        <swiper v-if="advertList && advertList.length > 0" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
+            :circular="true" style="height: 300rpx;">
+            <swiper-item v-for="(item, index) in advertList" :key="index">
+                <view class="" style="background-color: #F5D677; width: 100%; height: 300rpx;">
+                    <image :src="item.imageUrl" style="width: 100%; height: 300rpx;"></image>
+                </view>
+            </swiper-item>
+        </swiper>
+    </view>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue';
+
+const props = defineProps({
+    advertList: {
+        type: Array,
+        default: () => []
+    }
+});
+</script>
+
+<style lang="scss">
+</style> 
\ No newline at end of file
diff --git a/pages/home/home-page.vue b/pages/home/home-page.vue
index c758b18..5634caf 100644
--- a/pages/home/home-page.vue
+++ b/pages/home/home-page.vue
@@ -1,58 +1,16 @@
 <template>
-	
+
 	<view class="content" style="background-color: #FFFDF6;">
-		<image src="@@:static/bg.png" style="width: 620.83rpx; height: 100%; position: absolute;" mode=""></image>
-		<view class="content" style="position: absolute;">
+		<!-- <image src="@@:static/bg.png" style="width: 620.83rpx; height: 100%; position: absolute;" mode=""></image> -->
+		<view class="content">
 			<!-- 搜索 -->
-			<view class="" style="width: 100%; margin-top: 96.53rpx;">
-				<view class=""
-					style="width: 450.56rpx; height: 71.53rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 50rpx;  display: flex; align-items: center;">
-					<image src="@@:static/ic_search.png" style="width: 28.47rpx; height: 28.47rpx; margin-left: 25rpx;"
-						mode=""></image>
-				</view>
-			</view>
+			<home-search style="width: 100%;" />
 			<!-- 公告 -->
-			<view class=""
-				style="width:100%; height: 57.64rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 20rpx; margin-top: 33.33rpx; display: flex; align-items: center;">
-				<image src="@@:static/ic_notice.png" style="width: 23.61rpx; height: 22.92rpx; margin-left: 24.31rpx;"
-					mode=""></image>
-				<view class="news-text">
-					<uni-notice-bar scrollable single :style="{ width: `100%` }" :speed="8"
-						background-color="transparent" color="#6B5E4B" v-if="homeData"
-						:text="homeData.noticeInfo"></uni-notice-bar>
-				</view>
-			</view>
-
+			<home-notice :notice-info="homeData?.noticeInfo" />
 			<!-- 轮播图 -->
-			<view class="" style="width: 100%; margin-top: 30.56rpx; ">
-				<swiper v-if="homeData" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
-					:circular="true">
-					<swiper-item v-for="(item, index) in homeData.advertList" :key="index">
-						<view class="" style="background-color: #F5D677; width: 100%; height: 300rpx;">
-							<image :src="item.imageUrl" style="width: 100%;height: 300rpx;"></image>
-						</view>
-					</swiper-item>
-				</swiper>
-			</view>
-
-			<!-- 固定四个 -->
-			<view class="" v-if="homeData"
-				style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top: 29.86rpx;">
-
-				<view class="" v-for="(item, index) in homeData.recList" :key="index"
-					@click="toDetails(dataList[index].id)"
-					style="display: flex; flex-direction: column; justify-content: center;">
-					<image :src="item.imageUrl"
-						style="width: 159.72rpx; height: 159.72rpx; background-color: #FDF4D5; border-radius: 40rpx;">
-					</image>
-					<text class="myZt-500w"
-						style="text-align: center; margin-top: 13.19rpx; font-size: 22.22rpx; color: #685952; width: 159.72rpx; text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;">{{
-							item.name }}</text>
-
-				</view>
-
-			</view>
-
+			<home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
+			<!-- 推荐位 -->
+			<home-recommend :rec-list="homeData?.recList" @item-click="toDetails" style="width: 100%;" />
 
 			<!-- tab -->
 			<view class="" style="width: 100%; display: flex; flex-direction: row; margin-top: 32.64rpx;">
@@ -63,46 +21,11 @@
 				</view>
 			</view>
 
-
 			<!-- 商品列表 -->
-
 			<view class="grid-container">
-				<view class="" v-for="(item, index) in goodsLsit" :key="index"
-					style="height: 490.28rpx; background-color: #FEF6D6; border: 3rpx solid #F9D051; border-radius: 40rpx;display: flex; flex-direction: column;">
-					<view class=""
-						style="width: 100%; height: 320.83rpx; background-color: #FFFFFF;border-radius: 40rpx 40rpx 0 0; ">
-						<!-- <image :src="item.imgUrl" mode=""></image> -->
-					</view>
-
-					<text class="myZt-500w"
-						style="width: 280.56rpx; margin: 15.28rpx auto; font-size: 25rpx; color: #685952;
-						  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{
-							item.title }}
-					</text>
-
-
-					<text class="myZt-300w"
-						style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
-
-					<view class="" style="display: flex; flex-direction: row; margin-left: 20.31rpx;">
-						<text class="myZt-500w" style="font-size: 29.17rpx; color: #87644E;">￥{{ item.price }}</text>
-						<text class="myZt-500w" style="font-size: 19.44rpx; color: #87644E; margin-top: 10rpx;"> /
-							包</text>
-					</view>
-
-				</view>
-
-
+				<home-goods-item v-for="(item, index) in goodsLsit" :key="index" :goods-item="item" />
 			</view>
-
-
-
 		</view>
-
-
-
-
-
 	</view>
 </template>
 
@@ -115,6 +38,12 @@ import {
 	preloadHomeData,
 	refreshHomeData
 } from '@/common/server/home';
+import HomeSearch from '@/components/guyu-home-container/home-search.vue';
+import HomeNotice from '@/components/guyu-home-container/home-notice.vue';
+import HomeSwiper from '@/components/guyu-home-container/home-swiper.vue';
+import HomeRecommend from '@/components/guyu-home-container/home-recommend.vue';
+import HomeGoodsItem from '@/components/guyu-home-container/home-goods-item.vue';
+
 onLoad(() => {
 
 });
@@ -123,57 +52,7 @@ onMounted(() => {
 	if (!homeData.value) preloadHomeData();
 });
 const currendIndex = ref(0);
-const swiperList = ref([1, 2, 3, 4]);
 
-const dataList = reactive([
-	{
-		id: 1,
-		title: "坂本日常",
-		color: "#90BB76",
-		url: ""
-	},
-	{
-		id: 1,
-		title: "坂本日常",
-		color: "#FDA6AA",
-		url: ""
-	},
-	{
-		id: 1,
-		title: "坂本日常",
-		color: "#96ABEB",
-		url: ""
-	},
-	{
-		id: 1,
-		title: "坂本日常",
-		color: "#F9D051",
-		url: ""
-	}
-]);
-
-const tabList = reactive([
-	{
-		id: 1,
-		title: "全部"
-	},
-	{
-		id: 1,
-		title: "吧唧"
-	},
-	{
-		id: 1,
-		title: "立牌"
-	},
-	{
-		id: 1,
-		title: "色纸"
-	},
-	{
-		id: 1,
-		title: "拍立得"
-	}
-]);
 
 const goodsLsit = reactive([
 	{
@@ -283,21 +162,6 @@ const toDetails = (id) => {
 	flex-direction: column;
 	position: relative;
 	align-items: center;
-
-}
-
-.news-text {
-	width: 600rpx;
-	height: 57.64rpx;
-	display: flex;
-	align-items: center;
-	margin-left: 18rpx;
-	padding-top: 20rpx;
-
-	::v-deep.uni-noticebar__content-text {
-		font-size: 22.22rpx;
-		font-family: "JiangChengYuanTi-300W", sans-serif;
-	}
 }
 
 .grid-container {
diff --git a/vite.config.js b/vite.config.js
index dedeb30..0725d95 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -69,7 +69,7 @@ export default defineConfig({
 		// 自动导入组件
 		Components({
 			dirs: [
-				'components/guyu-container',
+				'components/**/*',
 			], // 指定组件目录
 			extensions: ['vue'],
 			dts: true, // 生成类型声明文件（可选）