统一排行榜对齐星雀UI，页面资源后台配置实时刷新
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
216
miniprogram/pages/zzfhjilu/zzfhjilu.js
Normal file
216
miniprogram/pages/zzfhjilu/zzfhjilu.js
Normal file
@@ -0,0 +1,216 @@
|
||||
// pages/zuzhangfenhongjilu/zuzhangfenhongjilu.js
|
||||
import request from '../../utils/request.js';
|
||||
|
||||
const PAGE_SIZE = 5; // 每页数据条数
|
||||
const REFRESH_COOLDOWN = 2000; // 刷新冷却时间 (ms)
|
||||
|
||||
const app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 统计数据
|
||||
fenhongZonge: '0.00', // 分红总额
|
||||
yaoqingGuanshi: 0, // 邀请管事数
|
||||
fenhongCishu: 0, // 分红次数
|
||||
|
||||
// 列表数据
|
||||
jiluList: [], // 分红记录列表
|
||||
totalCount: 0, // 总记录数（后端返回）
|
||||
currentPage: 1, // 当前页码
|
||||
hasMore: true, // 是否还有更多数据
|
||||
loading: false, // 首次加载中
|
||||
loadingMore: false, // 加载更多中
|
||||
refreshDisabled: false, // 刷新按钮是否冷却
|
||||
|
||||
// 错误状态
|
||||
errorMsg: '', // 错误提示信息
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadFirstPage();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.registerNotification();
|
||||
},
|
||||
|
||||
// 注册全局通知组件
|
||||
registerNotification() {
|
||||
const notificationComp = this.selectComponent('#global-notification');
|
||||
if (notificationComp && notificationComp.showNotification) {
|
||||
app.globalData.globalNotification = {
|
||||
show: (data) => notificationComp.showNotification(data),
|
||||
hide: () => notificationComp.hideNotification()
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
// 加载第一页数据
|
||||
loadFirstPage() {
|
||||
this.setData({
|
||||
currentPage: 1,
|
||||
hasMore: true,
|
||||
jiluList: [],
|
||||
errorMsg: ''
|
||||
});
|
||||
this.fetchData(true);
|
||||
},
|
||||
|
||||
// 刷新数据（点击刷新按钮）
|
||||
onRefresh() {
|
||||
if (this.data.refreshDisabled) {
|
||||
wx.showToast({
|
||||
title: `请稍后重试`,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 启用冷却
|
||||
this.setData({ refreshDisabled: true });
|
||||
setTimeout(() => {
|
||||
this.setData({ refreshDisabled: false });
|
||||
}, REFRESH_COOLDOWN);
|
||||
|
||||
// 显示刷新动画（让按钮旋转）
|
||||
// 执行刷新
|
||||
this.loadFirstPage();
|
||||
},
|
||||
|
||||
// 上拉加载更多
|
||||
onLoadMore() {
|
||||
const { hasMore, loading, loadingMore, currentPage } = this.data;
|
||||
if (!hasMore || loading || loadingMore) return;
|
||||
|
||||
this.setData({ loadingMore: true });
|
||||
this.fetchData(false, currentPage + 1);
|
||||
},
|
||||
|
||||
// 核心数据获取方法
|
||||
async fetchData(reset = false, page = 1) {
|
||||
const url = '/shangpin/zuzhangfenhong'; // 假设后端接口地址
|
||||
|
||||
if (reset) {
|
||||
this.setData({ loading: true, errorMsg: '' });
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await request({
|
||||
url,
|
||||
method: 'POST',
|
||||
data: {
|
||||
page: page,
|
||||
page_size: PAGE_SIZE
|
||||
}
|
||||
});
|
||||
|
||||
if (res.data.code === 200) {
|
||||
const data = res.data.data || {};
|
||||
// 更新统计数据
|
||||
this.setData({
|
||||
fenhongZonge: data.fenhong_zonge || '0.00',
|
||||
yaoqingGuanshi: data.yaoqing_guanshi || 0,
|
||||
fenhongCishu: data.fenhong_cishu || 0,
|
||||
totalCount: data.total || 0
|
||||
});
|
||||
|
||||
// 处理列表数据（拼接头像）
|
||||
const rawList = data.list || [];
|
||||
const processedList = this.processList(rawList);
|
||||
|
||||
if (reset) {
|
||||
// 第一页
|
||||
this.setData({
|
||||
jiluList: processedList,
|
||||
currentPage: page,
|
||||
hasMore: processedList.length === PAGE_SIZE, // 如果等于页大小，认为可能还有更多
|
||||
});
|
||||
} else {
|
||||
// 加载更多
|
||||
const newList = [...this.data.jiluList, ...processedList];
|
||||
this.setData({
|
||||
jiluList: newList,
|
||||
currentPage: page,
|
||||
hasMore: processedList.length === PAGE_SIZE,
|
||||
});
|
||||
}
|
||||
|
||||
// 如果加载后数据为空且是第一页，可以给出提示
|
||||
if (reset && processedList.length === 0) {
|
||||
// 空状态已在 wxml 处理
|
||||
}
|
||||
} else {
|
||||
// 业务错误
|
||||
this.setData({
|
||||
errorMsg: res.data.msg || '数据加载失败'
|
||||
});
|
||||
this.showNotification('error', res.data.msg || '数据加载失败');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取分红记录失败', err);
|
||||
this.setData({
|
||||
errorMsg: '网络异常，请检查网络'
|
||||
});
|
||||
this.showNotification('error', '网络异常');
|
||||
} finally {
|
||||
if (reset) {
|
||||
this.setData({ loading: false });
|
||||
} else {
|
||||
this.setData({ loadingMore: false });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 处理列表项：拼接头像、格式化金额和时间
|
||||
processList(list) {
|
||||
const ossUrl = app.globalData.ossImageUrl || '';
|
||||
const defaultAvatar = ossUrl + (app.globalData.morentouxiang || 'avatar/default.jpg');
|
||||
|
||||
return list.map(item => ({
|
||||
// 打手信息
|
||||
dashouAvatar: this.getFullUrl(item.dashou_avatar, ossUrl, defaultAvatar),
|
||||
dashouNicheng: item.dashou_nicheng || '打手',
|
||||
dashouYonghuid: item.dashou_yonghuid || '',
|
||||
// 管事信息
|
||||
guanshiAvatar: this.getFullUrl(item.guanshi_avatar, ossUrl, defaultAvatar),
|
||||
guanshiNicheng: item.guanshi_nicheng || '管事',
|
||||
guanshiYonghuid: item.guanshi_yonghuid || '',
|
||||
// 分红信息
|
||||
fenhong: parseFloat(item.fenhong || 0).toFixed(2),
|
||||
shijian: this.formatTime(item.create_time)
|
||||
}));
|
||||
},
|
||||
|
||||
// 拼接完整图片URL
|
||||
getFullUrl(relativePath, ossUrl, defaultUrl) {
|
||||
if (!relativePath) return defaultUrl;
|
||||
if (relativePath.startsWith('http')) return relativePath;
|
||||
const full = ossUrl + (relativePath.startsWith('/') ? relativePath : '/' + relativePath);
|
||||
return full || defaultUrl;
|
||||
},
|
||||
|
||||
// 格式化时间（根据实际后端返回调整）
|
||||
formatTime(timestamp) {
|
||||
if (!timestamp) return '';
|
||||
try {
|
||||
const date = new Date(timestamp);
|
||||
return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||
} catch {
|
||||
return timestamp.substring(0, 10) || '';
|
||||
}
|
||||
},
|
||||
|
||||
// 重试加载（当错误提示出现时）
|
||||
onRetry() {
|
||||
this.loadFirstPage();
|
||||
},
|
||||
|
||||
// 显示通知（可选）
|
||||
showNotification(type, msg) {
|
||||
const noti = app.globalData.globalNotification;
|
||||
if (noti && noti.show) {
|
||||
noti.show({ type, message: msg });
|
||||
}
|
||||
}
|
||||
});
|
||||
10
miniprogram/pages/zzfhjilu/zzfhjilu.json
Normal file
10
miniprogram/pages/zzfhjilu/zzfhjilu.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"navigationBarTitleText": "组长分红记录",
|
||||
"navigationBarBackgroundColor": "#0A0C12",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#0A0C12",
|
||||
"backgroundTextStyle": "light",
|
||||
"usingComponents": {
|
||||
"global-notification": "/components/global-notification/global-notification"
|
||||
}
|
||||
}
|
||||
119
miniprogram/pages/zzfhjilu/zzfhjilu.wxml
Normal file
119
miniprogram/pages/zzfhjilu/zzfhjilu.wxml
Normal file
@@ -0,0 +1,119 @@
|
||||
<!-- pages/zuzhangfenhongjilu/zuzhangfenhongjilu.wxml -->
|
||||
<view class="page">
|
||||
|
||||
<!-- 固定顶部统计区 -->
|
||||
<view class="fixed-header">
|
||||
<view class="header-content">
|
||||
<view class="stat-row">
|
||||
<view class="stat-cell">
|
||||
<text class="stat-label">分红总额</text>
|
||||
<text class="stat-number blue">¥{{fenhongZonge}}</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-cell">
|
||||
<text class="stat-label">邀请管事</text>
|
||||
<text class="stat-number">{{yaoqingGuanshi}}</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-cell">
|
||||
<text class="stat-label">分红次数</text>
|
||||
<text class="stat-number">{{fenhongCishu}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 刷新按钮 -->
|
||||
<view class="refresh-btn" bindtap="onRefresh">
|
||||
<text class="refresh-icon {{refreshDisabled ? 'spin' : ''}}">↻</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 滚动列表区域 -->
|
||||
<scroll-view
|
||||
class="scroll-area"
|
||||
scroll-y
|
||||
enhanced
|
||||
show-scrollbar="{{false}}"
|
||||
bindscrolltolower="onLoadMore"
|
||||
lower-threshold="100"
|
||||
>
|
||||
<view class="list-content">
|
||||
<!-- 加载中 -->
|
||||
<view wx:if="{{loading && jiluList.length === 0}}" class="loading-state">
|
||||
<view class="spinner"></view>
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view wx:elif="{{!loading && jiluList.length === 0}}" class="empty-state">
|
||||
<text class="empty-icon">📭</text>
|
||||
<text class="empty-title">暂无分红记录</text>
|
||||
<text class="empty-tip">邀请管事并让打手充值即可获得分红</text>
|
||||
<view class="empty-btn" bindtap="onRefresh">刷新</view>
|
||||
</view>
|
||||
|
||||
<!-- 有数据 -->
|
||||
<block wx:if="{{jiluList.length > 0}}">
|
||||
<!-- 列表标题 -->
|
||||
<view class="list-header">
|
||||
<text class="list-title">分红明细</text>
|
||||
<text class="list-count">{{jiluList.length}} / {{totalCount}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 卡片列表 -->
|
||||
<view class="card-list">
|
||||
<view wx:for="{{jiluList}}" wx:key="index" class="card">
|
||||
<!-- 左侧：打手信息 -->
|
||||
<view class="card-left">
|
||||
<image class="avatar" src="{{item.dashouAvatar}}" mode="aspectFill"></image>
|
||||
<view class="info">
|
||||
<text class="name">{{item.dashouNicheng}}</text>
|
||||
<text class="uid">ID: {{item.dashouYonghuid}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 中间：所属管事箭头 -->
|
||||
<view class="card-middle">
|
||||
<text class="tag">所属管事</text>
|
||||
<text class="arrow">→</text>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：管事信息 + 金额 -->
|
||||
<view class="card-right">
|
||||
<image class="avatar small" src="{{item.guanshiAvatar}}" mode="aspectFill"></image>
|
||||
<view class="info">
|
||||
<text class="name">{{item.guanshiNicheng}}</text>
|
||||
<text class="uid">ID: {{item.guanshiYonghuid}}</text>
|
||||
</view>
|
||||
<view class="amount">
|
||||
<text class="num blue">+¥{{item.fenhong}}</text>
|
||||
<text class="time">{{item.shijian}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view wx:if="{{loadingMore}}" class="more-state">
|
||||
<view class="spinner small"></view>
|
||||
<text>加载更多...</text>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多 -->
|
||||
<view wx:if="{{!hasMore && jiluList.length > 0}}" class="no-more">
|
||||
<text>—— 没有更多了 ——</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 错误遮罩 -->
|
||||
<view wx:if="{{errorMsg}}" class="error-mask">
|
||||
<view class="error-dialog">
|
||||
<text class="error-icon">⚠️</text>
|
||||
<text class="error-msg">{{errorMsg}}</text>
|
||||
<view class="error-btn" bindtap="onRetry">重试</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<global-notification id="global-notification" />
|
||||
</view>
|
||||
728
miniprogram/pages/zzfhjilu/zzfhjilu.wxss
Normal file
728
miniprogram/pages/zzfhjilu/zzfhjilu.wxss
Normal file
@@ -0,0 +1,728 @@
|
||||
/* pages/zuzhangfenhongjilu/zuzhangfenhongjilu.wxss - 超时空战士机甲风格 */
|
||||
|
||||
/* ==================== 全局变量与动画 ==================== */
|
||||
page {
|
||||
height: 100%;
|
||||
background: #0A0C12;
|
||||
font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;
|
||||
color: #E0E6F0;
|
||||
}
|
||||
|
||||
/* 全局动画定义 */
|
||||
@keyframes scanMove {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,100% { opacity: 0.4; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes energyFlow {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% { transform: translate(0); }
|
||||
20% { transform: translate(-2px, 2px); }
|
||||
40% { transform: translate(2px, -2px); }
|
||||
60% { transform: translate(-2px, 0); }
|
||||
80% { transform: translate(2px, 0); }
|
||||
100% { transform: translate(0); }
|
||||
}
|
||||
|
||||
/* ==================== 页面容器 ==================== */
|
||||
.page {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: radial-gradient(ellipse at 50% 30%, #1A2635, #0A0C12);
|
||||
}
|
||||
|
||||
/* 背景机甲网格（使用伪元素） */
|
||||
.page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 180, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 180, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 60rpx 60rpx;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 顶部扫描线（固定） */
|
||||
.page::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
|
||||
box-shadow: 0 0 30rpx #00B4FF;
|
||||
animation: scanMove 4s linear infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* ==================== 固定头部 ==================== */
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
/* 半透明金属质感 */
|
||||
background: rgba(16, 24, 36, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 2rpx solid #00B4FF;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 180, 255, 0.2);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 30rpx 30rpx 20rpx; /* 缩小上下间距 */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 统计行 - 机甲风格面板 */
|
||||
.stat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 20, 40, 0.6);
|
||||
border: 2rpx solid #00B4FF;
|
||||
border-radius: 30rpx;
|
||||
padding: 25rpx 15rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3), inset 0 0 20rpx rgba(0, 180, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 面板内部光效 */
|
||||
.stat-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.2), transparent 70%);
|
||||
animation: pulse 4s infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stat-cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(to bottom, transparent, #00B4FF, #7A2EFF, transparent);
|
||||
box-shadow: 0 0 10rpx #00B4FF;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #A0B8D0;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 6rpx;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 42rpx;
|
||||
font-weight: 800;
|
||||
color: #E0F0FF;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
text-shadow: 0 0 15rpx #00B4FF, 0 0 30rpx #7A2EFF;
|
||||
}
|
||||
|
||||
.stat-number.blue {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 20rpx #00B4FF, 0 0 40rpx #7A2EFF;
|
||||
}
|
||||
|
||||
/* 刷新按钮 - 机甲能量环 */
|
||||
.refresh-btn {
|
||||
position: absolute;
|
||||
top: 35rpx;
|
||||
right: 45rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(0, 20, 40, 0.8);
|
||||
border: 2rpx solid #00B4FF;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 30rpx #00B4FF;
|
||||
transition: all 0.2s;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.refresh-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4rpx;
|
||||
left: -4rpx;
|
||||
right: -4rpx;
|
||||
bottom: -4rpx;
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.refresh-btn:active {
|
||||
transform: scale(0.9);
|
||||
box-shadow: 0 0 50rpx #7A2EFF;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 40rpx;
|
||||
color: #00B4FF;
|
||||
transition: transform 0.3s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.refresh-icon.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* ==================== 滚动区域 ==================== */
|
||||
.scroll-area {
|
||||
position: fixed;
|
||||
top: 240rpx; /* 根据新头部高度调整，更紧凑 */
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* ==================== 加载中状态 ==================== */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 700rpx;
|
||||
color: #A0B8D0;
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 6rpx solid rgba(0, 180, 255, 0.2);
|
||||
border-top: 6rpx solid #00B4FF;
|
||||
border-right: 6rpx solid #7A2EFF;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3);
|
||||
}
|
||||
|
||||
.spinner.small {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-width: 4rpx;
|
||||
}
|
||||
|
||||
/* ==================== 空状态 ==================== */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 750rpx;
|
||||
background: rgba(0, 20, 40, 0.4);
|
||||
border: 2rpx solid #00B4FF;
|
||||
border-radius: 50rpx;
|
||||
padding: 100rpx 40rpx;
|
||||
margin-top: 30rpx;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 60rpx rgba(0, 180, 255, 0.2);
|
||||
}
|
||||
|
||||
.empty-state::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.1), transparent 70%);
|
||||
animation: pulse 3s infinite;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 110rpx;
|
||||
color: #00B4FF;
|
||||
margin-bottom: 30rpx;
|
||||
filter: drop-shadow(0 0 30rpx #00B4FF);
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #E0F0FF;
|
||||
margin-bottom: 20rpx;
|
||||
text-shadow: 0 0 15rpx #00B4FF;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
font-size: 26rpx;
|
||||
color: #A0B8D0;
|
||||
margin-bottom: 60rpx;
|
||||
text-align: center;
|
||||
max-width: 450rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
padding: 20rpx 80rpx;
|
||||
background: linear-gradient(135deg, #00B4FF, #7A2EFF);
|
||||
border-radius: 60rpx;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 180, 255, 0.4);
|
||||
border: none;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.empty-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
animation: scanMove 2s infinite;
|
||||
}
|
||||
|
||||
.empty-btn:active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0 10rpx 50rpx #7A2EFF;
|
||||
}
|
||||
|
||||
/* ==================== 列表标题 ==================== */
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin: 20rpx 0 20rpx; /* 减小上边距 */
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #00B4FF;
|
||||
text-shadow: 0 0 15rpx #00B4FF;
|
||||
letter-spacing: 2rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.list-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
|
||||
}
|
||||
|
||||
.list-count {
|
||||
font-size: 24rpx;
|
||||
color: #7A8FAA;
|
||||
background: rgba(0, 180, 255, 0.1);
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
border: 1rpx solid rgba(0, 180, 255, 0.3);
|
||||
}
|
||||
|
||||
/* ==================== 卡片列表 ==================== */
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
|
||||
/* 卡片主体 - 装甲玻璃 */
|
||||
.card {
|
||||
background: rgba(0, 20, 40, 0.5);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border: 2rpx solid rgba(0, 180, 255, 0.4);
|
||||
border-radius: 40rpx;
|
||||
padding: 30rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20rpx 50rpx rgba(0,0,0,0.8), inset 0 0 30rpx rgba(0, 180, 255, 0.2);
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 卡片内部光晕 */
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.1), transparent 70%);
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 卡片边框动态流光 */
|
||||
.card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2rpx;
|
||||
left: -2rpx;
|
||||
right: -2rpx;
|
||||
bottom: -2rpx;
|
||||
border-radius: 42rpx;
|
||||
background: linear-gradient(135deg, #00B4FF, #7A2EFF, #00B4FF);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.card:active::after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.card:active {
|
||||
transform: translateY(-6rpx);
|
||||
box-shadow: 0 30rpx 70rpx rgba(0, 180, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 左侧打手信息 */
|
||||
.card-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 2;
|
||||
min-width: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #00B4FF;
|
||||
background: #1A2A3A;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar.small {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.avatar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4rpx;
|
||||
left: -4rpx;
|
||||
right: -4rpx;
|
||||
bottom: -4rpx;
|
||||
border: 1px solid rgba(0, 180, 255, 0.4);
|
||||
border-radius: 50%;
|
||||
animation: pulse 3s infinite;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #E0F0FF;
|
||||
margin-bottom: 4rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 0 10rpx rgba(0, 180, 255, 0.3);
|
||||
}
|
||||
|
||||
.uid {
|
||||
font-size: 22rpx;
|
||||
color: #A0B8D0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 中间机甲箭头 */
|
||||
.card-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 10rpx;
|
||||
flex-shrink: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 20rpx;
|
||||
color: #00B4FF;
|
||||
background: rgba(0, 180, 255, 0.1);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
border: 1rpx solid rgba(0, 180, 255, 0.3);
|
||||
margin-bottom: 4rpx;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 40rpx;
|
||||
color: #00B4FF;
|
||||
line-height: 1;
|
||||
transform: scaleX(1.5);
|
||||
filter: drop-shadow(0 0 10rpx #00B4FF);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -10rpx;
|
||||
width: 20rpx;
|
||||
height: 2rpx;
|
||||
background: #00B4FF;
|
||||
box-shadow: 0 0 10rpx #00B4FF;
|
||||
}
|
||||
|
||||
/* 右侧管事信息 + 金额 */
|
||||
.card-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 3;
|
||||
min-width: 0;
|
||||
justify-content: flex-end;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-left: 15rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 34rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.num.blue {
|
||||
color: #00B4FF;
|
||||
text-shadow: 0 0 15rpx #00B4FF, 0 0 30rpx #7A2EFF;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 20rpx;
|
||||
color: #7A8FAA;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
/* 卡片底部能量条 */
|
||||
.card-energy {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
#00B4FF 20%,
|
||||
#7A2EFF 50%,
|
||||
#00B4FF 80%,
|
||||
transparent 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: energyFlow 3s linear infinite;
|
||||
opacity: 0.6;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 为每个卡片添加能量条（通过伪元素或额外元素，这里用绝对定位的块，需要在WXML中添加，但我们可以在样式里用::after，但需要修改WXML添加类） */
|
||||
/* 由于不修改WXML，我们使用.card::after已经用于边框，所以另建一个伪元素？不行，只能用额外元素。 */
|
||||
/* 为了不修改WXML，我们利用.card的::before用于光晕，::after用于边框，无法再加。所以建议在WXML中添加一个空view作为能量条，但用户不提供WXML，我们可以暂时不加。但为了效果更好，我们可以利用.card的box-shadow模拟？但动态效果有限。暂时不加，等待用户反馈。 */
|
||||
|
||||
/* ==================== 加载更多 ==================== */
|
||||
.more-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0;
|
||||
color: #A0B8D0;
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* ==================== 没有更多 ==================== */
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 50rpx 0;
|
||||
color: #5A6F8A;
|
||||
font-size: 24rpx;
|
||||
letter-spacing: 2rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no-more::before,
|
||||
.no-more::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100rpx;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
|
||||
}
|
||||
|
||||
.no-more::before {
|
||||
left: 20rpx;
|
||||
}
|
||||
|
||||
.no-more::after {
|
||||
right: 20rpx;
|
||||
}
|
||||
|
||||
/* ==================== 错误遮罩 ==================== */
|
||||
.error-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(10, 12, 20, 0.95);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.error-glitch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(255, 0, 0, 0.05) 0px,
|
||||
rgba(0, 255, 0, 0.05) 2px,
|
||||
rgba(0, 0, 255, 0.05) 4px
|
||||
);
|
||||
mix-blend-mode: screen;
|
||||
pointer-events: none;
|
||||
animation: glitch 0.1s infinite;
|
||||
}
|
||||
|
||||
.error-dialog {
|
||||
background: rgba(0, 20, 40, 0.8);
|
||||
border: 2rpx solid #FF4444;
|
||||
border-radius: 50rpx;
|
||||
padding: 60rpx 80rpx;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: 0 0 100rpx rgba(255, 68, 68, 0.3);
|
||||
z-index: 2;
|
||||
max-width: 600rpx;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 90rpx;
|
||||
color: #FF4444;
|
||||
margin-bottom: 30rpx;
|
||||
filter: drop-shadow(0 0 30rpx #FF4444);
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
font-size: 30rpx;
|
||||
color: #E0E6F0;
|
||||
margin-bottom: 40rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.error-btn {
|
||||
padding: 20rpx 70rpx;
|
||||
background: linear-gradient(135deg, #FF4444, #FF8866);
|
||||
border-radius: 60rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10rpx 40rpx rgba(255, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
.error-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
animation: scanMove 2s infinite;
|
||||
}
|
||||
|
||||
.error-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
Reference in New Issue
Block a user