feat:修改 button 和 word-card 样式

miniprogram/pages/index/index.less

@@ -16,7 +16,7 @@ page {
     background-color: #ffffff;
     border-radius: 20rpx;
     padding: 24rpx;
-    box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
     margin: 30rpx 0;
     display: flex;
     flex-direction: column;
@@ -42,15 +42,10 @@ page {
             color: #999;
         }
 
-        .word-card-list {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            margin-bottom: 24rpx;
-
-            &:last-child {
-                margin-bottom: 0;
-            }
+        .word-cards-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 24rpx;
         }
     }
 

miniprogram/pages/index/index.wxml

@@ -12,33 +12,20 @@
         </view>
 
         <view class="word-card-box">
-            <block wx:if="{{cardList.length > 0}}">
-                <block
+            <view class="word-cards-grid" wx:if="{{cardList.length > 0}}">
+                <word-card
+                    wx:key="index"
                     wx:for="{{cardList}}"
                     wx:for-item="item"
-                    wx:for-index="index">
-                    <view class="word-card-list" wx:if="{{index % 2 === 0}}">
-                        <word-card
-                            key="{{index}}"
-                            word="{{item.word}}"
-                            color="{{item.color}}"
-                            bind:onDelete="deleteWordCard"
-                            bind:onColorTap="onColorTap" />
-                        <word-card
-                            wx:if="{{cardList[index + 1]}}"
-                            key="{{index + 1}}"
-                            word="{{cardList[index + 1].word}}"
-                            color="{{cardList[index + 1].color}}"
-                            bind:onDelete="deleteWordCard"
-                            bind:onColorTap="onColorTap" />
-                    </view>
-                </block>
-            </block>
-            <block wx:if="{{!cardList.length}}">
-                <view class="word-list-empty">
-                    请选择或输入文字，生成涂鸦卡
-                </view>
-            </block>
+                    wx:for-index="index"
+                    word="{{item.word}}"
+                    color="{{item.color}}"
+                    bind:onDelete="deleteWordCard"
+                    bind:onColorTap="onColorTap" />
+            </view>
+            <view class="word-list-empty" wx:if="{{!cardList.length}}">
+                请选择或输入文字，生成涂鸦卡
+            </view>
         </view>
         <view class="operation-box">
             <toy-button