提交 29c7a1b2 authored 作者: 王浩然's avatar 王浩然
......@@ -64,6 +64,13 @@ export function getDecreeSummary(params) {
/**
* @param {id}
*/
// export function getDecreeReport(params) {
// return request({
// method: 'GET',
// url: `/api/administrativeOrderInfo/contentUrl/${params.id}`,
// })
// }
export function getDecreeReport(params) {
return request({
method: 'GET',
......
......@@ -33,14 +33,15 @@
{{ "政令原文" }}
</div>
<div class="report-main">
<div class="left">
<div v-if="!reportUrl" class="noContent">{{ "中文原文暂无数据" }}</div>
<iframe v-else :src="reportUrl" style="border: none" width="100%" height="100%"> </iframe>
</div>
<div class="right">
<div v-if="!reportUrlEn" class="noContent">{{ "英文原文暂无数据" }}</div>
<iframe v-else :src="reportUrlEn" style="border: none" width="100%" height="100%"> </iframe>
</div>
<div v-if="!reportData.length" class="noContent">{{ "暂无数据" }}</div>
<template v-else>
<div v-for="(item, index) in reportData" :key="index" class="content-row">
<!-- 左侧:英文 -->
<div class="content-en">{{ item.contentEn }}</div>
<!-- 右侧:中文 -->
<div class="content-cn">{{ item.content }}</div>
</div>
</template>
</div>
</div>
</div>
......@@ -50,14 +51,13 @@
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getDecreeSummary } from "@/api/decree/introduction";
import { getDecreeReport } from "@/api/decree/introduction";
const route = useRoute();
const reportUrl = ref("");
const reportUrlEn = ref("");
// 修改为数组存储分段数据
const reportData = ref([]);
const summaryInfo = ref({});
......@@ -72,10 +72,10 @@ const handleGetSummary = async () => {
if (res.code === 200 && res.data) {
summaryInfo.value = res.data;
}
} catch (error) {}
} catch (error) { }
};
// 获取报告原文
// 获取报告原文 - 修改为获取分段数组
const handleGetReport = async () => {
const params = {
id: route.query.id
......@@ -85,10 +85,10 @@ const handleGetReport = async () => {
const res = await getDecreeReport(params);
console.log("报告原文", res);
if (res.code === 200 && res.data) {
reportUrl.value = res.data.content;
reportUrlEn.value = res.data.contentEn;
// 假设后端返回的是数组格式,如果返回的是对象包含数组,请改为 res.data.list
reportData.value = res.data || [];
}
} catch (error) {}
} catch (error) { }
};
onMounted(() => {
......@@ -106,6 +106,7 @@ onMounted(() => {
.layout-main {
width: 100%;
.layout-main-header {
height: 120px;
background: rgba(255, 255, 255, 1);
......@@ -119,26 +120,32 @@ onMounted(() => {
border-top: 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-left-box {
width: 1100px;
margin-left: 160px;
margin-top: 13px;
.left-box-top {
height: 64px;
display: flex;
.icon {
width: 122px;
height: 64px;
border-radius: 4px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.info {
width: 700px;
margin-left: 9px;
.info-box1 {
width: 700px;
color: rgba(59, 65, 75, 1);
......@@ -153,6 +160,7 @@ onMounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.info-box2 {
margin-top: 5px;
height: 22px;
......@@ -166,21 +174,25 @@ onMounted(() => {
text-align: left;
display: flex;
margin-left: -10px;
.info-box2-item {
padding: 0 10px;
}
.item1 {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item2 {
width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item3 {
width: 420px;
overflow: hidden;
......@@ -190,25 +202,30 @@ onMounted(() => {
}
}
}
.left-box-bottom {
display: flex;
height: 40px;
margin-top: 21px;
.left-box-bottom-item {
display: flex;
margin-right: 32px;
margin-top: 3px;
height: 35px;
cursor: pointer;
.icon {
margin-top: 4px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -220,20 +237,24 @@ onMounted(() => {
text-align: left;
margin-left: 3px;
}
.nameActive {
color: var(--color-main-active);
font-weight: 700;
}
}
.leftBoxBottomItemActive {
border-bottom: 3px solid var(--color-main-active);
}
}
}
.layout-main-header-right-box {
width: 300px;
margin-right: 150px;
margin-top: 19px;
.right-box-top {
.time {
height: 24px;
......@@ -246,6 +267,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: right;
}
.name {
height: 24px;
line-height: 24px;
......@@ -258,12 +280,14 @@ onMounted(() => {
text-align: right;
}
}
.right-box-bottom {
margin-top: 24px;
text-align: right;
display: flex;
justify-content: flex-end;
gap: 8px;
.btn {
width: 120px;
height: 36px;
......@@ -276,14 +300,17 @@ onMounted(() => {
gap: 8px;
align-items: center;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
width: 64px;
height: 24px;
......@@ -297,6 +324,7 @@ onMounted(() => {
text-align: left;
}
}
.btn-active {
width: 120px;
height: 36px;
......@@ -307,14 +335,17 @@ onMounted(() => {
align-items: center;
gap: 8px;
cursor: pointer;
.icon-active {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text-active {
width: 64px;
height: 24px;
......@@ -331,16 +362,18 @@ onMounted(() => {
}
}
}
.layout-main-center {
.report-box {
margin: 0 auto;
width: 1600px;
height: 926px;
background: rgba(248, 249, 250, 1);
.report-header {
height: 80px;
line-height: 80px;
padding-left: 20px;
padding-left: 69px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
......@@ -349,39 +382,68 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.report-main {
width: 1600px;
margin: 0 auto;
margin-top: 24px;
background: #fff;
box-sizing: border-box;
padding: 0 69px;
display: flex;
padding: 24px 69px;
height: calc(100% - 100px);
justify-content: space-between;
.left {
width: 800px;
.noContent {
height: 100px;
line-height: 100px;
text-align: center;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 20px;
font-weight: 400;
}
overflow-y: auto; // 改为单一滚动容器,天然同步
// 滚动条样式
&::-webkit-scrollbar {
display: none;
}
.right {
width: 800px;
.noContent {
height: 100px;
line-height: 100px;
text-align: center;
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
.noContent {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 20px;
font-weight: 400;
}
.content-row {
display: flex;
width: 100%;
min-height: 100px;
// border-bottom: 1px solid rgba(234, 236, 238, 1);
align-items: stretch; // 默认stretch,确保左右等高,头部对齐
&:last-child {
border-bottom: none;
}
.content-en,
.content-cn {
width: 800px;
padding: 24px 30px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.8;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 20px;
font-weight: 400;
text-align: justify;
white-space: pre-wrap; // 保留换行格式
}
.content-en {
// border-right: 1px solid rgba(234, 236, 238, 1); // 中间分隔线
}
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论