XingQue/a_long
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

统一排行榜对齐星雀UI，页面资源后台配置实时刷新

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
2026-06-27 01:26:11 +08:00
parent 1ab2e2080a
commit 21112173f2
292 changed files with 64010 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
miniprogram/pages/jinpaids/jinpaids.js Normal file
View File

@@ -0,0 +1,346 @@
// pages/jinpaids/jinpaids.js
import request from '../../utils/request.js'
import popupService from '../../services/popupService.js'
const app = getApp()
Page({
data: {
// OSS地址
ossImageUrl: '',
// 图标路径
icons: {
jinpai: '',
refresh: '',
copy: '',
qiangdan: '',
chongzhi: '',
dingdan: '',
chufa: '',
paihang: '',
xiugai: '',
tixian: '',
rightArrow: ''
},
// 用户基本信息
uid: '',
touxiang: '',
avatarUrl: '',
dashouNicheng: '',
// 打手核心数据
chenghao: '',
yongjin: '0.00',
zonge: '0.00',
yajin: '0.00',
jinfen: '0',
chengjiaoliang: '0',
zaixianZhuangtai: 0,
dashouzhuangtai: '',
clumber: [],
// 金牌专属数据
jiedanZongliang: '0',
jinriJiedan: '0.00',
zuijinTixian: '0.00',
// 页面状态
isLoading: false,
lastRefreshTime: 0,
canRefresh: true,
// 计算数据
chengjiaoRate: '0%',
chengjiaoAngle: 0,
tixianProgress: 0,
// 邀请人缓存（管事）
inviterCache: null,
chenghaoList: [] // 新增
},
onLoad() {
const ossUrl = app.globalData.ossImageUrl || ''
const iconBase = 'beijing/tubiao/'
this.setData({
ossImageUrl: ossUrl,
'icons.jinpai': ossUrl + iconBase + 'jinpai.png',
'icons.refresh': ossUrl + iconBase + 'shuaxin.png',
'icons.copy': ossUrl + iconBase + 'fuzhi.png',
'icons.qiangdan': ossUrl + iconBase + 'qiangdan.png',
'icons.chongzhi': ossUrl + iconBase + 'chongzhi.png',
'icons.dingdan': ossUrl + iconBase + 'dingdan.png',
'icons.chufa': ossUrl + iconBase + 'chufa.png',
'icons.paihang': ossUrl + iconBase + 'paihang.png',
'icons.xiugai': ossUrl + iconBase + 'xiugai.png',
'icons.tixian': ossUrl + iconBase + 'tixian.png',
'icons.rightArrow': ossUrl + iconBase + 'jiantou.png',
'icons.guize': ossUrl + iconBase + 'guize.png',
'icons.kaohe': ossUrl + iconBase + 'kaohe.png',
})
this.loadUserInfo()
this.getJinpaiInfo()
if (!app.globalData.hasShownPopupOnColdStart) {
app.globalData.hasShownPopupOnColdStart = true;
setTimeout(() => {
popupService.checkAndShow(this, 'jinpaids');
}, 300);
}
},
onHide() {
const popupComp = this.selectComponent('#popupNotice');
if (popupComp && popupComp.cleanup) {
popupComp.cleanup();
}
},
onShow() {
this.registerNotificationComponent()
this.refreshJinpaiInfo()
this.fetchChenghaoList() // 新增
const inviterCache = wx.getStorageSync('inviterCache') || null
this.setData({ inviterCache })
},
registerNotificationComponent() {
const notificationComp = this.selectComponent('#global-notification')
if (notificationComp && notificationComp.showNotification) {
app.globalData.globalNotification = {
show: (data) => notificationComp.showNotification(data),
hide: () => notificationComp.hideNotification()
}
}
},
loadUserInfo() {
const uid = wx.getStorageSync('uid') || ''
const touxiang = wx.getStorageSync('touxiang') || ''
const ossUrl = app.globalData.ossImageUrl || ''
const defaultAvatar = ossUrl + (app.globalData.morentouxiang || 'avatar/default.jpg')
let avatarUrl = defaultAvatar
if (touxiang) {
avatarUrl = ossUrl + (touxiang.startsWith('/') ? touxiang : '/' + touxiang)
}
const dashouNicheng = app.globalData.dashouNicheng || wx.getStorageSync('nicheng') || '金牌选手'
this.setData({ uid, touxiang, avatarUrl, dashouNicheng })
},
async getJinpaiInfo() {
this.setData({ isLoading: true })
try {
const res = await request({
url: '/yonghu/dashouxinxi',
method: 'POST'
})
if (res && res.data.code === 200) {
const data = res.data.data
const updateData = {
dashouNicheng: data.dashounicheng || '',
zhanghaoStatus: data.zhanghaostatus || '',
yongjin: data.yongjin || '0.00',
zonge: data.zonge || '0.00',
yajin: data.yajin || '0.00',
chenghao: data.chenghao || '',
jinfen: data.jifen || '0',
chengjiaoliang: data.chengjiaoliang || '0',
zaixianZhuangtai: data.zaixianzhuangtai || 0,
dashouzhuangtai: data.dashouzhuangtai || '',
clumber: data.clumber || [],
jiedanZongliang: data.jiedanZongliang || '0',
jinriJiedan: data.jinriJiedan || '0.00',
zuijinTixian: data.zuijinTixian || '0.00',
}
const jiedanTotal = parseFloat(updateData.jiedanZongliang) || 0
const chengjiaoTotal = parseFloat(updateData.chengjiaoliang) || 0
const rateNumber = jiedanTotal > 0 ? (chengjiaoTotal / jiedanTotal) * 100 : 0
const chengjiaoRate = rateNumber.toFixed(1) + '%'
const chengjiaoAngle = rateNumber * 3.6
const zuijin = parseFloat(updateData.zuijinTixian) || 0
const zong = parseFloat(updateData.jinriJiedan) || 0
const tixianProgress = zong > 0 ? Math.min((zuijin / zong) * 100, 100) : 0
const globalUpdate = {
dashouNicheng: updateData.dashouNicheng,
zhanghaoStatus: updateData.zhanghaoStatus,
yongjin: updateData.yongjin,
zonge: updateData.zonge,
yajin: updateData.yajin,
chenghao: updateData.chenghao,
jinfen: updateData.jinfen,
chengjiaoliang: updateData.chengjiaoliang,
zaixianZhuangtai: updateData.zaixianZhuangtai,
dashouzhuangtai: updateData.dashouzhuangtai,
clumber: updateData.clumber,
}
Object.assign(app.globalData, globalUpdate)
wx.setStorageSync('nicheng', updateData.dashouNicheng)
if (data.touxiang) {
wx.setStorageSync('touxiang', data.touxiang)
}
this.setData({
...updateData,
chengjiaoRate,
chengjiaoAngle,
tixianProgress: Math.round(tixianProgress),
isLoading: false
})
this.checkJinpaiAndRedirect(updateData.chenghao)
} else {
wx.showToast({ title: res?.data?.msg || '获取信息失败', icon: 'none' })
this.setData({ isLoading: false })
}
} catch (error) {
console.error('获取金牌信息失败:', error)
wx.showToast({ title: '网络错误', icon: 'none' })
this.setData({ isLoading: false })
}
},
refreshJinpaiInfo() {
const now = Date.now()
const lastTime = this.data.lastRefreshTime
const canRefresh = this.data.canRefresh
if (!canRefresh || (now - lastTime < 3000)) return
this.setData({ lastRefreshTime: now, canRefresh: false })
this.getJinpaiInfo()
this.fetchChenghaoList() // 新增
setTimeout(() => this.setData({ canRefresh: true }), 3000)
},
checkJinpaiAndRedirect(chenghao) {
if (chenghao !== '金牌选手') {
wx.setStorageSync('isJinpai', 0)
wx.redirectTo({ url: '/pages/dashouduan/dashouduan' })
} else {
wx.setStorageSync('isJinpai', 1)
}
},
// 联系管事（与打手端完全一致，增加容错）
async contactInviter() {
wx.showLoading({ title: '获取管事信息...', mask: true })
try {
const res = await request({ url: '/yonghu/hqwdyqr', method: 'POST' })
if (res && res.data.code === 200) {
const inviter = res.data.data
const ossImageUrl = getApp().globalData.ossImageUrl || ''
const fullAvatar = inviter.touxiang
? (inviter.touxiang.startsWith('http') ? inviter.touxiang : ossImageUrl + inviter.touxiang)
: ''
// 缓存邀请人信息
const cacheData = {
uid: inviter.uid,
nicheng: inviter.nicheng || '',
avatar: fullAvatar
}
wx.setStorageSync('inviterCache', cacheData)
this.setData({ inviterCache: cacheData })
// 确保打手身份并连接
const app = getApp()
const myUid = wx.getStorageSync('uid')
// 如果当前不是打手身份，则切换并重连
if (app.globalData.currentRole !== 'dashou') {
app.globalData.currentRole = 'dashou'
wx.setStorageSync('currentRole', 'dashou')
if (app.switchRoleAndReconnect) {
await app.switchRoleAndReconnect('dashou')
} else if (app.connectWithIdentity) {
// 降级方案：直接用打手身份连接
await app.connectWithIdentity('dashou', 'Ds' + myUid, false)
}
} else {
// 已为打手，确保连接存活
if (app.connectForCurrentRole) {
app.connectForCurrentRole()
} else if (app.ensureConnection) {
app.ensureConnection()
}
}
// 构造私聊参数
const param = {
toUserId: 'Gs' + inviter.uid,
toName: inviter.nicheng || '管事',
toAvatar: fullAvatar
}
wx.navigateTo({
url: '/pages/liaotian/liaotian?data=' + encodeURIComponent(JSON.stringify(param)),
fail: (err) => {
console.error('跳转私聊失败', err)
wx.showToast({ title: '打开聊天失败', icon: 'none' })
}
})
} else {
wx.showToast({ title: res?.data?.msg || '获取失败', icon: 'none' })
}
} catch (e) {
console.error('联系管事出错:', e)
wx.showToast({ title: '网络错误', icon: 'none' })
} finally {
wx.hideLoading()
}
},
copyUid() {
const { uid } = this.data
if (!uid) return wx.showToast({ title: 'UID不存在', icon: 'none' })
wx.setClipboardData({
data: uid,
success: () => wx.showToast({ title: '已复制UID', icon: 'success' })
})
},
previewAvatar() {
if (this.data.avatarUrl) wx.previewImage({ urls: [this.data.avatarUrl] })
},
goToWithdraw() { wx.navigateTo({ url: '/pages/tixian/tixian' }) },
goToReceiveOrder() { wx.navigateTo({ url: '/pages/jiedan/jiedan' }) },
goToRecharge() { wx.navigateTo({ url: '/pages/dashouchongzhi/dashouchongzhi' }) },
goToMyOrders() { wx.navigateTo({ url: '/pages/dashoudingdan/dashoudingdan' }) },
goToMyPunishment() { wx.navigateTo({ url: '/pages/cfss/cfss/cfss' }) },
goToRanking() { wx.navigateTo({ url: '/pages/dashoupaihang/dashoupaihang' }) },
goToModifyInfo() { wx.navigateTo({ url: '/pages/dashouxiugai/dashouxiugai' }) },
goToRules() { wx.navigateTo({ url: '/pages/dashouguize/dashouguize' }) },
// 跳转到考核金牌
goToKaohe() {
wx.navigateTo({ url: '/pages/kaohe_jinpai/kaohe_jinpai' });
},
async fetchChenghaoList() {
try {
const res = await request({
url: '/dengji/dsbqhq',
method: 'POST'
});
if (res && res.data.code === 0 && res.data.data) {
this.setData({ chenghaoList: res.data.data.chenghao_list || [] });
}
} catch (e) {
console.error('获取称号标签失败', e);
}
},
})

