881 lines
21 KiB
Vue
881 lines
21 KiB
Vue
<template>
|
||
<view class="attachment-page">
|
||
<!-- 赛事信息卡片 -->
|
||
<view class="event-info-card">
|
||
<view class="event-title">{{ competitionName || '赛事名称' }}</view>
|
||
<view class="event-time-row">
|
||
<view class="time-item">
|
||
<text class="time-label">开始时间</text>
|
||
<text class="time-value">{{ startTime || '待定' }}</text>
|
||
</view>
|
||
<view class="time-divider"></view>
|
||
<view class="time-item">
|
||
<text class="time-label">结束时间</text>
|
||
<text class="time-value">{{ endTime || '待定' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view class="loading-state" v-if="loading">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 附件列表 -->
|
||
<view class="attachments-section" v-if="!loading && attachments.length > 0">
|
||
<view class="section-header">
|
||
<text class="section-title">{{ pageTitle }}文件</text>
|
||
<text class="section-count">共{{ attachments.length }}个文件</text>
|
||
</view>
|
||
|
||
<view class="attachments-list">
|
||
<view
|
||
class="attachment-item"
|
||
v-for="(file, index) in attachments"
|
||
:key="index"
|
||
>
|
||
<!-- 文件图标 -->
|
||
<view class="file-icon" :class="'icon-' + file.fileType">
|
||
<text class="icon-text">{{ getFileIconText(file.fileType) }}</text>
|
||
</view>
|
||
|
||
<!-- 文件信息 -->
|
||
<view class="file-content">
|
||
<text class="file-name">{{ file.fileName }}</text>
|
||
<view class="file-meta">
|
||
<text class="meta-item">{{ file.fileSize }}</text>
|
||
<text class="meta-dot" v-if="file.uploadTime">·</text>
|
||
<text class="meta-item" v-if="file.uploadTime">{{ file.uploadTime }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="file-actions">
|
||
<view class="action-btn preview-btn" @click="previewFile(file)">
|
||
<text class="action-text">预览</text>
|
||
</view>
|
||
<view class="action-btn download-btn" @click="downloadFile(file)">
|
||
<text class="action-text">下载</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" v-if="!loading && attachments.length === 0">
|
||
<image class="empty-image" src="/static/images/empty.png" mode="aspectFit" />
|
||
<text class="empty-title">暂无{{ pageTitle }}文件</text>
|
||
<text class="empty-desc">相关文件正在整理中，请稍后查看</text>
|
||
</view>
|
||
|
||
<!-- PDF预览弹窗 (仅H5) -->
|
||
<!-- #ifdef H5 -->
|
||
<view class="preview-modal" v-if="showPreview" @click="closePreview">
|
||
<view class="preview-container" @click.stop>
|
||
<view class="preview-header">
|
||
<text class="preview-title">{{ previewFileName }}</text>
|
||
<view class="preview-close" @click="closePreview">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
<view class="preview-body">
|
||
<iframe
|
||
:src="previewUrl"
|
||
class="preview-iframe"
|
||
frameborder="0"
|
||
></iframe>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import competitionAPI from '@/api/competition.js'
|
||
|
||
// 页面类型配置
|
||
const PAGE_CONFIG = {
|
||
'info': { title: '信息发布', type: 'info' },
|
||
'rules': { title: '赛事规程', type: 'rules' },
|
||
'schedule': { title: '活动日程', type: 'schedule' },
|
||
'score': { title: '成绩公告', type: 'results' },
|
||
'results': { title: '成绩公告', type: 'results' },
|
||
'awards': { title: '奖牌榜', type: 'medals' },
|
||
'medals': { title: '奖牌榜', type: 'medals' },
|
||
'photos': { title: '图片直播', type: 'photos' }
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
pageType: 'rules',
|
||
pageTitle: '赛事规程',
|
||
competitionId: '',
|
||
competitionName: '',
|
||
startTime: '',
|
||
endTime: '',
|
||
attachments: [],
|
||
// H5预览相关
|
||
showPreview: false,
|
||
previewUrl: '',
|
||
previewFileName: ''
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 获取页面类型
|
||
if (options.type && PAGE_CONFIG[options.type]) {
|
||
this.pageType = options.type
|
||
this.pageTitle = PAGE_CONFIG[options.type].title
|
||
}
|
||
|
||
// 获取赛事ID
|
||
if (options.competitionId || options.eventId) {
|
||
this.competitionId = options.competitionId || options.eventId
|
||
}
|
||
|
||
// 获取赛事名称
|
||
if (options.name) {
|
||
this.competitionName = decodeURIComponent(options.name)
|
||
}
|
||
|
||
// 获取比赛时间
|
||
if (options.startTime) {
|
||
this.startTime = decodeURIComponent(options.startTime)
|
||
}
|
||
if (options.endTime) {
|
||
this.endTime = decodeURIComponent(options.endTime)
|
||
}
|
||
|
||
// 设置导航栏标题
|
||
uni.setNavigationBarTitle({
|
||
title: this.pageTitle
|
||
})
|
||
|
||
// 加载数据
|
||
this.loadData()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 加载数据
|
||
*/
|
||
async loadData() {
|
||
this.loading = true
|
||
try {
|
||
// 如果没有赛事信息，先获取赛事详情
|
||
if (!this.startTime || !this.endTime) {
|
||
await this.loadCompetitionInfo()
|
||
}
|
||
// 加载附件列表
|
||
await this.loadAttachments()
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 加载赛事信息
|
||
*/
|
||
async loadCompetitionInfo() {
|
||
try {
|
||
const res = await competitionAPI.getCompetitionDetail(this.competitionId)
|
||
if (res) {
|
||
this.competitionName = res.name || res.title || this.competitionName
|
||
this.startTime = this.formatDate(res.startTime || res.competitionStartTime)
|
||
this.endTime = this.formatDate(res.endTime || res.competitionEndTime)
|
||
}
|
||
} catch (err) {
|
||
console.error('加载赛事信息失败:', err)
|
||
// 使用模拟数据
|
||
this.startTime = '2025.12.12'
|
||
this.endTime = '2025.12.14'
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 加载附件列表
|
||
*/
|
||
async loadAttachments() {
|
||
try {
|
||
// 使用 PAGE_CONFIG 映射的 type 值
|
||
const attachmentType = PAGE_CONFIG[this.pageType]?.type || this.pageType
|
||
console.log('=== 加载附件 ===')
|
||
console.log('competitionId:', this.competitionId)
|
||
console.log('pageType:', this.pageType)
|
||
console.log('attachmentType (发送给后端):', attachmentType)
|
||
|
||
const res = await competitionAPI.getAttachments({
|
||
competitionId: this.competitionId,
|
||
type: attachmentType
|
||
})
|
||
|
||
console.log('API返回结果:', res)
|
||
console.log('API返回结果类型:', typeof res)
|
||
console.log('是否为数组:', Array.isArray(res))
|
||
|
||
// 兼容不同的返回格式
|
||
let attachmentList = []
|
||
if (Array.isArray(res)) {
|
||
attachmentList = res
|
||
} else if (res && res.records && Array.isArray(res.records)) {
|
||
// 分页格式
|
||
attachmentList = res.records
|
||
} else if (res && typeof res === 'object') {
|
||
// 可能是单个对象，转为数组
|
||
attachmentList = [res]
|
||
}
|
||
|
||
console.log('处理后的附件列表:', attachmentList)
|
||
|
||
if (attachmentList.length > 0) {
|
||
this.attachments = attachmentList.map(file => ({
|
||
id: file.id,
|
||
fileName: file.fileName || file.name,
|
||
fileUrl: file.fileUrl || file.url,
|
||
fileSize: this.formatFileSize(file.fileSize || file.size),
|
||
fileType: this.getFileType(file.fileName || file.name),
|
||
uploadTime: this.formatDate(file.uploadTime || file.createTime)
|
||
}))
|
||
console.log('附件加载成功，共', this.attachments.length, '个文件')
|
||
} else {
|
||
console.log('没有附件数据，显示空状态')
|
||
this.attachments = []
|
||
}
|
||
} catch (err) {
|
||
console.error('=== 加载附件失败 ===')
|
||
console.error('错误详情:', err)
|
||
console.error('错误消息:', err.message)
|
||
console.error('错误代码:', err.code)
|
||
// 显示空状态，不使用模拟数据，方便调试
|
||
this.attachments = []
|
||
// 如果需要模拟数据，取消下面的注释
|
||
// this.loadMockData()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 加载模拟数据
|
||
*/
|
||
loadMockData() {
|
||
const mockDataMap = {
|
||
'info': [
|
||
{ id: '1', fileName: '2025年郑州武术大赛通知.pdf', fileUrl: '', fileSize: '1.2 MB', fileType: 'pdf', uploadTime: '2025-12-20' }
|
||
],
|
||
'rules': [
|
||
{ id: '1', fileName: '2025年郑州武术大赛竞赛规程.pdf', fileUrl: '', fileSize: '2.5 MB', fileType: 'pdf', uploadTime: '2025-12-18' },
|
||
{ id: '2', fileName: '参赛报名表.pdf', fileUrl: '', fileSize: '156 KB', fileType: 'pdf', uploadTime: '2025-12-18' }
|
||
],
|
||
'schedule': [
|
||
{ id: '1', fileName: '比赛日程安排表.pdf', fileUrl: '', fileSize: '890 KB', fileType: 'pdf', uploadTime: '2025-12-19' }
|
||
],
|
||
'score': [
|
||
{ id: '1', fileName: '比赛成绩公告.pdf', fileUrl: '', fileSize: '1.8 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||
],
|
||
'results': [
|
||
{ id: '1', fileName: '比赛成绩公告.pdf', fileUrl: '', fileSize: '1.8 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||
],
|
||
'awards': [
|
||
{ id: '1', fileName: '奖牌榜统计.pdf', fileUrl: '', fileSize: '520 KB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||
],
|
||
'medals': [
|
||
{ id: '1', fileName: '奖牌榜统计.pdf', fileUrl: '', fileSize: '520 KB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||
],
|
||
'photos': [
|
||
{ id: '1', fileName: '比赛精彩瞬间.pdf', fileUrl: '', fileSize: '15.6 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||
]
|
||
}
|
||
|
||
this.attachments = mockDataMap[this.pageType] || []
|
||
},
|
||
|
||
/**
|
||
* 预览文件
|
||
*/
|
||
previewFile(file) {
|
||
if (!file.fileUrl) {
|
||
uni.showToast({
|
||
title: '文件暂不可用',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// #ifdef H5
|
||
// H5端：根据文件类型选择预览方式
|
||
if (file.fileType === 'pdf') {
|
||
// 方案1: 直接在新标签页打开PDF（浏览器内置PDF阅读器）
|
||
window.open(file.fileUrl, '_blank')
|
||
|
||
// 方案2: 使用微软 Office Online Viewer（备选，需要公网可访问）
|
||
// const msViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file.fileUrl)}`
|
||
// window.open(msViewerUrl, '_blank')
|
||
|
||
// 方案3: 使用内嵌弹窗（如果服务器支持）
|
||
// this.previewFileName = file.fileName
|
||
// this.previewUrl = file.fileUrl
|
||
// this.showPreview = true
|
||
} else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(file.fileType)) {
|
||
// 图片使用弹窗显示
|
||
this.previewFileName = file.fileName
|
||
this.previewUrl = file.fileUrl
|
||
this.showPreview = true
|
||
} else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(file.fileType)) {
|
||
// Office 文档使用微软在线预览
|
||
const msViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file.fileUrl)}`
|
||
window.open(msViewerUrl, '_blank')
|
||
} else {
|
||
// 其他文件类型，在新窗口打开
|
||
window.open(file.fileUrl, '_blank')
|
||
}
|
||
return
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
// 非H5端使用下载+打开文档的方式
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
})
|
||
|
||
uni.downloadFile({
|
||
url: file.fileUrl,
|
||
success: (res) => {
|
||
uni.hideLoading()
|
||
if (res.statusCode === 200) {
|
||
uni.openDocument({
|
||
filePath: res.tempFilePath,
|
||
fileType: file.fileType,
|
||
showMenu: true,
|
||
success: () => {
|
||
console.log('打开文档成功')
|
||
},
|
||
fail: (err) => {
|
||
console.error('打开文档失败:', err)
|
||
uni.showToast({
|
||
title: '无法预览此文件',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '文件加载失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading()
|
||
console.error('下载失败:', err)
|
||
uni.showToast({
|
||
title: '下载失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
|
||
/**
|
||
* 关闭预览弹窗
|
||
*/
|
||
closePreview() {
|
||
this.showPreview = false
|
||
this.previewUrl = ''
|
||
this.previewFileName = ''
|
||
},
|
||
|
||
/**
|
||
* 下载文件
|
||
*/
|
||
downloadFile(file) {
|
||
if (!file.fileUrl) {
|
||
uni.showToast({
|
||
title: '文件暂不可用',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '下载中...'
|
||
})
|
||
|
||
uni.downloadFile({
|
||
url: file.fileUrl,
|
||
success: (res) => {
|
||
uni.hideLoading()
|
||
if (res.statusCode === 200) {
|
||
// #ifdef MP-WEIXIN
|
||
// 微信小程序保存文件
|
||
uni.saveFile({
|
||
tempFilePath: res.tempFilePath,
|
||
success: (saveRes) => {
|
||
uni.showToast({
|
||
title: '下载成功',
|
||
icon: 'success'
|
||
})
|
||
},
|
||
fail: () => {
|
||
// 保存失败则打开文档
|
||
uni.openDocument({
|
||
filePath: res.tempFilePath,
|
||
fileType: file.fileType,
|
||
showMenu: true
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
// H5端打开新窗口下载
|
||
window.open(file.fileUrl)
|
||
uni.showToast({
|
||
title: '开始下载',
|
||
icon: 'success'
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
// APP端保存到相册或文件
|
||
uni.saveFile({
|
||
tempFilePath: res.tempFilePath,
|
||
success: (saveRes) => {
|
||
uni.showToast({
|
||
title: '下载成功',
|
||
icon: 'success'
|
||
})
|
||
},
|
||
fail: () => {
|
||
uni.openDocument({
|
||
filePath: res.tempFilePath,
|
||
fileType: file.fileType,
|
||
showMenu: true
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
} else {
|
||
uni.showToast({
|
||
title: '下载失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading()
|
||
console.error('下载失败:', err)
|
||
uni.showToast({
|
||
title: '下载失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 获取文件类型
|
||
*/
|
||
getFileType(fileName) {
|
||
if (!fileName) return 'pdf'
|
||
const ext = fileName.split('.').pop().toLowerCase()
|
||
return ext
|
||
},
|
||
|
||
/**
|
||
* 获取文件图标文字
|
||
*/
|
||
getFileIconText(fileType) {
|
||
const iconMap = {
|
||
'pdf': 'PDF',
|
||
'doc': 'DOC',
|
||
'docx': 'DOC',
|
||
'xls': 'XLS',
|
||
'xlsx': 'XLS',
|
||
'ppt': 'PPT',
|
||
'pptx': 'PPT',
|
||
'txt': 'TXT',
|
||
'jpg': 'IMG',
|
||
'jpeg': 'IMG',
|
||
'png': 'IMG',
|
||
'zip': 'ZIP',
|
||
'rar': 'RAR'
|
||
}
|
||
return iconMap[fileType] || 'FILE'
|
||
},
|
||
|
||
/**
|
||
* 格式化文件大小
|
||
*/
|
||
formatFileSize(bytes) {
|
||
if (!bytes || bytes === 0) return '0 B'
|
||
if (typeof bytes === 'string') return bytes
|
||
|
||
const k = 1024
|
||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||
return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i]
|
||
},
|
||
|
||
/**
|
||
* 格式化日期
|
||
*/
|
||
formatDate(dateStr) {
|
||
if (!dateStr) return ''
|
||
const date = new Date(dateStr)
|
||
if (isNaN(date.getTime())) return dateStr
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
return `${year}.${month}.${day}`
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.attachment-page {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
// 赛事信息卡片
|
||
.event-info-card {
|
||
background: #fff;
|
||
margin: 20rpx;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.event-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 24rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.event-time-row {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #f8f8f8;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.time-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.time-label {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.time-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.time-divider {
|
||
width: 1rpx;
|
||
height: 60rpx;
|
||
background: #e0e0e0;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
// 加载状态
|
||
.loading-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120rpx 0;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border: 4rpx solid #f0f0f0;
|
||
border-top-color: #C93639;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
// 附件区域
|
||
.attachments-section {
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.section-count {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.attachments-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
// 附件项
|
||
.attachment-item {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
// 文件图标
|
||
.file-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
background: #C93639;
|
||
}
|
||
|
||
.file-icon.icon-pdf {
|
||
background: #E74C3C;
|
||
}
|
||
|
||
.file-icon.icon-doc,
|
||
.file-icon.icon-docx {
|
||
background: #3498DB;
|
||
}
|
||
|
||
.file-icon.icon-xls,
|
||
.file-icon.icon-xlsx {
|
||
background: #27AE60;
|
||
}
|
||
|
||
.file-icon.icon-ppt,
|
||
.file-icon.icon-pptx {
|
||
background: #E67E22;
|
||
}
|
||
|
||
.file-icon.icon-jpg,
|
||
.file-icon.icon-jpeg,
|
||
.file-icon.icon-png {
|
||
background: #9B59B6;
|
||
}
|
||
|
||
.icon-text {
|
||
font-size: 22rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
// 文件内容
|
||
.file-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.file-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.file-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.meta-item {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.meta-dot {
|
||
font-size: 24rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
// 操作按钮
|
||
.file-actions {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 30rpx;
|
||
transition: all 0.3s;
|
||
|
||
&:active {
|
||
opacity: 0.8;
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
.preview-btn {
|
||
background: #C93639;
|
||
|
||
.action-text {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.download-btn {
|
||
background: #fff;
|
||
border: 1rpx solid #C93639;
|
||
|
||
.action-text {
|
||
color: #C93639;
|
||
}
|
||
}
|
||
|
||
.action-text {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// 空状态
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120rpx 60rpx;
|
||
}
|
||
|
||
.empty-image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 30rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.empty-desc {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
text-align: center;
|
||
}
|
||
|
||
// PDF预览弹窗样式
|
||
.preview-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.preview-container {
|
||
width: 95%;
|
||
height: 90%;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.preview-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 30rpx;
|
||
background: #C93639;
|
||
color: #fff;
|
||
}
|
||
|
||
.preview-title {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
.preview-close {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.close-icon {
|
||
font-size: 40rpx;
|
||
color: #fff;
|
||
line-height: 1;
|
||
}
|
||
|
||
.preview-body {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.preview-iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
</style>
|