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

338
miniprogram/pages/sjxiaoxi/sjxiaoxi.js Normal file
View File

@@ -0,0 +1,338 @@
// pages/sjcf/sjcf.js
import request from '../../utils/request.js'
const app = getApp()
const MEIYE_TIAOSHU = 10
Page({
data: {
zongshu: 0,
daichuli: 0,
yichuli: 0,
shenfen: 0,
chufaList: [],
dangqianye: 1,
haiyougengduo: true,
jiazhaozhong: false,
jiazhaigengduo: false,
scrollHeight: 0,
showXiangqing: false,
xuanzhongChufa: {},
ossImageUrl: '',
fangdouTimer: null
},
onLoad(options) {
this.registerNotificationComponent()
this.initOSSUrl()
this.jisuanGaodu()
this.chushihuaShuju()
},
onShow() {
this.registerNotificationComponent()
},
onUnload() {
if (this.data.fangdouTimer) clearTimeout(this.data.fangdouTimer)
},
onReachBottom() {
this.shanglaShuaxin()
},
registerNotificationComponent() {
const notificationComp = this.selectComponent('#global-notification')
if (notificationComp && notificationComp.showNotification) {
app.globalData.globalNotification = {
show: (data) => notificationComp.showNotification(data),
hide: () => notificationComp.hideNotification()
}
}
},
initOSSUrl() {
const ossImageUrl = app.globalData.ossImageUrl || ''
this.setData({ ossImageUrl })
},
jisuanGaodu() {
const systemInfo = wx.getSystemInfoSync()
const windowHeight = systemInfo.windowHeight
const height = windowHeight - 200 - 100 - 40
this.setData({
scrollHeight: height > 0 ? height : 400
})
},
chushihuaShuju() {
this.setData({
dangqianye: 1,
chufaList: [],
haiyougengduo: true
})
this.jiazhuoquTongji()
this.jiazhuoquChufaList()
},
async jiazhuoquTongji() {
try {
// 🔴【修改】商家端接口地址
const res = await request({
url: '/yonghu/sjcfjlhq',
method: 'POST',
data: { qingqiu_tongji: true }
})
if (res.statusCode === 200 && res.data.code === 0) {
const data = res.data.data
this.setData({
zongshu: data.zongshu || 0,
daichuli: data.daichuli || 0,
yichuli: data.yichuli || 0
})
}
} catch (error) {}
},
async jiazhuoquChufaList(isLoadMore = false) {
if (this.data.jiazhaozhong || this.data.jiazhaigengduo) return
if (isLoadMore) {
if (!this.data.haiyougengduo) return
this.setData({ jiazhaigengduo: true })
} else {
this.setData({ jiazhaozhong: true })
}
try {
const params = {
page: this.data.dangqianye,
page_size: MEIYE_TIAOSHU
}
if (this.data.shenfen === 0) {
params.zhuangtai = 0
} else {
params.zhuangtai = 1
}
// 🔴【修改】商家端接口地址
const res = await request({
url: '/yonghu/sjcfjlhq',
method: 'POST',
data: params
})
if (res.statusCode === 200 && res.data.code === 0) {
const data = res.data.data
if (data.list && Array.isArray(data.list)) {
const processedList = data.list.map(item => {
let displayTime = '--'
if (item.create_time) {
if (typeof item.create_time === 'number') {
displayTime = String(item.create_time)
} else if (typeof item.create_time === 'string') {
displayTime = item.create_time
} else {
displayTime = String(item.create_time)
}
}
let displayStatus = '未知状态'
let statusClass = 'zhuangtai-weizhi'
const statusNum = Number(item.sqzhuangtai)
if (!isNaN(statusNum)) {
if (statusNum === 0) {
displayStatus = '待处罚'
statusClass = 'zhuangtai-daichuli'
} else if (statusNum === 1) {
displayStatus = '已处罚'
statusClass = 'zhuangtai-yichufa'
} else if (statusNum === 2) {
displayStatus = '已驳回'
statusClass = 'zhuangtai-yibohui'
} else if (statusNum === 3) {
displayStatus = '申诉中'
statusClass = 'zhuangtai-shensuzhong'
}
}
const fullZhengjuTupian = (item.zhengju_tupian || []).map(url => this.getFullImageUrl(url))
const fullShensuTupian = (item.shensu_tupian || []).map(url => this.getFullImageUrl(url))
return {
...item,
display_time: displayTime,
display_status: displayStatus,
status_class: statusClass,
zhengju_tupian: item.zhengju_tupian || [],
shensu_tupian: item.shensu_tupian || [],
full_zhengju_tupian: fullZhengjuTupian,
full_shensu_tupian: fullShensuTupian
}
})
let newList
if (isLoadMore) {
newList = [...this.data.chufaList, ...processedList]
} else {
newList = processedList
}
const hasMore = data.has_more === true
this.setData({
chufaList: newList,
haiyougengduo: hasMore,
dangqianye: this.data.dangqianye + 1
})
} else {
this.setData({ haiyougengduo: false })
}
} else {
throw new Error(res.data?.msg || '加载处罚记录失败')
}
} catch (error) {
this.setData({ haiyougengduo: false })
} finally {
if (isLoadMore) {
this.setData({ jiazhaigengduo: false })
} else {
this.setData({ jiazhaozhong: false })
}
}
},
qiehuanShenfen(e) {
const type = parseInt(e.currentTarget.dataset.type)
if (this.data.shenfen === type) return
this.setData({
shenfen: type,
dangqianye: 1,
chufaList: [],
haiyougengduo: true
})
this.jiazhuoquChufaList()
},
shanglaShuaxin() {
if (this.data.fangdouTimer) clearTimeout(this.data.fangdouTimer)
const timer = setTimeout(() => {
if (this.data.jiazhaozhong || this.data.jiazhaigengduo) return
if (!this.data.haiyougengduo) return
this.jiazhuoquChufaList(true)
}, 300)
this.setData({ fangdouTimer: timer })
},
chakanXiangqing(e) {
const item = e.currentTarget.dataset.item
this.setData({
xuanzhongChufa: item,
showXiangqing: true
})
},
guanbiXiangqing() {
this.setData({
showXiangqing: false,
xuanzhongChufa: {}
})
},
lianxiKefu() {
const kefuLink = app.globalData.kefuConfig?.link || '';
const corpId = app.globalData.kefuConfig?.enterpriseId || '';
if (!kefuLink || !corpId) {
wx.showToast({
title: '客服配置未加载',
icon: 'none'
});
return;
}
wx.openCustomerServiceChat({
extInfo: { url: kefuLink },
corpId: corpId,
success: (res) => {
console.log('跳转客服成功', res);
},
fail: (err) => {
console.error('跳转客服失败', err);
wx.showToast({
title: '暂时无法连接客服',
icon: 'none'
});
}
});
},
getFullImageUrl(relativeUrl) {
if (!relativeUrl) return ''
if (relativeUrl.startsWith('http')) {
return relativeUrl
}
const ossUrl = this.data.ossImageUrl
if (!ossUrl) {
return relativeUrl
}
let fullUrl
if (ossUrl.endsWith('/') && relativeUrl.startsWith('/')) {
fullUrl = ossUrl + relativeUrl.substring(1)
} else if (!ossUrl.endsWith('/') && !relativeUrl.startsWith('/')) {
fullUrl = ossUrl + '/' + relativeUrl
} else {
fullUrl = ossUrl + relativeUrl
}
return fullUrl
},
yulanTupian(e) {
const currentUrl = e.currentTarget.dataset.url
const urls = e.currentTarget.dataset.urls || []
if (!currentUrl) return
const fullCurrentUrl = currentUrl.startsWith('http') ? currentUrl : this.getFullImageUrl(currentUrl)
const fullUrls = urls.map(url => url.startsWith('http') ? url : this.getFullImageUrl(url))
wx.previewImage({
current: fullCurrentUrl,
urls: fullUrls.length > 0 ? fullUrls : [fullCurrentUrl]
})
},
fuzhiWenben(e) {
const text = e.currentTarget.dataset.text
if (!text) return
wx.setClipboardData({
data: text,
success: () => {
wx.showToast({ title: '复制成功', icon: 'success' })
},
fail: () => {
wx.showToast({ title: '复制失败', icon: 'none' })
}
})
},
imageLoadError(e) {
// 图片加载失败处理（可以添加默认图片）
const index = e.currentTarget.dataset.index
const type = e.currentTarget.dataset.type
if (type === 'zhengju') {
const key = `xuanzhongChufa.full_zhengju_tupian[${index}]`
this.setData({
[key]: '/images/image-error.png'
})
} else if (type === 'shensu') {
const key = `xuanzhongChufa.full_shensu_tupian[${index}]`
this.setData({
[key]: '/images/image-error.png'
})
}
}
})

