feat: 列表样式修改

miniprogram/app.json

@@ -90,7 +90,7 @@
                 "pagePath": "pages/focusIndex/focusIndex",
                 "iconPath": "assets/tabBar/icon-shape.png",
                 "selectedIconPath": "assets/tabBar/icon-shape-active.png",
-                "text": "专注力游戏"
+                "text": "专注力培养"
             },
             {
                 "pagePath": "pages/index/index",

miniprogram/constants/focusFunctions.ts

@@ -5,6 +5,7 @@ export interface FocusFunctionType {
     desc: string;
     icon: string;
     mode?: string; // 用于传递默认模式参数，如 '3x3', '5x5', '7x7'
+    img?: string;
 }
 
 export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
@@ -15,6 +16,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         title: '识别形状',
         desc: '识别形状，涂一涂',
         icon: '🔍',
+        img: '/assets/focusEntrance/shape-recognition.png',
     },
     // 图形符号配对
     {
@@ -23,6 +25,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         title: '图形符号配对',
         desc: '根据图形画对应的符号',
         icon: '🔗',
+        img: '/assets/focusEntrance/shape-symbol.png',
     },
     // 方位涂涂乐
     {
@@ -31,6 +34,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         title: '方位涂涂乐',
         desc: '观察卡片位置，在对应的方格中涂上颜色',
         icon: '📍',
+        img: '/assets/focusEntrance/position-coloring.png',
     },
     // 颜色找规律
     {
@@ -39,6 +43,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         title: '颜色找规律',
         desc: '观察颜色规律，在空白图形中涂上颜色',
         icon: '🎨',
+        img: '/assets/focusEntrance/color-pattern.png',
     },
     // 连连看
     {
@@ -47,6 +52,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         title: '连连看',
         desc: '快来根据物品连一连吧!',
         icon: '🔗',
+        img: '/assets/focusEntrance/match-connect.png',
     },
     // 线条识别
     {
@@ -55,6 +61,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         title: '线条识别',
         desc: '认识不同线条，画出颜色对应的线条',
         icon: '📏',
+        img: '/assets/focusEntrance/line-recognition.png',
     },
     // 方格推理
     {
@@ -63,6 +70,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         title: '方格推理',
         desc: '仔细观察，推理出合并方格并连线',
         icon: '🧩',
+        img: '/assets/focusEntrance/grid-reasoning.png',
     },
     // 译码连线
     {
@@ -71,6 +79,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         title: '译码连线',
         desc: '按照数字顺序，将数字对应的颜色连起来',
         icon: '🔢',
+        img: '/assets/focusEntrance/code-connect.png',
     },
     // 格子仿画
     {
@@ -80,6 +89,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         desc: '🎯 简单有趣，培养专注力',
         icon: '🎨',
         mode: '3x3',
+        img: '/assets/focusEntrance/grid-drawing-3x3.png',
     },
     {
         id: 'grid-drawing-5x5',
@@ -88,6 +98,7 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         desc: '✨ 创意挑战，提升观察力',
         icon: '🎨',
         mode: '5x5',
+        img: '/assets/focusEntrance/grid-drawing-5x5.png',
     },
     {
         id: 'grid-drawing-7x7',
@@ -96,5 +107,6 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
         desc: '🌟 大师挑战，锻炼耐心',
         icon: '🎨',
         mode: '7x7',
+        img: '/assets/focusEntrance/grid-drawing-7x7.png',
     },
 ];

miniprogram/constants/mathFunctions.ts

@@ -3,7 +3,8 @@ export interface MathFunctionType {
     page?: string;
     title: string;
     desc: string;
-    icon: string;
+    icon?: string;
+    img?: string;
 }
 
 export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
@@ -13,14 +14,16 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         page: 'numberFind',
         title: '找数字，涂一涂',
         desc: '找一找下面相同的数字，涂上颜色',
-        icon: '🔍',
+        // icon: '🔍',
+        img: '/assets/mathEntrance/number-find.png',
     },
     {
         id: 'number-write',
         page: 'numberFind',
         title: '看数字，写一写',
         desc: '看数字，按笔画顺序写一写',
-        icon: '✏️',
+        // icon: '✏️',
+        img: '/assets/mathEntrance/number-write.png',
     },
     {
         id: 'number-coloring',
@@ -28,6 +31,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '按数字，涂颜色',
         desc: '按数字给相应的圆圈涂上颜色',
         icon: '🎨',
+        img: '/assets/mathEntrance/number-coloring.png',
     },
     // 第二阶段：数数与计数
     {
@@ -36,6 +40,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '数一数，连一连',
         desc: '通过连线配对数字和对应的数量图形',
         icon: '🔗',
+        img: '/assets/mathEntrance/count-match.png',
     },
     {
         id: 'counting-select',
@@ -43,6 +48,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '数一数，选一选',
         desc: '数出物品数量，圈出正确答案',
         icon: '✓',
+        img: '/assets/mathEntrance/counting-select.png',
     },
     {
         id: 'counting-fill',
@@ -50,6 +56,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '数一数，填一填',
         desc: '数出物品数量，填写对应的数字',
         icon: '✏️',
+        img: '/assets/mathEntrance/counting-fill.png',
     },
     {
         id: 'compare',
@@ -57,6 +64,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '数一数，比大小',
         desc: '比较数量大小，在 ⭕️ 中填入＞、＜、＝',
         icon: '⚖️',
+        img: '/assets/mathEntrance/compare.png',
     },
     // 第三阶段：数字序列
     {
@@ -65,6 +73,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '填上缺少的数字',
         desc: '在数字序列中找出并填写缺失的数字',
         icon: '❓',
+        img: '/assets/mathEntrance/missing-number.png',
     },
     {
         id: 'number-decompose',
@@ -72,6 +81,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '10以内数的分与合',
         desc: '把数字分一分，合一合',
         icon: '🔢',
+        img: '/assets/mathEntrance/number-decompose.png',
     },
     // 第四阶段：简单运算（从易到难）
     {
@@ -80,6 +90,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '5以内加法',
         desc: '练习5以内的加法运算，图形化展示',
         icon: '➕',
+        img: '/assets/mathEntrance/addition-5.png',
     },
     {
         id: 'addition-10',
@@ -87,6 +98,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '10以内加法',
         desc: '练习10以内的加法运算，图形化展示',
         icon: '➕',
+        img: '/assets/mathEntrance/addition-10.png',
     },
     {
         id: 'subtraction-10',
@@ -94,6 +106,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '10以内减法',
         desc: '练习10以内的减法运算，图形化展示',
         icon: '➖',
+        img: '/assets/mathEntrance/subtraction-10.png',
     },
     {
         id: 'addition-subtraction-10',
@@ -101,6 +114,7 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '10以内加减法',
         desc: '练习10以内的加法和减法混合运算',
         icon: '±',
+        img: '/assets/mathEntrance/addition-subtraction-10.png',
     },
     {
         id: 'number-decompose-20',
@@ -108,5 +122,6 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         title: '20以内数的分与合',
         desc: '把数字分一分，合一合',
         icon: '🔢',
+        img: '/assets/mathEntrance/number-decompose-20.png',
     },
 ];

miniprogram/pages/copyBook/copyBook.json

