Просмотр исходного кода

polish: 文字融合进扫码按钮内部

- '扫码开门'文字放在圆形按钮内图标下方
- 移除外部scan-area wrapper

Co-Authored-By: Claude <noreply@anthropic.com>
skyline 2 дней назад
Родитель
Сommit
4fee0443e2
1 измененных файлов с 6 добавлено и 9 удалено
  1. 6 9
      haha-admin-mp/src/pages/replenish/home.vue

+ 6 - 9
haha-admin-mp/src/pages/replenish/home.vue

@@ -51,11 +51,9 @@
     </scroll-view>
 
     <!-- 扫码浮钮 -->
-    <view class="scan-area" @click="handleScan">
-      <view class="scan-fab">
-        <view class="scan-icon">
-          <view class="scan-beam"></view>
-        </view>
+    <view class="scan-fab" @click="handleScan">
+      <view class="scan-icon">
+        <view class="scan-beam"></view>
       </view>
       <text class="scan-label">扫码开门</text>
     </view>
@@ -213,11 +211,10 @@ onShow(async () => { await loadData(); });
   &:active { opacity: 0.7; }
 }
 
-.scan-area { position: fixed; left: 50%; bottom: calc(80rpx + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12rpx; z-index: 1000; }
-.scan-fab { width: 128rpx; height: 128rpx; border-radius: 50%; background: $primary-color; box-shadow: 0 12rpx 36rpx rgba(255,193,7,0.4); display: flex; align-items: center; justify-content: center;
-  &:active { transform: scale(0.92); background: $primary-color-dark; }
+.scan-fab { position: fixed; left: 50%; bottom: calc(80rpx + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 128rpx; height: 128rpx; border-radius: 50%; background: $primary-color; box-shadow: 0 12rpx 36rpx rgba(255,193,7,0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rpx; z-index: 1000;
+  &:active { transform: translateX(-50%) scale(0.92); background: $primary-color-dark; }
 }
-.scan-label { font-size: 24rpx; font-weight: 500; color: $primary-color-dark; }
+.scan-label { font-size: 20rpx; font-weight: 600; color: $text-color-primary; line-height: 1; }
 .scan-icon { width: 50rpx; height: 50rpx; position: relative;
   &::before { content: ''; position: absolute; top: 0; left: 0; width: 14rpx; height: 14rpx; border-top: 4rpx solid $text-color-primary; border-left: 4rpx solid $text-color-primary; border-radius: 4rpx 0 0 0; }
   &::after { content: ''; position: absolute; bottom: 0; right: 0; width: 14rpx; height: 14rpx; border-bottom: 4rpx solid $text-color-primary; border-right: 4rpx solid $text-color-primary; border-radius: 0 0 4rpx 0; }