Skip to content

R
risk-monitor
提交 1c65be4e authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 8f982b4d
隐藏空白字符变更
内嵌 并排
正在显示 包含 2673 行增加 和 1419 行删除
src/api/decree/home.js
浏览文件 @ 1c65be4e
...@@ -25,10 +25,11 @@ export function getDecreeRiskSignal() { ...@@ -25,10 +25,11 @@ export function getDecreeRiskSignal() {
} }
// 行政令发布频度 // 行政令发布频度
export function getDecreeYearOrder() { export function getDecreeYearOrder(params) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/administrativeOrderOverview/yearOrder`, url: `/api/administrativeOrderOverview/yearOrder/${params.year}`,
params
}) })
} }
......
src/api/news/newsBrief.js
浏览文件 @ 1c65be4e
import request from "@/api/request.js"; import request from "@/api/request.js";
// 今日要闻 // 今日要闻
export function getTodayNew() { export function getTodayNews() {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/news/latestNews`, url: `/api/news/latestNews`,
...@@ -28,7 +28,7 @@ export function getHotNews() { ...@@ -28,7 +28,7 @@ export function getHotNews() {
}) })
} }
// 今日要闻-带参 // 中美博弈专题-带参
/** /**
* @param {industryId} * @param {industryId}
*/ */
...@@ -38,4 +38,20 @@ export function getHotNewsByArea(params) { ...@@ -38,4 +38,20 @@ export function getHotNewsByArea(params) {
url: `/api/news/hotNews`, url: `/api/news/hotNews`,
params params
}) })
}
// 获取模块类别
export function getMoudleType() {
return request({
method: 'GET',
url: `/api/commonDict/moduleType`,
})
}
// 获取领域列表
export function getAreaList() {
return request({
method: 'GET',
url: `/api/commonDict/areaType`,
})
} }
\ No newline at end of file
src/api/news/newsDetail.js
浏览文件 @ 1c65be4e
...@@ -47,4 +47,4 @@ export function getRelationNews(params) { ...@@ -47,4 +47,4 @@ export function getRelationNews(params) {
url: `/api/news/relationNews/${params.newsId}`, url: `/api/news/relationNews/${params.newsId}`,
params params
}) })
} }
\ No newline at end of file
src/api/riskSignal/index.js 0 → 100644
浏览文件 @ 1c65be4e
import request from "@/api/request.js";
// 基本统计信息
export function getCountInfo() {
return request({
method: 'GET',
url: `/api/riskSignal/getCountInfo`,
})
}
// 每日统计信息
export function getDailyCount() {
return request({
method: 'GET',
url: `/api/riskSignal/getDailyCount`,
})
}
// 按条件分页查询风险信号信息
export function getPageQuery(data) {
return request({
method: 'POST',
url: `/api/riskSignal/pageQuery`,
data: data
})
}
src/views/comprehensiveSearch/chat/index.vue
浏览文件 @ 1c65be4e
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
class="source-item" class="source-item"
v-for="(item, index) in message.source" v-for="(item, index) in message.source"
:key="index" :key="index"
v-html="item" v-html="renderMarkdown(item)"
></div> ></div>
</div> </div>
<div v-if="message.content" class="answer-title">正文内容</div> <div v-if="message.content" class="answer-title">正文内容</div>
...@@ -71,7 +71,8 @@ ...@@ -71,7 +71,8 @@
<!-- 用户消息 --> <!-- 用户消息 -->
<div v-else class="user-item"> <div v-else class="user-item">
<div class="user-bubble"> <div class="user-bubble">
<div class="user-content">{{ message.content }}</div> <!-- <div class="user-content">{{ message.content }}</div> -->
<div class="user-content" v-html="renderMarkdown(message.content)"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -726,7 +727,7 @@ const sendMessage = async () => { ...@@ -726,7 +727,7 @@ const sendMessage = async () => {
} }
userInput.value = ""; userInput.value = "";
aiMessage.value = "" aiMessage.value = "";
if (curArea.value === "法案") { if (curArea.value === "法案") {
await connectSSE(question); await connectSSE(question);
} else { } else {
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 1c65be4e
...@@ -242,9 +242,14 @@ ...@@ -242,9 +242,14 @@
</div> </div>
</div> </div>
<div class="box3-main"> <div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)"> <div
class="box3-item"
v-for="(news, index) in newsList"
:key="index"
@click="handleToNewsAnalysis(news)"
>
<div class="left"> <div class="left">
<img :src="news.img" alt="" /> <img :src="news.img ? news.img : DefaultIconNews" alt="" />
</div> </div>
<div class="right"> <div class="right">
<div class="right-top"> <div class="right-top">
...@@ -266,7 +271,7 @@ ...@@ -266,7 +271,7 @@
<div class="box4-main"> <div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index"> <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson()"> <div class="left" @click="handleClickPerson()">
<img :src="item.img" alt="" /> <img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div> </div>
<div class="right"> <div class="right">
<div class="right-top"> <div class="right-top">
...@@ -290,7 +295,25 @@ ...@@ -290,7 +295,25 @@
<div class="box5-header-title">{{ "行政令发布频度" }}</div> <div class="box5-header-title">{{ "行政令发布频度" }}</div>
</div> </div>
</div> </div>
<div class="box5-main" id="chart1"></div>
<div class="box5-main">
<div class="box5-chart" id="chart1"></div>
<div class="box5-selectbox">
<el-select
@change="handleBox5YearChange"
v-model="box5SelectedYear"
placeholder="选择时间"
style="width: 80px"
>
<el-option
v-for="item in box5YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
</div> </div>
<div class="box6"> <div class="box6">
<div class="box6-header"> <div class="box6-header">
...@@ -341,17 +364,6 @@ ...@@ -341,17 +364,6 @@
<div class="home-main-footer"> <div class="home-main-footer">
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader> <DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate.id }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate.name }}
</div>
</div>
<div class="select-box"> <div class="select-box">
<div class="paixu-btn" @click="handleSwithSort"> <div class="paixu-btn" @click="handleSwithSort">
<div class="icon1"> <div class="icon1">
...@@ -368,6 +380,27 @@ ...@@ -368,6 +380,27 @@
</div> </div>
<div class="home-main-footer-main"> <div class="home-main-footer-main">
<div class="left"> <div class="left">
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "发布机构" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="cate in govInsList"
:key="cate.id"
v-model="checkedGovIns"
:label="cate.name"
style="width: 180px"
class="filter-checkbox"
@change="handleChangeCheckedGovIns"
>
{{ cate.name }}
</el-checkbox>
</div>
</div>
</div>
<div class="select-box"> <div class="select-box">
<div class="select-box-header"> <div class="select-box-header">
<div class="icon"></div> <div class="icon"></div>
...@@ -505,6 +538,7 @@ import setChart from "@/utils/setChart"; ...@@ -505,6 +538,7 @@ import setChart from "@/utils/setChart";
import DefaultIcon1 from "@/assets/icons/default-icon1.png"; import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png"; import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
import p1 from "./assets/images/iconp1.png"; import p1 from "./assets/images/iconp1.png";
import p2 from "./assets/images/iconp2.png"; import p2 from "./assets/images/iconp2.png";
...@@ -575,39 +609,15 @@ const govInsList = ref([ ...@@ -575,39 +609,15 @@ const govInsList = ref([
// img: Gov2, // img: Gov2,
// name: "美国财政部" // name: "美国财政部"
// }, // },
// {
// img: Gov3,
// name: "美国能源部"
// },
// {
// img: Gov4,
// name: "美国商务部"
// },
// {
// img: Gov5,
// name: "美国战争部"
// },
// {
// img: Gov6,
// name: "联邦通信委员会 "
// },
// {
// img: Gov7,
// name: "食品药品监督管理局 (FDA)"
// },
// {
// img: Gov8,
// name: "美国航空航天局 (NASA)"
// },
// {
// img: Gov9,
// name: "美国国家卫生基金会 (NSF)"
// },
// {
// img: Gov10,
// name: "美国国立卫生研究院 (NIH)"
// }
]); ]);
const checkedGovIns = ref(['白宫'])
const handleChangeCheckedGovIns = (val) => {
}
const handleGetDepartmentList = async () => { const handleGetDepartmentList = async () => {
try { try {
const res = await getDepartmentList(); const res = await getDepartmentList();
...@@ -782,15 +792,13 @@ const handleGetNews = async () => { ...@@ -782,15 +792,13 @@ const handleGetNews = async () => {
}; };
handleGetNews(); handleGetNews();
// 点击新闻条目，跳转到新闻分析页 // 点击新闻条目，跳转到新闻分析页
const handleToNewsAnalysis = (news) => { const handleToNewsAnalysis = news => {
const route = router.resolve( const route = router.resolve({
{ path: "/newsAnalysis",
path: "/newsAnalysis", query: {
query: { newsId: news.newsId
newsId: news.newsId
}
} }
); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
...@@ -844,27 +852,54 @@ const chart1Data = ref({ ...@@ -844,27 +852,54 @@ const chart1Data = ref({
dataY: [] dataY: []
}); });
const box5YearList = ref([
{
label: "2025",
value: "2025"
},
{
label: "2024",
value: "2024"
},
{
label: "2023",
value: "2023"
},
{
label: "2022",
value: "2022"
},
{
label: "2021",
value: "2021"
}
]);
const box5SelectedYear = ref("2025");
const handleGetDecreeYearOrder = async () => { const handleGetDecreeYearOrder = async () => {
const params = {
year: box5SelectedYear.value
};
try { try {
const res = await getDecreeYearOrder(); const res = await getDecreeYearOrder(params);
console.log("行政令发布频度", res); console.log("行政令发布频度", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
chart1Data.value.dataX = res.data chart1Data.value.dataX = res.data.map(item => {
.map(item => { return item.year;
return item.year; });
}) chart1Data.value.dataY = res.data.map(item => {
.reverse(); return item.count;
chart1Data.value.dataY = res.data });
.map(item => {
return item.count;
})
.reverse();
} }
} catch (error) { } catch (error) {
console.error("行政令发布频度error", error); console.error("行政令发布频度error", error);
} }
}; };
const handleBox5YearChange = val => {
handleBox5();
};
const handleBox5 = async () => { const handleBox5 = async () => {
await handleGetDecreeYearOrder(); await handleGetDecreeYearOrder();
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY); let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
...@@ -977,19 +1012,6 @@ const handleSwithSort = () => { ...@@ -977,19 +1012,6 @@ const handleSwithSort = () => {
isSort.value = !isSort.value; isSort.value = !isSort.value;
}; };
const categoryList = computed(() => {
let obj = {
name: "全部分类",
id: "",
img: ""
};
return [obj, ...govInsList.value];
});
const activeCate = ref("白宫");
const handleClickCate = cate => {
activeCate.value = cate.id;
};
const handleToPosi = id => { const handleToPosi = id => {
// 0 618 1240 2350 // 0 618 1240 2350
...@@ -1066,12 +1088,13 @@ const decreeList = ref([ ...@@ -1066,12 +1088,13 @@ const decreeList = ref([
]); ]);
const handleGetDecreeOrderList = async () => { const handleGetDecreeOrderList = async () => {
const p0 = checkedGovIns.value.join(',')
const p1 = activeAreaList.value.join(","); const p1 = activeAreaList.value.join(",");
const p2 = activePubTime.value.join(","); const p2 = activePubTime.value.join(",");
const params = { const params = {
currentPage: 0, currentPage: 0,
pageSize: 999999, pageSize: 999999,
proposeName: activeCate.value, proposeName: p0,
researchTypeIds: p1, researchTypeIds: p1,
sortFun: isSort.value, sortFun: isSort.value,
years: p2 years: p2
...@@ -1123,18 +1146,19 @@ watch( ...@@ -1123,18 +1146,19 @@ watch(
); );
watch( watch(
() => activeCate.value, () => isSort.value,
val => { val => {
handleGetDecreeOrderList(); handleGetDecreeOrderList();
} }
); );
watch( watch(
() => isSort.value, () => checkedGovIns.value,
val => { val => {
handleGetDecreeOrderList(); handleGetDecreeOrderList();
} }
);
)
// 切换当前政令 // 切换当前政令
const handleSwithCurDecree = name => { const handleSwithCurDecree = name => {
...@@ -2545,6 +2569,15 @@ onMounted(async () => { ...@@ -2545,6 +2569,15 @@ onMounted(async () => {
} }
.box5-main { .box5-main {
height: 397px; height: 397px;
position: relative;
.box5-selectbox {
position: absolute;
right: 10px;
top: 10px;
}
.box5-chart {
height: 397px;
}
} }
} }
.box6 { .box6 {
...@@ -2755,10 +2788,10 @@ onMounted(async () => { ...@@ -2755,10 +2788,10 @@ onMounted(async () => {
} }
.home-main-footer-header { .home-main-footer-header {
width: 1600px; width: 1600px;
height: 70px; height: 50px;
margin: 36px auto 16px; margin: 0 auto 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
.btn-box { .btn-box {
margin-top: 10px; margin-top: 10px;
width: 1450px; width: 1450px;
...@@ -2853,7 +2886,7 @@ onMounted(async () => { ...@@ -2853,7 +2886,7 @@ onMounted(async () => {
gap: 16px; gap: 16px;
.left { .left {
width: 300px; width: 300px;
height: 666px; // height: 666px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;
...@@ -3045,7 +3078,7 @@ onMounted(async () => { ...@@ -3045,7 +3078,7 @@ onMounted(async () => {
.footer-box { .footer-box {
margin: 0 30px; margin: 0 30px;
height: 32px; height: 32px;
margin-top: 30px; margin-top: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.footer-left { .footer-left {
......
src/views/decree/decreeHome/utils/barChart.js
浏览文件 @ 1c65be4e
...@@ -4,7 +4,7 @@ const getBarChart = (nameList, valueList) => { ...@@ -4,7 +4,7 @@ const getBarChart = (nameList, valueList) => {
const option = { const option = {
tooltip: {}, tooltip: {},
grid: { grid: {
top: '3%', top: '8%',
right: '3%', right: '3%',
bottom: '3%', bottom: '3%',
left: '3%', left: '3%',
......
src/views/decree/decreeHome/utils/piechart.js
浏览文件 @ 1c65be4e
...@@ -13,7 +13,7 @@ const getPieChart = (data) => { ...@@ -13,7 +13,7 @@ const getPieChart = (data) => {
}, },
label: { label: {
alignTo: 'edge', alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}', formatter: '{name|{b}}\n{time|{d}%}',
minMargin: 5, minMargin: 5,
edgeDistance: 10, edgeDistance: 10,
lineHeight: 24, lineHeight: 24,
......
src/views/decree/decreeLayout/influence/fishbone.vue 0 → 100644
浏览文件 @ 1c65be4e
<template>
<div class="fishbone-wrapper">
<div class="fishbone-scroll-container" ref="scrollContainerRef">
<div class="fishbone" ref="fishboneRef" v-if="fishboneData.length > 0">
<div class="main-line" :style="{ width: (fishboneData.length / 2) * 340 - 200 + 'px' }"></div>
<!-- 奇数索引的数据组放在上方 -->
<div
v-for="(causeGroup, groupIndex) in getOddGroups(fishboneData)"
:key="'top-' + groupIndex"
:class="getTopBoneClass(groupIndex)"
:style="{ left: groupIndex * 300 + 400 + 'px' }"
>
<div class="left-bone">
<div
class="left-bone-item"
v-for="(item, index) in getLeftItems(causeGroup.causes)"
:key="'left-' + index"
>
<div class="text">{{ item.name }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div
class="right-bone-item"
v-for="(item, index) in getRightItems(causeGroup.causes)"
:key="'right-' + index"
>
<div class="line"></div>
<div class="text">{{ item.name }}</div>
</div>
</div>
</div>
<!-- 偶数索引的数据组放在下方 -->
<div
v-for="(causeGroup, groupIndex) in getEvenGroups(fishboneData)"
:key="'bottom-' + groupIndex"
:class="getBottomBoneClass(groupIndex)"
:style="{ left: groupIndex * 300 + 200 + 'px' }"
>
<div class="left-bone">
<div
class="left-bone-item"
v-for="(item, index) in getLeftItems(causeGroup.causes)"
:key="'left-bottom-' + index"
>
<div class="text">{{ item.name }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div
class="right-bone-item"
v-for="(item, index) in getRightItems(causeGroup.causes)"
:key="'right-bottom-' + index"
>
<div class="line"></div>
<div class="text">{{ item.name }}</div>
</div>
</div>
</div>
</div>
<div v-else style="display: flex; justify-content: center; align-items: center; height: 200px; width: 100%">
<el-empty description="暂无相关数据" />
</div>
</div>
<!-- 滚动指示器 -->
<!-- <div class="scroll-indicators" v-if="showScrollIndicator">
<div class="scroll-btn left" :class="{ disabled: !canScrollLeft }" @click="scrollLeft">‹</div>
<div class="scroll-btn right" :class="{ disabled: !canScrollRight }" @click="scrollRight">›</div>
</div> -->
</div>
</template>
<script setup>
import { getChainFishbone } from "@/api/exportControl";
import { onMounted, ref, nextTick, watch } from "vue";
// 这儿需要接收父组件传递来的产业链ID
const props = defineProps({
chainId: {
type: Number,
default: 1
}
});
// const chainId = ref(1);
const fishboneData = ref([]);
const scrollContainerRef = ref(null);
const fishboneRef = ref(null);
const showScrollIndicator = ref(false);
const canScrollLeft = ref(false);
const canScrollRight = ref(true);
// 获取奇数索引的数据组（放在上方）
const getOddGroups = data => {
console.log(
"getOddGroups:",
data.filter((_, index) => index % 2 === 1)
);
return data.filter((_, index) => index % 2 === 1);
};
// 获取偶数索引的数据组（放在下方）
const getEvenGroups = data => {
console.log(
"getEvenGroups:",
data.filter((_, index) => index % 2 === 0)
);
return data.filter((_, index) => index % 2 === 0);
};
// 获取上方鱼骨图位置类名
const getTopBoneClass = index => {
const positions = ["top-bone", "top-bone1", "top-bone2"];
return positions[index % 3] || "top-bone";
};
// 获取下方鱼骨图位置类名
const getBottomBoneClass = index => {
const positions = ["bottom-bone", "bottom-bone1", "bottom-bone2"];
return positions[index % 3] || "bottom-bone";
};
// 获取左侧显示的项目（前半部分）
const getLeftItems = items => {
const midpoint = Math.ceil(items.length / 2);
return items.slice(0, midpoint);
};
// 获取右侧显示的项目（后半部分）
const getRightItems = items => {
const midpoint = Math.ceil(items.length / 2);
return items.slice(midpoint);
};
// 检查滚动状态
const updateScrollState = () => {
if (!scrollContainerRef.value) return;
const container = scrollContainerRef.value;
canScrollLeft.value = container.scrollLeft > 0;
canScrollRight.value = container.scrollLeft < container.scrollWidth - container.clientWidth;
};
// 滚动处理
const scrollLeft = () => {
if (scrollContainerRef.value) {
scrollContainerRef.value.scrollBy({ left: -200, behavior: "smooth" });
}
};
const scrollRight = () => {
if (scrollContainerRef.value) {
scrollContainerRef.value.scrollBy({ left: 200, behavior: "smooth" });
}
};
// 处理滚动事件
const handleScroll = () => {
updateScrollState();
};
onMounted(async () => {
try {
const chainFishboneData = await getChainFishbone(props.chainId);
fishboneData.value = chainFishboneData?.causes ?? [];
// 等待DOM更新后检查是否需要滚动
nextTick(() => {
if (scrollContainerRef.value && fishboneRef.value) {
showScrollIndicator.value = fishboneRef.value.scrollWidth > scrollContainerRef.value.clientWidth;
updateScrollState();
}
});
console.log("鱼骨图数据:", fishboneData.value);
} catch (error) {
console.log(error);
}
});
// 监听props中的chainId变化
watch(
() => props.chainId,
async () => {
try {
const chainFishboneData = await getChainFishbone(props.chainId);
fishboneData.value = chainFishboneData?.causes ?? [];
} catch (error) {
console.log(error);
}
}
);
</script>
<style lang="scss" scoped>
.fishbone-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.fishbone-scroll-container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(144, 202, 249, 0.5) transparent;
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(144, 202, 249, 0.5);
border-radius: 3px;
}
}
/* ... 原有的样式保持不变 ... */
.fishbone {
position: relative;
width: fit-content;
height: 100%;
margin-top: 40px;
min-width: 100%;
padding-left: 275px;
.main-line {
margin-top: 280px;
width: 1888px;
height: 3px;
background: rgba(174, 208, 255, 1);
}
}
.top-bone {
position: absolute;
top: 20px;
right: 200px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
.left-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
display: flex;
justify-content: flex-end;
.text {
margin-left: 4px;
height: 70px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
.right-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.top-bone1 {
position: absolute;
top: 20px;
right: 500px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
.left-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
display: flex;
justify-content: flex-end;
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
.right-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.top-bone2 {
position: absolute;
top: 20px;
right: 800px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
.left-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
display: flex;
justify-content: flex-end;
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
.right-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.bottom-bone {
position: absolute;
top: 280px;
right: 360px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(-30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
.left-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
display: flex;
justify-content: flex-end;
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
.right-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.bottom-bone1 {
position: absolute;
top: 280px;
right: 660px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(-30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
.left-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
display: flex;
justify-content: flex-end;
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
.right-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.bottom-bone2 {
position: absolute;
top: 280px;
right: 960px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(-30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
.left-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
display: flex;
justify-content: flex-end;
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
.right-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.scroll-indicators {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
padding: 0 10px;
z-index: 10;
}
.scroll-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
color: #90caf9;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
&:hover:not(.disabled) {
background: #90caf9;
color: white;
transform: scale(1.1);
}
&.disabled {
color: #c0c4cc;
cursor: not-allowed;
background: rgba(255, 255, 255, 0.5);
}
}
</style>
src/views/decree/decreeLayout/influence/index.vue
浏览文件 @ 1c65be4e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="box1"> <div class="box1">
<div class="box-header"> <div class="box-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "企业影响分析" }}</div> <div class="title">{{ "涉及行业" }}</div>
<div class="header-right1"> <div class="header-right1">
<el-checkbox v-model="isCRelated" label="只看中国企业" size="large" /> <el-checkbox v-model="isCRelated" label="只看中国企业" size="large" />
</div> </div>
...@@ -59,9 +59,11 @@ ...@@ -59,9 +59,11 @@
<div class="box2"> <div class="box2">
<div class="box-header"> <div class="box-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "政令举措落实分析" }}</div> <div class="title">{{ "产业链分析" }}</div>
<div class="header-right1"></div>
<div class="header-right"> <div class="header-right">
<div class="header-right-icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="header-right-icon"> <div class="header-right-icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" /> <img src="@/assets/icons/box-header-icon2.png" alt="" />
</div> </div>
...@@ -70,86 +72,53 @@ ...@@ -70,86 +72,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div class="box2-line-box" v-if="timeLineList.length"></div> <div class="box2-main-header">
<div <div class="box2-main-header-left">
class="box2-item" <img src="@/assets/icons/box-footer-left-icon.png" alt="" />
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="./assets/images/point.png" alt="" />
</div> </div>
<div class="box2-item-header"> <div class="box2-main-header-center">
<div class="title">{{ item.time }}</div> {{
"法案核心意图在于通过税收优惠吸引制造业回流美国​，并在关键科技领域对中国进行遏制，限制中国获取先进技术、资本和市场渠道，从而延缓中国科技产业的发展速度。给半导体、新能源、人工智能等相关科技行业带来不小的短期压力。"
}}
</div> </div>
<div class="box2-item-content"> <div class="box2-main-header-right">
{{ item.content }} <img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div> </div>
</div> </div>
</div> <div class="box2-main-main">
<div class="box2-footer"> <Fishbone :chainId="2" />
<div class="footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="footer-center">
{{
`政令目前仍处于关键的执行框架搭建期。该政令旨在通过推动“全栈式”美国AI技术出口，巩固其技术霸权并减少国际社会对美国对手国家技术的依赖`
}}
</div>
<div class="footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "历史相似举措及落实情况" }}</div>
<div class="header-right1"></div>
<div class="header-right">
<div class="header-right-icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="header-right-icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div> </div>
</div> <div class="box2-main-footer">
<div class="box3-main"> <div class="box2-main-footer-left">
<div class="box3-item" v-for="(item, index) in box3List" :key="index"> <div class="top">
<div class="box3-item-left"> <div class="icon">
<div class="text"> <img src="@/assets/icons/warning.png" alt="" />
{{ item.type }} </div>
<div class="text">{{ "中国企业45家（51.00%），受制裁5家（7.00%）" }}</div>
</div> </div>
<div class="bottom">{{ "基础支撑" }}</div>
</div> </div>
<div class="box3-item-right"> <div class="box2-main-footer-center">
<div class="right-top"> <div class="top">
<div class="title">{{ item.title }}</div> <div class="icon">
<div class="tag">{{ item.tag }}</div> <img src="@/assets/icons/warning.png" alt="" />
</div>
<div class="text">{{ "中国企业45家（51.00%），受制裁8家（7.00%）" }}</div>
</div> </div>
<div class="right-footer"> <div class="bottom">{{ "软件算法" }}</div>
<div class="content">{{ item.content }}</div> </div>
<div class="time">{{ item.time }}</div> <div class="box2-main-footer-right">
<div class="top">
<div class="icon">
<img src="@/assets/icons/warning.png" alt="" />
</div>
<div class="text">{{ "中国企业45家（51.00%），受制裁8家（7.00%）" }}</div>
</div> </div>
<div class="bottom">{{ "行业应用" }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="box3-footer">
<div class="footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="footer-center">
{{
`中美经济深度交织，全面脱钩成本高昂且不现实。其核心揭示了三大纽带：生产网络相互依存使强行分离代价巨大；人才双向流动推动创新却成政策博弈焦点；能源领域合作与竞争并存，关乎全球气候治理与经济博弈。报告主张理性竞合，在竞争中找到合作路径。`
}}
</div>
<div class="footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -157,6 +126,7 @@ ...@@ -157,6 +126,7 @@
<script setup> <script setup>
import { ref, computed, watch, onMounted } from "vue"; import { ref, computed, watch, onMounted } from "vue";
import Fishbone from "./fishbone.vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import router from "@/router"; import router from "@/router";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
...@@ -215,11 +185,11 @@ const handelBox1 = async () => { ...@@ -215,11 +185,11 @@ const handelBox1 = async () => {
const box1BtnActiveName = ref(""); const box1BtnActiveName = ref("");
const curAreaId = ref(0); const curAreaId = ref(0);
const box1BtnList = ref([ const box1BtnList = ref([
// "集成电路", // "集成电路",
// "新能源", // "新能源",
// "人工智能", // "人工智能",
// "先进制造", // "先进制造",
// "量子科技" // "量子科技"
]); ]);
const handleClickBox1Btn = btn => { const handleClickBox1Btn = btn => {
box1BtnActiveName.value = btn.name; box1BtnActiveName.value = btn.name;
...@@ -569,291 +539,207 @@ onMounted(() => { ...@@ -569,291 +539,207 @@ onMounted(() => {
} }
} }
.right { .right {
margin-left: 17px;
margin-top: 16px; margin-top: 16px;
margin-left: 16px;
.box2 { .box2 {
width: 1103px; width: 1105px;
height: 415px; height: 847px;
background: rgba(255, 255, 255);
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); position: relative;
background: rgba(255, 255, 255, 1);
.box2-main { .box2-main {
margin: 0 auto; height: 799px;
margin-top: 10px; .box2-main-header {
height: 260px; margin: 14px auto 36px;
width: 1054px; width: 1066px;
overflow-x: auto; height: 64px;
overflow-y: hidden;
display: flex;
position: relative;
padding-left: 120px;
.box2-line-box {
position: absolute;
left: 0;
top: 114px;
height: 8px;
width: 1054px;
background: url("./assets/images/line-bg.png") repeat;
}
.box2-item {
width: 300px;
height: 120px;
position: relative;
box-sizing: border-box; box-sizing: border-box;
padding-left: 13px; border: 1px solid rgba(231, 243, 255, 1);
margin-left: -100px; border-radius: 4px;
border-left: 1px solid #0a57a6; background: rgba(246, 250, 255, 1);
.box2-item-header { padding: 6px 12px;
display: flex; display: flex;
width: 240px; align-items: center;
.title { justify-content: center;
color: var(--color-main-active); gap: 13px;
height: 26px; .box2-main-header-left {
font-family: Microsoft YaHei; width: 19px;
font-size: 16px; height: 20px;
font-weight: 700; img {
width: 100%;
height: 100%;
} }
} }
.box2-item-content { .box2-main-header-center {
width: 210px; width: 973px;
min-height: 48px; height: 48px;
max-height: 96px; color: var(--color-main-active);
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
overflow: hidden; letter-spacing: 0px;
} text-align: left;
.point {
position: absolute;
left: -8px;
bottom: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
} }
.pointFooter { .box2-main-header-right {
position: absolute; width: 24px;
left: -8px; height: 24px;
top: -7px;
width: 15px;
height: 15px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.time {
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
} }
.box2ItemFooter { .box2-main-main {
margin-top: 118px; width: 1053px;
margin-left: -120px; height: 568px;
box-sizing: border-box; margin: 0 auto;
padding-top: 20px;
// display: flex;
// flex-direction: column;
// justify-content: flex-end;
} }
} .box2-main-footer {
.box2-footer { margin-left: 24px;
margin-top: 6px; width: 1053px;
width: 1057px; height: 117px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex; display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box3 {
margin-top: 15px;
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 264px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 21px;
margin-right: 26px;
.box3-item {
margin-top: 12px;
width: 520px;
height: 76px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); padding-top: 36px;
border-radius: 4px; overflow-x: auto;
display: flex; .box2-main-footer-left {
.box3-item-left { width: 408px;
width: 54px;
height: 54px;
border-radius: 27px;
background: #e7f3ff;
text-align: center; text-align: center;
margin-top: 11px; position: relative;
margin-left: 14px; z-index: 3;
.text { .top {
width: 33px; height: 22px;
height: 30px; display: flex;
color: var(--color-main-active); justify-content: center;
gap: 6px;
align-items: center;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
}
.bottom {
margin-top: 13px;
width: 408px;
height: 28px;
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-style: Bold;
font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 18px; line-height: 24px;
margin: 11px auto; letter-spacing: 1px;
text-align: center;
background: url("./assets/images/bg1.png");
} }
} }
.box3-item-right { .box2-main-footer-center {
margin-left: 8px; width: 408px;
width: 433px; text-align: center;
.right-top { margin-left: -10px;
position: relative;
z-index: 2;
.top {
height: 22px;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
.title { gap: 6px;
margin-top: 13px; align-items: center;
height: 24px; .icon {
color: rgba(59, 65, 75, 1); width: 16px;
font-family: Microsoft YaHei; height: 16px;
font-size: 18px; img {
font-weight: 700; width: 100%;
line-height: 24px; height: 100%;
}
} }
.tag { .text {
margin-top: 11px; color: rgba(206, 79, 81, 1);
width: 72px; font-family: Microsoft YaHei;
height: 24px; font-style: Regular;
box-sizing: border-box; font-size: 14px;
border: 1px solid rgba(255, 163, 158, 1); font-weight: 400;
border-radius: 4px; line-height: 22px;
background: rgba(255, 241, 240, 1); letter-spacing: 0px;
color: rgba(245, 34, 45, 1); text-align: left;
} }
} }
.right-footer { .bottom {
margin-top: 2px; margin-top: 13px;
width: 408px;
height: 28px;
color: rgba(19, 168, 168, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: center;
background: url("./assets/images/bg2.png");
}
}
.box2-main-footer-right {
width: 408px;
text-align: center;
margin-left: -10px;
position: relative;
z-index: 1;
.top {
height: 22px;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
.content { gap: 6px;
height: 24px; align-items: center;
color: rgba(95, 101, 108, 1); .icon {
font-family: Microsoft YaHei; width: 16px;
font-size: 16px; height: 16px;
font-weight: 400; img {
line-height: 24px; width: 100%;
width: 353px; height: 100%;
overflow: hidden; }
text-overflow: ellipsis;
white-space: nowrap;
} }
.time { .text {
height: 24px; color: rgba(206, 79, 81, 1);
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-style: Regular;
font-size: 14px;
font-weight: 400; font-weight: 400;
width: 78px; line-height: 22px;
line-height: 24px; letter-spacing: 0px;
overflow: hidden; text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
} .bottom {
} margin-top: 13px;
} width: 408px;
.box3-footer { height: 28px;
width: 1057px; color: rgba(146, 84, 222, 1);
height: 64px; font-family: Microsoft YaHei;
box-sizing: border-box; font-style: Bold;
border: 1px rgba(231, 243, 255, 1); font-size: 16px;
border-radius: 4px; font-weight: 700;
background: rgba(246, 251, 255, 1); line-height: 24px;
margin: 14px auto 0; letter-spacing: 1px;
padding: 6px 12px 6px 12px; text-align: center;
display: flex; background: url("./assets/images/bg3.png");
.footer-left { }
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
} }
} }
} }
......
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ 1c65be4e
...@@ -66,9 +66,9 @@ ...@@ -66,9 +66,9 @@
<div class="item-right">{{ item.time }}</div> <div class="item-right">{{ item.time }}</div>
</div> </div>
</div> </div>
<div class="box2-footer"> <!-- <div class="box2-footer">
<img src="./assets/images/more-icon.png" alt="" /> <img src="./assets/images/more-icon.png" alt="" />
</div> </div> -->
</div> </div>
</div> </div>
<div class="right"> <div class="right">
...@@ -368,8 +368,10 @@ onMounted(() => { ...@@ -368,8 +368,10 @@ onMounted(() => {
.box2-main { .box2-main {
margin-top: 3px; margin-top: 3px;
margin-left: 31px; margin-left: 31px;
height: 310px; height: 330px;
width: 1090px; width: 1090px;
overflow: hidden;
overflow-y: auto;
.box2-item { .box2-item {
display: flex; display: flex;
height: 60px; height: 60px;
...@@ -420,16 +422,16 @@ onMounted(() => { ...@@ -420,16 +422,16 @@ onMounted(() => {
} }
} }
} }
.box2-footer { // .box2-footer {
margin: 5px auto 0; // margin: 5px auto 0;
width: 108px; // width: 108px;
height: 32px; // height: 32px;
cursor: pointer; // cursor: pointer;
img { // img {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
} // }
} // }
} }
} }
.right { .right {
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 1c65be4e
...@@ -297,7 +297,7 @@ const handleClickBox3Btn = (btn, index) => { ...@@ -297,7 +297,7 @@ const handleClickBox3Btn = (btn, index) => {
eventList.value = box3Data.value[index].newsList.map(val => { eventList.value = box3Data.value[index].newsList.map(val => {
return { return {
time: val.newsDate, time: val.newsDate,
title: newsTitle title: val.newsTitle
}; };
}); });
}; };
...@@ -352,7 +352,7 @@ const handleGetOrgnization = async () => { ...@@ -352,7 +352,7 @@ const handleGetOrgnization = async () => {
eventList.value = res.data[0].newsList.map(val => { eventList.value = res.data[0].newsList.map(val => {
return { return {
time: val.newsDate, time: val.newsDate,
title: newsTitle title: val.newsTitle
}; };
}); });
} else { } else {
...@@ -382,7 +382,12 @@ const handleGetOrgnization = async () => { ...@@ -382,7 +382,12 @@ const handleGetOrgnization = async () => {
eventList.value = []; eventList.value = [];
} }
}; };
onMounted(() => {
handleGetOrgnization(); handleGetOrgnization();
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -545,13 +550,16 @@ handleGetOrgnization(); ...@@ -545,13 +550,16 @@ handleGetOrgnization();
color: #0a57a6; color: #0a57a6;
} }
.title { .title {
width: 1000px; width: 1020px;
line-height: 48px; line-height: 48px;
margin-left: 13px; margin-left: 5px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.open { .open {
width: 16px; width: 16px;
......
src/views/newsAnalysis/index.vue
浏览文件 @ 1c65be4e
...@@ -2,14 +2,15 @@ ...@@ -2,14 +2,15 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<div class="page-header-left"> <div class="page-header-left">
<el-image :src="newsImg" alt="新闻" class="page-header-left-img"></el-image> <el-image :src="summaryInfo.newsImg" alt="新闻" class="page-header-left-img"></el-image>
<div class="page-header-left-top"> <div class="page-header-left-top">
<div class="page-header-left-top-title">众议院共和党人起草新的中国投资限制</div> <div class="page-header-left-top-title">{{ summaryInfo.newsTitle }}</div>
<div class="page-header-left-top-en">House Republicans draft new China investment curbs</div> <div class="page-header-left-top-en">{{ summaryInfo.newsETitle }}</div>
<div class="page-header-left-top-desc"> <div class="page-header-left-top-desc">
2025年11月11日 10:33 · 福克斯新闻网 <div class="text">{{ summaryInfo.newsDateTime }} · {{ summaryInfo.newsOrg }}</div>
<el-tag type="primary">生物科技</el-tag> <div class="tag-box">
<el-tag type="primary">人工智能</el-tag> <div class="tag" v-for="(tag, index) in summaryInfo.industryList" :key="index">{{ tag }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -168,7 +169,9 @@ ...@@ -168,7 +169,9 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getNewsSummary, getNewsContent, getNewsEvent, getRelationNews } from "@/api/news/newsDetail";
import CustomContainer from "@/components/Container/index.vue"; import CustomContainer from "@/components/Container/index.vue";
import NewsList from "@/views/exportControl/components/news.vue"; import NewsList from "@/views/exportControl/components/news.vue";
import Graph from "./relation.vue"; import Graph from "./relation.vue";
...@@ -179,15 +182,66 @@ import dotIcon from "@/assets/images/dot.png"; ...@@ -179,15 +182,66 @@ import dotIcon from "@/assets/images/dot.png";
import newsImg1 from "@/assets/images/news-image-1.png"; import newsImg1 from "@/assets/images/news-image-1.png";
import newsImg2 from "@/assets/images/news-image-2.png"; import newsImg2 from "@/assets/images/news-image-2.png";
import newsImg3 from "@/assets/images/news-image-3.png"; import newsImg3 from "@/assets/images/news-image-3.png";
import newsImg4 from "@/assets/images/news-img.png"; import newsImg4 from "@/assets/images/news-img.png";
const route = useRoute();
const summaryInfo = ref({
newsImg: "",
newsTitle: "",
newsETitle: "",
newsDateTime: "",
newsOrg: "",
industryList: [],
newsSrc: "",
newsId: ""
});
const handleGetNewsSummary = async () => {
const params = {
newsId: route.query.newsId
};
try {
const res = await getNewsSummary(params);
console.log("新闻全局信息", res);
if (res.code === 200 && res.data) {
summaryInfo.value = res.data;
summaryInfo.value.newsDateTime = summaryInfo.value.newsDateTime.replace("T", " ");
}
} catch (error) {}
};
const highlightEntities = ref(false); const highlightEntities = ref(false);
const handleToDetail = () => { const handleToDetail = () => {
// window.open("https://www.foxnews.com/technology/house-republicans-draft-new-china-investment-curbs"); // window.open("https://www.foxnews.com/technology/house-republicans-draft-new-china-investment-curbs");
}; };
// 历次制裁过程 // 新闻内容
const newsContentInfo = ref({
newsId: "",
newsDate: "",
newsContent: "",
newsTitle: "",
newsOrg: "",
newsImage: ""
})
const handleGetNewsContent = async () => {
const params = {
newsId: route.query.newsId
}
try {
const res = await getNewsContent(params)
console.log('新闻内容', res);
if(res.code === 200 && res.data) {
newsContentInfo.value = res.data
}
} catch (error) {
}
}
// 事件脉络
const sanctionProcessList = ref([ const sanctionProcessList = ref([
{ {
title: "减税与就业法案的出台与立法博弈", title: "减税与就业法案的出台与立法博弈",
...@@ -215,7 +269,23 @@ const sanctionProcessList = ref([ ...@@ -215,7 +269,23 @@ const sanctionProcessList = ref([
content: "法案通过恰逢美国对多国“90天关税暂缓期”即将到期（2025年7月9日）。欧盟、..." content: "法案通过恰逢美国对多国“90天关税暂缓期”即将到期（2025年7月9日）。欧盟、..."
} }
]); ]);
const handleGetNewsEvent = async () => {
const params = {
newsId: route.query.newsId
};
try {
const res = await getNewsEvent(params);
console.log("事件脉络", res);
if (res.code === 200 && res.data) {
} else {
sanctionProcessList.value = [];
}
} catch (error) {
sanctionProcessList.value = [];
}
};
// 相关新闻
const customNewsData = ref([ const customNewsData = ref([
{ {
image: newsImg4, image: newsImg4,
...@@ -246,6 +316,28 @@ const customNewsData = ref([ ...@@ -246,6 +316,28 @@ const customNewsData = ref([
description: "2017-08-30 · Channel NewsAsia..." description: "2017-08-30 · Channel NewsAsia..."
} }
]); ]);
const handleGetRelationNews = async () => {
const params = {
newsId: route.query.newsId
};
try {
const res = await getRelationNews(params);
console.log("相关新闻", res);
if (res.code === 200 && res.data) {
} else {
customNewsData.value = [];
}
} catch (error) {
customNewsData.value = [];
}
};
onMounted(() => {
handleGetNewsSummary();
handleGetNewsContent()
handleGetNewsEvent();
handleGetRelationNews();
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -280,25 +372,59 @@ const customNewsData = ref([ ...@@ -280,25 +372,59 @@ const customNewsData = ref([
justify-content: flex-start; justify-content: flex-start;
gap: 5px; gap: 5px;
&-title { &-title {
color: rgba(59, 65, 75, 1);
height: 32px;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
// margin-bottom: 10px; line-height: 32px;
color: rgba(59, 65, 75, 1); letter-spacing: 0px;
text-align: left;
} }
&-en { &-en {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
// margin-bottom: 10px; line-height: 24px;
color: rgba(59, 65, 75, 1); letter-spacing: 0px;
text-align: left;
} }
&-desc { &-desc {
font-size: 16px; height: 24px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
display: flex; display: flex;
align-items: center; gap: 12px;
justify-content: center; .text {
gap: 5px; color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.tag-box {
height: 24px;
display: flex;
gap: 4px;
.tag {
height: 24px;
line-height: 24px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
}
}
} }
} }
} }
......
src/views/newsBrief/Headlines.vue
浏览文件 @ 1c65be4e
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
<div class="main"> <div class="main">
<div class="main-header"> <div class="main-header">
<div <div
v-for="(item, index) in btnList" v-for="(item, index) in areaList"
:key="index" :key="index"
class="header-btn" class="header-btn"
:class="{ headerBtnSelect: btnSelect === item }" :class="{ headerBtnSelect: areaActive === item.id }"
@click="changeBtn(item)" @click="changeModule(item)"
> >
{{ item }} {{ item.name }}
</div> </div>
</div> </div>
<div class="content-box"> <div class="content-box">
...@@ -46,56 +46,76 @@ ...@@ -46,56 +46,76 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import Index from "../innovationSubject/index.vue"; import { getAreaList, getTodayNewByArea } from "@/api/news/newsBrief";
import { ElMessage } from "element-plus";
const btnList = ref(["全部", "军事", "政治", "经济", "科技", "涉我"]); // 模块类别
const btnSelect = ref("全部"); const areaList = ref([]);
const HeadlinesData = ref([
{ const areaActive = ref("");
title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
from: "人民网", const handleGetTodayNewsByArea = async () => {
time: "2025-10-05", const params = {
tag: ["以色列", "美国"], industryId: areaActive.value
image: "/testData/HeadlinesData-img.png" };
}, try {
{ const res = await getTodayNewByArea(params);
title: "IMF上调中东和北非地区经济增长预期", console.log("领域今日要闻", res);
from: "CNN", if (res.code === 200 && res.data) {
time: "2025-10-05", HeadlinesData.value = res.data;
tag: ["经济", "中东", "IMF"], } else {
image: "/testData/HeadlinesData-img.png" ElMessage.error(res.message);
}, HeadlinesData.value = [];
{ }
title: "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面", } catch (error) {
from: "人民网", HeadlinesData.value = [];
time: "2025-10-05",
tag: ["日本", "访华"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "韩日因独岛主权争议暂停本月联合搜救演习",
from: "凤凰网",
time: "2025-10-05",
tag: ["独岛", "联合军演", "韩国", "日本"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
from: "央视网",
time: "2025-10-05",
tag: ["美国", "航母", "加勒比海"],
image: "/testData/HeadlinesData-img.png"
} }
};
const handleGetModuleList = async () => {
try {
const res = await getAreaList();
console.log("领域列表", res);
if (res.code === 200 && res.data) {
areaList.value = res.data;
areaActive.value = areaList.value[0].id;
handleGetTodayNewsByArea();
}
} catch (error) {}
};
const HeadlinesData = ref([
// {
// title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
// from: "人民网",
// time: "2025-10-05",
// tag: ["以色列", "美国"],
// image: "/testData/HeadlinesData-img.png"
// },
// {
// title: "IMF上调中东和北非地区经济增长预期",
// from: "CNN",
// time: "2025-10-05",
// tag: ["经济", "中东", "IMF"],
// image: "/testData/HeadlinesData-img.png"
// }
]); ]);
function changeBtn(btn) {
btnSelect.value = btn; function changeModule(btn) {
areaActive.value = btn.id;
handleGetTodayNewsByArea();
} }
const emit = defineEmits(["back"]); const emit = defineEmits(["back"]);
function back() { function back() {
emit("back", "home"); emit("back", "home");
} }
onMounted(() => {
handleGetModuleList();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// @import url("./style.css"); // @import url("./style.css");
...@@ -104,7 +124,7 @@ function back() { ...@@ -104,7 +124,7 @@ function back() {
background: url("@/assets/images/background.png") no-repeat; background: url("@/assets/images/background.png") no-repeat;
background-position: center -100px; background-position: center -100px;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
.back-btn { .back-btn {
position: absolute; position: absolute;
top: 24px; top: 24px;
...@@ -180,8 +200,9 @@ function back() { ...@@ -180,8 +200,9 @@ function back() {
border-radius: 10px; border-radius: 10px;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
.main-header { .main-header {
height: 64px; // height: 64px;
display: flex; display: flex;
flex-wrap: wrap;
gap: 16px; gap: 16px;
padding-top: 24px; padding-top: 24px;
padding-left: 24px; padding-left: 24px;
...@@ -190,6 +211,7 @@ function back() { ...@@ -190,6 +211,7 @@ function back() {
line-height: 40px; line-height: 40px;
padding: 0 20px; padding: 0 20px;
border-radius: 32px; border-radius: 32px;
border: 1px solid rgba(32, 33, 35, 0.07);
background: rgba(32, 33, 35, 0.07); background: rgba(32, 33, 35, 0.07);
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -197,6 +219,7 @@ function back() { ...@@ -197,6 +219,7 @@ function back() {
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
cursor: pointer;
} }
.headerBtnSelect { .headerBtnSelect {
box-sizing: border-box; box-sizing: border-box;
......
src/views/newsBrief/Subject.vue
浏览文件 @ 1c65be4e
...@@ -13,31 +13,32 @@ ...@@ -13,31 +13,32 @@
<div class="main"> <div class="main">
<div class="main-header"> <div class="main-header">
<div <div
v-for="(item, index) in btnList" v-for="(item, index) in areaList"
:key="index" :key="index"
class="header-btn" class="header-btn"
:class="{ headerBtnSelect: btnSelect === item }" :class="{ headerBtnSelect: moduleActive === item.id }"
@click="changeBtn(item)" @click="changeArea(item)"
> >
{{ item }} {{ item.name }}
</div> </div>
</div> </div>
<div class="content-box"> <div class="content-box">
<div class="item" v-for="(item, index) in HeadlinesData" :key="index"> <div class="item" v-for="(item, index) in HeadlinesData" :key="index">
<div class="item-left"> <div class="item-left">
<div class="title">{{ item.title }}</div> <div class="title">{{ item.newsTitle }}</div>
<div class="content"> <div class="content">
<div class="source">新闻来源： {{ item.from }}</div> <div class="source">新闻来源： {{ item.newsOrg }}</div>
<div class="time">发表时间：{{ item.time }}</div> <div class="time">发表时间：{{ item.newsDate }}</div>
</div> </div>
<div class="tag-box"> <div class="tag-box">
<div v-for="(tag, index) in item.tag" class="tag" :key="index"> <div v-for="(tag, index) in item.industryList" class="tag" :key="index">
{{ tag }} {{ tag }}
</div> </div>
</div> </div>
</div> </div>
<div class="item-right"> <div class="item-right">
<img :src="`src/assets/icons/arrow-${item.arrow}.png`" /> <img v-if="item.hot" :src="`src/assets/icons/arrow-0.png`" />
<img v-else :src="`src/assets/icons/arrow-1.png`" />
</div> </div>
</div> </div>
</div> </div>
...@@ -46,55 +47,75 @@ ...@@ -46,55 +47,75 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import { getAreaList, getHotNewsByArea } from "@/api/news/newsBrief";
import { ElMessage } from "element-plus";
const btnList = ref(["全部", "军事", "政治", "经济", "敌我"]); // 模块类别
const btnSelect = ref("新闻纵览"); const areaList = ref([]);
const HeadlinesData = ref([ const moduleActive = ref("");
{
title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”", const handleGetHotNewsByArea = async () => {
from: "人民网", const params = {
time: "2025-10-05", industryId: moduleActive.value
tag: ["以色列", "美国"], };
arrow: "0" try {
}, const res = await getHotNewsByArea(params);
{ console.log("领域中美博弈专题", res);
title: "IMF上调中东和北非地区经济增长预期", if (res.code === 200 && res.data) {
from: "CNN", HeadlinesData.value = res.data;
time: "2025-10-05", } else {
tag: ["经济", "中东", "IMF"], ElMessage.error(res.message);
arrow: "1" HeadlinesData.value = [];
}, }
{ } catch (error) {
title: "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面", HeadlinesData.value = [];
from: "人民网",
time: "2025-10-05",
tag: ["日本", "访华"],
arrow: "1"
},
{
title: "韩日因独岛主权争议暂停本月联合搜救演习",
from: "凤凰网",
time: "2025-10-05",
tag: ["独岛", "联合军演", "韩国", "日本"],
arrow: "0"
},
{
title: "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
from: "央视网",
time: "2025-10-05",
tag: ["美国", "航母", "加勒比海"],
arrow: "0"
} }
};
const handleGetModuleList = async () => {
try {
const res = await getAreaList();
console.log("领域列表", res);
if (res.code === 200 && res.data) {
areaList.value = res.data;
moduleActive.value = areaList.value[0].id;
handleGetHotNewsByArea();
}
} catch (error) {}
};
const HeadlinesData = ref([
// {
// title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
// from: "人民网",
// time: "2025-10-05",
// tag: ["以色列", "美国"],
// arrow: "0"
// },
// {
// title: "IMF上调中东和北非地区经济增长预期",
// from: "CNN",
// time: "2025-10-05",
// tag: ["经济", "中东", "IMF"],
// arrow: "1"
// },
]); ]);
function changeBtn(btn) { function changeArea(area) {
btnSelect.value = btn; moduleActive.value = area.id;
handleGetHotNewsByArea()
} }
const emit = defineEmits(["back"]); const emit = defineEmits(["back"]);
function back() { function back() {
emit("back", "home"); emit("back", "home");
} }
onMounted(() => {
handleGetModuleList();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.newsBrief-page { .newsBrief-page {
...@@ -182,8 +203,9 @@ function back() { ...@@ -182,8 +203,9 @@ function back() {
border-radius: 10px; border-radius: 10px;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
.main-header { .main-header {
height: 64px; // height: 64px;
display: flex; display: flex;
flex-wrap: wrap;
gap: 16px; gap: 16px;
padding-top: 24px; padding-top: 24px;
padding-left: 24px; padding-left: 24px;
...@@ -192,6 +214,7 @@ function back() { ...@@ -192,6 +214,7 @@ function back() {
line-height: 40px; line-height: 40px;
padding: 0 20px; padding: 0 20px;
border-radius: 32px; border-radius: 32px;
border: 1px solid rgba(32, 33, 35, 0.07);
background: rgba(32, 33, 35, 0.07); background: rgba(32, 33, 35, 0.07);
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -199,6 +222,7 @@ function back() { ...@@ -199,6 +222,7 @@ function back() {
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
cursor: pointer;
} }
.headerBtnSelect { .headerBtnSelect {
box-sizing: border-box; box-sizing: border-box;
...@@ -216,7 +240,7 @@ function back() { ...@@ -216,7 +240,7 @@ function back() {
overflow-y: auto; overflow-y: auto;
.item { .item {
width: 952px; width: 952px;
height: 114px; max-height: 114px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
src/views/newsBrief/index.vue
浏览文件 @ 1c65be4e
...@@ -10,18 +10,20 @@ ...@@ -10,18 +10,20 @@
<div class="btn-box"> <div class="btn-box">
<div <div
v-for="(item, index) in btnList" v-for="(item, index) in moduleList"
:key="index" :key="index"
:class="btnSelect !== item ? 'header-btn' : 'header-btn-select'" :class="moduleActiveId !== item.moduleId ? 'header-btn' : 'header-btn-select'"
@click="changeBtn(item)" @click="handleToWorldHot(item)"
@mouseenter="handleActiveModule(true, item)"
@mouseleave="handleActiveModule(false, item)"
> >
<div class="btn-box-text">{{ item }}</div> <div class="btn-box-text">{{ item.moduleName }}</div>
<div class="btn-box-icon"> <div class="btn-box-icon">
<img v-if="btnSelect === item" src="@/assets/icons/btn-arrow-right-active.png" alt="" /> <img v-if="moduleActiveId === item.moduleId" src="@/assets/icons/btn-arrow-right-active.png" alt="" />
<img v-else src="@/assets/icons/btn-arrow-right.png" alt="" /> <img v-else src="@/assets/icons/btn-arrow-right.png" alt="" />
</div> </div>
</div> </div>
<div class="header-btn-more"> <div class="header-btn-more" v-if="moduleList.length">
<img src="@/assets/icons/adjustment.png" /> <img src="@/assets/icons/adjustment.png" />
</div> </div>
</div> </div>
...@@ -42,9 +44,9 @@ ...@@ -42,9 +44,9 @@
{{ item.title }} {{ item.title }}
</div> </div>
<div class="box1-item-content"> <div class="box1-item-content">
<div class="source">新闻来源： {{ item.from }}</div> <div class="source">新闻来源： {{ item.from }}</div>
<div class="time">发表时间：{{ item.time }}</div> <div class="time">发表时间：{{ item.time }}</div>
</div> </div>
<div class="tag-box"> <div class="tag-box">
<div v-for="(tag, index) in item.tag" :key="index" class="tag"> <div v-for="(tag, index) in item.tag" :key="index" class="tag">
{{ tag }} {{ tag }}
...@@ -62,20 +64,28 @@ ...@@ -62,20 +64,28 @@
<div class="box"> <div class="box">
<div class="box-header"> <div class="box-header">
<div class="box-header-img"><img src="@/assets/icons/subject-icon.png" /></div> <div class="box-header-img"><img src="@/assets/icons/subject-icon.png" /></div>
<div class="box-header-title" @click="changePage('subject')">中美博弈专题</div> <div class="box-header-title">中美博弈专题</div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div v-for="(item, index) in subjectData" :key="index"> <div v-for="(item, index) in subjectData" :key="index">
<div class="subject-line"> <div class="subject-line">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div class="subject-line-id" :class="{ subjectLineId1: index===0, subjectLineId2: index === 1, subjectLineId3: index === 2 }"> <div
class="subject-line-id"
:class="{
subjectLineId1: index === 0,
subjectLineId2: index === 1,
subjectLineId3: index === 2
}"
>
{{ index <= 2 ? index + 1 : "•" }} {{ index <= 2 ? index + 1 : "•" }}
</div> </div>
<div class="text" :class="{ textTop: index < 3 }"> <div class="text" :class="{ textTop: index < 3 }">
{{ item.text }} {{ item.newsTitle }}
</div> </div>
</div> </div>
<img :src="`src/assets/icons/arrow-${item.arrow}.png`" /> <img v-if="item.hot" :src="`src/assets/icons/arrow-0.png`" />
<img v-else :src="`src/assets/icons/arrow-1.png`" />
</div> </div>
</div> </div>
</div> </div>
...@@ -88,15 +98,30 @@ ...@@ -88,15 +98,30 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief";
import { useRoute } from "vue-router";
import Headlines from "./Headlines.vue"; import Headlines from "./Headlines.vue";
import Subject from "./Subject.vue"; import Subject from "./Subject.vue";
// import style from './style.css' // import style from './style.css'
const route = useRoute();
//顶部数据搜索 //顶部数据搜索
const searchInput = ref(""); const searchInput = ref("");
const btnList = ref(["新闻纵览", "焦点新闻", "全球热点", "军事热点", "台湾动向", "美国政治", "亚洲局势", "东亚动态"]); const moduleList = ref([]);
const btnSelect = ref("新闻纵览"); const moduleActiveId = ref("");
const handleGetModuleType = async () => {
try {
const res = await getMoudleType();
console.log("模块类别", res);
if (res.code === 200 && res.data) {
moduleList.value = res.data;
}
} catch (error) {}
};
// 今日要闻
const HeadlinesData = ref([ const HeadlinesData = ref([
{ {
title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”", title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
...@@ -134,32 +159,62 @@ const HeadlinesData = ref([ ...@@ -134,32 +159,62 @@ const HeadlinesData = ref([
image: "/testData/HeadlinesData-img.png" image: "/testData/HeadlinesData-img.png"
} }
]); ]);
const handleGetTodayNews = async () => {
function changeBtn(btn) { try {
btnSelect.value = btn; const res = await getTodayNews();
} console.log("今日要闻", res);
if (res.code === 200 && res.data) {
} else {
HeadlinesData.value = [];
}
} catch (error) {
HeadlinesData.value = [];
}
};
//当前页面显示 //当前页面显示
const showPage = ref("home"); const showPage = ref("home");
function changePage(page) { const changePage = page => {
console.log(page); console.log(page);
showPage.value = page; showPage.value = page;
} };
//博弈专题新闻数据 //博弈专题新闻数据
const subjectData = ref([ const subjectData = ref([
{ id: 1, text: "乌克兰与法国签署意向书 将获 100 架“阵风”战机及多套防空系统", arrow: 0 }, // { id: 1, text: "乌克兰与法国签署意向书 将获 100 架“阵风”战机及多套防空系统", arrow: 0 },
{ id: 2, text: "安理会通过涉加沙决议 建立和平委员会作为过渡行政机构", arrow: 1 }, // { id: 2, text: "安理会通过涉加沙决议 建立和平委员会作为过渡行政机构", arrow: 1 },
{ id: 3, text: "日本首相高市早苗涉台及修“无核三原则”言论遭多方强烈反对", arrow: 1 }, // { id: 3, text: "日本首相高市早苗涉台及修“无核三原则”言论遭多方强烈反对", arrow: 1 },
{ id: 4, text: "美“福特”号航母打击群进入加勒比海 委方谴责其意图策动政权更迭", arrow: 1 }, // { id: 4, text: "美“福特”号航母打击群进入加勒比海 委方谴责其意图策动政权更迭", arrow: 1 },
{ id: 5, text: "BBC回应特朗普10亿-50亿美元索赔诉讼 称诽谤指控无依据", arrow: 1 }, // { id: 5, text: "BBC回应特朗普10亿-50亿美元索赔诉讼 称诽谤指控无依据", arrow: 1 },
{ id: 6, text: "俄军打击乌142个区域设施 乌军击落或压制91架俄无人机", arrow: 1 }, // { id: 6, text: "俄军打击乌142个区域设施 乌军击落或压制91架俄无人机", arrow: 1 },
{ id: 7, text: "中国女法官张玲玲以第一高票当选联合国上诉法庭法官", arrow: 0 },
{ id: 8, text: "美股三大股指17日收盘普跌 比特币跌破92000美元", arrow: 1 },
{ id: 9, text: "高盛大幅下调2026年布伦特和WTI原油价格预测", arrow: 1 },
{ id: 10, text: "2026米兰冬奥会火炬传递完整路线公布 将穿越意大利全部20个大区", arrow: 1 },
{ id: 11, text: "特朗普宣称若重掌白宫将推动美国开展自1992年以来首次核试验", arrow: 1 },
{ id: 12, text: "欧盟发布2025年秋季经济预测 欧元区今年GDP预计增长1.3%", arrow: 1 }
]); ]);
const handleGetHotNews = async () => {
try {
const res = await getHotNews();
console.log("中美博弈专题", res);
if (res.code === 200 && res.data) {
subjectData.value = res.data;
} else {
subjectData.value = [];
}
} catch (error) {
subjectData.value = [];
}
};
const handleActiveModule = (isIn, module) => {
moduleActiveId.value = isIn ? module.moduleId : "";
};
const handleToWorldHot = () => {
showPage.value = 'subject'
moduleActiveId.value = ''
};
onMounted(() => {
handleGetModuleType();
handleGetTodayNews();
handleGetHotNews();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./style.css"); @import url("./style.css");
......
src/views/riskSignal/index.vue
浏览文件 @ 1c65be4e
<template> <template>
<div class="home-wrapper"> <div class="home-wrapper">
<div class="home-main"> <div class="home-main">
<div class="home-main-center"> <div class="home-main-center">
<div class="center-center">
<div class="center-center"> <div class="center-header">
<div class="center-header"> <div class="center-header-left">
<div class="center-header-left"> <img class="iconstyle" src="./assets/images/warning.png" />
<img class="iconstyle" src="./assets/images/warning.png" ></img> <div class="center-header-title">风险信号管理</div>
<div class="center-header-title">风险信号管理</div> </div>
</div> <div class="center-header-right">
<div class="center-header-right"> <img class="img" src="./assets/images/danger.png" />
<img class="img" src="./assets/images/danger.png"></img> <div class="text">风险统计</div>
<div class="text">风险统计</div> </div>
</div> </div>
</div> <div class="center-middle">
<div class="center-middle"> <div class="center-middle-left">
<div class="center-middle-left"> <div class="lineitem">
<div class="lineitem"> <div class="item">
<div class="item"> <div class="top">
<div class="top"> <div class="dot" style="background-color: rgba(95, 101, 108, 1)"></div>
<div class="dot" style="background-color: rgba(95, 101, 108, 1);"></div> <div class="text1">本年新增风险</div>
<div class="text1">本年新增风险</div> </div>
</div> <div class="text2" style="color: rgba(95, 101, 108, 1)">
<div class="text2" style="color: rgba(95, 101, 108, 1);">219项</div> {{ basicInfo.yearAdded + " 项" }}
</div> </div>
<div class="item"> </div>
<div class="top"> <div class="item">
<div class="dot" style="background-color: rgba(95, 101, 108, 1);"></div> <div class="top">
<div class="text1">本月新增风险</div> <div class="dot" style="background-color: rgba(95, 101, 108, 1)"></div>
</div> <div class="text1">本月新增风险</div>
<div class="text2" style="color: rgba(95, 101, 108, 1);">40项</div> </div>
</div> <div class="text2" style="color: rgba(95, 101, 108, 1)">
</div> {{ basicInfo.monthAdded + " 项" }}
<div class="lineitem"> </div>
<div class="item"> </div>
<div class="top"> </div>
<div class="dot" style="background-color: rgba(5, 95, 194, 1);"></div> <div class="lineitem">
<div class="text1">已处理风险</div> <div class="item">
</div> <div class="top">
<div class="text2" style="color: rgba(5, 95, 194, 1);">212项</div> <div class="dot" style="background-color: rgba(5, 95, 194, 1)"></div>
</div> <div class="text1">已处理风险</div>
<div class="item"> </div>
<div class="top"> <div class="text2" style="color: rgba(5, 95, 194, 1)">{{ basicInfo.dealCount + " 项" }}</div>
<div class="dot" style="background-color: rgba(206, 79, 81, 1);"></div> </div>
<div class="text1">待处理风险</div> <div class="item">
</div> <div class="top">
<div class="text2" style="color: rgba(206, 79, 81, 1);">7项</div> <div class="dot" style="background-color: rgba(206, 79, 81, 1)"></div>
</div> <div class="text1">待处理风险</div>
</div> </div>
</div> <div class="text2" style="color: rgba(206, 79, 81, 1)">
<div class="center-middle-right" id="chartCalendar"></div> {{ basicInfo.pendingCount + " 项" }}
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="center-middle-right" id="chartCalendar"></div>
<div class="home-main-footer"> </div>
<div class="home-main-footer-main"> </div>
<div class="left"> </div>
<div class="left-box1">
<div class="left-box1-header"> <div class="home-main-footer">
<div class="icon"></div> <div class="home-main-footer-main">
<div class="title">{{ "风险类型" }}</div> <div class="left">
</div> <div class="left-box1">
<div class="left-box1-main"> <div class="left-box1-header">
<div <div class="icon"></div>
class="time-label" <div class="title">{{ "风险类型" }}</div>
v-for="(item, index) in riskType" </div>
:key="index" <div class="left-box1-main">
> <el-checkbox
<el-checkbox v-model="isRiskTypeCheckedAll"
v-model="item.selected" :indeterminate="isRiskTypeIndeterminate"
:label="item.name" @change="handleRiskTypeCheckAllChange"
size="large" class="checkbox-all"
/> >
</div> 全部类型
</div> </el-checkbox>
</div> <el-checkbox-group
<div class="left-box1"> class="checkbox-group"
<div class="left-box1-header"> v-model="checkedRiskType"
<div class="icon"></div> @change="handleRiskTypeChange"
<div class="title">{{ "风险来源" }}</div> >
</div> <el-checkbox
<div class="left-box1-main"> v-for="(item, index) in riskType"
<div :key="index"
class="time-label" :label="item"
v-for="(item, index) in riskSource" class="filter-checkbox"
:key="index" >
> {{ item }}
<el-checkbox </el-checkbox>
v-model="item.selected" </el-checkbox-group>
:label="item.name" </div>
size="large" </div>
/> <div class="left-box1">
</div> <div class="left-box1-header">
</div> <div class="icon"></div>
</div> <div class="title">{{ "风险来源" }}</div>
<div class="left-box1"> </div>
<div class="left-box1-header"> <div class="left-box1-main">
<div class="icon"></div> <el-checkbox
<div class="title">{{ "风险等级" }}</div> v-model="isRiskSourceCheckedAll"
</div> :indeterminate="isRiskSourceIndeterminate"
<div class="left-box1-main"> @change="handleRiskSourceCheckAllChange"
<div class="checkbox-all"
class="time-label" >
v-for="(item, index) in riskDegree" 全部来源
:key="index" </el-checkbox>
> <el-checkbox-group
<el-checkbox class="checkbox-group"
v-model="item.selected" v-model="checkedRiskSource"
:label="item.name" @change="handleRiskSourceChange"
size="large" >
/> <el-checkbox
</div> v-for="item in riskSource"
</div> :key="item.id"
</div> :label="item.id"
<div class="left-box1"> class="filter-checkbox"
<div class="left-box1-header"> >
<div class="icon"></div> {{ item.name }}
<div class="title">{{ "设计领域" }}</div> </el-checkbox>
</div> </el-checkbox-group>
<div class="left-box1-main"> </div>
<div </div>
class="time-label" <div class="left-box1">
v-for="(item, index) in area" <div class="left-box1-header">
:key="index" <div class="icon"></div>
> <div class="title">{{ "风险等级" }}</div>
<el-checkbox </div>
v-model="item.selected" <div class="left-box1-main">
:label="item.name" <el-checkbox
size="large" v-model="isRiskDegreeCheckedAll"
/> :indeterminate="isRiskDegreeIndeterminate"
</div> @change="handleRiskDegreeCheckAllChange"
</div> class="checkbox-all"
</div> >
</div> 全部等级
</el-checkbox>
<div class="right"> <el-checkbox-group
<div class="right-header"> class="checkbox-group"
<div class="header-left"> v-model="checkedRiskDegree"
<div class="btn-left" :class="{ btnleftactive: activeBtn === '全部' }" @change="handleRiskDegreeChange"
@click="handleClickBtn('全部')"> >
<div class="btn-text" :class="{ btntextactive: activeBtn === '全部' }">全部</div> <el-checkbox
</div> v-for="item in riskDegree"
<div class="btn-left" :class="{btnleftactive: activeBtn === '未处理'}" :key="item.id"
@click="handleClickBtn('未处理')"> :label="item.name"
<div class="btn-text" :class="{btntextactive: activeBtn === '未处理'}">未处理</div> class="filter-checkbox"
</div> >
<div class="btn-left" :class="{btnleftactive: activeBtn === '已处理'}" {{ item.name }}
@click="handleClickBtn('已处理')"> </el-checkbox>
<div class="btn-text" :class="{btntextactive: activeBtn === '已处理'}">已处理</div> </el-checkbox-group>
</div> </div>
</div> </div>
<div class="header-right"> <div class="left-box1">
<div class="searchbox"> <div class="left-box1-header">
<el-input <div class="icon"></div>
v-model="input" <div class="title">{{ "涉及领域" }}</div>
style="width: 268px; height: 100%" </div>
placeholder="搜索"/> <div class="left-box1-main">
<div class="search-btn"></div> <el-checkbox
</div> v-model="isAreaCheckedAll"
<div class="select-box"> :indeterminate="isAreaIndeterminate"
<el-select @change="handleAreaCheckAllChange"
v-model="releaseTime" class="checkbox-all"
placeholder="发布时间" >
style="width: 120px" 全部领域
> </el-checkbox>
<el-option <el-checkbox-group class="checkbox-group" v-model="checkedArea" @change="handleAreaChange">
v-for="item in releaseTimeList" <el-checkbox v-for="item in area" :key="item.id" :label="item.name" class="filter-checkbox">
:key="item.value" {{ item.name }}
:label="item.label" </el-checkbox>
:value="item.value" </el-checkbox-group>
/> </div>
</el-select> </div>
</div> </div>
</div>
</div> <div class="right">
<div class="right-header">
<div class="right-main"> <div class="header-left">
<div class="itemlist" v-for="(val, idx) in riskList" :key="idx"> <div
<div class="item-box"> class="btn-left"
<div class="box-title"> :class="{ btnleftactive: activeProcessStatusId === item.id }"
<div class="risktitle">{{ val.title }}</div> @click="handleClickBtn(item)"
<div class="risktype" :style="{backgroundColor: val.bgcolor,color: val.textcolor}">{{ val.risktype }}</div> v-for="item in processStatusList"
</div> :key="item.id"
<div class="box-source"> >
<img class="source-pic" :src="val.pic" alt="" /> <div class="btn-text" :class="{ btntextactive: activeProcessStatusId === item.id }">
<div class="source-text">{{ val.origin }}</div> {{ item.name }}
<div class="source-text">{{ val.time }}</div> </div>
</div> </div>
<div class="desc-box">{{ val.dsc }}</div> </div>
<div class="tag-box" > <div class="header-right">
<el-tag v-for="tag,index in val.tag" :key="index">{{ tag }}</el-tag> <div class="searchbox">
</div> <el-input
</div> @keyup.enter="handleSearch"
<div class="splitline"></div> v-model="kewword"
</div> style="width: 268px; height: 100%"
</div> placeholder="搜索"
<div class="right-footer"> />
<div class="footer-left"> <div class="search-btn" @click="handleSearch"></div>
{{ "共105项调查" }} </div>
</div> <div class="select-box">
<div class="footer-right"> <div class="paixu-btn" @click="handleSwithSort">
<el-pagination <div class="icon1">
background <img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
layout="prev, pager, next" <img v-else src="@/assets/icons/jiangxu1.png" alt="" />
:total="105" </div>
/> <div class="text">{{ "发布时间" }}</div>
</div> <div class="icon2">
</div> <img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
</div> <img v-else src="@/assets/icons/jiangxu2.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="right-main">
<div class="itemlist" v-for="(val, idx) in riskList" :key="idx">
<div class="box-title">
<div class="risktitle">{{ val.title }}</div>
<div
class="risktype"
:class="{
risk1: val.risktype === '特别重大风险' || val.risktype === '特别重大',
risk2: val.risktype === '重大风险',
risk3: val.risktype === '一般风险'
}"
>
<div
class="icon"
:class="{
icon1: val.risktype === '特别重大风险' || val.risktype === '特别重大',
icon2: val.risktype === '重大风险',
icon3: val.risktype === '一般风险'
}"
></div>
<div class="text">{{ val.risktype }}</div>
</div>
</div>
<div class="box-source">
<img class="source-pic" :src="val.pic ? val.pic : DefaultIcon2" alt="" />
<div class="source-text">{{ val.origin + " · " + val.fileType }}</div>
<div class="source-text">{{ val.time }}</div>
</div>
<div class="desc-box">{{ val.dsc }}</div>
<div class="tag-box" v-if="val.tag.length">
<div class="tag" v-for="(tag, index) in val.tag" :key="index">{{ tag }}</div>
</div>
</div>
</div>
<div class="right-footer">
<div class="footer-left">
{{ `共${totalNum}项调查` }}
</div>
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="pageSize"
:current-page="currentPage"
:total="totalNum"
background
layout="prev, pager, next"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import * as echarts from "echarts"; import { getCountInfo, getDailyCount, getPageQuery } from "@/api/riskSignal/index";
import router from "@/router"; import setChart from "@/utils/setChart";
import getCalendarHeatChart from "./utils/cleandarHeat"; import getCalendarHeatChart from "./utils/cleandarHeat";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
const activeBtn = ref("全部"); const riskType = ref(["科技法案", "行政令", "智库报告", "出口管制", "投融资限制", "市场准入限制", "规则限制"]);
const handleClickBtn = name => { const isRiskTypeCheckedAll = ref(false);
activeBtn.value = name; const isRiskTypeIndeterminate = ref(true);
}; const checkedRiskType = ref([]);
const riskType = ref([ const handleRiskTypeCheckAllChange = val => {
{ checkedRiskType.value = val ? riskType.value : [];
name: "科技法案", isRiskTypeIndeterminate.value = false;
selected: true, handleGetPageQuery();
}, };
{ const handleRiskTypeChange = val => {
name: "行政令", const checkedCount = val.length;
selected: true, isRiskTypeCheckedAll.value = checkedCount === riskType.value.length;
}, isRiskTypeIndeterminate.value = checkedCount > 0 && checkedCount < riskType.value.length;
{ handleGetPageQuery();
name: "智库报告", };
selected: true,
},
{
name: "出口管制",
selected: true,
},
{
name: "投融资限制",
selected: true,
},
{
name: "市场准入限制",
selected: true,
},
{
name: "规则限制",
selected: true,
},
]);
const riskSource = ref([ const riskSource = ref([
{ {
name: "美国", name: "美国",
selected: true, id: "0502"
}, },
{ {
name: "欧盟", name: "韩国",
selected: true, id: "0103"
}, },
{ {
name: "日本", name: "日本",
selected: true, id: "0104"
}, },
{ {
name: "韩国", name: "德国",
selected: true, id: "0216"
}, },
{
name: "英国",
id: "0217"
},
{
name: "法国",
id: "0222"
},
{
name: "澳大利亚",
id: "0401"
}
]); ]);
const isRiskSourceCheckedAll = ref(false);
const isRiskSourceIndeterminate = ref(true);
const checkedRiskSource = ref([]);
const handleRiskSourceCheckAllChange = val => {
checkedRiskSource.value = val
? riskSource.value.map(item => {
return item.id;
})
: [];
isRiskSourceIndeterminate.value = false;
handleGetPageQuery();
};
const handleRiskSourceChange = val => {
const checkedCount = val.length;
isRiskSourceCheckedAll.value = checkedCount === riskSource.value.length;
isRiskSourceIndeterminate.value = checkedCount > 0 && checkedCount < riskSource.value.length;
handleGetPageQuery();
};
const riskDegree = ref([ const riskDegree = ref([
{ {
name: "特别重大风险", name: "特别重大",
selected: true, id: "特别重大"
}, },
{ {
name: "重大风险", name: "重大风险",
selected: true, id: "重大风险"
}, },
{ {
name: "较大风险", name: "较大风险",
selected: true, id: "较大风险"
}, },
{ {
name: "一般风险", name: "一般风险",
selected: true, id: "一般风险"
}, },
{ {
name: "无风险", name: "无风险",
selected: true, id: "无风险"
} }
]); ]);
const isRiskDegreeCheckedAll = ref(false);
const isRiskDegreeIndeterminate = ref(true);
const checkedRiskDegree = ref([]);
const handleRiskDegreeCheckAllChange = val => {
checkedRiskDegree.value = val
? riskDegree.value.map(item => {
return item.id;
})
: [];
isRiskDegreeIndeterminate.value = false;
handleGetPageQuery();
};
const handleRiskDegreeChange = val => {
const checkedCount = val.length;
isRiskDegreeCheckedAll.value = checkedCount === riskDegree.value.length;
isRiskDegreeIndeterminate.value = checkedCount > 0 && checkedCount < riskDegree.value.length;
handleGetPageQuery();
};
const area = ref([ const area = ref([
{ {
name: "人工智能", name: "人工智能",
selected: true, id: 1
}, },
{ {
name: "集成电路", name: "生物科技",
selected: true, id: 2
}, },
{ {
name: "通信网络", name: "新一代通信技术",
selected: true, id: 3
}, },
{ {
name: "量子科技", name: "量子科技",
selected: true, id: 4
}, },
{ {
name: "生物科技", name: "新能源",
selected: true, id: 5
}, },
{ {
name: "能源", name: "集成电路",
selected: true, id: 6
}, },
{ {
name: "航空航天", name: "海洋",
selected: true, id: 7
}, },
{ {
name: "先进制造", name: "先进制造",
selected: true, id: 8
}, },
{
name: "新材料",
id: 9
},
{
name: "航空航天",
id: 10
},
{
name: "深海",
id: 11
},
{
name: "极地",
id: 12
},
{
name: "太空",
id: 13
},
{
name: "核",
id: 14
},
{
name: "其他",
id: 99
}
]); ]);
const releaseTime = ref("发布时间"); const isAreaCheckedAll = ref(false);
const isAreaIndeterminate = ref(true);
const releaseTimeList = ref([ const checkedArea = ref([]);
{
label: "近半年发布", const handleAreaCheckAllChange = val => {
value: "近半年发布", checkedArea.value = val
}, ? area.value.map(item => {
{ return item.id;
label: "近一年发布", })
value: "近一年发布", : [];
}, isAreaIndeterminate.value = false;
{ handleGetPageQuery();
label: "近两年发布", };
value: "近两年发布", const handleAreaChange = val => {
}, const checkedCount = val.length;
{ isAreaCheckedAll.value = checkedCount === area.value.length;
label: "近三年发布", isAreaIndeterminate.value = checkedCount > 0 && checkedCount < area.value.length;
value: "近三年发布", handleGetPageQuery();
}, };
{
label: "近五年发布", const processStatusList = ref([
value: "近五年发布", {
}, name: "全部",
id: -1
},
{
name: "未处理",
id: 0
},
{
name: "处理中",
id: 1
},
{
name: "已处理",
id: 2
}
]); ]);
const activeProcessStatusId = ref(-1);
const handleClickBtn = item => {
activeProcessStatusId.value = item.id;
handleGetPageQuery();
};
const riskList = ref([ const riskList = ref([
{ // {
title: "扩大实体清单制裁范围，对中企子公司实施同等管制", // title: "扩大实体清单制裁范围，对中企子公司实施同等管制",
origin: "美国商务部 · 实体清单", // origin: "美国商务部",
time:"2025年11月10日 16:14", // fileType: "实体清单",
dsc: "任何被列入美国出口管制“实体清单”或“军事最终用户清单”的企业，如果其直接或间接持有另一家公司 ​50%或以上的股权，那么这家被控股的公司也将自动受到与清单上母公司同等的出口管制限制", // time: "2025年11月10日 16:14",
tag:["生物科技","人工智能"], // dsc: "任何被列入美国出口管制“实体清单”或“军事最终用户清单”的企业，如果其直接或间接持有另一家公司 ​50%或以上的股权，那么这家被控股的公司也将自动受到与清单上母公司同等的出口管制限制",
risktype: "·特别重大风险", // tag: ["生物科技", "人工智能"],
pic: "src/views/riskSignal/assets/images/origin1.png", // risktype: "特别重大风险",
textcolor:"rgba(206, 79, 81, 1)", // pic: "src/views/riskSignal/assets/images/origin1.png"
bgcolor:"rgba(206, 79, 81, 0.1)" // }
}, // {
{ // title: "大而美法案通过国会众议院投票，将提交至总统签署",
title: "大而美法案通过国会众议院投票，将提交至总统签署", // origin: "美国国会 · 科技法案",
origin: "美国国会 · 科技法案", // time: "2025年11月10日 16:14",
time:"2025年11月10日 16:14", // dsc: "",
dsc: "", // tag: ["能源", "人工智能"],
tag:["能源","人工智能"], // risktype: "重大风险",
risktype: "·重大风险", // pic: "src/views/riskSignal/assets/images/origin2.png",
pic: "src/views/riskSignal/assets/images/origin2.png", // textcolor: "rgba(255, 149, 77, 1)",
textcolor:"rgba(255, 149, 77, 1)", // bgcolor: "rgba(255, 149, 77, 0.1)"
bgcolor:"rgba(255, 149, 77, 0.1)" // },
}, // {
{ // title: "兰德公司发布智库报告《中美经济竞争：复杂经济和地缘政治关系中的收益和风险》",
title: "兰德公司发布智库报告《中美经济竞争：复杂经济和地缘政治关系中的收益和风险》", // origin: "兰德公司 · 科技智库",
origin: "兰德公司 · 科技智库", // time: "2025年11月10日 16:14",
time:"2025年11月10日 16:14", // dsc: "包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。",
dsc: "包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。", // tag: ["生物科技", "人工智能", "集成电路"],
tag:["生物科技","人工智能","集成电路"], // risktype: "一般风险",
risktype: "·一般风险", // pic: "src/views/riskSignal/assets/images/origin3.png",
pic: "src/views/riskSignal/assets/images/origin3.png", // textcolor: "rgba(5, 95, 194, 1)",
textcolor:"rgba(5, 95, 194, 1)", // bgcolor: "rgba(5, 95, 194, 0.1)"
bgcolor:"rgba(5, 95, 194, 0.1)" // },
}, // {
{ // title: "美国白宫发布总统政令《关于进一步延长TikTok执法宽限期的行政令》",
title: "美国白宫发布总统政令《关于进一步延长TikTok执法宽限期的行政令》", // origin: "美国白宫 · 总统政令",
origin: "美国白宫 · 总统政令", // time: "2025年11月10日 16:14",
time:"2025年11月10日 16:14", // dsc: "再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。",
dsc: "再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。", // tag: ["人工智能"],
tag:["人工智能"], // risktype: "一般风险",
risktype: "·一般风险", // pic: "src/views/riskSignal/assets/images/origin2.png",
pic: "src/views/riskSignal/assets/images/origin2.png", // textcolor: "rgba(5, 95, 194, 1)",
textcolor:"rgba(5, 95, 194, 1)", // bgcolor: "rgba(5, 95, 194, 0.1)"
bgcolor:"rgba(5, 95, 194, 0.1)" // },
}, // {
{ // title: "美国财政部更新《特别指定国民清单》",
title: "美国财政部更新《特别指定国民清单》", // origin: "美国财政部 · 特别指定国民清单",
origin: "美国财政部 · 特别指定国民清单", // time: "2025年11月10日 16:14",
time:"2025年11月10日 16:14", // dsc: "",
dsc: "", // tag: ["生物科技"],
tag:["生物科技"], // risktype: "特别重大风险",
risktype: "·特别重大风险", // pic: "src/views/riskSignal/assets/images/origin4.png",
pic: "src/views/riskSignal/assets/images/origin4.png", // textcolor: "rgba(206, 79, 81, 1)",
textcolor:"rgba(206, 79, 81, 1)", // bgcolor: "rgba(206, 79, 81, 0.1)"
bgcolor:"rgba(206, 79, 81, 0.1)" // },
}, // {
{ // title: "美国FDA针对两家中国第三方检测机构的数据完整性问题采取行动",
title: "美国FDA针对两家中国第三方检测机构的数据完整性问题采取行动", // origin: "美国食品药品监督管理局 · 规则限制",
origin: "美国食品药品监督管理局 · 规则限制", // time: "2025年11月10日 16:14",
time:"2025年11月10日 16:14", // dsc: "FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏州大学卫生与环境技术研究所）正式发出“一般信函”。",
dsc: "FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏州大学卫生与环境技术研究所）正式发出“一般信函”。", // tag: ["生物科技", "人工智能"],
tag:["生物科技","人工智能"], // risktype: "特别重大风险",
risktype: "·特别重大风险", // pic: "src/views/riskSignal/assets/images/origin5.png",
pic: "src/views/riskSignal/assets/images/origin5.png", // textcolor: "rgba(206, 79, 81, 1)",
textcolor:"rgba(206, 79, 81, 1)", // bgcolor: "rgba(206, 79, 81, 0.1)"
bgcolor:"rgba(206, 79, 81, 0.1)" // }
} ]);
const calendarData = ref([
// ["2025-01-01", 20],
// ["2025-01-05", 120],
// ["2025-01-09", 220],
// ["2025-01-15", 320],
// ["2025-01-20", 120],
// ["2025-01-24", 420],
// ["2025-02-05", 80],
// ["2025-02-08", 280],
// ["2025-02-18", 480],
// ["2025-02-11", 420],
// ["2025-02-21", 320],
// ["2025-03-05", 160],
// ["2025-03-09", 260],
// ["2025-03-19", 460],
// ["2025-03-26", 430],
// ["2025-04-01", 70],
// ["2025-04-05", 170],
// ["2025-04-11", 270],
// ["2025-04-18", 370],
// ["2025-05-05", 210],
// ["2025-05-09", 210],
// ["2025-05-15", 410],
// ["2025-05-22", 480],
// ["2025-06-06", 45],
// ["2025-06-09", 415],
// ["2025-06-16", 245],
// ["2025-06-19", 332],
// ["2025-07-04", 127],
// ["2025-07-09", 327],
// ["2025-07-24", 427],
// ["2025-08-08", 150],
// ["2025-08-11", 250],
// ["2025-08-15", 350],
// ["2025-08-22", 460],
// ["2025-09-10", 480],
// ["2025-09-18", 312],
// ["2025-10-15", 60],
// ["2025-10-19", 80],
// ["2025-10-21", 190]
]); ]);
// 绘制echarts图表 // 基本统计信息
const setChart = (option, chartId) => { const basicInfo = ref({
let chartDom = document.getElementById(chartId); dealCount: 0,
chartDom.removeAttribute("_echarts_instance_"); monthAdded: 0,
let chart = echarts.init(chartDom); pendingCount: 0,
chart.setOption(option); yearAdded: 0
return chart; });
const handleGetCountInfo = async () => {
try {
const res = await getCountInfo();
console.log("基本统计信息", res);
if (res.code === 200 && res.data) {
basicInfo.value = res.data;
}
} catch (error) {}
}; };
// 每日统计信息
const handleGetDailyCount = async () => {
try {
const res = await getDailyCount();
console.log("每日统计信息", res);
if (res.code === 200 && res.data) {
calendarData.value = res.data.map(item => {
return [item.day, item.count];
});
}
} catch (error) {}
};
const handleCleandarChart = async () => {
await handleGetDailyCount();
let chartCalendar = getCalendarHeatChart(calendarData.value);
setChart(chartCalendar, "chartCalendar");
};
const calendarData = ref([ //
["2025-01-01", 20], const isSort = ref(true); // true 升序 false 倒序
["2025-01-05", 120], const handleSwithSort = () => {
["2025-01-09", 220], isSort.value = !isSort.value;
["2025-01-15", 320], handleGetPageQuery();
["2025-01-20", 120], };
["2025-01-24", 420],
["2025-02-05", 80],
["2025-02-08", 280],
["2025-02-18", 480],
["2025-02-11", 420],
["2025-02-21", 320],
["2025-03-05", 160],
["2025-03-09", 260],
["2025-03-19", 460],
["2025-03-26", 430],
["2025-04-01", 70],
["2025-04-05", 170],
["2025-04-11", 270],
["2025-04-18", 370],
["2025-05-05", 210],
["2025-05-09", 210],
["2025-05-15", 410],
["2025-05-22", 480],
["2025-06-06", 45],
["2025-06-09", 415],
["2025-06-16", 245],
["2025-06-19", 332],
["2025-07-04", 127],
["2025-07-09", 327],
["2025-07-24", 427],
["2025-08-08", 150],
["2025-08-11", 250],
["2025-08-15", 350],
["2025-08-22", 460],
["2025-09-10", 480],
["2025-09-18", 312],
["2025-10-15", 60],
["2025-10-19", 80],
["2025-10-21", 190],
]);
onMounted(async () => { // 搜索
const kewword = ref("");
const handleSearch = async () => {
handleGetPageQuery();
};
// 风险信号总数
const totalNum = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
handleGetPageQuery();
};
// 按条件分页查询风险信号信息
const handleGetPageQuery = async () => {
let params;
if (activeProcessStatusId.value === -1) {
params = {
riskTypes: checkedRiskType.value,
srcCountryList: checkedRiskSource.value,
riskLevels: checkedRiskDegree.value,
techDomainIds: checkedArea.value,
keywords: kewword.value,
pageNum: currentPage.value,
pageSize: pageSize.value,
sortField: "time",
sortOrder: isSort ? "asc" : "desc"
};
} else {
params = {
riskTypes: checkedRiskType.value,
srcCountryList: checkedRiskSource.value,
riskLevels: checkedRiskDegree.value,
techDomainIds: checkedArea.value,
dealStatus: activeProcessStatusId.value,
keywords: kewword.value,
pageNum: 1,
pageSize: 10,
sortField: "time",
sortOrder: isSort ? "asc" : "desc"
};
}
let chartCalendar = getCalendarHeatChart(calendarData.value); try {
setChart(chartCalendar, "chartCalendar"); const res = await getPageQuery(params);
console.log("按条件查询", res);
if (res.code === 200 && res.data) {
totalNum.value = res.data.totalElements;
riskList.value = res.data.content.map(item => {
return {
title: item.titleZh,
origin: item.srcOrgId,
fileType: "暂无数据",
time: item.time,
dsc: item.contentZh,
tag: [],
risktype: item.level,
pic: ""
};
});
}
} catch (error) {
console.error("按条件查询error", error);
}
};
onMounted(async () => {
handleGetCountInfo();
handleCleandarChart();
handleGetPageQuery();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
} }
.home-wrapper { .home-wrapper {
.home-main { .home-main {
// width: 1400px; // width: 1400px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
background: url("./assets/images/background.png"); background: url("./assets/images/background.png");
background-size: 100% 100%; background-size: 100% 100%;
.home-main-center { .home-main-center {
margin-top: 34px; margin-top: 34px;
.center-center { .center-center {
margin: 0 auto; margin: 0 auto;
margin-top: 24px; margin-top: 24px;
width: 1600px; width: 1600px;
height: 288px; height: 288px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.center-header { .center-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.center-header-left { .center-header-left {
margin-left: 30px; margin-left: 30px;
display: flex; display: flex;
margin-top: 15px; margin-top: 15px;
.iconstyle{ .iconstyle {
width: 27px; width: 27px;
height: 24px; height: 24px;
margin-top: 3px; margin-top: 3px;
} }
.center-header-title{ .center-header-title {
margin-left: 10px; margin-left: 10px;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
} }
} }
.center-header-right { .center-header-right {
margin-top: 16px; margin-top: 16px;
margin-right: 59px; margin-right: 59px;
width: 118px; width: 118px;
height: 36px; height: 36px;
border-radius: 6px; border-radius: 6px;
background-color: rgba(5, 95, 194, 1); background-color: rgba(5, 95, 194, 1);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.img{ .img {
width: 16px; width: 16px;
height: 15px; height: 15px;
} }
.text{ .text {
margin-left: 8px; margin-left: 8px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
} }
} }
.center-middle{ .center-middle {
display: flex; display: flex;
.center-middle-left{ .center-middle-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.lineitem{ .lineitem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.item{ .item {
margin-left: 61px; margin-left: 61px;
margin-top: 33px; margin-top: 33px;
width: 111px; width: 111px;
height: 66px; height: 66px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
.top{ .top {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.dot{ .dot {
width: 6px; width: 6px;
height: 6px; height: 6px;
margin-top: 9px; margin-top: 9px;
margin-right: 7px; margin-right: 7px;
border-radius: 3px; border-radius: 3px;
} }
.text1{ .text1 {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
text-align: right; text-align: right;
} }
} }
.text2{ .text2 {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
line-height: 42px; line-height: 42px;
text-align: right; text-align: right;
} }
} }
} }
} }
.center-middle-right{ .center-middle-right {
width: 1159px; width: 1159px;
height: 189px; height: 189px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px; border-radius: 4px;
margin: 30px auto 0; margin: 30px auto 0;
} }
} }
} }
} }
.home-main-footer { .home-main-footer {
// width: 100%; // width: 100%;
// height: 1059px; // height: 1059px;
background: rgba(248, 249, 250, 1); background: rgba(248, 249, 250, 1);
.home-main-footer-header { .home-main-footer-header {
width: 1600px; width: 1600px;
height: 42px; height: 42px;
margin: 36px auto; margin: 36px auto;
// background: orange; // background: orange;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-box {
width: 1000px; width: 1000px;
display: flex; display: flex;
.btn { .btn {
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 42px; line-height: 42px;
padding: 0 24px; padding: 0 24px;
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 0); background: rgba(20, 89, 187, 0);
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgba(20, 89, 187, 0.1); background: rgba(20, 89, 187, 0.1);
} }
} }
.btnActive { .btnActive {
padding: 0 24px; padding: 0 24px;
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
&:hover { &:hover {
color: #fff; color: #fff;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
} }
} }
} }
}
} .home-main-footer-main {
.home-main-footer-main { width: 1600px;
width: 1600px; margin-bottom: 30px;
margin-bottom: 30px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); // background: rgba(255, 255, 255, 1);
// background: rgba(255, 255, 255, 1); margin: 30px auto;
margin: 30px auto; box-sizing: border-box;
box-sizing: border-box; // padding: 20px;
// padding: 20px; display: flex;
display: flex; .left {
.left { width: 389px;
width: 389px; height: 950px;
height: 747px; border-radius: 4px;
border-radius: 4px; box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); background: rgba(255, 255, 255, 1);
background: rgba(255, 255, 255, 1); .left-box1 {
.left-box1 { margin-top: 17px;
margin-top: 17px;
.left-box1-header {
.left-box1-header { display: flex;
display: flex; .icon {
.icon { width: 8px;
width: 8px; height: 16px;
height: 16px; margin-top: 4px;
margin-top: 4px; border-radius: 0px 4px 4px 0;
border-radius: 2px 2px 0 0; background: var(--color-main-active);
background: var(--color-main-active); }
} .title {
.title { height: 2px;
height: 2px; margin-left: 17px;
margin-left: 17px; color: var(--color-main-active);
color: var(--color-main-active); font-family: Microsoft YaHei;
font-family: Microsoft YaHei; font-size: 16px;
font-size: 16px; font-weight: 700;
font-weight: 700; line-height: 24px;
line-height: 24px; }
} }
} .left-box1-main {
.left-box1-main { margin-top: 10px;
display: grid; }
grid-template-columns: repeat(2,160px); }
width: 336px; }
margin-top: 10px; .right {
margin-left: 17px; margin-left: 16px;
.time-label { width: 1196px;
height: 30px; border-radius: 4px;
width: 160px; box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
margin-left: 8px; background: rgba(255, 255, 255, 1);
} .right-header {
} height: 60px;
} display: flex;
} justify-content: space-between;
.right { border-bottom: 1px solid rgba(234, 236, 238, 1);
margin-left: 16px; .header-left {
width: 1196px; display: flex;
border-radius: 4px; margin-left: 44px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); gap: 36px;
background: rgba(255, 255, 255, 1); .btn-left {
.right-header { display: flex;
height: 60px; height: 60px;
display: flex; cursor: pointer;
justify-content: space-between; align-items: center;
.header-left{ .btn-text {
display: flex; font-size: 18px;
margin-left: 44px; font-weight: 400;
gap: 36px; line-height: 24px;
.btn-left{ color: rgba(59, 65, 75, 1);
display: flex; text-align: center;
height: 60px; }
cursor: pointer; .btntextactive {
align-items: center; font-weight: 700;
.btn-text{ color: rgba(5, 95, 194, 1);
font-size: 18px; }
font-weight: 400; }
line-height: 24px; .btnleftactive {
color: rgba(59, 65, 75, 1); border-bottom: 2px solid rgba(5, 95, 194, 1);
text-align: center; }
} }
.btntextactive{ .header-right {
font-weight: 700; display: flex;
color: rgba(5, 95, 194, 1); margin-right: 42px;
} gap: 12px;
} align-items: center;
.btnleftactive{ .searchbox {
border-bottom: 2px solid rgba(5, 95, 194, 1); display: flex;
}
} width: 300px;
.header-right{ height: 32px;
display: flex; border-radius: 4px;
margin-right: 42px; border: 1px solid rgba(230, 231, 232, 1);
gap: 12px; background: rgba(255, 255, 255, 1);
align-items: center; box-sizing: border-box;
.searchbox{ .search-btn {
display: flex; width: 16px;
height: 16px;
width: 300px; margin: 8px;
height: 32px; cursor: pointer;
border-radius: 4px; background: url("./assets/images/search-icon.png");
border: 1px solid rgba(230, 231, 232, 1); }
background: rgba(255, 255, 255, 1); }
box-sizing: border-box; .select-box {
.search-btn{ width: 120px;
width: 16px; height: 32px;
height: 16px; box-sizing: border-box;
margin: 8px; .paixu-btn {
cursor: pointer; display: flex;
background: url("./assets/images/search-icon.png"); width: 120px;
} height: 32px;
} box-sizing: border-box;
.select-box { border: 1px solid rgba(230, 231, 232, 1);
width: 120px; border-radius: 4px;
height: 32px; background: rgba(255, 255, 255, 1);
box-sizing: border-box; &:hover {
} background: var(--color-bg-hover);
} }
} cursor: pointer;
.right-main { .icon1 {
width: 1196px; width: 11px;
display: flex; height: 14px;
flex-direction: column; margin-top: 10px;
.itemlist { margin-left: 9px;
width: 1138px; img {
display: flex; width: 100%;
margin-top: 22px; height: 100%;
margin-left: 18px; }
flex-direction: column; }
.item-box{ .text {
width: 1113px; height: 19px;
margin-left: 25px; color: rgba(95, 101, 108, 1);
display: flex; font-family: Microsoft YaHei;
flex-direction: column; font-size: 14px;
gap: 10px; font-weight: 400;
.box-title{ line-height: 18px;
display: flex; letter-spacing: 0px;
justify-content: space-between; text-align: left;
.risktitle{ margin-top: 7px;
font-size: 18px; margin-left: 9px;
font-weight: 700; }
line-height: 24px; .icon2 {
color: rgba(59, 65, 75, 1); width: 10px;
} height: 5px;
.risktype{ margin-top: 5px;
height: 28px; margin-left: 13px;
border-radius: 20px; img {
font-size: 16px; width: 100%;
font-weight: 400; height: 100%;
line-height: 24px; }
} }
} }
.box-source{ }
display: flex; }
flex-direction: row; }
align-items: center; .right-main {
height: 24px; width: 1196px;
gap: 10px; min-height: 790px;
.source-pic{ .itemlist {
width: 16px; padding-left: 25px;
height: 16px; padding-top: 18px;
} padding-bottom: 16px;
.source-text{ width: 1138px;
font-size: 16px; display: flex;
font-weight: 400; margin-left: 18px;
line-height: 24px; flex-direction: column;
color: rgba(95, 101, 108, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
}
} .box-title {
.desc-box{ height: 28px;
font-size: 16px; display: flex;
font-weight: 400; justify-content: space-between;
line-height: 24px; .risktitle {
color: rgba(59, 65, 75, 1); font-size: 18px;
text-align: justify; font-weight: 700;
} line-height: 24px;
.tag-box{ color: rgba(59, 65, 75, 1);
display: flex; }
flex-direction: row; .risktype {
gap: 8px; height: 28px;
} padding: 0 8px;
} border-radius: 20px;
.splitline{ font-size: 16px;
margin: 16px auto; font-weight: 400;
background-color: rgba(234, 236, 238, 1); line-height: 28px;
height: 1px; display: flex;
width: 1138px; justify-content: center;
} align-items: center;
gap: 6px;
} .icon {
} width: 4px;
.right-footer { height: 4px;
display: flex; border-radius: 2px;
// height: 60px; }
// background: orange; .icon1 {
margin: 34px auto; background: rgba(206, 79, 81, 1);
justify-content: space-between; }
.footer-left { .icon2 {
color: rgba(59, 65, 75, 1); background: rgba(255, 149, 77, 1);
font-family: Microsoft YaHei; }
font-size: 14px; .icon3 {
font-weight: 400; background: var(--color-main-active);
line-height: 18px; }
margin-left: 24px; }
margin-top: 6px; .risk1 {
} background: rgba(206, 79, 81, 0.1);
.footer-right { color: rgba(206, 79, 81, 1);
margin-right: 24px; }
} .risk2 {
} background: rgba(255, 149, 77, 0.1);
} color: rgba(255, 149, 77, 1);
} }
} .risk3 {
} background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
}
}
.box-source {
margin-top: 6px;
display: flex;
flex-direction: row;
align-items: center;
height: 24px;
gap: 10px;
.source-pic {
width: 16px;
height: 16px;
}
.source-text {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgba(95, 101, 108, 1);
}
}
.desc-box {
margin-top: 9px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgba(59, 65, 75, 1);
text-align: justify;
}
.tag-box {
height: 28px;
margin-top: 11px;
display: flex;
flex-direction: row;
gap: 8px;
.tag {
height: 28px;
padding: 0 8px;
line-height: 28px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
}
}
}
}
.right-footer {
display: flex;
height: 90px;
padding-top: 30px;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
}
}
}
}
}
}
.checkbox-all {
margin-left: 20px;
width: 260px;
}
.filter-checkbox {
width: 130px;
margin-left: 20px;
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论