From 539296f5998f41f3f83c5425a9a5828f9d7b027e Mon Sep 17 00:00:00 2001
From: nepiedg <806669289@qq.com>
Date: Wed, 4 Mar 2026 00:29:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E4=B8=8E=E7=B3=BB=E7=BB=9F=E8=83=B6?=
 =?UTF-8?q?=E5=9B=8A=E6=8C=89=E9=92=AE=E9=87=8D=E5=8F=A0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除与微信胶囊按钮冲突的设置按钮，使用 getMenuButtonBoundingClientRect 正确计算导航栏占位高度。统一首页卡片样式与其他页面一致。

Made-with: Cursor
---
 pages/index/index.vue | 111 ++++++++++++++++++++++--------------------
 1 file changed, 57 insertions(+), 54 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8f3b951..ee56cfa 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="page">
-		<!-- 状态栏占位 -->
-		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+		<!-- 自定义导航栏占位（状态栏 + 胶囊按钮区域） -->
+		<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
 		
 		<view v-if="loading" class="skeleton">
 			<view class="skeleton-header"></view>
@@ -20,9 +20,6 @@
 						<text class="greeting-sub">{{ greetingSubtitle }}</text>
 					</view>
 				</view>
-				<view class="settings-btn" @tap="goSettings">
-					<text>⚙️</text>
-				</view>
 			</view>
 
 			<view v-if="shouldShowAiTip" class="ai-tip">
@@ -109,7 +106,7 @@ const { waitForLogin } = useLogin()
 
 const loading = ref(true)
 const showAiTip = ref(true)
-const statusBarHeight = ref(0)
+const navBarHeight = ref(0)
 const showDialog = ref(false)
 const dialogType = ref('smoke') // 'smoke' 或 'resisted'
 const homeData = ref(null)
@@ -302,9 +299,14 @@ async function handleSubmit(submitData) {
 }
 
 async function initPage() {
-	// 获取状态栏高度
 	const systemInfo = uni.getSystemInfoSync()
-	statusBarHeight.value = systemInfo.statusBarHeight || 0
+	const statusBarH = systemInfo.statusBarHeight || 0
+	try {
+		const menuBtn = uni.getMenuButtonBoundingClientRect()
+		navBarHeight.value = menuBtn.bottom + (menuBtn.top - statusBarH)
+	} catch (e) {
+		navBarHeight.value = statusBarH + 44
+	}
 	
 	loading.value = true
 
@@ -337,10 +339,6 @@ async function initPage() {
 	}
 }
 
-function goSettings() {
-	uni.switchTab({ url: '/pages/profile/index' })
-}
-
 function closeAiTip() {
 	showAiTip.value = false
 }
