adminym/wxserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

视觉重构：紫渐变 SaaS 风 → 纸感编辑风（A 方案）
部署到群晖 / deploy (push) Successful in 43s
Details

Browse Source 
旧版多处违反 impeccable 设计规范（gradient text、6rpx 粗色条 border-left、
glassmorphism、bounce 动画）且整体呈现典型「AI/SaaS 通用紫渐变」（#6366f1 系、
#667eea 系），用户反馈「AI 味儿太浓」。

色板（OKLCH 概念，hex 落地）：
- 背景：浅米黄 #FAF6ED
- 主文字：深墨蓝 #1F1D2B
- 暖灰副文字：#8A8278
- 强调（仅 today / FAB）：墨红 #C8412F

涉及改动：
- app.wxss：删模板自带 .container padding 200rpx（首页/日历顶部空白真凶）+ 重写全局色板
- index.wxml/wxss：去紫渐变 Header + glassmorphism stats + border-left 大色条 + bounce
- calendar.wxml/wxss/json：去紫渐变月份头 + today 大色块 + section-title 6rpx 紫条
- settings.wxss：同款紫 Header + tips-card 6rpx 紫条 → 全卡边线 + 浅暖底
- add-anniversary.wxss：chip-active 紫 / 取消提交按钮渐变 / importance 高饱和色 → 统一
- add-person.wxss：gradient text + 紫 dashed 头像占位 + 多重渐变 → 全套重写
- person-detail.wxss：微信绿 + 灰底默认色 → 方向 A 色板
- utils/constants.js：IMPORTANCE_COLORS 高/中/低 = 墨红/焦糖/苔绿（替代橙红/橘/鲜绿）

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yuming
2026-06-02 09:27:16 +08:00
parent 323c566597
commit 3f176924d0
12 changed files with 577 additions and 598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.json
+3 -3
View File
@@ -15,10 +15,10 @@
"backgroundColor": "#f5f5f5" "backgroundColor": "#f5f5f5"
}, },
"tabBar": { "tabBar": {
"color": "#7A7E83", "color": "#8A8278",
"selectedColor": "#07c160", "selectedColor": "#1F1D2B",
"borderStyle": "black", "borderStyle": "black",
"backgroundColor": "#ffffff", "backgroundColor": "#FAF6ED",
"list": [ "list": [
{ {
"pagePath": "pages/index/index", "pagePath": "pages/index/index",
app.wxss
+49 -78
View File
@@ -1,120 +1,91 @@
/**app.wxss**/ /**app.wxss
* 全局基础样式 —— 纸感编辑风（A 方案）
* 色板：浅米黄底 + 墨蓝文字 + 暖灰副文字 + 墨红强调
* 注：每个页面可在自己的 wxss 里覆盖；这里只做"全局兜底"
*/
page {
background: #FAF6ED;
color: #1F1D2B;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', system-ui, sans-serif;
}
/* 通用容器：不设 padding，每页根据需要自定 */
.container { .container {
height: 100%; min-height: 100vh;
display: flex; background-color: #FAF6ED;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box; box-sizing: border-box;
} }
/* 全局样式 */ /* 通用内容包装 */
page {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-attachment: fixed;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 通用容器 */
.content { .content {
padding: 40rpx; padding: 32rpx 24rpx;
} }
/* 按钮样式 */ /* 按钮 */
.btn { .btn {
border-radius: 12rpx; border-radius: 12rpx;
font-size: 32rpx; font-size: 30rpx;
padding: 24rpx 48rpx; padding: 22rpx 36rpx;
transition: all 0.3s ease; transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #1F1D2B;
color: #fff; color: #FAF6ED;
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4); }
.btn-primary:active {
opacity: 0.85;
} }
.btn-secondary { .btn-secondary {
background-color: #fff; background-color: #FFFFFF;
color: #333; color: #1F1D2B;
border: 2rpx solid #e8e8e8; border: 1rpx solid #E8E2D5;
} }
/* 卡片样式 */ .btn-secondary:active {
.card { background-color: #F2EEE5;
background-color: #fff;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
} }
/* 输入框样式 */ /* 输入框 */
.input { .input {
background-color: #f8f9fa; background-color: #FFFFFF;
padding: 24rpx; border: 1rpx solid #E8E2D5;
padding: 22rpx 24rpx;
border-radius: 12rpx; border-radius: 12rpx;
border: 2rpx solid transparent;
font-size: 28rpx; font-size: 28rpx;
transition: all 0.3s ease; color: #1F1D2B;
transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
} }
.input:focus { .input:focus {
background-color: #fff; border-color: #1F1D2B;
border-color: #667eea;
} }
/* 分割线 */ /* 分割线 */
.divider { .divider {
height: 1rpx; height: 1rpx;
background: linear-gradient(90deg, transparent, #e0e0e0, transparent); background: #E8E2D5;
margin: 32rpx 0; margin: 28rpx 0;
} }
/* 空状态 */ /* 通用空状态 */
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 120rpx 40rpx; padding: 120rpx 40rpx;
color: rgba(255, 255, 255, 0.8);
} }
.empty-state .icon { .empty-state .icon {
font-size: 140rpx; font-size: 104rpx;
margin-bottom: 32rpx; margin-bottom: 24rpx;
filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1)); opacity: 0.7;
} }
.empty-state .text { .empty-state .text {
font-size: 32rpx; font-size: 26rpx;
color: rgba(255, 255, 255, 0.9); color: #A9A096;
font-weight: 500; line-height: 1.6;
margin-bottom: 12rpx;
} }
/* 浮动按钮 */
.fab {
position: fixed;
bottom: 120rpx;
right: 40rpx;
width: 112rpx;
height: 112rpx;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 64rpx;
box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.5);
z-index: 100;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fab:active {
transform: scale(0.92);
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
}
pages/add-anniversary/add-anniversary.wxss
+22 -26
View File
@@ -87,9 +87,9 @@
} }
.chip-active { .chip-active {
color: #6366f1; color: #1F1D2B;
background-color: #eef0ff; background-color: #F2EEE5;
border-color: #6366f1; border-color: #1F1D2B;
} }
.lunar-hint { .lunar-hint {
@@ -117,9 +117,9 @@
.lunar-warn-detail { .lunar-warn-detail {
margin-top: 12rpx; margin-top: 12rpx;
padding: 14rpx 20rpx; padding: 14rpx 20rpx;
background-color: #fffbeb; background-color: #FFF8EE;
border-left: 4rpx solid #d97706; border: 1rpx solid #EFD9B5;
border-radius: 4rpx; border-radius: 8rpx;
font-size: 24rpx; font-size: 24rpx;
color: #92400e; color: #92400e;
line-height: 1.6; line-height: 1.6;
@@ -145,15 +145,15 @@
} }
.importance-high { .importance-high {
color: #ff5722; color: #C8412F;
} }
.importance-medium { .importance-medium {
color: #ff9800; color: #B36A1F;
} }
.importance-low { .importance-low {
color: #999; color: #8A8278;
} }
.switch-item { .switch-item {
@@ -182,39 +182,35 @@
.btn { .btn {
flex: 1; flex: 1;
height: 96rpx; height: 88rpx;
line-height: 96rpx; line-height: 88rpx;
border-radius: 48rpx; border-radius: 12rpx;
font-size: 32rpx; font-size: 30rpx;
font-weight: 600; font-weight: 500;
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
} }
.btn-cancel { .btn-cancel {
background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%); background: #FFFFFF;
color: #666; color: #1F1D2B;
border: 2rpx solid rgba(102, 126, 234, 0.2); border: 1rpx solid #E8E2D5;
} }
.btn-cancel:active { .btn-cancel:active {
transform: scale(0.98); background: #F2EEE5;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
} }
.btn-submit { .btn-submit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #1F1D2B;
color: #fff; color: #FAF6ED;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
} }
.btn-submit:active { .btn-submit:active {
transform: scale(0.98); opacity: 0.85;
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
} }
.btn-cancel::after, .btn-cancel::after,
pages/add-person/add-person.wxss
+69 -71
View File
@@ -1,161 +1,159 @@
/**add-person.wxss**/ /* add-person.wxss
* 视觉方向：纸感编辑风（A 方案，与全局一致）
* 原版含 2 个 impeccable 绝对禁项：gradient text (background-clip: text) 和 dashed border 大色块
*/
.container { .container {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 30%); background: #FAF6ED;
padding-bottom: 120rpx; padding-bottom: 120rpx;
} }
.form { .form {
padding: 32rpx; padding: 24rpx;
} }
.form-item { .form-item {
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%); background: #FFFFFF;
border-radius: 24rpx; border: 1rpx solid #E8E2D5;
padding: 36rpx; border-radius: 14rpx;
margin-bottom: 24rpx; padding: 28rpx;
box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.12); margin-bottom: 20rpx;
border: 2rpx solid rgba(255, 255, 255, 0.8);
} }
.label { .label {
font-size: 28rpx; font-size: 26rpx;
font-weight: 600; font-weight: 500;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #1F1D2B;
-webkit-background-clip: text; margin-bottom: 18rpx;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 24rpx;
display: block; display: block;
} }
.label.required::after { .label.required::after {
content: ' *'; content: ' *';
color: #ff5722; color: #C8412F;
-webkit-text-fill-color: #ff5722;
} }
/* 头像上传 */ /* ───── 头像上传 ───── */
.avatar-upload { .avatar-upload {
text-align: center; text-align: center;
} }
.avatar { .avatar {
width: 200rpx; width: 176rpx;
height: 200rpx; height: 176rpx;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #EFE9DC;
border: 6rpx solid rgba(255, 255, 255, 0.9); border: 1rpx solid #E8E2D5;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
} }
.avatar-placeholder { .avatar-placeholder {
width: 200rpx; width: 176rpx;
height: 200rpx; height: 176rpx;
margin: 0 auto; margin: 0 auto;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); background: #FAF6ED;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 4rpx dashed rgba(102, 126, 234, 0.4); border: 1rpx dashed #C8C2B4;
transition: all 0.3s ease; transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
} }
.avatar-placeholder:active { .avatar-placeholder:active {
transform: scale(0.95); background: #F2EEE5;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
} }
.avatar-placeholder .icon { .avatar-placeholder .icon {
font-size: 64rpx; font-size: 52rpx;
display: block; display: block;
margin-bottom: 16rpx; margin-bottom: 12rpx;
filter: grayscale(0.5); opacity: 0.6;
} }
.avatar-placeholder .text { .avatar-placeholder .text {
font-size: 24rpx; font-size: 24rpx;
color: #667eea; color: #8A8278;
font-weight: 500; font-weight: 500;
} }
/* ───── 输入 ───── */
.input { .input {
background-color: #f8f9fa; background-color: #FAF6ED;
border-radius: 12rpx; border: 1rpx solid #E8E2D5;
padding: 24rpx; border-radius: 10rpx;
padding: 22rpx 24rpx;
font-size: 28rpx; font-size: 28rpx;
border: 2rpx solid transparent; color: #1F1D2B;
transition: all 0.3s ease; transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
} }
.input:focus { .input:focus {
background-color: #fff; background-color: #FFFFFF;
border-color: #667eea; border-color: #1F1D2B;
} }
.textarea { .textarea {
background-color: #f8f9fa; background-color: #FAF6ED;
border-radius: 12rpx; border: 1rpx solid #E8E2D5;
padding: 24rpx; border-radius: 10rpx;
padding: 22rpx 24rpx;
font-size: 28rpx; font-size: 28rpx;
min-height: 160rpx; color: #1F1D2B;
border: 2rpx solid transparent; min-height: 140rpx;
transition: all 0.3s ease; transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
box-sizing: border-box;
width: 100%;
} }
.textarea:focus { .textarea:focus {
background-color: #fff; background-color: #FFFFFF;
border-color: #667eea; border-color: #1F1D2B;
} }
/* ───── 按钮 ───── */
.buttons { .buttons {
display: flex; display: flex;
gap: 24rpx; gap: 20rpx;
margin-top: 40rpx; margin-top: 32rpx;
padding: 0 32rpx 32rpx; padding: 0 24rpx 32rpx;
} }
.btn { .btn {
flex: 1; flex: 1;
height: 96rpx; height: 88rpx;
line-height: 96rpx; line-height: 88rpx;
border-radius: 48rpx; border-radius: 12rpx;
font-size: 32rpx; font-size: 30rpx;
font-weight: 600; font-weight: 500;
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
} }
.btn-cancel { .btn-cancel {
background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%); background: #FFFFFF;
color: #666; color: #1F1D2B;
border: 2rpx solid rgba(102, 126, 234, 0.2); border: 1rpx solid #E8E2D5;
} }
.btn-cancel:active { .btn-cancel:active {
transform: scale(0.98); background: #F2EEE5;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
} }
.btn-submit { .btn-submit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #1F1D2B;
color: #fff; color: #FAF6ED;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
} }
.btn-submit:active { .btn-submit:active {
transform: scale(0.98); opacity: 0.85;
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
} }
.btn-cancel::after, .btn-cancel::after,
.btn-submit::after { .btn-submit::after {
border: none; border: none;
} }
pages/calendar/calendar.json
+3
View File
@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "日历"
}
pages/calendar/calendar.wxml
+3 -3
View File
@@ -3,11 +3,11 @@
<!-- 日历头部 --> <!-- 日历头部 -->
<view class="calendar-header"> <view class="calendar-header">
<view class="month-navigation"> <view class="month-navigation">
<text class="nav-btn" bindtap="onPrevMonth">‹</text> <view class="nav-btn" bindtap="onPrevMonth">‹</view>
<text class="month-title">{{currentYear}}年{{currentMonth}}月</text> <text class="month-title">{{currentYear}}年{{currentMonth}}月</text>
<text class="nav-btn" bindtap="onNextMonth">›</text> <view class="nav-btn" bindtap="onNextMonth">›</view>
</view> </view>
<button class="today-btn" bindtap="onGoToday">今天</button> <view class="today-btn" bindtap="onGoToday">今天</view>
</view> </view>
<!-- 星期标题 --> <!-- 星期标题 -->
pages/calendar/calendar.wxss
+105 -96
View File
@@ -1,91 +1,98 @@
/**calendar.wxss**/ /* calendar.wxss
* 视觉方向：纸感编辑风（A 方案，与首页一致）
* 与首页统一色板：浅米黄底 + 墨蓝文字 + 暖灰副文字 + 墨红强调
*/
.container { .container {
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background-color: #FAF6ED;
} }
/* ───── 月份头部 ───── */
.calendar-header { .calendar-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20rpx 24rpx 16rpx;
padding: 40rpx 32rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
} }
.month-navigation { .month-navigation {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24rpx; gap: 28rpx;
} }
.nav-btn { .nav-btn {
font-size: 40rpx; font-size: 40rpx;
color: #fff; color: #1F1D2B;
font-weight: 300; font-weight: 300;
width: 56rpx; width: 56rpx;
height: 56rpx; height: 56rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%; border-radius: 50%;
transition: all 0.2s; border: 1rpx solid #E8E2D5;
background: #FFFFFF;
transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
line-height: 1;
} }
.nav-btn:active { .nav-btn:active {
background-color: rgba(255, 255, 255, 0.3); background: #F2EEE5;
transform: scale(0.95);
} }
.month-title { .month-title {
font-size: 36rpx; font-size: 40rpx;
font-weight: 600; font-weight: 600;
color: #fff; color: #1F1D2B;
min-width: 240rpx; min-width: 240rpx;
text-align: center; text-align: center;
letter-spacing: -0.5rpx;
} }
.today-btn { .today-btn {
padding: 14rpx 32rpx; padding: 10rpx 24rpx;
background-color: rgba(255, 255, 255, 0.25); background: transparent;
color: #fff; color: #1F1D2B;
border-radius: 40rpx; border: 1rpx solid #1F1D2B;
font-size: 26rpx; border-radius: 36rpx;
border: none; font-size: 24rpx;
font-weight: 600; font-weight: 500;
transition: all 0.2s; transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
line-height: 1.5;
} }
.today-btn:active { .today-btn:active {
background-color: rgba(255, 255, 255, 0.35); background: #1F1D2B;
transform: scale(0.95); color: #FAF6ED;
} }
.today-btn::after { .today-btn::after {
border: none; border: none;
} }
/* ───── 周标题 ───── */
.week-header { .week-header {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
background: linear-gradient(to bottom, #fff 0%, #fafafa 100%); padding: 8rpx 24rpx 12rpx;
padding: 20rpx 24rpx 12rpx 24rpx;
gap: 12rpx; gap: 12rpx;
border-bottom: 2rpx solid #f0f0f0;
box-sizing: border-box; box-sizing: border-box;
border-top: 1rpx solid #E8E2D5;
border-bottom: 1rpx solid #E8E2D5;
margin: 0 12rpx;
} }
.week-title { .week-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 60rpx; height: 56rpx;
font-size: 26rpx; font-size: 22rpx;
color: #888; color: #8A8278;
font-weight: 600; font-weight: 500;
margin: 0; letter-spacing: 2rpx;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -93,60 +100,60 @@
display: block; display: block;
} }
/* ───── 日历主体 ───── */
.calendar-content { .calendar-content {
height: calc(100vh - 200rpx); height: calc(100vh - 220rpx);
background-color: #f5f5f5; background-color: #FAF6ED;
} }
.calendar-grid { .calendar-grid {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
background-color: #f5f5f5; padding: 16rpx 24rpx;
padding: 16rpx 24rpx 16rpx 24rpx;
gap: 12rpx; gap: 12rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.calendar-cell { .calendar-cell {
min-height: 100rpx; min-height: 96rpx;
background-color: #fff; background-color: #FFFFFF;
border-radius: 12rpx; border-radius: 12rpx;
border: 1rpx solid #E8E2D5;
padding: 12rpx 8rpx; padding: 12rpx 8rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
transition: all 0.2s;
box-sizing: border-box; box-sizing: border-box;
margin: 0; transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
} }
.calendar-cell.other-month { .calendar-cell.other-month {
background-color: transparent; background-color: transparent;
box-shadow: none; border-color: transparent;
} }
/* today：克制的墨红圆点圈定 date-num，不再大色块 + scale */
.calendar-cell.today { .calendar-cell.today {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #FFF1EA;
box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3); border-color: #E8BCA7;
transform: scale(1.05);
} }
.calendar-cell.today .date-num { .calendar-cell.today .date-num {
color: #fff; color: #C8412F;
font-weight: 700; font-weight: 700;
} }
.date-num { .date-num {
font-size: 32rpx; font-size: 30rpx;
color: #333; color: #1F1D2B;
margin-bottom: 8rpx; margin-bottom: 8rpx;
font-weight: 600; font-weight: 600;
font-feature-settings: "tnum";
} }
.calendar-cell.other-month .date-num { .calendar-cell.other-month .date-num {
color: #d0d0d0; color: #C8C2B4;
font-weight: 400; font-weight: 400;
} }
@@ -162,64 +169,62 @@
width: 8rpx; width: 8rpx;
height: 8rpx; height: 8rpx;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
}
.calendar-cell.today .event-dot {
background-color: #fff !important;
} }
.more-text { .more-text {
font-size: 18rpx; font-size: 18rpx;
color: #999; color: #8A8278;
margin-top: 4rpx; margin-top: 4rpx;
font-weight: 500; font-weight: 500;
} }
.calendar-cell.today .more-text { .calendar-cell.today .more-text {
color: #fff; color: #C8412F;
} }
/* 事件列表 */ /* ───── 列表区 ───── */
.events-list { .events-list {
padding: 32rpx 24rpx; padding: 32rpx 24rpx 80rpx;
} }
/* section-title 用纯排版，不用 6rpx border-left（绝对禁用项） */
.section-title { .section-title {
font-size: 32rpx; font-size: 28rpx;
font-weight: 700; font-weight: 600;
color: #333; color: #1F1D2B;
margin-bottom: 24rpx; margin-bottom: 24rpx;
padding-left: 16rpx; letter-spacing: 1rpx;
border-left: 6rpx solid #667eea;
} }
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 120rpx 40rpx; padding: 120rpx 40rpx;
opacity: 0.6;
} }
.empty-state .icon { .empty-state .icon {
font-size: 120rpx; font-size: 104rpx;
display: block; display: block;
margin-bottom: 32rpx; margin-bottom: 24rpx;
opacity: 0.7;
} }
.empty-state .text { .empty-state .text {
font-size: 28rpx; font-size: 26rpx;
color: #999; color: #A9A096;
line-height: 1.6; line-height: 1.6;
} }
.event-card { .event-card {
background: linear-gradient(135deg, #fff 0%, #fafafa 100%); background: #FFFFFF;
border-radius: 16rpx; border: 1rpx solid #E8E2D5;
padding: 32rpx; border-radius: 14rpx;
margin-bottom: 20rpx; padding: 24rpx 28rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); margin-bottom: 16rpx;
border: 2rpx solid rgba(102, 126, 234, 0.1); transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
transition: all 0.3s; }
.event-card:active {
transform: scale(0.985);
} }
.event-header { .event-header {
@@ -228,55 +233,59 @@
} }
.event-icon { .event-icon {
font-size: 40rpx; font-size: 32rpx;
margin-right: 16rpx; margin-right: 14rpx;
flex-shrink: 0;
} }
.event-title { .event-title {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #1F1D2B;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.event-date { .event-date {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #8A8278;
flex-shrink: 0;
margin-left: 12rpx;
} }
.event-info { .event-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16rpx; gap: 12rpx;
margin-top: 16rpx; margin-top: 14rpx;
padding-left: 46rpx;
} }
.lunar-badge { .lunar-badge {
padding: 6rpx 16rpx; padding: 4rpx 14rpx;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); background: #F2EEE5;
color: #1976d2; color: #8A8278;
border-radius: 20rpx; border-radius: 18rpx;
font-size: 20rpx; font-size: 20rpx;
font-weight: 600; font-weight: 500;
box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.15);
} }
.status { .status {
font-size: 22rpx; font-size: 22rpx;
padding: 6rpx 16rpx; padding: 4rpx 14rpx;
border-radius: 20rpx; border-radius: 18rpx;
font-weight: 600; font-weight: 600;
} }
.status.urgent { .status.urgent {
background: linear-gradient(135deg, #ffe0db 0%, #ffccbc 100%); background: #FFE3D7;
color: #ff5722; color: #C8412F;
box-shadow: 0 2rpx 8rpx rgba(255, 87, 34, 0.15);
} }
.status.warning { .status.warning {
background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%); background: #FFEFD9;
color: #ff9800; color: #B36A1F;
box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.15);
} }
pages/index/index.wxml
+4 -9
View File
@@ -1,21 +1,16 @@
<!--index.wxml--> <!--index.wxml-->
<view class="page"> <view class="page">
<!-- 顶部 Header --> <!-- 顶部 Header：纸感编辑风，排版替代色块 -->
<view class="header"> <view class="header">
<view class="header-top"> <text class="header-title">生日提醒</text>
<view class="header-left"> <text class="header-date">{{todayText}}</text>
<text class="header-title">生日提醒</text> <view class="header-rule"></view>
<text class="header-date">{{todayText}}</text>
</view>
<view class="header-icon">🎂</view>
</view>
<view class="stats-row"> <view class="stats-row">
<view class="stat-item"> <view class="stat-item">
<text class="stat-num">{{totalCount}}</text> <text class="stat-num">{{totalCount}}</text>
<text class="stat-label">位好友</text> <text class="stat-label">位好友</text>
</view> </view>
<view class="stat-sep"></view>
<view class="stat-item"> <view class="stat-item">
<text class="stat-num {{upcomingCount > 0 ? 'stat-num-urgent' : ''}}">{{upcomingCount}}</text> <text class="stat-num {{upcomingCount > 0 ? 'stat-num-urgent' : ''}}">{{upcomingCount}}</text>
<text class="stat-label">即将到来</text> <text class="stat-label">即将到来</text>
pages/index/index.wxss
+116 -133
View File
@@ -1,124 +1,113 @@
/* index.wxss */ /* index.wxss
* 视觉方向：纸感编辑风（A 方案）
* - 浅米黄底（暖中性，反 SaaS 通用感）
* - 墨蓝主文字 + 暖灰副文字
* - 仅「今天/FAB」用墨红强调（Restrained，强调色占比 < 10%）
* - 删除原 #6366f1→#8b5cf6 紫渐变、glassmorphism、bounce 动画、border-left 大色条
*/
page { page {
background: #f1f4f9; background: #FAF6ED;
} }
.page { .page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background: #f1f4f9; background: #FAF6ED;
} }
/* ───── Header ───── */ /* ───── Header ───── */
.header { .header {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); padding: 56rpx 36rpx 24rpx;
padding: 48rpx 36rpx 40rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 32rpx;
}
.header-left {
display: flex;
flex-direction: column;
}
.header-title { .header-title {
font-size: 44rpx; display: block;
font-weight: 700; font-size: 52rpx;
color: #fff; font-weight: 600;
line-height: 1.2; color: #1F1D2B;
letter-spacing: 2rpx; line-height: 1.15;
letter-spacing: -0.5rpx;
} }
.header-date { .header-date {
display: block;
font-size: 26rpx; font-size: 26rpx;
color: rgba(255, 255, 255, 0.7); color: #8A8278;
margin-top: 8rpx; margin-top: 10rpx;
} }
.header-icon { .header-rule {
font-size: 64rpx; height: 1rpx;
opacity: 0.9; background: #E8E2D5;
margin-top: 28rpx;
} }
.stats-row { .stats-row {
display: flex; display: flex;
align-items: center; gap: 64rpx;
background: rgba(255, 255, 255, 0.15); padding-top: 24rpx;
border-radius: 20rpx;
padding: 20rpx 32rpx;
backdrop-filter: blur(8rpx);
} }
.stat-item { .stat-item {
display: flex; display: flex;
align-items: baseline; flex-direction: column;
gap: 8rpx; gap: 4rpx;
flex: 1;
justify-content: center;
} }
.stat-num { .stat-num {
font-size: 48rpx; font-size: 44rpx;
font-weight: 700; font-weight: 600;
color: #fff; color: #1F1D2B;
line-height: 1; line-height: 1;
letter-spacing: -1rpx;
} }
.stat-num-urgent { .stat-num-urgent {
color: #fbbf24; color: #C8412F;
} }
.stat-label { .stat-label {
font-size: 24rpx; font-size: 24rpx;
color: rgba(255, 255, 255, 0.75); color: #8A8278;
} }
.stat-sep { .stat-sep {
width: 2rpx; display: none;
height: 48rpx;
background: rgba(255, 255, 255, 0.25);
flex-shrink: 0;
} }
/* ───── Search ───── */ /* ───── Search ───── */
.search-wrap { .search-wrap {
padding: 24rpx 24rpx 12rpx; padding: 16rpx 24rpx 8rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.search-box { .search-box {
display: flex; display: flex;
align-items: center; align-items: center;
background: #fff; background: #FFFFFF;
border-radius: 48rpx; border: 1rpx solid #E8E2D5;
padding: 20rpx 28rpx; border-radius: 14rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.07); padding: 18rpx 24rpx;
} }
.search-icon { .search-icon {
font-size: 32rpx; font-size: 30rpx;
margin-right: 16rpx; margin-right: 14rpx;
opacity: 0.6; opacity: 0.55;
} }
.search-input { .search-input {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #1e293b; color: #1F1D2B;
line-height: 1.5; line-height: 1.5;
} }
.search-placeholder { .search-placeholder {
color: #94a3b8; color: #A9A096;
} }
/* ───── Filter ───── */ /* ───── Filter ───── */
@@ -129,71 +118,69 @@ page {
.filter-bar { .filter-bar {
display: flex; display: flex;
padding: 16rpx 24rpx 20rpx; padding: 16rpx 24rpx 8rpx;
gap: 16rpx; gap: 36rpx;
} }
.filter-tab { .filter-tab {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 14rpx 28rpx; padding: 10rpx 0;
border-radius: 48rpx; font-size: 28rpx;
font-size: 26rpx; color: #8A8278;
color: #64748b; background: transparent;
background: #fff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
white-space: nowrap; white-space: nowrap;
transition: all 0.2s ease;
flex-shrink: 0; flex-shrink: 0;
border-bottom: 4rpx solid transparent;
transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
} }
.tab-active { .tab-active {
background: #6366f1; color: #1F1D2B;
color: #fff; font-weight: 600;
box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4); border-bottom-color: #1F1D2B;
} }
/* ───── List ───── */ /* ───── List ───── */
.list { .list {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
padding: 0 24rpx; padding: 16rpx 24rpx 0;
} }
/* ───── Card ───── */ /* ───── Card ───── */
.card { .card {
display: flex; display: flex;
align-items: center; align-items: center;
background: #fff; background: #FFFFFF;
border-radius: 20rpx; border: 1rpx solid #E8E2D5;
padding: 28rpx 28rpx 28rpx 24rpx; border-radius: 14rpx;
margin-bottom: 20rpx; padding: 24rpx 24rpx 24rpx 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); margin-bottom: 16rpx;
border-left: 6rpx solid #e2e8f0; transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
position: relative;
overflow: hidden;
} }
.card:active { .card:active {
transform: scale(0.985); transform: scale(0.985);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.05);
} }
/* 强调用整卡背景 tint，不再用粗 border-left（绝对禁用项之一） */
.card-urgent { .card-urgent {
border-left-color: #f97316; background: #FFF8EE;
border-color: #EFD9B5;
} }
.card-today { .card-today {
border-left-color: #ef4444; background: #FFF1EA;
border-color: #E8BCA7;
} }
/* ───── Avatar ───── */ /* ───── Avatar ───── */
.avatar-wrap { .avatar-wrap {
width: 96rpx; width: 88rpx;
height: 96rpx; height: 88rpx;
border-radius: 50%; border-radius: 50%;
margin-right: 24rpx; margin-right: 20rpx;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
} }
@@ -208,16 +195,16 @@ page {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); background: #EFE9DC;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.avatar-initial { .avatar-initial {
font-size: 40rpx; font-size: 36rpx;
font-weight: 700; font-weight: 600;
color: #fff; color: #5A5247;
} }
/* ───── Card body ───── */ /* ───── Card body ───── */
@@ -230,7 +217,7 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 12rpx; margin-bottom: 8rpx;
} }
.name-group { .name-group {
@@ -245,7 +232,7 @@ page {
.card-name { .card-name {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #1e293b; color: #1F1D2B;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -253,10 +240,10 @@ page {
.card-nickname { .card-nickname {
font-size: 22rpx; font-size: 22rpx;
color: #94a3b8; color: #8A8278;
background: #f1f5f9; background: #F2EEE5;
padding: 4rpx 12rpx; padding: 3rpx 12rpx;
border-radius: 20rpx; border-radius: 18rpx;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -265,8 +252,8 @@ page {
.badge { .badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 6rpx 18rpx; padding: 6rpx 16rpx;
border-radius: 24rpx; border-radius: 20rpx;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -277,38 +264,38 @@ page {
} }
.badge-today { .badge-today {
background: #fee2e2; background: #FFE3D7;
} }
.badge-today .badge-text { .badge-today .badge-text {
color: #ef4444; color: #C8412F;
} }
.badge-hot { .badge-hot {
background: #ffedd5; background: #FFEFD9;
} }
.badge-hot .badge-text { .badge-hot .badge-text {
color: #f97316; color: #B36A1F;
} }
.badge-soon { .badge-soon {
background: #fef9c3; background: #FAF1D9;
} }
.badge-soon .badge-text { .badge-soon .badge-text {
color: #ca8a04; color: #8C7322;
} }
.badge-month { .badge-month {
background: #ede9fe; background: #ECE6D7;
} }
.badge-month .badge-text { .badge-month .badge-text {
color: #7c3aed; color: #6F664E;
} }
.badge-normal { .badge-normal {
background: #f1f5f9; background: #F2EEE5;
} }
.badge-normal .badge-text { .badge-normal .badge-text {
color: #64748b; color: #8A8278;
} }
/* ───── Anniversary row ───── */ /* ───── Anniversary row ───── */
@@ -325,7 +312,7 @@ page {
.ann-info { .ann-info {
font-size: 26rpx; font-size: 26rpx;
color: #475569; color: #5A5247;
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -333,15 +320,15 @@ page {
} }
.muted { .muted {
color: #94a3b8; color: #A9A096;
} }
.ann-more { .ann-more {
font-size: 22rpx; font-size: 22rpx;
color: #6366f1; color: #8A8278;
background: #ede9fe; background: #F2EEE5;
padding: 4rpx 12rpx; padding: 3rpx 12rpx;
border-radius: 20rpx; border-radius: 18rpx;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -354,24 +341,21 @@ page {
} }
.empty-icon { .empty-icon {
font-size: 120rpx; font-size: 104rpx;
margin-bottom: 32rpx; margin-bottom: 28rpx;
opacity: 0.7;
} }
.empty-title { .empty-title {
font-size: 32rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #475569; color: #5A5247;
margin-bottom: 16rpx; margin-bottom: 12rpx;
} }
.empty-hint { .empty-hint {
font-size: 26rpx; font-size: 24rpx;
color: #94a3b8; color: #A9A096;
background: #fff;
padding: 14rpx 32rpx;
border-radius: 40rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
} }
/* ───── List bottom padding ───── */ /* ───── List bottom padding ───── */
@@ -382,28 +366,27 @@ page {
/* ───── FAB ───── */ /* ───── FAB ───── */
.fab { .fab {
position: fixed; position: fixed;
bottom: 120rpx; bottom: 64rpx;
right: 40rpx; right: 36rpx;
width: 112rpx; width: 104rpx;
height: 112rpx; height: 104rpx;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); background: #1F1D2B;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 12rpx 40rpx rgba(99, 102, 241, 0.5); box-shadow: 0 10rpx 28rpx rgba(31, 29, 43, 0.32);
z-index: 100; z-index: 100;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
} }
.fab:active { .fab:active {
transform: scale(0.9); transform: scale(0.93);
box-shadow: 0 6rpx 20rpx rgba(99, 102, 241, 0.4);
} }
.fab-icon { .fab-icon {
font-size: 64rpx; font-size: 56rpx;
color: #fff; color: #FAF6ED;
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
margin-top: -4rpx; margin-top: -4rpx;
pages/person-detail/person-detail.wxss
+127 -101
View File
@@ -1,63 +1,68 @@
/**person-detail.wxss**/ /* person-detail.wxss
* 视觉方向：纸感编辑风（A 方案，与全局一致）
*/
.container { .container {
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background-color: #FAF6ED;
padding-bottom: 120rpx; padding: 24rpx 24rpx 120rpx;
} }
/* ───── 人员卡片 ───── */
.person-card { .person-card {
background-color: #fff; background-color: #FFFFFF;
margin: 32rpx; border: 1rpx solid #E8E2D5;
border-radius: 16rpx; border-radius: 14rpx;
padding: 40rpx; padding: 32rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); margin-bottom: 32rpx;
} }
.person-header { .person-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 24rpx; margin-bottom: 20rpx;
} }
.avatar { .avatar {
width: 120rpx; width: 112rpx;
height: 120rpx; height: 112rpx;
border-radius: 50%; border-radius: 50%;
margin-right: 32rpx; margin-right: 24rpx;
background-color: #f0f0f0; background-color: #EFE9DC;
} }
.person-info { .person-info {
flex: 1; flex: 1;
min-width: 0;
} }
.person-name { .person-name {
font-size: 36rpx; font-size: 36rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #1F1D2B;
display: block; display: block;
margin-bottom: 8rpx; margin-bottom: 6rpx;
} }
.person-nickname { .person-nickname {
font-size: 26rpx; font-size: 24rpx;
color: #999; color: #8A8278;
} }
.person-remark { .person-remark {
font-size: 28rpx; font-size: 26rpx;
color: #666; color: #5A5247;
line-height: 1.6; line-height: 1.65;
margin-bottom: 24rpx; margin-bottom: 20rpx;
padding: 24rpx; padding: 18rpx 22rpx;
background-color: #f9f9f9; background-color: #FAF6ED;
border-radius: 8rpx; border-radius: 10rpx;
} }
.actions { .actions {
display: flex; display: flex;
gap: 24rpx; gap: 20rpx;
margin-top: 32rpx; margin-top: 24rpx;
} }
.action-btn { .action-btn {
@@ -65,189 +70,209 @@
height: 72rpx; height: 72rpx;
line-height: 72rpx; line-height: 72rpx;
border-radius: 12rpx; border-radius: 12rpx;
font-size: 28rpx; font-size: 26rpx;
background-color: #f5f5f5; font-weight: 500;
color: #666; background-color: #FFFFFF;
border: none; color: #1F1D2B;
border: 1rpx solid #E8E2D5;
transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.action-btn:active {
background-color: #F2EEE5;
} }
.action-btn.danger { .action-btn.danger {
background-color: #fff3f0; background-color: #FFFFFF;
color: #ff5722; color: #C8412F;
border-color: #E8BCA7;
}
.action-btn.danger:active {
background-color: #FFF1EA;
} }
.action-btn::after { .action-btn::after {
border: none; border: none;
} }
/* 纪念日列表 */ /* ───── 纪念日列表 ───── */
.section { .section {
padding: 0 32rpx; padding: 0;
} }
.section-header { .section-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 24rpx; margin-bottom: 20rpx;
padding: 0 8rpx;
} }
.section-title { .section-title {
font-size: 32rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #1F1D2B;
letter-spacing: 1rpx;
} }
.add-btn { .add-btn {
padding: 12rpx 24rpx; padding: 10rpx 22rpx;
background-color: #07c160; background-color: #1F1D2B;
color: #fff; color: #FAF6ED;
border-radius: 40rpx; border-radius: 36rpx;
font-size: 24rpx; font-size: 22rpx;
border: none; border: none;
font-weight: 500;
} }
.add-btn::after { .add-btn::after {
border: none; border: none;
} }
/* 纪念日卡片 */ /* ───── 纪念日卡片 ───── */
.anniversary-card { .anniversary-card {
background-color: #fff; background-color: #FFFFFF;
border-radius: 16rpx; border: 1rpx solid #E8E2D5;
padding: 32rpx; border-radius: 14rpx;
margin-bottom: 24rpx; padding: 24rpx 28rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); margin-bottom: 16rpx;
} }
.anniversary-header { .anniversary-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20rpx; margin-bottom: 16rpx;
} }
.anniversary-type { .anniversary-type {
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 0;
} }
.type-icon { .type-icon {
font-size: 40rpx; font-size: 32rpx;
margin-right: 12rpx; margin-right: 12rpx;
flex-shrink: 0;
} }
.type-text { .type-text {
font-size: 32rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #1F1D2B;
} }
.importance-badge { .importance-badge {
padding: 8rpx 20rpx; padding: 4rpx 16rpx;
border-radius: 40rpx; border-radius: 24rpx;
font-size: 22rpx; font-size: 20rpx;
font-weight: 500;
flex-shrink: 0;
} }
.importance-high { .importance-high {
background-color: #fff3f0; background-color: #FFE3D7;
color: #ff5722; color: #C8412F;
} }
.importance-medium { .importance-medium {
background-color: #fff8e6; background-color: #FFEFD9;
color: #ff9800; color: #B36A1F;
} }
.importance-low { .importance-low {
background-color: #f5f5f5; background-color: #F2EEE5;
color: #999; color: #8A8278;
} }
.anniversary-date { .anniversary-date {
margin-bottom: 16rpx; margin-bottom: 12rpx;
font-size: 26rpx; font-size: 24rpx;
color: #666; color: #5A5247;
} }
.date-label { .date-label {
color: #999; color: #8A8278;
} }
.date-text { .date-text {
color: #333; color: #1F1D2B;
font-weight: 500; font-weight: 500;
margin-right: 12rpx; margin-right: 12rpx;
} }
.lunar-badge { .lunar-badge {
display: inline-block; display: inline-block;
padding: 4rpx 12rpx; padding: 3rpx 12rpx;
background-color: #e3f2fd; background-color: #F2EEE5;
color: #1976d2; color: #8A8278;
border-radius: 4rpx; border-radius: 18rpx;
font-size: 20rpx; font-size: 20rpx;
font-weight: 500;
} }
.days-info { .days-info {
margin: 16rpx 0; margin: 12rpx 0;
} }
.days-text { .days-text {
font-size: 28rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #07c160; color: #6F8C58;
} }
.days-text.urgent { .days-text.urgent {
color: #ff5722; color: #C8412F;
font-weight: 600; font-weight: 600;
} }
.days-text.warning { .days-text.warning {
color: #ff9800; color: #B36A1F;
} }
.days-text.past { .days-text.past {
color: #999; color: #A9A096;
} }
.anniversary-remark { .anniversary-remark {
font-size: 26rpx; font-size: 24rpx;
color: #999; color: #5A5247;
line-height: 1.6; line-height: 1.65;
margin: 16rpx 0; margin: 14rpx 0;
padding: 16rpx; padding: 14rpx 18rpx;
background-color: #f9f9f9; background-color: #FAF6ED;
border-radius: 8rpx; border-radius: 8rpx;
} }
.anniversary-actions { .anniversary-actions {
display: flex; display: flex;
gap: 16rpx; gap: 14rpx;
margin-top: 24rpx; margin-top: 20rpx;
padding-top: 24rpx; padding-top: 20rpx;
border-top: 1px solid #f0f0f0; border-top: 1rpx solid #E8E2D5;
} }
.edit-btn, .edit-btn,
.delete-btn { .delete-btn {
flex: 1; flex: 1;
height: 64rpx; height: 60rpx;
line-height: 64rpx; line-height: 60rpx;
border-radius: 8rpx; border-radius: 10rpx;
font-size: 24rpx; font-size: 22rpx;
border: none; border: 1rpx solid #E8E2D5;
background-color: #FFFFFF;
font-weight: 500;
} }
.edit-btn { .edit-btn {
background-color: #f5f5f5; color: #1F1D2B;
color: #666;
} }
.delete-btn { .delete-btn {
background-color: #fff3f0; color: #C8412F;
color: #ff5722; border-color: #E8BCA7;
} }
.edit-btn::after, .edit-btn::after,
@@ -255,19 +280,20 @@
border: none; border: none;
} }
/* ───── 空状态 ───── */
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 120rpx 40rpx; padding: 96rpx 40rpx;
} }
.empty-state .icon { .empty-state .icon {
font-size: 120rpx; font-size: 96rpx;
display: block; display: block;
margin-bottom: 32rpx; margin-bottom: 20rpx;
opacity: 0.7;
} }
.empty-state .text { .empty-state .text {
font-size: 28rpx; font-size: 26rpx;
color: #999; color: #A9A096;
} }
pages/settings/settings.wxss
+73 -75
View File
@@ -1,20 +1,21 @@
/* settings.wxss */ /* settings.wxss
* 视觉方向：纸感编辑风（A 方案，与首页/日历一致）
*/
page { page {
background: #f1f4f9; background: #FAF6ED;
} }
.page { .page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background: #f1f4f9; background: #FAF6ED;
} }
/* ───── Header ───── */ /* ───── Header ───── */
.header { .header {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); padding: 32rpx 36rpx 24rpx;
padding: 48rpx 36rpx 40rpx;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -22,7 +23,7 @@ page {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
margin-bottom: 32rpx; margin-bottom: 28rpx;
} }
.header-left { .header-left {
@@ -31,57 +32,54 @@ page {
} }
.header-title { .header-title {
font-size: 44rpx; font-size: 52rpx;
font-weight: 700; font-weight: 600;
color: #fff; color: #1F1D2B;
line-height: 1.2; line-height: 1.15;
letter-spacing: 2rpx; letter-spacing: -0.5rpx;
} }
.header-sub { .header-sub {
font-size: 26rpx; font-size: 26rpx;
color: rgba(255, 255, 255, 0.7); color: #8A8278;
margin-top: 8rpx; margin-top: 10rpx;
} }
.header-icon { .header-icon {
font-size: 64rpx; font-size: 56rpx;
opacity: 0.9; opacity: 0.85;
} }
.stats-row { .stats-row {
display: flex; display: flex;
align-items: center; gap: 64rpx;
background: rgba(255, 255, 255, 0.15); padding-top: 12rpx;
border-radius: 20rpx; border-top: 1rpx solid #E8E2D5;
padding: 20rpx 32rpx; padding-top: 24rpx;
margin-top: 4rpx;
} }
.stat-item { .stat-item {
display: flex; display: flex;
align-items: baseline; flex-direction: column;
gap: 8rpx; gap: 4rpx;
flex: 1;
justify-content: center;
} }
.stat-num { .stat-num {
font-size: 48rpx; font-size: 44rpx;
font-weight: 700; font-weight: 600;
color: #fff; color: #1F1D2B;
line-height: 1; line-height: 1;
letter-spacing: -1rpx;
} }
.stat-label { .stat-label {
font-size: 24rpx; font-size: 24rpx;
color: rgba(255, 255, 255, 0.75); color: #8A8278;
} }
.stat-sep { .stat-sep {
width: 2rpx; display: none;
height: 48rpx;
background: rgba(255, 255, 255, 0.25);
flex-shrink: 0;
} }
/* ───── Body ───── */ /* ───── Body ───── */
@@ -92,48 +90,48 @@ page {
/* ───── Section label ───── */ /* ───── Section label ───── */
.section-label { .section-label {
font-size: 24rpx; font-size: 22rpx;
font-weight: 600; font-weight: 500;
color: #94a3b8; color: #8A8278;
letter-spacing: 2rpx; letter-spacing: 2rpx;
padding: 32rpx 32rpx 12rpx; padding: 28rpx 32rpx 12rpx;
text-transform: uppercase; text-transform: uppercase;
} }
/* ───── Card group ───── */ /* ───── Card group ───── */
.card-group { .card-group {
background: #fff; background: #FFFFFF;
border-radius: 20rpx; border: 1rpx solid #E8E2D5;
border-radius: 14rpx;
margin: 0 24rpx; margin: 0 24rpx;
overflow: hidden; overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
} }
/* ───── Row ───── */ /* ───── Row ───── */
.row { .row {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 28rpx 28rpx; padding: 24rpx 28rpx;
transition: background 0.15s ease; transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
} }
.row:active { .row:active {
background: #f8fafc; background: #F8F4EA;
} }
.row-icon-wrap { .row-icon-wrap {
width: 72rpx; width: 64rpx;
height: 72rpx; height: 64rpx;
border-radius: 18rpx; border-radius: 14rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
margin-right: 24rpx; margin-right: 20rpx;
} }
.row-icon { .row-icon {
font-size: 36rpx; font-size: 32rpx;
} }
.row-body { .row-body {
@@ -144,77 +142,77 @@ page {
} }
.row-title { .row-title {
font-size: 30rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: #1e293b; color: #1F1D2B;
} }
.row-title.danger { .row-title.danger {
color: #ef4444; color: #C8412F;
} }
.row-desc { .row-desc {
font-size: 24rpx; font-size: 22rpx;
color: #94a3b8; color: #A9A096;
} }
.row-desc.danger { .row-desc.danger {
color: #fca5a5; color: #E29F92;
} }
.row-arrow { .row-arrow {
font-size: 40rpx; font-size: 36rpx;
color: #cbd5e1; color: #C8C2B4;
margin-left: 12rpx; margin-left: 12rpx;
} }
.row-arrow.danger { .row-arrow.danger {
color: #fca5a5; color: #E29F92;
} }
.row-value { .row-value {
font-size: 28rpx; font-size: 26rpx;
color: #64748b; color: #8A8278;
} }
.row-divider { .row-divider {
height: 1rpx; height: 1rpx;
background: #f1f5f9; background: #E8E2D5;
margin-left: 120rpx; margin-left: 112rpx;
} }
/* ───── Tips card ───── */ /* ───── Tips card ───── */
/* 删原 border-left 6rpx 紫色条（禁项），改全边线 + 浅暖底标识 */
.tips-card { .tips-card {
background: #fff; background: #FFF8EE;
border-radius: 20rpx; border: 1rpx solid #EFD9B5;
margin: 8rpx 24rpx 0; border-radius: 14rpx;
padding: 28rpx 28rpx 32rpx; margin: 12rpx 24rpx 0;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); padding: 24rpx 28rpx 28rpx;
border-left: 6rpx solid #6366f1;
} }
.tips-title { .tips-title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12rpx; gap: 12rpx;
margin-bottom: 20rpx; margin-bottom: 16rpx;
} }
.tips-icon { .tips-icon {
font-size: 32rpx; font-size: 30rpx;
} }
.tips-heading { .tips-heading {
font-size: 28rpx; font-size: 26rpx;
font-weight: 600; font-weight: 600;
color: #1e293b; color: #1F1D2B;
} }
.tips-item { .tips-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 12rpx; gap: 12rpx;
margin-bottom: 12rpx; margin-bottom: 10rpx;
} }
.tips-item:last-child { .tips-item:last-child {
@@ -222,16 +220,16 @@ page {
} }
.tips-dot { .tips-dot {
font-size: 28rpx; font-size: 26rpx;
color: #6366f1; color: #B36A1F;
line-height: 1.8; line-height: 1.8;
flex-shrink: 0; flex-shrink: 0;
} }
.tips-text { .tips-text {
font-size: 26rpx; font-size: 24rpx;
color: #475569; color: #5A5247;
line-height: 1.8; line-height: 1.7;
} }
/* ───── Bottom padding ───── */ /* ───── Bottom padding ───── */
utils/constants.js
+3 -3
View File
@@ -34,9 +34,9 @@ const IMPORTANCE_TEXTS = {
} }
const IMPORTANCE_COLORS = { const IMPORTANCE_COLORS = {
high: '#ff5722', high: '#C8412F', // 墨红（与全局强调色一致）
medium: '#ff9800', medium: '#B36A1F', // 焦糖
low: '#07c160' low: '#6F8C58' // 苔绿
} }
module.exports = { module.exports = {