Skip to content

R
risk-monitor
提交 070b639a authored 作者: 张伊明's avatar 张伊明
浏览文件
操作

fix 完善原文组件

上级 c49eaec3
隐藏空白字符变更
内嵌 并排
正在显示 包含 152 行增加 和 140 行删除
src/components/base/DecreeOriginal/index.vue
浏览文件 @ 070b639a
<template>
<div class="layout-container">
<div class="layout-main">
<div class="header-main">
<div class="layout-main-header">
<div class="icon">
<img :src="summaryInfo?.imageUrl" alt="" />
</div>
<div class="info">
<div class="info-box1 one-line-ellipsis">{{ summaryInfo?.name || "--" }}</div>
<div class="info-box2">
<div class="info-box2-item">{{ summaryInfo?.postDate || "--" }}</div>
|
<div class="info-box2-item">{{ summaryInfo?.orgName || "--" }}</div>
|
<div class="info-box2-item one-line-ellipsis">{{ summaryInfo?.ename || "--" }}</div>
</div>
</div>
<div class="layout-main-header-right-box">
<div class="right-box-top">
<div class="time">{{ summaryInfo?.postDate || "--" }}</div>
<div class="name">{{ summaryInfo?.orgName || "--" }}</div>
</div>
</div>
</div>
</div>
<div class="layout-main-center">
<div class="report-header">
<div class="report-title">政令原文</div>
......@@ -96,24 +72,7 @@ import { debounce } from "lodash";
// 该组件为公共展示组件：网络请求/下载等业务由父组件处理；查找、高亮、显示切换等通用交互在组件内部封装。
// 图标资源固定使用组件内置文件，保证组件资源自包含。
/**
* 父组件需传入的数据结构说明
*
* @prop {Object} summaryInfo - 顶部摘要信息（用于展示 + 下载）
* @prop {string} summaryInfo.imageUrl - 左上角图标/封面 URL
* @prop {string} summaryInfo.name - 标题
* @prop {string} summaryInfo.postDate - 发布时间（展示在头部与右侧信息）
* @prop {string} summaryInfo.orgName - 发布机构（展示在头部与右侧信息）
* @prop {string} summaryInfo.ename - 英文名/别名（头部展示）
* @prop {string} [summaryInfo.url] - 原文 PDF 下载地址（父组件下载逻辑使用；组件点击“下载”仅触发事件）
*
* @prop {Array<Object>} reportData - 正文分段数组（用于原文渲染/查找高亮）
* @prop {number|string} reportData[].num - 段落序号/唯一标识（用于列表 key）
* @prop {string} reportData[].content - 中文段落 HTML 字符串（组件内使用 v-html 渲染）
* @prop {string} reportData[].contentEn - 英文段落 HTML 字符串（组件内使用 v-html 渲染；关闭“原文显示”时不展示）
*/
const props = defineProps({
summaryInfo: { type: Object, default: () => ({}) },
reportData: { type: Array, default: () => [] },
});
......@@ -259,100 +218,6 @@ watch(isTranslate, () => {
display: flex;
flex-direction: column;
align-items: center;
.header-main {
padding: 17px 0;
width: 100%;
border-bottom: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.layout-main-header {
width: 1600px;
display: flex;
align-items: center;
margin: 0 auto;
.icon {
width: 64px;
height: 40px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.info {
margin-left: 10px;
margin-right: 40px;
width: 20px;
flex: auto;
.info-box1 {
width: 100%;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-top: 5px;
}
.info-box2 {
margin-top: 5px;
height: 22px;
line-height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
display: flex;
.info-box2-item {
white-space: nowrap;
padding: 0 10px;
}
.info-box2-item:first-child {
padding-left: 0px;
}
}
}
.layout-main-header-right-box {
.right-box-top {
white-space: nowrap;
.time {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
.name {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
}
}
}
.layout-main-center {
width: 1600px;
background-color: white;
......
src/views/decree/decreeOriginal/index.vue
浏览文件 @ 070b639a
<template>
<BaseDecreeOriginal
:summary-info="summaryInfo"
:report-data="reportData"
@download="handleDownload"
/>
<div class="layout-container">
<div class="layout-main">
<div class="header-main">
<div class="layout-main-header">
<div class="icon">
<img :src="summaryInfo.imageUrl" alt="" />
</div>
<div class="info">
<div class="info-box1 one-line-ellipsis">{{ summaryInfo.name || "--" }}</div>
<div class="info-box2">
<div class="info-box2-item">{{ summaryInfo.postDate || "--" }}</div>
|
<div class="info-box2-item">{{ summaryInfo.orgName || "--" }}</div>
|
<div class="info-box2-item one-line-ellipsis">{{ summaryInfo.ename || "--" }}</div>
</div>
</div>
<div class="layout-main-header-right-box">
<div class="right-box-top">
<div class="time">{{ summaryInfo.postDate || "--" }}</div>
<div class="name">{{ summaryInfo.orgName || "--" }}</div>
</div>
</div>
</div>
</div>
<div class="layout-main-center">
<BaseDecreeOriginal :report-data="reportData" @download="handleDownload" />
</div>
</div>
</div>
</template>
<script setup>
......@@ -99,4 +125,124 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.layout-container {
width: 100%;
height: 100%;
background-color: #f7f8f9;
.layout-main {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.header-main {
padding: 17px 0;
width: 100%;
border-bottom: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.layout-main-header {
width: 1600px;
display: flex;
align-items: center;
margin: 0 auto;
.icon {
width: 64px;
height: 40px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.info {
margin-left: 10px;
margin-right: 40px;
width: 20px;
flex: auto;
.info-box1 {
width: 100%;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-top: 5px;
}
.info-box2 {
margin-top: 5px;
height: 22px;
line-height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
display: flex;
.info-box2-item {
white-space: nowrap;
padding: 0 10px;
}
.info-box2-item:first-child {
padding-left: 0px;
}
}
}
.layout-main-header-right-box {
.right-box-top {
white-space: nowrap;
.time {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
.name {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
}
}
}
.layout-main-center {
width: 1600px;
background-color: white;
padding: 0 60px;
height: 20px;
flex: auto;
display: flex;
flex-direction: column;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论