feat: 优化页面样式

miniprogram/pages/index/index.wxml

@@ -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">
                 清空