<view class=“qrcode-modal flex-center” hidden="{{hideModal}}">
<view class=“qrcode-main-true” catchtap=“hideModal”></view>
<view class=“qrcode-modal-bg”>
<view class=“page”>
<view class=“panel”>
<view class=“barcode” catchtap=“showBarcodeModal”>
<view class=“barnum”>1223312</view>
<canvas canvas-id=“barcode” />
</view>
<view class=“qrcode” catchtap=“showQrcodeModal”>
<canvas canvas-id=“qrcode” />
</view>
</view>
</view>
</view>
</view>
<view class=“barcode-modal flex-center” hidden="{{barcodeModal}}" catchtap=“hideBarcodeModal”>
<view class=“barnum”>12312312321</view>
<view class=“barcode-box”>
<canvas canvas-id=“barcode-canvas” />
</view>
</view>
<view class=“qrcode-modal-canvas flex-center” hidden="{{qrcodeModal}}" catchtap=“hideQrcodeModal”>
<canvas canvas-id=“qrcode-canvas” />
</view>
/* 卡弹窗 */
.qrcode-modal, .qrcode-main-true, .barcode-modal, .qrcode-modal-canvas {
left: 0;
top: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
}
.qrcode-modal {
z-index: 99;
}
.barcode-modal, .qrcode-modal-canvas {
background-color: #fff;
z-index: 120;
}
.barcode-modal {
flex-direction: column;
justify-content: center;
}
.qrcode-modal-bg {
background-color: #fff;
width: 680rpx;
box-sizing: border-box;
/* padding: 20rpx 30rpx; */
padding: 0 10rpx;
margin: 0 auto;
height: 750rpx;
overflow-y: hidden;
border-radius: 16rpx;
z-index: 100;
}
.page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
padding-bottom: 10rpx;
}
.panel {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
box-sizing: border-box;
width: 100%;
border-radius: 10rpx;
background-color: #fff;
}
.barcode {
display: flex;
height: 320rpx;
flex-direction: column;
justify-content: center;
align-items: center;
}
.barnum {
width: 100%;
height: 100rpx;
line-height: 100rpx;
font-size: 38rpx;
font-weight: bold;
text-align: center;
letter-spacing: 10rpx;
white-space: nowrap;
}
.barcode > canvas {
width: 660rpx;
height: 200rpx;
}
.qrcode {
height: 420rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.qrcode > canvas {
width: 420rpx;
height: 420rpx;
}
.barcode-modal canvas {
height: 300rpx;
width: 750rpx;
}
.barcode-modal .barcode-box {
height: 300rpx;
width: 690rpx;
}
.barcode-modal>.barnum {
transform: scale(2);
}
.qrcode-modal-canvas>canvas {
width: 100%;
height: 750rpx;
}