feat: 数感启蒙、专注力页面重构、首页入口开发

2026-04-21 17:51:16 +08:00
parent b2f5b203f8
commit 28151018ee
212 changed files with 2722 additions and 5207 deletions
@@ -0,0 +1,206 @@
+@import '../../style/theme.less';
+
+page {
+    background-color: @bg-page;
+}
+
+.fd-page {
+    min-height: 100vh;
+    padding: 0 @page-padding-x;
+    padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
+    box-sizing: border-box;
+}
+
+.fd-main {
+    padding-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 64rpx;
+}
+
+/* ===== 预览卡 ===== */
+.fd-preview-wrap {
+    position: relative;
+}
+
+.fd-preview-card {
+    background: @bg-white;
+    border-radius: @radius-xl;
+    box-shadow: @shadow;
+    padding: 48rpx;
+    border: @border;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.fd-preview-kicker {
+    display: block;
+    text-align: center;
+    font-size: @fs-section-head-title;
+    font-weight: bold;
+    color: @text-secondary;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    margin-bottom: 40rpx;
+}
+
+.fd-canvas-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400rpx;
+    background: @bg-gray;
+    border-radius: @radius-sm;
+    border: 2rpx dashed rgba(50, 46, 37, 0.12);
+    overflow: hidden;
+}
+
+.fd-canvas {
+    max-width: 100%;
+    border-radius: @radius-sm;
+    box-shadow: @shadow;
+}
+
+/* ===== 区块 ===== */
+.fd-section {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.fd-section-title {
+    font-size: 32rpx;
+    font-weight: 700;
+    color: #6d3b00;
+    padding-left: 8rpx;
+}
+
+/* ===== 练习类型 2列卡片网格 ===== */
+.fd-type-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 32rpx;
+}
+
+.fd-type-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);
+}
+
+.fd-type-card__icon {
+    font-size: 42rpx;
+    line-height: 1;
+    margin-bottom: 4rpx;
+}
+
+.fd-type-card--active {
+    background: linear-gradient(145deg, #ffd709 0%, #efc900 100%);
+    box-shadow: 0 8rpx 32rpx rgba(50, 46, 37, 0.06);
+}
+
+.fd-type-card--pressed {
+    transform: scale(0.95);
+}
+
+.fd-type-card__label {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: @text-secondary;
+    text-align: center;
+}
+
+.fd-type-card--active .fd-type-card__label {
+    color: #453900;
+}
+
+/* ===== 子选项 Chip ===== */
+.fd-chip-row {
+    display: flex;
+    flex-direction: row;
+    gap: 32rpx;
+}
+
+.fd-chip {
+    flex: 1;
+    box-sizing: border-box;
+    text-align: center;
+    padding: 24rpx 24rpx;
+    font-size: 28rpx;
+    font-weight: 700;
+    line-height: 40rpx;
+    color: @text-secondary;
+    background: @bg-card;
+    border-radius: 32rpx;
+    transition:
+        background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fd-chip--pressed {
+    transform: scale(0.96);
+    background: @brand;
+    color: @text-selected-btn;
+    box-shadow: 0 2rpx 8rpx rgba(50, 46, 37, 0.08);
+}
+
+.fd-chip--active {
+    background: @brand;
+    color: @text-selected-btn;
+    box-shadow: 0 2rpx 8rpx rgba(50, 46, 37, 0.08);
+}
+
+/* ===== 随机生成按钮 ===== */
+.fd-shuffle-btn {
+    box-sizing: border-box;
+    width: 100%;
+    height: 108rpx;
+    padding: 0 32rpx;
+    border-radius: 32rpx;
+    border: 8rpx solid @bg-card;
+    background: transparent;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    transition:
+        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fd-shuffle-btn--hover {
+    transform: scale(0.98);
+    opacity: 0.92;
+    background-color: rgba(234, 226, 208, 0.55);
+}
+
+.fd-shuffle-btn toy-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.fd-shuffle-btn__text {
+    font-size: 36rpx;
+    font-weight: 700;
+    line-height: 1;
+    color: @text-secondary;
+    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}