Refactor Date Calculator UI to Morandi theme and fix logic; fix Index page interaction
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user