庄锐波
5 months ago
20 changed files with 1190 additions and 200 deletions
@ -0,0 +1,43 @@ |
|||||
|
<template> |
||||
|
<div id="div-container" style="height:100%;overflow: auto; "> |
||||
|
<img v-for="(item, index) in imgList" :key="index" class="img-box" :src="item" style="width: 100%" /> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script > |
||||
|
import {baseUrl} from "@/config/env"; |
||||
|
import {transPdf} from "@/api/enforce.js"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'PdfViewer', |
||||
|
data() { |
||||
|
return { |
||||
|
imgList:[], |
||||
|
// 可引入网络文件或者本地文件 |
||||
|
pdfUrl: "http://192.168.110.36:85/profile/upload/2024/03/29/40eb1a97ca27c3369370e90632d92db0.pdf", |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.pdfUrl =baseUrl+ this.$route.query.url; |
||||
|
console.log("pdf地址", this.pdfUrl) |
||||
|
this.loadImage(); |
||||
|
}, |
||||
|
methods: { |
||||
|
loadImage() { |
||||
|
let searchParam = reactive({url: this.$route.query.url}); |
||||
|
transPdf(searchParam, success => { |
||||
|
this.imgList = success.data; |
||||
|
if (success.data.length > 0) { |
||||
|
this.imgList.forEach((item, index) => { |
||||
|
this.imgList[index] = "data:image/png;base64,"+item; |
||||
|
}); |
||||
|
} |
||||
|
}, error => { |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,187 @@ |
|||||
|
<template> |
||||
|
<div class="banner-detail-page"> |
||||
|
<!-- 顶部导航栏 --> |
||||
|
<!-- <van-nav-bar |
||||
|
title="-banner详情" |
||||
|
left-text="关闭" |
||||
|
left-arrow |
||||
|
@click-left="onClickLeft" |
||||
|
/> --> |
||||
|
|
||||
|
<!-- 内容区域 --> |
||||
|
<div class="detail-content"> |
||||
|
<!-- 标题 --> |
||||
|
<h1 class="detail-title">{{ detail.title }}</h1> |
||||
|
|
||||
|
<!-- 来源和时间 --> |
||||
|
<div class="detail-meta"> |
||||
|
<span class="detail-source">{{ detail.source }}</span> |
||||
|
<span class="detail-time">{{ detail.time }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 图片 --> |
||||
|
<div class="detail-images" v-if="detail.imageUrl"> |
||||
|
<img |
||||
|
:src="baseUrl + detail.imageUrl" |
||||
|
alt="" |
||||
|
@click="previewImage" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 正文内容 --> |
||||
|
<div class="detail-body" v-if="detail.content" v-html="detail.content"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="bannerDetail"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||
|
import { showToast, showImagePreview } from 'vant'; |
||||
|
import 'vant/es/toast/style'; |
||||
|
import 'vant/es/image-preview/style'; |
||||
|
import { baseUrl } from '@/config/env'; |
||||
|
import { getCarouselBannerDetail } from '@/api/enforcement'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
|
||||
|
// ========== 详情数据 ========== |
||||
|
const detail = ref({ |
||||
|
id: '', |
||||
|
title: '', |
||||
|
source: '', |
||||
|
time: '', |
||||
|
imageUrl: '', |
||||
|
content: '', |
||||
|
}); |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
|
||||
|
// ========== 获取详情数据 ========== |
||||
|
const fetchDetail = () => { |
||||
|
const id = route.query.id; |
||||
|
if (!id) { |
||||
|
showToast('缺少详情ID'); |
||||
|
router.back(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
loading.value = true; |
||||
|
getCarouselBannerDetail( |
||||
|
{ id }, |
||||
|
(res) => { |
||||
|
loading.value = false; |
||||
|
if (res.code === 200 && res.data) { |
||||
|
detail.value = { |
||||
|
id: res.data.id || '', |
||||
|
title: res.data.title || '', |
||||
|
source: res.data.source || '', |
||||
|
time: res.data.time || '', |
||||
|
imageUrl: res.data.imageUrl || '', |
||||
|
content: res.data.content || '', |
||||
|
}; |
||||
|
} else { |
||||
|
showToast(res.message || '获取详情失败'); |
||||
|
} |
||||
|
}, |
||||
|
(err) => { |
||||
|
loading.value = false; |
||||
|
showToast(err.message || '获取详情失败'); |
||||
|
} |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// ========== 页面加载时获取数据 ========== |
||||
|
onMounted(() => { |
||||
|
fetchDetail(); |
||||
|
}); |
||||
|
|
||||
|
// ========== 返回上一页 ========== |
||||
|
const onClickLeft = () => { |
||||
|
router.back(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 预览图片 ========== |
||||
|
const previewImage = () => { |
||||
|
showImagePreview({ |
||||
|
images: [baseUrl + detail.value.imageUrl], |
||||
|
startPosition: 0, |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.banner-detail-page { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
.detail-content { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 0.4rem 0.4rem 0.6rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar) { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar__title) { |
||||
|
font-size: 0.45rem; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar__text) { |
||||
|
font-size: 0.35rem; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar .van-icon) { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.detail-title { |
||||
|
font-size: 0.55rem; |
||||
|
font-weight: bold; |
||||
|
color: #1a1a1a; |
||||
|
line-height: 1.5; |
||||
|
margin-bottom: 0.25rem; |
||||
|
} |
||||
|
|
||||
|
.detail-meta { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 0.4rem; |
||||
|
|
||||
|
.detail-source { |
||||
|
font-size: 0.3rem; |
||||
|
color: #2d94fa; |
||||
|
margin-right: 0.3rem; |
||||
|
} |
||||
|
|
||||
|
.detail-time { |
||||
|
font-size: 0.3rem; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-images { |
||||
|
margin-bottom: 0.4rem; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
border-radius: 0.2rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-body { |
||||
|
font-size: 0.37rem; |
||||
|
color: #333; |
||||
|
line-height: 1.8; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,289 @@ |
|||||
|
<template> |
||||
|
<div class="evaluate-list-page"> |
||||
|
<!-- 顶部导航栏 --> |
||||
|
<van-nav-bar title="执法评价" left-text="返回" left-arrow @click-left="onClickLeft"> |
||||
|
</van-nav-bar> |
||||
|
|
||||
|
<!-- 列表区域 --> |
||||
|
<div class="list-container"> |
||||
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
||||
|
<van-list v-model:loading="loading" :finished="finished" finished-text="已全部加载" @load="onLoad" |
||||
|
:offset="50"> |
||||
|
<van-empty v-if="finished && list.length === 0" description="暂无执法评价" /> |
||||
|
|
||||
|
<div class="evaluate-card" v-for="item in list" :key="item.id" @click="toDetail(item)"> |
||||
|
<!-- 执法时间 --> |
||||
|
<div class="card-time"> |
||||
|
执法时间：{{ item.enforcementTime }} |
||||
|
</div> |
||||
|
|
||||
|
<!-- 标题 --> |
||||
|
<div class="card-title">{{ item.title || item.checkItemText || '执法检查' }}</div> |
||||
|
|
||||
|
<!-- 内容 --> |
||||
|
<div class="card-content"> |
||||
|
<div class="info-row"> |
||||
|
<span class="label">执法单位</span> |
||||
|
<span class="value">{{ item.lawEnforcement || item.bureauDeptName }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span class="label">执法人员：</span> |
||||
|
<div> |
||||
|
<div v-for="(enforcer, index) in formatEnforcer(item)" :key="index" |
||||
|
class="enforcer-item"> |
||||
|
{{ enforcer }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span class="label">企业名称</span> |
||||
|
<span class="value">{{ item.enterpriseName }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 底部状态 --> |
||||
|
<div class="card-footer"> |
||||
|
<span class="status">状态：<span :class="getStatusClass(item.hasEvaluate)">{{ |
||||
|
getStatusText(item.hasEvaluate) }}</span></span> |
||||
|
<span class="evaluate-time">评价时间：{{ item.evaluateTime }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</van-list> |
||||
|
</van-pull-refresh> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="enforcementEvaluateList"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { showToast } from 'vant'; |
||||
|
import 'vant/es/toast/style'; |
||||
|
import { queryEvaluateList } from '@/api/enforcement/index'; |
||||
|
import { formatEnforcer } from '@/util/util'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
|
||||
|
// ========== 列表状态 ========== |
||||
|
const list = ref([]); |
||||
|
const loading = ref(false); |
||||
|
const finished = ref(false); |
||||
|
const refreshing = ref(false); |
||||
|
const pageNum = ref(1); |
||||
|
const pageSize = ref(10); |
||||
|
|
||||
|
// ========== 获取状态文本 ========== |
||||
|
const getStatusText = (status) => { |
||||
|
const statusMap = { |
||||
|
'0': '未评价', |
||||
|
'1': '已评价', |
||||
|
'2': '已退回', |
||||
|
}; |
||||
|
return statusMap[status] || '未知'; |
||||
|
}; |
||||
|
|
||||
|
// ========== 获取状态样式类 ========== |
||||
|
const getStatusClass = (status) => { |
||||
|
const classMap = { |
||||
|
'0': 'status-pending', |
||||
|
'1': 'status-evaluated', |
||||
|
'2': 'status-rejected', |
||||
|
}; |
||||
|
return classMap[status] || 'status-default'; |
||||
|
}; |
||||
|
|
||||
|
// ========== 加载数据 ========== |
||||
|
const fetchList = () => { |
||||
|
const params = { |
||||
|
pageNum: pageNum.value, |
||||
|
pageSize: pageSize.value, |
||||
|
hasEvaluate: 1, |
||||
|
}; |
||||
|
queryEvaluateList(params, (res) => { |
||||
|
if (res.code === 200) { |
||||
|
const rows = res.rows || res.data?.rows || res.data?.list || res.data || []; |
||||
|
const total = res.total ?? res.data?.total ?? 0; |
||||
|
|
||||
|
if (refreshing.value) { |
||||
|
list.value = Array.isArray(rows) ? rows : []; |
||||
|
refreshing.value = false; |
||||
|
} else { |
||||
|
list.value = [...list.value, ...(Array.isArray(rows) ? rows : [])]; |
||||
|
} |
||||
|
|
||||
|
if (!Array.isArray(rows) || rows.length === 0 || list.value.length >= total) { |
||||
|
finished.value = true; |
||||
|
} else { |
||||
|
pageNum.value++; |
||||
|
} |
||||
|
loading.value = false; |
||||
|
} else { |
||||
|
finished.value = true; |
||||
|
loading.value = false; |
||||
|
refreshing.value = false; |
||||
|
showToast(res.msg || '加载失败'); |
||||
|
} |
||||
|
}, () => { |
||||
|
finished.value = true; |
||||
|
loading.value = false; |
||||
|
refreshing.value = false; |
||||
|
showToast('网络请求失败'); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// ========== 触底加载 ========== |
||||
|
const onLoad = () => { |
||||
|
if (refreshing.value) return; |
||||
|
fetchList(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 下拉刷新 ========== |
||||
|
const onRefresh = () => { |
||||
|
pageNum.value = 1; |
||||
|
list.value = []; |
||||
|
finished.value = false; |
||||
|
loading.value = true; |
||||
|
fetchList(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 跳转详情页面 ========== |
||||
|
const toDetail = (item) => { |
||||
|
router.push({ |
||||
|
path: '/enforcement/enforcementEvaluateDetail', |
||||
|
query: { id: item.id, hasEvaluate: 1, from: 'evaluateList' } |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// ========== 返回上一页 ========== |
||||
|
const onClickLeft = () => { |
||||
|
router.back(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 组件挂载时加载数据 ========== |
||||
|
onMounted(() => { |
||||
|
fetchList(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.evaluate-list-page { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
/* ===== 导航栏样式 ===== */ |
||||
|
:deep(.van-nav-bar) { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar__title) { |
||||
|
font-size: 17px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar__text) { |
||||
|
font-size: 15px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar .van-icon) { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* ===== 列表容器 ===== */ |
||||
|
.list-container { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 15px; |
||||
|
} |
||||
|
|
||||
|
/* ===== 卡片样式 ===== */ |
||||
|
.evaluate-card { |
||||
|
background: #fff; |
||||
|
border-radius: 10px; |
||||
|
padding: 15px; |
||||
|
margin-bottom: 15px; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
.card-time { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.card-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 15px; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.card-content { |
||||
|
border-top: 1px dashed #e5e5e5; |
||||
|
padding-top: 15px; |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
margin-bottom: 10px; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
.label { |
||||
|
color: #999; |
||||
|
min-width: 80px; |
||||
|
} |
||||
|
|
||||
|
.enforcer-item { |
||||
|
padding: 4px 0px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
flex: 1; |
||||
|
color: #333; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-top: 15px; |
||||
|
padding-top: 15px; |
||||
|
border-top: 1px dashed #e5e5e5; |
||||
|
font-size: 13px; |
||||
|
color: #666; |
||||
|
|
||||
|
.status { |
||||
|
.status-pending { |
||||
|
color: #faad14; |
||||
|
} |
||||
|
|
||||
|
.status-evaluated { |
||||
|
color: #52c41a; |
||||
|
} |
||||
|
|
||||
|
.status-rejected { |
||||
|
color: #f5222d; |
||||
|
} |
||||
|
|
||||
|
.status-default { |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.evaluate-time { |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ===== 空状态样式 ===== */ |
||||
|
:deep(.van-empty) { |
||||
|
padding: 60px 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,297 @@ |
|||||
|
<template> |
||||
|
<div class="plan-notice-page"> |
||||
|
<!-- 顶部导航栏 --> |
||||
|
<van-nav-bar title="计划通知" left-text="返回" left-arrow @click-left="onClickLeft"> |
||||
|
</van-nav-bar> |
||||
|
|
||||
|
<!-- 搜索栏 --> |
||||
|
<div class="search-bar"> |
||||
|
<van-search v-model="searchText" show-action placeholder="请输入计划名称/单位" clearable clear-icon="clear" |
||||
|
clear-trigger="always" @clear="onClear" @search="onSearch"> |
||||
|
<template #action> |
||||
|
<div @click="onSearch">搜索</div> |
||||
|
</template> |
||||
|
</van-search> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 列表区域 --> |
||||
|
<div class="list-container"> |
||||
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
||||
|
<van-list v-model:loading="loading" :finished="finished" finished-text="已全部加载" @load="onLoad" |
||||
|
:offset="50"> |
||||
|
<van-empty v-if="finished && list.length === 0" description="暂无计划通知" /> |
||||
|
|
||||
|
<div class="plan-card" v-for="item in list" :key="item.id"> |
||||
|
<div class="card-header"> |
||||
|
<van-icon name="bell" class="bell-icon" /> |
||||
|
<span class="plan-title">{{ item.checkItemText || item.checkItem }}</span> |
||||
|
</div> |
||||
|
<div class="card-content"> |
||||
|
<div class="info-row"> |
||||
|
<span class="label">执法单位：</span> |
||||
|
<span class="value">{{ item.bureauDeptName || item.lawEnforcement }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span class="label">执法区域：</span> |
||||
|
<span class="value">{{ item.unitCheck }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span class="label">发布时间：</span> |
||||
|
<span class="value">{{ item.checkTime }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span class="label">附件：</span> |
||||
|
<span class="value"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</van-list> |
||||
|
</van-pull-refresh> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="planNoticeList"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { showToast } from 'vant'; |
||||
|
import 'vant/es/toast/style'; |
||||
|
import { getLawNoticeList } from '@/api/enforcement/index'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
|
||||
|
// ========== 列表状态 ========== |
||||
|
const list = ref([]); |
||||
|
const loading = ref(false); |
||||
|
const finished = ref(false); |
||||
|
const refreshing = ref(false); |
||||
|
const searchText = ref(''); |
||||
|
const pageNum = ref(1); |
||||
|
const pageSize = ref(10); |
||||
|
|
||||
|
// ========== 加载数据 ========== |
||||
|
const fetchList = () => { |
||||
|
const params = { |
||||
|
pageNum: pageNum.value, |
||||
|
pageSize: pageSize.value, |
||||
|
planName: searchText.value || undefined, |
||||
|
}; |
||||
|
getLawNoticeList(params, (res) => { |
||||
|
if (res.code === 200) { |
||||
|
const rows = res.rows || []; |
||||
|
const total = res.total; |
||||
|
|
||||
|
if (refreshing.value) { |
||||
|
list.value = Array.isArray(rows) ? rows : []; |
||||
|
refreshing.value = false; |
||||
|
} else { |
||||
|
list.value = [...list.value, ...(Array.isArray(rows) ? rows : [])]; |
||||
|
} |
||||
|
|
||||
|
if (!Array.isArray(rows) || rows.length === 0 || list.value.length >= total) { |
||||
|
finished.value = true; |
||||
|
} else { |
||||
|
pageNum.value++; |
||||
|
} |
||||
|
loading.value = false; |
||||
|
} else { |
||||
|
finished.value = true; |
||||
|
loading.value = false; |
||||
|
refreshing.value = false; |
||||
|
showToast(res.msg || '加载失败'); |
||||
|
} |
||||
|
}, () => { |
||||
|
finished.value = true; |
||||
|
loading.value = false; |
||||
|
refreshing.value = false; |
||||
|
showToast('网络请求失败'); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// ========== 触底加载 ========== |
||||
|
const onLoad = () => { |
||||
|
if (refreshing.value) return; |
||||
|
fetchList(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 下拉刷新 ========== |
||||
|
const onRefresh = () => { |
||||
|
pageNum.value = 1; |
||||
|
list.value = []; |
||||
|
finished.value = false; |
||||
|
loading.value = true; |
||||
|
fetchList(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 清除搜索 ========== |
||||
|
const onClear = () => { |
||||
|
searchText.value = ''; |
||||
|
onSearch(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 搜索 ========== |
||||
|
const onSearch = () => { |
||||
|
pageNum.value = 1; |
||||
|
list.value = []; |
||||
|
finished.value = false; |
||||
|
loading.value = true; |
||||
|
fetchList(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 返回上一页 ========== |
||||
|
const onClickLeft = () => { |
||||
|
router.back(); |
||||
|
}; |
||||
|
|
||||
|
// ========== 组件挂载时加载数据 ========== |
||||
|
onMounted(() => { |
||||
|
// fetchList(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.plan-notice-page { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #ebf3fb; |
||||
|
} |
||||
|
|
||||
|
/* ===== 导航栏样式 ===== */ |
||||
|
:deep(.van-nav-bar) { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar__title) { |
||||
|
font-size: 17px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar__text) { |
||||
|
font-size: 15px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar .van-icon) { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* ===== 搜索栏样式 ===== */ |
||||
|
:deep(.van-search) { |
||||
|
background: #fff; |
||||
|
padding: 12px 16px; |
||||
|
margin-bottom: -1px; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-search__content) { |
||||
|
height: 0.9rem; |
||||
|
border: 1px solid #ececec; |
||||
|
border-radius: 0.15rem 0 0 0.15rem; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-search__action) { |
||||
|
margin: 0 3% 0 0; |
||||
|
width: 10%; |
||||
|
height: 0.9rem; |
||||
|
background: #1367fe; |
||||
|
border: 1px solid #1367fe; |
||||
|
border-radius: 0 0.15rem 0.15rem 0; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 0.9rem; |
||||
|
} |
||||
|
|
||||
|
/* ===== 列表容器 ===== */ |
||||
|
.list-container { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
position: relative; |
||||
|
padding-bottom: 60px; |
||||
|
margin: 10px; |
||||
|
} |
||||
|
|
||||
|
/* ===== 卡片样式 ===== */ |
||||
|
.plan-card { |
||||
|
background: #fff; |
||||
|
border-radius: 10px; |
||||
|
padding: 15px; |
||||
|
margin-bottom: 15px; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.bell-icon { |
||||
|
color: #2d94fa; |
||||
|
font-size: 18px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.plan-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.card-content { |
||||
|
padding-left: 28px; |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
margin-bottom: 8px; |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
line-height: 1.6; |
||||
|
|
||||
|
.label { |
||||
|
color: #000; |
||||
|
min-width: 80px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
flex: 1; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.attachments { |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
.attachment-item { |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
line-height: 1.6; |
||||
|
|
||||
|
.label { |
||||
|
color: #999; |
||||
|
min-width: 80px; |
||||
|
} |
||||
|
|
||||
|
.attachment-link { |
||||
|
flex: 1; |
||||
|
color: #2d94fa; |
||||
|
text-decoration: underline; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.no-attachment { |
||||
|
flex: 1; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ===== 空状态样式 ===== */ |
||||
|
:deep(.van-empty) { |
||||
|
padding: 60px 0; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue