Skip to content

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

update

上级 d1c60abe 360ea9fc
隐藏空白字符变更
内嵌 并排
正在显示 包含 5018 行增加 和 999 行删除
src/components/button/button.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="button" @click="emit('click')" :class="{ activeButton: isActive }">
<slot name="default"></slot>
</div>
</template>
<script setup>
const props = defineProps({
isActive: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
</script>
<style lang="scss" scoped>
.button {
/* 复选标签 */
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
background-color: rgb(255, 255, 255);
color: rgb(59, 65, 75);
font-size: 16px;
font-weight: 400;
cursor: pointer;
padding-left: 8px;
padding-right: 8px;
}
.activeButton {
border: 1px solid rgb(10, 87, 166);
background: rgb(246, 250, 255);
color: rgb(10, 87, 166);
}
</style>
src/components/buttonList/buttonList.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="buttonList" :style="{ gap: gap + 'px' }">
<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
<slot name="item" :item="item">
{{ item.text }}
</slot>
</Button>
</div>
</template>
<script setup>
import { ref } from "vue";
import Button from "../button/button.vue";
const props = defineProps({
activeId: {
type: [Number, Array],
default: 0
},
gap: {
type: Number,
default: 8
},
multiple: {
type: Boolean,
default: false
},
list: {
type: Array,
default: function () {
return [];
}
}
});
const emit = defineEmits(["click"]);
const isActive = item => {
if (!props.multiple) {
return item.id === props.activeId;
} else {
return props.activeId.includes(item.id);
}
};
function setActiveIndex(item) {
if (!props.multiple) {
if (props.activeId === item.id) {
return;
}
emit("click", item.id);
} else {
let idList;
if (props.activeId.includes(item.id)) {
idList = props.activeId.filter(currentId => currentId !== item.id);
} else {
idList = props.activeId.concat(item.id);
}
emit("click", idList);
}
}
</script>
<style lang="scss" scoped>
.buttonList {
display: flex;
gap: 8px;
}
</style>
src/router/index.js
浏览文件 @ f0b6e7f7
...@@ -67,6 +67,12 @@ import ComprehensiveSearch from '@/views/comprehensiveSearch/index.vue' ...@@ -67,6 +67,12 @@ import ComprehensiveSearch from '@/views/comprehensiveSearch/index.vue'
import SearchResults from '@/views/comprehensiveSearch/searchResults/index.vue' import SearchResults from '@/views/comprehensiveSearch/searchResults/index.vue'
import Chat from '@/views/comprehensiveSearch/chat/index.vue' import Chat from '@/views/comprehensiveSearch/chat/index.vue'
// 合作限制
import CooperationRestrictions from "@/views/coopRestriction/index.vue";
import CooperationRestrictionsDetail from "@/views/coopRestriction/detail/index.vue";
const routes = [ const routes = [
// 智能写报 // 智能写报
{ {
...@@ -77,15 +83,6 @@ const routes = [ ...@@ -77,15 +83,6 @@ const routes = [
title: "智能写报" title: "智能写报"
} }
}, },
{
path: "/chat",
name: "chat",
component: Chat,
meta: {
title: "智能问答"
}
},
{ {
path: "/", path: "/",
redirect: "/overView" redirect: "/overView"
...@@ -265,17 +262,6 @@ const routes = [ ...@@ -265,17 +262,6 @@ const routes = [
} }
] ]
}, },
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 政令首页 // 政令首页
{ {
path: "/decree", path: "/decree",
...@@ -401,15 +387,50 @@ const routes = [ ...@@ -401,15 +387,50 @@ const routes = [
} }
] ]
}, },
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 出口管制转移过来的页面 // 出口管制转移过来的页面
{ {
path: "/exportControl/analysis", path: "/exportControlAnalysis",
name: "analysis", name: "exportControlAnalysis",
component: () => import("@/views/exportControl/analysis/index.vue"), component: () => import("@/views/exportControl/analysis/index.vue"),
redirect: "/exportControlAnalysis/overview",
meta: { meta: {
title: "分析页" title: "分析页"
} },
children: [
{
path: "overview",
name: "exportControlAnalysisOverview",
component: () => import("@/views/exportControl/analysis/content/overview.vue"),
meta: {
title: "制裁概况"
}
},
{
path: "deepDig",
name: "exportControlAnalysisDeepDig",
component: () => import("@/views/exportControl/analysis/content/deepDig.vue"),
meta: {
title: "深度挖掘"
}
},
{
path: "influence",
name: "exportControlAnalysisInfluence",
component: () => import("@/views/exportControl/analysis/content/influence.vue"),
meta: {
title: "影响分析"
}
},
]
}, },
{ {
path: "/exportControl/infoplatform", path: "/exportControl/infoplatform",
...@@ -519,6 +540,49 @@ const routes = [ ...@@ -519,6 +540,49 @@ const routes = [
] ]
}, },
// 综合搜索
{
path: "/comprehensiveSearch",
name: "comprehensiveSearch",
component: ComprehensiveSearch,
meta: {
title: "综合搜索"
}
},
{
path: "/searchResults",
name: "searchResults",
component: SearchResults,
meta: {
title: "搜索结果"
}
},
{
path: "/chat",
name: "chat",
component: Chat,
meta: {
title: "智能问答"
}
},
// 合作限制
{
path: "/cooperationRestrictions",
name: "CooperationRestrictions",
component: CooperationRestrictions,
meta: {
title: "合作限制"
}
},
// 合作限制详情
{
path: "/coopRestriction/detail",
name: "CooperationRestrictionsDetail",
component: CooperationRestrictionsDetail,
meta: {
title: "合作限制详情"
}
},
// 出口管制转移过来的页面 // 出口管制转移过来的页面
{ {
path: "/exportControl/analysis", path: "/exportControl/analysis",
......
src/views/coopRestriction/common/comTitle.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="com-title">
<div class="cl1"></div>
<div class="cl2"></div>
<div class="title">{{ title }}</div>
<div class="cl3"></div>
</div>
</template>
<script setup>
import { ref } from "vue";
// 传入的title数据
const props = defineProps({
title: {
type: String,
default: ""
}
});
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.com-title {
width: 1575px;
height: 42px;
display: flex;
align-items: center;
.cl1 {
width: 24px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
}
.cl2 {
width: 8px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
}
.title {
width: 152px;
height: 42px;
text-align: center;
font-size: 32px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 42px;
margin-right: 8px;
}
.cl3 {
width: 1367px;
height: 1px;
background-color: rgba(174, 214, 255, 1);
box-sizing: border-box;
}
}
</style>
src/views/coopRestriction/components/askPage/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="ask-page">
<div class="left">
<div class="left-title">
<img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div>
<div class="more">更多 +</div>
</div>
<div class="left-main">
<div v-for="item in leftList" :key="item.id" class="main-item">
<img :src="item.image" alt="">
<div class="item-content">
<div class="title">{{item.title}}</div>
<div class="content">{{item.content}}</div>
<div class="time">{{item.time}}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-title">
<img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div>
<div class="more">更多 +</div>
</div>
<div class="right-main">
<div class="trump">
<img src="./assets/title01.png" alt="">
<div class="trump-main">
<div class="cl1">{{ rightList[0].name }}</div>
<div class="cl2">{{ rightList[0].content }}</div>
<div class="cl3">{{ rightList[0].time }}</div>
</div>
</div>
<div class="mask">
<img src="./assets/title02.png" alt="">
<div class="mask-main">
<div class="cl1">{{ rightList[1].name }}</div>
<div class="cl2">{{ rightList[1].content }}</div>
<div class="cl3">{{ rightList[1].time }}</div>
</div>
</div>
<div class="malaby">
<img src="./assets/title03.png" alt="">
<div class="malaby-main">
<div class="cl1">{{ rightList[2].name }}</div>
<div class="cl2">{{ rightList[2].content }}</div>
<div class="cl3">{{ rightList[2].time }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import image01 from './assets/image01.png'
import image02 from './assets/image02.png'
import image03 from './assets/image03.png'
import image04 from './assets/image04.png'
import image05 from './assets/image05.png'
import title01 from './assets/title01.png'
import title02 from './assets/title02.png'
import title03 from './assets/title03.png'
const leftList = ref([
{
id:1,
title:'美国智库激辩人工智能监管路径',
content:'各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析...',
time:'11-4 · 华盛顿邮报',
image:image01
},
{
id:2,
title:'布鲁金斯学会称美国低估中国在“印太”战略',
content:'分析认为，当美国注意力被其他地区分散时，中国通过外交、发展和防务多管齐下，系统性...',
time:'11-4 · 纽约时报',
image:image02
},
{
id:3,
title:'五角大楼指令引发智库与国防部“脱钩”震荡',
content:'美国国防部长下令全面暂停部内人员参与所有智库活动，标志着传统的“旋转门”关系发生...',
time:'11-3 · 洛杉矶时报',
image:image03
},
{
id:4,
title:'卡内基基金会警告冲突中AI宣传战的风险',
content:'分析指出，在伊朗与以色列的冲突中，人工智能生成的虚假信息泛滥，深度破坏了信息生态...',
time:'11-3 · 今日美国',
image:image04
},
{
id:5,
title:'CSIS建议美国建立跨机构AI基准测试体系',
content:'指出美国《人工智能行动计划》忽视了基准测试这一关键环节，建议由国家标准与技术研究...',
time:'11-2 · ​福克斯新闻网',
image:image05
}
])
const rightList = ref([
{
id:1,
name:'唐纳德·特朗普',
content:'埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
time:'15:23 · 发布于真实社交',
title:title01
},
{
id:2,
name:'埃隆·马斯克',
content:'如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
time:'14:49 · 发布于X',
title:title02
},
{
id:3,
name:'塞巴斯蒂安·马拉比',
content:'提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
time:'11:05 · 发布于X',
title:title03
}
])
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.ask-page {
width: 1600px;
height: 450px;
display: flex;
justify-content: space-between;
.left {
width: 792px;
height: 450px;
margin-right: 16px;
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
position: absolute;
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
height: 48px;
padding: 11px 0;
font-size: 20px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(5, 95, 194);
position: absolute;
top: 12px;
right: 27px;
cursor: pointer;
}
}
.left-main {
width: 792px;
height: 402px;
padding: 20px 22px 21px 21px;
.main-item {
width: 749px;
height: 64px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px;
img {
width: 72px;
height: 48px;
margin-right: 20px;
cursor: pointer;
}
.item-content {
width: 657px;
height: 50px;
position: relative;
.title {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
}
.content {
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
}
.time {
position: absolute;
top: 0px;
right: 0px;
font-size: 14px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 22px;
color: rgb(95, 101, 108);
cursor: pointer;
}
}
}
}
}
.right {
width: 792px;
height: 450px;
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
position: absolute;
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
height: 48px;
padding: 11px 0;
font-size: 20px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(5, 95, 194);
position: absolute;
top: 12px;
right: 27px;
cursor: pointer;
}
}
.right-main {
width: 792px;
height: 402px;
padding: 23px 30px 25px 21px;
.trump {
width: 740px;
height: 148px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.trump-main {
width: 695.6px;
height: 148px;
background-image: url('./assets/title01bg.png');
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
right: 14px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 30px;
color: rgb(95, 101, 108);
}
}
}
.mask {
width: 740px;
height: 76px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.mask-main {
width: 695.6px;
height: 76px;
background-image: url('./assets/title02bg.png');
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
right: 14px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 30px;
color: rgb(95, 101, 108);
}
}
}
.malaby {
width: 740px;
height: 98px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.malaby-main {
width: 695.6px;
height: 98px;
background-image: url('./assets/title03bg.png');
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
right: 14px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 30px;
color: rgb(95, 101, 108);
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/coopRestriction/components/dataNew/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="data-new">
<div class="left">
<img src="./assets/leftbtn.png" alt="" class="left-btn" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" />
<div class="left-top">
<img src="./assets/icon01.png" alt="" />
<div class="left-top-title">合作限制动态</div>
<span>查看详情 ></span>
</div>
<div class="left-center">
<img src="./assets/usImg.png" alt="" />
<div class="left-center-main">
<div class="left-center-main-title">保护美国资金与专业知识免受敌对研究利用法案</div>
<div class="left-center-main-ul">
<ul>
<li>
<span class="ul-title">数据来源：</span>
<span class="ul-content">美国国会</span>
</li>
<li>
<span class="ul-title">合作限制类型：</span>
<span class="ul-content">科研合作限制</span>
</li>
<li>
<span class="ul-title">发布日期：</span>
<span class="ul-content">2025年10月7日</span>
</li>
<li>
<span class="ul-title">涉及领域</span>
<span class="ul-pie cl1">航空航天</span>
<span class="ul-pie cl2">人工智能</span>
<span class="ul-pie cl3">集成电路</span>
</li>
</ul>
</div>
</div>
<div class="left-center-title">国会法案</div>
</div>
<div class="left-bottom">
<ul>
<li class="left-bottom-li">内容摘要：</li>
</ul>
<div class="left-bottom-content">
该法案已被纳入《国防授权法案》（NDAA）的讨论范畴，并已在参议院通过审议
。该法案规定，将禁止任何与中国等被视为“敌对国”有合作关系的科学家获得联邦资助
。其限制范围极其宽泛，从联合研究、合著论文到指导研究生或博士后几乎全覆盖
。更严厉的是，该条款具有追溯效力，可追溯至过去5年的合作。
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<img src="./assets/icon02.png" alt="" />
<div class="right-top-title">
风险信号
<span>4</span>
</div>
</div>
<div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main">
<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }">
{{ item.title }}
</div>
<div class="main-center">{{ item.content }}</div>
<div class="main-right">{{ item.time }}</div>
</div>
</div>
<div class="right-mainbtn">
<img src="./assets/btn.png" alt="" />
查看更多
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const list = ref([
{
id: 1,
title: "特别重大",
content: "保护美国资金与专业知识免受敌对研究利用法案",
time: "一天前"
},
{
id: 2,
title: "特别重大",
content: "美国国土安全部终止哈佛大学SEVP认证",
time: "一天前"
},
{
id: 3,
title: "重大风险",
content: "众议院“美中战略竞争特别委员会”向国会提...",
time: "一天前"
},
{
id: 4,
title: "重大风险",
content: '2026财年拨款法案要求重启"中国行动计划"',
time: "一天前"
}
]);
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.data-new {
width: 1600px;
height: 460px;
display: flex;
justify-content: space-between;
.left {
width: 1064px;
height: 460px;
margin-right: 16px;
border-radius: 10px;
background-color: #fff;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-btn {
width: 24px;
height: 48px;
position: absolute;
top: 223px;
left: 0px;
cursor: pointer;
}
.right-btn {
width: 24px;
height: 48px;
position: absolute;
top: 223px;
right: 0px;
cursor: pointer;
}
.left-top {
width: 100%;
height: 48px;
position: relative;
border-bottom: 1px solid rgb(234, 236, 238);
img {
width: 18px;
height: 18px;
position: absolute;
top: 15px;
left: 23px;
}
span {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
position: absolute;
top: 19px;
right: 40px;
color: rgb(5, 95, 194);
cursor: pointer;
}
.left-top-title {
margin-left: 60px;
width: 152px;
height: 48px;
background-color: rgb(5, 95, 194);
color: #fff;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
text-align: center;
padding: 11px 16px;
}
}
.left-center {
width: 967px;
height: 208px;
margin-top: 33px;
margin-left: 62px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 148px;
height: 148px;
margin-right: 21px;
}
display: flex;
.left-center-main {
width: 439px;
height: 175px;
.left-center-main-title {
margin-left: 19px;
margin-bottom: 17px;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
}
.left-center-main-ul {
width: 439px;
height: 132px;
ul {
list-style-position: inside;
li {
width: 100%;
height: 24px;
margin-bottom: 12px;
.ul-title {
display: inline-block;
width: 120px;
height: 24px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.ul-content {
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.ul-pie {
display: inline-block;
box-sizing: border-box;
padding: 2px 8px;
border: 1px solid;
border-radius: 4px;
margin-right: 8px;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
.cl3 {
border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
}
}
}
}
.left-center-title {
padding: 3px 8px 5px;
height: 32px;
border-radius: 4px;
background-color: rgba(231, 243, 255, 1);
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
position: absolute;
right: 0px;
top: -1px;
}
}
.left-bottom {
margin: 17px 0 0 62px;
ul {
list-style-position: inside;
.left-bottom-li {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 10px;
}
}
.left-bottom-content {
width: 943px;
margin-left: 22px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
}
}
}
.right {
width: 520px;
height: 460px;
border-radius: 10px;
background-color: #fff;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.right-top {
width: 520px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 21px;
height: 16.84px;
position: absolute;
top: 15.1px;
left: 19.5px;
}
.right-top-title {
padding: 11px 16px;
width: 148px;
height: 48px;
background-color: rgb(206, 79, 81);
font-size: 20px;
font-family: "Microsoft YaHei";
font-weight: 700;
line-height: 26px;
text-align: center;
color: #fff;
margin-left: 60px;
span {
display: inline-block;
width: 24px;
height: 20px;
background-color: rgba(255, 255, 255, 0.3);
font-size: 14px;
font-family: "Microsoft YaHei";
font-weight: 400;
line-height: 22px;
text-align: center;
color: #fff;
border-radius: 100px;
}
}
}
.right-main {
width: 463px;
height: 47px;
border-radius: 2px;
display: flex;
align-items: center;
.main-left {
width: 40px;
height: 40px;
margin: 4px 13px 3px 2px;
border-radius: 50%;
font-size: 12px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 14px;
padding: 6px 4px;
text-align: center;
}
.cl4 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
}
.cl5 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.main-center {
width: 347px;
height: 30px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-right: 2px;
}
.main-right {
width: 60px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
text-align: right;
}
}
.right-mainbtn {
width: 460px;
height: 42px;
border-radius: 6px;
position: absolute;
left: 26px;
bottom: 21px;
background-color: rgb(5, 95, 194);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 16px;
height: 16px;
margin-right: 8px;
}
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
}
}
}
</style>
src/views/coopRestriction/components/dataSub/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="datasub">
<div class="left">
<div class="left-title">
<img src="./assets/icon01.png" alt="" />
<div class="tit">各类型合作限制政策对比</div>
<el-select v-model="value" placeholder="Select" class="select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="left-main">
<div class="left-main-echarts" ref="leftChartRef"></div>
</div>
</div>
<div class="right">
<div class="right-title">
<img src="./assets/icon02.png" alt="" />
<div class="tit">各领域规则分布情况</div>
<el-select v-model="value1" placeholder="Select" class="select">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="right-main">
<div class="right-main-echarts" ref="rightChartRef"></div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
const value = ref("近十年");
const value1 = ref("2025年");
const options = [
{
value: "近十年",
label: "近十年"
},
{
value: "近五年",
label: "近五年"
}
];
const options1 = [
{
value: "2025年",
label: "2025年"
},
{
value: "2024年",
label: "2024年"
}
];
const leftChartRef = ref(null);
let leftChart;
const rightChartRef = ref(null);
let rightChart;
const initLeftChart = () => {
if (!leftChartRef.value) return;
if (leftChart) leftChart.dispose();
leftChart = echarts.init(leftChartRef.value);
const years = ["2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025"];
const academic = [150,65,85,95,70,95,125,150,140,170,190,175];
const research = [70,90,123,115,130,145,165,160,162,168,180,182];
const talent = [90,70,60,75,65,72,80,120,118,145,130,100];
const dataShare = [0,0,0,0,0,0,0,0,0,0,15,22];
const option = {
color: ["#2f7ae5","#29c0b1","#e45f5f","#7b5de6"],
grid: { left: 40, right: 24, top: 46, bottom: 36 },
tooltip: { trigger: "axis", axisPointer: { type: "line" } },
legend: { top: 8, icon: "circle", itemWidth: 12, itemHeight: 12, itemGap: 24, textStyle: { color: "rgb(95, 101, 108)", fontSize: 16, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 24 }, data: ["学术交流","科研合作","人才流动","数据共享"] },
xAxis: { type: "category", boundaryGap: false, data: years, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: "rgba(132, 136, 142, 1)", fontSize: 14, lineHeight: 22, fontFamily: "Microsoft YaHei", fontWeight: 400 } },
yAxis: { type: "value", min: 0, max: 200, interval: 40, splitLine: { show: true, lineStyle: { color: "#e6e6e6", type: "dashed" } }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: "rgba(132, 136, 142, 1)", fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22 } },
series: [
{ name: "学术交流", type: "line", smooth: false, data: academic, symbol: "circle", symbolSize: 6, areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(47,122,229,0.25)"},{offset:1,color:"rgba(47,122,229,0.05)"}]) } },
{ name: "科研合作", type: "line", smooth: false, data: research, symbol: "circle", symbolSize: 6, areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(41,192,177,0.25)"},{offset:1,color:"rgba(41,192,177,0.05)"}]) } },
{ name: "人才流动", type: "line", smooth: false, data: talent, symbol: "circle", symbolSize: 6, areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(228,95,95,0.25)"},{offset:1,color:"rgba(228,95,95,0.05)"}]) } },
{ name: "数据共享", type: "line", smooth: false, data: dataShare, symbol: "circle", symbolSize: 6, areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(123,93,230,0.25)"},{offset:1,color:"rgba(123,93,230,0.05)"}]) } }
]
};
leftChart.setOption(option);
window.addEventListener("resize", handleResize);
};
const handleResize = () => { if (leftChart) leftChart.resize(); if (rightChart) rightChart.resize(); };
const initRightChart = () => {
if (!rightChartRef.value) return;
if (rightChart) rightChart.dispose();
rightChart = echarts.init(rightChartRef.value);
const indicators = [
{ name: "集成电路", max: 10 },
{ name: "能源领域", max: 10 },
{ name: "量子科技", max: 10 },
{ name: "通信网络", max: 10 },
{ name: "人工智能", max: 10 },
{ name: "生物科技", max: 10 }
];
const academicR = [9,6,6,6,9,7];
const researchR = [3,4,1.5,2,1.5,4];
const talentR = [4,10,3,4,2,5];
const dataShareR = [7,8,4,5,7,8];
const option = {
color: ["#2f7ae5","#29c0b1","#e45f5f","#7b5de6"],
legend: {
top: 8,
icon: "circle",
itemWidth: 12,
itemHeight: 12,
itemGap: 24,
textStyle: {
color: "rgb(95, 101, 108)",
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 24
},
data: ["学术交流","科研合作","人才流动","数据共享"]
},
radar: {
shape: "polygon",
splitNumber: 5,
indicator: indicators,
center: ["50%","56%"],
radius: "58%",
startAngle: 90,
clockwise: false,
axisName: {
color: "rgb(59, 65, 75)",
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 24,
padding: [0, 5]
},
splitLine: {
lineStyle: {
color: "#d0d0d0",
width: 1
}
},
axisLine: {
lineStyle: {
color: "#d0d0d0",
width: 1
}
},
splitArea: {
show: true,
areaStyle: {
color: ["#fff","rgb(247, 248, 249)","#fff","rgb(247, 248, 249)","#fff"]
}
}
},
series: [
{
name: "学术交流",
type: "radar",
data: [{ value: academicR }],
lineStyle: {
width: 2,
color: "#2f7ae5"
},
symbol: "none",
areaStyle: {
color: "rgba(47,122,229,0.15)"
}
},
{
name: "科研合作",
type: "radar",
data: [{ value: researchR }],
lineStyle: {
width: 2,
color: "#29c0b1"
},
symbol: "none",
areaStyle: {
color: "rgba(41,192,177,0.15)"
}
},
{
name: "人才流动",
type: "radar",
data: [{ value: talentR }],
lineStyle: {
width: 2,
color: "#e45f5f"
},
symbol: "none",
areaStyle: {
color: "rgba(228,95,95,0.15)"
}
},
{
name: "数据共享",
type: "radar",
data: [{ value: dataShareR }],
lineStyle: {
width: 2,
color: "#7b5de6"
},
symbol: "none",
areaStyle: {
color: "rgba(123,93,230,0.15)"
}
}
]
};
rightChart.setOption(option);
};
onMounted(() => { initLeftChart(); initRightChart(); });
onBeforeUnmount(() => { window.removeEventListener("resize", handleResize); if (leftChart) { leftChart.dispose(); leftChart = null; } if (rightChart) { rightChart.dispose(); rightChart = null; } });
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.datasub {
width: 1600px;
height: 460px;
display: flex;
justify-content: space-between;
.left {
width: 1063px;
height: 460px;
margin-right: 16px;
border-radius: 10px;
// border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-title {
width: 1063px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
position: absolute;
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
height: 48px;
padding: 11px 0;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.select {
width: 120px;
height: 28px;
padding: 0px 12px;
position: absolute;
top: 11px;
right: 31px;
}
}
.left-main {
width: 1063px;
height: 412px;
padding: 15px 23px 25px 38px;
.left-main-echarts {
width: 1002px;
height: 372px;
}
}
}
.right {
width: 521px;
height: 460px;
border-radius: 10px;
// border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 521px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
position: absolute;
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
height: 48px;
padding: 11px 0;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.select {
width: 120px;
height: 28px;
padding: 0px 12px;
position: absolute;
top: 11px;
right: 31px;
}
}
.right-main {
width: 521px;
height: 421px;
padding: 15px 50px 25px 50px;
.right-main-echarts {
width: 420px;
height: 372px;
}
}
}
}
</style>
src/views/coopRestriction/components/resLib/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="reslib-page">
<div class="nav">
<div
v-for="item in navList"
:key="item"
class="nav-item"
:class="{ active: item === activeItem }"
@click="activeItem = item"
>
{{ item }}
</div>
</div>
<el-select v-model="value" placeholder="Select" class="select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div class="main">
<div class="left">
<div class="left-ti1"></div>
<div class="left-ti2"></div>
<div class="left-title">数据来源</div>
<div class="left-content">
<div v-for="item in dataList" :key="item.id" class="left-item">
<input type="checkbox" checked />{{ item.name }}
</div>
</div>
<div class="left-title cl1">涉及领域</div>
<div class="left-content">
<div v-for="(item, i) in dataList2" :key="item.id" class="left-item">
<input type="checkbox" :checked="i === 0" />{{ item.name }}
</div>
</div>
</div>
<div class="right">
<div class="right-title">
<img src="./assets/icon01.png" alt="" />
<div>合作限制历程</div>
</div>
<div class="right-main">
<div class="main-content">
<div v-for="item in mainDataList" :key="item.id" class="main-item">
<div class="date">{{ item.date }}</div>
<img :src="item.img" alt="" class="img" />
<div class="box">
<div class="title" @click="handleClick(item)">{{ item.title }}</div>
<div class="content" @click="handleClick(item)">{{ item.content }}</div>
<div class="domain">
<div v-for="(domain, i) in item.domain" :key="i" class="domain-item">{{ domain }}</div>
</div>
<div class="type" :class="{ type1: item.type === '行政令', type2: item.type === '法案' }">
{{ item.type }}
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="page">
<div class="count">共1205项调查</div>
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next"
background
@current-change="handlePageChange"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import whitehouse from "./assets/白宫.png";
import guohui from "./assets/国会.png";
import guotuanquanbu from "./assets/国土安全部.png";
import guowuyuan from "./assets/国务院.png";
import weishengyanjiuyuan from "./assets/卫生研究院.png";
import zhongyiyuan from "./assets/众议院.png";
import fda from "./assets/FDA.png";
const router = useRouter();
const handleClick = item => {
router.push({
path: "/coopRestriction/detail",
query: {
id: item.id
}
});
};
const navList = ref(["全部限制", "学术交流限制", "科研合作限制", "人才流动限制", "数据共享限制"]);
const activeItem = ref("全部限制");
const value = ref("发布时间");
const options = [
{
value: "发布时间",
label: "发布时间"
},
{
value: "发布日期",
label: "发布日期"
}
];
const dataList = ref([
{
id: 1,
name: "全部来源"
},
{
id: 2,
name: "法案"
},
{
id: 3,
name: "政令"
},
{
id: 4,
name: "政府公告"
}
]);
const dataList2 = ref([
{
id: 1,
name: "全部领域"
},
{
id: 2,
name: "人工智能"
},
{
id: 3,
name: "集成电路"
},
{
id: 4,
name: "通信网络"
},
{
id: 5,
name: "量子科技"
},
{
id: 6,
name: "能源"
},
{
id: 7,
name: "生物科技"
},
{
id: 8,
name: "航空航天"
},
{
id: 9,
name: "海洋"
}
]);
const mainDataList = ref([
{
id: 1,
title: "美国国土安全部：取消哈佛大学SEVP认证，禁止其招收国际新生",
content:
"国土安全部长诺姆以安全审查为由，正式终止哈佛大学“学生与交流访问学者项目”（SEVP）认证，导致该校丧失2025~2026学年招收国际新生的资格。",
date: "2025年10月15日",
domain: ["人才流动限制"],
type: "行政令",
img: guotuanquanbu
},
{
id: 2,
title: "美国白宫：通过应对哈佛大学的风险来增强国家安全",
content:
"学生交换签证计划（SEVP）根本依赖于学术机构的诚信、透明度以及对相关监管框架的完全遵守。 这是出于关键的国家安全原因。 联邦调查局（FBI）长期警告称，外国对手和竞争对手利用美国高等教育的便捷通道，窃取技术信息和产品，利用昂贵的研发项目来实现自身野心，并出于政治或其他原因传...",
date: "2025年9月30日",
domain: ["人才流动限制"],
type: "行政令",
img: whitehouse
},
{
id: 3,
title: "美国白宫：限制外国公民入境，以保护美国免受外国恐怖分子及其他国家安全和公共安全威胁",
content: "美国商务部宣称将“至少每年”更新一次管制规则，以堵塞已发现的政策“漏洞”。",
date: "2025年9月15日",
domain: ["人才流动限制"],
type: "行政令",
img: whitehouse
},
{
id: 4,
title: "美国白宫：提升生物研究的安全性与保障",
content: "停止联邦资助外国实体在关注国家（如中国）进行的危险功能增益研究。",
date: "2025年9月15日",
domain: ["人才流动限制", "生物科技"],
type: "行政令",
img: whitehouse
},
{
id: 5,
title: "美国国会：《2026财年拨款法案》审议通过重启“中国行动计划”",
content: "美国众议院拨款委员会在审议《2026财年拨款法案》时，加入条款要求司法部重启已被拜登政府叫停的“中国行动计划”。",
date: "2025年9月1日",
domain: ["人才流动限制"],
type: "法案",
img: guohui
},
{
id: 6,
title: "美国FDA：紧急叫停涉及将美国公民活体细胞送往中国等“敌对国家”实验室的临床试验",
content: "涉及将人类生物样本（如活体细胞）转移至中国进行基因工程等研究的临床试验项目，相关研究被叫停。",
date: "2025年8月26日",
domain: ["数据共享限制", "生物科技"],
type: "行政令",
img: fda
},
{
id: 7,
title: "美国众议院“美中战略竞争特设委员会”：要求杜克大学终止昆山杜克大学合作项目",
content: "指控其“通过先进摄像系统研究协助中国导弹制导技术发展”，并质疑美国学生被用于中国宣传。",
date: "2025年8月22日",
domain: ["科研合作限制"],
type: "行政令",
img: zhongyiyuan
},
{
id: 8,
title: "美国国务院：大规模撤销部分中国学生签证，重点审查STEM领域",
content:
"美国国务卿鲁比奥宣布将开始大规模撤销部分中国学生的签证，重点针对STEM（科学、技术、工程和数学）领域的学习者以及所谓“与中国政府有联系”的人员，并全面提升对中国大陆和香港地区申请者的签证审查标准",
date: "2025年8月15日",
domain: ["人才流动限制"],
type: "行政令",
img: guowuyuan
},
{
id: 9,
title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动",
content:
"FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏州大学卫生与环境技术研究所）正式发出“一般信函”。",
date: "2025年10月15日",
domain: ["数据共享限制", "生物科技"],
type: "行政令",
img: fda
},
{
id: 10,
title: "美国国家卫生研究院：限制中国等国的研究人员访问其受控访问数据存储库",
content: "美国商务部宣称将“至少每年”更新一次管制规则，以堵塞已发现的政策“漏洞”。",
date: "2025年9月15日",
domain: ["数据共享限制", "生物科技"],
type: "行政令",
img: weishengyanjiuyuan
}
]);
const total = ref(1205);
const pageSize = ref(121);
const currentPage = ref(5);
const handlePageChange = p => {
currentPage.value = p;
};
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.reslib-page {
width: 1600px;
height: 1565px;
position: relative;
.nav {
width: 808px;
height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 34px;
.nav-item {
cursor: pointer;
padding: 8px 20px;
font-size: 20px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(59, 65, 75);
}
.active {
background-color: rgb(5, 95, 194);
border-radius: 21px;
color: #fff;
font-weight: 700;
}
}
.select {
width: 128px;
position: absolute;
top: 7px;
right: 0px;
}
.main {
width: 1600px;
height: 1489px;
display: flex;
.left {
width: 300px;
height: 584px;
margin-right: 16px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-ti1 {
width: 8px;
height: 16px;
background-color: rgb(5, 95, 194);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 17px;
left: 0px;
}
.left-ti2 {
width: 8px;
height: 16px;
background-color: rgb(5, 95, 194);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 207px;
left: 0px;
}
.left-title {
margin-left: 25px;
color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
margin-top: 13px;
}
.left-content {
width: 109px;
height: 132px;
margin-left: 25px;
margin-top: 13px;
.left-item {
width: 89px;
height: 30px;
margin-bottom: 4px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
margin-right: 8px;
border: 1px solid rgb(200, 204, 210);
border-radius: 4px;
background-color: #fff;
vertical-align: middle;
}
input[type="checkbox"]:checked {
background-color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 4px;
height: 8px;
margin: 1px auto 0;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
}
}
.cl1 {
margin-top: 21px;
}
}
.right {
width: 1284px;
height: 1489px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.right-title {
width: 1284px;
height: 48px;
border-bottom: 1px solid rgb(235, 238, 242);
position: relative;
img {
width: 22px;
height: 19px;
position: absolute;
top: 15px;
left: 20px;
}
div {
width: 120px;
height: 48px;
margin-left: 60px;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
padding: 11px 0;
}
}
.right-main {
width: 1284px;
height: 1441px;
padding: 22px 43px 15px 20px;
position: relative;
.main-content {
width: 1221px;
height: 1345px;
.main-item {
width: 1221px;
min-height: 116px;
max-height: 140px;
margin-bottom: 16px;
position: relative;
.date {
position: absolute;
top: 4px;
left: 10px;
width: 62px;
height: 68px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
text-align: right;
}
.img {
width: 24px;
height: 24px;
position: absolute;
top: 13px;
left: 90px;
z-index: 100;
}
.box {
width: 1086px;
min-height: 91px;
max-height: 114px;
position: absolute;
top: 10px;
left: 135px;
.title {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(59, 65, 75);
margin-bottom: 8px;
cursor: pointer;
}
.content {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
margin-bottom: 9px;
cursor: pointer;
}
.type {
padding: 2px 8px;
border-radius: 20px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
position: absolute;
top: 0px;
right: 0px;
}
.type1 {
background-color: rgba(255, 149, 77, 0.1);
color: rgb(255, 149, 77);
}
.type2 {
background-color: rgba(206, 79, 81, 0.1);
color: rgb(206, 79, 81);
}
.domain {
margin-bottom: 15px;
display: flex;
.domain-item {
padding: 2px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
margin-right: 8px;
color: rgb(5, 95, 194);
background-color: rgba(231, 243, 255, 1);
}
}
}
}
}
.line {
height: 1150px;
border: 2px solid rgb(235, 238, 242);
position: absolute;
top: 75px;
left: 120px;
z-index: 1;
}
.page {
width: 1221px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
bottom: 20px;
left: 20px;
padding-left: 11px;
.count {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
:deep(.el-pagination) {
display: flex;
align-items: center;
}
:deep(.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
// box-shadow: 0 0 0 2px rgba(47, 122, 229, 0.15) inset;
}
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
}
}
}
}
}
</style>
src/views/coopRestriction/detail/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="cooperation-restrictions-detail">
<div class="nav">
<div class="nav-main">
<img src="./assets/image01.png" alt="" />
<div class="content">
<div class="cl1">通过应对哈佛大学的风险来增强国家安全</div>
<div class="cl2">Enhancing National Security by Addressing Risks at Harvard University</div>
<div class="cl3">2025年6月4日 10:33 · 美国白宫</div>
</div>
<div class="btn">
<button class="btn1"><img src="./assets/icon01.png" alt="" />查看原文</button>
<button class="btn1"><img src="./assets/icon02.png" alt="" />查看官网</button>
<button class="btn1 active"><img src="./assets/icon03.png" alt="" />分析报告</button>
</div>
</div>
</div>
<div class="title">
<span class="title-one">当前合作限制数据已关联至总统政令：</span>
<span class="title-two">《通过应对哈佛大学的风险来增强国家安全》2025年6月4日</span>
<img src="./assets/right.png" alt="" />
</div>
<div class="main">
<div class="left">
<!-- 制裁概况 -->
<div class="left-top">
<img class="img1" src="./assets/bluetitle.png" alt="" />
<div class="left-top-title">制裁概况</div>
<img class="img2" src="./assets/下载按钮.png" alt="" />
<img class="img3" src="./assets/收藏按钮.png" alt="" />
<div class="left-top-content">
<span
>2025年6月4日，特朗普签署总统公告，全面暂停持F/M/J签证者入境哈佛学习，并授权撤销部分在校国际生的签证。</span
>
</div>
<div class="left-top-bottom">
<div><span class="tit">限制时间：</span><span class="tit1">2025年6月4日</span></div>
<div><span class="tit">限制机构：</span><span class="tit1 tit2">美国白宫 ></span></div>
<div><span class="tit">限制手段：</span><span class="tit1">总统行政令</span></div>
<div><span class="tit">限制类型：</span><span class="tit1 tit3">人才交流限制</span></div>
<div><span class="tit">限制领域：</span><span class="tit1">无特定领域</span></div>
</div>
</div>
<!-- 相关实体 -->
<div class="left-bottom">
<img class="img1" src="./assets/bluetitle.png" alt="" />
<div class="left-bottom-title">相关实体</div>
<img class="img2" src="./assets/下载按钮.png" alt="" />
<img class="img3" src="./assets/收藏按钮.png" alt="" />
<div class="left-bottom-main">
<div v-for="item in dataList" :key="item.id" class="main-box">
<img :src="item.img" alt="" />
<div class="name">{{ item.name }}</div>
<div class="type">{{ item.type }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<!-- 背景分析 -->
<div class="right-top">
<img class="img1" src="./assets/bluetitle.png" alt="" />
<div class="right-top-title">背景分析</div>
<div class="btn cl1" :class="{'active': active === '涉华背景'}" @click="active = '涉华背景'">涉华背景</div>
<div class="btn cl2" :class="{'active': active === '全部背景'}" @click="active = '全部背景'">全部背景</div>
<div class="right-top-content">
<div v-for="item in dataList2" :key="item.id" class="right-top-item">
<span class="id">{{ item.id }}</span>
<span class="name">{{ item.name }}</span>
<img src="./assets/打开按钮.png" alt="" />
</div>
</div>
</div>
<!-- 限制条款 -->
<div class="right-bottom">
<img class="img1" src="./assets/bluetitle.png" alt="" />
<div class="right-bottom-title">限制条款</div>
<div class="btn cl1" :class="{'active': active2 === '涉华背景'}" @click="active2 = '涉华背景'">涉华背景</div>
<div class="btn cl2" :class="{'active': active2 === '全部背景'}" @click="active2 = '全部背景'">全部背景</div>
<div class="right-bottom-content1">
<div class="right-bottom-content1-title">
<span>（一）暂停入境 </span>
<img src="./assets/打开按钮.png" alt="">
</div>
<div class="right-bottom-content1-content">
任何外籍人士作为非移民进入美国，根据 INA 第 101（a）（15）（F）或第 101（a）（15）（M）条，即 8 U.S.C. 1101（a）（15）（F）或 1101（a）（15）（M）条款，进入哈佛大学参加交流访客项目，或根据 INA 第 101（a）（15）（J）条，在哈佛大学主办的交流访客项目， 8 U.S.C. 1101（a）（15）（J）被暂停并限制，受本公告第 2 条约束。 该暂停和限制将在本公告发布后 6 个月内失效，除非延长。
</div>
</div>
<div class="right-bottom-content2">
<div class="right-bottom-content2-title">
<span>（二）暂停和限制入境的范围及实施 </span>
<img src="./assets/打开按钮.png" alt="">
</div>
<div class="right-bottom-content2-content">
<div v-for="item in dataList3" :key="item.id" class="forcontent">
<span>{{ item.id }}.</span>
<span>{{ item.name }}</span>
</div>
</div>
</div>
<div class="right-bottom-content3">
<div class="right-bottom-content3-title">
<span>（三）执行本命令的作性行动 </span>
<img src="./assets/打开按钮.png" alt="">
</div>
<div class="right-bottom-content3-content">
国务卿、司法部长和国土安全部长应协调采取一切必要和适当的行动以落实本公告。 国务卿、司法部长和国土安全部长还应考虑利用各自在 INA 下的权限，对哈佛大学参与 SEVP 的能力施加限制，以及学生及交流访客信息系统。 任何此类行动应包括对任何符合国家利益的外国人的例外，这些入境由国务卿、国土安全部长或其各自指定的人决定。
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Harvard from "./assets/哈佛.png";
import Senate from "./assets/参议院.png";
import Justice from "./assets/司法部.png";
import Security from "./assets/国土安全部.png";
import bill from "./assets/授权法案.png";
import Trump from "./assets/trump.png";
import Rubio from "./assets/卢比奥.png";
import Bondi from "./assets/邦迪.png";
import Nome from "./assets/诺姆.png";
const active = ref("涉华背景");
const active2 = ref("涉华背景");
const dataList = ref([
{
id: 1,
name: "哈佛大学",
type: "",
img: Harvard
},
{
id: 2,
name: "美国参议院",
type: "",
img: Senate
},
{
id: 3,
name: "美国司法部",
type: "",
img: Justice
},
{
id: 4,
name: "美国国土安全部",
type: "",
img: Security
},
{
id: 5,
name: "国防授权法案",
type: "",
img: bill
},
{
id: 6,
name: "唐纳德·特朗普",
type: "总统",
img: Trump
},
{
id: 7,
name: "马尔科·卢比奥",
type: "国务卿",
img: Rubio
},
{
id: 8,
name: "帕姆·邦迪",
type: "司法部长",
img: Bondi
},
{
id: 9,
name: "克丽斯蒂·诺姆",
type: "国土安全部部长",
img: Nome
}
]);
const dataList2 = ref([
{
id: 1,
name: "2016-2019 年美国钒表观消费量年均 8590 吨（含钒量），国内产量仅 340 万千克 / 年，进口依赖度超 80%（年均进口 780 万千克）（P1-481、P1-661）。"
},
{
id: 2,
name: "哈佛大学拒绝提供关于其外国学生已知不当行为和犯罪行为的充分信息，特朗普认为这对国家安全构成了不可接受的风险。"
},
{
id: 3,
name: "近年来，哈佛大学的犯罪率——包括暴力犯罪率——急剧上升。 哈佛未能对校园内至少某些行为违规进行纪律处分。"
},
{
id: 4,
name: "调查认为哈佛大学与包括敌对国家在内的外国建立了广泛的纠葛。 过去五年哈佛从外国政府获得了超过1.5亿美元的总捐赠，来自国外的捐赠超过10亿美元。 过去十年中，哈佛仅从中国就获得了超过1.5亿美元的资金支持。 哈佛“多次接待并培训中国共产党准军事组织成员”，哈佛研究人员还与中国相关人士合作开展可能推动中国军事现代化的研究。"
},
{
id: 5,
name: "哈佛大学继续公视其学生和教职工的公民权利，引发了多起联邦调查。 哈佛在招生中对不利种族的歧视如此明显，以至于最高法院在全国范围内终止这一做法的裁决以哈佛命名。"
}
]);
const dataList3 = ref([
{
id: 1,
name: "根据本公告第 1 条的暂停和入境限制，适用于在本公告发布日期后通过 SEVP 进入或试图进入美国开始就读哈佛大学的外国人。"
},
{
id: 2,
name: "国务卿应酌情考虑，目前就读哈佛大学且持有 F、M 或 J 签证且符合本公告第 1 条所述条件的外国人，是否应根据 INA 第 221（i）条撤销其签证， 8 美国法典 1201（i）"
},
{
id: 3,
name: "根据本公告第 1 条的入境暂停和限制，不适用于通过 SEVP 进入美国就读其他大学的外国人。"
},
{
id: 4,
name: "根据本公告第 1 条对入境的暂停和限制，不适用于任何由国务卿、国土安全部长或其指定人认定符合国家利益的外国人。"
},
{
id: 5,
name: "本公告发布日起不迟于 90 天内，司法部长与国土安全部长应通过总统国家安全事务助理共同向总统提交建议，决定是否延长或续期本公告第 1 条中暂停和限制入境的条款符合美国利益。"
},
])
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.cooperation-restrictions-detail {
width: 100%;
height: 100%;
background: rgba(243, 243, 244, 1);
overflow: auto;
padding-bottom: 50px;
.nav {
width: 100%;
height: 120px;
padding: 19px 0 20px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.nav-main {
width: 1600px;
height: 81px;
margin: 0 auto;
display: flex;
align-items: center;
img {
width: 72px;
height: 72px;
margin-right: 16px;
}
.content {
width: 758px;
height: 81px;
margin-right: 378px;
.cl1 {
font-size: 24px;
font-weight: 700;
line-height: 32px;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
margin-bottom: 1px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
margin-bottom: 1px;
}
.cl3 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
font-family: "Microsoft YaHei";
color: rgb(95, 101, 108);
}
}
.btn {
width: 376px;
height: 36px;
display: flex;
.btn1 {
border-radius: 6px;
border: 1px solid rgb(230, 231, 232);
width: 120px;
height: 36px;
background-color: #fff;
margin-right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 16px;
height: 16px;
margin-right: 8px;
}
font-size: 16px;
font-weight: 400;
line-height: 22px;
font-family: "Microsoft YaHei";
color: rgb(95, 101, 108);
}
.active {
background-color: rgb(5, 95, 194);
color: #fff;
}
}
}
}
.title {
width: 1600px;
height: 50px;
margin: 16px auto;
border-radius: 10px;
border: 1px solid rgba(174, 214, 255, 1);
background-color: rgba(246, 250, 255, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
align-items: center;
position: relative;
.title-one {
margin-left: 23px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
}
.title-two {
font-size: 16px;
font-weight: 700;
line-height: 24px;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
cursor: pointer;
}
img {
width: 24px;
height: 24px;
position: absolute;
top: 13px;
right: 13px;
cursor: pointer;
}
}
.main {
width: 1600px;
height: 1373px;
margin: 0 auto;
display: flex;
.left {
width: 520px;
height: 1012px;
margin-right: 17px;
.left-top {
margin-bottom: 16px;
width: 520px;
height: 386px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-top-title {
font-size: 20px;
font-weight: 700;
line-height: 26px;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
position: absolute;
top: 14px;
left: 22px;
}
.img1 {
width: 8px;
height: 20px;
position: absolute;
left: 0px;
top: 18px;
}
.img2 {
width: 28px;
height: 28px;
position: absolute;
top: 14px;
right: 44px;
cursor: pointer;
}
.img3 {
width: 28px;
height: 28px;
position: absolute;
top: 14px;
right: 12px;
cursor: pointer;
}
.left-top-content {
width: 470px;
height: 92px;
border-radius: 4px;
border: 1px solid rgba(231, 243, 255, 1);
background-color: rgba(246, 250, 255, 1);
position: absolute;
top: 58px;
left: 26px;
display: flex;
justify-content: center;
align-items: center;
padding: 16px 24px;
span {
font-size: 16px;
font-weight: 700;
line-height: 30px;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
}
}
.left-top-bottom {
width: 460px;
height: 184px;
position: absolute;
top: 169px;
left: 26px;
div {
height: 24px;
margin-bottom: 16px;
.tit {
display: inline-block;
width: 120px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.tit1 {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
}
.tit2 {
color: rgb(5, 95, 194);
cursor: pointer;
}
.tit3 {
display: inline-block;
border-radius: 4px;
background-color: rgba(231, 243, 255, 1);
color: rgb(5, 95, 194);
padding: 2px 4px;
}
}
}
}
.left-bottom {
width: 520px;
height: 610px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-bottom-title {
font-size: 20px;
font-weight: 700;
line-height: 26px;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
position: absolute;
top: 14px;
left: 22px;
}
.img1 {
width: 8px;
height: 20px;
position: absolute;
left: 0px;
top: 18px;
}
.img2 {
width: 28px;
height: 28px;
position: absolute;
top: 14px;
right: 44px;
cursor: pointer;
}
.img3 {
width: 28px;
height: 28px;
position: absolute;
top: 14px;
right: 12px;
cursor: pointer;
}
.left-bottom-main {
width: 478px;
height: 528px;
position: absolute;
top: 60px;
left: 21px;
.main-box {
width: 480px;
height: 48px;
border-radius: 50px;
border: 1px solid rgb(234, 236, 238);
margin-bottom: 12px;
position: relative;
cursor: pointer;
img {
width: 24px;
height: 24px;
position: absolute;
top: 12px;
left: 16px;
}
.name {
position: absolute;
top: 12px;
left: 52px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.type {
position: absolute;
top: 12px;
right: 12px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
}
}
}
}
}
.right {
width: 1063px;
height: 1373px;
.right-top {
margin-bottom: 16px;
width: 1063px;
height: 476px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
padding: 60px 19px 24px 22px;
.right-top-title {
font-size: 20px;
font-weight: 700;
line-height: 26px;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
position: absolute;
top: 14px;
left: 22px;
}
.img1 {
width: 8px;
height: 20px;
position: absolute;
left: 0px;
top: 18px;
}
.right-top-content {
width: 1022px;
height: 392px;
.right-top-item {
width: 1022px;
padding: 12px 0px;
position: relative;
display: flex;
align-items: center;
}
.right-top-item:nth-child(odd) {
background-color: rgb(247, 248, 249);
border-top: 1px solid rgb(234, 236, 238);
border-bottom: 1px solid rgb(234, 236, 238);
}
.right-top-item .id {
display: inline-block;
width: 24px;
height: 24px;
font-size: 12px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
background-color: rgba(231, 243, 255, 1);
text-align: center;
border-radius: 50%;
position: absolute;
top: 16px;
left: 24px;
}
.right-top-item .name {
display: inline-block;
width: 902px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-left: 64px;
}
.right-top-item img {
width: 16px;
height: 31px;
position: absolute;
top: 12px;
right: 24px;
cursor: pointer;
}
}
.btn {
padding: 2px 8px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
border-radius: 4px;
border: 1px solid rgb(230, 231, 232);
background-color: #fff;
cursor: pointer;
position: absolute;
z-index: 100;
}
.cl1 {
top: 14px;
right: 107px;
}
.cl2 {
top: 14px;
right: 19px;
}
.active {
color: rgb(5, 95, 194);
background-color: rgba(246, 250, 255, 1);
border-color: rgb(5, 95, 194);
}
}
.right-bottom {
width: 1063px;
height: 881px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.right-bottom-title {
font-size: 20px;
font-weight: 700;
line-height: 26px;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
position: absolute;
top: 14px;
left: 22px;
}
.img1 {
width: 8px;
height: 20px;
position: absolute;
left: 0px;
top: 18px;
}
.btn {
padding: 2px 8px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
border-radius: 4px;
border: 1px solid rgb(230, 231, 232);
background-color: #fff;
cursor: pointer;
position: absolute;
z-index: 100;
}
.cl1 {
top: 14px;
right: 107px;
}
.cl2 {
top: 14px;
right: 19px;
}
.active {
color: rgb(5, 95, 194);
background-color: rgba(246, 250, 255, 1);
border-color: rgb(5, 95, 194);
}
.right-bottom-content1 {
width: 1022px;
height: 199px;
position: absolute;
top: 60px;
left: 22px;
margin-bottom: 24px;
.right-bottom-content1-title {
width: 1022px;
height: 55px;
padding: 14px 56px 17px 24px;
display: flex;
align-items: center;
position: relative;
background-color: rgb(247, 248, 249);
border-top: 1px solid rgb(234, 236, 238);
border-bottom: 1px solid rgb(234, 236, 238);
span {
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
img {
width: 16px;
height: 31px;
position: absolute;
right: 24px;
top: 14px;
cursor: pointer;
}
}
.right-bottom-content1-content {
width: 1022px;
height: 144px;
padding: 12px 24px 12px 78px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
border-bottom: 1px solid rgb(234, 236, 238);
}
}
.right-bottom-content2 {
width: 1022px;
height: 385px;
position: absolute;
top: 283px;
left: 22px;
margin-bottom: 24px;
.right-bottom-content2-title {
width: 1022px;
height: 55px;
padding: 14px 56px 17px 24px;
display: flex;
align-items: center;
position: relative;
background-color: rgb(247, 248, 249);
border-top: 1px solid rgb(234, 236, 238);
border-bottom: 1px solid rgb(234, 236, 238);
span {
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
img {
width: 16px;
height: 31px;
position: absolute;
right: 24px;
top: 14px;
cursor: pointer;
}
}
.right-bottom-content2-content {
width: 1022px;
height: 330px;
.forcontent {
padding: 12px 24px 12px 54px;
border-bottom: 1px solid rgb(234, 236, 238);
span {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
}
}
}
}
.right-bottom-content3 {
width: 1022px;
height: 169px;
position: absolute;
top: 692px;
left: 22px;
margin-bottom: 24px;
.right-bottom-content3-title {
width: 1022px;
height: 55px;
padding: 14px 56px 17px 24px;
display: flex;
align-items: center;
position: relative;
background-color: rgb(247, 248, 249);
border-top: 1px solid rgb(234, 236, 238);
border-bottom: 1px solid rgb(234, 236, 238);
span {
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
img {
width: 16px;
height: 31px;
position: absolute;
right: 24px;
top: 14px;
cursor: pointer;
}
}
.right-bottom-content3-content {
width: 1022px;
height: 114px;
padding: 12px 24px 12px 78px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
border-bottom: 1px solid rgb(234, 236, 238);
}
}
}
}
}
}
</style>
src/views/coopRestriction/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="coop-page">
<!-- 面包屑 -->
<div class="breadcrumb">
<div class="breadcrumb-box">
<div class="breadcrumb-item">国家科技安全</div>
<div class="breadcrumb-item">&nbsp;>&nbsp;</div>
<div class="breadcrumb-item back-item" @click="handleBackHome">中美博弈概览</div>
<div class="breadcrumb-item">&nbsp;>&nbsp;</div>
<div class="breadcrumb-item">合作限制</div>
</div>
</div>
<!-- 主页面 -->
<div class="main-content">
<!-- 搜索栏部分 -->
<div class="search">
<div class="search-main">
<input v-model="input" placeholder="搜索合作限制" class="search-input" />
<div class="search-btn">
<img src="./assets/icons/search-icon.png" alt="" />
搜索
</div>
</div>
<div class="search-center">
<div class="search-item">
<div class="search-item-num">32</div>
<div class="search-item-name">相关法案</div>
</div>
<div class="search-item">
<div class="search-item-num">9</div>
<div class="search-item-name">相关政令</div>
</div>
<div class="search-item">
<div class="search-item-num">41</div>
<div class="search-item-name">相关政府公告</div>
</div>
</div>
<div class="search-bottom">
<div class="btn">
<div class="btn-text">最新动态</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn-text">咨询要闻</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn-text">数据总览</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn-text">资源库</div>
<div class="btn-icon">></div>
</div>
</div>
</div>
<!-- 最新动态 -->
<div class="newdata">
<com-title title="最新动态" />
<div class="newdata-main">
<newData />
</div>
</div>
<!-- 资讯要问 -->
<div class="ask">
<com-title title="咨询要闻" />
<div class="ask-main">
<askPage />
</div>
</div>
<!-- 数据总览 -->
<div class="datasub">
<com-title title="数据总览" />
<div class="datasub-main">
<dataSub />
</div>
</div>
<!-- 资源库 -->
<div class="reslib">
<com-title title="资源库" />
<div class="reslib-main">
<resLib />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue";
import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
// 搜索框
const input = ref("");
const router = useRouter();
// 返回首页
const handleBackHome = () => {
router.push({
path: "/overview"
});
};
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.coop-page {
width: 100%;
height: 100%;
.breadcrumb {
width: 100%;
height: 64px;
background-image: url("./assets/images/bread-bg.png");
background-size: cover;
padding: 17px 0px 21px 0px;
.breadcrumb-box {
margin-left: 160px;
display: flex;
// align-items: center;
.breadcrumb-item {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: #fff;
}
.back-item {
cursor: pointer;
&:hover {
color: #999;
}
}
}
}
.main-content {
overflow: auto;
width: 100%;
height: calc(100% - 64px);
background: url("./assets/images/background.png");
background-size: 100% 100%;
padding: 44px 160px 30px 160px;
.search {
width: 960px;
height: 225px;
margin: 0 auto 68px auto;
.search-main {
display: flex;
padding-right: 3px;
align-items: center;
justify-content: space-between;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
width: 960px;
height: 48px;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
.search-input {
border: none;
outline: none;
width: 800px;
height: 48px;
background-color: transparent;
font-size: 16px;
padding: 12px 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
}
.search-btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 42px;
border-radius: 8px;
background-color: rgb(5, 95, 194);
font-size: 18px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: #fff;
img {
width: 22px;
height: 22px;
margin-right: 8px;
}
}
}
.search-center {
width: 440px;
height: 57px;
margin: 36px auto;
display: flex;
align-items: center;
justify-content: space-between;
.search-item {
box-sizing: border-box;
width: 120px;
height: 57px;
.search-item-num {
width: 120px;
height: 22px;
font-size: 36px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(5, 95, 194);
text-align: center;
cursor: pointer;
}
.search-item-name {
width: 120px;
height: 24px;
margin-top: 11px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
text-align: center;
}
}
}
.search-bottom {
width: 688px;
height: 48px;
margin: 0 auto;
display: flex;
justify-content: space-between;
// gap: 16px;
.btn {
display: flex;
width: 160px;
height: 48px;
border: 1px solid rgba(174, 214, 255, 1);
box-sizing: border-box;
border-radius: 32px;
justify-content: center;
align-items: center;
background: rgba(231, 243, 255, 1);
position: relative;
cursor: pointer;
padding: 10px 40px 12px 36px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
&:hover {
background: #cae3fc;
}
.btn-text {
color: rgb(5, 95, 194);
font-family: "Microsoft YaHei";
font-size: 20px;
font-weight: 400;
line-height: 26px;
height: 26px;
}
.btn-icon {
position: absolute;
top: 14px;
right: 19px;
color: rgb(5, 95, 194);
font-size: 20px;
font-weight: 400;
}
}
}
}
.newdata {
width: 1600px;
height: 538px;
margin: 36px auto 64px auto;
.newdata-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.ask {
width: 1600px;
height: 528px;
margin: 0 auto 64px auto;
.ask-main {
width: 1600px;
height: 450px;
margin-top: 36px;
}
}
.datasub {
width: 1600px;
height: 538px;
margin: 0 auto 88px auto;
.datasub-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.reslib {
width: 1600px;
height: 1633px;
margin: 0 auto 0px auto;
.reslib-main {
width: 1600px;
height: 1565px;
margin-top: 26px;
}
}
}
}
</style>
src/views/exportControl/analysis/components/mapCharts.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="mapChartsWrap">
<Echarts :option="mapOption"></Echarts>
</div>
</template>
<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getMapOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const mapOption = shallowRef({});
onMounted(() => {
mapOption.value = getMapOption();
});
</script>
<style lang="scss" scoped>
.mapChartsWrap {
width: 100%;
height: 100%;
}
</style>
src/views/exportControl/analysis/components/panel1.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="panel1Wrap">
<div class="row">
<CardCustom title="实体清单制裁强度" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel1"></div>
</CardCustom>
<CardCustom title="新增实体数量增长趋势" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel2"></div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="实体清单更新频率" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel3"></div>
</CardCustom>
<CardCustom title="重点实体列表" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel4"></div>
</CardCustom>
</div>
</div>
</template>
<script setup>
import CardCustom from "../../components/CardCustom.vue";
</script>
<style lang="scss" scoped>
.panel1Wrap {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.subPanel1 {
height: 100%;
padding: 2px 24px 0 24px;
display: flex;
}
</style>
src/views/exportControl/analysis/components/panel2.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="panel2">panel2</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/panel3.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="panel3">panel3</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/panel4.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="panel4">panel4</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/pieCharts.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="pieChartsWrap">
<div class="item">
<Echarts :option="pie1Option"></Echarts>
</div>
<div class="item">
<Echarts :option="pie2Option"></Echarts>
</div>
</div>
</template>
<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getPieOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const pie1Option = shallowRef({});
const pie2Option = shallowRef({});
onMounted(() => {
pie1Option.value = getPieOption(
[
{ name: "能源领域", value: 30 },
{ name: "集成电路领域", value: 20 },
{ name: "人工智能领域", value: 12 },
{ name: "通信网络领域", value: 18 },
{ name: "量子科技领域", value: 10 },
{ name: "生物科技领域", value: 10 }
],
"领域分布"
);
pie2Option.value = getPieOption(
[
{ name: "能源领域", value: 30 },
{ name: "集成电路领域", value: 20 },
{ name: "人工智能领域", value: 12 },
{ name: "通信网络领域", value: 18 },
{ name: "量子科技领域", value: 10 },
{ name: "生物科技领域", value: 10 }
],
"类别分布"
);
});
</script>
<style lang="scss" scoped>
.pieChartsWrap {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 16px;
padding-top: 6px;
.item {
width: 460px;
height: 388px;
background-color: rgba(231, 243, 255, 0.5);
}
}
</style>
src/views/exportControl/analysis/content/deepDig.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="deepDig">
<div class="row">
<div class="panelButtonList">
<div
class="item"
:class="{ activeItem: activePanelId === item.id }"
v-for="item in panelListData"
:key="item.id"
@click="setActivePanelId(item.id)"
>
<div
class="line"
:class="{
lineActive: activePanelId === item.id,
lineUp: activePanelId !== item.id && item.isUp,
lineDown: activePanelId !== item.id && !item.isUp
}"
></div>
<div class="infoWrap">
<div
class="number"
:class="{
numberActive: activePanelId === item.id,
numberUp: activePanelId !== item.id && item.isUp,
numberDown: activePanelId !== item.id && !item.isUp
}"
>
{{ item.number }}
</div>
<div class="name">{{ item.name }}</div>
</div>
<div class="text">较上次{{ item.isUp ? "增加" : "减少" }}{{ item.ComparisonNumber }}个</div>
<div
class="icon"
:class="{
iconActiveUp: activePanelId === item.id && item.isUp,
iconActiveDown: activePanelId === item.id && !item.isUp,
iconUp: activePanelId !== item.id && item.isUp,
iconDown: activePanelId !== item.id && !item.isUp
}"
></div>
</div>
</div>
</div>
<div class="row">
<panel1 v-if="activePanelId === panelListData[0].id"></panel1>
<panel2 v-if="activePanelId === panelListData[1].id"></panel2>
<panel3 v-if="activePanelId === panelListData[2].id"></panel3>
<panel4 v-if="activePanelId === panelListData[3].id"></panel4>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Panel1 from "../components/panel1.vue";
import Panel2 from "../components/panel2.vue";
import Panel3 from "../components/panel3.vue";
import Panel4 from "../components/panel4.vue";
const panelListData = [
{
id: 1,
name: "新增实体数量",
number: "37",
isUp: true,
ComparisonNumber: "31"
},
{
id: 2,
name: "上市企业数量",
number: "6",
isUp: true,
ComparisonNumber: "2"
},
{
id: 3,
name: "涉及领域数量",
number: "2",
isUp: false,
ComparisonNumber: "1"
},
{
id: 4,
name: "实体类别数量",
number: "4",
isUp: true,
ComparisonNumber: "1"
}
];
const activePanelId = ref(panelListData[0].id);
const setActivePanelId = id => {
activePanelId.value = id;
};
</script>
<style lang="scss" scoped>
.deepDig {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.panelButtonList {
display: flex;
justify-content: center;
gap: 16px;
.item {
width: 388px;
height: 80px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
cursor: pointer;
.line {
width: 4px;
height: 49px;
margin-right: 26px;
}
.lineActive {
background-color: rgba(255, 255, 255, 1);
}
.lineUp {
background-color: rgba(206, 79, 81, 1);
}
.lineDown {
background-color: rgba(33, 129, 57, 1);
}
.infoWrap {
flex: 1;
display: flex;
flex-direction: column;
.number {
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
.numberActive {
color: rgba(255, 255, 255, 1);
}
.numberUp {
color: rgba(206, 79, 81, 1);
}
.numberDown {
color: rgba(33, 129, 57, 1);
}
.name {
color: rgba(34, 41, 52, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.text {
color: rgba(34, 41, 52, 1);
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
.icon {
width: 32px;
height: 32px;
margin-right: 15px;
margin-left: 8px;
background-size: 100% 100%;
}
.iconActiveUp {
background-image: url("../../assets/images/activeUp.png");
}
.iconActiveDown {
background-image: url("../../assets/images/activeDown.png");
}
.iconUp {
background-image: url("../../assets/images/UnActiveUp.png");
}
.iconDown {
background-image: url("../../assets/images/UnActiveDown.png");
}
}
.activeItem {
background-color: rgba(5, 95, 194, 1);
.infoWrap {
.name {
color: rgba(255, 255, 255, 1);
}
}
.text {
color: rgba(255, 255, 255, 1);
}
}
}
</style>
src/views/exportControl/analysis/content/depthMine.vue deleted 100644 → 0
浏览文件 @ d1c60abe
<template>
<div class="depth-mine-container">
<div class="depth-mine-left">
<div
@click="handleClick(index)"
:class="['depth-mine-left-item', activeLeftTab === index ? 'depth-mine-left-item-active' : '']"
v-for="(item, index) in data"
:key="index"
>
<div class="depth-mine-left-item-title">{{ item[0] }}</div>
<div class="depth-mine-left-item-desc">{{ item[1] }}</div>
</div>
</div>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="实体清单历次更新中外受影响情况对比" height="580px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<!-- <div ref="echartsRef" style="height: 425px; width: 100%"></div> -->
<ECharts :option="chartOption" autoresize :style="{ height: '425px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="实体清单历次更新中外受影响情况对比" height="580px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<div class="content-box">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column type="index" label="序号" />
<el-table-column prop="date" label="更新日期" width="150" />
<el-table-column prop="entity" label="实体数/历史排名" width="150" />
<el-table-column prop="entityCN" label="中国实体数/历史排名" />
<el-table-column prop="proportion" label="中国占比/历史排名" />
</el-table>
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text"
>相对于近几次更新，中国新增受制裁的实体数量占比的排名都显著提高，美国制裁中国实体的强度显著提升。</span
>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="实体清单更新频率" height="505px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<div class="content-box">
<!-- <v-charts :option="option" autoresize :style="{ height: '326px' }" /> -->
<!-- <div ref="frequenceRef" style="height: 340px; width: 100%"></div> -->
<ECharts :option="frequenceOption" autoresize :style="{ height: '326px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="重点实体列表" height="505px">
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 8px">
<el-input
placeholder="请输入关键词，使用(、)作为分隔符."
:suffix-icon="Search"
clearable
style="width: 360px"
>
<!-- <template #append>
<el-icon><Search /></el-icon>
</template> -->
</el-input>
<!-- <el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button> -->
</div>
</template>
<template #default>
<div class="content-box">
<div class="content-box-list">
<div class="content-box-list-item" v-for="item in entityList" :key="item.entity">
<div class="content-box-list-item-title">{{ item.entity }}</div>
<div class="content-box-list-item-tag">
<el-tag
:type="TAGTYPE[Math.floor(Math.random() * 5)]"
v-for="tag in item.tags"
:key="tag"
>{{ tag }}</el-tag
>
</div>
</div>
</div>
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text"
>本次实体清单更新,科研院所占比相对较高。需要注意的是,中国科学技术大学、中国科学院物理研究所等国内重点科研机构被列入实体清单,此外还有中科星图以及中电科旗下的多家研究所被列入清单,可能会对相关行业产生显著影响。</span
>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// import * as echarts from "echarts";
import ECharts from "@/components/Chart/index.vue";
// import VCharts from "vue-echarts";
import { useEcharts } from "@/hooks/useEcharts";
// import echarts from "@/plugins/echarts";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";
const tableData = ref([
{
date: "2024年5月14日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年4月11日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年2月27日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年12月7日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年11月15日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: " 2024年3月5日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
}
]);
// 重点实体列表
const entityList = ref([
{
entity: "中国科学技术大学",
tags: ["双一流", "985", "关税政策"]
},
{
entity: "合肥量子信息科学国家实验室",
tags: ["中国上市企业"]
},
{
entity: "中国科学院物理研究所",
tags: ["科研院所"]
}
]);
const frequenceRef = ref(null);
const echartsRef = ref(null);
const frequenceOption = ref({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: 20,
right: 3,
bottom: 0,
left: 3,
containLabel: true
},
legend: {
data: [],
bottom: 0,
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#222B45"
}
},
xAxis: {
type: "category",
data: [
"202301",
"202302",
"202303",
"202304",
"202305",
"202306",
"202307",
"202308",
"202309",
"202310",
"202311",
"202312"
],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#889fcc"
}
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: {
color: "#EFF1F3",
width: 0.8
}
},
axisLabel: { color: "#889fcc" }
},
series: [
{
name: "aa",
type: "bar",
data: [3, 2, 3, 0, 2, 1, 3, 1, 0, 2, 3, 2],
barWidth: "15",
itemStyle: {
color: "#639dfa",
borderRadius: [4, 4, 0, 0]
}
}
// {
// name: "bbb",
// type: "bar",
// data: [6, 13, 10, 5, 12, 5],
// barWidth: "15",
// itemStyle: {
// color: "#639dfa",
// borderRadius: [4, 4, 0, 0]
// }
// }
]
});
const chartOption = ref({
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: false },
saveAsImage: { show: false }
}
},
legend: {
data: ["中国", "外国", "占比"]
},
xAxis: [
{
type: "category",
data: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "量",
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: "{value}"
}
},
{
type: "value",
name: "占比",
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: "{value}"
}
}
],
series: [
{
name: "中国",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: "外国",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value + " ml";
}
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: "占比",
type: "line",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
});
onMounted(() => {
// let frequenceChart = echarts.init(frequenceRef.value);
// let chart = echarts.init(echartsRef.value);
// useEcharts(frequenceChart, frequenceOption);
// useEcharts(chart, chartOption);
});
const data = ref([
["新增实体37个", "较上次多31个"],
["上市企业3家", "较上次多2家"],
["涉及领域2个", "较上次少1个"],
["实体类别3种", "较上次多2种"]
]);
const activeLeftTab = ref(0);
const handleClick = index => {
activeLeftTab.value = index;
};
</script>
<style scoped>
.depth-mine-container {
padding: 0 5% 0 150px;
position: relative;
}
.depth-mine-left {
position: absolute;
left: 0;
top: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.depth-mine-left-item {
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
color: rgba(95, 101, 108, 1);
padding: 10px 16px;
border-radius: 10px;
}
.depth-mine-left-item-active {
color: #fff;
background-color: rgba(10, 87, 166, 1);
}
.depth-mine-left-item-title {
font-size: 16px;
font-weight: 400;
}
.content-box {
/* height: 90vh; */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-box-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.content-box-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-box-list-item-title {
font-size: 16px;
font-weight: 700;
color: rgba(10, 18, 30, 1);
}
.content-box-list-item-tag {
display: flex;
gap: 8px;
}
.content-box-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: rgba(246, 251, 255, 1);
padding: 5px 15px;
}
.content-box-footer-text {
font-size: 16px;
font-weight: 400;
color: rgba(10, 87, 166, 1);
}
.footer-img-small {
width: 20px;
height: 20px;
}
.footer-img-large {
width: 24px;
height: 24px;
}
</style>
src/views/exportControl/analysis/content/overview.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="overviewContainer">
<div class="row">
<CardCustom title="实体清单发布机构" :style="{ width: '984px', height: '284px' }">
<div class="panel1">
<img :src="panel1.img" alt="" class="img" />
<div class="infoWrap">
<div class="item">
<div class="name">机构名称：</div>
<div class="doc">{{ panel1.mingcheng }}</div>
</div>
<div class="item">
<div class="name">相关措施：</div>
<div class="doc">{{ panel1.cuoshi }}</div>
</div>
<div class="item">
<div class="name">机构职责：</div>
<div class="doc zhize">{{ panel1.zhize }}</div>
</div>
</div>
</div>
</CardCustom>
<CardCustom title="重点人物" :style="{ width: '600px', height: '284px' }">
<div class="panel2">
<div class="item" v-for="(item, index) in panel2" :key="index">
<img :src="item.img" alt="" class="img" />
<div class="infoWrap">
<div class="name">{{ item.name }}</div>
<div class="enName">{{ item.enName }}</div>
<div class="party">{{ item.party }}</div>
</div>
</div>
</div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="实体清单分布" :style="{ width: '984px', height: '520px' }">
<template #right>
<div class="panel3ButtonWrap">
<div
class="leftButton"
:class="{ activeButton: panel3ActiveIndex === 1 }"
@click="setPanel3ActiveIndex(1)"
>
领域类别分布
</div>
<div
class="rightButton"
:class="{ activeButton: panel3ActiveIndex === 2 }"
@click="setPanel3ActiveIndex(2)"
>
区域分布
</div>
</div>
<div class="panel3Jinbi"></div>
</template>
<div class="panel3">
<div class="chartWrap">
<PieCharts v-if="panel3ActiveIndex === 1"></PieCharts>
<MapCharts v-if="panel3ActiveIndex === 2"></MapCharts>
</div>
<div class="hintWrap">
<div class="icon1"></div>
<div class="title">本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。</div>
<div class="icon2Wrap">
<div class="icon2"></div>
</div>
</div>
</div>
</CardCustom>
<CardCustom title="制裁原因" :style="{ width: '600px', height: '520px' }">
<div class="panel4">
<div class="item" v-for="(item, index) in panel4" :key="index">
<div class="icon1">{{ index + 1 }}</div>
<div class="text">{{ item.text }}</div>
<div class="icon2"></div>
</div>
</div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="实体清单列表" :style="{ width: '984px', height: '678px' }">
<template #right>
<el-checkbox v-model="panel5IsChecked" label="只看中国实体" size="large" :style="{ marginRight: '15px' }" />
<ButtonList
:list="panel5ButtonList"
:gap="8"
:active-id="panel5ButtonAcitveID"
@click="panel5SetButtonAcitveID"
:style="{ marginRight: '15px' }"
></ButtonList>
</template>
<div class="panel5">
<div class="hintWrap">
<div class="title">
共计
<span class="text1">112</span>
家，其中50%规则涉及
<span class="text2">604</span>
家
</div>
</div>
<div class="tableWrap">
<el-table
:data="panel5MockData"
class="sanction-table"
stripe
empty-text="暂无数据"
height="700px"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table-column prop="name" label="实体清单" min-width="180">
<template #default="{ row }">
<div style="font-weight: 500" class="name">
<img :src="row.img" alt="" class="img" />
{{ row.name }}
</div>
</template>
</el-table-column>
<el-table-column prop="domains" label="涉及领域" width="100">
<template #default="{ row }">
<div class="domain-tags">
<el-tag v-for="tag in row.domains" :key="tag" :type="panel5TypeMap[tag]">{{
tag
}}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="address" label="上市地点" width="100" align="center">
<template #default="{ row }">
{{ row.address }}
</template>
</el-table-column>
<el-table-column prop="time" label="制裁时间" width="120" align="center">
<template #default="{ row }">
{{ row.time }}
</template>
</el-table-column>
<el-table-column prop="revenue" label="营收(亿元)" width="100" align="center">
<template #default="{ row }">
{{ row.revenue }}
</template>
</el-table-column>
<el-table-column prop="subCompany" label="50%规则子企业" min-width="140" align="left">
<template #default="{ row }">
<span class="subCompany">
{{ row.subCompany }}
</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</CardCustom>
<CardCustom title="美国前序相关制裁、前序相关事件列表" :style="{ width: '600px', height: '678px' }">
<div class="panel6">
<div class="item" v-for="(item, idx) in panel6" :key="item.title">
<div class="left">
<div class="icon"></div>
<div class="line"></div>
</div>
<div class="right">
<div class="date">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
<div class="desc">{{ item.desc }}</div>
</div>
</div>
<div class="more">
查看更多
<span class="moreIcon"></span>
</div>
</div>
</CardCustom>
</div>
</div>
</template>
<script setup>
import CardCustom from "../../components/CardCustom.vue";
import PieCharts from "../components/pieCharts.vue";
import MapCharts from "../components/mapCharts.vue";
import ButtonList from "@/components/buttonList/buttonList.vue";
import { onMounted, reactive, ref } from "vue";
import panel1_1 from "../../assets/images/panel1_1.png";
import panel2_1 from "../../assets/images/panel2_1.png";
import panel2_2 from "../../assets/images/panel2_2.png";
import panel2_3 from "../../assets/images/panel2_3.png";
import panel2_4 from "../../assets/images/panel2_4.png";
import panel5_1 from "../../assets/images/panel5_1.png";
import panel5_2 from "../../assets/images/panel5_2.png";
import panel5_3 from "../../assets/images/panel5_3.png";
import panel5_4 from "../../assets/images/panel5_4.png";
import panel5_5 from "../../assets/images/panel5_5.png";
import panel5_6 from "../../assets/images/panel5_6.png";
import panel5_7 from "../../assets/images/panel5_7.png";
import panel5_8 from "../../assets/images/panel5_8.png";
const panel1 = ref({
img: panel1_1,
mingcheng: "美国商务部工业与安全局",
cuoshi: "出口管制条例（EAR）、实体清单、商业管制清单（CCL）、232调查等",
zhize: "美国商务部工业与安全局（BIS）是美国商务部下属机构，核心职责围绕国家安全与战略技术管控展开，具体包括：以维护商业管制清单（CCL）和出口管制分类号（ECCN）的方式，对敏感货物及两用技术实施出口管制并确定许可要求；通过出口执行局（OEE）执行出口管制、反抵制等相关法律，对违规行为采取行政、刑事等处罚措施；在出口管制和战略贸易问题上与其他国家合作，参与并领导国际出口管制制度。"
});
const panel2 = ref([
{
name: "吉娜·雷蒙多",
enName: "Gina Raimondo",
party: "美国民主党",
img: panel2_1
},
{
name: "迈克・约翰逊",
enName: "Mike Johnson",
party: "美国共和党",
img: panel2_2
},
{
name: "艾伦·埃斯特韦斯",
enName: "Alan Estevez",
party: "美国民主党",
img: panel2_3
},
{
name: "凯・格兰杰",
enName: "Kay Granger",
party: "美国共和党",
img: panel2_4
}
]);
const panel3ActiveIndex = ref(1);
const setPanel3ActiveIndex = index => {
panel3ActiveIndex.value = index;
};
const panel4 = ref([
{
text: "获取美国产物项，以支持中国量子技术；"
},
{
text: "支持2023年2月飞越美国上空的高空气球；"
},
{
text: "获取获取美国原产的无人机物项供中国军方使用。"
},
{
text: "法案序言称“中国光伏、风电企业通过政府补贴倾销产品”"
},
{
text: "将中国定位为“通过强制技术转让获取先进制程的威胁”"
}
]);
const panel5ButtonList = [
{ id: 1, text: "新增实体" },
{ id: 2, text: "移除实体" }
];
const panel5ButtonAcitveID = ref(panel5ButtonList[0].id);
const panel5SetButtonAcitveID = id => {
panel5ButtonAcitveID.value = id;
};
const panel5IsChecked = ref(true);
const panel5TypeMap = {
人工智能: "danger",
通信网络: "warning",
航空航天: "success"
};
const panel5MockData = [
{
name: "科大讯飞股份有限公司",
domains: ["人工智能"],
address: "深圳",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "讯飞智元信息科技...等15家>",
img: panel5_1
},
{
name: "华为技术有限公司",
domains: ["通信网络"],
address: "--",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "海思半导体有限公...等15家>",
img: panel5_2
},
{
name: "中国航空工业集团",
domains: ["航空航天"],
address: "--",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "中航科技控股有限...等15家>",
img: panel5_3
},
{
name: "杭州海康威视有限公司",
domains: ["航空航天"],
address: "深圳",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "海云智能科技有限...等15家>",
img: panel5_4
},
{
name: "浪潮集团有限公司",
domains: ["人工智能"],
address: "--",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "浪潮商用机器有限...等15家>",
img: panel5_5
},
{
name: "中兴通讯股份有限公司",
domains: ["航空航天"],
address: "深圳",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "中融讯合通信设备...等15家>",
img: panel5_6
},
{
name: "大疆创新科技有限公司",
domains: ["人工智能"],
address: "--",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "大疆智能计算服务...等15家>",
img: panel5_7
},
{
name: "艾睿中国电子贸易有限公司",
domains: ["航空航天"],
address: "上海",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "讯飞智元信息科技...等15家>",
img: panel5_8
}
];
// 历次制裁过程
const panel6 = ref([
{
time: "2025-09-02",
title: "传感器和仪器仪表技术咨询委员会将于2024年5月9日召开部分闭门会议",
desc: "传感器与仪器仪表技术咨询委员会(以下简称“委员会”)将于美国东部夏令时间2024年5月9日星期四下午1:00至2:30召开会议。本次会议将通过微软团队(MS Teams)以线上形式举行。根据美国商务部第10-16号《部门组织》文件。"
},
{
time: "2025-04-17",
title: "美国对华加征关税至20%并扩大科技制裁",
desc: '美国以"芬太尼问题"为由提高对华关税至20%，恢复钢铁铝关税；同时推动《恢复贸易公平法案》，计划对中国商品征收100%关税。系统性打压中国高科技产业，关税措施实质为经济勒索。'
},
{
time: "2025-04-17",
title: "中美关税战升级至125%与反制措施",
desc: '美国将对华关税从34%提升至84%（总税率104%），中方同步对美商品加征同等税率，并暂停进口美国影片、限制留学合作。特朗普政府通过"基准关税+对等关税+额外加征"策略施压，引发全球供应链震荡。'
}
]);
</script>
<style lang="scss" scoped>
.overviewContainer {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.panel1 {
height: 100%;
padding: 2px 24px 0 24px;
display: flex;
.img {
width: 90px;
height: 90px;
margin-right: 16px;
}
.infoWrap {
flex: 1;
display: flex;
flex-direction: column;
gap: 19px;
.item {
display: flex;
.name {
flex-shrink: 0;
width: 100px;
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.doc {
flex: 1;
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.zhize {
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.panel2 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
height: 100%;
overflow: auto;
align-content: flex-start;
gap: 16px;
padding: 0 23px 20px;
.item {
width: 268px;
height: 94px;
padding: 10px 16px;
background: rgba(231, 243, 255, 0.5);
display: flex;
align-items: center;
.img {
width: 70px;
height: 70px;
margin-right: 16px;
}
.infoWrap {
display: flex;
flex-direction: column;
flex: 1;
max-height: 100%;
gap: 3px;
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
.name {
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
}
}
.panel3 {
height: 100%;
display: flex;
flex-direction: column;
padding: 3px 24px 10px;
.chartWrap {
flex: 1;
}
.hintWrap {
height: 40px;
display: flex;
align-items: center;
padding: 0 12px;
border: 1px solid rgb(231, 241, 255);
border-radius: 4px;
background: rgb(246, 251, 255);
.icon1 {
width: 19px;
height: 20px;
background-image: url("../../assets//images/aiIcon.png");
background-size: 100% 100%;
}
.title {
color: var(--color-main-active);
font-size: 14px;
font-weight: 400;
line-height: 24px;
margin-left: 20px;
}
.icon2Wrap {
width: 24px;
height: 24px;
background-color: rgba(231, 243, 255, 1);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
margin-left: auto;
.icon2 {
width: 12px;
height: 12px;
background-image: url("../../assets//images/rightIcon.png");
background-size: 100% 100%;
}
}
}
}
.panel3ButtonWrap {
flex: 1;
display: flex;
justify-content: center;
margin-right: 18px;
.leftButton {
width: 140px;
height: 34px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
border-radius: 40px 0 0 40px;
border: 2px solid rgba(5, 95, 194, 1);
border-right: none;
cursor: pointer;
}
.rightButton {
width: 140px;
height: 34px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
border-radius: 0px 40px 40px 0px;
border: 2px solid rgba(5, 95, 194, 1);
border-left: none;
cursor: pointer;
}
.activeButton {
background-color: rgba(5, 95, 194, 1);
color: #ffffff;
}
}
.panel3Jinbi {
width: 28px;
height: 28px;
background-image: url("../../assets/images/panel3_1.png");
background-size: 100% 100%;
margin-right: 4px;
cursor: pointer;
}
.panel4 {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
.item {
width: 552px;
height: 48px;
display: flex;
align-items: center;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
.icon1 {
width: 24px;
height: 24px;
border-radius: 12px;
background-color: rgba(231, 243, 255, 1);
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px;
margin-right: 15px;
font-size: 12px;
color: rgb(5, 95, 194);
font-weight: 500;
}
.text {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
flex: 1;
}
.icon2 {
width: 16px;
height: 16px;
background-image: url("../../assets/images/panel4_1.png");
background-size: 100% 100%;
margin-left: 15px;
margin-right: 15px;
}
}
}
.panel5 {
height: 100%;
display: flex;
flex-direction: column;
padding: 3px 24px 10px;
:deep(.table-header) {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
height: 64px;
}
:deep(.table-row) {
height: 60px;
font-size: 16px;
font-weight: 400;
}
.hintWrap {
height: 40px;
display: flex;
align-items: center;
padding: 0 12px;
border: 1px solid rgb(231, 241, 255);
border-radius: 4px;
background: rgb(246, 251, 255);
.title {
color: var(--color-main-active);
font-size: 14px;
font-weight: 400;
line-height: 24px;
.text1 {
color: rgb(206, 79, 81);
font-weight: 900;
}
.text2 {
color: rgb(255, 149, 77);
font-weight: 900;
}
}
}
.tableWrap {
flex: 1;
margin-top: 14px;
min-height: 0;
}
.name {
display: flex;
align-items: center;
.img {
width: 40px;
height: 40px;
margin-right: 6px;
margin-left: 6px;
}
}
.subCompany {
color: rgba(5, 95, 194, 1);
}
}
.panel6 {
height: 100%;
padding: 6px 45px 0 28px;
display: flex;
flex-direction: column;
align-items: center;
.item {
display: flex;
w
.left {
position: relative;
margin-right: 20px;
.icon {
position: absolute;
left: -5px;
top: 7px;
width: 10px;
height: 10px;
background-image: url("../../assets/images/panel6_1.png");
background-size: 100% 100%;
}
.line {
width: 1px;
background-color: rgba(174, 214, 255, 1);
height: 100%;
}
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: 40px;
.date {
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: rgba(5, 95, 194, 1);
}
.title {
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 12px;
}
.desc {
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 8px;
}
}
}
.more {
display: flex;
color: rgba(5, 95, 194, 1);
font-size: 14px;
font-weight: 400;
line-height: 22px;
align-items: center;
cursor: pointer;
.moreIcon {
width: 16px;
height: 16px;
background-image: url("../../assets/images/panel6_more.png");
margin-left: 3px;
background-size: 100% 100%;
margin-bottom: 2px;
}
}
}
</style>
src/views/exportControl/analysis/content/survey.vue deleted 100644 → 0
浏览文件 @ d1c60abe
<template>
<div style="padding: 0 5%">
<el-row :gutter="20">
<el-col :span="13">
<custom-container title="实体清单发布机构">
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 8px">
<!-- <el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input> -->
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-card">
<el-image class="content-img" :src="BISlogo" fit="fill" />
<div class="content-desc">
<div class="content-desc-item">
<div class="content-desc-title">机构名称：</div>
<div class="content-desc-content">美国商务部工业与安全局</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">相关措施：</div>
<div class="content-desc-content">出口管制条例（EAR）、实体清单、商业管制清单（CCL）、232调查等</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">法案类别：</div>
<div class="content-desc-content">公法（编号：Pub. L. No. 119-21）</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">机构职责：</div>
<div class="content-desc-content content-desc-content-long">
美国商务部工业与安全局是美国商务部的一个部门，主要负责管理和监督美国的出口管制和安全问题。通过确保有效的出口管制和条约合规体系，促进美国保持战略技术领导地位，从而推动美国国家安全、外教政策及经济目标的实现。
</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="重点人物">
<!-- 中间内容自定义 -->
<template #default>
<div style="display: flex; gap: 20px">
<div class="renwu-card">
<el-image class="content-img-2" :src="Renwu1" fit="fill" />
<div class="content-desc">
<div class="content-desc-title">吉娜·雷蒙多</div>
<div class="content-desc-content content-desc-content-long">英文名：Gina Raimondo</div>
<div class="content-desc-content content-desc-content-long">党派：美国民主党</div>
</div>
</div>
<div class="renwu-card">
<el-image class="content-img-2" :src="Renwu2" fit="fill" />
<div class="content-desc">
<div class="content-desc-title">艾伦·埃斯特韦斯</div>
<div class="content-desc-content content-desc-content-long">英文名：Alan Estevez</div>
<div class="content-desc-content content-desc-content-long">党派：美国民主党</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="制裁原因">
<!-- 中间内容自定义 -->
<template #default>
<div style="line-height: 25px; color: rgba(95, 101, 108, 1)">
<div>1.获取美国产物项，以支持中国量子技术；</div>
<div>2.支持2023年2月飞越美国上空的高空气球；</div>
<div>3.获取获取美国原产的无人机物项供中国军方使用。</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="11">
<custom-container title="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 12px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary" icon="Plus">新建项目</el-button>
</div>
</template> -->
<!-- 中间内容自定义 -->
<template #default>
<div class="content-vertical-card">
<el-button-group>
<el-button :icon="Document"> 整体情况</el-button>
<el-button type="primary" :icon="Postcard">
国内分布
<!-- <el-icon class="el-icon--right"><ArrowRight /></el-icon> -->
</el-button>
</el-button-group>
<el-image class="content-distribution-img" :src="Distribution" fit="fill" />
<div style="flex: 1; justify-content: flex-start; width: 100%">
<el-button-group>
<el-button>按类别</el-button>
<el-button type="primary">
按领域
<!-- <el-icon class="el-icon--right"><ArrowRight /></el-icon> -->
</el-button>
</el-button-group>
</div>
</div>
</template>
<!-- 底部自定义内容 -->
<!-- <template #footer>
<el-button>取消</el-button>
<el-button type="primary">保存更改</el-button>
</template> -->
</custom-container>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<custom-container title="美国前序相关制裁、前序相关事件列表">
<template #default>
<!-- <div class="example-card">
<h3>项目介绍</h3>
<p>这是一个示例项目，展示了如何使用自定义容器组件。该组件具有高度可定制性，可以适应各种业务场景的需求。</p>
</div>
<div class="example-card">
<h3>项目进度</h3>
<p>当前项目已完成75%，预计在下个月初完成所有开发任务并进入测试阶段。</p>
<el-progress :percentage="75" :stroke-width="16" />
</div> -->
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-9-25</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">传感器和仪器仪表技术咨询委员会将于2024年5月9日召开部分闭门会议</div>
<div class="time-line-desc-text">
传感器与仪器仪表技术咨询委员会(以下简称“委员会”)将于美国东部夏令时间2024年5月9日星期四下午1:00至2:30召开会议。本次会议将通过微软团队(MS
Teams)以线上形式举行。根据美国商务部第10-16号《部门组织》文件。
</div>
</div>
</div>
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-4-25</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">中美关税战升级至125%与反制措施</div>
<div class="time-line-desc-text">
美国将对华关税从34%提升至84%（总税率104%），中方同步对美商品加征同等税率，并暂停进口美国影片、限制留学合作。特朗普政府通过"基准关税+对等关税+额外加征"策略施压，引发全球供应链震荡。
</div>
</div>
</div>
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-4-17</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">美国对华加征关税至20%并扩大科技制裁议</div>
<div class="time-line-desc-text">
美国以"芬太尼问题"为由提高对华关税至20%，恢复钢铁铝关税；同时推动《恢复贸易公平法案》，计划对中国商品征收100%关税。系统性打压中国高科技产业，关税措施实质为经济勒索。
</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div>
</template>
<script setup>
import CustomContainer from "@/components/Container/index.vue";
import BISlogo from "@/assets/images/BISlogo.png";
import Distribution from "@/assets/images/distribution.png";
import Renwu1 from "@/assets/images/renwu-1.png";
import Renwu2 from "@/assets/images/renwu-2.png";
import { Document } from "@element-plus/icons-vue";
import { Postcard } from "@element-plus/icons-vue";
</script>
<style scoped>
.content-card {
display: flex;
align-items: flex-start;
gap: 20px;
}
.content-vertical-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.renwu-card {
display: flex;
align-items: center;
gap: 20px;
width: 379px;
height: 148px;
background-color: rgba(234, 236, 238, 1);
padding-left: 10px;
}
.content-img {
width: 154px;
height: 154px;
flex-shrink: 0;
}
.content-img-2 {
width: 128px;
height: 128px;
flex-shrink: 0;
}
.content-distribution-img {
width: 627px;
height: 536px;
}
.content-desc {
display: flex;
flex-direction: column;
gap: 8px;
}
.content-desc-item {
display: flex;
gap: 4px;
}
.content-desc-title {
width: 100px;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
.content-desc-content {
color: rgba(10, 87, 166, 1);
font-size: 16px;
font-weight: 700;
}
.content-desc-content-long {
color: rgba(95, 101, 108, 1);
font-weight: 400;
}
.time-line {
display: flex;
gap: 20px;
align-items: flex-start;
padding-left: 10px;
margin-bottom: 20px;
}
.time-line-title {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.time-line-dot {
width: 10px;
height: 10px;
}
.time-line-title-text {
font-size: 14px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
color: var(--base-color);
}
.time-line-desc-title {
font-size: 16px;
font-weight: 400;
color: var(--base-color);
margin-bottom: 5px;
}
.time-line-desc-text {
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
}
.time-line-dot {
width: 8px;
height: 8px;
background-color: rgba(10, 87, 166, 1);
border-radius: 50%;
}
.example-card {
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 16px;
margin-bottom: 16px;
background-color: #fafafa;
}
.example-card h3 {
color: #409eff;
margin-bottom: 8px;
}
.example-card p {
color: #606266;
line-height: 1.6;
}
</style>
src/views/exportControl/analysis/index.vue
浏览文件 @ f0b6e7f7
<template> <template>
<div class="page-container"> <div class="layout-container">
<Header /> <!-- 导航菜单 -->
<!-- 导航标签区域 --> <div class="layout-main">
<div class="nav-section"> <div class="layout-main-header">
<div class="tabs"> <div class="layout-main-header-left-box">
<div :class="['tab-item', { active: activeTab === '制裁概况' }]" @click="setActiveTab('制裁概况')">制裁概况</div> <div class="left-box-top">
<div :class="['tab-item', { active: activeTab === '深度挖掘' }]" @click="setActiveTab('深度挖掘')">深度挖掘</div> <div class="icon">
<div :class="['tab-item', { active: activeTab === '影响分析' }]" @click="setActiveTab('影响分析')">影响分析</div> <img src="../assets/images/USA-logo.png" alt="" />
</div>
<div class="info">
<div class="info-box1">{{ "实体清单新增内容" }}</div>
<div class="info-box2">
<div class="info-box2-item">{{ "2025-19508 (90 FR 48193)" }}</div>
</div>
</div>
</div>
<div class="left-box-bottom">
<div
class="left-box-bottom-item"
:class="{ leftBoxBottomItemActive: activeTitle === item.name }"
v-for="(item, index) in mainHeaderBtnList"
:key="index"
@click="handleClickMainHeaderBtn(item)"
>
<div class="icon">
<img v-if="activeTitle === item.name" :src="item.activeIcon" alt="" />
<img v-else :src="item.icon" alt="" />
</div>
<div class="name" :class="{ nameActive: activeTitle === item.name }">
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="layout-main-header-right-box">
<div class="right-box-top">
<div class="time">{{ "2025年7月" }}</div>
<div class="name">{{ "美国商务部工业与安全局" }}</div>
</div>
<div class="right-box-bottom">
<el-button type="plain" size="large" icon="Search" @click="handleSwitchActiveName('实体清单原文')"
>实体清单原文</el-button
>
<el-button type="primary" size="large" icon="EditPen">分析报告</el-button>
</div>
</div>
</div> </div>
<div class="action-buttons"> <div class="layout-main-center">
<el-button>法案原文</el-button> <router-view />
<el-button type="primary">分析报告</el-button>
</div> </div>
</div> </div>
<div class="layout-report-box" v-if="activeName === '实体清单原文'">
<!-- 内容区域 --> <div class="report-close" @click="handleSwitchActiveName('分析报告')">
<div class="content-section"> <img src="../assets/images/report-close-icon.png" alt="" />
<!-- <div class="content-placeholder"> </div>
<el-icon><document /></el-icon> <div class="report-main">
<p>这里是制裁概况的内容区域</p> <div class="report-header">
<p>请选择上方标签查看不同分析内容</p> <div class="report-header-left">
</div> --> <div class="text">法案版本：</div>
<Survey v-if="activeTab === '制裁概况'" /> <div class="select-box">
<DepthMine v-if="activeTab === '深度挖掘'" /> <el-select v-model="curBill" placeholder="选择法案" style="width: 240px">
<ImpactAnalysis v-if="activeTab === '影响分析'" /> <el-option v-for="item in billList" :key="item.value" :label="item.label" :value="item.value" />
</div> </el-select>
</div>
<div class="left-absolute"> </div>
<el-image :src="Left1" alt="" /> <div class="report-header-right">
<el-image :src="Left2" alt="" /> <div class="btn">
<el-image :src="Left3" alt="" /> <div class="icon">
<img src="../assets/images/report-header-icon1.png" alt="" />
</div>
<div class="text">翻译</div>
</div>
<div class="btn">
<div class="icon">
<img src="../assets/images/report-header-icon2.png" alt="" />
</div>
<div class="text">下载</div>
</div>
<div class="btn">
<div class="icon">
<img src="../assets/images/report-header-icon3.png" alt="" />
</div>
<div class="text">对比</div>
</div>
<div class="btn">
<div class="icon">
<img src="../assets/images/report-header-icon4.png" alt="" />
</div>
<div class="text">查找</div>
</div>
</div>
</div>
<div class="report-content">
<div class="content-left">
<img src="../assets/images/report1.png" alt="" />
</div>
<div class="content-right">
<img src="../assets/images/report2.png" alt="" />
</div>
</div>
</div>
</div> </div>
<!-- <div class="tool-box">
<div class="tool1">
<img src="./assets/icons/tool-icon1.png" alt="" />
</div>
<div class="tool2">
<img src="./assets/icons/tool-icon2.png" alt="" />
</div>
<div class="tool3">
<img src="./assets/icons/tool-icon3.png" alt="" />
</div>
</div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import Header from "./header.vue"; import router from "@/router";
import Survey from "./content/survey.vue";
import DepthMine from "./content/depthMine.vue";
import ImpactAnalysis from "./content/impactAnalysis.vue";
import Left1 from "@/assets/images/left-1.png";
import Left2 from "@/assets/images/left-2.png";
import Left3 from "@/assets/images/left-3.png";
const activeTab = ref("制裁概况");
const setActiveTab = tabName => {
activeTab.value = tabName;
};
</script>
<style scoped lang="scss"> import icon1 from "../assets/icons/icon1.png";
.page-container { import icon1Active from "../assets/icons/icon1_active.png";
position: relative; import icon2 from "../assets/icons/icon2.png";
margin: 0px auto; import icon2Active from "../assets/icons/icon2_active.png";
background-color: rgba(247, 248, 249, 1); import icon3 from "../assets/icons/icon3.png";
} import icon3Active from "../assets/icons/icon3_active.png";
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 16px 24px; */
padding-left: 6%;
padding-right: 6%;
background-color: #fff;
border-bottom: 1px solid #ebeef5;
}
.tabs { const activeName = ref("分析报告");
display: flex;
gap: 0;
}
.tab-item { const handleSwitchActiveName = name => {
width: 120px; activeName.value = name;
height: 40px; };
text-align: center;
line-height: 30px;
// padding: 12px 24px;
font-size: 18px;
color: #606266;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s;
box-sizing: border-box;
}
// .tab-item.active { const curBill = ref("公法（2025年7月4日）");
// color: #409eff;
// border-bottom-color: #409eff;
// background-color: rgba(64, 158, 255, 0.1);
// }
.tab-item.active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 30px;
border-bottom: 3px solid var(--color-main-active);
}
.tab-item:hover { const billList = ref([
color: var(--color-main-active); {
} label: "公法（2025年7月4日）",
value: "公法（2025年7月4日）"
},
{
label: "公法（2025年7月2日）",
value: "公法（2025年7月2日）"
}
]);
.action-buttons { const mainHeaderBtnList = ref([
display: flex; {
gap: 12px; icon: icon1,
} activeIcon: icon1Active,
name: "制裁概况",
path: "/exportControlAnalysis/overview"
},
{
icon: icon2,
activeIcon: icon2Active,
name: "深度挖掘",
path: "/exportControlAnalysis/deepDig"
},
{
icon: icon3,
activeIcon: icon3Active,
name: "影响分析",
path: "/exportControlAnalysis/influence"
}
]);
.content-section { const activeTitle = ref("制裁概况");
padding: 24px;
min-height: 400px;
}
.content-placeholder { const handleClickMainHeaderBtn = item => {
display: flex; activeTitle.value = item.name;
flex-direction: column; // window.sessionStorage.setItem('activeTitle', activeTitle.value)
align-items: center; router.push(item.path);
justify-content: center; };
height: 300px;
color: #909399;
}
.content-placeholder .el-icon { const activeNavIndex = ref(0);
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p { const handleClickNav = (index, item) => {
font-size: 16px; activeNavIndex.value = index;
margin-top: 8px; router.push(item.path);
} };
@media (max-width: 768px) { onMounted(() => {
.bill-info { // if (window.sessionStorage.getItem("activeTitle")) {
flex-direction: column; // activeTitle.value = window.sessionStorage.getItem("activeTitle");
align-items: flex-start; // }
} });
</script>
.date-author { <style lang="scss" scoped>
align-items: flex-start; .layout-container {
margin-top: 12px; width: 1920px;
} height: 1016px;
background: rgba(249, 250, 252, 1);
position: relative;
margin: 0 auto;
// .layout-header {
// width: 1920px;
// height: 64px;
// // background: #0a121e;
// background: #fff;
// // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
// box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// // margin-bottom: 13px;
// display: flex;
// position: relative;
// z-index: 99;
// .layout-header-left {
// width: 480px;
// display: flex;
// .logo-box {
// width: 36px;
// height: 36px;
// margin: 14px;
.nav-section { // img {
flex-direction: column; // width: 100%;
align-items: flex-start; // height: 100%;
gap: 16px; // border-radius: 6px;
} // }
// }
// .title-box {
// height: 64px;
// width: 350px;
// margin: 0 5px;
// color: #eee;
// line-height: 64px;
// font-size: 20px;
// font-weight: bold;
// color: rgba(10, 18, 30, 1);
// font-family: Microsoft YaHei;
// font-size: 22px;
// font-weight: 700;
// text-align: left;
// }
// }
// .layout-header-center {
// width: 700px;
// display: flex;
// justify-content: space-between;
// margin-left: 200px;
// .nav-item {
// border-radius: 5px;
// cursor: pointer;
// display: flex;
// &:hover {
// background: rgba(255, 255, 255, 0.2);
// }
// .nav-icon-box {
// width: 25px;
// height: 25px;
// margin: 22px 0 20px 5px;
// .nav-icon {
// width: 20px;
// height: 20px;
// img {
// width: 100%;
// height: 100%;
// }
// }
// .nav-icon-active {
// width: 20px;
// height: 20px;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
// .name-box {
// margin: 18px 5px;
// height: 30px;
// text-align: center;
// line-height: 30px;
// color: rgba(59, 65, 75, 1);
// letter-spacing: 2px;
// font-size: 18px;
// }
// // .nameActive {
// // color: #ea9518;
// // font-weight: bold;
// // }
// }
// .navItemActive {
// // background: #295dab;
// // border-bottom: 4px solid #ea9518;
// // &:hover {
// // background: #295dab;
// // border-bottom: 4px solid #ea9518;
// // }
// }
// }
// .layout-header-right {
// flex: 1;
// display: flex;
// justify-content: flex-end;
// .nav-search {
// width: 22px;
// height: 22px;
// margin: 21px 0;
// }
// .nav-message {
// width: 22px;
// height: 22px;
// margin: 21px 30px;
// }
.tabs { // .nav-usr {
// width: 110px;
// display: flex;
// height: 40px;
// margin: 12px 5px 12px 0;
// .usr-img {
// margin-top: 4px;
// height: 32px;
// width: 32px;
// background: rgba(255, 255, 255, 0.5);
// border-radius: 100%;
// box-sizing: border-box;
// padding: 4px;
// // img {
// // width: 100%;
// // height: 100%;
// // }
// }
// .usr-info {
// height: 40px;
// line-height: 40px;
// text-align: center;
// font-size: 14px;
// margin-left: 10px;
// }
// }
// }
// }
.layout-main {
width: 100%; width: 100%;
overflow-x: auto; height: 100%;
.layout-main-header {
height: 137px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: space-between;
.layout-main-header-left-box {
width: 800px;
margin-left: 160px;
margin-top: 13px;
.left-box-top {
height: 64px;
display: flex;
.icon {
width: 64px;
height: 64px;
}
.info {
margin-left: 9px;
.info-box1 {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-top: 5px;
}
.info-box2 {
margin-top: 5px;
height: 22px;
line-height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
display: flex;
margin-left: -10px;
.info-box2-item {
padding: 0 10px;
}
}
}
}
.left-box-bottom {
display: flex;
height: 40px;
margin-top: 21px;
.left-box-bottom-item {
display: flex;
margin-right: 32px;
margin-top: 3px;
height: 35px;
cursor: pointer;
// &:hover{
// .name {
// color: rgba(22, 119, 255, 1);
// }
// }
.icon {
margin-top: 1px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.name {
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;
margin-left: 3px;
}
.nameActive {
color: rgba(20, 89, 187, 1);
font-weight: 700;
}
}
.leftBoxBottomItemActive {
border-bottom: 3px solid rgba(20, 89, 187, 1);
}
}
}
.layout-main-header-right-box {
width: 300px;
margin-right: 160px;
margin-top: 19px;
.right-box-top {
.time {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
.name {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
}
.right-box-bottom {
margin-top: 24px;
text-align: right;
}
}
}
.layout-main-center {
overflow-x: hidden;
}
} }
} .layout-report-box {
position: absolute;
.left-absolute { z-index: 9999;
position: fixed; top: 154px;
left: 0; left: 0;
top: 60%; width: 100%;
// width: 48px; height: 926px;
display: flex; background: rgba(248, 249, 250, 1);
flex-direction: column; .report-close {
align-items: center; position: absolute;
gap: 16px; top: 24px;
background-color: #fff; right: 178px;
border-radius: 10px; width: 32px;
border-top-left-radius: 0; height: 32px;
border-bottom-left-radius: 0; cursor: pointer;
padding: 16px 12px; img {
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2); width: 100%;
div { height: 100%;
width: 17px; }
height: 18px; }
.report-main {
width: 1600px;
height: 926px;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
padding: 0 69px;
.report-header {
height: 77px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.report-header-left {
display: flex;
.text {
margin-top: 32px;
width: 70px;
height: 14px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
}
.select-box {
margin-left: 8px;
margin-top: 23px;
}
}
.report-header-right {
display: flex;
margin-top: 24px;
.btn {
display: flex;
width: 88px;
height: 32px;
margin-left: 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
height: 32px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 32px;
}
}
}
}
.report-content {
display: flex;
margin-top: 35px;
.content-left {
width: 680px;
height: 786px;
// background: #eee;
// overflow-y: auto;
img {
width: 100%;
height: 100%;
}
}
.content-right {
margin-left: 89px;
width: 680px;
height: 786px;
// background: #eee;
// overflow-y: auto;
img {
width: 100%;
height: 100%;
}
}
}
}
} }
// .tool-box {
// position: fixed;
// z-index: 10000;
// bottom: 80px;
// left: 0;
// width: 48px;
// height: 144px;
// border-radius: 0px 10px 10px 0px;
// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
// background: rgba(255, 255, 255, 1);
// .tool1 {
// width: 17px;
// height: 18px;
// margin-top: 17px;
// margin-left: 16px;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
// .tool2 {
// width: 22px;
// height: 20px;
// margin-top: 26px;
// margin-left: 14px;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
// .tool3 {
// width: 20px;
// height: 20px;
// margin-top: 25px;
// margin-left: 15px;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
} }
</style> </style>
src/views/exportControl/components/CardCustom.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<el-card class="card">
<div class="wrap">
<div class="header" :style="{ height: headerHeight }">
<div class="iconWrap"></div>
<div class="titleWrap">
{{ title }}
</div>
<div class="rightWrap">
<slot name="right"> </slot>
<div class="ButtonWrap">
<div class="button buttonXiazai"></div>
<div class="button buttonShoucang"></div>
</div>
</div>
</div>
<div class="body">
<slot name="default"> </slot>
</div>
</div>
</el-card>
</template>
<script setup>
import { Edit, Plus } from "@element-plus/icons-vue";
const emit = defineEmits(["moreClick"]);
defineProps({
titleBackgroundColor: {
type: String,
default: "red"
},
titleColor: {
type: String,
default: "#fff"
},
titleTextAlign: {
type: String,
default: "center"
},
lineColor: {
type: String,
default: "transparent"
},
title: {
type: String,
default: "风险信号"
},
iconWidth: {
type: String,
default: "60px"
},
headerHeight: {
type: String,
default: "56px"
}
});
function moreClick() {
emit("moreClick");
}
</script>
<style lang="scss" scoped>
.card {
position: relative;
:deep(.el-card__body) {
padding: 0;
height: 100%;
}
}
.wrap {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 56px;
display: flex;
flex-direction: row;
align-items: center;
z-index: 1;
position: relative;
flex-shrink: 0;
padding-right: 12px;
}
.iconWrap {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.titleWrap {
margin-left: 16px;
height: 16px;
line-height: 16px;
color: var(--color-main-active);
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.rightWrap {
display: flex;
justify-content: end;
align-items: center;
flex: 1;
}
.ButtonWrap {
display: flex;
align-items: center;
.button {
width: 28px;
height: 28px;
background-size: 100% 100%;
cursor: pointer;
}
.buttonXiazai {
background-image: url("../assets/images/xiazaiIcon.png");
margin-right: 4px;
}
.buttonShoucang {
background-image: url("../assets/images/shoucangIcon.png");
}
}
.body {
flex: 1;
min-height: 0;
}
</style>
src/views/exportControl/index.vue
浏览文件 @ f0b6e7f7
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
<el-col :span="16"> <el-col :span="16">
<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px"> <custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
<template #header-right> <template #header-right>
<el-button type="primary" link> <el-button type="primary" @click="handleToDetail" link>
{{ "查看详情 >" }} {{ "查看详情 >" }}
</el-button> </el-button>
</template> </template>
...@@ -590,10 +590,14 @@ const handleBackHome = () => { ...@@ -590,10 +590,14 @@ const handleBackHome = () => {
}; };
const handleToDetail = () => { const handleToDetail = () => {
// router.push({
// path: "/exportControlAnalysis"
// });
// router.push({ // router.push({
// path: "/exportControl/analysis" // path: "/exportControl/analysis"
// }); // });
const route = router.resolve("/exportControl/analysis");
const route = router.resolve("/exportControlAnalysis");
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
......
浏览文件 @ f0b6e7f7
No preview for this file type
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论