9
miniprogram/pages/jinpaids/jinpaids.json Normal file
View File

@@ -0,0 +1,9 @@
{
"usingComponents": {
"global-notification": "/components/global-notification/global-notification",
"chenghao-tag": "/components/chenghao-tag/chenghao-tag"
},
"navigationBarTitleText": "金牌用户",
"navigationBarBackgroundColor": "#0B2A4A",
"navigationBarTextStyle": "white"
}

193
miniprogram/pages/jinpaids/jinpaids.wxml Normal file
View File

@@ -0,0 +1,193 @@
<view class="page-container">
<!-- 背景网格 -->
<view class="bg-grid"></view>
<view class="bg-energy"></view>
<!-- 顶部：金牌标识 + 刷新按钮 -->
<view class="top-bar">
<view class="jinpai-badge">
<image class="jinpai-icon fire-icon" src="{{icons.jinpai}}" mode="aspectFit"></image>
<text class="jinpai-title">金牌选手</text>
</view>
<view class="refresh-btn" bindtap="refreshJinpaiInfo">
<image class="refresh-icon" src="{{icons.refresh}}" mode="aspectFit"></image>
<text class="refresh-text">刷新</text>
</view>
</view>
<!-- 用户信息区域 -->
<view class="user-section">
<view class="avatar-wrap" bindtap="previewAvatar">
<image class="avatar" src="{{avatarUrl}}" mode="aspectFill"></image>
<view class="avatar-ring"></view>
</view>
<view class="user-info">
<view class="name-row">
<text class="nickname">{{dashouNicheng}}</text>
<view class="status-tag {{zaixianZhuangtai == 1 ? 'online' : 'offline'}}">
{{zaixianZhuangtai == 1 ? '在线' : '离线'}}
</view>
</view>
<view class="uid-row" bindtap="copyUid">
<text class="uid-label">UID</text>
<text class="uid-value">{{uid}}</text>
<image class="copy-icon" src="{{icons.copy}}" mode="aspectFit"></image>
</view>
<view class="order-status">
<text class="status-label">接单状态：</text>
<text class="status-value {{dashouzhuangtai == '1' ? 'active' : ''}}">
{{dashouzhuangtai == '1' ? '可接单' : '暂停接单'}}
</text>
</view>
</view>
</view>
<!-- 🆕 称号标签展示区 -->
<view class="badge-area" wx:if="{{chenghaoList.length > 0}}">
<scroll-view class="badge-scroll" scroll-y="true" enable-flex>
<view class="badge-grid">
<view class="badge-item" wx:for="{{chenghaoList}}" wx:key="index">
<chenghao-tag
mingcheng="{{item.mingcheng}}"
texiaoJson="{{item.texiao_json}}"
/>
</view>
</view>
</scroll-view>
</view>
<!-- 核心资产卡 -->
<view class="asset-card">
<view class="asset-left">
<text class="asset-label">可提现金额</text>
<view class="asset-value-group">
<text class="asset-number">{{yongjin}}</text>
<text class="asset-unit">元</text>
</view>
</view>
<view class="asset-right" bindtap="goToWithdraw">
<image class="withdraw-icon" src="{{icons.tixian}}" mode="aspectFit"></image>
<text class="withdraw-text">立即提现</text>
<view class="withdraw-glow"></view>
</view>
</view>
<!-- 辅助数据网格 -->
<view class="stats-grid">
<view class="stat-item">
<text class="stat-label">总赚取</text>
<text class="stat-value">{{zonge}}元</text>
</view>
<view class="stat-item">
<text class="stat-label">保证金</text>
<text class="stat-value">{{yajin}}元</text>
</view>
<view class="stat-item">
<text class="stat-label">积分</text>
<text class="stat-value">{{jinfen}}</text>
</view>
<view class="stat-item">
<text class="stat-label">接单总量</text>
<text class="stat-value">{{jiedanZongliang}}</text>
</view>
<view class="stat-item">
<text class="stat-label">成交总量</text>
<text class="stat-value">{{chengjiaoliang}}</text>
</view>
<view class="stat-item">
<text class="stat-label">今日接单</text>
<text class="stat-value">{{jinriJiedan}}元</text>
</view>
</view>
<!-- 图形化数据区域 -->
<view class="graphic-panel">
<view class="chart-item">
<text class="chart-title">成交率</text>
<view class="ring-chart" style="--progress-angle: {{chengjiaoAngle}}deg;">
<view class="ring-progress"></view>
<view class="ring-inner">{{chengjiaoRate}}</view>
</view>
</view>
<view class="chart-item">
<text class="chart-title">最近提现占比</text>
<view class="progress-container" style="--progress-width: {{tixianProgress}}%;">
<view class="progress-bar flow-bar"></view>
<text class="progress-label">{{tixianProgress}}%</text>
</view>
<view class="progress-stats">
<text>最近提现：{{zuijinTixian}}元</text>
<text>今日赚取：{{jinriJiedan}}元</text>
</view>
</view>
</view>
<!-- ========== 联系管事（新增） ========== -->
<view class="inviter-capsule" wx:if="{{inviterCache && inviterCache.uid}}">
<view class="capsule-body" bindtap="contactInviter">
<image class="capsule-avatar" src="{{inviterCache.avatar}}" mode="aspectFill" />
<view class="capsule-info">
<text class="capsule-name">{{inviterCache.nicheng || '我的管事'}}</text>
<text class="capsule-uid">ID: {{inviterCache.uid}}</text>
</view>
</view>
<view class="capsule-contact" bindtap="contactInviter">联系我的邀请人</view>
</view>
<view class="inviter-capsule" wx:else bindtap="contactInviter">
<view class="capsule-body">
<image class="capsule-avatar" src="/images/default-avatar.png" mode="aspectFill" />
<view class="capsule-info">
<text class="capsule-name">我的管事</text>
<text class="capsule-uid">点击联系</text>
</view>
</view>
<view class="capsule-contact">联系我的邀请人</view>
</view>
<!-- 功能按钮区域 -->
<view class="function-panel">
<view class="function-grid">
<view class="func-item" bindtap="goToReceiveOrder">
<image class="func-icon super-glow" src="{{icons.qiangdan}}" mode="aspectFit"></image>
<text class="func-label">抢单大厅</text>
</view>
<view class="func-item" bindtap="goToRecharge">
<image class="func-icon super-glow" src="{{icons.chongzhi}}" mode="aspectFit"></image>
<text class="func-label">充值会员保证金</text>
</view>
<view class="func-item" bindtap="goToMyOrders">
<image class="func-icon super-glow" src="{{icons.dingdan}}" mode="aspectFit"></image>
<text class="func-label">我的订单</text>
</view>
<view class="func-item" bindtap="goToMyPunishment">
<image class="func-icon super-glow" src="{{icons.chufa}}" mode="aspectFit"></image>
<text class="func-label">我的处罚</text>
</view>
<view class="func-item" bindtap="goToRanking">
<image class="func-icon super-glow" src="{{icons.paihang}}" mode="aspectFit"></image>
<text class="func-label">排行榜</text>
</view>
<view class="func-item" bindtap="goToModifyInfo">
<image class="func-icon super-glow" src="{{icons.xiugai}}" mode="aspectFit"></image>
<text class="func-label">修改资料</text>
</view>
<view class="func-item" bindtap="goToRules">
<image class="func-icon super-glow" src="{{icons.guize}}" mode="aspectFit"></image>
<text class="func-label">用户规则</text>
</view>
<view class="func-item" bindtap="goToKaohe">
<image class="func-icon super-glow" src="{{icons.kaohe}}" mode="aspectFit"></image>
<text class="func-label">考核金牌</text>
</view>
</view>
</view>
<global-notification id="global-notification" />
<custom-tab-bar />
<popup-notice id="popupNotice" />
</view>
<view class="loading-mask" wx:if="{{isLoading}}">
<view class="loading-core"></view>
</view>

610
miniprogram/pages/jinpaids/jinpaids.wxss Normal file
View File

@@ -0,0 +1,610 @@
/* 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;
}