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