From f2424a41d4a84ca9fa336efd25fecd6d9243d114 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Sat, 19 Apr 2025 18:09:30 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E5=A4=8D=E7=A9=BA=E6=A0=BC?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E5=B9=B6=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复了 `uv-grid-item` 标签与 `@click` 事件之间的空格问题，并优化了页面样式，包括调整布局、添加阴影效果和动画，提升用户体验。
---
 pages/index/center.vue |   4 +-
 pages/index/index.vue  | 810 +++++++++++++++++++++++++++----------------------
 2 files changed, 452 insertions(+), 362 deletions(-)

diff --git a/pages/index/center.vue b/pages/index/center.vue
index 3677522..1b332a3 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -93,12 +93,12 @@
 						<text class="grid-text">邀请好友</text>
 					</uv-grid-item>
 				
-					<uv-grid-item@click="$utils.navigateTo('/pages_order/center/systemSet')">
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/center/systemSet')">
 						<image class="image" src="/static/image/center/6.png" mode=""></image>
 						<text class="grid-text">系统设置</text>
 					</uv-grid-item>
 				
-					<uv-grid-item@click="$utils.navigateTo('/pages_order/center/help')">
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/center/help')">
 						<image class="image" src="/static/image/center/7.png" mode=""></image>
 						<text class="grid-text">帮助与反馈</text>
 					</uv-grid-item>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index dcca45f..e126cdc 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,368 +1,458 @@
 <template>
