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

288
miniprogram/pages/czjilu/czjilu.js Normal file
View File

@@ -0,0 +1,288 @@
// 管事会员记录页面逻辑
import request from '../../utils/request.js';
// 每页数据条数常量 - 统一管理，方便修改
const MEIYE_TIAOSHU = 50;
Page({
data: {
// 从全局变量获取的数据
yaoqingzongshu: 0, // 邀请打手总数
fenyongzonge: '0.00', // 分成总额
// 从接口获取的数据
chongzhiDashouShuliang: 0, // 充值打手数量
dashouList: [], // 打手列表数据
zongTiaoshu: 0, // 总条数
// 分页相关
dangqianYe: 1, // 当前页
meiyouGengduo: false, // 没有更多数据
jiazaiZhong: false, // 加载中状态
jiazaiGengduo: false, // 加载更多状态
// UI状态
cuowuTishi: '', // 错误提示
shuaxinKezhi: false, // 刷新按钮是否可点击
shuaxinCd: 2000, // 刷新冷却时间（毫秒）
// 常量（用于模板）
meiyeTiaoshu: MEIYE_TIAOSHU // 每页条数
},
onLoad(options) {
// 从全局变量获取管事数据
this.huoquQuanjubianliang();
// 加载第一页数据
this.jiazaiShuju(true);
},
onShow() {
// 页面显示时检查全局变量是否有更新
this.registerNotificationComponent();
this.huoquQuanjubianliang();
},
// 🆕 新增：注册通知组件
registerNotificationComponent() {
const app = getApp();
const notificationComp = this.selectComponent('#global-notification');
if (notificationComp && notificationComp.showNotification) {
console.log('🏪 商城页面注册通知组件');
app.globalData.globalNotification = {
show: (data) => notificationComp.showNotification(data),
hide: () => notificationComp.hideNotification()
};
}
},
// 获取全局变量数据
huoquQuanjubianliang() {
const app = getApp();
const guanshiData = app.globalData.guanshi;
if (guanshiData) {
this.setData({
yaoqingzongshu: guanshiData.yaoqingzongshu || 0,
fenyongzonge: guanshiData.fenyongzonge || '0.00'
});
}
},
// 加载数据核心方法
async jiazaiShuju(chushihua = false) {
// 防止重复请求
if (this.data.jiazaiZhong) return;
// 如果是初始化加载，重置分页
if (chushihua) {
this.setData({
dangqianYe: 1,
meiyouGengduo: false,
dashouList: [],
zongTiaoshu: 0,
chongzhiDashouShuliang: 0
});
} else {
// 上拉加载更多时，检查是否还有更多数据
if (this.data.meiyouGengduo) return;
// 如果有数据但不足一页，说明后端已经没数据了
if (this.data.dashouList.length > 0 && this.data.dashouList.length < MEIYE_TIAOSHU) {
this.setData({ meiyouGengduo: true });
return;
}
// 如果数据量已经达到总条数，则不请求
if (this.data.dashouList.length >= this.data.zongTiaoshu && this.data.zongTiaoshu > 0) {
this.setData({ meiyouGengduo: true });
return;
}
}
// 设置加载状态
this.setData({
jiazaiZhong: chushihua ? true : false,
jiazaiGengduo: !chushihua ? true : false,
cuowuTishi: ''
});
try {
const { dangqianYe } = this.data;
// 严格按照您的request规范调用
const res = await request({
url: '/shangpin/fenhonghq',
method: 'POST',
data: {
page: dangqianYe,
page_size: MEIYE_TIAOSHU // 使用统一常量
}
});
// 处理返回数据
if (res.data.code === 200) {
const data = res.data.data || {};
const newList = data.list || [];
const total = data.total || 0;
// 处理头像URL拼接
const processedList = this.chuliTouxiangURL(newList);
// 计算是否有更多数据
const hasMoreData = processedList.length === MEIYE_TIAOSHU;
// 更新数据
this.setData({
dashouList: chushihua ? processedList : [...this.data.dashouList, ...processedList],
zongTiaoshu: total,
chongzhiDashouShuliang: data.chongzhi_dashou_shuliang || 0,
meiyouGengduo: !hasMoreData,
dangqianYe: chushihua ? 2 : this.data.dangqianYe + 1
});
// 如果数据为空，显示空状态
if (chushihua && processedList.length === 0) {
wx.showToast({
title: '暂无数据',
icon: 'none',
duration: 1500
});
}
// 如果加载了数据，给个提示
if (processedList.length > 0) {
if (chushihua) {
wx.showToast({
title: `已加载${processedList.length}条记录`,
icon: 'success',
duration: 1000
});
}
}
} else {
this.setData({
cuowuTishi: res.data.msg || '数据加载失败'
});
wx.showToast({
title: res.data.msg || '加载失败',
icon: 'none',
duration: 2000
});
}
} catch (error) {
console.error('加载数据失败:', error);
this.setData({
cuowuTishi: '网络错误，请检查网络连接'
});
wx.showToast({
title: '网络错误',
icon: 'none',
duration: 2000
});
} finally {
this.setData({
jiazaiZhong: false,
jiazaiGengduo: false
});
}
},
// 处理头像URL拼接
chuliTouxiangURL(list) {
const app = getApp();
const ossUrl = app.globalData.ossImageUrl || '';
return list.map(item => {
// 确保有头像URL，如果没有则使用默认头像
let touxiangUrl = item.avatar || '';
if (touxiangUrl && !touxiangUrl.startsWith('http')) {
touxiangUrl = ossUrl + touxiangUrl;
}
// 格式化时间
let shijian = item.create_time || '';
if (shijian) {
// 如果是时间戳，转换为日期格式
if (/^\d+$/.test(shijian)) {
const date = new Date(parseInt(shijian));
shijian = `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
} else {
// 如果是字符串，提取日期和时间
try {
const dateObj = new Date(shijian);
shijian = `${dateObj.getMonth() + 1}月${dateObj.getDate()}日 ${dateObj.getHours().toString().padStart(2, '0')}:${dateObj.getMinutes().toString().padStart(2, '0')}`;
} catch (e) {
shijian = shijian.substring(0, 10);
}
}
}
return {
...item,
touxiangUrl: touxiangUrl || '/images/default-avatar.png',
shijian: shijian,
fenhong: parseFloat(item.fenhong || 0).toFixed(2)
};
});
},
// 刷新数据（带防重复点击）
shuaxinShuju() {
// 检查是否在冷却中
if (this.data.shuaxinKezhi) {
wx.showToast({
title: `请等待${this.data.shuaxinCd/1000}秒`,
icon: 'none',
duration: 1000
});
return;
}
// 设置冷却状态
this.setData({ shuaxinKezhi: true });
// 显示刷新动画
this.setData({
jiazaiZhong: true
});
// 刷新数据
this.jiazaiShuju(true).finally(() => {
// 2秒后恢复按钮可点击
setTimeout(() => {
this.setData({ shuaxinKezhi: false });
}, this.data.shuaxinCd);
});
},
// 上拉加载更多
shanglaJiazai() {
// 没有更多数据时不再请求
if (this.data.meiyouGengduo) {
wx.showToast({
title: '已经到底了',
icon: 'none',
duration: 1000
});
return;
}
// 如果正在加载，不再请求
if (this.data.jiazaiGengduo || this.data.jiazaiZhong) {
return;
}
this.jiazaiShuju(false);
},
// 重试加载
chongshiJiazai() {
this.setData({
cuowuTishi: '',
meiyouGengduo: false
});
this.jiazaiShuju(true);
}
});

11
miniprogram/pages/czjilu/czjilu.json Normal file
View File

@@ -0,0 +1,11 @@
{
"usingComponents": {
"global-notification": "/components/global-notification/global-notification"
},
"navigationBarTitleText": "会员记录",
"navigationBarBackgroundColor": "#0a0a0f",
"navigationBarTextStyle": "white",
"backgroundColor": "#0a0a0f",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
}

119
miniprogram/pages/czjilu/czjilu.wxml Normal file
View File

@@ -0,0 +1,119 @@
<!-- 管事会员记录页面 -->
<view class="page-container">
<!-- 固定顶部区域 - 不动 -->
<view class="fixed-top">
<!-- 顶部统计区域 -->
<view class="tongji-quyu">
<!-- 分红总额 -->
<view class="fenyong-zonge">
<view class="zonge-label">分红总额</view>
<view class="zonge-value">¥{{fenyongzonge}}</view>
<view class="zonge-tip">累计收益</view>
</view>
<!-- 底部统计信息 -->
<view class="tongji-bottom">
<view class="tongji-item">
<view class="tongji-number">{{yaoqingzongshu}}</view>
<view class="tongji-label">邀请打手</view>
</view>
<view class="tongji-divider"></view>
<view class="tongji-item">
<view class="tongji-number">{{chongzhiDashouShuliang}}</view>
<view class="tongji-label">充值打手</view>
</view>
</view>
</view>
<!-- 刷新按钮 -->
<view class="shuaxin-anniu" bindtap="shuaxinShuju">
<text class="shuaxin-icon {{shuaxinKezhi ? 'shuaxin-disabled' : ''}}">↻</text>
</view>
</view>
<!-- 滚动区域 - 只包裹列表部分 -->
<scroll-view
class="scroll-area"
scroll-y
enable-back-to-top
bindscrolltolower="shanglaJiazai">
<!-- 全局加载状态 -->
<view wx:if="{{jiazaiZhong && dashouList.length === 0}}" class="jiazai-quanju">
<view class="jiazai-spinner"></view>
<view class="jiazai-text">加载中...</view>
</view>
<!-- 空数据提示 -->
<view wx:if="{{!jiazaiZhong && dashouList.length === 0}}" class="kong-shuju">
<view class="kong-icon">🚀</view>
<view class="kong-text">暂无会员记录</view>
<view class="kong-tip">快去邀请打手吧</view>
<view class="kong-btn" bindtap="shuaxinShuju">点击刷新</view>
</view>
<!-- 会员记录卡片列表 -->
<block wx:if="{{dashouList.length > 0}}">
<!-- 列表标题 -->
<view class="list-title">
<text class="title-text">充值记录</text>
<text class="title-count">({{dashouList.length}}/{{zongTiaoshu}})</text>
</view>
<!-- 卡片列表 -->
<view class="card-list">
<block wx:for="{{dashouList}}" wx:key="index">
<view class="dashou-card">
<!-- 圆形头像区域 -->
<view class="touxiang-quyu">
<image
class="dashou-touxiang"
src="{{item.touxiangUrl}}"
mode="aspectFill">
</image>
<!-- 头像边框效果 -->
<view class="touxiang-border"></view>
</view>
<!-- 信息区域 -->
<view class="xinxi-quyu">
<view class="nicheng">{{item.nicheng}}</view>
<view class="dashou-id">ID: {{item.yonghuid}}</view>
</view>
<!-- 分红金额区域 -->
<view class="fenhong-quyu">
<view class="fenhong-value">
<text class="fenhong-jiahao">+</text>
<text class="fenhong-shuzi">¥{{item.fenhong}}</text>
</view>
<view class="shijian">{{item.shijian}}</view>
</view>
</view>
</block>
</view>
<!-- 加载更多提示 -->
<view wx:if="{{jiazaiGengduo}}" class="jiazai-gengduo">
<view class="gengduo-spinner"></view>
<text class="gengduo-text">加载更多中...</text>
</view>
<!-- 没有更多数据 -->
<view wx:if="{{meiyouGengduo && dashouList.length > 0}}" class="meiyou-gengduo">
<view class="meiyou-icon">✓</view>
<text class="meiyou-text">已经到底了，共{{dashouList.length}}条记录</text>
</view>
</block>
</scroll-view>
<!-- 错误提示 -->
<view wx:if="{{cuowuTishi}}" class="cuowu-quyu">
<view class="cuowu-icon">⚠️</view>
<view class="cuowu-text">{{cuowuTishi}}</view>
<view class="cuowu-btn" bindtap="chongshiJiazai">重试加载</view>
</view>
</view>
<global-notification id="global-notification" />

506
miniprogram/pages/czjilu/czjilu.wxss Normal file
View File

@@ -0,0 +1,506 @@
/* 管事会员记录页面样式 - 赛博风格 */
/* 页面容器 */
page {
height: 100%;
background: #0a0a0f;
}
.page-container {
height: 100%;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
position: relative;
}
/* 固定顶部区域 */
.fixed-top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
padding-bottom: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
}
/* 顶部统计区域 - 赛博卡片设计 */
.tongji-quyu {
position: relative;
margin: 20rpx 30rpx 0;
padding: 40rpx 30rpx;
background: rgba(20, 20, 35, 0.9);
border-radius: 24rpx;
border: 1px solid rgba(100, 255, 255, 0.1);
box-shadow:
0 10rpx 30rpx rgba(0, 0, 0, 0.4),
0 0 20rpx rgba(100, 255, 255, 0.05) inset,
0 0 0 1px rgba(100, 255, 255, 0.1);
backdrop-filter: blur(10px);
overflow: hidden;
}
.tongji-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(45deg,
rgba(100, 255, 255, 0.03) 0%,
rgba(255, 100, 255, 0.03) 100%);
z-index: 0;
}
/* 分红总额样式 - 赛博霓虹效果 */
.fenyong-zonge {
position: relative;
text-align: center;
padding: 20rpx 0 30rpx;
margin-bottom: 25rpx;
border-bottom: 1px solid rgba(100, 255, 255, 0.1);
z-index: 1;
}
.zonge-label {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 15rpx;
text-transform: uppercase;
letter-spacing: 2rpx;
}
.zonge-value {
font-size: 60rpx;
font-weight: 800;
color: #00ffea;
margin-bottom: 8rpx;
text-shadow:
0 0 10rpx rgba(0, 255, 234, 0.5),
0 0 20rpx rgba(0, 255, 234, 0.3);
font-family: 'Arial', sans-serif;
}
.zonge-tip {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.5);
}
/* 底部统计信息 */
.tongji-bottom {
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1;
position: relative;
}
.tongji-item {
text-align: center;
flex: 1;
}
.tongji-number {
font-size: 40rpx;
font-weight: 700;
color: #ffffff;
margin-bottom: 6rpx;
text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.3);
}
.tongji-label {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.6);
}
.tongji-divider {
width: 1px;
height: 45rpx;
background: linear-gradient(to bottom,
transparent 0%,
rgba(100, 255, 255, 0.3) 50%,
transparent 100%);
}
/* 刷新按钮 - 固定在右上角 */
.shuaxin-anniu {
position: absolute;
top: 60rpx;
right: 60rpx;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
width: 70rpx;
height: 70rpx;
background: rgba(20, 20, 35, 0.95);
border-radius: 50%;
border: 1px solid rgba(100, 255, 255, 0.2);
box-shadow:
0 8rpx 20rpx rgba(0, 0, 0, 0.4),
0 0 20rpx rgba(100, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.shuaxin-anniu:active {
transform: scale(0.95);
background: rgba(100, 255, 255, 0.1);
box-shadow:
0 4rpx 10rpx rgba(0, 0, 0, 0.3),
0 0 30rpx rgba(100, 255, 255, 0.2);
}
.shuaxin-icon {
font-size: 32rpx;
color: #00ffea;
transition: all 0.3s ease;
}
.shuaxin-disabled {
color: rgba(255, 255, 255, 0.3);
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 滚动区域 - 只包裹列表部分 */
.scroll-area {
position: fixed;
top: 340rpx; /* 根据固定区域高度调整 */
left: 0;
right: 0;
bottom: 0;
z-index: 50;
}
/* 全局加载状态 */
.jiazai-quanju {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 0;
}
.jiazai-spinner {
width: 80rpx;
height: 80rpx;
border: 4rpx solid rgba(100, 255, 255, 0.1);
border-top: 4rpx solid #00ffea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 30rpx;
box-shadow: 0 0 20rpx rgba(0, 255, 234, 0.3);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.jiazai-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.7);
}
/* 空数据提示 */
.kong-shuju {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 30rpx;
background: rgba(20, 20, 35, 0.5);
border-radius: 24rpx;
border: 1px solid rgba(100, 255, 255, 0.1);
margin: 40rpx 30rpx 0;
}
.kong-icon {
font-size: 100rpx;
margin-bottom: 30rpx;
color: rgba(255, 255, 255, 0.2);
}
.kong-text {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 10rpx;
font-weight: 500;
}
.kong-tip {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 50rpx;
}
.kong-btn {
padding: 20rpx 50rpx;
background: linear-gradient(90deg, #00ffea 0%, #0088ff 100%);
color: #000;
border-radius: 50rpx;
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 8rpx 20rpx rgba(0, 255, 234, 0.3);
}
.kong-btn:active {
transform: scale(0.95);
box-shadow: 0 4rpx 10rpx rgba(0, 255, 234, 0.2);
}
/* 列表标题 */
.list-title {
margin: 0 30rpx 20rpx;
display: flex;
align-items: baseline;
}
.title-text {
font-size: 32rpx;
color: #ffffff;
font-weight: 600;
margin-right: 10rpx;
text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.2);
}
.title-count {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.5);
}
/* 卡片列表 */
.card-list {
margin: 0 30rpx;
}
/* 打手卡片 - 赛博风格设计 */
.dashou-card {
position: relative;
display: flex;
align-items: center;
padding: 30rpx;
margin-bottom: 20rpx;
background: rgba(20, 20, 35, 0.7);
border-radius: 20rpx;
border: 1px solid rgba(100, 255, 255, 0.1);
box-shadow:
0 8rpx 24rpx rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(100, 255, 255, 0.05);
transition: all 0.3s ease;
}
.dashou-card:active {
transform: translateY(-2rpx);
background: rgba(30, 30, 50, 0.8);
box-shadow:
0 12rpx 30rpx rgba(0, 0, 0, 0.4),
0 0 20rpx rgba(100, 255, 255, 0.1);
}
/* 头像区域 - 纯圆形 */
.touxiang-quyu {
position: relative;
margin-right: 30rpx;
flex-shrink: 0;
}
.dashou-touxiang {
width: 100rpx;
height: 100rpx;
border-radius: 50%; /* 确保是纯圆形 */
z-index: 2;
position: relative;
}
.touxiang-border {
position: absolute;
top: -4rpx;
left: -4rpx;
width: 108rpx;
height: 108rpx;
border-radius: 50%;
background: linear-gradient(45deg, #00ffea, #ff00ff);
z-index: 1;
opacity: 0.3;
animation: borderGlow 2s linear infinite;
}
@keyframes borderGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
/* 信息区域 */
.xinxi-quyu {
flex: 1;
min-width: 0; /* 防止内容撑开 */
}
.nicheng {
font-size: 32rpx;
font-weight: 600;
color: #ffffff;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.2);
}
.dashou-id {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 1rpx;
}
/* 分红金额区域 */
.fenhong-quyu {
text-align: right;
flex-shrink: 0;
min-width: 180rpx;
}
.fenhong-value {
margin-bottom: 8rpx;
}
.fenhong-jiahao {
font-size: 26rpx;
color: #00ff00;
margin-right: 4rpx;
}
.fenhong-shuzi {
font-size: 32rpx;
font-weight: 700;
color: #00ff00;
text-shadow: 0 0 10rpx rgba(0, 255, 0, 0.5);
}
.shijian {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.4);
}
/* 加载更多提示 */
.jiazai-gengduo {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 0 60rpx;
margin: 0 30rpx;
}
.gengduo-spinner {
width: 40rpx;
height: 40rpx;
border: 3rpx solid rgba(100, 255, 255, 0.1);
border-top: 3rpx solid #00ffea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20rpx;
}
.gengduo-text {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.6);
}
/* 没有更多数据 */
.meiyou-gengduo {
display: flex;
flex-direction: column;
align-items: center;
padding: 50rpx 0 80rpx;
margin: 0 30rpx;
color: rgba(255, 255, 255, 0.4);
}
.meiyou-icon {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: rgba(0, 255, 234, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #00ffea;
margin-bottom: 20rpx;
border: 1px solid rgba(0, 255, 234, 0.2);
}
.meiyou-text {
font-size: 26rpx;
text-align: center;
}
/* 错误提示 */
.cuowu-quyu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 30rpx;
background: rgba(40, 20, 20, 0.8);
border-radius: 24rpx;
border: 1px solid rgba(255, 100, 100, 0.2);
margin: 40rpx 30rpx 0;
}
.cuowu-icon {
font-size: 80rpx;
color: #ff5555;
margin-bottom: 30rpx;
text-shadow: 0 0 20rpx rgba(255, 85, 85, 0.5);
}
.cuowu-text {
font-size: 30rpx;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40rpx;
text-align: center;
line-height: 1.5;
}
.cuowu-btn {
padding: 20rpx 50rpx;
background: linear-gradient(90deg, #ff5555 0%, #ff8800 100%);
color: #fff;
border-radius: 50rpx;
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 8rpx 20rpx rgba(255, 85, 85, 0.3);
}
.cuowu-btn:active {
transform: scale(0.95);
box-shadow: 0 4rpx 10rpx rgba(255, 85, 85, 0.2);
}
/* 调整滚动区域的顶部距离，增加间隔 */
.scroll-area {
position: fixed;
top: 400rpx; /* 从 340rpx 增加到 360rpx，增加20rpx的间隔 */
left: 0;
right: 0;
bottom: 0;
z-index: 50;
}
/* 如果觉得还不够，可以再增加列表标题的上边距 */
.list-title {
margin: 10rpx 30rpx 20rpx; /* 从 0 30rpx 20rpx 改为 10rpx 30rpx 20rpx */
display: flex;
align-items: baseline;
}