8.19更

pages_app/myWelfare/myWelfare.vue

@@ -52,11 +52,12 @@
 					:class="benefit.type"
 					@click="claimBenefit(benefit)"
 				>
-					<view class="card-bg">
-						<view class="human-figure">👥</view>
-					</view>
+				   <view class="card-title">{{ benefit.title }}</view>
+					<!-- <view class="card-bg">
+						
+					</view> -->
 					<view class="card-content">
-						<view class="card-title">{{ benefit.title }}</view>
+						
 						<view class="card-details">
 							<view class="left-section">
 								<text class="condition">{{ benefit.condition }}</text>
@@ -71,27 +72,24 @@
 				</view>
 			</scroll-view>
 		</view>
-
+        <!-- 兑换福利卡 -->
+		<view class="scrollbox">
+		</view>
 		<!-- 底部导航栏 -->
 		<view class="bottom-nav">
 			<view class="nav-item" @click="goPointsDetail">
-				<view class="nav-icon">📋</view>
-				<text class="nav-text">积分详情</text>
-			</view>
-			<view class="nav-item" @click="goBenefitDetail">
-				<view class="nav-icon">🎁</view>
-				<text class="nav-text">福利详情</text>
-			</view>
-			<view class="nav-item" @click="addPatient">
-				<view class="nav-icon">👤+</view>
-				<text class="nav-text">添加患者</text>
+				<up-image  :src="jifenImg" width="34rpx" height="34rpx" ></up-image>
+				<text class="nav-text">兑换福利卡</text>
 			</view>
+			
 		</view>
 	</view>
 </template>
 
 <script setup>
 	import { ref } from 'vue';
+	import jifenImg from "@/static/duihuan.png"
+	
 
 	// 当前选中的标签页
 	const activeTab = ref(0);
@@ -319,8 +317,8 @@
 
 			&.active {
 				.tab-text {
-					color: $theme-color;
-					font-weight: 600;
+					color: #8B2316;
+					
 					font-size: 30rpx;
 				}
 			}
@@ -352,44 +350,41 @@
 			margin-bottom: 30rpx;
 			position: relative;
 			overflow: hidden;
-			@include shadow;
+			border:2rpx solid #fff;
 
 			&.points {
-				background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+				
 			}
 
 			&.video {
-				background: linear-gradient(135deg, #ffa726, #ff9800);
+				
 			}
 
 			&.courseware {
-				background: linear-gradient(135deg, #ab47bc, #8e24aa);
+				
 			}
 
 			&.usb {
-				background: linear-gradient(135deg, #26a69a, #00897b);
+				
 			}
 
 			.card-bg {
 				position: absolute;
 				top: 0;
-				right: 0;
-				width: 200rpx;
-				height: 200rpx;
-				opacity: 0.1;
+				right: 20rpx;
+				left:20rpx;
+			    z-index:0;
+				
+				
 
-				.human-figure {
-					font-size: 120rpx;
-					color: $white;
-					position: absolute;
-					top: 50%;
-					left: 50%;
-					transform: translate(-50%, -50%);
-				}
 			}
 
 			.card-content {
+				margin-top: 30rpx;
+				background:url("@/static/fljifen_big.png") 0 0 no-repeat;
+				background-size: 100% 100%;
 				position: relative;
+				height: 220rpx;
 				z-index: 1;
 
 				.card-title {
@@ -403,8 +398,9 @@
 				.card-details {
 					display: flex;
 					justify-content: space-between;
-					align-items: flex-end;
-
+					align-items: center;
+					padding:0 40rpx;
+                    height: 220rpx;
 					.left-section,
 					.right-section {
 						display: flex;
@@ -414,7 +410,7 @@
 						.condition,
 						.reward-type {
 							font-size: 24rpx;
-							color: rgba(255, 255, 255, 0.8);
+							color: rgba(255, 255, 255, 11);
 						}
 
 						.requirement,
@@ -423,6 +419,9 @@
 							color: $white;
 							font-weight: bold;
 						}
+						.requirement{
+							margin-top: 40rpx;
+						}
 					}
 
 					.right-section {
@@ -439,7 +438,7 @@
 		left: 0;
 		right: 0;
 		z-index: 10;
-		height: 120rpx;
+		height: 100rpx;
 		background-color: #00cbc0;
 		border-top: 1rpx solid $border-color;
 		display: flex;
@@ -449,7 +448,7 @@
 
 		.nav-item {
 			@include flex-center;
-			flex-direction: column;
+			flex-direction: flex;
 			gap: 8rpx;
 
 			.nav-icon {