@@ -1,5 +1,6 @@
 {
     "navigationBarTitleText": "练字",
+    "navigationBarTextStyle": "black",
     "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
     "backgroundColor": "#F6F6F6",

miniprogram/pages/focusIndex/focusIndex.json

@@ -1,5 +1,6 @@
 {
-    "navigationBarTitleText": "专注启蒙",
+    "navigationBarTitleText": "专注力培养",
+    "navigationBarTextStyle": "black",
     "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
     "backgroundColor": "#F6F6F6",

miniprogram/pages/focusIndex/focusIndex.less

@@ -1,171 +1 @@
-page {
-    background-color: #f6f6f6;
-}
-
-.page-container {
-    background-color: #f6f6f6;
-    padding: 0 24rpx;
-    box-sizing: border-box;
-
-    .empty {
-        height: 190rpx;
-    }
-}
-
-/* 专注力页面标题和描述 */
-.math-page-header {
-    margin-bottom: 40rpx;
-    text-align: center;
-    padding-top: 28rpx;
-}
-
-.math-page-title {
-    font-size: 36rpx;
-    font-weight: 600;
-    color: #141414;
-    margin-bottom: 16rpx;
-}
-
-.math-page-subtitle {
-    font-size: 24rpx;
-    color: #666666;
-    line-height: 1.5;
-}
-
-/* 专注力功能列表样式 */
-.math-functions-list {
-    display: flex;
-    flex-direction: column;
-    gap: 24rpx;
-    margin-bottom: 40rpx;
-}
-
-.math-function-item {
-    background: #ffffff;
-    border: 2rpx solid #e8e8e8;
-    border-radius: 24rpx;
-    padding: 32rpx;
-    display: flex;
-    align-items: center;
-    gap: 24rpx;
-    transition: all 0.2s ease-in-out;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-    position: relative;
-
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: 24rpx;
-        opacity: 0;
-        background: rgba(147, 211, 51, 0.1);
-        transition: opacity 0.2s ease-in-out;
-    }
-
-    &:active {
-        &::after {
-            opacity: 1;
-        }
-
-        border-color: #93d333;
-        box-shadow: 0 8rpx 24rpx rgba(147, 211, 51, 0.2);
-    }
-}
-
-.function-item-image {
-    width: 120rpx;
-    height: 120rpx;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 1;
-}
-
-.function-image-placeholder {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, rgba(255, 215, 25, 0.2) 0%, rgba(255, 169, 64, 0.2) 100%);
-    border-radius: 20rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 56rpx;
-}
-
-.function-item-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12rpx;
-    min-width: 0;
-    position: relative;
-    z-index: 1;
-}
-
-.function-item-title {
-    font-size: 28rpx;
-    font-weight: 600;
-    color: #141414;
-    line-height: 1.4;
-}
-
-.function-item-desc {
-    font-size: 24rpx;
-    color: #666666;
-    line-height: 1.4;
-}
-
-.function-item-arrow {
-    font-size: 36rpx;
-    color: #999999;
-    flex-shrink: 0;
-    position: relative;
-    z-index: 1;
-}
-
-/* 使用提示 */
-.usage-hint {
-    background: linear-gradient(135deg, #fff7e6 0%, #fffbe6 100%);
-    border: 2rpx solid #ffd719;
-    border-radius: 24rpx;
-    padding: 32rpx;
-    display: flex;
-    align-items: flex-start;
-    gap: 24rpx;
-    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
-}
-
-.hint-icon {
-    font-size: 40rpx;
-    flex-shrink: 0;
-}
-
-.hint-text {
-    flex: 1;
-}
-
-.hint-title {
-    font-size: 28rpx;
-    font-weight: 600;
-    color: #141414;
-    margin-bottom: 8rpx;
-}
-
-.hint-desc {
-    font-size: 24rpx;
-    color: #666666;
-    line-height: 1.5;
-
-    view {
-        margin-bottom: 8rpx;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-}
+@import '../mathIndex/mathIndex.less';

miniprogram/pages/focusIndex/focusIndex.wxml

@@ -1,9 +1,9 @@
 <view class="page-container">
     <!-- 页面标题和描述 -->
     <view class="math-page-header">
-        <view class="math-page-title">专注启蒙</view>
+        <!-- <view class="math-page-title">专注启蒙</view> -->
         <view class="math-page-subtitle">
-            选择功能，生成可打印的专注力、观察力启蒙涂鸦卡
+            选择功能，生成可打印的专注力、观察力培养涂鸦卡
         </view>
     </view>
 
@@ -14,15 +14,17 @@
             wx:for="{{functionList}}"
             wx:key="id"
             data-function="{{item.id}}"
-            bind:tap="openFocusFunction">
-            <view class="function-item-image">
-                <view class="function-image-placeholder">{{item.icon}}</view>
+            bind:tap="openFocusFunction"
+        >
+            <view class="function-item-img-wrapper">
+                <image
+                    class="function-item-img"
+                    src="{{item.img}}"
+                    mode="aspectFill"
+                ></image>
             </view>
-            <view class="function-item-content">
-                <view class="function-item-title">{{item.title}}</view>
-                <view class="function-item-desc">{{item.desc}}</view>
-            </view>
-            <view class="function-item-arrow">→</view>
+            <view class="function-item-title">{{item.title}}</view>
+            <view class="function-item-desc">{{item.desc}}</view>
         </view>
     </view>
 

miniprogram/pages/index/index.json

@@ -1,5 +1,6 @@
 {
-    "navigationBarTitleText": "涂鸦丫-识字",
+    "navigationBarTitleText": "识字",
+    "navigationBarTextStyle": "black",
     "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
     "backgroundColor": "#F6F6F6",

miniprogram/pages/mathIndex/mathIndex.json

@@ -1,5 +1,6 @@
 {
     "navigationBarTitleText": "数感启蒙",
+    "navigationBarTextStyle": "black",
     "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
     "backgroundColor": "#F6F6F6",

miniprogram/pages/mathIndex/mathIndex.less

@@ -14,9 +14,8 @@ page {
 
 /* 数学页面标题和描述 */
 .math-page-header {
-    margin-bottom: 40rpx;
     text-align: center;
-    padding-top: 28rpx;
+    padding: 28rpx 0;
 }
 
 .math-page-title {
@@ -32,10 +31,11 @@ page {
     line-height: 1.5;
 }
 
-/* 数学功能列表样式 */
+/* 数学功能列表样式 - 两列瀑布流 */
 .math-functions-list {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
     gap: 24rpx;
     margin-bottom: 40rpx;
 }
@@ -44,11 +44,13 @@ page {
     background: #ffffff;
     border: 2rpx solid #e8e8e8;
     border-radius: 24rpx;
-    padding: 32rpx;
+    padding: 24rpx;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 24rpx;
-    // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+    gap: 18rpx;
+    flex: 0 0 calc(50% - 12rpx);
+    box-sizing: border-box;
     transition: all 0.2s ease-in-out;
     box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
     position: relative;
@@ -76,57 +78,44 @@ page {
     }
 }
 
-.function-item-image {
-    width: 120rpx;
-    height: 120rpx;
+.function-item-img-wrapper {
+    width: 100%;
+    height: 310rpx;
     flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: relative;
     z-index: 1;
+    border-radius: 16rpx;
+    overflow: hidden;
+    background-color: #f5f5f5;
+    // border: 1rpx solid #e8e8e8;
 }
 
-.function-image-placeholder {
+.function-item-img {
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, rgba(255, 215, 25, 0.2) 0%, rgba(255, 169, 64, 0.2) 100%);
-    border-radius: 20rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 56rpx;
-}
-
-.function-item-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12rpx;
-    min-width: 0;
-    position: relative;
-    z-index: 1;
+    display: block;
 }
 
 .function-item-title {
-    font-size: 28rpx;
+    font-size: 30rpx;
     font-weight: 600;
     color: #141414;
     line-height: 1.4;
+    text-align: left;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    margin-top: 4rpx;
 }
 
 .function-item-desc {
     font-size: 24rpx;
     color: #666666;
-    line-height: 1.4;
-}
-
-.function-item-arrow {
-    font-size: 36rpx;
-    color: #999999;
-    flex-shrink: 0;
+    line-height: 1.5;
+    text-align: left;
     position: relative;
     z-index: 1;
+    width: 100%;
 }
 
 /* 使用提示 */

miniprogram/pages/mathIndex/mathIndex.wxml

@@ -1,7 +1,7 @@
 <view class="page-container">
     <!-- 页面标题和描述 -->
     <view class="math-page-header">
-        <view class="math-page-title">数感启蒙</view>
+        <!-- <view class="math-page-title">数感启蒙</view> -->
         <view class="math-page-subtitle">
             选择功能，生成可打印的数感启蒙涂鸦卡
         </view>
@@ -14,15 +14,17 @@
             wx:for="{{functionList}}"
             wx:key="id"
             data-function="{{item.id}}"
-            bind:tap="openMathFunction">
-            <view class="function-item-image">
-                <view class="function-image-placeholder">{{item.icon}}</view>
+            bind:tap="openMathFunction"
+        >
+            <view class="function-item-img-wrapper">
+                <image
+                    class="function-item-img"
+                    src="{{item.img}}"
+                    mode="aspectFill"
+                ></image>
             </view>
-            <view class="function-item-content">
-                <view class="function-item-title">{{item.title}}</view>
-                <view class="function-item-desc">{{item.desc}}</view>
-            </view>
-            <view class="function-item-arrow">→</view>
+            <view class="function-item-title">{{item.title}}</view>
+            <view class="function-item-desc">{{item.desc}}</view>
         </view>
     </view>