admin/smt
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: 统一全局界面风格为浅色绿色主题

Browse Source 
将个人中心、引导页从深色主题改为浅绿渐变主题，与首页、统计、AI助手、记录页保持一致的视觉风格。更新 App.vue 全局样式和 pages.json 导航栏配色。

Made-with: Cursor
This commit is contained in:
nepiedg
2026-03-03 22:56:36 +08:00
parent 68874cf893
commit 7fa691bbaf
4 changed files with 75 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.vue
+16 -14
View File
@@ -48,8 +48,8 @@ export default {
<style> <style>
page { page {
background-color: #0D1F17; background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
color: #FFFFFF; color: #111827;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 28rpx; font-size: 28rpx;
line-height: 1.5; line-height: 1.5;
@@ -62,26 +62,28 @@ page {
} }
.card { .card {
background-color: #1A3325; background-color: #FFFFFF;
border-radius: 24rpx; border-radius: 24rpx;
padding: 32rpx; padding: 32rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
border: 2rpx solid #ECFDF3;
box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
} }
.card-light { .card-light {
background-color: #243D2E; background-color: #F0FDF4;
} }
.text-primary { .text-primary {
color: #4ADE80; color: #10B981;
} }
.text-secondary { .text-secondary {
color: #9CA3AF; color: #6B7280;
} }
.text-muted { .text-muted {
color: #6B7280; color: #9CA3AF;
} }
.text-center { .text-center {
@@ -164,20 +166,20 @@ page {
} }
.btn-primary { .btn-primary {
background-color: #4ADE80; background-color: #10B981;
color: #0D1F17; color: #FFFFFF;
} }
.btn-secondary { .btn-secondary {
background-color: #1A3325; background-color: #FFFFFF;
color: #FFFFFF; color: #111827;
border: 2rpx solid #374151; border: 2rpx solid #E5E7EB;
} }
.btn-outline { .btn-outline {
background-color: transparent; background-color: transparent;
color: #4ADE80; color: #10B981;
border: 2rpx solid #4ADE80; border: 2rpx solid #10B981;
} }
.safe-area-bottom { .safe-area-bottom {
pages.json
+3 -3
View File
@@ -46,8 +46,8 @@
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "戒烟助手", "navigationBarTitleText": "戒烟助手",
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#F0FDF4",
"backgroundColor": "#F9FAFB", "backgroundColor": "#F0FDF4",
"backgroundColorTop": "#D1FAE5", "backgroundColorTop": "#D1FAE5",
"backgroundColorBottom": "#FFFFFF" "backgroundColorBottom": "#FFFFFF"
}, },
@@ -55,7 +55,7 @@
"color": "#9CA3AF", "color": "#9CA3AF",
"selectedColor": "#10B981", "selectedColor": "#10B981",
"backgroundColor": "#FFFFFF", "backgroundColor": "#FFFFFF",
"borderStyle": "white", "borderStyle": "black",
"list": [ "list": [
{ {
"pagePath": "pages/index/index", "pagePath": "pages/index/index",
pages/onboarding/index.vue
+34 -26
View File
@@ -199,19 +199,19 @@ onMounted(async () => {
<style scoped> <style scoped>
.page { .page {
min-height: 100vh; min-height: 100vh;
background-color: #0D1F17; background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.progress-bar { .progress-bar {
height: 8rpx; height: 8rpx;
background-color: #1A3325; background-color: #E5E7EB;
} }
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background-color: #4ADE80; background: linear-gradient(90deg, #10B981, #34D399);
transition: width 0.3s ease; transition: width 0.3s ease;
} }
@@ -238,7 +238,7 @@ onMounted(async () => {
.step-title { .step-title {
font-size: 44rpx; font-size: 44rpx;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #111827;
display: block; display: block;
margin-bottom: 16rpx; margin-bottom: 16rpx;
line-height: 1.3; line-height: 1.3;
@@ -246,7 +246,7 @@ onMounted(async () => {
.step-desc { .step-desc {
font-size: 28rpx; font-size: 28rpx;
color: #9CA3AF; color: #6B7280;
display: block; display: block;
margin-bottom: 64rpx; margin-bottom: 64rpx;
} }
@@ -268,25 +268,27 @@ onMounted(async () => {
width: 96rpx; width: 96rpx;
height: 96rpx; height: 96rpx;
border-radius: 50%; border-radius: 50%;
background-color: #1A3325; background-color: #FFFFFF;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 48rpx; font-size: 48rpx;
color: #4ADE80; color: #10B981;
border: 2rpx solid #ECFDF3;
box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.12);
} }
.input-value { .input-value {
font-size: 96rpx; font-size: 96rpx;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #111827;
min-width: 160rpx; min-width: 160rpx;
text-align: center; text-align: center;
} }
.input-unit { .input-unit {
font-size: 28rpx; font-size: 28rpx;
color: #9CA3AF; color: #6B7280;
} }
.options { .options {
@@ -302,11 +304,12 @@ onMounted(async () => {
.option { .option {
padding: 28rpx 36rpx; padding: 28rpx 36rpx;
background-color: #1A3325; background-color: #FFFFFF;
border-radius: 16rpx; border-radius: 16rpx;
font-size: 30rpx; font-size: 30rpx;
color: #FFFFFF; color: #111827;
border: 2rpx solid transparent; border: 2rpx solid #ECFDF3;
box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.06);
} }
.option-tag { .option-tag {
@@ -315,9 +318,9 @@ onMounted(async () => {
} }
.option-active { .option-active {
background-color: rgba(74, 222, 128, 0.15); background-color: #ECFDF5;
border-color: #4ADE80; border-color: #10B981;
color: #4ADE80; color: #059669;
} }
.time-row { .time-row {
@@ -329,27 +332,31 @@ onMounted(async () => {
.time-label { .time-label {
font-size: 26rpx; font-size: 26rpx;
color: #9CA3AF; color: #6B7280;
display: block; display: block;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
.time-picker { .time-picker {
background-color: #1A3325; background-color: #FFFFFF;
padding: 32rpx; padding: 32rpx;
border-radius: 16rpx; border-radius: 16rpx;
font-size: 40rpx; font-size: 40rpx;
color: #FFFFFF; color: #111827;
text-align: center; text-align: center;
border: 2rpx solid #ECFDF3;
box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.06);
} }
.price-input { .price-input {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #1A3325; background-color: #FFFFFF;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
border-radius: 16rpx; border-radius: 16rpx;
gap: 8rpx; gap: 8rpx;
border: 2rpx solid #ECFDF3;
box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.06);
} }
.price-prefix { .price-prefix {
@@ -360,7 +367,7 @@ onMounted(async () => {
.price-field { .price-field {
font-size: 64rpx; font-size: 64rpx;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #111827;
width: 200rpx; width: 200rpx;
text-align: center; text-align: center;
} }
@@ -370,20 +377,21 @@ onMounted(async () => {
gap: 24rpx; gap: 24rpx;
padding: 32rpx 48rpx; padding: 32rpx 48rpx;
padding-bottom: 64rpx; padding-bottom: 64rpx;
background-color: #0D1F17; background-color: #FFFFFF;
} }
.btn-primary { .btn-primary {
flex: 1; flex: 1;
height: 96rpx; height: 96rpx;
background-color: #4ADE80; background-color: #10B981;
border-radius: 48rpx; border-radius: 48rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 32rpx; font-size: 32rpx;
font-weight: 500; font-weight: 500;
color: #0D1F17; color: #FFFFFF;
box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.25);
} }
.btn-full { flex: 1; } .btn-full { flex: 1; }
@@ -391,13 +399,13 @@ onMounted(async () => {
.btn-secondary { .btn-secondary {
height: 96rpx; height: 96rpx;
padding: 0 48rpx; padding: 0 48rpx;
background-color: #1A3325; background-color: #FFFFFF;
border-radius: 48rpx; border-radius: 48rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 32rpx; font-size: 32rpx;
color: #FFFFFF; color: #111827;
border: 2rpx solid #374151; border: 2rpx solid #E5E7EB;
} }
</style> </style>
pages/profile/index.vue
+22 -17
View File
@@ -122,7 +122,7 @@ onMounted(async () => {
<style scoped> <style scoped>
.page { .page {
min-height: 100vh; min-height: 100vh;
background-color: #0D1F17; background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
padding: 32rpx; padding: 32rpx;
padding-bottom: 120rpx; padding-bottom: 120rpx;
box-sizing: border-box; box-sizing: border-box;
@@ -144,8 +144,8 @@ onMounted(async () => {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
border-radius: 50%; border-radius: 50%;
border: 6rpx solid #4ADE80; border: 6rpx solid #10B981;
background-color: #1A3325; background-color: #F3F4F6;
} }
.avatar-edit { .avatar-edit {
@@ -154,7 +154,7 @@ onMounted(async () => {
bottom: 0; bottom: 0;
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
background-color: #4ADE80; background-color: #10B981;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -165,7 +165,7 @@ onMounted(async () => {
.user-name { .user-name {
font-size: 40rpx; font-size: 40rpx;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #111827;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
@@ -185,7 +185,7 @@ onMounted(async () => {
.streak-text { .streak-text {
font-size: 26rpx; font-size: 26rpx;
color: #9CA3AF; color: #6B7280;
} }
.section { margin-bottom: 32rpx; } .section { margin-bottom: 32rpx; }
@@ -207,9 +207,11 @@ onMounted(async () => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24rpx; gap: 24rpx;
background-color: #1A3325; background-color: #FFFFFF;
border-radius: 24rpx; border-radius: 24rpx;
padding: 24rpx; padding: 24rpx;
border: 2rpx solid #ECFDF3;
box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
} }
.menu-icon { .menu-icon {
@@ -222,11 +224,11 @@ onMounted(async () => {
font-size: 32rpx; font-size: 32rpx;
} }
.menu-icon-green { background-color: rgba(74, 222, 128, 0.2); } .menu-icon-green { background-color: #DCFCE7; }
.menu-icon-blue { background-color: rgba(96, 165, 250, 0.2); } .menu-icon-blue { background-color: #DBEAFE; }
.menu-icon-orange { background-color: rgba(251, 146, 60, 0.2); } .menu-icon-orange { background-color: #FFEDD5; }
.menu-icon-yellow { background-color: rgba(251, 191, 36, 0.2); } .menu-icon-yellow { background-color: #FEF3C7; }
.menu-icon-gray { background-color: rgba(107, 114, 128, 0.2); } .menu-icon-gray { background-color: #F3F4F6; }
.menu-content { .menu-content {
flex: 1; flex: 1;
@@ -237,7 +239,7 @@ onMounted(async () => {
.menu-label { .menu-label {
font-size: 30rpx; font-size: 30rpx;
color: #FFFFFF; color: #111827;
} }
.menu-desc { .menu-desc {
@@ -247,8 +249,8 @@ onMounted(async () => {
.pro-badge { .pro-badge {
display: inline-block; display: inline-block;
background-color: #4ADE80; background-color: #10B981;
color: #0D1F17; color: #FFFFFF;
font-size: 20rpx; font-size: 20rpx;
padding: 4rpx 12rpx; padding: 4rpx 12rpx;
border-radius: 8rpx; border-radius: 8rpx;
@@ -259,13 +261,16 @@ onMounted(async () => {
.menu-arrow { .menu-arrow {
font-size: 36rpx; font-size: 36rpx;
color: #6B7280; color: #9CA3AF;
} }
.logout-btn { .logout-btn {
text-align: center; text-align: center;
padding: 24rpx; padding: 24rpx;
margin-top: 32rpx; margin-top: 32rpx;
background-color: #FFFFFF;
border-radius: 24rpx;
border: 2rpx solid #FEE2E2;
} }
.logout-text { .logout-text {
@@ -277,7 +282,7 @@ onMounted(async () => {
display: block; display: block;
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
color: #6B7280; color: #9CA3AF;
margin-top: 24rpx; margin-top: 24rpx;
} }
</style> </style>