1024 lines
23 KiB
Plaintext
1024 lines
23 KiB
Plaintext
/* ========================
|
|
阿龙电竞 - 商家充值页面
|
|
赛博科技风主题 - 完全修复版
|
|
v4.0 - 重点修复文字可见性和整体协调性
|
|
======================== */
|
|
|
|
/* 科技主题色 - 增强对比度 */
|
|
:root {
|
|
--primary-color: #00f3ff; /* 主科技蓝 */
|
|
--primary-light: #4dfbff; /* 亮科技蓝 */
|
|
--primary-dark: #00a0b0; /* 暗科技蓝 */
|
|
--secondary-color: #ff2a6d; /* 科技粉红 */
|
|
--accent-color: #c4b5fd; /* 科技金 */
|
|
--accent-purple: #9d4edd; /* 科技紫 */
|
|
--dark-bg: #0a0e17; /* 深色背景 */
|
|
--medium-bg: #13182b; /* 中色背景 */
|
|
--light-bg: #1c2238; /* 浅色背景 */
|
|
--card-bg: rgba(20, 25, 40, 0.85); /* 卡片背景 - 提高透明度 */
|
|
--border-glow: rgba(0, 243, 255, 0.4);
|
|
--text-primary: #ffffff; /* 主要文字 */
|
|
--text-secondary: #a0aec0; /* 次要文字 */
|
|
--text-highlight: #ffffff; /* 高亮文字 */
|
|
--text-glow: #00f3ff; /* 发光文字 */
|
|
--shadow-tech: 0 8rpx 24rpx rgba(0, 0, 0, 0.5);
|
|
--shadow-glow: 0 0 20rpx rgba(0, 243, 255, 0.25);
|
|
}
|
|
|
|
/* 全局页面样式 - 修复背景 */
|
|
.shangjia-chongzhi-page {
|
|
padding: 20rpx 20rpx 100rpx;
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
background: linear-gradient(145deg,
|
|
var(--dark-bg) 0%,
|
|
var(--medium-bg) 50%,
|
|
var(--light-bg) 100%
|
|
) !important;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 移除过强的毛玻璃效果，只保留轻微模糊 */
|
|
.shangjia-chongzhi-page::before {
|
|
display: none; /* 移除网格背景 */
|
|
}
|
|
|
|
/* ========== 余额卡片样式 - 完全重写 ========== */
|
|
.balance-card {
|
|
background: rgba(20, 25, 40, 0.9); /* 降低透明度，提高文字可见性 */
|
|
border-radius: 25rpx;
|
|
padding: 35rpx 25rpx;
|
|
margin: 0 0 35rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1.5rpx solid rgba(0, 243, 255, 0.3);
|
|
box-shadow:
|
|
var(--shadow-tech),
|
|
var(--shadow-glow),
|
|
inset 0 0 15rpx rgba(0, 243, 255, 0.08);
|
|
z-index: 1;
|
|
/* 移除或大幅降低毛玻璃效果 */
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* 余额头部 */
|
|
.balance-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 35rpx;
|
|
}
|
|
|
|
/* 余额标题 - 确保文字在最上层，完全可见 */
|
|
.balance-title {
|
|
position: relative;
|
|
z-index: 10; /* 确保在最上层 */
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 38rpx;
|
|
font-weight: 800;
|
|
letter-spacing: 1.5rpx;
|
|
color: var(--text-primary) !important; /* 强制使用白色，确保可见 */
|
|
text-shadow:
|
|
0 0 15rpx rgba(0, 243, 255, 0.8),
|
|
0 0 30rpx rgba(0, 243, 255, 0.4),
|
|
0 0 45rpx rgba(0, 243, 255, 0.2);
|
|
position: relative;
|
|
display: inline-block;
|
|
/* 移除背景渐变，直接用纯色加阴影 */
|
|
background: none;
|
|
-webkit-background-clip: initial;
|
|
background-clip: initial;
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
/* 标题下划线装饰 */
|
|
.title-decoration {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.decoration-line {
|
|
width: 50rpx;
|
|
height: 3rpx;
|
|
background: linear-gradient(90deg,
|
|
transparent,
|
|
var(--primary-color),
|
|
transparent
|
|
);
|
|
border-radius: 2rpx;
|
|
animation: lineFlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.decoration-dot {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
background: var(--secondary-color);
|
|
border-radius: 50%;
|
|
margin: 0 12rpx;
|
|
animation: pulse 1.5s infinite;
|
|
box-shadow: 0 0 8rpx var(--secondary-color);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.3);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes lineFlow {
|
|
0% { background-position: -100% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
/* VIP商家标签 */
|
|
.balance-chip {
|
|
background: linear-gradient(90deg,
|
|
rgba(0, 243, 255, 0.15),
|
|
rgba(255, 42, 109, 0.15)
|
|
);
|
|
border: 1rpx solid rgba(0, 243, 255, 0.3);
|
|
border-radius: 20rpx;
|
|
padding: 10rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 44rpx;
|
|
min-width: 180rpx;
|
|
box-shadow:
|
|
0 4rpx 12rpx rgba(0, 243, 255, 0.2),
|
|
inset 0 0 8rpx rgba(0, 243, 255, 0.1);
|
|
position: relative;
|
|
z-index: 10; /* 确保在最上层 */
|
|
}
|
|
|
|
.chip-text {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary) !important;
|
|
text-align: center;
|
|
letter-spacing: 1rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 余额金额展示 - 完全重写，确保数字可见 */
|
|
.balance-amount {
|
|
text-align: center;
|
|
margin: 35rpx 0;
|
|
position: relative;
|
|
z-index: 10; /* 确保在最上层 */
|
|
}
|
|
|
|
.currency {
|
|
font-size: 44rpx;
|
|
font-weight: 800;
|
|
color: var(--accent-color) !important; /* 使用金色，确保可见 */
|
|
margin-right: 8rpx;
|
|
text-shadow:
|
|
0 0 20rpx rgba(196, 181, 253, 0.7),
|
|
0 0 40rpx rgba(196, 181, 253, 0.4);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
/* 移除渐变背景，直接用纯色 */
|
|
background: none;
|
|
-webkit-background-clip: initial;
|
|
background-clip: initial;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 76rpx;
|
|
font-weight: 900;
|
|
color: var(--text-primary) !important; /* 强制使用白色 */
|
|
line-height: 1;
|
|
text-shadow:
|
|
0 0 20rpx rgba(0, 243, 255, 0.8),
|
|
0 0 40rpx rgba(0, 243, 255, 0.5),
|
|
0 0 60rpx rgba(0, 243, 255, 0.3);
|
|
letter-spacing: -1.5rpx;
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin: 0 5rpx;
|
|
/* 移除渐变背景，直接用纯色加阴影 */
|
|
background: none;
|
|
-webkit-background-clip: initial;
|
|
background-clip: initial;
|
|
}
|
|
|
|
.amount::after {
|
|
display: none; /* 移除模糊效果 */
|
|
}
|
|
|
|
.unit {
|
|
font-size: 30rpx;
|
|
color: var(--text-secondary);
|
|
margin-left: 8rpx;
|
|
font-weight: 500;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 余额底部标签 */
|
|
.balance-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30rpx;
|
|
margin-top: 30rpx;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.balance-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 243, 255, 0.08);
|
|
padding: 10rpx 22rpx;
|
|
border-radius: 18rpx;
|
|
border: 1rpx solid rgba(0, 243, 255, 0.2);
|
|
min-width: 150rpx;
|
|
}
|
|
|
|
.tag-text {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: var(--primary-light) !important;
|
|
text-align: center;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
/* 机甲装饰元素 - 调低透明度，不干扰文字 */
|
|
.mech-decoration {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
z-index: 1; /* 在背景层，不在文字上层 */
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.mech-line {
|
|
position: absolute;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
var(--primary-color) 50%,
|
|
transparent 100%
|
|
);
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.line-1 {
|
|
top: 15rpx;
|
|
left: 15rpx;
|
|
right: 15rpx;
|
|
height: 1.5rpx;
|
|
animation: lineFlow 3s ease-in-out infinite;
|
|
}
|
|
|
|
.line-2 {
|
|
bottom: 15rpx;
|
|
left: 15rpx;
|
|
right: 15rpx;
|
|
height: 1.5rpx;
|
|
animation: lineFlow 3s ease-in-out infinite reverse;
|
|
}
|
|
|
|
.mech-corner {
|
|
position: absolute;
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
border: 1.5rpx solid var(--primary-color);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.corner-1 {
|
|
top: 15rpx;
|
|
left: 15rpx;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
border-top-left-radius: 6rpx;
|
|
}
|
|
|
|
.corner-2 {
|
|
top: 15rpx;
|
|
right: 15rpx;
|
|
border-left: none;
|
|
border-bottom: none;
|
|
border-top-right-radius: 6rpx;
|
|
}
|
|
|
|
.corner-3 {
|
|
bottom: 15rpx;
|
|
left: 15rpx;
|
|
border-right: none;
|
|
border-top: none;
|
|
border-bottom-left-radius: 6rpx;
|
|
}
|
|
|
|
.corner-4 {
|
|
bottom: 15rpx;
|
|
right: 15rpx;
|
|
border-left: none;
|
|
border-top: none;
|
|
border-bottom-right-radius: 6rpx;
|
|
}
|
|
|
|
/* ========== 充值金额区域 ========== */
|
|
.amount-section {
|
|
background: rgba(25, 30, 48, 0.9);
|
|
border-radius: 25rpx;
|
|
padding: 35rpx 25rpx;
|
|
margin-bottom: 35rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(4px);
|
|
box-shadow:
|
|
var(--shadow-tech),
|
|
inset 0 0 15rpx rgba(0, 243, 255, 0.05);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 35rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: var(--text-primary) !important;
|
|
display: block;
|
|
margin-bottom: 12rpx;
|
|
letter-spacing: 1rpx;
|
|
text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.2);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.section-subtitle {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.subtitle-text {
|
|
font-size: 26rpx;
|
|
color: var(--text-secondary);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 快捷金额网格 */
|
|
.quick-amount-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 18rpx;
|
|
margin-bottom: 35rpx;
|
|
}
|
|
|
|
.amount-item {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 2rpx solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 18rpx;
|
|
padding: 26rpx 10rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 85rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.amount-item:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.amount-item.active {
|
|
background: linear-gradient(135deg,
|
|
rgba(0, 243, 255, 0.15),
|
|
rgba(157, 78, 221, 0.15)
|
|
);
|
|
border-color: var(--primary-color);
|
|
transform: translateY(-3rpx);
|
|
box-shadow:
|
|
0 10rpx 25rpx rgba(0, 243, 255, 0.2),
|
|
0 0 30rpx rgba(0, 243, 255, 0.1),
|
|
inset 0 0 12rpx rgba(0, 243, 255, 0.1);
|
|
}
|
|
|
|
.amount-text {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary) !important;
|
|
position: relative;
|
|
z-index: 10;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.amount-item.active .amount-text {
|
|
color: var(--text-highlight) !important;
|
|
text-shadow: 0 0 10rpx var(--primary-color);
|
|
}
|
|
|
|
.amount-halo {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 90%;
|
|
height: 90%;
|
|
background: radial-gradient(
|
|
circle at center,
|
|
rgba(0, 243, 255, 0.2) 0%,
|
|
transparent 70%
|
|
);
|
|
border-radius: 50%;
|
|
animation: haloPulse 2s ease-in-out infinite;
|
|
opacity: 0;
|
|
z-index: 1; /* 在文字下面 */
|
|
}
|
|
|
|
.amount-item.active .amount-halo {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes haloPulse {
|
|
0%, 100% {
|
|
opacity: 0.4;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: translate(-50%, -50%) scale(1.1);
|
|
}
|
|
}
|
|
|
|
/* 自定义金额输入 - 改为线条样式 */
|
|
.custom-amount {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
border: none;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.custom-input-wrapper {
|
|
position: relative;
|
|
margin-bottom: 20rpx;
|
|
width: 100%;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
|
|
.input-label {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 42rpx;
|
|
font-weight: 800;
|
|
color: var(--accent-color) !important;
|
|
text-shadow: 0 0 10rpx rgba(196, 181, 253, 0.5);
|
|
z-index: 10;
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.custom-input {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 30rpx 20rpx 30rpx 60rpx;
|
|
font-size: 42rpx;
|
|
font-weight: 800;
|
|
color: var(--text-primary) !important;
|
|
width: 100%;
|
|
text-align: left;
|
|
caret-color: var(--primary-color);
|
|
border-radius: 0;
|
|
border-bottom: 2rpx solid rgba(255, 255, 255, 0.15);
|
|
transition: all 0.3s ease;
|
|
box-sizing: border-box;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.custom-input:focus {
|
|
border-bottom-color: var(--primary-color);
|
|
box-shadow: 0 0 15rpx rgba(0, 243, 255, 0.3);
|
|
}
|
|
|
|
.placeholder {
|
|
color: rgba(160, 174, 192, 0.6) !important;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.input-line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.input-line.active {
|
|
background: linear-gradient(90deg,
|
|
var(--primary-color),
|
|
var(--secondary-color),
|
|
var(--primary-color)
|
|
);
|
|
height: 3rpx;
|
|
box-shadow: 0 0 15rpx var(--primary-color);
|
|
animation: lineFlash 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes lineFlash {
|
|
0%, 100% { opacity: 0.8; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.amount-hint {
|
|
font-size: 24rpx;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
display: block;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
/* ========== 支付按钮区域 ========== */
|
|
.pay-section {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.pay-button-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 支付按钮 - 修复颜色问题 */
|
|
.pay-button {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background: linear-gradient(135deg,
|
|
rgba(100, 116, 139, 0.8),
|
|
rgba(74, 85, 104, 0.8)
|
|
);
|
|
border-radius: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
border: 1.5rpx solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* 激活状态 - 修复为科技蓝渐变 */
|
|
.pay-button.active {
|
|
background: linear-gradient(135deg,
|
|
#008ca3, /* 深蓝 */
|
|
#00b8d4, /* 中蓝 */
|
|
#00f3ff /* 亮蓝 */
|
|
);
|
|
border: 1.5rpx solid rgba(0, 243, 255, 0.6);
|
|
box-shadow:
|
|
0 12rpx 35rpx rgba(0, 243, 255, 0.4),
|
|
0 0 50rpx rgba(0, 243, 255, 0.3),
|
|
inset 0 0 20rpx rgba(0, 243, 255, 0.15);
|
|
}
|
|
|
|
.pay-button.active:active {
|
|
transform: scale(0.98);
|
|
box-shadow:
|
|
0 8rpx 25rpx rgba(0, 243, 255, 0.4),
|
|
0 0 35rpx rgba(0, 243, 255, 0.3),
|
|
inset 0 0 15rpx rgba(0, 243, 255, 0.15);
|
|
}
|
|
|
|
/* 按钮闪光特效 */
|
|
.pay-button-shine {
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(45deg,
|
|
transparent 30%,
|
|
rgba(255, 255, 255, 0.2) 50%,
|
|
transparent 70%
|
|
);
|
|
animation: shine 3s infinite linear;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.pay-button.active .pay-button-shine {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
|
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
|
}
|
|
|
|
/* 按钮内容 */
|
|
.button-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 10; /* 确保按钮文字在最上层 */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.button-text {
|
|
font-size: 38rpx;
|
|
font-weight: 800;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
letter-spacing: 2rpx;
|
|
text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.pay-button.active .button-text {
|
|
color: white !important;
|
|
text-shadow:
|
|
0 0 12rpx rgba(255, 255, 255, 0.8),
|
|
0 0 25rpx rgba(0, 243, 255, 0.6);
|
|
}
|
|
|
|
/* ========== 支付状态提示 ========== */
|
|
.payment-status {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(10, 14, 23, 0.95);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(10rpx);
|
|
}
|
|
|
|
.status-content {
|
|
background: linear-gradient(135deg,
|
|
rgba(25, 30, 48, 0.95),
|
|
rgba(40, 47, 75, 0.95)
|
|
);
|
|
border-radius: 28rpx;
|
|
padding: 60rpx 40rpx;
|
|
text-align: center;
|
|
max-width: 500rpx;
|
|
width: 85%;
|
|
border: 2rpx solid var(--primary-color);
|
|
box-shadow:
|
|
0 20rpx 50rpx rgba(0, 0, 0, 0.6),
|
|
0 0 50rpx rgba(0, 243, 255, 0.4);
|
|
position: relative;
|
|
overflow: hidden;
|
|
animation: statusAppear 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes statusAppear {
|
|
0% { opacity: 0; transform: scale(0.9); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 36rpx;
|
|
font-weight: 800;
|
|
color: var(--text-primary) !important;
|
|
display: block;
|
|
margin-bottom: 15rpx;
|
|
text-shadow: 0 0 10rpx rgba(0, 243, 255, 0.6);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.status-subtext {
|
|
font-size: 28rpx;
|
|
color: var(--text-secondary);
|
|
display: block;
|
|
margin-bottom: 40rpx;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.status-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.action-button {
|
|
background: linear-gradient(135deg, #008ca3, #00f3ff);
|
|
border-radius: 20rpx;
|
|
padding: 20rpx 40rpx;
|
|
min-width: 200rpx;
|
|
box-shadow:
|
|
0 8rpx 24rpx rgba(0, 243, 255, 0.4),
|
|
0 0 16rpx rgba(0, 243, 255, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.action-button:active {
|
|
transform: scale(0.95);
|
|
box-shadow:
|
|
0 4rpx 12rpx rgba(0, 243, 255, 0.4),
|
|
0 0 8rpx rgba(0, 243, 255, 0.3);
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-align: center;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
/* ========== 加载遮罩 ========== */
|
|
.loading-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(10, 14, 23, 0.92);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1001;
|
|
backdrop-filter: blur(10rpx);
|
|
}
|
|
|
|
.loading-content {
|
|
text-align: center;
|
|
animation: loadingFloat 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes loadingFloat {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-12rpx); }
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border: 7rpx solid transparent;
|
|
border-top: 7rpx solid var(--primary-color);
|
|
border-right: 7rpx solid var(--secondary-color);
|
|
border-radius: 50%;
|
|
animation: spin 1.5s linear infinite;
|
|
margin: 0 auto 30rpx;
|
|
box-shadow:
|
|
0 0 20rpx var(--primary-color),
|
|
inset 0 0 12rpx rgba(0, 243, 255, 0.2);
|
|
position: relative;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 28rpx;
|
|
color: var(--text-primary);
|
|
text-shadow: 0 0 10rpx rgba(0, 243, 255, 0.6);
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ========== 修复背景颜色和间距 ========== */
|
|
|
|
/* 1. 调整背景颜色为更亮的科技风 */
|
|
page {
|
|
background: linear-gradient(135deg,
|
|
#0e1424 0%, /* 调亮深色部分 */
|
|
#1a2238 50%,
|
|
#242d45 100%
|
|
) !important;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 2. 调整页面整体间距 */
|
|
.shangjia-chongzhi-page {
|
|
padding: 20rpx 20rpx 100rpx !important; /* 稍微增加边距 */
|
|
background: transparent !important;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 3. 调整余额卡片 */
|
|
.balance-card {
|
|
margin: 0 0 30rpx !important; /* 增加下方间距 */
|
|
padding: 35rpx 25rpx !important; /* 增加内边距 */
|
|
border-radius: 25rpx !important;
|
|
background: rgba(25, 30, 48, 0.9) !important; /* 调亮背景 */
|
|
border: 1.5rpx solid rgba(0, 243, 255, 0.4) !important; /* 加强边框 */
|
|
}
|
|
|
|
/* 4. 调整余额字体和颜色 - 确保可见 */
|
|
.balance-amount {
|
|
margin: 30rpx 0 !important;
|
|
}
|
|
|
|
.currency {
|
|
font-size: 42rpx !important;
|
|
color: #c4b5fd !important; /* 使用更亮的金色 */
|
|
text-shadow: 0 0 20rpx rgba(196, 181, 253, 0.8) !important;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 72rpx !important; /* 稍微调大 */
|
|
color: #ffffff !important;
|
|
text-shadow:
|
|
0 0 25rpx rgba(0, 243, 255, 0.8),
|
|
0 0 50rpx rgba(0, 243, 255, 0.5) !important;
|
|
}
|
|
|
|
.unit {
|
|
font-size: 30rpx !important;
|
|
color: #a0aec0 !important; /* 调亮灰色 */
|
|
}
|
|
|
|
/* 5. 调整充值金额区域 */
|
|
.amount-section {
|
|
margin-bottom: 30rpx !important;
|
|
padding: 30rpx 25rpx !important;
|
|
border-radius: 25rpx !important;
|
|
background: rgba(30, 35, 55, 0.9) !important; /* 调亮背景 */
|
|
}
|
|
|
|
/* 6. 调整快捷金额网格 */
|
|
.quick-amount-grid {
|
|
gap: 18rpx !important;
|
|
margin-bottom: 30rpx !important;
|
|
}
|
|
|
|
.amount-item {
|
|
min-height: 125rpx !important; /* 增加高度 */
|
|
padding: 25rpx 10rpx !important;
|
|
}
|
|
|
|
.amount-text {
|
|
font-size: 32rpx !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* 7. 调整输入区域 - 修复占位符溢出问题 */
|
|
.custom-amount {
|
|
margin-top: 20rpx !important; /* 增加上方间距 */
|
|
}
|
|
|
|
.custom-input-wrapper {
|
|
margin-bottom: 20rpx !important;
|
|
padding-bottom: 15rpx !important; /* 增加底部间距 */
|
|
}
|
|
|
|
.custom-input {
|
|
padding: 28rpx 20rpx 28rpx 60rpx !important;
|
|
height: 145rpx !important; /* 增加高度，让内容有足够空间 */
|
|
font-size: 40rpx !important;
|
|
color: #ffffff !important;
|
|
border-bottom: 2rpx solid rgba(255, 255, 255, 0.2) !important;
|
|
}
|
|
|
|
.custom-input:focus {
|
|
border-bottom-color: #00f3ff !important;
|
|
box-shadow: 0 0 20rpx rgba(0, 243, 255, 0.4) !important;
|
|
}
|
|
|
|
.input-label {
|
|
font-size: 40rpx !important;
|
|
color: #c4b5fd !important; /* 使用金色 */
|
|
text-shadow: 0 0 15rpx rgba(196, 181, 253, 0.6) !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
}
|
|
|
|
.placeholder {
|
|
color: rgba(160, 174, 192, 0.8) !important; /* 调亮占位符 */
|
|
font-size: 34rpx !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* 8. 调整按钮区域 */
|
|
.pay-section {
|
|
margin-top: 65rpx !important;
|
|
}
|
|
|
|
.pay-button {
|
|
height: 100rpx !important; /* 恢复适当高度 */
|
|
border-radius: 22rpx !important;
|
|
}
|
|
|
|
.pay-button.active {
|
|
background: linear-gradient(135deg,
|
|
#0099b0, /* 更亮的蓝 */
|
|
#00ccff, /* 亮蓝 */
|
|
#00f3ff /* 最亮蓝 */
|
|
) !important;
|
|
border: 1.5rpx solid rgba(0, 243, 255, 0.8) !important;
|
|
}
|
|
|
|
.button-text {
|
|
font-size: 36rpx !important;
|
|
color: #ffffff !important;
|
|
text-shadow: 0 0 10rpx rgba(0, 243, 255, 0.8) !important;
|
|
}
|
|
|
|
/* 9. 调整标题文字颜色 - 确保清晰可见 */
|
|
.title-text {
|
|
font-size: 36rpx !important;
|
|
color: #ffffff !important;
|
|
text-shadow:
|
|
0 0 20rpx rgba(0, 243, 255, 0.8),
|
|
0 0 40rpx rgba(0, 243, 255, 0.4) !important;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 34rpx !important;
|
|
color: #ffffff !important;
|
|
text-shadow: 0 0 15rpx rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
|
|
.subtitle-text,
|
|
.amount-hint {
|
|
color: #b8c2cc !important; /* 调亮灰色文字 */
|
|
font-size: 26rpx !important;
|
|
}
|
|
|
|
/* 10. 调整卡片文字颜色 */
|
|
.chip-text {
|
|
color: #ffffff !important;
|
|
text-shadow: 0 0 8rpx rgba(0, 243, 255, 0.6) !important;
|
|
}
|
|
|
|
.tag-text {
|
|
color: #4dfbff !important; /* 使用亮科技蓝 */
|
|
text-shadow: 0 0 8rpx rgba(0, 243, 255, 0.4) !important;
|
|
}
|
|
|
|
/* 11. 增强装饰元素可见性（但不干扰文字） */
|
|
.mech-line {
|
|
opacity: 0.25 !important; /* 稍微增强可见性 */
|
|
}
|
|
|
|
.mech-corner {
|
|
opacity: 0.3 !important; /* 稍微增强可见性 */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|