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