-	<view class="page">
-		<view class="red-top">
-			<view class="building-title">
-				<view class="title-right">
-					建材
-				</view>
-				<view class="title-left">
-					寻找你想要的建材材料
-				</view>
-			</view>
-			<view class="building-search">
-				<view class="address">
-					<image src="../../static/image/home/1.png" mode=""></image>
-					<view class="eare">
-						<text>深圳</text>
-					</view>
-					<view class="down-arrow"></view>
-				</view>
-				<view class="search">
-					<!-- DC2828 -->
-					<uv-search bgColor="#ffffff"  placeholder="搜索材料" inputAlign="left" height="70" showAction="false"></uv-search>
-				</view>
-			</view>
-		</view>
-		
-		<view class="image-home">
-			<uv-swiper 
-				class="uv-swaip"
-				height="350rpx"
-				:list="list" 
-				circular 
-				bgColor="#ffffff">
-			</uv-swiper>
-		</view>
-		
-		<view class="building-class">
-			<view style="width: 710rpx;">
-				<uv-grid :col="4" :border="false">
-					<uv-grid-item>
-						<image class="image" src="../../static/image/home/3.png" mode=""></image>
-						<text class="grid-text">XX建材</text>
-					</uv-grid-item>
-			
-					<uv-grid-item>
-						<image class="image" src="../../static/image/home/4.png" mode=""></image>
-						<text class="grid-text">XX建材</text>
-					</uv-grid-item>
-			
-					<uv-grid-item >
-						<image class="image" src="../../static/image/home/5.png" mode=""></image>
-						<text class="grid-text">XX建材</text>
-					</uv-grid-item>
-			
-					<uv-grid-item>
-						<image class="image" src="../../static/image/home/6.png" mode=""></image>
-						<text class="grid-text">XX建材</text>
-					</uv-grid-item>
-				</uv-grid>
-			</view>
-		</view>
-		<view class="hot-building">
-			<text>热卖建材</text>
-		</view>
-		
-		<view class="hot-building"
-		@click="toUrl"
-		style="position: fixed;right: 30rpx;
-		top: 40vh;z-index: 99;">
-			<view class="new-message">
-				你有一条新的快捷下单信息
-			</view>
-			<view class="quick-order">
-				<view class="number-order">
-					1
-				</view>
-				<image src="../../static/image/home/7.png" mode=""></image>
-			</view>
-		</view>
-		
-		<view class="shop-list"
-		v-for="(item, index) in 20"
-		@click="toGoodInfo(item,index)"
-		:key="index">
-			<view class="picture-shop">
-				<image src="../../static/image/home/8.png" mode=""></image>
-			</view>
-			<view class="price-shop">
-				<view class="top-shop">
-					<text>泰山工装石膏板</text>
-					<view class="tag-shop">
-						<uv-tags text="建材材料" type="warning" plain size="mini"></uv-tags>
-						<uv-tags text="快速下单" type="warning" plain size="mini"></uv-tags>
-					</view>
-				</view>
-				<view class="bottom-price">
-					<text style="font-size: 40rpx; ">￥38</text>.00元/米
-				</view>
-			</view>
-			<view class="buy-shop">
-				<uv-button  :custom-style="customStyle" type="primary" shape="circle" text="立即购买" ></uv-button>
-			</view>
-		</view>
-		<PrivacyAgreementPoup/>
-		
-		<tabber select="0"/>
-	</view>
+    <view class="page">
+        <view class="red-top">
+            <view class="building-title">
+                <view class="title-right">
+                    建材
+                </view>
+                <view class="title-left">
+                    寻找你想要的建材材料
+                </view>
+            </view>
+            <view class="building-search">
+                <view class="address">
+                    <image src="../../static/image/home/1.png" mode=""></image>
+                    <view class="eare">
+                        <text>深圳</text>
+                    </view>
+                    <view class="down-arrow"></view>
+                </view>
+                <view class="search">
+                    <!-- DC2828 -->
+                    <uv-search bgColor="#ffffff" placeholder="搜索材料" inputAlign="left" height="70"
+                        showAction="false"></uv-search>
+                </view>
+            </view>
+        </view>
+
+        <view class="image-home">
+            <uv-swiper class="uv-swaip" height="350rpx" :list="list" circular bgColor="#ffffff">
+            </uv-swiper>
+        </view>
+
+        <view class="building-class">
+            <view style="width: 710rpx;">
+                <uv-grid :col="4" :border="false">
+                    <uv-grid-item>
+                        <image class="image" src="../../static/image/home/3.png" mode=""></image>
+                        <text class="grid-text">XX建材</text>
+                    </uv-grid-item>
+
+                    <uv-grid-item>
+                        <image class="image" src="../../static/image/home/4.png" mode=""></image>
+                        <text class="grid-text">XX建材</text>
+                    </uv-grid-item>
+
+                    <uv-grid-item>
+                        <image class="image" src="../../static/image/home/5.png" mode=""></image>
+                        <text class="grid-text">XX建材</text>
+                    </uv-grid-item>
+
+                    <uv-grid-item>
+                        <image class="image" src="../../static/image/home/6.png" mode=""></image>
+                        <text class="grid-text">XX建材</text>
+                    </uv-grid-item>
+                </uv-grid>
+            </view>
+        </view>
+        <view class="hot-building">
+            <text>热卖建材</text>
+        </view>
+
+        <view class="quick-order-container" @click="toUrl">
+            <view class="new-message">
+                你有一条新的快捷下单信息
+            </view>
+            <view class="quick-order">
+                <view class="number-order">
+                    1
+                </view>
+                <image src="../../static/image/home/7.png" mode=""></image>
+            </view>
+        </view>
+
+        <view class="shop-list" v-for="(item, index) in 20" @click="toGoodInfo(item, index)" :key="index">
+            <view class="picture-shop">
+                <image src="../../static/image/home/8.png" mode=""></image>
+            </view>
+            <view class="price-shop">
+                <view class="top-shop">
+                    <text>泰山工装石膏板</text>
+                    <view class="tag-shop">
+                        <uv-tags text="建材材料" type="warning" plain size="mini"></uv-tags>
+                        <uv-tags text="快速下单" type="warning" plain size="mini"></uv-tags>
+                    </view>
+                </view>
+                <view class="bottom-price">
+                    <text style="font-size: 40rpx; ">￥38</text>.00元/米
+                </view>
+            </view>
+            <view class="buy-shop">
+                <uv-button 
+                type="primary" 
+                shape="circle" 
+                text="立即购买"></uv-button>
+            </view>
+        </view>
+        <PrivacyAgreementPoup />
+
+        <tabber select="0" />
+    </view>
 </template>
 
 <script>
-	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
-	import tabber from '@/components/base/tabbar.vue'
-	export default {
-		components : {
-			tabber,
-			PrivacyAgreementPoup,
-		},
-		data() {
-			return {
-				keyword:'',
-				list: [
-					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-					
-				]
-			}
-		},
-		computed : {
-			customStyle(){
-				return{
-						height: '60rpx',
-						background: '#EB553B',
-						color: '#fff',
-						borderRadius: '40rpx' ,//圆角
-						// nvue中必须是下方的写法
-						'border-top-right-radius': '40rpx',
-						'border-bottom-left-radius': '40rpx',
-						'border-bottom-right-radius': '40rpx'
-				}
-			}
-		},
-		methods: {
-			toUrl(){
-				uni.navigateTo({
-					url: '/pages_order/order/fastCreateOrder'
-				})
-				// this.$utils.navigateTo('/pages_order/mine/address')
-			},
-			toGoodInfo(item,index){
-				// uni.navigateTo({
-					// url: `/pages_order/order/product/productDetail?id=`+item.id
-				// })
-				uni.navigateTo({
-					url: '/pages_order/product/productDetail'
-				})
-			},
-		}
-	}
+import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
+import tabber from '@/components/base/tabbar.vue'
+export default {
+    components: {
+        tabber,
+        PrivacyAgreementPoup,
+    },
+    data() {
+        return {
+            keyword: '',
+            list: [
+                'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+                'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+                'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+
+            ]
+        }
+    },
+    computed: {
+    },
+    methods: {
+        toUrl() {
+            uni.navigateTo({
+                url: '/pages_order/order/fastCreateOrder'
+            })
+            // this.$utils.navigateTo('/pages_order/mine/address')
+        },
+        toGoodInfo(item, index) {
+            // uni.navigateTo({
+            // url: `/pages_order/order/product/productDetail?id=`+item.id
+            // })
+            uni.navigateTo({
+                url: '/pages_order/product/productDetail'
+            })
+        },
+    }
+}
 </script>
 
 <style scoped lang="scss">
