From ca70540ff5c49a92d5064bece79f4d98191b8093 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Wed, 23 Jul 2025 23:42:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../guyu-home-container/home-goods-item.vue   | 105 ++++++++++++++----
 .../guyu-home-container/home-notice.vue       |  54 ++++++---
 .../guyu-home-container/home-recommend.vue    |  69 +++++++++---
 .../guyu-home-container/home-search.vue       |  51 +++++++--
 .../guyu-home-container/home-swiper.vue       |  65 +++++++++--
 pages/home/home-page.vue                      |  48 ++++----
 pages/index/index.vue                         |   1 +
 7 files changed, 304 insertions(+), 89 deletions(-)

diff --git a/components/guyu-home-container/home-goods-item.vue b/components/guyu-home-container/home-goods-item.vue
index 42e5923..342c33a 100644
--- a/components/guyu-home-container/home-goods-item.vue
+++ b/components/guyu-home-container/home-goods-item.vue
@@ -1,43 +1,110 @@
 <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 class="goods-item" @click="onItemClick">
+        <view class="goods-image">
+            <image v-if="goodsItem.imgUrl" :src="goodsItem.imgUrl" class="image" mode="aspectFill" />
         </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="goods-title myZt-500w">{{ goodsItem.title }}</text>
 
-        <text class="myZt-300w"
-            style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
+        <text class="goods-status myZt-300w">现货发售中</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 class="goods-price">
+            <text class="price-value myZt-500w">￥{{ goodsItem.price }}</text>
+            <text class="price-unit myZt-500w">/ 包</text>
         </view>
     </view>
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+/**
+ * 商品项组件
+ */
+import { defineProps, defineEmits } from 'vue';
 
+// 组件属性
 const props = defineProps({
+    /**
+     * 商品信息
+     */
     goodsItem: {
         type: Object,
         required: true,
         default: () => ({
+            id: '',
             title: '',
             imgUrl: '',
             price: '0',
+            type: ''
         })
     }
 });
+
+// 事件
+const emit = defineEmits(['click']);
+
+/**
+ * 点击商品项
+ */
+const onItemClick = () => {
+    emit('click', props.goodsItem.id);
+};
 </script>
 
