fix(mine): 修复我的页面背景,添加顶部暖橙色渐变

- 页面背景改为 #F3F3F3
- 顶部添加从 #FFEFDE 到 #F3F3F3 的渐变背景层
- 移除自定义导航栏,使用系统导航栏
- 菜单列表去掉白色卡片包裹,改为透明背景
This commit is contained in:
zpc 2026-02-20 22:46:57 +08:00
parent 33f806c180
commit d35fbe319a

View File

@ -1,11 +1,7 @@
<template>
<view class="mine-page">
<!-- 自定义导航栏 -->
<view class="custom-navbar" :style="navbarStyle">
<view class="navbar-content" :style="{ height: navbarHeight + 'px' }">
<text class="navbar-title">我的</text>
</view>
</view>
<!-- 顶部渐变背景层 -->
<view class="top-gradient"></view>
<!-- 导航栏占位 -->
<view class="navbar-placeholder" :style="{ height: totalNavbarHeight + 'px' }"></view>
@ -115,7 +111,7 @@ import { useUserStore } from '@/store/user.js'
import { useNavbar } from '@/composables/useNavbar.js'
const userStore = useUserStore()
const { statusBarHeight, navbarHeight, totalNavbarHeight } = useNavbar()
const { totalNavbarHeight } = useNavbar()
// 退
const logoutPopupVisible = ref(false)
@ -131,12 +127,6 @@ const userInfo = computed(() => ({
avatar: userStore.avatar
}))
//
const navbarStyle = computed(() => ({
paddingTop: statusBarHeight.value + 'px',
height: totalNavbarHeight.value + 'px'
}))
/**
* 点击用户区域
*/
@ -278,46 +268,40 @@ onMounted(() => {
.mine-page {
min-height: 100vh;
background-color: $bg-color;
background-color: #F3F3F3;
position: relative;
}
//
.custom-navbar {
position: fixed;
//
.top-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: $bg-white;
z-index: 999;
.navbar-content {
display: flex;
align-items: center;
justify-content: center;
.navbar-title {
font-size: 34rpx;
font-weight: $font-weight-medium;
color: $text-color;
}
}
height: 500rpx;
background: linear-gradient(177deg, #FFEFDE 1%, #F3F3F3 28%);
z-index: 0;
}
.navbar-placeholder {
width: 100%;
position: relative;
z-index: 1;
}
//
.page-content {
padding: $spacing-lg;
padding-bottom: env(safe-area-inset-bottom);
position: relative;
z-index: 1;
}
//
.user-section {
display: flex;
align-items: center;
padding: $spacing-xl $spacing-lg;
padding: $spacing-xl 0;
margin-bottom: $spacing-lg;
.user-avatar {
@ -325,7 +309,6 @@ onMounted(() => {
height: 120rpx;
border-radius: 50%;
margin-right: $spacing-lg;
background-color: $bg-gray;
}
.user-info {
@ -354,21 +337,18 @@ onMounted(() => {
//
.menu-section {
margin-bottom: $spacing-lg;
margin-bottom: $spacing-xl;
.section-title {
display: block;
font-size: $font-size-lg;
font-weight: $font-weight-bold;
color: $text-color;
padding: 0 $spacing-sm;
margin-bottom: $spacing-md;
}
.menu-list {
background-color: $bg-white;
border-radius: $border-radius-lg;
overflow: hidden;
background-color: transparent;
}
}
@ -376,15 +356,10 @@ onMounted(() => {
.menu-item {
display: flex;
align-items: center;
padding: $spacing-lg;
border-bottom: 1rpx solid $border-light;
&:last-child {
border-bottom: none;
}
padding: $spacing-lg 0;
&:active {
background-color: $bg-gray;
opacity: 0.7;
}
.menu-icon {