修正了 pages 名为拼音的问题
This commit is contained in:
684
pages/fighter-msg/fighter-msg.js
Normal file
684
pages/fighter-msg/fighter-msg.js
Normal file
@@ -0,0 +1,684 @@
|
||||
// pages/penalty/penalty.js
|
||||
import request from '../../utils/request.js'
|
||||
const app = getApp()
|
||||
const MEIYE_TIAOSHU = 5
|
||||
|
||||
Page({
|
||||
data: {
|
||||
zongshu: 0,
|
||||
daichuli: 0,
|
||||
yichuli: 0,
|
||||
shenfen: 0,
|
||||
chufaList: [],
|
||||
dangqianye: 1,
|
||||
haiyougengduo: true,
|
||||
jiazhaozhong: false,
|
||||
jiazhaigengduo: false,
|
||||
scrollHeight: 0,
|
||||
showXiangqing: false,
|
||||
xuanzhongChufa: {},
|
||||
showShensuModal: false,
|
||||
shensuLiyou: '',
|
||||
shensuTupian: [],
|
||||
shensuTupianUrls: [],
|
||||
shangchuanJindu: 0,
|
||||
shangchuanZongshu: 0,
|
||||
jinduWidth: '0%',
|
||||
isShangchuanzhong: false,
|
||||
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/dshqcfjl',
|
||||
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) {
|
||||
console.error('获取统计信息失败:', 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/dshqcfjl',
|
||||
method: 'POST',
|
||||
data: params
|
||||
})
|
||||
|
||||
//console.log('🔴【后端返回的数据】:', res.data)
|
||||
|
||||
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'
|
||||
}
|
||||
}
|
||||
|
||||
// 处理图片URL（在数据加载时就拼接完整URL）
|
||||
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, // 🔴 完整图片URL
|
||||
full_shensu_tupian: fullShensuTupian // 🔴 完整图片URL
|
||||
}
|
||||
})
|
||||
|
||||
//console.log('🔴【处理后的数据】:', processedList)
|
||||
|
||||
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) {
|
||||
console.error('加载处罚记录失败:', error)
|
||||
wx.showToast({
|
||||
title: error.message || '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
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: {}
|
||||
})
|
||||
},
|
||||
|
||||
openShensuModal() {
|
||||
if (this.data.xuanzhongChufa.ssliyou ||
|
||||
(this.data.xuanzhongChufa.shensu_tupian && this.data.xuanzhongChufa.shensu_tupian.length > 0)) {
|
||||
wx.showToast({
|
||||
title: '您已经提交过申诉，请等待处理结果',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.setData({
|
||||
showShensuModal: true,
|
||||
shensuLiyou: '',
|
||||
shensuTupian: [],
|
||||
shensuTupianUrls: [],
|
||||
shangchuanJindu: 0,
|
||||
shangchuanZongshu: 0,
|
||||
jinduWidth: '0%'
|
||||
})
|
||||
},
|
||||
|
||||
closeShensuModal() {
|
||||
this.setData({
|
||||
showShensuModal: false,
|
||||
shensuLiyou: '',
|
||||
shensuTupian: [],
|
||||
shensuTupianUrls: []
|
||||
})
|
||||
},
|
||||
|
||||
onShensuLiyouInput(e) {
|
||||
const value = e.detail.value.slice(0, 500)
|
||||
this.setData({ shensuLiyou: value })
|
||||
},
|
||||
|
||||
chooseShensuTupian() {
|
||||
if (this.data.isShangchuanzhong) return
|
||||
const shengyu = 9 - this.data.shensuTupian.length
|
||||
if (shengyu <= 0) {
|
||||
wx.showToast({
|
||||
title: '最多只能上传9张图片',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
wx.chooseMedia({
|
||||
count: shengyu,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const newTupian = [...this.data.shensuTupian, ...res.tempFiles.map(file => file.tempFilePath)]
|
||||
this.setData({ shensuTupian: newTupian.slice(0, 9) })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
deleteShensuTupian(e) {
|
||||
const index = e.currentTarget.dataset.index
|
||||
const newTupian = [...this.data.shensuTupian]
|
||||
newTupian.splice(index, 1)
|
||||
this.setData({ shensuTupian: newTupian })
|
||||
},
|
||||
|
||||
yulanShensuTupian(e) {
|
||||
const index = e.currentTarget.dataset.index
|
||||
const urls = this.data.shensuTupian
|
||||
if (!urls[index]) return
|
||||
wx.previewImage({
|
||||
current: urls[index],
|
||||
urls: urls
|
||||
})
|
||||
},
|
||||
|
||||
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'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async getCOSZhengshu() {
|
||||
try {
|
||||
const res = await request({
|
||||
url: '/dingdan/dsscpz',
|
||||
method: 'POST',
|
||||
data: {
|
||||
dingdan_id: this.data.xuanzhongChufa.dingdan_id,
|
||||
yongtu: 'chufa'
|
||||
}
|
||||
})
|
||||
if (res.statusCode === 200 && res.data.code === 0 && res.data.data) {
|
||||
return res.data.data
|
||||
} else {
|
||||
throw new Error(res?.data?.msg || '获取上传凭证失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取COS凭证失败:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
initCOSClient(tokenData) {
|
||||
const COS = require('../../utils/cos-wx-sdk-v5.js')
|
||||
const credentials = tokenData.credentials || tokenData
|
||||
const bucket = tokenData.bucket || 'julebu-1361527063'
|
||||
const region = tokenData.region || 'ap-shanghai'
|
||||
const cos = new COS({
|
||||
SimpleUploadMethod: 'putObject',
|
||||
getAuthorization: async (options, callback) => {
|
||||
const authParams = {
|
||||
TmpSecretId: credentials.tmpSecretId,
|
||||
TmpSecretKey: credentials.tmpSecretKey,
|
||||
SecurityToken: credentials.sessionToken || '',
|
||||
StartTime: tokenData.startTime || Math.floor(Date.now() / 1000),
|
||||
ExpiredTime: tokenData.expiredTime || (Math.floor(Date.now() / 1000) + 7200)
|
||||
}
|
||||
callback(authParams)
|
||||
}
|
||||
})
|
||||
return { cos, bucket, region }
|
||||
},
|
||||
|
||||
async shangchuanDanZhangTupian(filePath, cosKey, index, cosInstance, bucket, region) {
|
||||
return new Promise((resolve) => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
resolve({ status: 'optimistic_success', key: cosKey })
|
||||
}, 2000)
|
||||
cosInstance.uploadFile({
|
||||
Bucket: bucket,
|
||||
Region: region,
|
||||
Key: cosKey,
|
||||
FilePath: filePath,
|
||||
onProgress: (progressInfo) => {
|
||||
const percent = Math.round(progressInfo.percent * 100)
|
||||
if (percent === 100) {
|
||||
clearTimeout(timeoutId)
|
||||
resolve({ status: 'optimistic_success', key: cosKey })
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
async piliangShangchuanShensuTupian() {
|
||||
const total = this.data.shensuTupian.length
|
||||
if (total === 0) return []
|
||||
this.setData({
|
||||
shangchuanZongshu: total,
|
||||
shangchuanJindu: 0,
|
||||
jinduWidth: '0%',
|
||||
isShangchuanzhong: true
|
||||
})
|
||||
let yonghuid = ''
|
||||
|
||||
// 方案1：直接从全局缓存获取
|
||||
const uid = wx.getStorageSync('uid')
|
||||
if (uid) {
|
||||
yonghuid = String(uid).padStart(7, '0')
|
||||
//console.log('🔴【从uid获取yonghuid】', yonghuid)
|
||||
}
|
||||
|
||||
// 方案2：如果还没有，从用户信息获取
|
||||
if (!yonghuid && app.globalData.userInfo && app.globalData.userInfo.yonghuid) {
|
||||
yonghuid = String(app.globalData.userInfo.yonghuid).padStart(7, '0')
|
||||
//console.log('🔴【从userInfo获取yonghuid】', yonghuid)
|
||||
}
|
||||
|
||||
// 方案3：如果还没有，直接提示并返回
|
||||
if (!yonghuid) {
|
||||
wx.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'none'
|
||||
})
|
||||
this.setData({ isShangchuanzhong: false })
|
||||
return []
|
||||
}
|
||||
|
||||
|
||||
|
||||
const preGeneratedUrls = []
|
||||
for (let i = 0; i < total; i++) {
|
||||
const timestamp = Date.now() + i
|
||||
const random = Math.floor(Math.random() * 10000)
|
||||
const fileExt = this.getFileExtension(this.data.shensuTupian[i])
|
||||
const fileName = `${yonghuid}_${timestamp}_${random}${fileExt}`
|
||||
const cosKey = `a_long/chfajltp/dssstp/${fileName}`
|
||||
preGeneratedUrls.push(cosKey)
|
||||
}
|
||||
|
||||
let cosClient, bucket, region
|
||||
try {
|
||||
const tokenData = await this.getCOSZhengshu()
|
||||
const { cos, bucket: cosBucket, region: cosRegion } = this.initCOSClient(tokenData)
|
||||
cosClient = cos
|
||||
bucket = cosBucket
|
||||
region = cosRegion
|
||||
} catch (error) {
|
||||
wx.showToast({ title: '上传初始化失败', icon: 'none' })
|
||||
this.setData({ isShangchuanzhong: false })
|
||||
return []
|
||||
}
|
||||
|
||||
const uploadTasks = []
|
||||
for (let i = 0; i < total; i++) {
|
||||
const task = this.shangchuanDanZhangTupian(
|
||||
this.data.shensuTupian[i],
|
||||
preGeneratedUrls[i],
|
||||
i,
|
||||
cosClient,
|
||||
bucket,
|
||||
region
|
||||
).then((result) => {
|
||||
const currentDone = i + 1
|
||||
const jinduPercent = ((currentDone / total) * 100).toFixed(0)
|
||||
this.setData({
|
||||
shangchuanJindu: currentDone,
|
||||
jinduWidth: `${jinduPercent}%`
|
||||
})
|
||||
return result
|
||||
})
|
||||
uploadTasks.push(task)
|
||||
}
|
||||
await Promise.all(uploadTasks)
|
||||
this.setData({ isShangchuanzhong: false })
|
||||
return preGeneratedUrls
|
||||
},
|
||||
|
||||
getFileExtension(filePath) {
|
||||
const lastDotIndex = filePath.lastIndexOf('.')
|
||||
if (lastDotIndex === -1) return '.jpg'
|
||||
const ext = filePath.substring(lastDotIndex).toLowerCase()
|
||||
const allowedExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
|
||||
return allowedExts.includes(ext) ? ext : '.jpg'
|
||||
},
|
||||
|
||||
async submitShensu() {
|
||||
if (!this.data.shensuLiyou.trim()) {
|
||||
wx.showToast({ title: '请输入申诉理由', icon: 'none' }); return
|
||||
}
|
||||
if (this.data.shensuTupian.length === 0) {
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: '未上传任何图片，确定要提交申诉吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) await this.tijiaoShensuData([])
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
wx.showToast({ title: '开始上传图片...', icon: 'none' })
|
||||
try {
|
||||
const tupianUrls = await this.piliangShangchuanShensuTupian()
|
||||
if (!tupianUrls || tupianUrls.length === 0) throw new Error('图片上传失败')
|
||||
await this.tijiaoShensuData(tupianUrls)
|
||||
} catch (error) {
|
||||
console.error('提交申诉失败:', error)
|
||||
wx.showToast({ title: error.message || '提交失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
||||
async tijiaoShensuData(tupianUrls) {
|
||||
wx.showToast({ title: '提交申诉中...', icon: 'none' })
|
||||
try {
|
||||
const res = await request({
|
||||
url: '/yonghu/dscfss',
|
||||
method: 'POST',
|
||||
data: {
|
||||
chufa_id: this.data.xuanzhongChufa.id,
|
||||
shensu_liyou: this.data.shensuLiyou,
|
||||
shensu_tupian_urls: tupianUrls
|
||||
}
|
||||
})
|
||||
if (res.statusCode === 200 && res.data.code === 0) {
|
||||
this.updateChufaRecord({
|
||||
sqzhuangtai: 3,
|
||||
ssliyou: this.data.shensuLiyou,
|
||||
shensu_tupian: tupianUrls
|
||||
})
|
||||
this.setData({
|
||||
showShensuModal: false,
|
||||
showXiangqing: false,
|
||||
shensuLiyou: '',
|
||||
shensuTupian: [],
|
||||
xuanzhongChufa: {}
|
||||
})
|
||||
wx.showToast({ title: '申诉提交成功，请等待处理', icon: 'success' })
|
||||
setTimeout(() => { this.chushihuaShuju() }, 500)
|
||||
} else {
|
||||
throw new Error(res.data?.msg || '提交申诉失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交申诉数据失败:', error)
|
||||
wx.showToast({ title: error.message || '提交失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
||||
updateChufaRecord(newData) {
|
||||
const newList = this.data.chufaList.map(item => {
|
||||
if (item.id === this.data.xuanzhongChufa.id) {
|
||||
const updatedItem = { ...item, ...newData }
|
||||
// 🔴 更新显示字段
|
||||
if (newData.sqzhuangtai === 3) {
|
||||
updatedItem.display_status = '申诉中'
|
||||
updatedItem.status_class = 'zhuangtai-shensuzhong'
|
||||
}
|
||||
if (newData.shensu_tupian) {
|
||||
updatedItem.full_shensu_tupian = newData.shensu_tupian.map(url => this.getFullImageUrl(url))
|
||||
}
|
||||
return updatedItem
|
||||
}
|
||||
return item
|
||||
})
|
||||
this.setData({ chufaList: newList })
|
||||
},
|
||||
|
||||
// 🔴【图片URL拼接 - 确保返回完整URL】
|
||||
getFullImageUrl(relativeUrl) {
|
||||
//console.log('🔴【图片拼接】输入:', relativeUrl)
|
||||
|
||||
if (!relativeUrl) return ''
|
||||
if (relativeUrl.startsWith('http')) {
|
||||
//console.log('🔴【已经是完整URL】返回:', relativeUrl)
|
||||
return relativeUrl
|
||||
}
|
||||
|
||||
const ossUrl = this.data.ossImageUrl
|
||||
if (!ossUrl) {
|
||||
//console.log('🔴【OSS地址为空】返回原始URL:', relativeUrl)
|
||||
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
|
||||
}
|
||||
|
||||
// console.log('🔴【拼接后URL】:', fullUrl)
|
||||
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' })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 🔴【保留原函数但已不再使用（用于向后兼容）】
|
||||
formatShijian(shijian) {
|
||||
if (!shijian) return '--'
|
||||
return String(shijian)
|
||||
},
|
||||
|
||||
getZhuangtaiText(zhuangtai) {
|
||||
const statusNum = Number(zhuangtai)
|
||||
if (statusNum === 0) return '待处罚'
|
||||
if (statusNum === 1) return '已处罚'
|
||||
if (statusNum === 2) return '已驳回'
|
||||
if (statusNum === 3) return '申诉中'
|
||||
return '未知状态'
|
||||
},
|
||||
|
||||
getZhuangtaiClass(zhuangtai) {
|
||||
const statusNum = Number(zhuangtai)
|
||||
if (statusNum === 0) return 'zhuangtai-daichuli'
|
||||
if (statusNum === 1) return 'zhuangtai-yichufa'
|
||||
if (statusNum === 2) return 'zhuangtai-yibohui'
|
||||
if (statusNum === 3) return 'zhuangtai-shensuzhong'
|
||||
return 'zhuangtai-weizhi'
|
||||
}
|
||||
})
|
||||
10
pages/fighter-msg/fighter-msg.json
Normal file
10
pages/fighter-msg/fighter-msg.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"global-notification": "/components/global-notification/global-notification"
|
||||
},
|
||||
"navigationBarTitleText": "处罚记录",
|
||||
"navigationBarBackgroundColor": "#0a0a12",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#0a0a12",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
316
pages/fighter-msg/fighter-msg.wxml
Normal file
316
pages/fighter-msg/fighter-msg.wxml
Normal file
@@ -0,0 +1,316 @@
|
||||
<!-- pages/penalty/penalty.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">
|
||||
<!-- 🔴 直接使用display_time -->
|
||||
<text class="shijian">{{ item.display_time }}</text>
|
||||
<!-- 🔴 直接使用display_status和status_class -->
|
||||
<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">
|
||||
<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">
|
||||
<!-- 🔴 直接使用display_time -->
|
||||
<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>
|
||||
<!-- 🔴 直接使用display_status和status_class -->
|
||||
<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>
|
||||
|
||||
<!-- 🔴 证据图片展示 - 直接使用full_zhengju_tupian -->
|
||||
<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" bindtap="yulanTupian" data-url="{{ item }}" data-urls="{{ xuanzhongChufa.full_zhengju_tupian }}">
|
||||
<image
|
||||
src="{{ item }}"
|
||||
class="tupian-image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</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>
|
||||
<!-- 🔴 申诉图片展示 - 直接使用full_shensu_tupian -->
|
||||
<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" bindtap="yulanTupian" data-url="{{ item }}" data-urls="{{ xuanzhongChufa.full_shensu_tupian }}">
|
||||
<image
|
||||
src="{{ item }}"
|
||||
class="tupian-image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 弹窗底部按钮 -->
|
||||
<view class="modal-footer">
|
||||
<view class="btn-group">
|
||||
<!-- 联系客服按钮（始终显示） -->
|
||||
<view class="btn btn-kefu" bindtap="lianxiKefu">
|
||||
<text>联系客服</text>
|
||||
</view>
|
||||
<!-- 申诉按钮（只有待处罚状态可点击） -->
|
||||
<view
|
||||
class="btn {{ xuanzhongChufa.sqzhuangtai === 0 ? 'btn-shensu' : 'btn-shensu-disabled' }}"
|
||||
bindtap="{{ xuanzhongChufa.sqzhuangtai === 0 ? 'openShensuModal' : '' }}"
|
||||
>
|
||||
<text>申诉</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 申诉弹窗 -->
|
||||
<view wx:if="{{ showShensuModal }}" class="shensu-modal">
|
||||
<view class="modal-mask" bindtap="closeShensuModal"></view>
|
||||
<view class="modal-content small-modal">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">提交申诉</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<!-- 申诉理由输入 -->
|
||||
<view class="input-group">
|
||||
<view class="input-label">申诉理由</view>
|
||||
<textarea
|
||||
class="shensu-textarea"
|
||||
value="{{ shensuLiyou }}"
|
||||
bindinput="onShensuLiyouInput"
|
||||
placeholder="请输入申诉理由（最多500字）..."
|
||||
maxlength="500"
|
||||
auto-height
|
||||
/>
|
||||
<view class="word-count">{{ shensuLiyou.length }}/500</view>
|
||||
</view>
|
||||
|
||||
<!-- 申诉图片上传 -->
|
||||
<view class="input-group">
|
||||
<view class="input-label">申诉图片</view>
|
||||
<view class="upload-tip">最多可上传9张图片</view>
|
||||
|
||||
<!-- 图片网格 -->
|
||||
<view class="tupian-grid-upload">
|
||||
<!-- 已上传图片 -->
|
||||
<block wx:for="{{ shensuTupian }}" wx:key="index">
|
||||
<view class="tupian-item-upload">
|
||||
<image
|
||||
src="{{ item }}"
|
||||
class="tupian-image-upload"
|
||||
mode="aspectFill"
|
||||
bindtap="yulanShensuTupian"
|
||||
data-index="{{ index }}"
|
||||
/>
|
||||
<view class="tupian-delete" bindtap="deleteShensuTupian" data-index="{{ index }}">
|
||||
<text>×</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 添加按钮 -->
|
||||
<view
|
||||
wx:if="{{ shensuTupian.length < 9 }}"
|
||||
class="tupian-add-btn"
|
||||
bindtap="chooseShensuTupian"
|
||||
>
|
||||
<view class="add-icon">+</view>
|
||||
<text class="add-text">添加图片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上传进度 -->
|
||||
<view wx:if="{{ shangchuanZongshu > 0 }}" class="upload-progress">
|
||||
<view class="progress-title">上传进度</view>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-inner" style="width: {{ jinduWidth }}"></view>
|
||||
</view>
|
||||
<view class="progress-text">{{ shangchuanJindu }}/{{ shangchuanZongshu }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="btn-group">
|
||||
<view class="btn btn-quxiao" bindtap="closeShensuModal">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
<view class="btn btn-queren" bindtap="submitShensu">
|
||||
<text>提交申诉</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 全局通知组件 -->
|
||||
<global-notification id="global-notification" />
|
||||
</view>
|
||||
963
pages/fighter-msg/fighter-msg.wxss
Normal file
963
pages/fighter-msg/fighter-msg.wxss
Normal file
@@ -0,0 +1,963 @@
|
||||
/* pages/penalty/penalty.wxss */
|
||||
/* 🔴【恢复您原来的深色背景，但调淡一点】 */
|
||||
|
||||
:root {
|
||||
/* 🔴【颜色调淡方案】 */
|
||||
--cyber-blue: rgba(0, 243, 255, 0.7); /* 蓝色调淡70% */
|
||||
--cyber-pink: rgba(255, 0, 255, 0.7); /* 粉色调淡70% */
|
||||
--cyber-purple: rgba(157, 0, 255, 0.7); /* 紫色调淡70% */
|
||||
--cyber-green: rgba(0, 255, 157, 0.7); /* 绿色调淡70% */
|
||||
--cyber-red: rgba(255, 0, 102, 0.7); /* 红色调淡70% */
|
||||
|
||||
/* 🔴【背景改为淡灰色，不是深色，也不是白色】 */
|
||||
--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); /* 🔴 调淡为30%透明度 */
|
||||
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); /* 🔴 调淡为30%透明度 */
|
||||
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(50, 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(255, 0, 255, 0.3), rgba(0, 243, 255, 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,
|
||||
.shensu-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(0, 243, 255, 0.3);
|
||||
z-index: 1001;
|
||||
backdrop-filter: blur(0px); /* 去掉模糊效果 */
|
||||
}
|
||||
|
||||
.small-modal {
|
||||
max-height: 85vh;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx 30rpx 30rpx;
|
||||
border-bottom: 1rpx solid rgba(0, 243, 255, 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(0, 243, 255, 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(255, 255, 255, 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%;
|
||||
}
|
||||
|
||||
/* 弹窗底部按钮 */
|
||||
.modal-footer {
|
||||
padding: 30rpx;
|
||||
border-top: 1rpx solid rgba(0, 243, 255, 0.2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.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: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);
|
||||
}
|
||||
|
||||
.btn-shensu {
|
||||
background: rgba(255, 165, 0, 0.1);
|
||||
border-color: #FFA500;
|
||||
box-shadow: 0 0 12rpx rgba(255, 165, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-shensu-disabled {
|
||||
background: rgba(102, 102, 102, 0.1);
|
||||
border-color: #666;
|
||||
box-shadow: 0 0 12rpx rgba(102, 102, 102, 0.2);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-quxiao {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 12rpx rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-queren {
|
||||
background: rgba(0, 255, 157, 0.1);
|
||||
border-color: var(--cyber-green);
|
||||
box-shadow: 0 0 12rpx rgba(0, 255, 157, 0.2);
|
||||
}
|
||||
|
||||
/* 申诉弹窗输入样式 */
|
||||
.input-group {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
color: var(--cyber-text-light) !important;
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 15rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.shensu-textarea {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
padding: 25rpx 30rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 15rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5;
|
||||
color: var(--cyber-text) !important;
|
||||
border: 1rpx solid rgba(0, 243, 255, 0.2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.shensu-textarea::placeholder {
|
||||
color: var(--cyber-text-lighter) !important;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
text-align: right;
|
||||
color: var(--cyber-text-lighter) !important;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
color: var(--cyber-text-lighter) !important;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 20rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 上传图片网格 */
|
||||
.tupian-grid-upload {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -5rpx;
|
||||
margin-right: -5rpx;
|
||||
}
|
||||
|
||||
.tupian-item-upload {
|
||||
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-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tupian-delete {
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
right: 5rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 0, 102, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tupian-add-btn {
|
||||
width: calc(33.333% - 10rpx);
|
||||
margin: 5rpx;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx dashed rgba(0, 243, 255, 0.4);
|
||||
color: var(--cyber-blue);
|
||||
}
|
||||
|
||||
.tupian-add-btn:active {
|
||||
border-color: var(--cyber-blue);
|
||||
background: rgba(0, 243, 255, 0.07);
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 60rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 上传进度 */
|
||||
.upload-progress {
|
||||
margin-top: 30rpx;
|
||||
padding: 25rpx 30rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 15rpx;
|
||||
border: 1rpx solid rgba(0, 243, 255, 0.2);
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
color: var(--cyber-blue);
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 15rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.progress-inner {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--cyber-blue), var(--cyber-purple));
|
||||
border-radius: 10rpx;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
text-align: center;
|
||||
color: var(--cyber-text-light) !important;
|
||||
font-size: 26rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 🔴【颜色调整】卡片和弹窗背景色稍微调淡一点 */
|
||||
:root {
|
||||
--cyber-bg: #2c2c3c; /* 从#2a2a3a调亮一点 */
|
||||
--cyber-card: #363648; /* 从#333344调亮一点 */
|
||||
}
|
||||
|
||||
/* 🔴【卡片背景色调整 - 更淡一点】 */
|
||||
.chufa-card {
|
||||
background: rgba(130, 141, 146, 0.8); /* 从rgba(50,50,65,0.8)调亮 */
|
||||
}
|
||||
|
||||
/* 🔴【弹窗背景色调整 - 更淡一点】 */
|
||||
.modal-content {
|
||||
|
||||
background: #acacda; /* 从#3a3a4a调亮 */
|
||||
}
|
||||
|
||||
/* 🔴【增加弹窗高度】 */
|
||||
.modal-content {
|
||||
max-height: 88vh; /* 从80vh增加 */
|
||||
}
|
||||
|
||||
.small-modal {
|
||||
max-height: 88vh; /* 从85vh调整 */
|
||||
}
|
||||
|
||||
/* 🔴【增加弹窗内部滚动区域高度】 */
|
||||
/* 修改wxml中对应的style */
|
||||
/* 需要将：<scroll-view class="modal-body" scroll-y style="max-height: 500rpx;"> */
|
||||
/* 改为：<scroll-view class="modal-body" scroll-y style="max-height: 600rpx;"> */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* pages/penalty/penalty.wxss 中新增样式 */
|
||||
|
||||
/* 🔴【关键修改】图片网格和图片样式 */
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user