优化个人中心页面：实现玻璃态卡片效果、3D悬浮动效和流动导航指示器

- 增强玻璃态卡片效果：半透明背景+模糊效果+精致边框+内层高光 - 添加3D悬浮动效：所有卡片支持点击缩放和阴影变化，光晕扫过动画 - 优化底部导航栏：胶囊式设计+流动选中指示器，平滑过渡动画 - 提升整体视觉体验：轻盈高级的玻璃质感，流畅的交互动效

优化个人中心页面：实现玻璃态卡片效果、3D悬浮动效和流动导航指示器
- 增强玻璃态卡片效果：半透明背景+模糊效果+精致边框+内层高光 - 添加3D悬浮动效：所有卡片支持点击缩放和阴影变化，光晕扫过动画 - 优化底部导航栏：胶囊式设计+流动选中指示器，平滑过渡动画 - 提升整体视觉体验：轻盈高级的玻璃质感，流畅的交互动效
“wangming”
1 parent 844ae2b7
Showing 2 changed files with 167 additions and 21 deletions
绿纤uni-app/components/custom-tab-bar/index.vue
绿纤uni-app/pages/me/me.vue
 <template>
 	<view class="tab-block">
 		<view class='tab-list flex flex-center' :class="showMiddleButton === true?'tab-list-middle':'tab-list-default'">
+			<!-- 流动选中指示器 -->
+			<view class="tab-indicator" :style="{ left: indicatorLeft + 'px', width: indicatorWidth + 'px' }"></view>
 			<view v-for="(item, index) in tabList"
 				:class="'list-item flex flex-column flex-middle ' + item.middleClass"
 				@tap="handlePush(item, index)"
-				:key="index">
+				:key="index"
+				:ref="'tabItem' + index">
 				<view class="item-img-box">
 					<image
 						class="item-img"
@@ -84,7 +87,42 @@
 				return matchedIndex >= 0 ? matchedIndex : 0;
 			}
 		},
