.healthy-card-info-container { padding: 12rpx; } .healthy-card-info-container .healthy-card-layer { height: 380rpx; margin: auto; overflow: hidden; border-radius: 16rpx; background-color: #f6f6f6; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; } .healthy-card-info-container .healthy-card-layer .healthy-card-background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .healthy-card-info-container .user-info-container { position: absolute; left: 24rpx; top: 200rpx; z-index: 1; } .healthy-card-info-container .user-info-container .user-name { color: #333; font-size: 32rpx; } .healthy-card-info-container .user-info-container .user-id-card { color: #333; font-size: 32rpx; margin-top: 30rpx; } .healthy-card-info-container .qrcode-container { top: 108rpx; right: 20rpx; position: absolute; } .healthy-card-info-container .qrcode-container .qr-code-image { width: 188rpx; height: 188rpx; z-index: 1; position: relative; } .healthy-card-info-container .qrcode-container .qrcode-code-icon-container { left: 50%; top: 50%; z-index: 2; width: 24rpx; height: 24rpx; position: absolute; border-radius: 8rpx; background-color: #fff; overflow: hidden; transform: translate3d(-50%, -50%, 0); } .healthy-card-info-container .qrcode-container .qrcode-code-icon-container image { width: 100%; height: 100%; } .healthy-card-info-container .buttons-container { display: flex; padding-top: 50rpx; } .healthy-card-info-container .cus-button { flex: 1; height: 80rpx; border-radius: 8rpx; line-height: 80rpx; text-align: center; font-size: 32rpx; color: #fff; } .healthy-card-info-container .cus-button.red { margin-right: 28rpx; background-color: #DB2D37; } .healthy-card-info-container .cus-button.disabled { margin-right: 28rpx; background-color: #ff7ca8; } .healthy-card-info-container .cus-button.blue { background-color: #0e72ff; } .healthy-card-info-container .cus-button:active { opacity: 0.8; }