feat: 样式修改、13 字母半表、三字母精练开发
This commit is contained in:
R524809
@@ -66,134 +66,93 @@ page {
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
/* ===== 参数面板 (bg-surface-container rounded-xl p-6 space-y-6) ===== */
|
||||
.lt-params {
|
||||
/* surface-container = #f0e7d6 */
|
||||
background: @bg-card;
|
||||
border-radius: @radius-xl;
|
||||
padding: 48rpx;
|
||||
box-sizing: border-box;
|
||||
/* ===== 独立 Section 区块（参考 UI 稿 space-y-4） ===== */
|
||||
.lt-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48rpx;
|
||||
box-shadow: @shadow;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
/* 标题行 (gap-2 = 8px → 16rpx) */
|
||||
.lt-params-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.lt-params-emoji {
|
||||
/* text-xl = 20px → 40rpx */
|
||||
font-size: 40rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lt-params-title {
|
||||
/* text-lg = 18px → 36rpx */
|
||||
font-size: @fs-section-head-title;
|
||||
.lt-section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
color: #6d3b00;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
/* 参数区块内间距 (space-y-3 = 12px → 24rpx) */
|
||||
.param-block {
|
||||
.lt-section-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* space-y-3 = 12px → 24rpx */
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
/* 字段标签 (text-sm font-bold text-on-surface-variant ml-1) */
|
||||
.lt-field-label {
|
||||
display: block;
|
||||
/* text-sm = 14px → 28rpx */
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
/* on-surface-variant = #605b50 */
|
||||
color: @text-secondary;
|
||||
/* ml-1 = 4px → 8rpx */
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
/* ===== 练习类型 Tab (grid-cols-2 gap-2 bg-surface-container-high p-1.5 rounded-lg) ===== */
|
||||
.lt-mode-seg {
|
||||
/* ===== 练习类型 2列卡片网格 (grid-cols-2 gap-4) ===== */
|
||||
.lt-mode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
/* gap-2 = 8px → 16rpx */
|
||||
gap: 16rpx;
|
||||
/* p-1.5 = 6px → 12rpx */
|
||||
padding: 12rpx;
|
||||
/* surface-container-high = #eae2d0 */
|
||||
background: #eae2d0;
|
||||
border-radius: 32rpx;
|
||||
box-sizing: border-box;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
/* 未选中 item (py-2.5 px-3 text-sm font-medium rounded-lg text-on-surface-variant) */
|
||||
.lt-mode-item {
|
||||
.lt-mode-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* py-2.5 = 10px → 20rpx; px-3 = 12px → 24rpx */
|
||||
padding: 20rpx 24rpx;
|
||||
/* rounded-lg = 8px → 16rpx */
|
||||
border-radius: 32rpx;
|
||||
background: transparent;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
// transition: all 1s ease;
|
||||
gap: 16rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f8f0e0;
|
||||
box-sizing: border-box;
|
||||
transition:
|
||||
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 选中 item (bg-primary-container text-on-primary-container font-bold shadow-sm) */
|
||||
.lt-mode-item--active {
|
||||
/* primary-container = #ffd709 */
|
||||
background: @brand;
|
||||
box-shadow: 0 2rpx 8rpx rgba(50, 46, 37, 0.08);
|
||||
.lt-mode-card__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.lt-mode-item__text {
|
||||
/* text-sm = 14px → 28rpx */
|
||||
font-size: 28rpx;
|
||||
/* 未选中 font-medium = 500 */
|
||||
font-weight: 500;
|
||||
/* on-surface-variant = #605b50 */
|
||||
color: @text-secondary; //#5b4b00
|
||||
line-height: 40rpx;
|
||||
.lt-mode-card--active {
|
||||
background: linear-gradient(145deg, #ffd709 0%, #efc900 100%);
|
||||
box-shadow: 0 8rpx 32rpx rgba(50, 46, 37, 0.06);
|
||||
}
|
||||
|
||||
.lt-mode-card--pressed {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.lt-mode-card__label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: @text-secondary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 选中态字色 (on-primary-container = #5b4b00, font-bold = 700) */
|
||||
.lt-mode-item--active .lt-mode-item__text {
|
||||
/* on-primary-container = #5b4b00 */
|
||||
color: @text-selected-btn;
|
||||
font-weight: 700;
|
||||
.lt-mode-card--active .lt-mode-card__label {
|
||||
color: #453900;
|
||||
}
|
||||
|
||||
/* ===== 字母选择网格 (grid-cols-6 gap-2) ===== */
|
||||
/* ===== 字母选择网格 (grid-cols-6 gap-3) ===== */
|
||||
.lt-letter-grid {
|
||||
display: grid;
|
||||
/* 稿 grid-cols-6 */
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
/* gap-2 = 8px → 16rpx */
|
||||
gap: 16rpx;
|
||||
gap: 28rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
/* 字母格子 (aspect-square rounded-lg bg-surface-container-lowest) */
|
||||
/* 字母格子 (aspect-square rounded-[12px] bg-surface-container) */
|
||||
.lt-letter-cell {
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 32rpx;
|
||||
/* surface-container-lowest = #ffffff */
|
||||
background: @bg-white;
|
||||
border-radius: 24rpx;
|
||||
background: @bg-card;
|
||||
box-sizing: border-box;
|
||||
/* 不用 :active：小程序 view 上背景色常在松手后才刷新；用 hover-class 才能按下即变色，并做过渡 */
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s ease,
|
||||
@@ -215,10 +174,8 @@ page {
|
||||
}
|
||||
|
||||
.lt-letter-text {
|
||||
/* text-lg = 18px → 36rpx */
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
/* on-surface-variant = #605b50 */
|
||||
color: @text-secondary;
|
||||
line-height: 1;
|
||||
transition: color 0.2s ease;
|
||||
@@ -233,27 +190,79 @@ page {
|
||||
color: @text-selected-btn;
|
||||
}
|
||||
|
||||
/* ===== 大小写切换 ===== */
|
||||
/* ===== 展开/收起按钮（UI 稿 rounded-full bg-surface-container-low） ===== */
|
||||
.lt-expand-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 32rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #f8f0e0;
|
||||
align-self: center;
|
||||
margin: 16rpx auto 0;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
.lt-expand-toggle--hover {
|
||||
background: @bg-card;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.lt-expand-toggle__text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: @text-secondary;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lt-expand-toggle__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ===== 大小写切换 / 字母分组选择 ===== */
|
||||
.lt-chip-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* gap-2 = 8px → 16rpx */
|
||||
gap: 16rpx;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
/* 未选中 chip (同练习类型 item 风格) */
|
||||
.lt-chip-row--wrap {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.lt-chip {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lt-chip-row--triple {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24rpx;
|
||||
|
||||
.lt-chip {
|
||||
flex: unset;
|
||||
width: 100%;
|
||||
padding: 24rpx 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 未选中 chip（与字母格子统一底色） */
|
||||
.lt-chip {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
/* py-2.5 px-3 */
|
||||
padding: 20rpx 24rpx;
|
||||
/* text-sm = 14px → 28rpx */
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
line-height: 40rpx;
|
||||
color: @text-secondary;
|
||||
background: #fff;
|
||||
/* rounded-lg */
|
||||
background: @bg-card;
|
||||
border-radius: 32rpx;
|
||||
transition:
|
||||
background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
|
||||
Reference in New Issue
Block a user