|
|
@@ -187,11 +187,11 @@ onShow(async () => { await loadData(); });
|
|
|
&:active { opacity: 0.7; }
|
|
|
}
|
|
|
|
|
|
-.scan-fab { position: fixed; right: 48rpx; bottom: calc(80rpx + env(safe-area-inset-bottom)); width: 104rpx; height: 104rpx; border-radius: 50%; background: $primary-color; box-shadow: 0 8rpx 24rpx rgba(255,193,7,0.35); display: flex; align-items: center; justify-content: center; z-index: 100;
|
|
|
- &:active { transform: scale(0.92); background: $primary-color-dark; }
|
|
|
+.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: 48rpx; height: 48rpx; position: relative;
|
|
|
- &::before { content: ''; position: absolute; top: 4rpx; left: 4rpx; width: 28rpx; height: 28rpx; border: 4rpx solid $text-color-primary; border-radius: 4rpx; }
|
|
|
- &::after { content: ''; position: absolute; bottom: 4rpx; left: 50%; transform: translateX(-50%); width: 24rpx; height: 4rpx; background: $text-color-primary; border-radius: 2rpx; }
|
|
|
+.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: 14rpx; left: 50%; transform: translateX(-50%); width: 24rpx; height: 3rpx; background: $text-color-primary; border-radius: 2rpx; box-shadow: 0 8rpx 0 $text-color-primary, 0 16rpx 0 $text-color-primary; }
|
|
|
}
|
|
|
</style>
|