-<style lang="scss">
-</style> 
\ No newline at end of file
+<style lang="scss" scoped>
+.goods-item {
+    height: 490.28rpx;
+    background-color: #FEF6D6;
+    border: 3rpx solid #F9D051;
+    border-radius: 40rpx;
+    display: flex;
+    flex-direction: column;
+    
+    .goods-image {
+        width: 100%;
+        height: 320.83rpx;
+        background-color: #FFFFFF;
+        border-radius: 40rpx 40rpx 0 0;
+        overflow: hidden;
+        
+        .image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    
+    .goods-title {
+        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;
+    }
+    
+    .goods-status {
+        font-size: 19.44rpx;
+        color: #FF6A6A;
+        margin-left: 24.31rpx;
+    }
+    
+    .goods-price {
+        display: flex;
+        flex-direction: row;
+        margin-left: 20.31rpx;
+        
+        .price-value {
+            font-size: 29.17rpx;
+            color: #87644E;
+        }
+        
+        .price-unit {
+            font-size: 19.44rpx;
+            color: #87644E;
+            margin-top: 10rpx;
+        }
+    }
+}
+</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
index f619126..edc659f 100644
--- a/components/guyu-home-container/home-notice.vue
+++ b/components/guyu-home-container/home-notice.vue
@@ -1,20 +1,24 @@
 <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="home-notice">
+        <image src="@@:static/ic_notice.png" class="notice-icon" 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>
+            <uni-notice-bar v-if="noticeInfo" class="news-text-t" scrollable single :text="noticeInfo" :speed="8"
+                background-color="transparent" color="#6B5E4B" />
         </view>
     </view>
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue';
+/**
+ * 首页公告组件
+ */
+import { defineProps } from 'vue';
 
+// 组件属性
 const props = defineProps({
+    /**
+     * 公告内容
+     */
     noticeInfo: {
         type: String,
         default: ''
@@ -22,18 +26,38 @@ const props = defineProps({
 });
 </script>
 
-<style lang="scss">
-.news-text {
-    width: 600rpx;
+<style lang="scss" scoped>
+.home-notice {
+    width: 100%;
     height: 57.64rpx;
+    background-color: #FFFFFF;
+    border: 5rpx solid #F5D677;
+    border-radius: 20rpx;
+    margin-top: 33.33rpx;
     display: flex;
     align-items: center;
-    margin-left: 18rpx;
-    padding-top: 20rpx;
 
-    ::v-deep.uni-noticebar__content-text {
+    .notice-icon {
+        width: 23.61rpx;
+        height: 22.92rpx;
+        margin-left: 24.31rpx;
+    }
+
+    .news-text {
+        width: 600rpx;
+        height: 57.64rpx;
+        display: flex;
+        align-items: center;
+        margin-left: 18rpx;
+        padding-top: 20rpx;
+
+
+    }
+
+    .news-text-t {
         font-size: 22.22rpx;
         font-family: "JiangChengYuanTi-300W", sans-serif;
+        width: 100%;
     }
 }
-</style> 
\ No newline at end of file
+</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
index 8424787..f2871b5 100644
--- a/components/guyu-home-container/home-recommend.vue
+++ b/components/guyu-home-container/home-recommend.vue
@@ -1,34 +1,77 @@
 <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 v-if="recList && recList.length > 0" class="home-recommend">
+        <view 
+            v-for="(item, index) in recList" 
+            :key="index" 
+            class="recommend-item"
+            @click="handleItemClick(index)"
+        >
+            <image :src="item.imageUrl" class="recommend-image" />
+            <text class="recommend-title myZt-500w">{{ item.name }}</text>
         </view>
     </view>
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits } from 'vue';
+/**
+ * 首页推荐位组件
+ */
+import { defineProps, defineEmits } from 'vue';
 
+// 组件属性
 const props = defineProps({
+    /**
+     * 推荐列表
+     */
     recList: {
         type: Array,
         default: () => []
     }
 });
 
+// 事件
 const emit = defineEmits(['itemClick']);
 
+/**
+ * 点击推荐项
+ * @param {Number} index 点击的索引
+ */
 const handleItemClick = (index) => {
     emit('itemClick', index);
 };
 </script>
 
-<style lang="scss">
-</style> 
\ No newline at end of file
+<style lang="scss" scoped>
+.home-recommend {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 29.86rpx;
+    
+    .recommend-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        
+        .recommend-image {
+            width: 159.72rpx;
+            height: 159.72rpx;
+            background-color: #FDF4D5;
+            border-radius: 40rpx;
+        }
+        
+        .recommend-title {
+            margin-top: 13.19rpx;
+            font-size: 22.22rpx;
+            color: #685952;
+            width: 159.72rpx;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
+}
+</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
index e6edbbe..d25878d 100644
--- a/components/guyu-home-container/home-search.vue
+++ b/components/guyu-home-container/home-search.vue
@@ -1,15 +1,52 @@
 <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 class="home-search">
+        <view class="search-box">
+            <image src="@@:static/ic_search.png" class="search-icon" mode=""></image>
+            <input type="text" placeholder="" class="search-input" disabled @click="onSearchClick" />
         </view>
     </view>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+/**
+ * 首页搜索组件
+ */
+import { defineEmits } from 'vue';
+
+// 事件
+const emit = defineEmits(['click']);
+
+// 点击搜索框
+const onSearchClick = () => {
+    emit('click');
+};
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.home-search {
+    width: 100%;
+    margin-top: 96.53rpx;
+    
+    .search-box {
+        width: 450.56rpx;
+        height: 71.53rpx;
+        background-color: #FFFFFF;
+        border: 5rpx solid #F5D677;
+        border-radius: 50rpx;
+        display: flex;
+        align-items: center;
+        
+        .search-icon {
+            width: 28.47rpx;
+            height: 28.47rpx;
+            margin-left: 25rpx;
+        }
+        
+        .search-input {
+            flex: 1;
+            height: 100%;
+            font-size: 28rpx;
+        }
+    }
+}
+</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
index 7bde089..ed0e5e0 100644
--- a/components/guyu-home-container/home-swiper.vue
+++ b/components/guyu-home-container/home-swiper.vue
@@ -1,26 +1,71 @@
 <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>
+    <view class="home-swiper">
+        <swiper 
+            v-if="advertList && advertList.length > 0" 
+            :indicator-dots="false" 
+            :autoplay="true" 
+            :interval="interval"
+            :duration="duration" 
+            :circular="true" 
+            class="swiper-container"
+        >
+            <swiper-item v-for="(item, index) in advertList" :key="index" class="swiper-item">
+                <image :src="item.imageUrl" class="swiper-image" mode="aspectFill"></image>
             </swiper-item>
         </swiper>
     </view>
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue';
+/**
+ * 首页轮播图组件
+ */
+import { defineProps } from 'vue';
 
+// 组件属性
 const props = defineProps({
+    /**
+     * 广告列表
+     */
     advertList: {
         type: Array,
         default: () => []
+    },
+    /**
+     * 轮播间隔时间(ms)
+     */
+    interval: {
+        type: Number,
+        default: 3000
+    },
+    /**
+     * 滑动动画时长(ms)
+     */
+    duration: {
+        type: Number,
+        default: 500
     }
 });
 </script>
 
-<style lang="scss">
-</style> 
\ No newline at end of file
+<style lang="scss" scoped>
+.home-swiper {
+    width: 100%;
+    margin-top: 30.56rpx;
+    
+    .swiper-container {
+        height: 300rpx;
+        
+        .swiper-item {
+            width: 100%;
+            height: 100%;
+            background-color: #F5D677;
+            
+            .swiper-image {
+                width: 100%;
+                height: 300rpx;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/home/home-page.vue b/pages/home/home-page.vue
index 5634caf..847b233 100644
--- a/pages/home/home-page.vue
+++ b/pages/home/home-page.vue
@@ -1,32 +1,29 @@
 <template>
+	<view class="content">
+		<!-- 搜索 -->
+		<home-search style="width: 100%;" />
+		<!-- 公告 -->
+		<home-notice :notice-info="homeData?.noticeInfo" />
+		<!-- 轮播图 -->
+		<home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
+		<!-- 推荐位 -->
+		<home-recommend :rec-list="homeData?.recList" @item-click="toDetails" style="width: 100%;" />
 
-	<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">
-			<!-- 搜索 -->
-			<home-search style="width: 100%;" />
-			<!-- 公告 -->
-			<home-notice :notice-info="homeData?.noticeInfo" />
-			<!-- 轮播图 -->
-			<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;">
-				<view class="" v-for="(item, index) in homeData.categories" :key="index" @click="clickTab(index)"
-					:style="setTabBg(index)"
-					style="padding: 0 16.67rpx 6rpx 16.67rpx ; margin-right: 26.39rpx; border-radius: 50rpx;">
-					<text class="myZt-500w" style=" font-size: 23.61rpx;">{{ item.name }}</text>
-				</view>
-			</view>
-
-			<!-- 商品列表 -->
-			<view class="grid-container">
-				<home-goods-item v-for="(item, index) in goodsLsit" :key="index" :goods-item="item" />
+		<!-- tab -->
+		<view class="" style="width: 100%; display: flex; flex-direction: row; margin-top: 32.64rpx;">
+			<view class="" v-for="(item, index) in homeData.categories" :key="index" @click="clickTab(index)"
+				:style="setTabBg(index)"
+				style="padding: 0 16.67rpx 6rpx 16.67rpx ; margin-right: 26.39rpx; border-radius: 50rpx;">
+				<text class="myZt-500w" style=" font-size: 23.61rpx;">{{ item.name }}</text>
 			</view>
 		</view>
+
+		<!-- 商品列表 -->
+		<view class="grid-container">
+			<home-goods-item v-for="(item, index) in goodsLsit" :key="index" :goods-item="item" />
+		</view>
 	</view>
+
 </template>
 
 <script setup>
@@ -44,6 +41,7 @@ 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(() => {
 
 });
@@ -155,7 +153,7 @@ const toDetails = (id) => {
 
 <style lang="scss">
 .content {
-	width: 693.06rpx;
+	width: 94%;
 	height: 100vh;
 	margin: 0 auto;
 	display: flex;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 0000680..8c00692 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -7,6 +7,7 @@
 
 <script setup>
 import { appInit } from "@/common/system/system";
+
 onLoad(async () => {
 	// 记录开始时间
 	const startTime = Date.now();