+		mounted() {
+			this.updateIndicator()
+		},
+		watch: {
+			currentTabIndex() {
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.updateIndicator()
+					}, 100)
+				})
+			}
+		},
 		methods: {
+			// 更新流动指示器位置
+			updateIndicator() {
+				this.$nextTick(() => {
+					try {
+						const query = uni.createSelectorQuery().in(this)
+						query.select('.tab-list').boundingClientRect((tabListRect) => {
+							query.selectAll('.list-item').boundingClientRect((rects) => {
+								if (rects && rects.length > 0 && this.currentTabIndex >= 0 && this.currentTabIndex < rects.length) {
+									const currentRect = rects[this.currentTabIndex]
+									
+									if (currentRect && tabListRect) {
+										// 计算指示器的位置和宽度
+										this.indicatorWidth = currentRect.width * 0.6
+										this.indicatorLeft = currentRect.left - tabListRect.left + (currentRect.width - this.indicatorWidth) / 2
+									}
+								}
+							}).exec()
+						}).exec()
+					} catch (e) {
+						console.error('更新指示器失败:', e)
+					}
+				})
+			},
 			// 点击按钮
 			handlePush(item, index) {			
 				if (this.currentTabIndex !== index) {
@@ -134,29 +172,60 @@
 		.tab-list{
 			height: 120rpx;
 		}
-		.tab-list-default{
-			background-color: rgba(255, 255, 255, 0.85);
-			border-radius: 28rpx;
-			box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.1);
-			backdrop-filter: blur(10rpx);
-		}
+	.tab-list-default{
+		background: rgba(255, 255, 255, 0.7);
+		backdrop-filter: blur(20px) saturate(180%);
+		-webkit-backdrop-filter: blur(20px) saturate(180%);
+		border-radius: 28rpx;
+		box-shadow: 0rpx 8rpx 32rpx rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
+		border: 1px solid rgba(255, 255, 255, 0.4);
+		position: relative;
+		transition: all 0.3s ease;
+	}
 		.tab-list-middle {
 			position: relative;
 			background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
 			background-size: cover;
 		}
+		/* 流动选中指示器 */
+		.tab-indicator {
+			position: absolute;
+			bottom: 8rpx;
+			height: 4rpx;
+			background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%);
+			border-radius: 2rpx;
+			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+			box-shadow: 0 2rpx 8rpx rgba(67, 160, 71, 0.4);
+			z-index: 1;
+		}
+
 		.list-item {
 			flex: 1;
+			position: relative;
+			z-index: 2;
+			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+			
 			.item-img-box {
 				width: 40rpx;
 				height: 40rpx;
 				margin-bottom: 6rpx;
 				position: relative;
+				transition: transform 0.3s ease;
 			}
 			.item-img {
 				width: 40rpx;
 				height: 40rpx;
+				transition: transform 0.3s ease;
+			}
+
+			/* 3D悬浮动效 */
+			&:active {
+				transform: translateY(-2rpx) scale(0.95);
+				
+				.item-img-box {
+					transform: scale(1.1);
+				}
 			}
 		}
@@ -691,14 +691,40 @@ export default {
 }
 .warpboxss {
-	background-color: rgba(255, 255, 255, 0.4);
-	backdrop-filter: blur(16px) saturate(180%);
-	-webkit-backdrop-filter: blur(16px) saturate(180%);
+	background: rgba(255, 255, 255, 0.25);
+	backdrop-filter: blur(20px) saturate(180%);
+	-webkit-backdrop-filter: blur(20px) saturate(180%);
 	padding: 30rpx;
 	border-radius: 24rpx;
-	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
-	border: 1px solid rgba(255, 255, 255, 0.125);
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
+	border: 1px solid rgba(255, 255, 255, 0.4);
 	margin-bottom: 24rpx;
+	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	transform: translateY(0) scale(1);
+	position: relative;
+	overflow: hidden;
+}
+
+/* 3D悬浮动效 - 所有卡片 */
+.warpboxss::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: -100%;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+	transition: left 0.6s ease;
+}
+
+.warpboxss:active {
+	transform: translateY(-4rpx) scale(0.98);
+	box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
+	border-color: rgba(255, 255, 255, 0.5);
+}
+
+.warpboxss:active::before {
+	left: 100%;
 }
 .warpboxs-small-title {
@@ -847,12 +873,17 @@ export default {
 }
 .kpi-card {
-	background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
+	background: linear-gradient(135deg, rgba(76, 175, 80, 0.85) 0%, rgba(102, 187, 106, 0.85) 100%);
+	backdrop-filter: blur(20px) saturate(180%);
+	-webkit-backdrop-filter: blur(20px) saturate(180%);
 	border-radius: 24rpx;
 	padding: 40rpx 30rpx;
-	box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
+	box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
+	border: 1px solid rgba(255, 255, 255, 0.3);
 	position: relative;
 	overflow: hidden;
+	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	transform: translateY(0) scale(1);
 	&::before {
 		content: '';
@@ -861,13 +892,25 @@ export default {
 		right: -50%;
 		width: 200%;
 		height: 200%;
-		background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+		background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
+		transition: transform 0.6s ease;
+	}
+
+	&:active {
+		transform: translateY(-6rpx) scale(0.97);
+		box-shadow: 0 16rpx 48rpx rgba(76, 175, 80, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
+	}
+
+	&:active::before {
+		transform: rotate(180deg);
 	}
 	.kpi-title {
 		font-size: 26rpx;
-		color: rgba(255, 255, 255, 0.9);
+		color: rgba(255, 255, 255, 0.95);
 		margin-bottom: 16rpx;
+		position: relative;
+		z-index: 1;
 	}
 	.kpi-value {
@@ -875,6 +918,8 @@ export default {
 		font-weight: 700;
 		color: #ffffff;
 		line-height: 1.2;
+		position: relative;
+		z-index: 1;
 	}
 }
@@ -895,6 +940,13 @@ export default {
 		flex-direction: column;
 		align-items: center;
 		text-align: center;
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		transform: translateY(0) scale(1);
+		cursor: pointer;
+	}
+
+	.small-stat-item:active {
+		transform: translateY(-4rpx) scale(0.95);
 	}
 	.small-stat-icon {
@@ -951,13 +1003,38 @@ export default {
 }
 .data-card {
-	background-color: rgba(255, 255, 255, 0.4);
-	backdrop-filter: blur(16px) saturate(180%);
-	-webkit-backdrop-filter: blur(16px) saturate(180%);
+	background: rgba(255, 255, 255, 0.25);
+	backdrop-filter: blur(20px) saturate(180%);
+	-webkit-backdrop-filter: blur(20px) saturate(180%);
 	border-radius: 24rpx;
 	padding: 30rpx;
-	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
-	border: 1px solid rgba(255, 255, 255, 0.125);
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
+	border: 1px solid rgba(255, 255, 255, 0.4);
+	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	transform: translateY(0) scale(1);
+	position: relative;
+	overflow: hidden;
+}
+
+.data-card::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: -100%;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+	transition: left 0.6s ease;
+}
+
+.data-card:active {
+	transform: translateY(-4rpx) scale(0.98);
+	box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
+	border-color: rgba(255, 255, 255, 0.5);
+}
+
+.data-card:active::before {
+	left: 100%;
 }
 .data-card-title {