@@ -357,16 +355,17 @@ onUnmounted(() => {
 <style scoped>
 .page {
 	min-height: 100vh;
-	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%);
+	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
 	box-sizing: border-box;
 }
 
-.status-bar {
-	background: linear-gradient(to bottom, #D1FAE5, #D1FAE5);
+.nav-placeholder {
+	background: linear-gradient(to bottom, #D1FAE5, #E9FDF2);
 }
 
 .dashboard {
 	padding: 32rpx;
+	padding-bottom: 160rpx;
 }
 
 .skeleton {
@@ -381,7 +380,7 @@ onUnmounted(() => {
 .skeleton-timer,
 .skeleton-cards,
 .skeleton-buttons {
-	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
+	background: linear-gradient(90deg, #D1FAE5 25%, #ECFDF5 50%, #D1FAE5 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
 	border-radius: 24rpx;
@@ -415,14 +414,14 @@ onUnmounted(() => {
 	width: 80rpx;
 	height: 80rpx;
 	border-radius: 50%;
-	background-color: #F3F4F6;
-	border: 2rpx solid #E5E7EB;
+	background-color: #ECFDF5;
+	border: 4rpx solid #A7F3D0;
 }
 
 .greeting-text {
 	font-size: 36rpx;
 	font-weight: 600;
-	color: #1F2937;
+	color: #111827;
 	display: block;
 }
 
@@ -433,36 +432,28 @@ onUnmounted(() => {
 	margin-top: 4rpx;
 }
 
-.settings-btn {
-	width: 64rpx;
-	height: 64rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 40rpx;
-}
-
 .ai-tip {
 	display: flex;
 	align-items: flex-start;
 	gap: 24rpx;
 	background-color: #FFFFFF;
-	border: 2rpx solid #10B981;
+	border: 2rpx solid #D9FBE7;
 	border-radius: 24rpx;
-	padding: 32rpx;
+	padding: 28rpx;
 	margin-bottom: 24rpx;
-	box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.1);
+	box-shadow: 0 10rpx 20rpx rgba(16, 185, 129, 0.1);
 }
 
 .ai-tip-icon {
 	font-size: 36rpx;
-	background-color: #10B981;
+	background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
 	width: 64rpx;
 	height: 64rpx;
-	border-radius: 50%;
+	border-radius: 20rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	box-shadow: 0 8rpx 16rpx rgba(16, 185, 129, 0.2);
 }
 
 .ai-tip-content { flex: 1; }
@@ -470,7 +461,7 @@ onUnmounted(() => {
 .ai-tip-title {
 	font-size: 28rpx;
 	font-weight: 600;
-	color: #1F2937;
+	color: #111827;
 	display: block;
 	margin-bottom: 8rpx;
 }
@@ -483,15 +474,20 @@ onUnmounted(() => {
 }
 
 .ai-tip-close {
-	font-size: 40rpx;
+	font-size: 36rpx;
 	color: #9CA3AF;
 	padding: 8rpx;
+	width: 48rpx;
+	height: 48rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .timer-section {
 	display: flex;
 	justify-content: center;
-	padding: 32rpx 0;
+	padding: 24rpx 0 32rpx;
 }
 
 .timer-ring {
@@ -507,9 +503,10 @@ onUnmounted(() => {
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
-	border: 16rpx solid #E5E7EB;
+	border: 16rpx solid #D1FAE5;
 	box-sizing: border-box;
 	background-color: #FFFFFF;
+	box-shadow: 0 12rpx 32rpx rgba(16, 185, 129, 0.1);
 }
 
 .timer-ring-progress {
@@ -534,7 +531,7 @@ onUnmounted(() => {
 
 .timer-label {
 	font-size: 24rpx;
-	color: #6B7280;
+	color: #64748B;
 	display: block;
 	margin-bottom: 16rpx;
 }
@@ -542,7 +539,7 @@ onUnmounted(() => {
 .timer-value {
 	font-size: 64rpx;
 	font-weight: 700;
-	color: #1F2937;
+	color: #111827;
 	display: block;
 	font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
 	letter-spacing: 2rpx;
@@ -553,9 +550,10 @@ onUnmounted(() => {
 	align-items: center;
 	justify-content: center;
 	margin-top: 20rpx;
-	background-color: #D1FAE5;
+	background-color: #ECFDF5;
 	padding: 12rpx 24rpx;
 	border-radius: 32rpx;
+	border: 2rpx solid #D1FAE5;
 }
 
 .next-time-text {
@@ -574,7 +572,8 @@ onUnmounted(() => {
 	background-color: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 24rpx;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 10rpx 22rpx rgba(16, 185, 129, 0.08);
 }
 
 .stat-dot {
@@ -589,7 +588,7 @@ onUnmounted(() => {
 
 .stat-label {
 	font-size: 24rpx;
-	color: #6B7280;
+	color: #64748B;
 	display: block;
 	margin-bottom: 8rpx;
 }
@@ -605,42 +604,45 @@ onUnmounted(() => {
 .stat-value {
 	font-size: 48rpx;
 	font-weight: 700;
-	color: #1F2937;
+	color: #111827;
 }
 
 .stat-target,
 .stat-unit {
 	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #94A3B8;
 }
 
 .stat-change {
 	font-size: 20rpx;
 	padding: 4rpx 12rpx;
-	border-radius: 8rpx;
+	border-radius: 999rpx;
 	margin-left: auto;
+	font-weight: 600;
 }
 
 .stat-change-down {
-	background-color: rgba(16, 185, 129, 0.1);
-	color: #10B981;
+	background-color: #E8FFF1;
+	color: #16A34A;
+	border: 2rpx solid #BBF7D0;
 }
 
 .stat-change-up {
-	background-color: rgba(239, 68, 68, 0.1);
+	background-color: #FEF2F2;
 	color: #EF4444;
+	border: 2rpx solid #FECACA;
 }
 
 .stat-progress {
 	height: 8rpx;
-	background-color: #F3F4F6;
-	border-radius: 4rpx;
+	background-color: #F1F5F9;
+	border-radius: 999rpx;
 	overflow: hidden;
 }
 
 .stat-progress-bar {
 	height: 100%;
-	border-radius: 4rpx;
+	border-radius: 999rpx;
 	transition: width 0.3s ease;
 }
 
@@ -662,18 +664,19 @@ onUnmounted(() => {
 	border-radius: 48rpx;
 	font-size: 30rpx;
 	font-weight: 500;
-	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 }
 
 .action-btn-primary {
 	background-color: #10B981;
 	color: #FFFFFF;
+	box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.25);
 }
 
 .action-btn-secondary {
 	background-color: #FFFFFF;
-	color: #1F2937;
-	border: 2rpx solid #E5E7EB;
+	color: #111827;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
 }
 
 .action-icon {