.soldier-component .loading-full-page { height: 100vh; display: flex; align-items: center; justify-content: center; } .soldier-component .user-cert-qrcode-page { min-height: 100vh; background: linear-gradient(to bottom, #168BFF, #1664FF); padding: 24rpx; } .soldier-component .user-cert-qrcode-page .user-qrcode-card { overflow: hidden; border-radius: 16rpx; background-color: #fff; } .soldier-component .user-cert-qrcode-page .user-qrcode-card-header { min-height: 168rpx; padding: 24rpx; display: flex; align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; } .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-avatar { width: 120rpx; height: 120rpx; border-radius: 50%; overflow: hidden; background-color: #fff; } .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-avatar image { width: 100%; height: 100%; } .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-info { flex: 1; padding-left: 24rpx; } .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-name { color: #333; font-size: 36rpx; font-weight: 800; margin-bottom: 8rpx; } .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-desc { color: #999; font-size: 26rpx; } .soldier-component .user-cert-qrcode-page .user-qrcode-card-content { height: 632rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; } .soldier-component .user-cert-qrcode-page .qrcode-image { width: 400rpx; height: 400rpx; background-color: #f2f2f2; position: relative; } .soldier-component .user-cert-qrcode-page .qrcode-image > image { width: 100%; height: 100%; position: relative; z-index: 1; } .soldier-component .user-cert-qrcode-page .qrcode-image .refresh-mask { left: 0; right: 0; top: 0; bottom: 0; z-index: 2; position: absolute; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.8); } .soldier-component .user-cert-qrcode-page .qrcode-image .refresh-mask > view { width: 76rpx; height: 76rpx; border-radius: 8rpx; background-color: #fff; display: flex; align-items: center; justify-content: center; } .soldier-component .user-cert-qrcode-page .qrcode-image .refresh-mask image { width: 36rpx; height: 36rpx; } .soldier-component .user-cert-qrcode-page .qr-tip { color: #ccc; font-size: 28rpx; display: flex; margin-top: 40rpx; align-items: center; justify-content: center; } .soldier-component .user-cert-qrcode-page .ref-icon { width: 36rpx; height: 36rpx; margin-right: 10rpx; } .soldier-component .user-cert-qrcode-page .footer-items { border-radius: 16rpx; margin-top: 24rpx; background-color: rgba(255, 255, 255, 0.2); } .soldier-component .user-cert-qrcode-page .footer-item { color: #fff; display: flex; padding: 24rpx; font-weight: 800; font-size: 34rpx; align-items: center; justify-content: space-between; }