7fa691bbaf
将个人中心、引导页从深色主题改为浅绿渐变主题,与首页、统计、AI助手、记录页保持一致的视觉风格。更新 App.vue 全局样式和 pages.json 导航栏配色。 Made-with: Cursor
190 lines
2.6 KiB
Vue
190 lines
2.6 KiB
Vue
<script>
|
|
import { login, isLoggedIn } from '@/api/auth'
|
|
|
|
export default {
|
|
globalData: {
|
|
loginReady: false,
|
|
loginPromise: null
|
|
},
|
|
|
|
onLaunch: function() {
|
|
console.log('App Launch')
|
|
this.globalData.loginPromise = this.initLogin()
|
|
},
|
|
|
|
onShow: function() {
|
|
console.log('App Show')
|
|
},
|
|
|
|
onHide: function() {
|
|
console.log('App Hide')
|
|
},
|
|
|
|
methods: {
|
|
async initLogin() {
|
|
try {
|
|
if (!isLoggedIn()) {
|
|
console.log('未登录,开始静默登录...')
|
|
await login()
|
|
console.log('静默登录成功')
|
|
} else {
|
|
console.log('已登录')
|
|
}
|
|
this.globalData.loginReady = true
|
|
return true
|
|
} catch (e) {
|
|
console.error('静默登录失败:', e)
|
|
this.globalData.loginReady = true
|
|
return false
|
|
}
|
|
},
|
|
|
|
waitForLogin() {
|
|
return this.globalData.loginPromise
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
|
|
color: #111827;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.container {
|
|
padding: 32rpx;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
border: 2rpx solid #ECFDF3;
|
|
box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
|
|
}
|
|
|
|
.card-light {
|
|
background-color: #F0FDF4;
|
|
}
|
|
|
|
.text-primary {
|
|
color: #10B981;
|
|
}
|
|
|
|
.text-secondary {
|
|
color: #6B7280;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-bold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.gap-sm {
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.gap-md {
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.gap-lg {
|
|
gap: 32rpx;
|
|
}
|
|
|
|
.mt-sm {
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.mt-md {
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.mt-lg {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.mb-sm {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.mb-md {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.mb-lg {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 96rpx;
|
|
border-radius: 48rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #10B981;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #FFFFFF;
|
|
color: #111827;
|
|
border: 2rpx solid #E5E7EB;
|
|
}
|
|
|
|
.btn-outline {
|
|
background-color: transparent;
|
|
color: #10B981;
|
|
border: 2rpx solid #10B981;
|
|
}
|
|
|
|
.safe-area-bottom {
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
</style>
|