feat: 优化页面样式

miniprogram/components/shape-card/shape-card.less

@@ -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);
 
-    .shape-card-img {
-        width: 140rpx;
-        height: 140rpx;
-        display: block;
+    &:active {
+        transform: scale(0.95);
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
     }
 
-    .divider {
-        width: 150rpx;
-        height: 1rpx;
-        background-color: #ddd;
-        margin-block: 16rpx;
-    }
-
-    .shape-color {
-        width: 60rpx;
-        height: 60rpx;
+    .color-box {
+        position: absolute;
+        top: 24rpx;
+        left: 24rpx;
+        width: 42rpx;
+        height: 42rpx;
         border-radius: 50%;
-        border: 1rpx solid #141414;
-        background-color: skyblue;
+        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;
+        }
     }
 
     .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

@@ -1,18 +1,20 @@
 <view class="shape-card">
-    <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" />
-    <van-icon
-        class-prefix="toy-icon"
-        name="error-o"
-        custom-class="delete-icon"
-        size="48rpx"
-        bind:tap="onDelete" />
+        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>
+    <view class="delete-icon" bind:tap="onDelete">
+        <van-icon
+            class-prefix="toy-icon"
+            name="dustbin-o"
+            custom-class="delete-icon-inner"
+            size="32rpx" />
+    </view>
 </view>

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

@@ -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

@@ -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

@@ -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>