Files
lunar-mini/mini/pages/home/home.wxss
T
gouki 5d40019ea5
Publish Mini Program Dev Version / publish (push) Successful in 3m16s
重构首页与tabBar:老黄历大日历+月历切换,新增百科页
tabBar(5个,全部带图标):
- 老黄历(首页) / 许愿 / 八字 / 百科(新) / 我的(原设置)
- 移除日历tab,月历并入首页左上角切换
- 移除运势tab,改从'我的'页进入

首页重构:
- custom 导航栏,标题'老黄历'
- 老式万年历大日历卡片:大日期+农历+干支+宜忌
- 左右箭头切换日期,'回到今天'
- 左上角'月历/日历'切换按钮,月历视图复用原日历网格
- 月历点选日期自动切回日视图

新增百科页:
- 二十四节气/农历节日/公历节日/干支生肖/黄历术语 分类
- 搜索 + 展开详情

我的页(原设置):
- 新增功能入口:每日运势/占卜/二十四节气/月历视图
2026-08-07 08:55:17 +00:00

268 lines
3.8 KiB
Plaintext

/* 自定义导航栏 */
.custom-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #C41E3A;
z-index: 100;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
}
.nav-toggle {
min-width: 96rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid rgba(255, 255, 255, 0.5);
border-radius: 999rpx;
padding: 0 20rpx;
}
.nav-toggle-text {
color: #FFFFFF;
font-size: 24rpx;
}
.nav-title {
color: #FFFFFF;
font-size: 34rpx;
font-weight: 600;
letter-spacing: 4rpx;
}
.nav-right {
min-width: 96rpx;
}
/* 页面主体 */
.page-body {
box-sizing: border-box;
min-height: 100vh;
}
.container {
padding: 20rpx;
padding-bottom: 40rpx;
}
/* ===== 老黄历大日历卡片 ===== */
.almanac-card {
background: linear-gradient(160deg, #FFFFFF 0%, #FFF8EF 100%);
border: 1rpx solid #E8D5C4;
border-radius: 24rpx;
padding: 32rpx 24rpx;
margin-bottom: 16rpx;
position: relative;
}
.almanac-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.almanac-year {
font-size: 30rpx;
color: #6B5E53;
font-weight: 500;
}
.almanac-week {
font-size: 24rpx;
color: #9E8E7E;
margin-left: 16rpx;
}
.today-tag {
background: #C41E3A;
color: #FFFFFF;
font-size: 20rpx;
padding: 4rpx 20rpx;
border-radius: 999rpx;
}
/* 大日期 */
.almanac-day-row {
display: flex;
align-items: center;
justify-content: center;
margin: 16rpx 0 8rpx;
}
.almanac-day-num {
font-size: 160rpx;
font-weight: 700;
color: #C41E3A;
line-height: 1.1;
min-width: 320rpx;
text-align: center;
}
.day-arrow {
font-size: 64rpx;
color: #C9B8A6;
padding: 0 32rpx;
}
/* 农历 */
.almanac-lunar {
text-align: center;
margin-bottom: 16rpx;
}
.almanac-lunar-main {
font-size: 44rpx;
font-weight: 600;
color: #1A1A1A;
display: block;
}
.almanac-lunar-sub {
font-size: 24rpx;
color: #9E8E7E;
display: block;
margin-top: 8rpx;
}
/* 节日 */
.almanac-fest {
display: flex;
justify-content: center;
gap: 12rpx;
margin-bottom: 16rpx;
}
/* 宜忌 */
.yiji-row {
display: flex;
border-top: 1rpx solid #F0E6DA;
padding-top: 24rpx;
}
.yiji-col {
flex: 1;
display: flex;
gap: 16rpx;
}
.yiji-divider {
width: 1rpx;
background: #F0E6DA;
margin: 0 16rpx;
}
.yiji-title {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 700;
flex-shrink: 0;
}
.yiji-title.yi {
background: #C41E3A;
color: #FFFFFF;
}
.yiji-title.ji {
background: #546E7A;
color: #FFFFFF;
}
.yiji-items {
display: flex;
flex-wrap: wrap;
gap: 8rpx;
align-content: flex-start;
}
.yiji-item {
font-size: 24rpx;
padding: 4rpx 14rpx;
border-radius: 8rpx;
}
.yiji-item.yi {
background: #FEF2F2;
color: #C41E3A;
}
.yiji-item.ji {
background: #F1F5F9;
color: #546E7A;
}
/* 回到今天 */
.back-today {
text-align: center;
margin-top: 20rpx;
color: #C41E3A;
font-size: 26rpx;
padding: 12rpx;
}
.detail-btn {
text-align: center;
}
/* ===== 月历 ===== */
.day-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12rpx 4rpx;
background: #FFFFFF;
border-radius: 12rpx;
min-height: 100rpx;
}
.day-cell.today {
background: #C41E3A;
color: #FFFFFF;
}
.day-cell.today .day-lunar {
color: rgba(255, 255, 255, 0.8);
}
.day-cell.other-month {
opacity: 0.4;
}
.day-number {
font-size: 28rpx;
font-weight: 500;
}
.day-lunar {
font-size: 20rpx;
color: #9E8E7E;
margin-top: 4rpx;
}
.day-lunar.festival {
color: #C41E3A;
font-weight: 500;
}
.day-dot {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: #C41E3A;
margin-top: 4rpx;
}