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

}