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:
R524809
2025-09-30 16:27:26 +08:00
parent b892b5625a
commit 3c6218616c
11 changed files with 238 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/components/shape-card/shape-card.less
+52 -26
View File
@@ -1,43 +1,69 @@
.shape-card {
position: relative;
width: 186rpx;
// height: 260rpx;
border-radius: 16rpx;
background: #ffffff;
border: 1rpx solid #e8e8e8;
box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.3);
width: 100%;
height: 184rpx;
background: #FFFFFF;
border-radius: 24rpx;
border: 2rpx solid #E8E8E8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16rpx 0;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
&:active {
transform: scale(0.95);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}
.color-box {
position: absolute;
top: 24rpx;
left: 24rpx;
width: 42rpx;
height: 42rpx;
border-radius: 50%;
border: 4rpx solid #FFFFFF;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.shape-box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.shape-card-img {
width: 140rpx;
height: 140rpx;
display: block;
}
.divider {
width: 150rpx;
height: 1rpx;
background-color: #ddd;
margin-block: 16rpx;
}
.shape-color {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 1rpx solid #141414;
background-color: skyblue;
}
.delete-icon {
position: absolute;
top: -16rpx;
right: -16rpx;
color: #ff0000;
top: -12rpx;
right: -12rpx;
width: 46rpx;
height: 46rpx;
background: #FF4757;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 32rpx;
font-weight: bold;
box-shadow: 0 2rpx 6rpx rgba(255, 71, 87, 0.3);
transition: all 0.2s ease-in-out;
&:active {
transform: scale(0.9);
}
.delete-icon-inner {
color: #FFFFFF !important;
}
}
}
miniprogram/components/shape-card/shape-card.wxml
+11 -9
View File
@@ -1,18 +1,20 @@
<view class="shape-card">
<view
class="color-box"
style="background-color: {{ fillColor }};"
bind:tap="onColorTap"></view>
<view class="shape-box">
<image
src="{{ svgDataUri }}"
class="shape-card-img"
mode="aspectFit"
bind:tap="onShapeTap" />
<view class="divider" />
<view
class="shape-color"
style="background-color: {{ fillColor }}"
bind:tap="onColorTap" />
</view>
<view class="delete-icon" bind:tap="onDelete">
<van-icon
class-prefix="toy-icon"
name="error-o"
custom-class="delete-icon"
size="48rpx"
bind:tap="onDelete" />
name="dustbin-o"
custom-class="delete-icon-inner"
size="32rpx" />
</view>
</view>
miniprogram/components/word-card/word-card.less
+6 -6
View File
@@ -1,7 +1,7 @@
.word-card {
position: relative;
width: 100%;
height: 200rpx;
height: 172rpx; // 高度略缩小
background: #FFFFFF;
border-radius: 24rpx;
border: 2rpx solid #E8E8E8;
@@ -20,8 +20,8 @@
position: absolute;
top: 24rpx;
left: 24rpx;
width: 40rpx;
height: 40rpx;
width: 42rpx;
height: 42rpx;
border-radius: 50%;
border: 4rpx solid #FFFFFF;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
@@ -35,7 +35,7 @@
height: 100%;
.word-content {
font-size: 72rpx;
font-size: 64rpx; // 字号略缩小
font-weight: 600;
color: #141414;
text-align: center;
@@ -46,8 +46,8 @@
position: absolute;
top: -12rpx;
right: -12rpx;
width: 40rpx;
height: 40rpx;
width: 46rpx;
height: 46rpx;
background: #FF4757;
border-radius: 50%;
display: flex;
miniprogram/components/word-input/word-input.less
+3 -15
View File
@@ -5,10 +5,12 @@
border-radius: 20rpx;
background-color: #f8f8f8;
align-items: center;
border: 1rpx solid #e0e0e0;
// box-shadow: 0 0rpx 4rpx rgba(0, 0, 0, 0.5);
.word-input-icon {
// border: 1px solid red;
padding: 22rpx;
padding: 0 22rpx;
}
.word-input {
@@ -21,20 +23,6 @@
}
.btn-word-add {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
height: 72rpx;
padding: 0 24rpx;
background: rgba(255, 215, 25, 1);
border-radius: 20rpx;
font-size: 28rpx;
color: #fff;
margin-right: 10rpx;
&.active {
background-color: rgba(255, 215, 25, 0.8);
}
}
}
miniprogram/components/word-input/word-input.wxml
+6 -5
View File
@@ -14,11 +14,12 @@
placeholder="{{placeholder}}"
bindinput="onInput"
bindconfirm="onConfirm" />
<view
<toy-button
class="btn-word-add"
bind:tap="onConfirm"
bind:touchstart="{{wxs.touchStart}}"
bind:touchend="{{wxs.touchEnd}}">
type="primary"
width="auto"
height="72rpx"
bind:click="onConfirm">
添加
</view>
</toy-button>
</view>
miniprogram/pages/index/index.less
+66 -6
View File
@@ -15,7 +15,7 @@ page {
.wrapper {
background-color: #ffffff;
border-radius: 20rpx;
padding: 24rpx;
padding: 36rpx 24rpx;
box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
margin: 30rpx 0;
display: flex;
@@ -24,7 +24,7 @@ page {
.wrapper-title {
font-size: 32rpx;
color: #141414;
margin-bottom: 24rpx;
margin-bottom: 36rpx; // 增大标题与内容间距
font-weight: bold;
text-align: center;
}
@@ -34,18 +34,78 @@ page {
}
.word-card-box {
padding: 34rpx 0;
padding: 38rpx 0;
.word-list-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 40rpx;
text-align: center;
font-size: 28rpx;
color: #999;
.empty-icon {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32rpx;
box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
.toy-icon {
font-size: 48rpx;
color: #3b82f6;
}
}
.empty-title {
font-size: 32rpx;
font-weight: 600;
color: #374151;
margin-bottom: 16rpx;
line-height: 1.4;
}
.empty-desc {
font-size: 26rpx;
color: #6b7280;
line-height: 1.6;
margin-bottom: 32rpx;
max-width: 400rpx;
}
.empty-hint {
display: flex;
align-items: center;
background: #f8fafc;
border: 1rpx solid #e2e8f0;
border-radius: 12rpx;
padding: 20rpx 24rpx;
max-width: 500rpx;
.hint-icon {
font-size: 24rpx;
margin-right: 12rpx;
margin-top: -2rpx;
flex-shrink: 0;
}
.hint-text {
font-size: 22rpx;
color: #64748b;
line-height: 1.5;
text-align: left;
}
}
}
.word-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24rpx;
gap: 38rpx; // 间距从24rpx提升到32rpx
}
}
miniprogram/pages/index/index.wxml
+17 -5
View File
@@ -2,11 +2,11 @@
<view class="wrapper">
<text class="wrapper-title">自定义涂鸦卡</text>
<view class="word-input-box">
<word-input bind:onConfirm="onConfirmInput" width="420rpx" />
<word-input bind:onConfirm="onConfirmInput" width="410rpx" />
<toy-button
type="green"
bind:click="openSelectWordPopup"
width="220rpx">
width="200rpx">
选择文字
</toy-button>
</view>
@@ -24,14 +24,26 @@
bind:onColorTap="onColorTap" />
</view>
<view class="word-list-empty" wx:if="{{!cardList.length}}">
请选择或输入文字，生成涂鸦卡
<view class="empty-icon">
<text class="toy-icon toy-icon-translate"></text>
</view>
<view class="empty-title">还没有添加文字</view>
<view class="empty-desc"
>请在上方输入文字或点击"选择文字"按钮<br />开始创建你的涂鸦卡吧！</view
>
<view class="empty-hint">
<text class="hint-icon">💡</text>
<text class="hint-text"
>提示：最多可以同时添加六个文字</text
>
</view>
</view>
</view>
<view class="operation-box">
<toy-button
type="primary"
bind:click="refreshCardList"
width="420rpx"
width="410rpx"
icon="refresh"
icon-class-prefix="toy-icon">
随机生成
@@ -40,7 +52,7 @@
disabled="{{cardList.length <= 0}}"
type="white"
bind:click="clearCardList"
width="220rpx"
width="200rpx"
icon="clear"
icon-class-prefix="toy-icon">
清空
miniprogram/pages/shape/index.less
+50 -9
View File
@@ -14,7 +14,7 @@ page {
.wrapper {
background-color: #fff;
border-radius: 20rpx;
padding: 24rpx;
padding: 0 24rpx;
box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
margin: 30rpx 0;
display: flex;
@@ -23,24 +23,65 @@ page {
.wrapper-title {
font-size: 32rpx;
color: #141414;
margin-bottom: 24rpx;
margin: 36rpx 0;
font-weight: bold;
text-align: center;
}
}
.btn-area {
display: flex;
flex-direction: row;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 38rpx;
}
.shape-list {
margin: 38rpx 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 38rpx;
}
.shape-list-empty {
display: flex;
flex-wrap: wrap;
column-gap: 50rpx;
row-gap: 24rpx;
justify-content: flex-start;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 40rpx;
text-align: center;
.empty-icon {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32rpx;
box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
.toy-icon {
font-size: 48rpx;
color: #3b82f6;
}
}
.empty-title {
font-size: 32rpx;
font-weight: 600;
color: #374151;
margin-bottom: 16rpx;
line-height: 1.4;
}
.empty-desc {
font-size: 26rpx;
color: #6b7280;
line-height: 1.6;
margin-bottom: 32rpx;
max-width: 400rpx;
}
}
}
miniprogram/pages/shape/index.wxml
+12 -4
View File
@@ -5,20 +5,19 @@
<toy-button
type="green"
bind:click="handleSelectShape"
width="290rpx">
width="100%">
选择图形
</toy-button>
<toy-button
type="primary"
bind:click="refreshShapeCard"
width="290rpx"
width="100%"
icon="refresh"
icon-class-prefix="toy-icon">
随机生成
</toy-button>
</view>
<van-divider />
<view class="shape-list">
<view class="shape-list" wx:if="{{shapeList.length > 0}}">
<shape-card
wx:for="{{ shapeList }}"
wx:for-item="item"
@@ -31,6 +30,15 @@
bind:onDelete="onDelete"
bind:onColorTap="onColorTap" />
</view>
<view class="shape-list-empty" wx:if="{{!shapeList.length}}">
<view class="empty-icon">
<text class="toy-icon toy-icon-guide"></text>
</view>
<view class="empty-title">还没有选择图形</view>
<view class="empty-desc"
>请点击上方“选择图形”或使用“随机生成”开始创建</view
>
</view>
</view>
<shape-picker
selectedShapeList="{{shapeList}}"
miniprogram/ui/button/button.less
+4 -5
View File
@@ -1,6 +1,6 @@
@button-default-height: 80rpx;
@button-default-height: 92rpx;
@button-border-radius: 16rpx;
@button-default-font-size: 30rpx;
@button-default-font-size: 32rpx;
@button-default-color: #fff;
wx-button:not([size=mini]) {
@@ -15,17 +15,16 @@ wx-button:not([size=mini]) {
align-items: center;
justify-content: center;
height: @button-default-height;
line-height: @button-default-height;
border-radius: @button-border-radius;
font-size: @button-default-font-size;
color: @button-default-color;
padding: 0 48rpx;
padding: 0 24rpx;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.15s ease-in-out;
border: none;
min-width: 240rpx;
&--primary {
background: #FFD719;
miniprogram/ui/button/button.wxs
+3
View File
@@ -22,6 +22,9 @@ module.exports = {
},
getIconColor: function (iconColor, type, plain, disabled) {
if (type === 'primary') {
return disabled ? '#CCCCCC' : '#141414';
}
if (type === 'white' && !plain) {
return disabled ? 'rgba(34, 36, 37, 0.5)' : 'rgba(34, 36, 37, 0.9)';
}