-	.red-top{
-		position: relative;
-		height: 420rpx;
-		background: $uni-color;
-		border-bottom-left-radius: 100rpx;
-		border-bottom-right-radius: 100rpx;
-		z-index: -1;
-		.building-title{
-			position: absolute;
-			height: 100rpx;
-			width: 100%;
-			margin-top: 100rpx;
-			.title-right{
-				color: $uni-bg-color;
-				height: 100rpx;
-				line-height: 100rpx;
-				font-size: 45rpx;
-				font-weight: 900;
-				margin-left: 30rpx;
-				display: inline-block;
-			}
-			.title-left{
-				display: inline-block;
-				margin-left: 30rpx;
-				font-size: 22rpx;
-				color: $uni-bg-color;
-			}
-		}
-		.building-search{
-			position: absolute;
-			height: 100rpx;
-			width: 100%;
-			margin-top: 200rpx;
-			// background-color: black;
-			.address{
-				height: 100rpx;
-				width: 150rpx;
-				position: relative;
-				image{
-					position: absolute;
-					height: 20rpx;
-					width: 15rpx;
-					line-height: 20rpx;
-					left: 40rpx;
-					top: 42rpx;
-				}
-				.eare{
-					width: 100rpx;
-					height: 100rpx;
-					line-height: 100rpx;
-					margin-left:60rpx;
-					color: $uni-bg-color;
-				}
-				.down-arrow:after {
-				  content: "";
-				  display: inline-block;
-				  width: 0;
-				  height: 0;
-				  border-left: 10rpx solid transparent;
-				  border-right: 10rpx solid transparent;
-				  border-top:15rpx solid $uni-bg-color;
-				  margin-top: 5rpx;
-				  position: absolute;
-				  top: 42rpx;
-				  left: 130rpx;
-				}
-			}
-			.search{
-				display: inline-block;
-				position: absolute;
-				top: 16rpx;
-				left: 26%;
-				width: 70%;
-			}
-			
-		}
-	}
-	.image-home{
-		z-index: 1;
-		height: 350rpx;
-		margin: 0 20rpx;
-		margin-top: -90rpx;
-		border-radius: 10rpx;
-		overflow: hidden;                                              
-	}
-	.building-class{
-		height: 220rpx;
-		display: flex;
-		justify-content: space-around;
-		align-items: center; /* 垂直居中 */
-		background-color: $uni-bg-color;
-		image{
-			margin-left: 20rpx;
-			margin-right: 20rpx;
-			margin-bottom: 10rpx;
-			width: 100rpx;
-			height: 100rpx;
-			display: inline-block;
-			
-		}
-	}
-	.text-building{
-		display: flex;
-		justify-content: space-around;
-		align-items: center; /* 垂直居中 */
-		background-color: $uni-bg-color;
-		text-align: center;
-		font-weight: 500;
-		margin-bottom: -30rpx;
-		padding-bottom: 40rpx;
-		// overflow: hidden;
-	}
-	.hot-building{
-		margin-top: 25rpx;
-		height: 0rpx;
-		background-color: $uni-bg-color;
-		display: flex;
-		align-items: center;
-		padding-left: 40rpx;
-		font-size: 35rpx;
-		font-weight: 400;
-		
-	}
-	.new-message{
-		background-color: #DC2828;
-		border-radius: 20rpx;
-		font-size: 25rpx;
-		color: $uni-bg-color;
-		padding: 0 10rpx;
-		margin-top: 500rpx;
-	}
-	.quick-order{
-		position: relative;
-		width: 230rpx;
-		height: 160rpx;		
-		margin-right: -50rpx;
-		margin-top: 500rpx;
-		image{
-			width: 100%;
-			height: 100%;
-			
-		}
-		.number-order{
-			background-color: #DC2828;
-			position: absolute;
-			font-size: 30rpx;
-			height: 40rpx;
-			width: 40rpx;
-			text-align: center;
-			border-radius: 20rpx;
-			color: #ffffff;
-			top: 10rpx;
-			left: 25rpx;
-		}
-	}
-	.shop-list{
-		width: 95%;
-		height: 222rpx;
-		display: flex;
-		margin: 30rpx auto;
-		background-color: #ffffff;
-		border-radius: 20rpx;
-		// /deep/
-		.picture-shop{
-			width: 240rpx;
-			height: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			image{
-				width: 200rpx;
-				height: 150rpx;
-			}
-		}
-		.price-shop{
-			width: 250rpx;
-			height: 100%;
-			.top-shop{
-				height: 100rpx;
-				width: 100%;
-				font-size: 33rpx;
-				margin-top: 30rpx;
-				text-align: center;
-				.tag-shop{
-					display: flex;
-					justify-content: space-around;
-				}
-			}
-			.bottom-price{
-				display: inline-block;
-				color: #DC2828;
-				height: 80rpx;
-				width: 250rpx;
-				line-height: 100rpx;
-			}
-		}
-		.buy-shop{
-			height: 100%;
-			width: 250rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	
-	}
+.red-top {
+    position: relative;
+    height: 420rpx;
+    background: linear-gradient(to bottom, $uni-color, #f05a45);
+    border-bottom-left-radius: 100rpx;
+    border-bottom-right-radius: 100rpx;
+    z-index: -1;
+
+    .building-title {
+        position: absolute;
+        height: 100rpx;
+        width: 100%;
+        margin-top: 100rpx;
+
+        .title-right {
+            color: $uni-bg-color;
+            height: 100rpx;
+            line-height: 100rpx;
+            font-size: 45rpx;
+            font-weight: 900;
+            margin-left: 30rpx;
+            display: inline-block;
+        }
+
+        .title-left {
+            display: inline-block;
+            margin-left: 30rpx;
+            font-size: 22rpx;
+            color: $uni-bg-color;
+        }
+    }
+
+    .building-search {
+        position: absolute;
+        height: 100rpx;
+        width: 100%;
+        margin-top: 200rpx;
+
+        // background-color: black;
+        .address {
+            height: 100rpx;
+            width: 150rpx;
+            position: relative;
+            display: flex;
+            align-items: center;
+
+            image {
+                position: absolute;
+                height: 20rpx;
+                width: 15rpx;
+                line-height: 20rpx;
+                left: 40rpx;
+                top: 42rpx;
+            }
+
+            .eare {
+                width: 100rpx;
+                height: 100rpx;
+                line-height: 100rpx;
+                margin-left: 60rpx;
+                color: $uni-bg-color;
+            }
+
+            .down-arrow:after {
+                content: "";
+                display: inline-block;
+                width: 0;
+                height: 0;
+                border-left: 10rpx solid transparent;
+                border-right: 10rpx solid transparent;
+                border-top: 15rpx solid $uni-bg-color;
+                margin-top: 5rpx;
+                position: absolute;
+                top: 42rpx;
+                left: 130rpx;
+            }
+        }
+
+        .search {
+            display: inline-block;
+            position: absolute;
+            top: 16rpx;
+            left: 26%;
+            width: 70%;
+
+            :deep(.uv-search__content) {
+                box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
+            }
+        }
+
+    }
+}
+
+.image-home {
+    z-index: 1;
+    height: 350rpx;
+    margin: 0 20rpx;
+    margin-top: -90rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.building-class {
+    height: 220rpx;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    /* 垂直居中 */
+    background-color: $uni-bg-color;
+    margin: 20rpx 0;
+    border-radius: 20rpx;
+    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
+
+    image {
+        margin-left: 20rpx;
+        margin-right: 20rpx;
+        margin-bottom: 10rpx;
+        width: 100rpx;
+        height: 100rpx;
+        display: inline-block;
+        transition: transform 0.3s;
+
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+
+    :deep(.grid-text) {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333;
+    }
+}
+
+.text-building {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    /* 垂直居中 */
+    background-color: $uni-bg-color;
+    text-align: center;
+    font-weight: 500;
+    margin-bottom: -30rpx;
+    padding-bottom: 40rpx;
+    // overflow: hidden;
+}
+
+.hot-building {
+    margin-top: 25rpx;
+    height: 80rpx;
+    background-color: $uni-bg-color;
+    display: flex;
+    align-items: center;
+    padding-left: 40rpx;
+    font-size: 35rpx;
+    font-weight: 600;
+    color: #333;
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 40rpx;
+        bottom: 15rpx;
+        width: 60rpx;
+        height: 6rpx;
+        background-color: $uni-color;
+        border-radius: 3rpx;
+    }
+}
+
+.quick-order-container {
+    position: fixed;
+    right: 30rpx;
+    top: 40vh;
+    z-index: 99;
+    transition: transform 0.3s;
+
+    &:active {
+        transform: scale(0.95);
+    }
+}
+
+.new-message {
+    position: absolute;
+    top: 50rpx;
+    right: 100%;
+    white-space: nowrap;
+    background-color: #DC2828;
+    border-radius: 20rpx;
+    font-size: 25rpx;
+    color: $uni-bg-color;
+    padding: 5rpx 15rpx;
+    margin-bottom: 10rpx;
+    box-shadow: 0 5rpx 10rpx rgba(220, 40, 40, 0.3);
+    animation: pulse 2s infinite;
+}
+
+.quick-order {
+    position: relative;
+    width: 230rpx;
+    height: 160rpx;
+
+    image {
+        width: 100%;
+        height: 100%;
+
+    }
+
+    .number-order {
+        background-color: #DC2828;
+        position: absolute;
+        font-size: 30rpx;
+        height: 40rpx;
+        width: 40rpx;
+        text-align: center;
+        border-radius: 20rpx;
+        color: #ffffff;
+        top: 10rpx;
+        left: 25rpx;
+    }
+}
+
+.shop-list {
+    width: 95%;
+    height: 222rpx;
+    display: flex;
+    margin: 30rpx auto;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
+    transition: transform 0.3s, box-shadow 0.3s;
+
+    &:active {
+        transform: translateY(2rpx);
+        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+    }
+
+    // /deep/
+    .picture-shop {
+        width: 240rpx;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        image {
+            width: 200rpx;
+            height: 150rpx;
+        }
+    }
+
+    .price-shop {
+        width: 250rpx;
+        height: 100%;
+
+        .top-shop {
+            height: 100rpx;
+            width: 100%;
+            font-size: 30rpx;
+            margin-top: 20rpx;
+            text-align: center;
+            font-weight: 600;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            .tag-shop {
+                display: flex;
+                justify-content: space-around;
+                margin-top: 10rpx;
+            }
+
+            .bottom-price {
+                display: inline-block;
+                color: #DC2828;
+                height: 80rpx;
+                width: 250rpx;
+                line-height: 100rpx;
+            }
+        }
+
+        .buy-shop {
+            height: 100%;
+            width: 250rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            :deep(.uv-button) {
+                transition: transform 0.2s;
+                &:active {
+                    transform: scale(0.95);
+                }
+            }
+        }
+
+    }
+
+    @keyframes pulse {
+        0% {
+            transform: scale(1);
+        }
+
+        50% {
+            transform: scale(1.05);
+        }
+
+        100% {
+            transform: scale(1);
+        }
+    }
+}
 </style>