Skip to content

R
risk-monitor
提交 6a02483e authored 作者: 胡卉清's avatar 胡卉清
浏览文件
操作

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !6
上级 6abf3e2d 205e7c51
隐藏空白字符变更
内嵌 并排
正在显示 包含 804 行增加 和 0 行删除
src/views/overView/index.vue 0 → 100644
浏览文件 @ 6a02483e
<!-- 中M博弈概览页 -->
<template>
<div class="content-main">
<!-- 面包屑 -->
<div class="content-title"><span>国家科技安全</span>> <span>中美博弈概览 </span></div>
<!-- 中美博弈最新动态内容-->
<div class="content-box">
<div class="title-text">中美博弈最新动态 </div>
<div class="title-text-small">
提供半导体、AI、量子等关键领域的竞争动态、政策追踪与产业链分析，实时把握中美博弈全局
</div>
<div class="box">
<div class="item left">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/overview-card-header-icon.png"></img>
<div class="item-header-text">机构动态</div>
<div class="item-header-more">更多 +</div>
</div>
<div class="item-header-divider"></div>
<div class="item-content">
<div class="item-card" style="">
<div class="item-card-btn-left" @click="changeOrganizationNews('left')">
<img class="item-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<!-- 机构动态内容-->
<div class="item-card-content">
<div class="item-card-content-header">
<div style="width: calc(100% - 80px);">
<div class="item-card-content-title">
{{ organizationNews[organizationNewsShow].title }}
</div>
<div class="item-card-content-title-small">
{{ organizationNews[organizationNewsShow].time, organizationNews[organizationNewsShow].adress }}
</div>
</div>
<img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image" alt="">
</div>
<div class="item-header-divider"></div>
<div class="item-card-content-text ">
{{ organizationNews[organizationNewsShow].content }}
</div>
<div style="display: flex">
<div class="item-card-content-tag" v-for="tag in organizationNews[organizationNewsShow].tag"
:style="{ color: tag.textColor, background: tag.color, borderColor: tag.color }">
{{ tag.text }}
</div>
</div>
</div>
<div class="item-card-btn-right" @click="changeOrganizationNews('right')">
<img class="item-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div>
<div class="item-card-right ">
<div class="item-list">
<div v-for="organizationItem in organizationList" style="height: 40px">
<div style="display: flex;margin: 10px">
<div class="item-list-punblier">
{{ organizationItem.punblier }}
</div>
<div class="item-list-content">
{{ organizationItem.content }}
</div>
<div class="item-list-time">
{{ organizationItem.time }}
</div>
</div>
<div class="item-header-divider"></div>
</div>
</div>
</div>
</div>
</div>
<!--风险信号-->
<div class="item left">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png"></img>
<div class="item-header-text" style="background-color: #CE4F51;">风险信号</div>
</div>
<div class="item-header-divider"></div>
<div style="padding: 30px 10px;height: 350px;">
<div class="waring-item" v-for="(item, index) in warningList" :key="index">
<div style="display: flex;height: 40px;">
<div class="waring-status" :style="{
color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
}">
{{ item.status === 0 ? '特别重大' : item.status === 1 ? '重大风险' : '一般风险'
}}
</div>
<div class="waring-text">
{{ item.title }}
</div>
<div class="waring-time">{{ item.time }}</div>
</div>
<div class="item-header-divider"></div>
</div>
</div>
<div class="item-btn">
查看更多
</div>
</div>
<!--新闻资讯-->
<div class="item right">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/news-card-header-icon.png"></img>
<div class="item-header-text" style="background: rgba(255, 255, 255, 0.65) ;color:#055FC2">新闻资讯</div>
<div class="item-header-more" style=" color:#055FC2">更多 +</div>
</div>
<div class="item-header-divider"></div>
<div class="news-box">
<div v-for="item in newsList" class="news-box-item">
<div style=" display: flex;">
<img :src="item.image"></img>
<div style="padding: 0 10px ;">
<div class="news-box-title">
{{ item.title }}
</div>
<div class="news-box-title-small">
{{ item.time + item.publier }}
</div>
</div>
</div>
</div>
</div>
</div>
<!--人物动态-->
<div class="item right">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/people-card-header-icon.png"></img>
<div class="item-header-text" style="background: rgba(255, 255, 255, 0.65) ;color:#055FC2">人物动态</div>
<div class="item-header-more" style=" color:#055FC2">更多 +</div>
</div>
<div class="item-header-divider"></div>
<div class="character-box">
<div class="character-item" v-for="item in characterDynamics">
<img :src="item.image" class="character-image"></img>
<div class="talk-box">
<div style="display: flex;">
<div class="talk-title">
{{ item.name }}
</div>
<div style="width: 60%;text-align: right;">
{{ item.position + '.' + item.time }}
</div>
</div>
{{ item.talk }}
</div>
</div>
</div>
</div>
</div>
<div>
<Thematicanalysis />
<ResourceSupport />
<strengthComparison />
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import Thematicanalysis from './component/Thematicanalysis.vue'
import ResourceSupport from './component/ResourceSupport.vue'
import strengthComparison from './component/strengthComparison.vue'
import router from "@/router";
import { color } from "echarts";
const organizationNews = ref([
{
title: '1美国白宫发布关于进一步延长TikTok执法宽限期的行政令',
time: '2025年9月16日',
adress: '美国白宫',
image: '/testData/organizationNews-image1.png',
content: '9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需',
tag: [{
color: '#FFF1F0',
textColor: ' rgba(245, 34, 45, 1)',
text: '人工智能'
}, {
color: '#E6F4FF',
textColor: ' rgba(22, 119, 255, 1)',
text: '通信网络'
}]
},
{
title: '2美国白宫发布关于进一步延长TikTok执法宽限期的行政令',
time: '2025年9月16日',
adress: '美国白宫',
image: '/testData/organizationNews-image1.png',
content: '9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需',
tag: [{
color: '#F5222D',
textColor: ' #FFF1F0',
text: '人工智能'
}, {
color: '#E6F4FF',
textColor: ' #1677FF',
text: '通信网络'
}]
}
,
{
title: '3美国白宫发布关于进一步延长TikTok执法宽限期的行政令',
time: '2025年9月16日',
adress: '美国白宫',
image: '/testData/organizationNews-image1.png',
content: '9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需',
tag: [{
color: '#FFF1F0',
textColor: ' rgba(245, 34, 45, 1)',
text: '人工智能'
}, {
color: '#E6F4FF',
textColor: ' rgba(22, 119, 255, 1)',
text: '通信网络'
}]
}
])//机构动态
const organizationNewsShow = ref(0)//机构动态当前展示条目
const organizationList = ref([
{
time: "1小时前",
content: "特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
punblier: "国会",
},
{
time: "10小时前",
content: "众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
punblier: "商务部",
},
{
time: "11小时前",
content: "民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
punblier: "财政部",
},
{
time: "一天前",
content: "众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
punblier: "FCC",
},
{
time: "周三",
content: "参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
punblier: "白宫",
},
])//机构动态
//风险信号
const warningList = ref([
{
title: "美国大而美法案落地，总统签署通过",
time: "一天前",
status: 2
},
{
title: "美大而美法案7月1日以51:50的票数胜出",
time: "一天前",
status: 2
},
{
title: "首次提出“限制外国敏感实体获取补",
time: "一天前",
status: 1
},
{
title: "首次提出“限制外国敏感实体获取补偿",
time: "一天前",
status: 1
},
{
title: "首次提出“限制外国敏感实体获取补偿",
time: "一天前",
status: 0
}
]);
//新闻资讯
const newsList = ref([
{
image: '/testData/news-1.png',
title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
time: '11-4',
publier: '华盛顿纽约'
}, {
image: '/testData/news-1.png',
title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
time: '11-4',
publier: '华盛顿纽约'
}, {
image: '/testData/news-1.png',
title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
time: '11-4',
publier: '华盛顿纽约'
}, {
image: '/testData/news-1.png',
title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
time: '11-4',
publier: '华盛顿纽约'
}, {
image: '/testData/news-1.png',
title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
time: '11-4',
publier: '华盛顿纽约'
}, {
image: '/testData/news-1.png',
title: ' 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ',
time: '11-4',
publier: '华盛顿纽约'
}
])
//人物动态
const characterDynamics = ref([
{
image: '/testData/united_states 1.png',
name: '詹姆斯·刘易斯',
position: '商务部某办公室主任',
time: '一天前',
talk: '指出美国在AI赋能科学，特别是“自驱实验室”等自动化科研设施上的投资不足，呼吁进行系统性战略投资'
},
{
image: '/testData/united_states 2.png',
name: '迈克尔·霍洛维茨',
position: '某计划署主席',
time: '一天前',
talk: '评价特朗普政府《AI国家行动计划》，认为其关键在于通过技术出口和基础设施建设主动抢占全球AI主导权。'
},
{
image: '/testData/united_states 1.png',
name: '詹姆斯·戴维·万斯',
position: '副总统',
time: '一天前',
talk: '提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。'
},
])
function changeOrganizationNews(type) {
if (type === 'left') {
organizationNewsShow.value === 0 ? '' : organizationNewsShow.value = organizationNewsShow.value - 1
} else {
organizationNews.value === organizationNews.value.length - 1 ? '' : organizationNewsShow.value = organizationNewsShow.value + 1
}
}
onMounted(() => { });
</script>
<style lang="scss" scoped>
.content-main {
width: 100%;
height: 100%;
overflow: hidden;
.content-title {
height: 64px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
line-height: 64px;
background: url("../../assets/images/bg//header-bg.png");
box-sizing: border-box;
padding-left: 160px;
}
.content-box {
width: 100%;
height: 100%;
overflow: auto;
padding: 0 160px;
.title-text {
font-size: 32px;
font-weight: 700;
line-height: 42px;
margin: 40px;
text-align: center;
}
.title-text-small {
font-size: 20px;
font-weight: 400;
line-height: 30px;
margin: 40px;
text-align: center;
}
/* 父级：2×2 网格，固定间距 */
.box {
display: grid;
grid-template-columns: 2fr 1fr;
/* 左列宽是右列的 2 倍 */
grid-auto-rows: 1fr;
/* 两行等高 */
gap: 16px;
/* 横竖间距都是 16 px */
height: 1000px;
/* 示例：撑满视口，可改 */
}
/* 子级：仅上色居中，方便观察 */
.item {
height: 450px;
justify-content: center;
box-sizing: border-box;
border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1));
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
.item-header {
height: 48px;
width: 100%;
display: flex;
.item-header-icon {
width: 20px;
height: 20px;
margin: 15px;
}
.item-header-text {
width: 112px;
background: #055FC2;
color: #ffffff;
font-family: Microsoft YaHei;
font-size: 20px;
line-height: 48px;
text-align: center;
}
.item-header-more {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
line-height: 48px;
text-align: center;
margin-left: calc(100% - 200px);
width: 50px;
margin-left: calc(100% - 250px);
}
}
.item-header-divider {
/* 矩形 249 */
width: 100%;
height: 1px;
background: #eaecee;
}
.item-card-content-tag {
width: 74px;
height: 24px;
padding: 1px 8px 1px 8px;
margin: 2px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: justify;
box-sizing: border-box;
border: 1px;
border-radius: 4px;
}
.item-content {
height: calc(100% - 50px);
width: 100%;
display: flex;
padding: 20px;
.item-card {
width: 50%;
height: 100%;
display: flex;
box-sizing: border-box;
border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1));
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.3);
.item-card-btn-left {
height: 100%;
width: 24px;
padding-top: calc(50% - 20px);
}
.item-card-content {
height: 100%;
width: calc(100% - 50px);
padding: 20px;
.item-card-content-header {
display: flex;
.item-card-content-title {
color: var(rgba(59, 65, 75, 1));
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
word-break: break-all;
}
.item-card-content-title-small {
color: var(rgba(95, 101, 108, 1));
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.item-card-content-title-image {
height: 50px;
width: 50px;
}
.item-card-content-text {
color: var(rgba(95, 101, 108, 1));
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
text-overflow: ellipsis;
word-break: break-all;
}
}
.item-btn-icon {
height: 48px;
width: 100%;
margin-top: calc(50% - 24px);
}
.item-card-btn-right {
height: 100%;
width: 24px;
padding-top: calc(50% - 20px);
}
}
.item-card-right {
width: 50%;
height: 100%;
display: flex;
.item-list {
padding: 10px;
.item-list-punblier {
width: 64px;
height: 22px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
text-align: center;
padding: 1px 4px 1px 4px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
margin-right: 5px;
}
.item-list-content {
width: calc(100% - 150px);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
word-break: break-all;
}
.item-list-time {
width: 68px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
}
}
}
.waring-item {
.waring-status {
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 14px;
margin-right: 5px;
}
.waring-text {
color: rgba(59, 65, 75, 1);
width: calc(100% - 180px);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
word-break: break-all;
}
.waring-time {
width: 68px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
}
.item-btn {
/* Buttons按钮/主按钮/亮色/默认 */
width: 460px;
height: 42px;
margin: 0 20px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8;
padding: 5px 16px 5px 16px;
border-radius: 6px;
background: rgba(5, 95, 194, 1);
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: center;
}
/* 新闻资讯 */
.news-box {
display: grid;
grid-template-columns: 1fr 1fr;
/* 两列，等宽 */
gap: 10px;
height: 400px;
overflow: hidden;
.news-box-item {
padding: 20px;
.news-box-item-img {
/* 矩形 265 */
width: 96px;
height: 72px;
}
.news-box-title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
display: -webkit-box;
/* 旧语法，但必须写 */
-webkit-box-orient: vertical;
/* 垂直排列 */
-webkit-line-clamp: 2;
/* 限制两行 */
text-overflow: ellipsis;
/* 兜底，部分旧机需要 */
/* 可选：防止单词过长撑开 */
word-break: break-all;
}
.news-box-title-small {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
}
}
/* 人物动态 */
.character-box {
.character-item {
display: flex;
padding: 17px;
.character-image {
/* united_states 1 */
width: 36px;
height: 36px;
border-radius: 50%;
}
.talk-box {
height: 98px;
width: 100%;
padding: 17px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
background-image: url("../../assets/images/bg/characterDynamics-bg.png");
background-repeat: no-repeat;
/* 不重复 */
background-size: 100% 100%;
/* 自动拉伸并覆盖整个元素，保持比例 */
background-position: center center;
.talk-title {
width: 40%;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论