From 107ab36a80d9170cea947de99ee71186aab73839 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Tue, 8 Apr 2025 22:01:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=89=B9=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/infinite/bonus_house_details.vue | 113 +++++++++++++++++++++----
 uni.scss                               |   1 +
 2 files changed, 99 insertions(+), 15 deletions(-)

diff --git a/pages/infinite/bonus_house_details.vue b/pages/infinite/bonus_house_details.vue
index c3a2fbf..912a3a0 100644
--- a/pages/infinite/bonus_house_details.vue
+++ b/pages/infinite/bonus_house_details.vue
@@ -47,22 +47,16 @@
 						</view>
 					</view>
 				</view>
-				<view class="" style="width: 544rpx; height: 500rpx;  margin: 0 auto 0;">
-
-					<swiper class="swiper-box" :current="currentItemId" :style="{ height: '500rpx' }" :autoplay="false"
+				<view class="swiper-container">
+					<swiper class="swiper-box" :current="currentItemId" :autoplay="false"
 						@change="handleSwiperChange" :indicator-dots="false" :circular="true" :interval="3000">
 						<swiper-item v-for="(item, index) in goodsList" :key="index" :item-id="item.index">
-
-							<view
-								style="display: flex; justify-content: center; align-items: center; height:75%;margin-top: 10rpx;">
-								<view
-									style="background-image: url('https://mh.shhuanmeng.com/flw_bj.png');background-size: 100% 100%; width: 280rpx; height:352rpx; display: flex; justify-content: center; align-items: center;z-index: 2;">
-									<image :src="item.imgurl_detail" style="width:154rpx; height:166rpx;"></image>
+							<view class="swiper-item-content">
+								<view class="item-background">
+									<image :src="item.imgurl_detail" class="item-image"></image>
 								</view>
 							</view>
-							<view
-								style="background-image: url('https://mh.shhuanmeng.com/flw_dibu.png');background-size: 100% 100%;width: 100%; height: 122rpx;position: relative;top:-15%;z-index: 1;">
-							</view>
+							<view class="item-bottom"></view>
 						</swiper-item>
 					</swiper>
 				</view>
@@ -125,10 +119,9 @@
 		<view class="column align-center"
 			style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
 
-			<view class="center"
-				style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;"
+			<view class="participation-button"
 				@click="handleButtonClick">
-				<text style="color: #333333; font-size: 32rpx; font-weight: 600;">{{ buttonText }}</text>
+				<text class="button-text">{{ buttonText }}</text>
 			</view>
 			<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">{{ remainingTime
 			}}</text>
@@ -695,4 +688,94 @@ export default {
 	background-image: url($imgurl + 'checkin/ic_share.png');
 	background-size: 100% 100%;
 }
+
+.swiper-container {
+	width: 544rpx;
+	height: 500rpx;
+	margin: 0 auto;
+}
+
+.swiper-box {
+	height: 500rpx;
+}
+
+.swiper-item-content {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 75%;
+	margin-top: 10rpx;
+}
+
+.item-background {
+	background-image: url($baseurl +'flw_bj.png');
+	background-size: 100% 100%;
+	width: 280rpx;
+	height: 352rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 2;
+}
+
+.item-image {
+	width: 154rpx;
+	height: 166rpx;
+}
+
+.item-bottom {
+	background-image: url($baseurl +'flw_dibu.png');
+	background-size: 100% 100%;
+	width: 100%;
+	height: 122rpx;
+	position: relative;
+	top: -15%;
+	z-index: 1;
+}
+
+.participation-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 340rpx;
+	height: 84rpx;
+	background-color: #D8FD24;
+	border-radius: 16rpx;
+	margin-top: 32rpx;
+	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+	transition: all 0.2s ease;
+	position: relative;
+	overflow: hidden;
+	
+	&:active {
+		transform: scale(0.95);
+		background-color: #c5e822;
+		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+	}
+	
+	&::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 100rpx;
+		height: 100rpx;
+		background-color: rgba(255, 255, 255, 0.4);
+		border-radius: 50%;
+		transform: translate(-50%, -50%) scale(0);
+		opacity: 0;
+		transition: all 0.3s ease-out;
+	}
+	
+	&:active::after {
+		transform: translate(-50%, -50%) scale(5);
+		opacity: 0;
+	}
+}
+
+.button-text {
+	color: #333333;
+	font-size: 32rpx;
+	font-weight: 600;
+}
 </style>
\ No newline at end of file
diff --git a/uni.scss b/uni.scss
index 1f2bb90..9603e54 100644
--- a/uni.scss
+++ b/uni.scss
@@ -16,6 +16,7 @@
 
 $imgurl:'https://image.zfunbox.cn/static/web/static/';
 $iconurl:'https://image.zfunbox.cn/icon/';
+$baseurl:'https://image.zfunbox.cn/';
 //https://mh.shhuanmeng.com/static/web/static/common/box.png
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;