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/copyBook/copyBook.json
+1
View File
@@ -1,5 +1,6 @@
{
"navigationBarTitleText": "练字",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#F6F6F6",
miniprogram/pages/focusIndex/focusIndex.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"navigationBarTitleText": "专注启蒙",
"navigationBarTitleText": "专注力培养",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#F6F6F6",
miniprogram/pages/focusIndex/focusIndex.less
+1 -171
View File
@@ -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
+12 -10
View File
@@ -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
+2 -1
View File
@@ -1,5 +1,6 @@
{
"navigationBarTitleText": "涂鸦丫-识字",
"navigationBarTitleText": "识字",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#F6F6F6",
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>