wo123/dyqc_hdapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我参加的核销订单的二维码的遮罩调整

Browse Source
This commit is contained in:
wangzimeng 2025-07-29 10:26:55 +08:00
parent 2bae7fdec8
commit c310c9b1ed
1 changed files with 85 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
packageA/qrcodeSwiper.vue
View File

@ -5,12 +5,15 @@
:style="{height: swiperHeight + 'rpx'}"> :style="{height: swiperHeight + 'rpx'}">
<swiper-item v-for="(item, index) in images" :key="index" class="swiper-item"> <swiper-item v-for="(item, index) in images" :key="index" class="swiper-item">
<view <view
style="border: 1px solid #9C9C9C;width: 280rpx;height: 280rpx;margin: 0 auto;border-radius: 8rpx;"> style="border: 2rpx solid #9C9C9C;width: 280rpx;height: 280rpx;margin: 0 auto;border-radius: 8rpx;">
<image :src="item.codeimage" class="swiper-image" mode="widthFix" @load="onImageLoad"/> <image :src="item.codeimage" class="swiper-image" mode="widthFix" @load="onImageLoad" />
</view> </view>
<view v-if="item.status==6" <!-- border: 1px solid #9C9C9C; width: 284rpx;height: 284rpx;margin: 0 auto;
style="border: 1px solid #9C9C9C;width: 280rpx;height: 284rpx;margin: 0 auto;border-radius: 8rpx; position: absolute;top: 0;left: 0;right: 0;"> border-radius: 16rpx;position: absolute;top: 8rpx;left: 1px;right: 0;-->
<image src="/static/qrcode_yes.png" class="swiper-image" mode="widthFix" /> <view v-if="item.status==6" style="">
<image style="width: 286rpx;height: 289rpx;margin: 0 auto;
position: absolute;top: 7rpx;left: 0px;right: 0;box-sizing: border-box;"
src="/static/qrcode_yes.png" mode="" />
</view> </view>
<view style="text-align: center;font-size: 28rpx;margin-top: 15rpx;font-weight: 600;">{{item.name}} <view style="text-align: center;font-size: 28rpx;margin-top: 15rpx;font-weight: 600;">{{item.name}}
</view> </view>
@ -86,95 +89,98 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.carousel-container { .carousel-container {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.swiper-box { .swiper-box {
width: 100%; width: 100%;
} }
.swiper-item { .swiper-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 20rpx 0; padding: 20rpx 0;
} }
.qrcode-container { .qrcode-container {
position: relative; position: relative;
width: 280rpx; width: 280rpx;
height: 280rpx; height: 280rpx;
border: 1px solid #9C9C9C; border: 1px solid #9C9C9C;
border-radius: 8rpx; border-radius: 8rpx;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
.swiper-image { .swiper-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
box-sizing: border-box;
} }
.used-overlay { .used-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.5); background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
image { image {
width: 80%; width: 80%;
height: 80%; height: 80%;
} }
} }
.qrcode-name { .qrcode-name {
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
margin-top: 15rpx; margin-top: 15rpx;
font-weight: 600; font-weight: 600;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.nav-buttons { .nav-buttons {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
right: 0; right: 0;
transform: translateY(-50%); transform: translateY(-50%);
display: flex; padding-left: 80rpx;
justify-content: space-between; padding-right: 80rpx;
pointer-events: none; // 防止按钮阻挡滑动 display: flex;
justify-content: space-between;
.btn { pointer-events: none; // 防止按钮阻挡滑动
pointer-events: auto;
width: 60rpx; .btn {
height: 60rpx; pointer-events: auto;
display: flex; width: 60rpx;
align-items: center; height: 60rpx;
justify-content: center; display: flex;
align-items: center;
image { justify-content: center;
width: 50rpx;
height: 50rpx; image {
} width: 50rpx;
} height: 50rpx;
}
}
} }
// .carousel-container { // .carousel-container {
// position: relative; // position: relative;
// height: 350rpx; // height: 350rpx;