daoqi/youlegames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Date Calculator UI to Morandi theme and fix logic; fix Index page interaction

Browse Source
This commit is contained in:
Joywayer
2026-02-07 20:25:50 +08:00
parent a21716e772
commit 19c762b3fa
11 changed files with 1636 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.json
View File

@@ -1,4 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "日期计算器"
"navigationBarTitleText": "日期计算与农历转换",
"navigationBarBackgroundColor": "#f5f6fa",
"navigationBarTextStyle": "black"
}

226
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.ts
View File

@@ -1,16 +1,40 @@
// pages/date-calc/date-calc.ts
import { solarToLunar, lunarToSolar, getSolarTerm, getFestival, getLunarFestival } from '../../utils/lunar';
Page({
data: {
currentTab: 0,
startDate: '',
startWeekday: '', // 新增：开始日期的星期
startWeekday: '',
endDate: '',
days: 0, // 可以为空字符串以便清空输入框，但 input type number 会处理
days: 0,
resultDate: '',
resultWeekday: '',
resultLunar: '',
intervalDays: 0,
intervalWeeks: 0,
intervalRemainingDays: 0
intervalRemainingDays: 0,
intervalMonths: 0,
intervalExtraDays: 0,
// 农历转换相关
lunarDirection: 'toL', // 'toL' 公历→农历, 'toS' 农历→公历
lunarSolarDate: '',
lunarResult: null as any,
lunarFestivalText: '',
solarTermText: '',
solarFestivalText: '',
// 农历→公历
lunarPickerRange: [[] as string[], [] as string[], [] as string[]],
lunarPickerValue: [0, 0, 0],
lunarPickerDisplay: '',
lunarToSolarResult: '',
lunarToSolarWeekday: '',
// 今日信息
todaySolar: '',
todayLunar: '',
todayGanZhi: '',
todayAnimal: '',
todayTerm: ''
},
onLoad() {
@@ -21,15 +45,23 @@ Page({
endDate: dateStr,
resultDate: dateStr,
resultWeekday: this.getWeekday(today),
startWeekday: this.getWeekday(today)
startWeekday: this.getWeekday(today),
lunarSolarDate: dateStr
});
// 初始化农历相关
this.initLunarPicker();
this.updateTodayInfo();
this.convertSolarToLunar(dateStr);
this.updateResultLunar(today);
},
switchTab(e: any) {
wx.vibrateShort({ type: 'light' }).catch(() => {});
this.setData({
currentTab: parseFloat(e.currentTarget.dataset.index)
});
this.calculate(); // 切换时重新计算
this.calculate();
},
bindDateChange(e: any) {
@@ -38,9 +70,8 @@ Page({
[field]: e.detail.value
});
// 如果修改的是开始日期，同步更新星期显示
if (field === 'startDate') {
const d = new Date(e.detail.value);
const d = new Date(e.detail.value.replace(/-/g, '/'));
this.setData({ startWeekday: this.getWeekday(d) });
}
@@ -49,7 +80,6 @@ Page({
bindDaysInput(e: any) {
const val = e.detail.value;
// 允许输入负号
if (val === '-' || val === '') {
this.setData({ days: val });
return;
@@ -61,6 +91,7 @@ Page({
},
setDays(e: any) {
wx.vibrateShort({ type: 'light' }).catch(() => {});
const days = parseInt(e.currentTarget.dataset.days);
this.setData({ days: days });
this.calculate();
@@ -68,20 +99,16 @@ Page({
calculate() {
if (this.data.currentTab === 0) {
// 日期推算
// 注意：直接使用 new Date('2023-10-01') 在 iOS 上可能不兼容，应替换为 '/'
const start = new Date(this.data.startDate.replace(/-/g, '/'));
// days 可能是字符串或数字
const dayOffset = typeof(this.data.days) === 'number' ? this.data.days : parseInt(this.data.days || '0');
const target = new Date(start.getTime() + dayOffset * 24 * 60 * 60 * 1000);
this.setData({
resultDate: this.formatDate(target),
resultWeekday: this.getWeekday(target)
});
} else {
// 日期通过 (Interval)
this.updateResultLunar(target);
} else if (this.data.currentTab === 1) {
const start = new Date(this.data.startDate.replace(/-/g, '/'));
const end = new Date(this.data.endDate.replace(/-/g, '/'));
const diffTime = Math.abs(end.getTime() - start.getTime());
@@ -89,15 +116,184 @@ Page({
const weeks = Math.floor(diffDays / 7);
const remainingDays = diffDays % 7;
const months = Math.floor(diffDays / 30);
const extraDays = diffDays % 30;
this.setData({
intervalDays: diffDays,
intervalWeeks: weeks,
intervalRemainingDays: remainingDays
intervalRemainingDays: remainingDays,
intervalMonths: months,
intervalExtraDays: extraDays
});
}
},
// 更新推算结果的农历信息
updateResultLunar(date: Date) {
try {
const lunar = solarToLunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
this.setData({
resultLunar: lunar.monthName + lunar.dayName
});
} catch (e) {
this.setData({ resultLunar: '' });
}
},
// === 农历转换相关 ===
setLunarDirection(e: any) {
wx.vibrateShort({ type: 'light' }).catch(() => {});
this.setData({ lunarDirection: e.currentTarget.dataset.dir });
},
toggleLunarDirection() {
wx.vibrateShort({ type: 'light' }).catch(() => {});
this.setData({
lunarDirection: this.data.lunarDirection === 'toL' ? 'toS' : 'toL'
});
},
onLunarSolarDateChange(e: any) {
const dateStr = e.detail.value;
this.setData({ lunarSolarDate: dateStr });
this.convertSolarToLunar(dateStr);
},
convertSolarToLunar(dateStr: string) {
try {
const parts = dateStr.split('-');
const year = parseInt(parts[0]);
const month = parseInt(parts[1]);
const day = parseInt(parts[2]);
const result = solarToLunar(year, month, day);
const term = getSolarTerm(year, month, day);
const solarFest = getFestival(month, day);
const lunarFest = getLunarFestival(result.month, result.day);
this.setData({
lunarResult: result,
solarTermText: term || '',
solarFestivalText: solarFest || '',
lunarFestivalText: lunarFest || ''
});
} catch (e) {
console.error('农历转换出错:', e);
}
},
// 初始化农历选择器
initLunarPicker() {
const years: string[] = [];
for (let y = 1901; y <= 2099; y++) {
years.push(y + '年');
}
const months: string[] = [];
for (let m = 1; m <= 12; m++) {
months.push(this.getLunarMonthLabel(m));
}
const days: string[] = [];
for (let d = 1; d <= 30; d++) {
days.push(this.getLunarDayLabel(d));
}
const today = new Date();
// Calculate today's lunar date to set default picker value
const result = solarToLunar(today.getFullYear(), today.getMonth() + 1, today.getDate());
const yearIdx = result.year - 1901;
const monthIdx = result.month - 1;
const dayIdx = result.day - 1;
const display = `${result.year}年 ${result.monthName} ${result.dayName}`;
this.setData({
lunarPickerRange: [years, months, days],
lunarPickerValue: [yearIdx >= 0 ? yearIdx : 0, monthIdx, dayIdx],
lunarPickerDisplay: display
});
// Also init the reverse calculation result
this.calcLunarToSolar(result.year, result.month, result.day);
},
getLunarMonthLabel(m: number): string {
const names = ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
return names[m - 1];
},
getLunarDayLabel(d: number): string {
const names = [
'初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
'十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
'廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'
];
return names[d - 1];
},
onLunarColumnChange(e: any) {
// 列变化时可以联动更新（简化处理）
},
onLunarPickerChange(e: any) {
const val = e.detail.value;
const year = 1901 + val[0];
const month = val[1] + 1;
const day = val[2] + 1;
const display = `${year}年 ${this.getLunarMonthLabel(month)} ${this.getLunarDayLabel(day)}`;
this.setData({
lunarPickerValue: val,
lunarPickerDisplay: display,
});
this.calcLunarToSolar(year, month, day);
},
calcLunarToSolar(year: number, month: number, day: number) {
try {
const result = lunarToSolar(year, month, day, false);
const solarDate = new Date(result.year, result.month - 1, result.day);
const solarStr = this.formatDate(solarDate);
this.setData({
lunarToSolarResult: solarStr,
lunarToSolarWeekday: this.getWeekday(solarDate)
});
} catch (e) {
this.setData({
lunarToSolarResult: '无效日期',
lunarToSolarWeekday: ''
});
}
},
// 今日信息
updateTodayInfo() {
const today = new Date();
const y = today.getFullYear();
const m = today.getMonth() + 1;
const d = today.getDate();
try {
const lunar = solarToLunar(y, m, d);
const term = getSolarTerm(y, m, d);
this.setData({
todaySolar: `${y}年${m}月${d}日 ${this.getWeekday(today)}`,
todayLunar: lunar.monthName + lunar.dayName,
todayGanZhi: lunar.ganZhi + '年',
todayAnimal: lunar.animal,
todayTerm: term || ''
});
} catch (e) {
console.error('获取今日信息出错:', e);
}
},
formatDate(date: Date): string {
const y = date.getFullYear();
const m = (date.getMonth() + 1).toString().padStart(2, '0');

233
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.wxml
View File

@@ -3,94 +3,181 @@
<!-- 顶部 Tab 切换 -->
<view class="tab-header">
<view class="tab-pill {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-index="{{0}}">
<text class="tab-icon">📅</text> <text>日期推算</text>
</view>
<view class="tab-pill {{currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-index="{{1}}">
<text class="tab-icon">⏳</text> <text>间隔计算</text>
</view>
<view class="tab-pill {{currentTab === 0 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="{{0}}">日期推算</view>
<view class="tab-pill {{currentTab === 1 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="{{1}}">间隔计算</view>
<view class="tab-pill {{currentTab === 2 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="{{2}}">农历转换</view>
</view>
<!-- 内容区 -->
<view class="content-wrapper">
<!-- 模式1: 日期推算 -->
<block wx:if="{{currentTab === 0}}">
<view class="card input-card">
<view class="card-title">开始日期</view>
<!-- ========== 模式1: 日期推算 ========== -->
<block wx:if="{{currentTab === 0}}">
<!-- 日期选择 -->
<view class="card input-card">
<view class="card-label">开始日期</view>
<picker mode="date" value="{{startDate}}" bindchange="bindDateChange" data-field="startDate">
<view class="date-picker-bar" hover-class="picker-bar-hover">
<view class="picker-left">
<text class="picker-date">{{startDate || '请选择'}}</text>
<text class="picker-weekday">{{startWeekday}}</text>
</view>
<view class="picker-arrow">✎</view>
</view>
</picker>
</view>
<!-- 推算天数 -->
<view class="card input-card">
<view class="card-label">推算天数</view>
<view class="days-input-group">
<input class="days-input" type="number" placeholder="输入天数" placeholder-style="color:#ccc;font-size:36rpx;font-weight:400" bindinput="bindDaysInput" value="{{days}}" />
<text class="days-suffix">天</text>
</view>
<view class="quick-tags">
<view class="tag tag-plus" hover-class="tag-hover" bindtap="setDays" data-days="7">+1周</view>
<view class="tag tag-plus" hover-class="tag-hover" bindtap="setDays" data-days="30">+1月</view>
<view class="tag tag-plus" hover-class="tag-hover" bindtap="setDays" data-days="100">+百日</view>
<view class="tag tag-plus" hover-class="tag-hover" bindtap="setDays" data-days="365">+1年</view>
<view class="tag tag-minus" hover-class="tag-minus-hover" bindtap="setDays" data-days="-1">-1天</view>
<view class="tag tag-minus" hover-class="tag-minus-hover" bindtap="setDays" data-days="-7">-1周</view>
</view>
</view>
<!-- 推算结果 -->
<view class="result-card">
<view class="result-label">推算结果</view>
<view class="result-main">{{resultDate}}</view>
<view class="result-extra">{{resultWeekday}}</view>
<view class="result-tag" wx:if="{{resultLunar}}">🌙 农历 {{resultLunar}}</view>
</view>
</block>
<!-- ========== 模式2: 日期间隔 ========== -->
<block wx:if="{{currentTab === 1}}">
<view class="card input-card interval-card-compact">
<!-- 起始 -->
<view class="iv-col">
<view class="iv-small-label">起始日期</view>
<picker mode="date" value="{{startDate}}" bindchange="bindDateChange" data-field="startDate">
<view class="date-display">
<text class="date-text">{{startDate || '请选择'}}</text>
<text class="date-week">{{startWeekday}}</text>
<view class="edit-icon">✎</view>
<view class="iv-pill" hover-class="iv-pill-hover">
{{startDate}}
</view>
</picker>
<view class="divider"></view>
</view>
<!-- 连接符 -->
<view class="iv-connector">
<view class="iv-arrow-icon">→</view>
</view>
<view class="card-title">推算天数</view>
<view class="input-row">
<input class="days-input" type="number" placeholder="0" bindinput="bindDaysInput" value="{{days}}" />
<text class="input-unit">天后</text>
</view>
<!-- 快捷标签 -->
<view class="tags-row">
<view class="tag" bindtap="setDays" data-days="7">+1周</view>
<view class="tag" bindtap="setDays" data-days="30">+1月</view>
<view class="tag" bindtap="setDays" data-days="100">+百日</view>
<view class="tag tag-red" bindtap="setDays" data-days="-1">-1天</view>
<!-- 结束 -->
<view class="iv-col">
<view class="iv-small-label">结束日期</view>
<picker mode="date" value="{{endDate}}" bindchange="bindDateChange" data-field="endDate">
<view class="iv-pill" hover-class="iv-pill-hover">
{{endDate}}
</view>
</picker>
</view>
</view>
<!-- 间隔结果 -->
<view class="result-card">
<view class="result-label">时间跨度</view>
<view class="interval-num-row">
<text class="interval-big-num">{{intervalDays}}</text>
<text class="interval-big-unit">天</text>
</view>
<view class="result-detail-row" wx:if="{{intervalWeeks > 0 || intervalMonths > 0}}">
<text class="result-detail" wx:if="{{intervalWeeks > 0}}">≈ {{intervalWeeks}} 周{{intervalRemainingDays > 0 ? ' ' + intervalRemainingDays + ' 天' : ''}}</text>
<text class="result-detail-sep" wx:if="{{intervalWeeks > 0 && intervalMonths > 0}}">|</text>
<text class="result-detail" wx:if="{{intervalMonths > 0}}">≈ {{intervalMonths}} 个月{{intervalExtraDays > 0 ? ' ' + intervalExtraDays + ' 天' : ''}}</text>
</view>
</view>
</block>
<!-- ========== 模式3: 农历转换 ========== -->
<block wx:if="{{currentTab === 2}}">
<!-- 输入卡片（固定结构） -->
<view class="card input-card">
<view class="lunar-header-row">
<view class="card-label" style="margin-bottom:0">{{lunarDirection === 'toL' ? '选择公历日期' : '选择农历日期'}}</view>
<view class="dir-switch" hover-class="dir-switch-hover" bindtap="toggleLunarDirection">
<text class="dir-switch-text">切换为 {{lunarDirection === 'toL' ? '农历→公历' : '公历→农历'}}</text>
<text class="dir-switch-icon">⇄</text>
</view>
</view>
<view class="card result-card">
<view class="result-header">计算结果</view>
<view class="result-date">{{resultDate}}</view>
<view class="result-week">{{resultWeekday}}</view>
</view>
</block>
<!-- 模式2: 日期间隔 -->
<block wx:if="{{currentTab === 1}}">
<view class="card input-card">
<!-- 开始日期 -->
<view class="date-row">
<view class="row-label">开始</view>
<picker mode="date" value="{{startDate}}" bindchange="bindDateChange" data-field="startDate">
<view class="date-pill">
{{startDate}} <text class="pill-icon">▼</text>
</view>
</picker>
<!-- 公历日期选择 -->
<picker wx:if="{{lunarDirection === 'toL'}}" mode="date" value="{{lunarSolarDate}}" bindchange="onLunarSolarDateChange">
<view class="date-picker-bar" hover-class="picker-bar-hover">
<view class="picker-left">
<text class="picker-date">{{lunarSolarDate || '请选择'}}</text>
</view>
<view class="picker-arrow">✎</view>
</view>
</picker>
<view class="timeline-connect">
<view class="dots"></view>
<view class="duration-badge">相隔</view>
<view class="dots"></view>
<!-- 农历日期选择 -->
<picker wx:if="{{lunarDirection === 'toS'}}" mode="multiSelector" range="{{lunarPickerRange}}" value="{{lunarPickerValue}}" bindchange="onLunarPickerChange" bindcolumnchange="onLunarColumnChange">
<view class="date-picker-bar" hover-class="picker-bar-hover">
<view class="picker-left">
<text class="picker-date">{{lunarPickerDisplay || '请选择'}}</text>
</view>
<view class="picker-arrow">✎</view>
</view>
</picker>
</view>
<!-- 结束日期 -->
<view class="date-row">
<view class="row-label">结束</view>
<picker mode="date" value="{{endDate}}" bindchange="bindDateChange" data-field="endDate">
<view class="date-pill">
{{endDate}} <text class="pill-icon">▼</text>
</view>
</picker>
<!-- 结果卡片 -->
<view class="result-card" wx:if="{{(lunarDirection === 'toL' && lunarResult) || (lunarDirection === 'toS' && lunarToSolarResult)}}">
<!-- 公历 -> 农历结果 -->
<block wx:if="{{lunarDirection === 'toL'}}">
<view class="result-label">对应农历</view>
<view class="lunar-hero">{{lunarResult.monthName}}{{lunarResult.dayName}}</view>
<view class="lunar-sub">{{lunarResult.ganZhi}}年 · {{lunarResult.animal}}年</view>
<view class="lunar-tags" wx:if="{{lunarFestivalText || solarTermText || solarFestivalText}}">
<view class="lunar-tag festival" wx:if="{{lunarFestivalText}}">🎊 {{lunarFestivalText}}</view>
<view class="lunar-tag term" wx:if="{{solarTermText}}">🌿 {{solarTermText}}</view>
<view class="lunar-tag solar" wx:if="{{solarFestivalText}}">🎉 {{solarFestivalText}}</view>
</view>
</block>
<!-- 农历 -> 公历结果 -->
<block wx:if="{{lunarDirection === 'toS'}}">
<view class="result-label">对应公历</view>
<view class="result-main">{{lunarToSolarResult}}</view>
<view class="result-extra">{{lunarToSolarWeekday}}</view>
</block>
</view>
<!-- 今日信息 -->
<view class="today-card">
<view class="today-title">📌 今日</view>
<view class="today-grid">
<view class="today-cell">
<text class="today-cell-label">公历</text>
<text class="today-cell-value">{{todaySolar}}</text>
</view>
<view class="today-cell">
<text class="today-cell-label">农历</text>
<text class="today-cell-value accent">{{todayLunar}}</text>
</view>
<view class="today-cell">
<text class="today-cell-label">干支</text>
<text class="today-cell-value">{{todayGanZhi}}</text>
</view>
<view class="today-cell">
<text class="today-cell-label">生肖</text>
<text class="today-cell-value">{{todayAnimal}}</text>
</view>
</view>
<view class="card result-card interval-result">
<view class="result-header">时间跨度</view>
<view class="result-huge">
<text class="num">{{intervalDays}}</text>
<text class="unit">天</text>
</view>
<view class="result-sub" wx:if="{{intervalWeeks > 0}}">
约合 {{intervalWeeks}} 周 {{intervalRemainingDays > 0 ? '+ ' + intervalRemainingDays + ' 天' : ''}}
</view>
<view class="today-term-bar" wx:if="{{todayTerm}}">
<text class="term-icon">🌿</text>
<text class="term-text">今日节气：{{todayTerm}}</text>
</view>
</block>
</view>
</view>
</block>
</view>

622
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.wxss
View File

@@ -1,276 +1,520 @@
/* pages/date-calc/date-calc.wxss */
/* ========== 全局变量 ========== */
page {
background-color: #f0f2f5;
color: #333;
--primary-color: #5b73e8;
--primary-light: #e0e6fc;
background-color: #fcfbfd; /* 极淡的紫灰色背景 */
color: #594f6d; /* 莫兰迪深紫灰文字 */
/* 莫兰迪紫色系定义 */
--primary: #9b8ea9; /* 莫兰迪紫/烟熏紫 */
--primary-light: #dcd6e4;
--primary-bg: #f4f1f7;
--card-shadow: 0 4rpx 16rpx rgba(155, 142, 169, 0.1);
--card-radius: 24rpx;
/* 移除渐变，使用莫兰迪纯色 */
--accent-color: #9b8ea9;
}
/* ========== 容器 ========== */
.container {
padding: 30rpx;
padding: 30rpx 32rpx;
padding-bottom: 80rpx;
min-height: 100vh;
box-sizing: border-box;
}
/* Tab 切换 */
/* ========== Tab 切换 ========== */
.tab-header {
display: flex;
background: #ffffff;
display: grid; /* 使用 Grid 均分三列，杜绝挤压 */
grid-template-columns: 1fr 1fr 1fr;
background: #f1f2f6;
padding: 8rpx;
border-radius: 20rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
border-radius: 60rpx;
margin-bottom: 40rpx;
align-items: center;
gap: 8rpx; /* 增加列间距 */
}
.tab-pill {
flex: 1;
text-align: center;
padding: 20rpx 0;
border-radius: 16rpx;
padding: 24rpx 0; /* 增加高度 */
border-radius: 50rpx;
font-size: 28rpx;
color: #666;
color: #a4b0be; /* 莫兰迪浅灰未选中态 */
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
white-space: nowrap;
transition: all 0.2s ease;
position: relative;
z-index: 1;
}
.tab-pill.active {
background-color: var(--primary-light);
color: var(--primary-color);
font-weight: bold;
background: var(--accent-color); /* 纯色背景 */
color: #ffffff;
font-weight: 600;
box-shadow: 0 4rpx 12rpx rgba(155, 142, 169, 0.4); /* 匹配主色的柔和阴影 */
transform: none; /* 移除缩放，防止文字抖动 */
}
.tab-icon {
font-size: 32rpx;
.tab-hover {
background: rgba(0, 0, 0, 0.05); /* 简单的灰色点击态 */
}
/* 卡片通用样式 */
.tab-pill.active.tab-hover {
opacity: 0.9;
background: var(--accent-gradient); /* 保持渐变 */
}
/* ========== 通用卡片 ========== */
.card {
background: #ffffff;
border-radius: 24rpx;
padding: 40rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.04);
background: #fff;
border-radius: var(--card-radius);
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04); /* 更柔和的弥散阴影 */
position: relative;
transition: transform 0.2s;
}
.card-title {
font-size: 24rpx;
color: #999;
margin-bottom: 20rpx;
text-transform: uppercase;
/* 移除旧的顶部边框，使用更现代的左侧强调条 */
.input-card {
border-left: 8rpx solid var(--primary);
}
.card-label {
font-size: 23rpx;
color: #b2bec3;
margin-bottom: 14rpx;
letter-spacing: 1rpx;
font-weight: 600;
}
/* 模式1：日期推算 */
.date-display {
.card-divider {
height: 1rpx;
background: #f0f0f5;
margin: 20rpx 0;
}
/* ========== 日期选择栏（通用） ========== */
.date-picker-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: #f8f9ff;
border-radius: 16rpx;
padding: 20rpx 24rpx;
border: 1rpx solid #eef0f8;
}
.picker-bar-hover {
background: var(--primary-bg);
border-color: var(--primary-light);
}
.picker-left {
display: flex;
align-items: baseline;
padding-bottom: 20rpx;
gap: 14rpx;
}
.date-text {
font-size: 48rpx;
font-weight: bold;
color: #333;
margin-right: 20rpx;
}
.date-week {
font-size: 28rpx;
color: #666;
}
.edit-icon {
margin-left: auto;
color: var(--primary-color);
.picker-date {
font-size: 36rpx;
opacity: 0.8;
font-weight: 700;
color: #2d3436;
}
.divider {
height: 1px;
background: #f0f0f0;
margin: 30rpx 0;
.picker-weekday {
font-size: 24rpx;
color: var(--primary);
background: var(--primary-bg);
padding: 4rpx 14rpx;
border-radius: 10rpx;
font-weight: 600;
}
.input-row {
display: flex;
align-items: center;
border-bottom: 2px solid var(--primary-light);
padding-bottom: 10rpx;
margin-bottom: 30rpx;
.picker-arrow {
color: var(--primary-light);
font-size: 30rpx;
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-bg);
border-radius: 50%;
flex-shrink: 0;
}
/* ========== 天数输入（模式1） ========== */
.days-input-group {
display: flex;
align-items: center;
background: #f8f9ff;
border-radius: 16rpx;
padding: 8rpx 24rpx;
margin-bottom: 20rpx;
border: 1rpx solid #eef0f8;
}
.days-input {
flex: 1;
font-size: 56rpx;
font-weight: bold;
color: var(--primary-color);
height: 80rpx;
flex: 1;
font-size: 42rpx;
font-weight: 700;
color: var(--primary);
height: 72rpx;
font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}
.input-unit {
font-size: 32rpx;
color: #999;
.days-suffix {
font-size: 26rpx;
color: #b2bec3;
font-weight: 500;
flex-shrink: 0;
}
.tags-row {
display: flex;
gap: 20rpx;
/* ========== 快捷标签 ========== */
.quick-tags {
display: flex;
flex-wrap: wrap;
gap: 14rpx;
}
.tag {
background: #f5f7fa;
color: #666;
padding: 12rpx 24rpx;
border-radius: 30rpx;
font-size: 24rpx;
font-weight: 500;
padding: 12rpx 26rpx;
border-radius: 28rpx;
font-size: 24rpx;
font-weight: 600;
border: 1rpx solid transparent;
}
.tag-red {
background: #fff0f0;
color: #ff4d4f;
.tag-plus {
background: #f1f2f6; /* 莫兰迪浅灰 */
color: #747d8c;
border-color: #dfe4ea;
}
/* 结果卡片 */
.tag-minus {
background: #fae1dd; /* 莫兰迪淡粉红 */
color: #c08081; /* 莫兰迪深砖红 */
border-color: #fceceb;
}
.tag-hover {
background: #ced6e0 !important;
color: #57606f !important;
border-color: #a4b0be !important;
transform: scale(0.95);
}
.tag-minus-hover {
background: #f5cdc9 !important;
color: #b37172 !important;
transform: scale(0.95);
}
/* ========== 结果卡片（通用） ========== */
.result-card {
background: var(--primary-color); /* 渐变色更好吗？先用纯色突出 */
background: linear-gradient(135deg, #5b73e8 0%, #455ac0 100%);
color: #fff;
text-align: center;
padding: 50rpx;
background: var(--accent-color); /* 莫兰迪色纯色背景 */
color: #fff;
text-align: center;
padding: 40rpx 32rpx;
border-radius: var(--card-radius);
margin-bottom: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(155, 142, 169, 0.35); /* 匹配紫色的阴影 */
position: relative;
overflow: hidden;
}
.result-header {
font-size: 24rpx;
opacity: 0.8;
margin-bottom: 20rpx;
.result-card::after {
content: '';
position: absolute;
top: -50rpx;
right: -50rpx;
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: rgba(255,255,255,0.1); /* 稍微提高透明度 */
}
.result-date {
font-size: 64rpx;
font-weight: bold;
margin-bottom: 10rpx;
.result-label {
font-size: 21rpx;
opacity: 0.7;
margin-bottom: 14rpx;
letter-spacing: 2rpx;
font-weight: 600;
}
.result-week {
font-size: 32rpx;
opacity: 0.9;
.result-main {
font-size: 48rpx;
font-weight: 700;
margin-bottom: 6rpx;
letter-spacing: 1rpx;
}
/* 模式2：日期间隔 */
.date-row {
display: flex;
justify-content: space-between;
align-items: center;
.result-extra {
font-size: 28rpx;
opacity: 0.85;
font-weight: 500;
}
.row-label {
font-size: 30rpx;
color: #666;
font-weight: bold;
.result-tag {
font-size: 24rpx;
opacity: 0.8;
margin-top: 12rpx;
background: rgba(255,255,255,0.12);
display: inline-block;
padding: 6rpx 18rpx;
border-radius: 14rpx;
}
.date-pill {
background: #f5f7fa;
padding: 16rpx 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
color: #333;
font-weight: 500;
display: flex;
align-items: center;
gap: 10rpx;
/* ========== 模式2：日期间隔 (Compact) ========== */
.interval-card-compact {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 24rpx; /* Increase vertical padding */
}
.pill-icon {
font-size: 20rpx;
color: #999;
.iv-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.timeline-connect {
display: flex;
align-items: center; /* 居中对齐 */
margin: 30rpx 0;
padding-left: 20rpx; /* 微调对齐 */
.iv-small-label {
font-size: 24rpx;
color: #b2bec3;
margin-bottom: 16rpx;
font-weight: 500;
}
.dots {
width: 2px;
height: 40rpx;
border-left: 2px dashed #ddd; /* 使用左边框模拟竖线 */
margin: 0 auto; /* 水平居中 */
.iv-pill {
background: #f8f9ff;
padding: 16rpx 32rpx; /* Wider padding */
border-radius: 20rpx;
font-size: 34rpx;
font-weight: 600;
color: #2d3436;
border: 1rpx solid #eef0f8;
white-space: nowrap;
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.02);
transition: all 0.2s;
}
/* 实际上我想做竖向的时间轴，但在 input-card 里横向可能更好看，但这设计是竖向列表？
重新设计 timeline 为竖向的连接线
*/
.input-card {
position: relative;
.iv-pill-hover {
background: var(--primary-bg);
border-color: var(--primary-light);
color: var(--primary);
transform: translateY(-2rpx);
}
/* 覆盖上面的 timeline-connect 为竖向视觉连接 */
.timeline-connect {
display: flex;
flex-direction: column; /* 竖向 */
align-items: flex-start; /* 靠左对齐，或者根据布局 */
margin: 30rpx 0;
padding-left: 0;
position: relative;
height: 60rpx; /* 高度 */
justify-content: center;
.iv-connector {
width: 80rpx;
display: flex;
justify-content: center;
align-items: center;
padding-top: 40rpx; /* Align with text */
}
.dots {
/* 复用为无形占位或改用伪元素连线 */
display: none;
}
.timeline-connect::before {
content: '';
position: absolute;
left: 40rpx; /* 连接线的位置，约等于 row-label 的中心 */
top: -20rpx;
bottom: -20rpx;
width: 2rpx;
background: #e0e0e0;
z-index: 0;
}
.duration-badge {
position: relative;
z-index: 1;
background: #e6f7ff;
color: #1890ff;
font-size: 22rpx;
padding: 6rpx 20rpx;
border-radius: 20rpx;
margin-left: 20rpx; /* 避开左侧文字 */
align-self: center; /* 居中 */
.iv-arrow-icon {
font-size: 32rpx;
color: #b2bec3;
font-weight: 700;
}
/* 间隔结果 */
.interval-result .result-huge {
font-size: 80rpx;
font-weight: bold;
margin-bottom: 10rpx;
.interval-num-row {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 8rpx;
}
.interval-result .unit {
font-size: 32rpx;
font-weight: normal;
margin-left: 10rpx;
.interval-big-num {
font-size: 72rpx;
font-weight: 700;
letter-spacing: 2rpx;
}
.interval-result .result-sub {
font-size: 28rpx;
opacity: 0.9;
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 20rpx;
display: inline-block;
.interval-big-unit {
font-size: 28rpx;
font-weight: 400;
margin-left: 8rpx;
opacity: 0.75;
}
.result-detail-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
margin-top: 8rpx;
opacity: 0.8;
font-size: 24rpx;
}
.result-detail {
font-size: 24rpx;
}
.result-detail-sep {
opacity: 0.4;
font-size: 20rpx;
}
/* ========== 模式3：农历转换 ========== */
/* 方向切换（行内文字链接样式 -> 按钮样式） */
.lunar-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24rpx;
}
.dir-switch {
display: flex;
align-items: center;
gap: 8rpx;
padding: 12rpx 24rpx;
border-radius: 30rpx;
background: var(--primary-bg);
transition: all 0.2s;
border: 1rpx solid transparent; /* 防止抖动 */
}
.dir-switch-hover {
background: #e2e0ff; /* slightly darker primary-bg */
transform: scale(0.98);
}
.dir-switch-text {
font-size: 24rpx;
color: var(--primary);
font-weight: 700;
}
.dir-switch-icon {
font-size: 24rpx;
color: var(--primary);
font-weight: 700;
}
/* 农历结果卡片 */
.lunar-result-card {
text-align: center;
}
.lunar-hero {
font-size: 48rpx;
font-weight: 700;
margin-bottom: 6rpx;
letter-spacing: 3rpx;
}
.lunar-sub {
font-size: 26rpx;
opacity: 0.8;
margin-bottom: 16rpx;
font-weight: 500;
}
.lunar-tags {
display: flex;
flex-wrap: wrap;
gap: 10rpx;
justify-content: center;
border-top: 1rpx solid rgba(255,255,255,0.12);
padding-top: 16rpx;
}
.lunar-tag {
background: rgba(255,255,255,0.12);
border-radius: 12rpx;
padding: 8rpx 20rpx;
font-size: 24rpx;
font-weight: 600;
}
.lunar-tag.festival {
color: #ffeaa7;
}
.lunar-tag.term {
color: #55efc4;
}
.lunar-tag.solar {
color: #fff;
}
/* ========== 今日信息 ========== */
.today-card {
background: #fff;
border-radius: var(--card-radius);
padding: 28rpx 32rpx;
margin-bottom: 20rpx;
box-shadow: var(--card-shadow);
border-left: 5rpx solid var(--primary);
}
.today-title {
font-size: 28rpx;
font-weight: 700;
color: #2d3436;
margin-bottom: 16rpx;
}
.today-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14rpx;
margin-bottom: 4rpx;
}
.today-cell {
background: #f8f9ff;
border-radius: 14rpx;
padding: 16rpx 20rpx;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.today-cell-label {
font-size: 21rpx;
color: #b2bec3;
font-weight: 600;
}
.today-cell-value {
font-size: 28rpx;
color: #2d3436;
font-weight: 700;
}
.today-cell-value.accent {
color: var(--primary);
}
.today-term-bar {
display: flex;
align-items: center;
gap: 8rpx;
margin-top: 14rpx;
background: var(--primary-bg);
padding: 14rpx 20rpx;
border-radius: 14rpx;
}
.term-icon {
font-size: 24rpx;
}
.term-text {
font-size: 25rpx;
color: var(--primary);
font-weight: 600;
}