feat: 样式修改、13 字母半表、三字母精练开发
This commit is contained in:
R524809
@@ -15,33 +15,38 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="lt-params">
|
||||
<view class="lt-params-head">
|
||||
<text class="lt-params-emoji">⚙️</text>
|
||||
<text class="lt-params-title">参数设置</text>
|
||||
</view>
|
||||
|
||||
<view class="param-block">
|
||||
<text class="lt-field-label">练习类型</text>
|
||||
<view class="lt-mode-seg">
|
||||
<view
|
||||
wx:for="{{modeOptions}}"
|
||||
wx:key="id"
|
||||
class="lt-mode-item {{worksheetId === item.id ? 'lt-mode-item--active' : ''}}"
|
||||
data-id="{{item.id}}"
|
||||
bindtap="onSelectMode">
|
||||
<text class="lt-mode-item__text">{{item.label}}</text>
|
||||
</view>
|
||||
<!-- 练习类型（2列卡片网格） -->
|
||||
<view class="lt-section">
|
||||
<text class="lt-section-title">练习类型</text>
|
||||
<view class="lt-mode-grid">
|
||||
<view
|
||||
wx:for="{{modeOptions}}"
|
||||
wx:key="id"
|
||||
class="lt-mode-card {{worksheetId === item.id ? 'lt-mode-card--active' : ''}}"
|
||||
data-id="{{item.id}}"
|
||||
hover-class="lt-mode-card--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bindtap="onSelectMode">
|
||||
<toy-icon
|
||||
name="moon"
|
||||
size="56rpx"
|
||||
color="{{worksheetId === item.id ? '#453900' : '#605b50'}}"
|
||||
custom-class="lt-mode-card__icon" />
|
||||
<text class="lt-mode-card__label">{{item.label}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{showLetterPicker}}" class="param-block">
|
||||
<text class="lt-field-label">选择字母</text>
|
||||
<view class="lt-letter-grid">
|
||||
<!-- 选择字母（默认字帖模式） -->
|
||||
<view wx:if="{{showLetterPicker}}" class="lt-section">
|
||||
<text class="lt-section-title">选择字母</text>
|
||||
<view class="lt-section-body">
|
||||
<view class="lt-letter-grid" wx:if="{{!letterGridExpanded}}">
|
||||
<view
|
||||
wx:for="{{letterGrid}}"
|
||||
wx:for="{{letterGridPreview}}"
|
||||
wx:key="*this"
|
||||
class="lt-letter-cell {{selectedLetter === item ? 'lt-letter-cell--active' : ''}}"
|
||||
class="lt-letter-cell {{selectedLetterPair === item ? 'lt-letter-cell--active' : ''}}"
|
||||
data-letter="{{item}}"
|
||||
hover-class="lt-letter-cell--pressed"
|
||||
hover-start-time="0"
|
||||
@@ -50,27 +55,81 @@
|
||||
<text class="lt-letter-text">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="lt-letter-grid" wx:if="{{letterGridExpanded}}">
|
||||
<view
|
||||
wx:for="{{letterGrid}}"
|
||||
wx:key="*this"
|
||||
class="lt-letter-cell {{selectedLetterPair === item ? 'lt-letter-cell--active' : ''}}"
|
||||
data-letter="{{item}}"
|
||||
hover-class="lt-letter-cell--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onSelectLetter">
|
||||
<text class="lt-letter-text">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="lt-expand-toggle"
|
||||
hover-class="lt-expand-toggle--hover"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bind:tap="toggleLetterGrid">
|
||||
<text class="lt-expand-toggle__text"
|
||||
>{{letterGridExpanded ? '收起' : '展开全部'}}</text
|
||||
>
|
||||
<van-icon
|
||||
wx:if="{{letterGridExpanded}}"
|
||||
name="arrow-up"
|
||||
size="24rpx"
|
||||
color="#605b50"
|
||||
custom-class="lt-expand-toggle__icon" />
|
||||
<van-icon
|
||||
wx:else
|
||||
name="arrow-down"
|
||||
size="24rpx"
|
||||
color="#605b50"
|
||||
custom-class="lt-expand-toggle__icon" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{showCaseToggle}}" class="param-block">
|
||||
<text class="lt-field-label">半组字母</text>
|
||||
<view class="lt-chip-row">
|
||||
<view
|
||||
class="lt-chip {{!letterCaseLower ? 'lt-chip--active' : ''}}"
|
||||
hover-class="lt-chip--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onSelectCaseUpper">
|
||||
A–M
|
||||
</view>
|
||||
<view
|
||||
class="lt-chip {{letterCaseLower ? 'lt-chip--active' : ''}}"
|
||||
hover-class="lt-chip--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onSelectCaseLower">
|
||||
N–Z
|
||||
</view>
|
||||
<!-- 选择字母组（大小写对照 / 13字母半表模式） -->
|
||||
<view wx:if="{{showCaseToggle}}" class="lt-section">
|
||||
<text class="lt-section-title">选择字母组</text>
|
||||
<view class="lt-chip-row">
|
||||
<view
|
||||
class="lt-chip {{!letterCaseLower ? 'lt-chip--active' : ''}}"
|
||||
hover-class="lt-chip--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onSelectCaseUpper">
|
||||
A–M
|
||||
</view>
|
||||
<view
|
||||
class="lt-chip {{letterCaseLower ? 'lt-chip--active' : ''}}"
|
||||
hover-class="lt-chip--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onSelectCaseLower">
|
||||
N–Z
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择字母组（三字母精练模式） -->
|
||||
<view wx:if="{{showTripleGroupPicker}}" class="lt-section">
|
||||
<text class="lt-section-title">选择字母组</text>
|
||||
<view class="lt-chip-row lt-chip-row--wrap lt-chip-row--triple">
|
||||
<view
|
||||
wx:for="{{tripleGroups}}"
|
||||
wx:key="label"
|
||||
class="lt-chip lt-chip--triple {{selectedTripleGroupIdx === index ? 'lt-chip--active' : ''}}"
|
||||
hover-class="lt-chip--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
data-idx="{{index}}"
|
||||
bind:tap="onSelectTripleGroup">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user