feat: 英语描红 字母选择修改
This commit is contained in:
@@ -10,7 +10,6 @@
|
|||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"draw-ad": "../../components/draw-ad/draw-ad",
|
"draw-ad": "../../components/draw-ad/draw-ad",
|
||||||
"preview-footer-actions": "../../components3.0/preview-footer-actions/preview-footer-actions",
|
"preview-footer-actions": "../../components3.0/preview-footer-actions/preview-footer-actions",
|
||||||
"toy-icon": "../../toy/icon/icon",
|
"toy-icon": "../../toy/icon/icon"
|
||||||
"van-icon": "@vant/weapp/icon/index"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -80,12 +80,6 @@ page {
|
|||||||
padding-left: 8rpx;
|
padding-left: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lt-section-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 练习类型 2列卡片网格 (grid-cols-2 gap-4) ===== */
|
/* ===== 练习类型 2列卡片网格 (grid-cols-2 gap-4) ===== */
|
||||||
.lt-mode-grid {
|
.lt-mode-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -191,40 +185,6 @@ page {
|
|||||||
color: @text-selected-btn;
|
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 {
|
.lt-chip-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -91,8 +91,6 @@ type PageData = CanvasDataState & {
|
|||||||
tripleGroups: { label: string; letters: string[] }[];
|
tripleGroups: { label: string; letters: string[] }[];
|
||||||
selectedTripleGroupIdx: number;
|
selectedTripleGroupIdx: number;
|
||||||
letterGrid: string[];
|
letterGrid: string[];
|
||||||
letterGridExpanded: boolean;
|
|
||||||
letterGridPreview: string[];
|
|
||||||
modeOptions: ReadonlyArray<{ id: string; label: string; desc: string }>;
|
modeOptions: ReadonlyArray<{ id: string; label: string; desc: string }>;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -122,8 +120,6 @@ createPage(
|
|||||||
tripleGroups: TRIPLE_GROUPS,
|
tripleGroups: TRIPLE_GROUPS,
|
||||||
selectedTripleGroupIdx: 0,
|
selectedTripleGroupIdx: 0,
|
||||||
letterGrid: LETTERS_PAIRS,
|
letterGrid: LETTERS_PAIRS,
|
||||||
letterGridExpanded: false,
|
|
||||||
letterGridPreview: LETTERS_PAIRS.slice(0, 6),
|
|
||||||
modeOptions: [...MODES],
|
modeOptions: [...MODES],
|
||||||
} as unknown as PageData,
|
} as unknown as PageData,
|
||||||
|
|
||||||
@@ -242,13 +238,6 @@ createPage(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 展开/收起字母网格 */
|
|
||||||
toggleLetterGrid() {
|
|
||||||
this.setData({
|
|
||||||
letterGridExpanded: !this.data.letterGridExpanded,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 用户在字母网格中选择了一个字母(item 为 "Aa" 格式,取首字母作为 selectedLetter) */
|
/** 用户在字母网格中选择了一个字母(item 为 "Aa" 格式,取首字母作为 selectedLetter) */
|
||||||
onSelectLetter(e: WechatMiniprogram.TouchEvent) {
|
onSelectLetter(e: WechatMiniprogram.TouchEvent) {
|
||||||
const raw = e.currentTarget.dataset.letter as string;
|
const raw = e.currentTarget.dataset.letter as string;
|
||||||
|
|||||||
@@ -41,21 +41,7 @@
|
|||||||
<!-- 选择字母(默认字帖模式) -->
|
<!-- 选择字母(默认字帖模式) -->
|
||||||
<view wx:if="{{showLetterPicker}}" class="lt-section">
|
<view wx:if="{{showLetterPicker}}" class="lt-section">
|
||||||
<text class="lt-section-title">选择字母</text>
|
<text class="lt-section-title">选择字母</text>
|
||||||
<view class="lt-section-body">
|
<view class="lt-letter-grid">
|
||||||
<view class="lt-letter-grid" wx:if="{{!letterGridExpanded}}">
|
|
||||||
<view
|
|
||||||
wx:for="{{letterGridPreview}}"
|
|
||||||
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-letter-grid" wx:if="{{letterGridExpanded}}">
|
|
||||||
<view
|
<view
|
||||||
wx:for="{{letterGrid}}"
|
wx:for="{{letterGrid}}"
|
||||||
wx:key="*this"
|
wx:key="*this"
|
||||||
@@ -68,29 +54,6 @@
|
|||||||
<text class="lt-letter-text">{{item}}</text>
|
<text class="lt-letter-text">{{item}}</text>
|
||||||
</view>
|
</view>
|
||||||
</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>
|
||||||
|
|
||||||
<!-- 选择字母组(大小写对照 / 13字母半表模式) -->
|
<!-- 选择字母组(大小写对照 / 13字母半表模式) -->
|
||||||
|
|||||||
Reference in New Issue
Block a user