632 lines
11 KiB
CSS
632 lines
11 KiB
CSS
/* ========== 页面整体布局 ========== */
|
|
.verify-page {
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ========== 顶部导航栏 ========== */
|
|
.top-nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 88rpx;
|
|
padding: 0 24rpx;
|
|
/* #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP */
|
|
padding-top: constant(safe-area-inset-top);
|
|
padding-top: env(safe-area-inset-top);
|
|
/* #endif */
|
|
background: rgba(26, 26, 46, 0.9);
|
|
backdrop-filter: blur(20rpx);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 99;
|
|
}
|
|
|
|
.nav-back {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.back-arrow {
|
|
font-size: 48rpx;
|
|
color: #ffffff;
|
|
line-height: 1;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.nav-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
color: #ffffff;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.nav-right {
|
|
min-width: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.records-link {
|
|
font-size: 26rpx;
|
|
color: #e94560;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ========== 主滚动区域 ========== */
|
|
.verify-scroll {
|
|
flex: 1;
|
|
height: calc(100vh - 88rpx - 160rpx);
|
|
}
|
|
|
|
/* #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP */
|
|
.verify-scroll {
|
|
height: calc(100vh - 88rpx - 160rpx - constant(safe-area-inset-top));
|
|
height: calc(100vh - 88rpx - 160rpx - env(safe-area-inset-top));
|
|
}
|
|
/* #endif */
|
|
|
|
/* ========== 扫描区域 ========== */
|
|
.scan-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 60rpx 40rpx;
|
|
position: relative;
|
|
}
|
|
|
|
/* 背景装饰 */
|
|
.scan-bg-decoration {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 600rpx;
|
|
height: 600rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(233, 69, 96, 0.15) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 扫描框容器 */
|
|
.scan-frame-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 扫描框 */
|
|
.scan-frame {
|
|
width: 480rpx;
|
|
height: 480rpx;
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
/* 四角装饰 */
|
|
.corner {
|
|
position: absolute;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border: 6rpx solid #e94560;
|
|
}
|
|
|
|
.corner.top-left {
|
|
top: 0;
|
|
left: 0;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
border-top-left-radius: 24rpx;
|
|
}
|
|
|
|
.corner.top-right {
|
|
top: 0;
|
|
right: 0;
|
|
border-left: none;
|
|
border-bottom: none;
|
|
border-top-right-radius: 24rpx;
|
|
}
|
|
|
|
.corner.bottom-left {
|
|
bottom: 0;
|
|
left: 0;
|
|
border-right: none;
|
|
border-top: none;
|
|
border-bottom-left-radius: 24rpx;
|
|
}
|
|
|
|
.corner.bottom-right {
|
|
bottom: 0;
|
|
right: 0;
|
|
border-left: none;
|
|
border-top: none;
|
|
border-bottom-right-radius: 24rpx;
|
|
}
|
|
|
|
/* 扫描线动画 */
|
|
.scan-line {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 20rpx;
|
|
right: 20rpx;
|
|
height: 4rpx;
|
|
background: linear-gradient(90deg, transparent, #e94560, #ff6b6b, #e94560, transparent);
|
|
border-radius: 2rpx;
|
|
animation: scanLineMove 2s ease-in-out infinite;
|
|
box-shadow: 0 0 20rpx rgba(233, 69, 96, 0.5);
|
|
}
|
|
|
|
@keyframes scanLineMove {
|
|
0% {
|
|
top: 20rpx;
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
top: calc(100% - 20rpx);
|
|
opacity: 1;
|
|
}
|
|
51% {
|
|
top: calc(100% - 20rpx);
|
|
opacity: 0;
|
|
}
|
|
52% {
|
|
top: 20rpx;
|
|
opacity: 0;
|
|
}
|
|
53% {
|
|
top: 20rpx;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
top: 20rpx;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 扫描提示 */
|
|
.scan-tip {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 48rpx;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.tip-icon {
|
|
font-size: 48rpx;
|
|
}
|
|
|
|
.tip-text {
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tip-sub {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* ========== 今日统计 ========== */
|
|
.today-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 60rpx;
|
|
margin-top: 60rpx;
|
|
padding: 32rpx 60rpx;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 20rpx;
|
|
backdrop-filter: blur(10rpx);
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 56rpx;
|
|
font-weight: 900;
|
|
color: #e94560;
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-divider {
|
|
width: 2rpx;
|
|
height: 60rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* ========== 核销员信息 ========== */
|
|
.verifier-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
margin-top: 40rpx;
|
|
padding: 24rpx 40rpx;
|
|
background: rgba(233, 69, 96, 0.15);
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid rgba(233, 69, 96, 0.3);
|
|
margin-left: 40rpx;
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.verifier-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.verifier-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.verifier-name {
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.verifier-tip {
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* ========== 底部扫码按钮 ========== */
|
|
.bottom-action {
|
|
background: rgba(26, 26, 46, 0.95);
|
|
padding: 20rpx 40rpx 40rpx;
|
|
/* #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP */
|
|
padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
|
/* #endif */
|
|
}
|
|
|
|
.safe-area-bottom {
|
|
height: 0;
|
|
/* #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP */
|
|
height: constant(safe-area-inset-bottom);
|
|
height: env(safe-area-inset-bottom);
|
|
/* #endif */
|
|
}
|
|
|
|
.scan-btn {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
|
|
border-radius: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
border: none;
|
|
box-shadow: 0 8rpx 30rpx rgba(233, 69, 96, 0.4);
|
|
}
|
|
|
|
.scan-btn:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 4rpx 15rpx rgba(233, 69, 96, 0.3);
|
|
}
|
|
|
|
.scan-btn[disabled] {
|
|
background: linear-gradient(135deg, #666 0%, #888 100%);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.scan-btn-icon {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.scan-btn-text {
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
color: #ffffff;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* ========== 核销结果弹窗 ========== */
|
|
.result-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.result-content {
|
|
width: 600rpx;
|
|
background: #ffffff;
|
|
border-radius: 32rpx;
|
|
padding: 60rpx 40rpx 48rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(50rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.result-icon-wrap {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.result-icon-wrap.success {
|
|
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
|
animation: successPulse 0.5s ease;
|
|
}
|
|
|
|
@keyframes successPulse {
|
|
0% { transform: scale(0); }
|
|
50% { transform: scale(1.2); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.result-icon-wrap.used {
|
|
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
|
|
}
|
|
|
|
.result-icon-wrap.refunded,
|
|
.result-icon-wrap.notfound,
|
|
.result-icon-wrap.error {
|
|
background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
|
|
}
|
|
|
|
.result-icon {
|
|
font-size: 64rpx;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 40rpx;
|
|
font-weight: 900;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.result-title.success-text {
|
|
color: #52c41a;
|
|
}
|
|
|
|
.result-title.used-text,
|
|
.result-title.refunded-text {
|
|
color: #faad14;
|
|
}
|
|
|
|
.result-title.notfound-text,
|
|
.result-title.error-text {
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.result-detail {
|
|
width: 100%;
|
|
background: #f8f9fa;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12rpx 0;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.detail-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
flex: 1;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.detail-value.highlight {
|
|
color: #e94560;
|
|
}
|
|
|
|
.result-tip {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
text-align: center;
|
|
margin-bottom: 32rpx;
|
|
padding: 20rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.result-actions {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.result-actions.single {
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
border: none;
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.action-btn.secondary {
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
|
|
.action-btn:active {
|
|
opacity: 0.9;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* ========== 加载中遮罩 ========== */
|
|
.loading-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.loading-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
background: #ffffff;
|
|
padding: 48rpx 60rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border: 6rpx solid #f0f0f0;
|
|
border-top-color: #e94560;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
/* ========== 非核销员提示 ========== */
|
|
.no-permission-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.modal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 60rpx;
|
|
}
|
|
|
|
.modal-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 48rpx;
|
|
font-weight: 900;
|
|
color: #ffffff;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.modal-tip {
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
text-align: center;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.modal-btn {
|
|
width: 320rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
|
|
border-radius: 44rpx;
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
}
|