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>