fix(home): 首页排版细节优化
- 宜忌弹窗字体 44→32rpx、收紧间距,20+ 条可完整显示 - 历史上的今天内页年份加粗、文字稍小,修正层级 - 节日速查外页3条/内页10条,佛历开启时并入排序 - 统一「更多」箭头为 >>
This commit is contained in:
@@ -47,6 +47,7 @@ Page({
|
|||||||
zoomTitle: '',
|
zoomTitle: '',
|
||||||
zoomType: '',
|
zoomType: '',
|
||||||
zoomData: null,
|
zoomData: null,
|
||||||
|
zoomScrollTop: 0,
|
||||||
// 设置
|
// 设置
|
||||||
showBuddhist: false,
|
showBuddhist: false,
|
||||||
highlightLunar: true
|
highlightLunar: true
|
||||||
@@ -97,7 +98,8 @@ Page({
|
|||||||
const termTime = dayInfo.solarTerm ? (SOLAR_TERM_TIMES[dayInfo.solarTerm] || '') : '';
|
const termTime = dayInfo.solarTerm ? (SOLAR_TERM_TIMES[dayInfo.solarTerm] || '') : '';
|
||||||
const isFirstOrFifteen = this.data.highlightLunar && (dayInfo.lunarDay === 1 || dayInfo.lunarDay === 15);
|
const isFirstOrFifteen = this.data.highlightLunar && (dayInfo.lunarDay === 1 || dayInfo.lunarDay === 15);
|
||||||
const nextBuddhist = this.data.showBuddhist ? getNextBuddhistFestival(y, m, d) : null;
|
const nextBuddhist = this.data.showBuddhist ? getNextBuddhistFestival(y, m, d) : null;
|
||||||
const upcoming = getUpcomingFestivals(10, y, m, d);
|
// 外页只显示最近3条(佛历开启时并入排序);内页弹窗见 openZoom 取10条
|
||||||
|
const upcoming = getUpcomingFestivals(3, y, m, d, this.data.showBuddhist);
|
||||||
return {
|
return {
|
||||||
key: fmt(y, m, d),
|
key: fmt(y, m, d),
|
||||||
dayInfo, almanac, legalHoliday, workday, termTime,
|
dayInfo, almanac, legalHoliday, workday, termTime,
|
||||||
@@ -429,7 +431,8 @@ Page({
|
|||||||
};
|
};
|
||||||
} else if (type === 'fest') {
|
} else if (type === 'fest') {
|
||||||
zoomTitle = '近期节日';
|
zoomTitle = '近期节日';
|
||||||
zoomData = { upcoming: dayItem.upcoming };
|
// 内页显示最近10条(佛历开启时并入排序)
|
||||||
|
zoomData = { upcoming: getUpcomingFestivals(10, dayInfo.solarYear, dayInfo.solarMonth, dayInfo.solarDay, this.data.showBuddhist) };
|
||||||
} else if (type === 'fest-year') {
|
} else if (type === 'fest-year') {
|
||||||
zoomTitle = `${dayInfo.solarYear}年节日`;
|
zoomTitle = `${dayInfo.solarYear}年节日`;
|
||||||
zoomData = { yearFestivals: getYearFestivals(dayInfo.solarYear) };
|
zoomData = { yearFestivals: getYearFestivals(dayInfo.solarYear) };
|
||||||
|
|||||||
@@ -156,7 +156,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="otd-foot">
|
<view class="otd-foot">
|
||||||
<text class="otd-source">来源:中文维基百科</text>
|
<text class="otd-source">来源:中文维基百科</text>
|
||||||
<text class="otd-more" bindtap="openZoom" data-type="otd" data-date="{{dayItem.key}}">查看完整 ›</text>
|
<text class="otd-more" bindtap="openZoom" data-type="otd" data-date="{{dayItem.key}}">查看完整 >></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="card placeholder-card" wx:elif="{{dayItem.otdLoading}}">
|
<view class="card placeholder-card" wx:elif="{{dayItem.otdLoading}}">
|
||||||
@@ -236,6 +236,7 @@
|
|||||||
<text class="zoom-yiji-item ji" wx:for="{{zoomData.avoids}}" wx:key="*this">{{item}}</text>
|
<text class="zoom-yiji-item ji" wx:for="{{zoomData.avoids}}" wx:key="*this">{{item}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="zoom-end-pad" />
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 详情放大 -->
|
<!-- 详情放大 -->
|
||||||
@@ -280,6 +281,7 @@
|
|||||||
<text class="zoom-detail-label">彭祖百忌</text>
|
<text class="zoom-detail-label">彭祖百忌</text>
|
||||||
<text class="zoom-detail-value">{{zoomData.pengZu}}</text>
|
<text class="zoom-detail-value">{{zoomData.pengZu}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="zoom-end-pad" />
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 节日放大 -->
|
<!-- 节日放大 -->
|
||||||
@@ -289,15 +291,17 @@
|
|||||||
<text class="zoom-fest-date">{{item.solarDate}}</text>
|
<text class="zoom-fest-date">{{item.solarDate}}</text>
|
||||||
<text class="zoom-fest-left {{item.daysLeft === 0 ? 'is-today' : ''}}">{{item.daysLeft === 0 ? '今天' : '还有' + item.daysLeft + '天'}}</text>
|
<text class="zoom-fest-left {{item.daysLeft === 0 ? 'is-today' : ''}}">{{item.daysLeft === 0 ? '今天' : '还有' + item.daysLeft + '天'}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="zoom-end-pad" />
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 今年节日(字体稍小,避免溢出) -->
|
<!-- 今年节日(字体稍小,避免溢出) -->
|
||||||
<scroll-view scroll-y class="zoom-body" wx:if="{{zoomType === 'fest-year' && zoomData}}">
|
<scroll-view scroll-y class="zoom-body" scroll-top="{{zoomScrollTop}}" wx:if="{{zoomType === 'fest-year' && zoomData}}">
|
||||||
<view class="zoom-fest-year-row" wx:for="{{zoomData.yearFestivals}}" wx:key="name" bindtap="goFestival" data-date="{{item.solarDate}}">
|
<view class="zoom-fest-year-row" wx:for="{{zoomData.yearFestivals}}" wx:key="name" bindtap="goFestival" data-date="{{item.solarDate}}">
|
||||||
<text class="zoom-fest-year-name">{{item.name}}</text>
|
<text class="zoom-fest-year-name">{{item.name}}</text>
|
||||||
<text class="zoom-fest-year-date">{{item.solarMonth}}月{{item.solarDay}}日</text>
|
<text class="zoom-fest-year-date">{{item.solarMonth}}月{{item.solarDay}}日</text>
|
||||||
<text class="zoom-fest-year-type {{item.type === 'lunar' ? 'lunar' : 'solar'}}">{{item.type === 'lunar' ? '农历' : '公历'}}</text>
|
<text class="zoom-fest-year-type {{item.type === 'lunar' ? 'lunar' : 'solar'}}">{{item.type === 'lunar' ? '农历' : '公历'}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="zoom-end-pad" />
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 历史上的今天放大 -->
|
<!-- 历史上的今天放大 -->
|
||||||
@@ -330,6 +334,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
<view class="zoom-otd-source">数据来源:中文维基百科(CC BY-SA 4.0)</view>
|
<view class="zoom-otd-source">数据来源:中文维基百科(CC BY-SA 4.0)</view>
|
||||||
|
<view class="zoom-end-pad" />
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
+27
-11
@@ -434,19 +434,23 @@
|
|||||||
.zoom-fest-year-name {
|
.zoom-fest-year-name {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
min-width: 140rpx;
|
width: 160rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-fest-year-date {
|
.zoom-fest-year-date {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #9E8E7E;
|
color: #9E8E7E;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-fest-year-type {
|
.zoom-fest-year-type {
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
padding: 4rpx 16rpx;
|
padding: 4rpx 16rpx;
|
||||||
border-radius: 999rpx;
|
border-radius: 999rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-fest-year-type.lunar {
|
.zoom-fest-year-type.lunar {
|
||||||
@@ -668,10 +672,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.zoom-body {
|
.zoom-body {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
padding: 32rpx 28rpx;
|
padding: 32rpx 28rpx;
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* scroll-view 底部占位:padding-bottom 不计入滚动高度,用真实元素保证最后一项完整显示 */
|
||||||
|
.zoom-end-pad {
|
||||||
|
height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 宜忌放大 */
|
/* 宜忌放大 */
|
||||||
.zoom-yiji-block {
|
.zoom-yiji-block {
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
@@ -695,13 +707,13 @@
|
|||||||
.zoom-yiji-items {
|
.zoom-yiji-items {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 20rpx;
|
gap: 14rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-yiji-item {
|
.zoom-yiji-item {
|
||||||
font-size: 44rpx;
|
font-size: 32rpx;
|
||||||
padding: 16rpx 32rpx;
|
padding: 12rpx 24rpx;
|
||||||
border-radius: 16rpx;
|
border-radius: 12rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -744,21 +756,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.zoom-fest-name {
|
.zoom-fest-name {
|
||||||
font-size: 44rpx;
|
font-size: 40rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
min-width: 200rpx;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-fest-date {
|
.zoom-fest-date {
|
||||||
font-size: 36rpx;
|
font-size: 32rpx;
|
||||||
color: #9E8E7E;
|
color: #9E8E7E;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-fest-left {
|
.zoom-fest-left {
|
||||||
font-size: 36rpx;
|
font-size: 32rpx;
|
||||||
color: #C41E3A;
|
color: #C41E3A;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
flex-shrink: 0;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-fest-left.is-today {
|
.zoom-fest-left.is-today {
|
||||||
@@ -874,12 +889,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.zoom-otd-item .otd-year {
|
.zoom-otd-item .otd-year {
|
||||||
font-size: 30rpx;
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
min-width: 120rpx;
|
min-width: 120rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-otd-item .otd-text {
|
.zoom-otd-item .otd-text {
|
||||||
font-size: 32rpx;
|
font-size: 28rpx;
|
||||||
-webkit-line-clamp: unset;
|
-webkit-line-clamp: unset;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1228,8 +1228,9 @@ function daysBetween(fromY, fromM, fromD, toY, toM, toD) {
|
|||||||
|
|
||||||
/** 获取即将到来的 N 个节日(含基准日之后的)
|
/** 获取即将到来的 N 个节日(含基准日之后的)
|
||||||
* baseYear/baseMonth/baseDay 可选,默认今天
|
* baseYear/baseMonth/baseDay 可选,默认今天
|
||||||
|
* includeBuddhist 为 true 时,把佛教节日也并入一起按倒计时排序
|
||||||
*/
|
*/
|
||||||
function getUpcomingFestivals(count = 6, baseYear, baseMonth, baseDay) {
|
function getUpcomingFestivals(count = 6, baseYear, baseMonth, baseDay, includeBuddhist = false) {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const y = baseYear || now.getFullYear();
|
const y = baseYear || now.getFullYear();
|
||||||
const m = baseMonth || (now.getMonth() + 1);
|
const m = baseMonth || (now.getMonth() + 1);
|
||||||
@@ -1245,6 +1246,7 @@ function getUpcomingFestivals(count = 6, baseYear, baseMonth, baseDay) {
|
|||||||
if (diff >= 0) {
|
if (diff >= 0) {
|
||||||
list.push({
|
list.push({
|
||||||
name: fest.name,
|
name: fest.name,
|
||||||
|
type: fest.type,
|
||||||
solarDate: `${solar.year}-${String(solar.month).padStart(2, '0')}-${String(solar.day).padStart(2, '0')}`,
|
solarDate: `${solar.year}-${String(solar.month).padStart(2, '0')}-${String(solar.day).padStart(2, '0')}`,
|
||||||
solarYear: solar.year,
|
solarYear: solar.year,
|
||||||
solarMonth: solar.month,
|
solarMonth: solar.month,
|
||||||
@@ -1256,6 +1258,30 @@ function getUpcomingFestivals(count = 6, baseYear, baseMonth, baseDay) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 佛历节日(开启后并入,统一按倒计时排序)
|
||||||
|
if (includeBuddhist) {
|
||||||
|
for (const [key, name] of Object.entries(BUDDHIST_FESTIVALS)) {
|
||||||
|
const [lm, ld] = key.split('-').map(Number);
|
||||||
|
for (const tryYear of [y, y + 1]) {
|
||||||
|
const solar = lunarFestivalToSolar(tryYear, lm, ld);
|
||||||
|
if (!solar) continue;
|
||||||
|
const diff = daysBetween(y, m, d, solar.year, solar.month, solar.day);
|
||||||
|
if (diff >= 0) {
|
||||||
|
list.push({
|
||||||
|
name,
|
||||||
|
type: 'buddhist',
|
||||||
|
solarDate: `${solar.year}-${String(solar.month).padStart(2, '0')}-${String(solar.day).padStart(2, '0')}`,
|
||||||
|
solarYear: solar.year,
|
||||||
|
solarMonth: solar.month,
|
||||||
|
solarDay: solar.day,
|
||||||
|
daysLeft: diff
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
list.sort((a, b) => a.daysLeft - b.daysLeft);
|
list.sort((a, b) => a.daysLeft - b.daysLeft);
|
||||||
return list.slice(0, count);
|
return list.slice(0, count);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user