366 lines
7.1 KiB
Plaintext
366 lines
7.1 KiB
Plaintext
/* 全局背景 */
|
|
page {
|
|
background: #F8FAFE;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
/* 背景图 */
|
|
.page-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.4;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 未注册区域 */
|
|
.unreg-area {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
padding: 0 50rpx;
|
|
}
|
|
|
|
.unreg-card {
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.75);
|
|
backdrop-filter: blur(25rpx);
|
|
-webkit-backdrop-filter: blur(25rpx);
|
|
border-radius: 48rpx;
|
|
padding: 60rpx 50rpx;
|
|
text-align: center;
|
|
box-shadow: 0 20rpx 50rpx rgba(0,0,0,0.06);
|
|
border: 1rpx solid rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.unreg-title {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #1A1A1A;
|
|
display: block;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
.unreg-input {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 48rpx;
|
|
padding: 0 40rpx;
|
|
font-size: 30rpx;
|
|
color: #1A1A1A;
|
|
margin-bottom: 40rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.ph {
|
|
color: #999999;
|
|
}
|
|
|
|
.unreg-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(15rpx);
|
|
border-radius: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2rpx solid rgba(0,0,0,0.08);
|
|
box-shadow: 0 12rpx 30rpx rgba(0,0,0,0.05);
|
|
}
|
|
.unreg-btn:active { opacity: 0.8; }
|
|
.unreg-btn-text {
|
|
color: #1A1A1A;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 已注册主区域 */
|
|
.main-body {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 0 30rpx 40rpx;
|
|
}
|
|
|
|
/* 刷新按钮 */
|
|
.refresh-btn {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
right: 40rpx;
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
background: rgba(255,255,255,0.75);
|
|
backdrop-filter: blur(12rpx);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 20;
|
|
border: 1rpx solid rgba(255,255,255,0.6);
|
|
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
|
}
|
|
.refresh-icon {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
|
|
/* 用户卡片 */
|
|
.user-card {
|
|
margin-top: 60rpx;
|
|
margin-bottom: 30rpx;
|
|
background: rgba(255,255,255,0.7);
|
|
backdrop-filter: blur(20rpx);
|
|
-webkit-backdrop-filter: blur(20rpx);
|
|
border-radius: 36rpx;
|
|
padding: 28rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1rpx solid rgba(255,255,255,0.5);
|
|
box-shadow: 0 12rpx 35rpx rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
border: 3rpx solid #FFFFFF;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
color: #1A1A1A;
|
|
display: block;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.uid-row {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background: rgba(0,0,0,0.03);
|
|
border-radius: 20rpx;
|
|
padding: 6rpx 18rpx;
|
|
}
|
|
|
|
.uid-text {
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.copy-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
/* 称号区域 */
|
|
.badge-zone {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.badge-scroll {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 资产卡片 */
|
|
.asset-card {
|
|
background: rgba(255,255,255,0.7);
|
|
backdrop-filter: blur(20rpx);
|
|
-webkit-backdrop-filter: blur(20rpx);
|
|
border-radius: 36rpx;
|
|
padding: 28rpx 30rpx;
|
|
margin-bottom: 28rpx;
|
|
border: 1rpx solid rgba(255,255,255,0.5);
|
|
box-shadow: 0 12rpx 35rpx rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.asset-title {
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
display: block;
|
|
}
|
|
|
|
.asset-amount {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin: 10rpx 0 22rpx;
|
|
}
|
|
|
|
.amount-number {
|
|
font-size: 74rpx;
|
|
font-weight: 800;
|
|
color: #1A1A1A;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.amount-unit {
|
|
font-size: 32rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 四列数据统计 */
|
|
.four-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 20rpx 0;
|
|
border-top: 1rpx solid rgba(0,0,0,0.06);
|
|
border-bottom: 1rpx solid rgba(0,0,0,0.06);
|
|
margin-bottom: 22rpx;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-val {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #1A1A1A;
|
|
display: block;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 20rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 提现按钮 */
|
|
.withdraw-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255,255,255,0.55);
|
|
backdrop-filter: blur(12rpx);
|
|
border-radius: 48rpx;
|
|
padding: 16rpx 0;
|
|
border: 2rpx solid rgba(0,0,0,0.06);
|
|
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.withdraw-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.withdraw-text {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
/* 功能入口三列布局 */
|
|
.func-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-bottom: 28rpx;
|
|
}
|
|
|
|
.func-item {
|
|
width: 31%;
|
|
aspect-ratio: 1 / 1;
|
|
background: rgba(255,255,255,0.7);
|
|
backdrop-filter: blur(16rpx);
|
|
-webkit-backdrop-filter: blur(16rpx);
|
|
border-radius: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
border: 1rpx solid rgba(255,255,255,0.5);
|
|
box-shadow: 0 8rpx 22rpx rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.func-icon {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.func-label {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 联系组长卡片 */
|
|
.contact-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(255,255,255,0.7);
|
|
backdrop-filter: blur(20rpx);
|
|
-webkit-backdrop-filter: blur(20rpx);
|
|
border-radius: 36rpx;
|
|
padding: 20rpx 30rpx;
|
|
margin-bottom: 40rpx;
|
|
border: 1rpx solid rgba(255,255,255,0.5);
|
|
box-shadow: 0 10rpx 25rpx rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.contact-left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.contact-avatar {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
margin-right: 18rpx;
|
|
border: 2rpx solid #FFFFFF;
|
|
}
|
|
|
|
.contact-name {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.contact-uid {
|
|
font-size: 22rpx;
|
|
color: #1A1A1A;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.contact-arrow {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
|
|
/* 加载遮罩 */
|
|
.loading-mask {
|
|
position: fixed;
|
|
top:0; left:0; right:0; bottom:0;
|
|
background: rgba(255,255,255,0.85);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
.loading-spinner {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border: 4rpx solid rgba(0,0,0,0.1);
|
|
border-top-color: #1A1A1A;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
} |