10
miniprogram/pages/sjxiaoxi/sjxiaoxi.json Normal file
View File

@@ -0,0 +1,10 @@
{
"usingComponents": {
"global-notification": "/components/global-notification/global-notification"
},
"navigationBarTitleText": "处罚记录",
"navigationBarBackgroundColor": "#0a0a12",
"navigationBarTextStyle": "white",
"backgroundColor": "#0a0a12",
"enablePullDownRefresh": false
}

241
miniprogram/pages/sjxiaoxi/sjxiaoxi.wxml Normal file
View File

@@ -0,0 +1,241 @@
<!-- pages/sjcf/sjcf.wxml -->
<view class="cfss-container">
<!-- 顶部统计卡片 -->
<view class="tongji-card">
<view class="tongji-title">处罚统计</view>
<view class="tongji-content">
<view class="tongji-item">
<text class="tongji-label">总记录</text>
<text class="tongji-value">{{ zongshu }}</text>
</view>
<view class="tongji-item">
<text class="tongji-label">待处理</text>
<text class="tongji-value daichuli-value">{{ daichuli }}</text>
</view>
<view class="tongji-item">
<text class="tongji-label">已处理</text>
<text class="tongji-value yichuli-value">{{ yichuli }}</text>
</view>
</view>
</view>
<!-- 类型切换 -->
<view class="leixing-qiehuan">
<view
class="leixing-item {{ shenfen === 0 ? 'leixing-active' : '' }}"
bindtap="qiehuanShenfen"
data-type="0"
>
<text class="leixing-text">待处理</text>
<text class="leixing-count">{{ daichuli }}</text>
</view>
<view
class="leixing-item {{ shenfen === 1 ? 'leixing-active' : '' }}"
bindtap="qiehuanShenfen"
data-type="1"
>
<text class="leixing-text">已处理</text>
<text class="leixing-count">{{ yichuli }}</text>
</view>
</view>
<!-- 处罚记录列表 -->
<scroll-view
class="chufa-list"
scroll-y
enable-back-to-top
scroll-with-animation
style="height: {{ scrollHeight }}px"
bindscrolltolower="shanglaShuaxin"
>
<!-- 加载中 -->
<view wx:if="{{ jiazhaozhong && chufaList.length === 0 }}" class="jiazai-zhong">
<view class="loading-animation">
<view class="loading-dot"></view>
<view class="loading-dot"></view>
<view class="loading-dot"></view>
</view>
<text>加载中...</text>
</view>
<!-- 处罚记录卡片列表 -->
<block wx:for="{{ chufaList }}" wx:key="index">
<view
class="chufa-card"
bindtap="chakanXiangqing"
data-item="{{ item }}"
>
<!-- 卡片顶部：时间和状态 -->
<view class="card-top">
<text class="shijian">{{ item.display_time }}</text>
<view class="zhuangtai-badge {{ item.status_class }}">
{{ item.display_status }}
</view>
</view>
<!-- 🔴【修改】申请人改为被罚打手 -->
<view class="qingqiu-row">
<text class="qingqiu-label">被罚打手：</text>
<text class="qingqiu-value">{{ item.qingqiuid || '--' }}</text>
</view>
<!-- 处罚理由 -->
<view class="liyou-row">
<text class="liyou-label">处罚理由：</text>
<text class="liyou-value">{{ item.cfliyou || '无' }}</text>
</view>
<!-- 订单编号 -->
<view class="dingdan-row">
<text class="dingdan-label">订单编号：</text>
<text class="dingdan-value">{{ item.dingdan_id || '--' }}</text>
</view>
<!-- 卡片边框效果 -->
<view class="card-border"></view>
<view class="card-glow"></view>
</view>
</block>
<!-- 加载更多 -->
<view wx:if="{{ jiazhaigengduo }}" class="jiazai-gengduo">
<view class="scan-line"></view>
<text>加载更多...</text>
</view>
<!-- 没有更多数据 -->
<view wx:if="{{ !haiyougengduo && chufaList.length > 0 }}" class="meiyou-gengduo">
<text>—— 没有更多记录了 ——</text>
</view>
<!-- 空状态 -->
<view wx:if="{{ !jiazhaozhong && chufaList.length === 0 }}" class="kong-zhuangtai">
<view class="empty-icon">⚡</view>
<text class="empty-text">暂无处罚记录</text>
<text class="empty-subtext">所有事务已处理完毕</text>
</view>
</scroll-view>
<!-- 处罚详情弹窗 -->
<view wx:if="{{ showXiangqing }}" class="xiangqing-modal">
<view class="modal-mask" bindtap="guanbiXiangqing"></view>
<view class="modal-content">
<!-- 弹窗头部 -->
<view class="modal-header">
<text class="modal-title">处罚详情</text>
<view class="modal-close" bindtap="guanbiXiangqing">
<text class="close-icon">×</text>
</view>
</view>
<!-- 弹窗主体 -->
<scroll-view class="modal-body" scroll-y style="max-height: 1000rpx;">
<!-- 基本信息 -->
<view class="detail-section">
<view class="section-title">基本信息</view>
<view class="detail-row">
<text class="detail-label">订单编号：</text>
<view class="detail-value-container">
<text class="detail-value">{{ xuanzhongChufa.dingdan_id || '--' }}</text>
<text class="fuzhi-btn" bindtap="fuzhiWenben" data-text="{{ xuanzhongChufa.dingdan_id }}">复制</text>
</view>
</view>
<view class="detail-row">
<!-- 🔴【修改】申请人ID改为被罚打手ID -->
<text class="detail-label">被罚打手ID：</text>
<view class="detail-value-container">
<text class="detail-value">{{ xuanzhongChufa.qingqiuid || '--' }}</text>
<text class="fuzhi-btn" bindtap="fuzhiWenben" data-text="{{ xuanzhongChufa.qingqiuid }}">复制</text>
</view>
</view>
<view class="detail-row">
<text class="detail-label">创建时间：</text>
<text class="detail-value">{{ xuanzhongChufa.display_time || '--' }}</text>
</view>
</view>
<!-- 处罚信息 -->
<view class="detail-section">
<view class="section-title">处罚信息</view>
<view class="detail-row">
<text class="detail-label">处罚状态：</text>
<view class="zhuangtai-badge-inline {{ xuanzhongChufa.status_class }}">
{{ xuanzhongChufa.display_status }}
</view>
</view>
<view class="detail-row full-row">
<text class="detail-label">处罚理由：</text>
<text class="detail-value liyou-full">{{ xuanzhongChufa.cfliyou || '无' }}</text>
</view>
<!-- 证据图片展示 -->
<view wx:if="{{ xuanzhongChufa.full_zhengju_tupian && xuanzhongChufa.full_zhengju_tupian.length > 0 }}" class="detail-row full-row">
<text class="detail-label">证据图片：</text>
<view class="tupian-grid">
<block wx:for="{{ xuanzhongChufa.full_zhengju_tupian }}" wx:key="index">
<view class="tupian-item">
<image
src="{{ item }}"
class="tupian-image"
mode="aspectFill"
binderror="imageLoadError"
data-index="{{ index }}"
data-type="zhengju"
/>
<!-- 图片预览遮罩 -->
<view class="tupian-preview" bindtap="yulanTupian" data-url="{{ item }}" data-urls="{{ xuanzhongChufa.full_zhengju_tupian }}">
<text class="preview-text">预览</text>
</view>
</view>
</block>
</view>
</view>
</view>
<!-- 申诉信息（商家端只查看，不展示申诉按钮） -->
<view wx:if="{{ xuanzhongChufa.ssliyou || (xuanzhongChufa.full_shensu_tupian && xuanzhongChufa.full_shensu_tupian.length > 0) }}" class="detail-section">
<view class="section-title">申诉信息</view>
<view wx:if="{{ xuanzhongChufa.ssliyou }}" class="detail-row full-row">
<text class="detail-label">申诉理由：</text>
<text class="detail-value liyou-full">{{ xuanzhongChufa.ssliyou }}</text>
</view>
<!-- 申诉图片展示 -->
<view wx:if="{{ xuanzhongChufa.full_shensu_tupian && xuanzhongChufa.full_shensu_tupian.length > 0 }}" class="detail-row full-row">
<text class="detail-label">申诉图片：</text>
<view class="tupian-grid">
<block wx:for="{{ xuanzhongChufa.full_shensu_tupian }}" wx:key="index">
<view class="tupian-item">
<image
src="{{ item }}"
class="tupian-image"
mode="aspectFill"
binderror="imageLoadError"
data-index="{{ index }}"
data-type="shensu"
/>
<!-- 图片预览遮罩 -->
<view class="tupian-preview" bindtap="yulanTupian" data-url="{{ item }}" data-urls="{{ xuanzhongChufa.full_shensu_tupian }}">
<text class="preview-text">预览</text>
</view>
</view>
</block>
</view>
</view>
</view>
</scroll-view>
<!-- 弹窗底部按钮 -->
<!-- 🔴【修改】商家端只保留联系客服按钮，且独占一行 -->
<view class="modal-footer">
<view class="btn-group-single">
<view class="btn btn-kefu" bindtap="lianxiKefu">
<text>联系客服</text>
</view>
</view>
</view>
</view>
</view>
<!-- 全局通知组件 -->
<global-notification id="global-notification" />
</view>

