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

polish: 扫码图标改为四角取景框+扫描线 更精致

- 移除整圈边框 改为四角对焦标记
- 中间保留扫描横线
- 整体更轻盈精致

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

+ 7 - 4
haha-admin-mp/src/pages/replenish/home.vue

@@ -52,7 +52,9 @@
 
     <!-- 扫码浮钮 -->
     <view class="scan-fab" @click="handleScan">
-      <view class="scan-icon"></view>
+      <view class="scan-icon">
+        <view class="scan-beam"></view>
+      </view>
     </view>
   </view>
 </template>
@@ -200,8 +202,9 @@ onShow(async () => { await loadData(); });
 .scan-fab { position: fixed; left: 50%; bottom: calc(120rpx + 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; align-items: center; justify-content: center; z-index: 100;
   &:active { transform: translateX(-50%) scale(0.92); background: $primary-color-dark; }
 }
-.scan-icon { width: 56rpx; height: 56rpx; position: relative;
-  &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 5rpx solid $text-color-primary; border-radius: 10rpx; }
-  &::after { content: ''; position: absolute; top: 50%; left: 8rpx; right: 8rpx; height: 3rpx; background: $text-color-primary; border-radius: 2rpx; transform: translateY(-50%); }
+.scan-icon { width: 50rpx; height: 50rpx; position: relative;
+  &::before { content: ''; position: absolute; top: 4rpx; left: 4rpx; width: 10rpx; height: 10rpx; border-top: 4rpx solid $text-color-primary; border-left: 4rpx solid $text-color-primary; border-radius: 3rpx 0 0 0; }
+  &::after { content: ''; position: absolute; bottom: 4rpx; right: 4rpx; width: 10rpx; height: 10rpx; border-bottom: 4rpx solid $text-color-primary; border-right: 4rpx solid $text-color-primary; border-radius: 0 0 3rpx 0; }
 }
+.scan-beam { position: absolute; top: 50%; left: 8rpx; right: 8rpx; height: 3rpx; background: $text-color-primary; border-radius: 2rpx; transform: translateY(-50%); opacity: 0.85; }
 </style>