feat: Add Scoreboard and Date Calc pages, update Calculator with scientific mode and new UI
This commit is contained in:
@@ -0,0 +1,276 @@
|
||||
/* pages/date-calc/date-calc.wxss */
|
||||
page {
|
||||
background-color: #f0f2f5;
|
||||
color: #333;
|
||||
--primary-color: #5b73e8;
|
||||
--primary-light: #e0e6fc;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 30rpx;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Tab 切换 */
|
||||
.tab-header {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
padding: 8rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.tab-pill {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-pill.active {
|
||||
background-color: var(--primary-light);
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 卡片通用样式 */
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 20rpx;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* 模式1：日期推算 */
|
||||
.date-display {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.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);
|
||||
font-size: 36rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--primary-light);
|
||||
padding-bottom: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.days-input {
|
||||
flex: 1;
|
||||
font-size: 56rpx;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.input-unit {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tags-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #f5f7fa;
|
||||
color: #666;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tag-red {
|
||||
background: #fff0f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
/* 结果卡片 */
|
||||
.result-card {
|
||||
background: var(--primary-color); /* 渐变色更好吗？先用纯色突出 */
|
||||
background: linear-gradient(135deg, #5b73e8 0%, #455ac0 100%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 50rpx;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.result-date {
|
||||
font-size: 64rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.result-week {
|
||||
font-size: 32rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 模式2：日期间隔 */
|
||||
.date-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.pill-icon {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.timeline-connect {
|
||||
display: flex;
|
||||
align-items: center; /* 居中对齐 */
|
||||
margin: 30rpx 0;
|
||||
padding-left: 20rpx; /* 微调对齐 */
|
||||
}
|
||||
|
||||
.dots {
|
||||
width: 2px;
|
||||
height: 40rpx;
|
||||
border-left: 2px dashed #ddd; /* 使用左边框模拟竖线 */
|
||||
margin: 0 auto; /* 水平居中 */
|
||||
}
|
||||
|
||||
/* 实际上我想做竖向的时间轴，但在 input-card 里横向可能更好看，但这设计是竖向列表？
|
||||
重新设计 timeline 为竖向的连接线
|
||||
*/
|
||||
.input-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 覆盖上面的 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;
|
||||
}
|
||||
|
||||
.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; /* 居中 */
|
||||
}
|
||||
|
||||
/* 间隔结果 */
|
||||
.interval-result .result-huge {
|
||||
font-size: 80rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.interval-result .unit {
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user