feat: update global tokens and remove legacy decorations
This commit is contained in:
+4
-4
@@ -27,10 +27,10 @@ export default defineAppConfig({
|
||||
navigationStyle: 'custom',
|
||||
// 顶部/窗口颜色先显式固定为小程序浅色主题，避免 iOS 顶部区域跟随系统深色；
|
||||
// 应用启动后页面 Hook 会按小程序内主题实时覆盖上面的值。
|
||||
navigationBarBackgroundColor: '#ffffff',
|
||||
backgroundColor: '#ffffff',
|
||||
backgroundColorTop: '#ffffff',
|
||||
backgroundColorBottom: '#ffffff',
|
||||
navigationBarBackgroundColor: '#faf7f2',
|
||||
backgroundColor: '#faf7f2',
|
||||
backgroundColorTop: '#faf7f2',
|
||||
backgroundColorBottom: '#faf7f2',
|
||||
// 状态栏文字默认黑字；各页面 useStatusBar 会按小程序主题覆盖它。
|
||||
navigationBarTextStyle: 'black',
|
||||
},
|
||||
|
||||
+101
-88
@@ -20,33 +20,61 @@
|
||||
|
||||
/* 变量定义 */
|
||||
.theme-light {
|
||||
--bg-page: #ffffff;
|
||||
--line-card: 3px dashed #ffb7c5;
|
||||
--line-star: #ffb7c5;
|
||||
--text-primary: #5c3a3a;
|
||||
--text-secondary: #b08d8d;
|
||||
--text-muted: #d28a8a;
|
||||
--accent-pink: #ff9a9e;
|
||||
--accent-blue: #5b8cff;
|
||||
--btn-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%);
|
||||
--shadow-card: 0 8px 24px rgba(255, 154, 158, 0.12);
|
||||
--bg-input: #f8f9fa;
|
||||
--bg-page: #faf7f2;
|
||||
--bg-card: #ffffff;
|
||||
--bg-muted: #f3eee7;
|
||||
--bg-input: #f5f1eb;
|
||||
--text-primary: #2e2622;
|
||||
--text-secondary: #8a7e76;
|
||||
--text-muted: #b3a89e;
|
||||
--accent-primary: #d96c6a;
|
||||
--accent-primary-strong: #c75b59;
|
||||
--accent-primary-soft: #f6e0dc;
|
||||
--accent-secondary: #6c7bdb;
|
||||
--accent-secondary-soft: rgba(108, 123, 219, 0.12);
|
||||
--success: #4fa477;
|
||||
--warning: #d99a4e;
|
||||
--danger: #d85d5d;
|
||||
--border: #ede5dc;
|
||||
--border-strong: #e0d5c8;
|
||||
--glass: rgba(255, 255, 255, 0.72);
|
||||
--glass-line: rgba(255, 255, 255, 0.55);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(46, 38, 34, 0.08);
|
||||
--shadow-elevated: 0 12rpx 40rpx rgba(46, 38, 34, 0.12);
|
||||
--line-card: 1rpx solid var(--border);
|
||||
--line-star: var(--border);
|
||||
--accent-pink: var(--accent-primary);
|
||||
--accent-blue: var(--accent-secondary);
|
||||
--btn-gradient: var(--accent-primary);
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
--bg-page: #191919;
|
||||
--line-card: 3px dashed #5b8cff;
|
||||
--line-star: #5b8cff;
|
||||
--text-primary: #e6e6e6;
|
||||
--text-secondary: #999999;
|
||||
--text-muted: #737373;
|
||||
--accent-pink: #ff7eb3;
|
||||
--accent-blue: #5cadff;
|
||||
--btn-gradient: linear-gradient(135deg, #ff7eb3 0%, #7a5cff 100%);
|
||||
--shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
--bg-input: #232323;
|
||||
--bg-card: #232323;
|
||||
--bg-card: #23201d;
|
||||
--bg-muted: #2b2622;
|
||||
--bg-input: #2b2622;
|
||||
--text-primary: #f5efe8;
|
||||
--text-secondary: #b3a79c;
|
||||
--text-muted: #82766c;
|
||||
--accent-primary: #f09198;
|
||||
--accent-primary-strong: #ffa7ad;
|
||||
--accent-primary-soft: rgba(240, 145, 152, 0.14);
|
||||
--accent-secondary: #8e97e8;
|
||||
--accent-secondary-soft: rgba(142, 151, 232, 0.14);
|
||||
--success: #67c58e;
|
||||
--warning: #e0ad68;
|
||||
--danger: #ef7a7a;
|
||||
--border: #37312c;
|
||||
--border-strong: #463e37;
|
||||
--glass: rgba(25, 25, 25, 0.72);
|
||||
--glass-line: rgba(255, 255, 255, 0.14);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.32);
|
||||
--shadow-elevated: 0 12rpx 40rpx rgba(0, 0, 0, 0.48);
|
||||
--line-card: 1rpx solid var(--border);
|
||||
--line-star: var(--border);
|
||||
--accent-pink: var(--accent-primary);
|
||||
--accent-blue: var(--accent-secondary);
|
||||
--btn-gradient: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* page 基础字体 */
|
||||
@@ -58,41 +86,16 @@ page {
|
||||
全局组件样式
|
||||
========================================================== */
|
||||
|
||||
.dashed-card {
|
||||
.surface-card {
|
||||
background: var(--bg-card);
|
||||
border: var(--line-card);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid var(--border);
|
||||
border-radius: 24rpx;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* 虚线无填充星星（左上角装饰） */
|
||||
.star-badge {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.star-badge::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--bg-card);
|
||||
clip-path: polygon(
|
||||
50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
|
||||
50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
|
||||
);
|
||||
border: 2px dashed var(--line-star);
|
||||
box-sizing: border-box;
|
||||
/* 为兼容旧页面中的卡片类名，保留过渡别名 */
|
||||
.dashed-card {
|
||||
@extend .surface-card;
|
||||
}
|
||||
|
||||
/* === 常用工具类 === */
|
||||
@@ -111,37 +114,36 @@ page {
|
||||
.mb-20 { margin-bottom: 20px; }
|
||||
|
||||
/* === 通用按钮 === */
|
||||
.btn-gradient {
|
||||
background: var(--btn-gradient);
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: #fff;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
border-radius: 50px;
|
||||
padding: 24px 48px;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 24px rgba(255, 154, 158, 0.25);
|
||||
border: none;
|
||||
border: 1rpx solid var(--border-strong);
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.theme-dark .btn-gradient {
|
||||
color: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(122, 92, 255, 0.3);
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.btn-gradient:active {
|
||||
opacity: 0.9;
|
||||
transform: scale(0.98);
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
@extend .btn-primary;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: var(--bg-card);
|
||||
color: var(--accent-blue);
|
||||
border: var(--line-card);
|
||||
border-radius: 50px;
|
||||
padding: 20px 48px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
@extend .btn-secondary;
|
||||
}
|
||||
|
||||
/* 固定底部操作栏 */
|
||||
@@ -150,15 +152,16 @@ page {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--bg-card);
|
||||
border-top: var(--line-card);
|
||||
padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
backdrop-filter: blur(32px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||||
border-top: 1rpx solid var(--glass-line);
|
||||
z-index: 500;
|
||||
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* === 标题文字 === */
|
||||
@@ -187,22 +190,32 @@ page {
|
||||
}
|
||||
|
||||
.badge-pink {
|
||||
background: rgba(255, 154, 158, 0.15);
|
||||
color: var(--accent-pink);
|
||||
background: var(--accent-primary-soft);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.badge-blue {
|
||||
background: rgba(160, 196, 255, 0.15);
|
||||
color: var(--accent-blue);
|
||||
background: var(--accent-secondary-soft);
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.badge-green {
|
||||
background: rgba(139, 211, 161, 0.15);
|
||||
color: #2ecc71;
|
||||
background: rgba(79, 164, 119, 0.14);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: rgba(217, 154, 78, 0.14);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: rgba(216, 93, 93, 0.14);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.badge-gray {
|
||||
background: rgba(128, 128, 128, 0.15);
|
||||
background: var(--bg-muted);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -213,7 +226,7 @@ page {
|
||||
}
|
||||
|
||||
.safe-bottom-placeholder {
|
||||
height: 160px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* === 自定义导航栏安全区适配 === */
|
||||
|
||||
+9
-9
@@ -1,14 +1,14 @@
|
||||
{
|
||||
"light": {
|
||||
"navBgColor": "#ffffff",
|
||||
"navBgColor": "#faf7f2",
|
||||
"navTxtStyle": "black",
|
||||
"bgColor": "#ffffff",
|
||||
"bgColor": "#faf7f2",
|
||||
"bgTxtStyle": "dark",
|
||||
"bgColorTop": "#ffffff",
|
||||
"bgColorBottom": "#ffffff",
|
||||
"tabBarColor": "#b08d8d",
|
||||
"tabBarSelectedColor": "#ff9a9e",
|
||||
"tabBarBgColor": "#ffffff",
|
||||
"bgColorTop": "#faf7f2",
|
||||
"bgColorBottom": "#faf7f2",
|
||||
"tabBarColor": "#8a7e76",
|
||||
"tabBarSelectedColor": "#d96c6a",
|
||||
"tabBarBgColor": "#faf7f2",
|
||||
"tabBarBorderStyle": "black"
|
||||
},
|
||||
"dark": {
|
||||
@@ -18,8 +18,8 @@
|
||||
"bgTxtStyle": "light",
|
||||
"bgColorTop": "#191919",
|
||||
"bgColorBottom": "#191919",
|
||||
"tabBarColor": "#999999",
|
||||
"tabBarSelectedColor": "#ff7eb3",
|
||||
"tabBarColor": "#b3a79c",
|
||||
"tabBarSelectedColor": "#f09198",
|
||||
"tabBarBgColor": "#191919",
|
||||
"tabBarBorderStyle": "white"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user