610 lines
14 KiB
Plaintext
610 lines
14 KiB
Plaintext
/* pages/jinpaids/jinpaids.wxss - 金牌打手机甲风格（CSS变量版） */
|
||
|
||
/* ========== 全局 ========== */
|
||
page {
|
||
background: #0B1A2F;
|
||
min-height: 100vh;
|
||
font-family: 'Avenir', 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||
color: #fff;
|
||
}
|
||
|
||
.bg-grid {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image:
|
||
linear-gradient(rgba(0, 160, 255, 0.1) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(0, 160, 255, 0.1) 1px, transparent 1px);
|
||
background-size: 50rpx 50rpx;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.bg-energy {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: radial-gradient(circle at 20% 30%, rgba(0,200,255,0.1) 0%, transparent 40%),
|
||
radial-gradient(circle at 80% 70%, rgba(0,100,255,0.1) 0%, transparent 40%);
|
||
animation: energyFlow 20s linear infinite;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
@keyframes energyFlow {
|
||
0% { opacity: 0.3; }
|
||
50% { opacity: 0.6; }
|
||
100% { opacity: 0.3; }
|
||
}
|
||
|
||
.page-container {
|
||
position: relative;
|
||
z-index: 2;
|
||
min-height: 100vh;
|
||
padding: 30rpx 25rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ========== 顶部栏 ========== */
|
||
.top-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.jinpai-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.jinpai-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
/* 火苗图标燃烧动画 */
|
||
.fire-icon {
|
||
animation: fireBurn 0.8s infinite alternate ease-in-out;
|
||
filter: drop-shadow(0 0 10rpx #ffaa00);
|
||
}
|
||
@keyframes fireBurn {
|
||
0% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 10rpx #ffaa00); }
|
||
25% { transform: scale(1.1) rotate(2deg); filter: drop-shadow(0 0 20rpx #ff5500); }
|
||
50% { transform: scale(1.05) rotate(-2deg); filter: drop-shadow(0 0 30rpx #ffaa00); }
|
||
75% { transform: scale(1.15) rotate(3deg); filter: drop-shadow(0 0 40rpx #ffaa00); }
|
||
100% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 10rpx #ffaa00); }
|
||
}
|
||
.jinpai-title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #ffaa00;
|
||
text-shadow: 0 0 30rpx #ffaa00, 0 0 60rpx #ffaa00;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
.refresh-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(0,40,70,0.8);
|
||
border: 2rpx solid #00a6ff;
|
||
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
|
||
padding: 8rpx 25rpx;
|
||
}
|
||
.refresh-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.refresh-text {
|
||
font-size: 26rpx;
|
||
color: #00a6ff;
|
||
}
|
||
.refresh-btn:active {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* ========== 用户信息 ========== */
|
||
.user-section {
|
||
display: flex;
|
||
background: rgba(0,30,50,0.5);
|
||
backdrop-filter: blur(20px);
|
||
border: 2rpx solid #00a6ff;
|
||
clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
|
||
padding: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.avatar-wrap {
|
||
position: relative;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
.avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #00a6ff;
|
||
box-shadow: 0 0 50rpx #00a6ff;
|
||
object-fit: cover;
|
||
}
|
||
.avatar-ring {
|
||
position: absolute;
|
||
top: -10rpx;
|
||
left: -10rpx;
|
||
right: -10rpx;
|
||
bottom: -10rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #00a6ff;
|
||
border-top-color: transparent;
|
||
border-bottom-color: transparent;
|
||
animation: ringRotate 6s linear infinite;
|
||
}
|
||
@keyframes ringRotate {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
.user-info {
|
||
flex: 1;
|
||
}
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.nickname {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
margin-right: 15rpx;
|
||
max-width: 250rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.status-tag {
|
||
font-size: 22rpx;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 30rpx;
|
||
background: rgba(255,255,255,0.1);
|
||
border: 1rpx solid currentColor;
|
||
}
|
||
.status-tag.online { color: #00ff80; border-color: #00ff80; }
|
||
.status-tag.offline { color: #aaa; border-color: #aaa; }
|
||
.uid-row {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(0,50,80,0.6);
|
||
border-left: 4rpx solid #00a6ff;
|
||
padding: 8rpx 20rpx;
|
||
margin-bottom: 10rpx;
|
||
width: fit-content;
|
||
}
|
||
.uid-label {
|
||
font-size: 24rpx;
|
||
color: #9cf;
|
||
margin-right: 10rpx;
|
||
}
|
||
.uid-value {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
font-family: monospace;
|
||
margin-right: 15rpx;
|
||
}
|
||
.copy-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
.order-status {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.status-label {
|
||
font-size: 24rpx;
|
||
color: #9cf;
|
||
margin-right: 8rpx;
|
||
}
|
||
.status-value {
|
||
font-size: 24rpx;
|
||
color: #aaa;
|
||
}
|
||
.status-value.active {
|
||
color: #00ff80;
|
||
text-shadow: 0 0 10rpx #00ff80;
|
||
}
|
||
|
||
/* ========== 核心资产卡 ========== */
|
||
.asset-card {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #0A1F3A, #0B2A4A);
|
||
border: 2rpx solid #00a6ff;
|
||
clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
|
||
padding: 30rpx 30rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 0 40rpx #00a6ff;
|
||
}
|
||
.asset-left {
|
||
flex: 1;
|
||
}
|
||
.asset-label {
|
||
font-size: 28rpx;
|
||
color: #9cf;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.asset-value-group {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
.asset-number {
|
||
font-size: 68rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
text-shadow: 0 0 30rpx #00a6ff, 0 0 60rpx #00a6ff;
|
||
}
|
||
.asset-unit {
|
||
font-size: 32rpx;
|
||
color: #00a6ff;
|
||
margin-left: 10rpx;
|
||
}
|
||
.asset-right {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255,255,255,0.1);
|
||
border: 2rpx solid #ffaa00;
|
||
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
|
||
padding: 15rpx 30rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.withdraw-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.withdraw-text {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #ffaa00;
|
||
}
|
||
.withdraw-glow {
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||
animation: scan 2s infinite;
|
||
}
|
||
@keyframes scan {
|
||
0% { left: -100%; }
|
||
100% { left: 100%; }
|
||
}
|
||
.asset-right:active {
|
||
transform: scale(0.96);
|
||
}
|
||
|
||
/* ========== 统计网格 ========== */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.stat-item {
|
||
background: rgba(0,30,50,0.7);
|
||
border: 1rpx solid #00a6ff;
|
||
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
|
||
padding: 20rpx 10rpx;
|
||
text-align: center;
|
||
}
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #9cf;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.stat-value {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
/* ========== 图形化数据（使用CSS变量） ========== */
|
||
.graphic-panel {
|
||
background: rgba(0,30,50,0.6);
|
||
backdrop-filter: blur(15px);
|
||
border: 2rpx solid #00a6ff;
|
||
clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
|
||
padding: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
}
|
||
.chart-item {
|
||
width: 45%;
|
||
text-align: center;
|
||
}
|
||
.chart-title {
|
||
font-size: 28rpx;
|
||
color: #9cf;
|
||
margin-bottom: 15rpx;
|
||
text-transform: uppercase;
|
||
border-left: 4rpx solid #00a6ff;
|
||
padding-left: 15rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
/* 环形进度条（使用CSS变量 --progress-angle） */
|
||
.ring-chart {
|
||
position: relative;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin: 0 auto;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 40rpx #00a6ff;
|
||
}
|
||
.ring-progress {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: conic-gradient(#00a6ff 0deg, #00a6ff var(--progress-angle), #1a3a5a var(--progress-angle), #1a3a5a 360deg);
|
||
border-radius: 50%;
|
||
}
|
||
.ring-inner {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 15rpx;
|
||
right: 15rpx;
|
||
bottom: 15rpx;
|
||
background: #0a1a2a;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #00a6ff;
|
||
box-shadow: inset 0 0 20rpx rgba(0,0,0,0.5);
|
||
}
|
||
|
||
/* 提现进度条（使用CSS变量 --progress-width） */
|
||
.progress-container {
|
||
height: 30rpx;
|
||
background: #1a3a5a;
|
||
border-radius: 15rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
}
|
||
.progress-bar {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #00a6ff, #80d4ff);
|
||
border-radius: 15rpx;
|
||
width: var(--progress-width);
|
||
position: relative;
|
||
}
|
||
.flow-bar::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
|
||
animation: flow 1.5s infinite;
|
||
}
|
||
@keyframes flow {
|
||
0% { left: -100%; }
|
||
100% { left: 100%; }
|
||
}
|
||
.progress-label {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: -30rpx;
|
||
font-size: 24rpx;
|
||
color: #00a6ff;
|
||
}
|
||
.progress-stats {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
color: #9cf;
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
/* ========== 功能按钮（图标强光效果） ========== */
|
||
.function-panel {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.function-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20rpx;
|
||
}
|
||
.func-item {
|
||
background: rgba(0,20,40,0.8);
|
||
border: 1rpx solid #00a6ff;
|
||
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
|
||
padding: 25rpx 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
transition: 0.2s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.func-item:active {
|
||
transform: scale(0.96);
|
||
box-shadow: 0 0 40rpx #00a6ff;
|
||
}
|
||
/* 图标超强发光 */
|
||
.super-glow {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-bottom: 15rpx;
|
||
filter: drop-shadow(0 0 25rpx #00a6ff) drop-shadow(0 0 50rpx #00a6ff) drop-shadow(0 0 80rpx #00a6ff);
|
||
animation: superGlow 1s infinite alternate;
|
||
}
|
||
@keyframes superGlow {
|
||
0% { filter: drop-shadow(0 0 20rpx #00a6ff) drop-shadow(0 0 40rpx #00a6ff) drop-shadow(0 0 60rpx #00a6ff); }
|
||
100% { filter: drop-shadow(0 0 30rpx #00a6ff) drop-shadow(0 0 60rpx #00a6ff) drop-shadow(0 0 100rpx #00a6ff); }
|
||
}
|
||
.func-label {
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* ========== 加载遮罩 ========== */
|
||
.loading-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(2,6,12,0.9);
|
||
backdrop-filter: blur(20px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
}
|
||
.loading-core {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border: 4rpx solid #00a6ff;
|
||
border-radius: 50%;
|
||
border-top-color: transparent;
|
||
animation: spin 1s linear infinite;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.loading-core::after {
|
||
content: '';
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border: 4rpx solid #ffaa00;
|
||
border-radius: 50%;
|
||
border-bottom-color: transparent;
|
||
animation: spin 1.5s reverse infinite;
|
||
}
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
/* ========== 原有样式（完全不变） ========== */
|
||
/* ... 此处省略，切勿修改 ... */
|
||
|
||
/* ========== 联系管事胶囊（新增，适配机甲风格） ========== */
|
||
.inviter-capsule {
|
||
margin: 30rpx 25rpx 30rpx;
|
||
background: rgba(0, 20, 40, 0.85);
|
||
backdrop-filter: blur(20px);
|
||
border: 2rpx solid #00a6ff;
|
||
clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-shadow: 0 0 30rpx rgba(0, 166, 255, 0.4);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.capsule-body {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.capsule-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
border: 3rpx solid #00a6ff;
|
||
box-shadow: 0 0 20rpx #00a6ff;
|
||
margin-right: 20rpx;
|
||
background: #0a1a2a;
|
||
}
|
||
|
||
.capsule-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.capsule-name {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
text-shadow: 0 0 15rpx #00a6ff;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.capsule-uid {
|
||
font-size: 24rpx;
|
||
color: #9cf;
|
||
}
|
||
|
||
.capsule-contact {
|
||
background: linear-gradient(135deg, #00a6ff, #0080ff);
|
||
border-radius: 30rpx;
|
||
padding: 12rpx 30rpx;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
box-shadow: 0 0 20rpx #00a6ff;
|
||
letter-spacing: 2rpx;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.capsule-contact:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 0 40rpx #00a6ff;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ========== 🆕 称号标签展示区 ========== */
|
||
.badge-area {
|
||
width: 100%;
|
||
margin: 20rpx 0 30rpx 0;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.badge-scroll {
|
||
width: 100%;
|
||
max-height: 140rpx;
|
||
overflow-y: auto;
|
||
background: transparent;
|
||
}
|
||
|
||
.badge-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8rpx;
|
||
padding: 6rpx 0;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.badge-item {
|
||
flex-shrink: 0;
|
||
} |