feat: 拼音字母选择

2026-05-19 18:24:43 +08:00
parent 39b8e01c23
commit b70e54d6b0
40 changed files with 1197 additions and 759 deletions
@@ -0,0 +1,93 @@
+@import '../../style/theme.less';
+
+page {
+    background-color: @bg-page;
+}
+
+.pd-page {
+    min-height: 100vh;
+    padding: 0 @page-padding-x;
+    padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
+    box-sizing: border-box;
+}
+
+.pd-main {
+    padding-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 64rpx;
+}
+
+.pd-section {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.pd-section-title {
+    font-size: 32rpx;
+    font-weight: 700;
+    color: #6d3b00;
+    padding-left: 8rpx;
+}
+
+.pd-mode-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 32rpx;
+}
+
+.pd-mode-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    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);
+}
+
+.pd-mode-card__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4rpx;
+}
+
+.pd-mode-card--active {
+    background: linear-gradient(145deg, #ffd709 0%, #efc900 100%);
+    box-shadow: 0 8rpx 32rpx rgba(50, 46, 37, 0.06);
+}
+
+.pd-mode-card--pressed {
+    transform: scale(0.95);
+}
+
+.pd-mode-card__label {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: @text-secondary;
+    text-align: center;
+}
+
+.pd-mode-card--active .pd-mode-card__label {
+    color: #453900;
+}
+
+.pd-mode-card__desc {
+    font-size: 22rpx;
+    color: @text-secondary;
+    text-align: center;
+    opacity: 0.7;
+}
+
+.pd-mode-card--active .pd-mode-card__desc {
+    color: #453900;
+    opacity: 0.8;
+}