751
miniprogram/pages/sjxiaoxi/sjxiaoxi.wxss Normal file
View File

@@ -0,0 +1,751 @@
/* pages/sjcf/sjcf.wxss */
/* 🔴【样式与cfss页面基本相同，只添加了独占按钮样式】 */
:root {
--cyber-blue: rgba(0, 243, 255, 0.7);
--cyber-pink: rgba(255, 0, 255, 0.7);
--cyber-purple: rgba(157, 0, 255, 0.7);
--cyber-green: rgba(0, 255, 157, 0.7);
--cyber-red: rgba(255, 0, 102, 0.7);
--cyber-bg: #2a2a3a;
--cyber-card: #333344;
--cyber-border: rgba(255, 255, 255, 0.15);
--cyber-glow: rgba(0, 243, 255, 0.2);
--cyber-text: #ffffff;
--cyber-text-light: #e6e6e6;
--cyber-text-lighter: #cccccc;
}
.cfss-container {
padding: 30rpx;
background: var(--cyber-bg);
min-height: 100vh;
color: var(--cyber-text) !important;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
/* 恢复网格背景 */
.cfss-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
background-size: 40rpx 40rpx;
pointer-events: none;
opacity: 0.15;
z-index: 0;
}
/* ====== 统计卡片 ====== */
.tongji-card {
background: rgba(255, 0, 102, 0.3);
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 30rpx;
border: 1rpx solid var(--cyber-border);
box-shadow:
0 0 20rpx rgba(255, 0, 102, 0.2),
inset 0 0 10rpx rgba(0, 243, 255, 0.05);
position: relative;
overflow: hidden;
z-index: 1;
}
.tongji-title {
color: var(--cyber-blue);
font-size: 34rpx;
font-weight: bold;
margin-bottom: 30rpx;
text-shadow: 0 0 8rpx var(--cyber-blue);
letter-spacing: 2rpx;
}
.tongji-content {
display: flex;
justify-content: space-between;
}
.tongji-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.tongji-label {
color: var(--cyber-text-light) !important;
font-size: 26rpx;
margin-bottom: 15rpx;
opacity: 0.9;
}
.tongji-value {
color: var(--cyber-text) !important;
font-size: 44rpx;
font-weight: bold;
text-shadow: 0 0 8rpx currentColor;
}
.daichuli-value {
color: var(--cyber-red) !important;
text-shadow: 0 0 8rpx rgba(255, 0, 102, 0.3);
}
.yichuli-value {
color: var(--cyber-green) !important;
text-shadow: 0 0 8rpx rgba(0, 255, 157, 0.3);
}
/* ====== 类型切换 ====== */
.leixing-qiehuan {
display: flex;
background: rgba(255, 0, 102, 0.3);
border-radius: 16rpx;
padding: 10rpx;
margin-bottom: 30rpx;
border: 1rpx solid var(--cyber-border);
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
z-index: 1;
}
.leixing-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 25rpx 0;
border-radius: 12rpx;
transition: all 0.3s;
}
.leixing-item:active {
transform: scale(0.98);
}
.leixing-active {
background: linear-gradient(135deg, rgba(0, 243, 255, 0.15), rgba(157, 0, 255, 0.15));
box-shadow: 0 0 15rpx rgba(0, 243, 255, 0.2);
}
.leixing-text {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 8rpx;
color: var(--cyber-text-light) !important;
}
.leixing-active .leixing-text {
color: var(--cyber-text) !important;
text-shadow: 0 0 8rpx var(--cyber-blue);
}
.leixing-count {
font-size: 24rpx;
color: var(--cyber-text-lighter) !important;
opacity: 0.9;
}
.leixing-active .leixing-count {
color: rgba(255, 255, 255, 0.9) !important;
}
/* ====== 处罚列表 ====== */
.chufa-list {
margin-bottom: 0;
padding-bottom: 30rpx;
z-index: 1;
}
/* 加载动画 */
.jiazai-zhong {
display: flex;
flex-direction: column;
align-items: center;
padding: 60rpx 0;
color: var(--cyber-blue);
}
.loading-animation {
display: flex;
justify-content: center;
margin-bottom: 20rpx;
}
.loading-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: var(--cyber-blue);
margin: 0 10rpx;
animation: pulse 1.5s infinite ease-in-out;
}
.loading-dot:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes pulse {
0%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}
/* 处罚卡片 */
.chufa-card {
background: rgba(560, 50, 65, 0.8);
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 30rpx;
border: 1rpx solid var(--cyber-border);
position: relative;
overflow: hidden;
transition: all 0.3s;
z-index: 1;
}
.chufa-card:active {
transform: translateY(-4rpx);
box-shadow:
0 10rpx 30rpx rgba(0, 0, 0, 0.3),
0 0 25rpx var(--cyber-glow);
}
.card-border {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border-radius: 21rpx;
background: linear-gradient(45deg, rgba(138, 60, 138, 0.3), rgba(131, 208, 212, 0.3), rgba(255, 0, 255, 0.3), rgba(0, 243, 255, 0.3));
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.chufa-card:active .card-border {
opacity: 0.3;
}
.card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25rpx;
}
.shijian {
color: var(--cyber-text-light) !important;
font-size: 26rpx;
font-family: 'Courier New', monospace;
letter-spacing: 1rpx;
opacity: 0.9;
}
.zhuangtai-badge {
padding: 8rpx 25rpx;
border-radius: 20rpx;
font-size: 24rpx;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2rpx;
border: 1rpx solid;
box-shadow: 0 0 8rpx;
color: #ffffff !important;
}
.zhuangtai-daichuli {
background: rgba(255, 0, 102, 0.2);
border-color: var(--cyber-red);
box-shadow: 0 0 8rpx rgba(255, 0, 102, 0.2);
}
.zhuangtai-yichufa {
background: rgba(0, 255, 157, 0.2);
border-color: var(--cyber-green);
box-shadow: 0 0 8rpx rgba(0, 255, 157, 0.2);
}
.zhuangtai-yibohui {
background: rgba(102, 102, 102, 0.2);
border-color: #666;
box-shadow: 0 0 8rpx rgba(102, 102, 102, 0.2);
}
.zhuangtai-shensuzhong {
background: rgba(255, 165, 0, 0.2);
border-color: #FFA500;
box-shadow: 0 0 8rpx rgba(255, 165, 0, 0.2);
}
.zhuangtai-weizhi {
background: rgba(128, 0, 255, 0.2);
border-color: rgba(128, 0, 255, 0.5);
box-shadow: 0 0 8rpx rgba(128, 0, 255, 0.2);
}
/* 其他文字内容 */
.qingqiu-row, .liyou-row, .dingdan-row {
display: flex;
align-items: flex-start;
margin-bottom: 20rpx;
}
.qingqiu-label, .liyou-label, .dingdan-label {
color: var(--cyber-text-light) !important;
font-size: 26rpx;
font-weight: bold;
margin-right: 15rpx;
opacity: 0.9;
flex-shrink: 0;
}
.qingqiu-value, .liyou-value, .dingdan-value {
color: var(--cyber-text) !important;
font-size: 26rpx;
flex: 1;
word-break: break-all;
}
.liyou-value {
line-height: 1.5;
}
.dingdan-value {
font-family: 'Courier New', monospace;
letter-spacing: 1rpx;
}
/* 加载更多 */
.jiazai-gengduo {
text-align: center;
padding: 40rpx 0;
color: var(--cyber-blue);
position: relative;
overflow: hidden;
}
.scan-line {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2rpx;
background: linear-gradient(90deg, transparent, var(--cyber-blue), transparent);
animation: scan 2s linear infinite;
}
@keyframes scan {
0% { left: -100%; }
100% { left: 100%; }
}
/* 没有更多数据 */
.meiyou-gengduo {
text-align: center;
padding: 40rpx 0;
color: var(--cyber-green);
font-size: 28rpx;
opacity: 0.9;
}
/* 空状态 */
.kong-zhuangtai {
display: flex;
flex-direction: column;
align-items: center;
padding: 100rpx 40rpx;
text-align: center;
z-index: 1;
}
.empty-icon {
font-size: 120rpx;
color: var(--cyber-blue);
margin-bottom: 30rpx;
text-shadow: 0 0 15rpx var(--cyber-blue);
animation: pulse 2s infinite;
}
.empty-text {
font-size: 34rpx;
color: var(--cyber-text) !important;
margin-bottom: 15rpx;
font-weight: bold;
}
.empty-subtext {
font-size: 28rpx;
color: var(--cyber-text-light) !important;
opacity: 0.8;
}
/* ====== 弹窗样式 ====== */
.xiangqing-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.modal-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
position: relative;
background: #3a3a4a;
border-radius: 30rpx;
width: 90%;
max-height: 80vh;
display: flex;
flex-direction: column;
border: 1rpx solid var(--cyber-border);
box-shadow: 0 0 35rpx rgba(135, 218, 223, 0.3);
z-index: 1001;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 30rpx 30rpx 30rpx;
border-bottom: 1rpx solid rgba(157, 250, 253, 0.2);
flex-shrink: 0;
}
.modal-title {
font-size: 36rpx;
font-weight: bold;
color: var(--cyber-blue);
text-shadow: 0 0 8rpx var(--cyber-blue);
}
.modal-close {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(137, 210, 214, 0.1);
border: 1rpx solid rgba(0, 243, 255, 0.3);
}
.modal-close:active {
background: rgba(0, 243, 255, 0.2);
transform: scale(0.95);
}
.close-icon {
font-size: 40rpx;
color: var(--cyber-blue);
line-height: 1;
}
/* 弹窗主体 */
.modal-body {
flex: 1;
padding: 30rpx;
overflow-y: auto;
min-height: 200rpx;
box-sizing: border-box;
}
/* 详情区域 */
.detail-section {
margin-bottom: 40rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: var(--cyber-blue);
margin-bottom: 25rpx;
padding-bottom: 15rpx;
border-bottom: 1rpx solid rgba(0, 243, 255, 0.2);
text-shadow: 0 0 8rpx var(--cyber-blue);
}
.detail-row {
display: flex;
margin-bottom: 25rpx;
align-items: center;
}
.detail-label {
color: var(--cyber-text-light) !important;
font-size: 30rpx;
min-width: 180rpx;
margin-right: 20rpx;
line-height: 1.5;
opacity: 0.9;
flex-shrink: 0;
}
.detail-value-container {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.detail-value {
color: var(--cyber-text) !important;
font-size: 30rpx;
line-height: 1.5;
word-break: break-all;
opacity: 0.95;
flex: 1;
margin-right: 20rpx;
}
.fuzhi-btn {
color: var(--cyber-blue);
font-size: 24rpx;
padding: 8rpx 20rpx;
border-radius: 8rpx;
background: rgba(0, 243, 255, 0.1);
border: 1rpx solid rgba(0, 243, 255, 0.3);
flex-shrink: 0;
}
.fuzhi-btn:active {
background: rgba(0, 243, 255, 0.2);
}
.full-row {
flex-direction: column;
align-items: flex-start;
}
.full-row .detail-label {
margin-bottom: 10rpx;
min-width: auto;
}
/* 弹窗内的状态标签 */
.zhuangtai-badge-inline {
padding: 8rpx 24rpx;
border-radius: 20rpx;
font-size: 26rpx;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1rpx;
border: 1rpx solid;
min-width: 120rpx;
text-align: center;
color: #ffffff !important;
}
/* 理由方框 */
.liyou-full {
background: rgba(255, 255, 255, 0.05);
padding: 25rpx 30rpx;
border-radius: 15rpx;
line-height: 1.6;
border: 1rpx solid rgba(218, 176, 176, 0.1);
color: var(--cyber-text) !important;
width: 100%;
box-sizing: border-box;
margin: 0;
display: block;
opacity: 0.95;
}
/* 图片网格样式 */
.tupian-grid {
display: flex;
flex-wrap: wrap;
margin-top: 10rpx;
margin-left: -5rpx;
margin-right: -5rpx;
}
.tupian-item {
width: calc(33.333% - 10rpx);
margin: 5rpx;
aspect-ratio: 1;
border-radius: 10rpx;
overflow: hidden;
position: relative;
border: 1rpx solid rgba(0, 243, 255, 0.2);
}
.tupian-image {
width: 100%;
height: 100%;
}
/* 图片预览遮罩 */
.tupian-preview {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.tupian-item:hover .tupian-preview {
opacity: 1;
}
.preview-text {
color: white;
font-size: 24rpx;
background: rgba(0, 243, 255, 0.7);
padding: 8rpx 16rpx;
border-radius: 8rpx;
}
/* 🔴【新增】弹窗底部按钮独占一行样式 */
.modal-footer {
padding: 30rpx;
border-top: 1rpx solid rgba(0, 243, 255, 0.2);
flex-shrink: 0;
}
.btn-group-single {
display: flex;
width: 100%;
}
.btn-group-single .btn {
flex: 1;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15rpx;
font-size: 32rpx;
font-weight: bold;
transition: all 0.3s;
border: 1rpx solid;
box-shadow: 0 0 12rpx;
color: var(--cyber-text) !important;
}
.btn-group-single .btn:active {
transform: scale(0.98);
}
/* 按钮样式 */
.btn-kefu {
background: rgba(0, 243, 255, 0.1);
border-color: var(--cyber-blue);
box-shadow: 0 0 12rpx rgba(0, 243, 255, 0.2);
}
/* 响应式调整 */
@media (max-width: 375px) {
.tongji-value {
font-size: 36rpx;
}
.shijian,
.qingqiu-label,
.liyou-label,
.dingdan-label {
font-size: 24rpx;
}
.qingqiu-value,
.liyou-value,
.dingdan-value {
font-size: 24rpx;
}
.modal-content {
width: 95%;
}
}
/* 🔴【关键修改】图片网格和图片样式 */
.tupian-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12rpx;
margin-top: 10rpx;
width: 100%;
}
.tupian-item {
position: relative;
width: 100%;
aspect-ratio: 1;
border-radius: 12rpx;
overflow: hidden;
border: 1rpx solid rgba(0, 243, 255, 0.3);
background-color: rgba(0, 0, 0, 0.2);
}
.tupian-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* 图片预览遮罩 */
.tupian-preview {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.tupian-item:hover .tupian-preview {
opacity: 1;
}
.preview-text {
color: white;
font-size: 24rpx;
background: rgba(0, 243, 255, 0.7);
padding: 8rpx 16rpx;
border-radius: 8rpx;
}