feat:修改 button 和 word-card 样式

miniprogram/components/word-card/word-card.less

@@ -1,57 +1,70 @@
 .word-card {
+    position: relative;
+    width: 100%;
+    height: 200rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+    border: 2rpx solid #E8E8E8;
     display: flex;
-    flex-direction: row;
-    // width: 324rpx;
-    height: 100rpx;
-    border-radius: 16rpx;
-    background-color: #eefcfc;
     align-items: center;
-    box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.35);
+    justify-content: center;
+    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 {
-        width: 60rpx;
-        height: 60rpx;
+        position: absolute;
+        top: 24rpx;
+        left: 24rpx;
+        width: 40rpx;
+        height: 40rpx;
         border-radius: 50%;
-        background-color: #ff0000;
-        margin-left: 24rpx;
-        border: 1rpx solid #141414;
-
-        position: relative;
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 200%;
-            height: 200%;
-            border-radius: 50%;
-            border: 1px solid #141414;
-            transform: scale(0.5);
-            transform-origin: 0 0;
-            box-sizing: border-box;
-        }
+        border: 4rpx solid #FFFFFF;
+        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
     }
 
     .word-box {
-        margin: 0 16rpx 0 36rpx;
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 82rpx;
-        height: 52rpx;
-        border: 1rpx solid #000;
-        background-color: #fff;
+        width: 100%;
+        height: 100%;
 
         .word-content {
-            font-size: 28rpx;
+            font-size: 72rpx;
+            font-weight: 600;
             color: #141414;
             text-align: center;
         }
     }
 
     .delete-icon {
-        padding: 20rpx;
-        color: rgba(255, 0, 0, 0.7);
+        position: absolute;
+        top: -12rpx;
+        right: -12rpx;
+        width: 40rpx;
+        height: 40rpx;
+        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/word-card/word-card.wxml

@@ -3,7 +3,7 @@
         class="color-box"
         style="background-color: {{color}};"
         bindtap="onColorTap"></view>
-    <view class="word-box border-1px">
+    <view class="word-box">
         <text class="word-content">{{word}}</text>
     </view>
     <view class="delete-icon" bindtap="onDelete">
@@ -11,6 +11,6 @@
             class-prefix="toy-icon"
             name="dustbin-o"
             custom-class="delete-icon-inner"
-            size="48rpx" />
+            size="32rpx" />
     </view>
 </view>