Skip to content

R
risk-monitor
提交 2958656f authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

样式调整

上级 179a6cc5
显示空白字符变更
内嵌 并排
正在显示 包含 307 行增加 和 141 行删除
src/views/ZMOverView/components/gameProfile/Timeline.vue
浏览文件 @ 2958656f
<template>
<div class="timeline-wrapper">
<button class="arrow left" :disabled="index <= 0" @click="index--">
{{ '<' }}
</button>
{{ '<' }} </button>
<div class="timeline-box">
<div class="line"></div>
<div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftOffset(i)">
<div class="node" :style="leftOffset(i)">
<div class="line" style="width:100vw ;" />
<!-- 一次性渲染全部节点 -->
<div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)"></div>
<!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)">
<div class="time">
{{ item.time }}
<div class="dot" :class="linePos(item)" :style="{ '--i': item.unit === '中国' ? ' #E29697' : '#69A0DA' }" />
<div class="dot">
<div class="big-circle" :style="{
backgroundColor: item.unit === '中国' ? ' #CF4F51' : '#CDDFF3'
}">
<div class="small-circle" :style="{
backgroundColor: item.unit === '中国' ? ' #E29697' : '#69A0DA'
}"></div>
</div>
<div class="title">
{{ item.title }}
<img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;" />
</div>
<div class="content">
{{ item.content }}
</div>
<!-- 卡片 -->
<div class="card" :class="[cardPos(item), 'right-side']" @click="$emit('click-card', item)">
<div style="justify-content: space-between;display: flex;width: 300px;">
<div class="tag">{{ item.tag }}</div>
<img :src="`/icon/${item.unit}.png`" class="icon"></img>
</div>
<div class="title" :style="{
}">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
<!-- <div class="title" :style="{
color: item.unit === '中国' ? ' #CF4F51' : ''
}">{{ item.title }}</div>
<div class="time">{{ item.time }}</div> -->
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
<button class="arrow right" :disabled="index >= total - 5" @click="index++">
{{ '>' }}
</button>
......@@ -39,18 +49,9 @@
export default {
name: 'TimeLine',
props: {
data: { // 父组件传入的数组
type: Array,
required: true
},
textKey: { // 要显示的文本字段
type: String,
default: 'text'
},
idKey: { // 唯一标识字段
type: String,
default: 'id'
}
data: { type: Array, required: true },
textKey: { type: String, default: 'text' },
idKey: { type: String, default: 'id' }
},
data() {
return { index: 0 };
......@@ -65,37 +66,49 @@ export default {
flip() { return this.index % 2 === 1; }
},
methods: {
leftOffset(i) {
return { left: `${(i * 100) / 5}%` };
// widthStyle() {
// console.log(`100 / ${this.data.length - 1}}vw`)
// let w = 100 / (this.data.length - 1)
// return { width: ` calc(${w}vw - 20px)` };
// },
/* 水平位置：按索引均匀分布 */
leftStyle(i) {
// let pos = ``
// if (i === 0) {
// pos = 0
// } else {
// this.linePos(this.data[i - 1]) !== this.linePos(this.data[i]) ? pos = { left: `${(i * 270) - 125}px` } : pos = { left: `${(i * 270)}px` }
// }
return { left: `${(i * 327)}px` }
// return pos;
},
/* 上下层翻转（保留上次逻辑） */
cardPos(i, flip = false) {
return (i % 2) ^ flip ? 'down' : 'up';
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) {
return item.unit === '中国' ? 'down' : 'up';
},
/* 线延伸方向 = 卡片出现方向 */
linePos(i, flip = false) {
return this.cardPos(i, flip); // up / down
/* 延伸线方向 = 卡片方向 */
linePos(item) {
return this.cardPos(item);
}
}
};
</script>
<style scoped>
/* 样式与之前完全一致，不再重复 */
/* 以下样式完全沿用你已有的，无需改动 */
.timeline-wrapper {
display: flex;
align-items: center;
width: 100%;
position: relative;
padding: 0 40px;
width: 1500px;
overflow: auto;
}
.arrow {
position: absolute;
top: 170px;
/* 左右切换按钮 */
width: 24px;
height: 48px;
font-size: 24px;
......@@ -123,10 +136,21 @@ export default {
border-radius: 4px 0px 0px 4px;
}
.year-box {
width: 80px;
height: 36px;
border-radius: 4px;
background: #055fc2;
color: #fff;
font-size: 18px;
border: none
}
.timeline-box {
flex: 1;
height: 100%;
position: relative;
margin-left: 15px;
}
.line {
......@@ -142,101 +166,185 @@ export default {
background-size: auto 100%;
}
.node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
z-index: 2
}
/* ===== 圆环基础 ===== */
.dot {
/* 任意尺寸/居中方式随意 */
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
/* 仅示例 */
}
.big-circle {
width: 14px;
height: 14px;
border-radius: 50%;
/* 大圆颜色 */
display: flex;
justify-content: center;
align-items: center;
}
.small-circle {
width: 8px;
/* 小圆直径 */
height: 8px;
border-radius: 50%;
/* 小圆颜色 */
}
/* .dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #409eff;
background: #fff;
position: relative;
margin: 0 auto;
z-index: 2;
}
position: relative
} */
/* ===== 延伸线 ===== */
.dot::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-1px);
/* 居中细线 */
width: 1px;
background: #409eff;
/* background: #409eff */
background: var(--i);
}
/* 向上节点：线往下伸 */
.dot.up::after {
bottom: 100%;
height: 165px;
/* 圆环底部 → 卡片顶 */
height: 240px
}
/* 向下节点：线往上伸 */
.dot.down::after {
top: 100%;
height: 165px;
height: 240px
}
.card {
position: absolute;
height: 165px;
width: 320px;
padding: 8px 12px;
text-align: left;
cursor: pointer;
/* 容器 28 */
width: 327px;
height: 270px;
padding-left: 27px;
font-size: 14px;
cursor: pointer
}
.time {
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
margin-bottom: 10px;
.card.up {
bottom: 0px
}
.card.down {
top: 10px;
padding-top: 50px
}
.icon {
width: 28px;
height: 28px;
}
.title {
/* 美国进一步收紧对华AI芯片出口限制 */
width: 300px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
margin-bottom: 10px;
}
.content {
color: rgba(95, 101, 108, 1);
.tag {
/* 容器 1626 */
width: 120px;
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding: 2px 8px 2px 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
text-align: center;
margin-bottom: 4px;
}
.card.up {
bottom: 20px;
.tag1 {
/* 容器 1626 */
width: 120px;
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding: 2px 8px 2px 8px;
border-radius: 4px;
background: rgba(206, 79, 81, 0.1);
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.card.down {
top: 20px;
.time {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.content {
width: 300px;
height: 150px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
</style>
\ No newline at end of file
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 2958656f
......@@ -13,7 +13,7 @@
<img class="icon" src="../../assets/icons/title-icon2.png" />
<img class="text" src="../../assets/icons/title-text2.png" />
</div>
<div style="display: flex;height: 530px;">
<div style="display: flex;height: 650px;">
<Timeline :data="course" text-key="title" id-key="seq" />
</div>
</div>
......@@ -25,54 +25,53 @@ import { onMounted, ref, computed } from "vue";
import Timeline from "./Timeline.vue";
const course = ref([
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
"time": "2025-01-15",
"title": "《国家量子倡议再授权法案》发布",
"content": "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA的量子研究纳入，旨在加速技术应用与人才发展。",
"unit": "美国",
"tag": "科技发展战略"
},
{
time: "2025年1月",
title: "特朗普宣布撤销拜登AI规则",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
"time": "2025-01-21",
"title": "将美国实体列入'不可靠实体清单'并采取商品进口限制",
"content": "根据《反外国制裁法》等，将17家美国实体列入清单，禁止其从事与中国有关的进出口与新增投资。",
"unit": "中国",
"tag": "反制措施"
},
{
time: "2025年1月",
title: "特朗普签署EO 143202",
content: "特朗普政府宣布撤销拜登AI规则，计划"
"time": "2025-01-21",
"title": "《国家创新驱动发展战略纲要》发布",
"content": "纲领性文件，提出了建设世界科技强国的'三步走'战略目标，并系统部署了构建现代产业技术体系等八大战略任务。",
"unit": "中国",
"tag": "科技发展战略"
},
{
time: "2025年1月",
title: "中国网信办约谈英伟达",
content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
"time": "2025-01-21",
"title": "中国网信办约谈英伟达",
"content": "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
"unit": "中国",
"tag": "反制措施"
},
{
time: "2025年7月23日",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
"time": "2025-05-09",
"title": "《2026财年中国防授权法案》发布",
"content": "年度国防预算法案，其中系统性地嵌入了大量对华竞争条款，首次将对外投资审查法律化，并在供应链、实体清单等方面加强限制。",
"unit": "美国",
"tag": "对华打压遏制"
},
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
"time": "2025-07-24",
"title": "白宫'人工智能(AI)行动计划'",
"content": "提出放宽监管、简化环境许可可以加快AI基础设施建设，并涉及促进AI出口、要求联邦采购的AI模型具备中立性等内容。",
"unit": "美国",
"tag": "科技发展战略"
},
{
time: "2025年1月",
title: "特朗普宣布撤销拜登AI规则",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
},
{
time: "2025年1月",
title: "特朗普签署EO 143202",
content: "特朗普政府宣布撤销拜登AI规则，计划"
},
{
time: "2025年1月",
title: "中国网信办约谈英伟达",
content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
},
{
time: "2025年7月23日",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
"time": "2025-07-24",
"title": "2026财年《商务、司法、科学及相关支出法案》",
"content": "法案为商务部工业与安全局(BIS)大幅增加预算，以加强出口管制执法，特别强调审查对华为、中芯国际的出口许可证。",
"unit": "美国",
"tag": "对华打压遏制"
}
]);
</script>
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 2958656f
......@@ -77,12 +77,16 @@
<img src="./icon/矩形 295.png" style="width: 96px; height: 96px" />
</div>
<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div>
<div class="carousel-content">{{ News.content }}</div>
<div class="news-carousel-content">{{ News.content }}</div>
<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div>
<!-- <div class="carousel-bottom">
<div class="carousel-bottom-left">{{ News.date + News.source }}</div>
</div> -->
<div class="carousel-bottom">
<div class="left">{{ News.date + News.source }}</div>
<div class="right">
<div v-for="tag in News.tags" class="tag">
{{ tag }}
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
......@@ -242,7 +246,8 @@ const hotNewsList = ref([
content:
"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
date: "2025年9月16日",
source: "美国白宫·总统行政令"
source: "美国白宫·总统行政令",
tags: ['人工智能', '通信网络']
},
{
title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
......@@ -250,7 +255,8 @@ const hotNewsList = ref([
content:
"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
date: "2025年9月16日",
source: "美国白宫·总统行政令"
source: "美国白宫·总统行政令",
tags: ['人工智能', '通信网络']
}
]);
const curNews = ref({});
......@@ -317,7 +323,7 @@ onMounted(() => {
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
line-height: 48px;
letter-spacing: 0px;
text-align: left;
display: flex;
......@@ -367,7 +373,7 @@ onMounted(() => {
}
.section-title {
margin: 8px 16px;
margin: 16px;
/* 容器 1559 */
width: 125px;
height: 31px;
......@@ -582,7 +588,7 @@ onMounted(() => {
}
.carousel-item {
height: 480px;
height: 443px;
width: 736px;
.carousel-title {
......@@ -632,18 +638,16 @@ onMounted(() => {
}
}
.carousel-content {
.news-carousel-content {
width: 664px;
margin-top: 16px;
height: 296px;
height: 280px;
/* 调整为可用空间 */
overflow-y: auto;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
......@@ -651,7 +655,49 @@ onMounted(() => {
/* 容器 1566 */
width: 664px;
height: 34px;
display: flex;
justify-content: space-between;
.left {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
.right {
.tag {
/* 数据展示/Tag标签/亮色/绿 */
width: 81px;
height: 20px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(255, 163, 158, 1);
border-radius: 4px;
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
text-align: justify;
}
}
}
}
}
......@@ -670,4 +716,16 @@ onMounted(() => {
margin-bottom: 5px;
}
}
:deep(.el-carousel__container) {
height: 443px;
}
:deep(.el-carousel__item) {
height: 443px;
}
:deep(.el-carousel__item--card) {
height: 443px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论