page { box-sizing: border-box; padding: 20rpx 20rpx 0; background-color: #f2f2f2; font-size: 28rpx; } .bdr12 { border-radius: 12rpx; } .w40 { width: 40%; box-sizing: border-box; } .btn-border { border: 2rpx solid #808080; } .bg-red { background-image: -webkit-linear-gradient(315deg,#f2140c,#f2270c 70%,#f24d0c); background-image: linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c); } .bg-orange { background-image: -webkit-linear-gradient(315deg,#ffba0d,#ffc30d 69%,#ffcf0d); background-image: linear-gradient(135deg,#ffba0d,#ffc30d 69%,#ffcf0d); } .bg-gray { background-image: -webkit-linear-gradient(315deg,#bfbfbf,#c3c3c3 70%,#d4d3d3); background-image: linear-gradient(135deg,#bfbfbf,#c3c3c3 70%,#d4d3d3); } .c-orange { color: #ff9000; } .main { padding-bottom: 134rpx; } .pic-box { width: 130rpx; height: 130rpx; border-radius: 12rpx; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: pink; } .rmb::before { content: '¥'; } .title { height: 88rpx; } .separator { position: relative; } .separator::before { content: ''; position: absolute; width: 2rpx; height: 30%; background-color: #f8f8f8; left: 0; top: 0; bottom: 0; margin: auto; } .btn-bar { box-sizing: border-box; position: fixed; left: 0; bottom: 0; width: 100%; font-size: 26rpx; border-top: 2rpx solid #f2f2f2; } .btn { width: 50%; box-sizing: border-box; display: inline-block; height: 70rpx; line-height: 70rpx; padding: 0 40rpx; border-radius: 100rpx; } .btn-copy { display: block; color: #666; font-size: 22rpx; padding: 0 20rpx; border-radius: 6rpx; background-color: #f0f0f0; } .del { text-decoration: line-through; } .mask { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.7); z-index: 1; } .popup-container { position: fixed; width: 70%; border-radius: 12rpx; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } .popup { text-align: center; border-radius: 12rpx; background-color: white; overflow: hidden; /* width: 80%; */ } .popup-container .icon-close { color: rgba(255,255,255,.6); } .popup-title { padding: 40rpx 0; color: #fe0000; background-color: #FFD3D6; position: relative; } .popup-title::after { content: ''; position: absolute; left: -20rpx; bottom: -12rpx; width: 130%; height: 20rpx; background: -webkit-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); background: -moz-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); background: -o-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); background: radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); background-size: 40rpx 40rpx; transform: rotate(180deg); -webkit-transform: rotate(180deg); } .popup .rmb::before { font-size: 40rpx; } .img-qr { display: block; width: 300rpx; height: 300rpx; margin: 0 auto; background-color: pink; } .barcode { width: 100%; height: 140rpx; } .qrcode { width: 300rpx; height: 300rpx; margin: 0 auto; } .noMore { padding: 20rpx; color: #bbb; text-align: center; font-size: 22rpx; } .breakall { word-break: break-all; } .bar-container { box-sizing: border-box; padding: 30rpx 20rpx; }