joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 列表样式修改

Browse Source
This commit is contained in:
joey
2025-12-22 20:16:10 +08:00
parent 70a78b1cc5
commit b29ea455cb
36 changed files with 88 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/mathIndex/mathIndex.json
+1
View File
@@ -1,5 +1,6 @@
{
"navigationBarTitleText": "数感启蒙",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#F6F6F6",
miniprogram/pages/mathIndex/mathIndex.less
+27 -38
View File
@@ -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
+11 -9
View File
@@ -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>