Skip to content

R
risk-monitor
提交 ce8f4051 authored 作者: 付康's avatar 付康
浏览文件
操作

合并分支 'xxh-dev' 到 'master'

修改合作限制概览样式 查看合并请求 !2
上级 f09c15f0 2d656d06
显示空白字符变更
内嵌 并排
正在显示 包含 150 行增加 和 78 行删除
src/views/infoPlatform/index.vue
浏览文件 @ ce8f4051
<template> <template>
<div class="page-container"> <div class="page-container">
<div style="height: 30px; width: 960px; display: flex; justify-content: flex-start">
<el-breadcrumb :separator-icon="ArrowRight"> <!-- 导航 -->
<div class="breadcrumb">
<el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
<el-breadcrumb-item>国家科技安全</el-breadcrumb-item> <el-breadcrumb-item>国家科技安全</el-breadcrumb-item>
<el-breadcrumb-item>中美博弈概览</el-breadcrumb-item> <el-breadcrumb-item>中美博弈概览</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">美对华科技合作限制信息平台</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">美对华科技合作限制信息平台</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<el-input v-model="searchKey" style="max-width: 960px" placeholder="搜索政策关键词" class="input-with-select">
<!-- 搜索 -->
<div class="search-section">
<el-input
v-model="searchKey"
style="max-width: 800px"
placeholder="搜索政策关键词"
class="input-with-select"
size="large">
<template #append> <template #append>
<el-button :icon="Search" size="large" type="primary">搜索</el-button> <el-button
:icon="Search"
type="primary"
style="background: #1677FF; color: #fff;"
>搜索</el-button>
</template> </template>
</el-input> </el-input>
</div>
<div class="page-data"> <div class="page-data">
<div class="page-data-item" v-for="item in pageData" :key="item.desc"> <div class="page-data-item" v-for="item in pageData" :key="item.desc">
<div class="page-data-item-num"> <div class="page-data-item-num">
...@@ -27,7 +44,7 @@ ...@@ -27,7 +44,7 @@
<div class="page-content"> <div class="page-content">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"> <el-col :span="16">
<custom-container title="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。"> <custom-container title="最新限制动态" height="850px">
<template #header-left> <template #header-left>
<div class="custom-container-header-left"> <div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-law.png" alt="" /> <img class="custom-container-icon" src="@/assets/images/icon-law.png" alt="" />
...@@ -49,7 +66,7 @@ ...@@ -49,7 +66,7 @@
<div class="content-card-title-text">{{ item.title }}</div> <div class="content-card-title-text">{{ item.title }}</div>
<!-- <div class="content-card-title-tag" v-for="tag in item.tag" :key="tag">{{ tag }}</div> --> <!-- <div class="content-card-title-tag" v-for="tag in item.tag" :key="tag">{{ tag }}</div> -->
<el-tag :type="tagType[Math.floor(Math.random() * 5)]" v-for="tag in item.tag" :key="tag">{{ tag }}</el-tag> <el-tag v-for="(tag,index) in item.tag" :key="tag" :type="tagType[index]">{{ tag }}</el-tag>
</div> </div>
<div class="content-card-desc">{{ item.desc }}</div> <div class="content-card-desc">{{ item.desc }}</div>
</div> </div>
...@@ -63,7 +80,7 @@ ...@@ -63,7 +80,7 @@
</custom-container> </custom-container>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<custom-container title="风险信号" height="450px"> <custom-container title="风险信号" height="434px">
<template #header-left> <template #header-left>
<div class="custom-container-header-left"> <div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-warning.png" alt="" /> <img class="custom-container-icon" src="@/assets/images/icon-warning.png" alt="" />
...@@ -81,7 +98,7 @@ ...@@ -81,7 +98,7 @@
<!-- 中间内容自定义 --> <!-- 中间内容自定义 -->
<template #default> <template #default>
<div class="content-list-card" v-for="item in riskData" :key="item.title"> <div class="content-list-card" v-for="item in riskData" :key="item.title">
<el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> <el-tag :type="item.danger" size="small" round style="width: 45px;height: 40px;">{{ item.importance }}</el-tag>
<div class="content-list"> <div class="content-list">
<div class="content-list-title">{{ item.title }}</div> <div class="content-list-title">{{ item.title }}</div>
<div class="content-list-time">{{ item.date }}</div> <div class="content-list-time">{{ item.date }}</div>
...@@ -106,7 +123,7 @@ ...@@ -106,7 +123,7 @@
<!-- 中间内容自定义 --> <!-- 中间内容自定义 -->
<template #default> <template #default>
<div class="content-list-card" v-for="item in academicData" :key="item.title"> <div v-for="item in academicData" :key="item.title">
<!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> --> <!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> -->
<div class="content-list-row"> <div class="content-list-row">
<div class="content-card-title-text">{{ item.title }}</div> <div class="content-card-title-text">{{ item.title }}</div>
...@@ -121,7 +138,13 @@ ...@@ -121,7 +138,13 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<custom-container title="政策禁令限制"> <custom-container title="政策禁令限制" height="410px">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon-gai" src="@/assets/images/icon-rectangle.png" alt="" />
<span class="custom-container-title">政策禁令限制</span>
</div>
</template>
<template #default> <template #default>
<div class="content-list-item content-card-title-text-2" v-for="item in policyBanData" :key="item.title"> <div class="content-list-item content-card-title-text-2" v-for="item in policyBanData" :key="item.title">
<!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> --> <!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> -->
...@@ -129,7 +152,7 @@ ...@@ -129,7 +152,7 @@
<div class="content-card-desc">{{ item.desc }}</div> <div class="content-card-desc">{{ item.desc }}</div>
<div class="content-card-tag-box"> <div class="content-card-tag-box">
<div class="content-card-tag-box-item"> <div class="content-card-tag-box-item">
<el-tag :type="tagType[Math.floor(Math.random() * 5)]" v-for="tag in item.tag" :key="tag">{{ tag }}</el-tag> <el-tag :type="tagType[index*3]" v-for="(tag,index) in item.tag" :key="tag">{{ tag }}</el-tag>
</div> </div>
<el-button class="content-card-tag-btn" type="primary" link>查看全文 ></el-button> <el-button class="content-card-tag-btn" type="primary" link>查看全文 ></el-button>
</div> </div>
...@@ -143,7 +166,13 @@ ...@@ -143,7 +166,13 @@
</custom-container> </custom-container>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<custom-container title="近期时间线"> <custom-container title="近期时间线" height="410px">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon-gai" src="@/assets/images/icon-rectangle.png" alt="" />
<span class="custom-container-title">近期时间线</span>
</div>
</template>
<template #default> <template #default>
<div style="text-align: center; width: 100%; margin-bottom: 20px"> <div style="text-align: center; width: 100%; margin-bottom: 20px">
<el-space> <el-space>
...@@ -162,7 +191,7 @@ ...@@ -162,7 +191,7 @@
<div class="time-line-desc"> <div class="time-line-desc">
<div class="time-line-desc-title">{{ item.title }}</div> <div class="time-line-desc-title">{{ item.title }}</div>
<div class="content-card-tag-box-item"> <div class="content-card-tag-box-item">
<el-tag :type="tagType[Math.floor(Math.random() * 5)]" v-for="tag in item.tag" :key="tag">{{ tag }}</el-tag> <el-tag :type="tagType[index+2]" v-for="(tag,index) in item.tag" :key="tag">{{ tag }}</el-tag>
</div> </div>
</div> </div>
</div> </div>
...@@ -180,6 +209,12 @@ ...@@ -180,6 +209,12 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<custom-container title="科研项目合作情况"> <custom-container title="科研项目合作情况">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon-gai" src="@/assets/images/icon-rectangle.png" alt="" />
<span class="custom-container-title">科研项目合作情况</span>
</div>
</template>
<template #default> <template #default>
<div class="content-list-item content-card-title-text-2" v-for="item in researchData" :key="item.title"> <div class="content-list-item content-card-title-text-2" v-for="item in researchData" :key="item.title">
<!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> --> <!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> -->
...@@ -196,6 +231,12 @@ ...@@ -196,6 +231,12 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<custom-container title="人才流动限制情况"> <custom-container title="人才流动限制情况">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon-gai" src="@/assets/images/icon-rectangle.png" alt="" />
<span class="custom-container-title">人才流动限制情况</span>
</div>
</template>
<template #default> <template #default>
<div class="content-list-item content-card-title-text-2" v-for="item in talentData" :key="item.title"> <div class="content-list-item content-card-title-text-2" v-for="item in talentData" :key="item.title">
<div class="content-card-title-text">{{ item.title }}</div> <div class="content-card-title-text">{{ item.title }}</div>
...@@ -240,7 +281,7 @@ const pageData = ref([ ...@@ -240,7 +281,7 @@ const pageData = ref([
]); ]);
// tag类型 // tag类型
const tagType = ["primary", "success", "info", "warning", "danger"]; const tagType = ["primary", "success","warning","danger"];
// 限制动态数据 // 限制动态数据
const limitData = ref([ const limitData = ref([
{ {
...@@ -258,32 +299,32 @@ const limitData = ref([ ...@@ -258,32 +299,32 @@ const limitData = ref([
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。` desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
}, },
{ {
date: "2025年9月2日", date: "2025年8月22日",
importance: "紧急", importance: "重要",
tag: [" 半导体", "晶圆制造"], tag: [" 人工智能", "芯片"],
title: "台积电南京厂VEU资格被撤销", title: "美国进一步限制AI芯片对华出口",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。` desc: `美国商务部工业与安全局（BIS）推出多项强化半导体技术出口管制的措施，包括禁用华为昇腾系列AI芯片，限制AI芯片用于中国AI模型的训练或推理环节。`
}, },
{ {
date: "2025年9月2日", date: "2025年6月19日",
importance: "紧急", importance: "一般",
tag: [" 报道题", "晶圆制造"], tag: [" 社交媒体", "数据安全"],
title: "台积电南京厂VEU资格被撤销", title: "特朗普第三次推迟TikTok剥离期限",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。` desc: `特朗普签署行政命令，将TikTok的剥离截止日期推迟90天至2025年9月17日。这是特朗普政府第三次推迟TikTok的剥离期限。`
}, },
{ {
date: "2025年9月2日", date: "2025年4月8日",
importance: "紧急", importance: "重要",
tag: [" 报道题", "晶圆制造"], tag: ["隐私保护", "数据安全"],
title: "台积电南京厂VEU资格被撤销", title: "14117最终规则生效",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。` desc: `美国司法部《防止受关注国家或受规制主体获取美国敏感个人数据和与政府有关的数据》（14117规则）生效，部分合规义务将在2025年10月6日后逐步实施。`
}, },
{ {
date: "2025年9月2日", date: "2025年3月25日",
importance: "紧急", importance: "重要",
tag: [" 报道题", "晶圆制造"], tag: ["人工智能", "出口管制"],
title: "台积电南京厂VEU资格被撤销", title: "美国将54家中国实体列入实体清单",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。` desc: `美国商务部工业与安全局（BIS）将54家中国实体（包括中国内地、中国香港和中国台湾地区）列入"实体清单"，重点针对AI和超级计算领域，禁止其获取美国技术、芯片和软件。`
} }
]); ]);
...@@ -297,25 +338,25 @@ const riskData = ref([ ...@@ -297,25 +338,25 @@ const riskData = ref([
title: "美国大而美法案落地，总统签署通过" title: "美国大而美法案落地，总统签署通过"
}, },
{ {
date: "两天前", date: "一天前",
importance: "重大风险", importance: "特别重大",
danger: "warning", danger: "danger",
title: "美大而美法案7月1日以51:50的票数通过..." title: "美大而美法案7月1日以51:50的票数通过..."
}, },
{ {
date: "三天前", date: "一天前",
importance: "特别重大", importance: "重大风险",
danger: "danger", danger: "warning",
title: "首次提出“限制外国敏感实体获取补贴”" title: "首次提出“限制外国敏感实体获取补贴”"
}, },
{ {
date: "四天前", date: "一天前",
importance: "一般风险", importance: "重大风险",
danger: "success", danger: "warning",
title: "将中国企业海外子公司、合资公司纳入受..." title: "将中国企业海外子公司、合资公司纳入受..."
}, },
{ {
date: "五天前", date: "一天前",
importance: "一般风险", importance: "一般风险",
danger: "success", danger: "success",
title: "H.R.8333《生物安全法案》将华大基因等..." title: "H.R.8333《生物安全法案》将华大基因等..."
...@@ -343,7 +384,7 @@ const policyBanData = ref([ ...@@ -343,7 +384,7 @@ const policyBanData = ref([
{ {
title: "《美国优先投资政策》总统备忘录", title: "《美国优先投资政策》总统备忘录",
desc: `2025年2月签署，限制美国资本投资中国"军民融合"战略相关产业，并审查甚至阻止中国对美关键领域的投资。备忘录扩大CFIUS的审查范围，要求将限制领域扩展到"医疗、农业、能源、原材料等战略行业"。`, desc: `2025年2月签署，限制美国资本投资中国"军民融合"战略相关产业，并审查甚至阻止中国对美关键领域的投资。备忘录扩大CFIUS的审查范围，要求将限制领域扩展到"医疗、农业、能源、原材料等战略行业"。`,
tag: ["投资审查", "国家暗安全"] tag: ["投资审查", "国家安全"]
}, },
{ {
title: "《外国公司问责法》", title: "《外国公司问责法》",
...@@ -355,25 +396,25 @@ const policyBanData = ref([ ...@@ -355,25 +396,25 @@ const policyBanData = ref([
// 近期时间线 // 近期时间线
const recentTimeline = ref([ const recentTimeline = ref([
{ {
date: "2025-9-2", date: "2025-09-02",
tag: ["半导体", "出口管制"], tag: ["出口管制","半导体"],
title: "撤销芯片企业VEU授权" title: "撤销芯片企业VEU授权"
}, },
{ {
date: "2025-07-29", date: "2025-08",
tag: ["人工智能", "出口管制"], tag: ["出口管制","人工智能"],
title: "强化AI芯片出口限制" title: "强化AI芯片出口限制"
}, },
{ {
date: "2025-05-08", date: "2025-06",
tag: ["半导体", "出口管制"], tag: ["出口管制"],
title: "TikTok剥离期限再次延期" title: "TikTok剥离期限再次延期"
},
{
date: "2025-04",
tag: ["出口管制"],
title: "14117规则生效"
} }
// {
// date: "2025-04-02",
// tag: ["半导体", "出口管制"],
// title: "14117规则生效"
// }
]); ]);
// 科研项目合作 // 科研项目合作
...@@ -403,21 +444,36 @@ const talentData = ref([ ...@@ -403,21 +444,36 @@ const talentData = ref([
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
background: url('@/assets/images/background.png') no-repeat;
background-position: center -100px;
background-size: 100% 100%;
min-height: 100vh;
}
.breadcrumb{
margin-bottom: 20px;
}
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner{
color: rgba(10, 87, 166, 1);
font-weight: 800;
}
.search-section {
margin-bottom: 30px;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center;
/* height: 100vh; */
margin: 0px auto;
padding: 0px 120px;
padding-top: 40px;
background-color: rgba(234, 236, 238, 1);
} }
.page-data { .page-data {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
width: 960px;
gap: 80px; gap: 80px;
} }
.page-data-item { .page-data-item {
...@@ -426,31 +482,35 @@ const talentData = ref([ ...@@ -426,31 +482,35 @@ const talentData = ref([
align-items: center; align-items: center;
} }
.page-data-item-num { .page-data-item-num {
font-size: 24px; font-size: 36px;
font-weight: 600; font-weight: bold;
color: var(--base-color); color: #1459BB;
line-height: 1;
margin-bottom: 8px;
} }
.page-data-item-desc { .page-data-item-desc {
font-size: 12px; font-size: 16px;
color: rgba(95, 101, 108, 1); color: #666;
} }
.page-content { .page-content {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
/* padding: 0px 20px; */ /* padding: 0px 20px; */
} }
.custom-container-header-left { .custom-container-header-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
padding-left: 20px; padding-left: 18px;
padding-bottom: 5px; padding-bottom: 5px;
/* border-bottom: 1px solid rgba(234, 236, 238, 1); */ /* border-bottom: 1px solid rgba(234, 236, 238, 1); */
} }
.custom-container-title { .custom-container-title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 700;
color: var(--base-color); color: #1459BB;
} }
.custom-container-count { .custom-container-count {
text-align: center; text-align: center;
...@@ -465,6 +525,11 @@ const talentData = ref([ ...@@ -465,6 +525,11 @@ const talentData = ref([
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
.custom-container-icon-gai {
height: 16px;
width: 8px;
padding-left:0px;
}
.content-card { .content-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -499,7 +564,7 @@ const talentData = ref([ ...@@ -499,7 +564,7 @@ const talentData = ref([
flex-direction: column; flex-direction: column;
gap: 11px; gap: 11px;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 20px;
border-radius: 4px; border-radius: 4px;
/* box-shadow: 0 2px 8px rgba(60, 87, 126, 0.2); */ /* box-shadow: 0 2px 8px rgba(60, 87, 126, 0.2); */
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2); box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
...@@ -532,18 +597,19 @@ const talentData = ref([ ...@@ -532,18 +597,19 @@ const talentData = ref([
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
height: 50px;
} }
.content-list { .content-list {
height: 40px; height: 40px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items:center;
gap: 8px; gap: 8px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
} }
.content-list-row { .content-list-row {
height: 60px; height: 70px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -565,16 +631,19 @@ const talentData = ref([ ...@@ -565,16 +631,19 @@ const talentData = ref([
.content-list-time { .content-list-time {
font-size: 14px; font-size: 14px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
text-align: right;
} }
.content-list-footer { .content-list-footer {
width: 100%; width: 100%;
margin-top: 115px; margin-top: 60px;
} }
.icon-mark { .icon-mark {
height: 12px; height: 12px;
width: 12px; width: 12px;
margin-right: 5px; margin-right: 5px;
margin-left: 8px; margin-left: 8px;
} }
.content-card-footer { .content-card-footer {
display: flex; display: flex;
...@@ -588,7 +657,7 @@ const talentData = ref([ ...@@ -588,7 +657,7 @@ const talentData = ref([
gap: 15px; gap: 15px;
align-items: flex-start; align-items: flex-start;
padding-left: 10px; padding-left: 10px;
margin-bottom: 20px; margin-bottom: 10px;
} }
.time-line-title { .time-line-title {
display: flex; display: flex;
...@@ -630,4 +699,7 @@ const talentData = ref([ ...@@ -630,4 +699,7 @@ const talentData = ref([
background-color: rgba(10, 87, 166, 1); background-color: rgba(10, 87, 166, 1);
border-radius: 50%; border-radius: 50%;
} }
.el-tag{
white-space: normal;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论