fix: 修复首页导航栏与系统胶囊按钮重叠问题
移除与微信胶囊按钮冲突的设置按钮，使用 getMenuButtonBoundingClientRect 正确计算导航栏占位高度。统一首页卡片样式与其他页面一致。 Made-with: Cursor
This commit is contained in:
nepiedg
+57
-54
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user