Skip to content

R
risk-monitor
提交 f2e2c6b5 authored 作者: 李智林's avatar 李智林
浏览文件
操作

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

合作限制页面 查看合并请求 !24
上级 2f544ed5 d0c2d784
隐藏空白字符变更
内嵌 并排
正在显示 包含 3058 行增加 和 0 行删除
src/router/index.js
浏览文件 @ f2e2c6b5
......@@ -67,6 +67,12 @@ import ComprehensiveSearch from '@/views/comprehensiveSearch/index.vue'
import SearchResults from '@/views/comprehensiveSearch/searchResults/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 = [
// 智能写报
{
......@@ -511,6 +517,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",
......
src/views/coopRestriction/common/comTitle.vue 0 → 100644
浏览文件 @ f2e2c6b5
<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
浏览文件 @ f2e2c6b5
<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
浏览文件 @ f2e2c6b5
<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
浏览文件 @ f2e2c6b5
<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
浏览文件 @ f2e2c6b5
<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
浏览文件 @ f2e2c6b5
<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
浏览文件 @ f2e2c6b5
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论