Skip to content

R
risk-monitor
提交 58e246df authored 作者: 张烨's avatar 张烨
浏览文件
操作

style:科技政令详情页布局调整

上级 88a48798
显示空白字符变更
内嵌 并排
正在显示 包含 409 行增加 和 157 行删除
src/views/decree/decreeHome/index.vue
浏览文件 @ 58e246df
......@@ -254,7 +254,7 @@
<template #reference>
<div class="info-content">{{ item.content ? item.content : "暂无数据" }}</div>
</template>
</el-popover> -->
</el-popover> -->
</div>
</div>
</div>
......@@ -280,7 +280,7 @@
</el-select>
</div>
<div style="flex: auto;"></div>
<el-checkbox v-model="isChina" @change="handleChina">只看涉华政令</el-checkbox>
<el-checkbox v-model="isChina">只看涉华政令</el-checkbox>
<div class="select-box">
<div class="paixu-btn" @click="handleSwithSort">
<div class="icon1">
......@@ -297,7 +297,7 @@
</div>
<div class="home-main-footer-main">
<div class="left">
<!-- <div class="select-box">
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "政令类型" }}</div>
......@@ -311,7 +311,7 @@
</el-checkbox>
</div>
</div>
</div> -->
</div>
<!-- <div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
......@@ -381,16 +381,7 @@
<div class="main-item-center">
<div class="center-header">
<div class="title">{{ item.title }}</div>
<!-- <div
class="type-box"
:class="{
type1: item.status === 1,
type2: item.status === 2,
type3: item.status === 3
}"
>
{{ item.type }}
</div> -->
<!-- <div class="type-box type1">{{ item.type }}</div> -->
</div>
<div class="desc">{{ item.desc }}</div>
<div class="tag-box">
......@@ -1184,7 +1175,7 @@ const handleGetDecreeOrderList = async () => {
researchTypeIds: p1, // 全选时不传（为空）
sortFun: isSort.value,
isCN: isChina.value ? 1 : 0,
proposeName: [searchType.value.trim()],
proposeName: searchType.value.trim(),
years: p2, // 全选时不传（为空）
typeIds: checkedDecreeType.value.toString()
};
......@@ -3120,7 +3111,7 @@ onMounted(async () => {
}
.search-box {
width: 20%;
width: 360px;
}
.select-box {
......@@ -3191,10 +3182,9 @@ onMounted(async () => {
gap: 16px;
.left {
width: 20%;
width: 360px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-radius: 10px;
.select-box {
......@@ -3279,9 +3269,11 @@ onMounted(async () => {
min-height: 790px;
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
.main-item {
display: flex;
width: 100%;
min-height: 100px;
// height: 136px;
// background: orange;
......@@ -3335,13 +3327,18 @@ onMounted(async () => {
}
.main-item-center {
margin-left: 21px;
margin-bottom: 16px;
width: 1086px;
padding-left: 21px;
padding-bottom: 16px;
box-sizing: border-box;
width: 20px;
flex: auto;
.center-header {
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
.title {
height: 26px;
......@@ -3351,10 +3348,14 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
flex: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.type-box {
flex: none;
height: 28px;
line-height: 28px;
padding: 0 8px;
......@@ -3365,21 +3366,26 @@ onMounted(async () => {
letter-spacing: 0px;
border-radius: 4px;
}
.type1 {
color: rgba(22, 119, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(232, 189, 11, 1);
background: rgba(232, 189, 11, 0.1);
}
.type2 {
color: rgba(19, 168, 168, 1);
background: rgba(230, 255, 251, 1);
}
.type3 {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
color: rgba(255, 149, 77, 1);
background: rgba(255, 149, 77, 0.1);
}
// .type1 {
// color: rgba(22, 119, 255, 1);
// background: rgba(230, 244, 255, 1);
// }
// .type2 {
// color: rgba(19, 168, 168, 1);
// background: rgba(230, 255, 251, 1);
// }
// .type3 {
// color: rgba(250, 140, 22, 1);
// background: rgba(255, 247, 230, 1);
// }
}
.desc {
......
src/views/decree/decreeLayout/index.vue
浏览文件 @ 58e246df
......@@ -60,6 +60,12 @@
</div>
<div class="text">{{ "政令原文" }}</div>
</div>
<div class="btn">
<div class="icon">
<img src="./assets/icons/link-icon.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
</div>
<div class="btn-active" @click="handleAnalysisClick">
<div class="icon-active">
<img src="./assets/icons/edit-icon.png" alt="" />
......@@ -509,7 +515,7 @@ onMounted(() => {
}
}
.layout-main-header-right-box {
width: 300px;
width: 450px;
margin-top: 19px;
.right-box-top {
.time {
......
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ 58e246df
......@@ -53,20 +53,19 @@
</div>
</template>
<div class="box1-main">
<el-empty v-if="backgroundList.length === 0" style="padding-top: 60px;" description="暂无数据"
:image-size="100" />
<el-empty v-if="backgroundList.length === 0" style="padding-top: 60px;" description="暂无数据" :image-size="100" />
<div class="box1-item" v-for="(item, index) in backgroundList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.content }}</div>
<!-- <div class="open">
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div> -->
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ `共 ${backgroundListNum} 项` }}</div>
<div class="box1-footer-right">
<el-pagination :page-size="5" background layout="prev, pager, next" :total="backgroundListNum" />
<el-pagination :page-size="10" @current-change="handleCurrentChange" :current-page="currentPage" background layout="prev, pager, next" :total="backgroundListNum" />
</div>
</div>
</AnalysisBox>
......@@ -103,7 +102,7 @@
<div class="item-right">{{ item.time }}</div>
</div>
</div> -->
<AnalysisBox title="相关事件" :showAllBtn="false">
<!-- <AnalysisBox title="相关事件" :showAllBtn="false">
<div class="box2-main">
<el-empty v-if="!relatedEvents.length" description="暂无数据" :image-size="100" />
<div class="box2-item" v-for="(item, index) in relatedEvents" :key="index">
......@@ -123,12 +122,17 @@
<div class="item-right">{{ item.time }}</div>
</div>
</div>
</AnalysisBox> -->
<AnalysisBox title="法律依据" :showAllBtn="false">
<div class="box2-main">
<el-empty description="暂无数据" :image-size="100" />
</div>
</AnalysisBox>
</div>
</div>
<div class="right">
<div class="box3">
<AnalysisBox title="法律依据" :showAllBtn="false">
<!-- <AnalysisBox title="法律依据" :showAllBtn="false">
<div class="box3-main">
<el-empty v-if="!laws.length" style="padding-top: 200px;" description="暂无数据" :image-size="100" />
<div class="box3-item" v-for="(item, index) in laws" :key="index" @click="handleToBillDetail(item)">
......@@ -139,6 +143,25 @@
<div class="item-content">{{ item.content }}</div>
</div>
</div>
</AnalysisBox> -->
<AnalysisBox title="前序政令" :showAllBtn="false">
<el-empty v-if="!eventList.length" style="padding-top: 200px;" description="暂无数据" :image-size="100" />
<div class="box3-bottom-main">
<el-timeline>
<el-timeline-item v-for="(item, index) in eventList" :key="index">
<div>
<div class="time-line-top">
<div class="time-line-date">{{ item.time }}</div>
<div class="time-line-icon">
<img style="width: 100%; height: 100%;" :src="DefaultIcon1" alt="">
</div>
<div class="time-line-name">{{ "总统行政办公室" }}</div>
</div>
<div class="timeline-content">{{ item.title }}</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
</AnalysisBox>
</div>
</div>
......@@ -156,6 +179,7 @@ import Img2 from "./assets/images/box2-img2.png";
import Img3 from "./assets/images/box2-img3.png";
import Img4 from "./assets/images/box2-img4.png";
import Img5 from "./assets/images/box2-img5.png";
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import { reduce } from "lodash";
import Index from "../index.vue";
......@@ -172,7 +196,7 @@ const box1BtnList = ref(["涉华背景", "全部背景"]);
const box1ActiveBtn = ref("涉华背景");
const handleClickBox1Btn = btn => {
box1ActiveBtn.value = btn;
handleGetBackground();
handleCurrentChange(1)
};
const backgroundListNum = ref(0);
const backgroundList = ref([
......@@ -183,11 +207,16 @@ const backgroundList = ref([
// content: "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用"
// },
]);
const currentPage = ref(1);
const handleCurrentChange = page => {
currentPage.value = page;
handleGetBackground();
};
const handleGetBackground = async () => {
const params = {
cRelated: box1ActiveBtn.value === "涉华背景" ? true : false,
currentPage: 0,
pageSize: 999999,
currentPage: currentPage.value - 1,
pageSize: 10,
id: decreeId.value
};
try {
......@@ -235,6 +264,23 @@ const handleGetRelateEvents = async () => {
} catch (error) { }
};
// 前序政令
// 机构动态
const eventList = ref([
{
time: "2025-07-31",
title: "美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
},
{
time: "2025-07-25",
title: "美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
},
{
time: "2025-07-21",
title: "美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
}
]);
// 法律依据
const laws = ref([]);
const handleGetLaws = async () => {
......@@ -276,7 +322,7 @@ const handleToBillDetail = item => {
onMounted(() => {
handleGetBackground();
handleGetRelateEvents();
// handleGetRelateEvents();
handleGetLaws();
});
</script>
......@@ -396,6 +442,7 @@ onMounted(() => {
height: 414px;
.box1-main {
margin-top: 16px;
margin-left: 22px;
width: 1034px;
height: 290px;
......@@ -405,10 +452,10 @@ onMounted(() => {
.box1-item {
width: 1015px;
min-height: 48px;
margin-bottom: 8px;
// margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
......@@ -437,7 +484,7 @@ onMounted(() => {
.open {
width: 16px;
height: 16px;
margin-top: 16px;
margin-left: 16px;
img {
width: 100%;
......@@ -445,6 +492,10 @@ onMounted(() => {
}
}
}
.box1-item:nth-child(odd) {
background-color: rgba(247, 248, 249, 1);
}
}
.box1-footer {
......@@ -555,84 +606,153 @@ onMounted(() => {
width: 520px;
height: 845px;
.box3-main {
margin-top: 9px;
width: 464px;
height: 720px;
// overflow: hidden;
.box3-bottom-main {
width: 100%;
height: 100%;
padding-right: 30px;
margin-top: 14px;
overflow-y: auto;
padding-left: 20px;
.box3-item {
margin-bottom: 20px;
position: relative;
cursor: pointer;
.time-line-top {
display: flex;
align-items: center;
margin-bottom: 10px;
// border-bottom: 1px solid rgba(234, 236, 238, 1);
.id {
width: 24px;
height: 24px;
position: absolute;
left: 18px;
top: 1px;
z-index: 99;
text-align: center;
line-height: 24px;
margin-top: 5px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
.time-line-date {
color: rgba(5, 95, 194, 1);
flex: auto;
font-weight: bold;
font-size: 16px;
}
.item-header {
width: 384px;
height: 35px;
display: flex;
justify-content: space-between;
margin-left: 60px;
.time-line-icon {
width: 20px;
height: 20px;
margin-right: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 50%;
font-size: 0px;
}
.name {
max-width: 384px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 24px;
margin-top: 5px;
.time-line-name {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
font-size: 15px;
}
}
.info {
text-align: right;
margin-left: 10px;
height: 24px;
margin-top: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
:deep(.el-timeline) {
padding: 8px 0px 0px 25px !important;
}
:deep(.el-timeline-item__node) {
border: 4px solid var(--color-main-active) !important;
background-color: #fff;
}
:deep(.el-timeline-item) {
padding-bottom: 12px !important;
}
.item-content {
margin-left: 66px;
border-top: 1px solid rgba(234, 236, 238, 1);
padding-top: 3px;
color: rgba(95, 101, 108, 1);
:deep(.el-timeline-item__timestamp) {
color: var(--color-main-active) !important;
font-family: Microsoft YaHei !important;
font-size: 16px !important;
font-weight: 600 !important;
padding-top: 0px !important;
}
.timeline-content {
color: var(--text-primary-65-color);
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 14px;
font-weight: 400;
line-height: 30px;
}
line-height: 26px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
}
// .box3-main {
// margin-top: 9px;
// width: 464px;
// height: 720px;
// // overflow: hidden;
// overflow-y: auto;
// padding-left: 20px;
// .box3-item {
// margin-bottom: 20px;
// position: relative;
// cursor: pointer;
// // border-bottom: 1px solid rgba(234, 236, 238, 1);
// .id {
// width: 24px;
// height: 24px;
// position: absolute;
// left: 18px;
// top: 1px;
// z-index: 99;
// text-align: center;
// line-height: 24px;
// margin-top: 5px;
// border-radius: 12px;
// background: #e7f3ff;
// color: #0a57a6;
// }
// .item-header {
// width: 384px;
// height: 35px;
// display: flex;
// justify-content: space-between;
// margin-left: 60px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// .name {
// max-width: 384px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// height: 24px;
// margin-top: 5px;
// color: rgba(59, 65, 75, 1);
// font-family: Microsoft YaHei;
// font-size: 18px;
// font-weight: 700;
// line-height: 24px;
// }
// .info {
// text-align: right;
// margin-left: 10px;
// height: 24px;
// margin-top: 5px;
// color: rgba(95, 101, 108, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 400;
// line-height: 24px;
// }
// }
// .item-content {
// margin-left: 66px;
// border-top: 1px solid rgba(234, 236, 238, 1);
// padding-top: 3px;
// color: rgba(95, 101, 108, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 400;
// line-height: 30px;
// }
// }
// }
}
}
}
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 58e246df
......@@ -142,7 +142,7 @@
</div> -->
</div>
<div class="box2">
<AnalysisBox title="主要指令" :showAllBtn="false">
<!-- <AnalysisBox title="主要指令" :showAllBtn="false">
<div v-if="curmajorList.length" class="box2-main">
<div class="box2-item" v-for="(item, index) in curmajorList" :key="index">
<div class="id">{{ index + 1 }}</div>
......@@ -157,6 +157,27 @@
</div>
</div>
<el-empty v-else description="暂无数据" :image-size="100" />
</AnalysisBox> -->
<AnalysisBox title="相关事件" :showAllBtn="false">
<div class="box2-main">
<el-empty v-if="!relatedEvents.length" description="暂无数据" :image-size="100" />
<div class="box2-item" v-for="(item, index) in relatedEvents" :key="index">
<div class="item-left">
<img :src="item.image" alt="" />
</div>
<div class="item-center">
<div class="bubble-header">
<span class="name">{{ item.title }}</span>
<span class="meta">{{ item.time }} · {{ "洛杉矶时报" }}</span>
</div>
<el-popover effect="dark" :width="1000" :content="item.content" placement="top-start">
<template #reference>
<div class="content">{{ item.content }}</div>
</template>
</el-popover>
</div>
</div>
</div>
</AnalysisBox>
<!-- <div class="box-header">
<div class="header-left"></div>
......@@ -234,11 +255,8 @@
</div>
<div class="box3-bottom-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in eventList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div>
<el-timeline-item :timestamp="item.postDate" placement="top" v-for="(item, index) in eventList?.slice(0, 3)" :key="index">
<div class="timeline-content">{{ item.describe }}</div>
</el-timeline-item>
</el-timeline>
</div>
......@@ -321,6 +339,7 @@ import {
getDecreeOrganization,
getDecreeIssueOrganization
} from "@/api/decree/introduction";
import { getDecreeRelatedEvent } from "@/api/decree/background";
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
......@@ -364,6 +383,30 @@ const handleGetBasicInfo = async () => {
};
handleGetBasicInfo();
// 相关事件
const relatedEvents = ref([]);
const handleGetRelateEvents = async () => {
const params = {
id: decreeId.value
};
try {
const res = await getDecreeRelatedEvent(params);
console.log("相关事件", res);
if (res.code === 200 && res.data) {
relatedEvents.value = res.data.map(item => {
return {
image: item.imageUrl,
title: item.sjbt,
content: item.sjnr,
time: item.sjsj
};
});
} else {
relatedEvents.value = [];
}
} catch (error) { }
};
// 主要指令
const majorList = ref([
// {
......@@ -402,7 +445,7 @@ const handleMajorList = async () => {
}
} catch (error) { }
};
handleMajorList();
// handleMajorList();
// 发布机构
......@@ -455,7 +498,8 @@ const handleGetOrgnization = async () => {
box3TopTopData.value.logo = res.data.image;
box3TopTopData.value.name = res.data.name;
box3TopTopData.value.eName = res.data.ename;
eventList.value = res.data.newsList;
// eventList.value = res.data.newsList;
eventList.value = res.data.orderInfoList;
box3TopBottomData.value = res.data.personList;
}
......@@ -473,6 +517,7 @@ const handleGetOrgnization = async () => {
};
onMounted(() => {
handleGetRelateEvents();
handleGetOrgnization();
});
</script>
......@@ -673,60 +718,134 @@ onMounted(() => {
width: 1064px;
height: 415px;
// .box2-main {
// margin-left: 22px;
// height: 280px;
// overflow: hidden;
// overflow-y: auto;
// .box2-item {
// width: 1015px;
// // height: 48px;
// margin-bottom: 8px;
// box-sizing: border-box;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 2px;
// background: rgba(255, 255, 255, 1);
// display: flex;
// align-items: center;
// padding: 12px 0;
// &:nth-child(2n-1) {
// background: rgba(247, 248, 249, 1);
// }
// .id {
// margin-left: 15px;
// width: 24px;
// height: 24px;
// text-align: center;
// line-height: 24px;
// border-radius: 12px;
// background: #e7f3ff;
// color: #0a57a6;
// }
// .title {
// width: 1020px;
// line-height: 24px;
// margin-left: 10px;
// color: rgba(59, 65, 75, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 700;
// // overflow: hidden;
// // text-overflow: ellipsis;
// // white-space: nowrap;
// }
// .open {
// width: 16px;
// height: 16px;
// margin-top: 16px;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
// }
.box2-main {
margin-left: 22px;
height: 280px;
margin-top: 3px;
margin-left: 31px;
height: 330px;
width: 1004px;
overflow: hidden;
overflow-y: auto;
.box2-item {
width: 1015px;
// height: 48px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
padding: 12px 0;
height: 60px;
width: 100%;
margin-bottom: 2px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-top: 10px;
&:nth-child(2n-1) {
background: rgba(247, 248, 249, 1);
}
.item-left {
width: 64px;
height: 48px;
border-radius: 2px;
.id {
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 1020px;
line-height: 24px;
margin-left: 10px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
.item-center {
flex: auto;
width: 20px;
margin-left: 14px;
.bubble-header {
display: flex;
align-items: center;
.name {
flex: auto;
width: 20px;
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.open {
width: 16px;
height: 16px;
margin-top: 16px;
.meta {
color: rgb(95, 101, 108);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
}
}
img {
.content {
width: 100%;
height: 100%;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
}
}
......
vite.config.js
浏览文件 @ 58e246df
......@@ -53,6 +53,7 @@ export default defineConfig({
'/api': {
target: 'http://8.140.26.4:9085/',
// target: 'http://192.168.0.4:28080/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论