Skip to content

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

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !96
上级 56cf0ae3 d509b3b8
隐藏空白字符变更
内嵌 并排
正在显示 包含 752 行增加 和 141 行删除
src/views/ZMOverView/components/gameProfile/Timeline.vue
浏览文件 @ 5740f160
<template>
<div class="timeline-wrapper">
<button class="arrow left" :disabled="index <= 0" @click="index--">
{{ '<' }}
</button>
{{ '<' }} </button>
<div class="timeline-box">
<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(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>
<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="dot" :class="linePos(i, flip)"></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 class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)">
</div>
<div class="title" :style="{
<div class="time">
{{ item.time }}
</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 }}
}">{{ 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>
</div>
</div>
<button class="arrow right" :disabled="index >= total - 5" @click="index++">
{{ '>' }}
</button>
<button class="arrow right" :disabled="index >= total - 5" @click="index++">
{{ '>' }}
</button>
</div>
</template>
......@@ -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
浏览文件 @ 5740f160
<!--科技要闻-->
<!--ZM博弈概况-->
<template>
<div class="content-wrapper">
<div class="card-box">
......@@ -6,14 +6,43 @@
<img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.png" />
</div>
<div style="display: flex;height: 650px;width: 100%;">
<div style="width: 50%;">
<div>
数据来源
</div>
<div style="width: 672px;height: 486px;" id="char"></div>
</div>
<div style="width: 50%;">
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
<el-table-column prop="name" label="指标名称" sortable width="350" />
<el-table-column prop="percent" label="中国">
<template #default="scope">
<div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px', marginLeft: '20px' }">
<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="left-progress"
:show-text="false" />
</div>
</template>
</el-table-column>
<el-table-column prop="percent" label="美国">
<template #default="scope">
<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="right-progress"
:show-text="false" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<div class="card-box" style="margin-top: 16px;">
<div class="card-title">
<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>
......@@ -22,57 +51,188 @@
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";
import radarChart from './radarChart3.js'
const course = ref([
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
"time": "2025-01-15",
"title": "《国家量子倡议再授权法案》发布",
"content": "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA的量子研究纳入，旨在加速技术应用与人才发展。",
"unit": "美国",
"tag": "科技发展战略"
},
{
"time": "2025-01-21",
"title": "将美国实体列入'不可靠实体清单'并采取商品进口限制",
"content": "根据《反外国制裁法》等，将17家美国实体列入清单，禁止其从事与中国有关的进出口与新增投资。",
"unit": "中国",
"tag": "反制措施"
},
{
time: "2025年1月",
title: "特朗普宣布撤销拜登AI规则",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
"time": "2025-01-21",
"title": "《国家创新驱动发展战略纲要》发布",
"content": "纲领性文件，提出了建设世界科技强国的'三步走'战略目标，并系统部署了构建现代产业技术体系等八大战略任务。",
"unit": "中国",
"tag": "科技发展战略"
},
{
time: "2025年1月",
title: "特朗普签署EO 143202",
content: "特朗普政府宣布撤销拜登AI规则，计划"
"time": "2025-01-21",
"title": "中国网信办约谈英伟达",
"content": "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
"unit": "中国",
"tag": "反制措施"
},
{
time: "2025年1月",
title: "中国网信办约谈英伟达",
content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
"time": "2025-05-09",
"title": "《2026财年中国防授权法案》发布",
"content": "年度国防预算法案，其中系统性地嵌入了大量对华竞争条款，首次将对外投资审查法律化，并在供应链、实体清单等方面加强限制。",
"unit": "美国",
"tag": "对华打压遏制"
},
{
time: "2025年7月23日",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
"time": "2025-07-24",
"title": "白宫'人工智能(AI)行动计划'",
"content": "提出放宽监管、简化环境许可可以加快AI基础设施建设，并涉及促进AI出口、要求联邦采购的AI模型具备中立性等内容。",
"unit": "美国",
"tag": "科技发展战略"
},
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
"time": "2025-07-24",
"title": "2026财年《商务、司法、科学及相关支出法案》",
"content": "法案为商务部工业与安全局(BIS)大幅增加预算，以加强出口管制执法，特别强调审查对华为、中芯国际的出口许可证。",
"unit": "美国",
"tag": "对华打压遏制"
}
]);
const data = ref([
{
name: '竞争潜力',
value: [81.7, 75.4]
}, {
name: '研究人员总数',
value: [81.7, 75.4]
}, {
name: '研发经费投入总额',
value: [81.7, 75.4]
}, {
name: '研发经费占GDP的比重',
value: [81.7, 75.4]
}, {
name: '每万人研发经费投入额',
value: [81.7, 75.4]
}, {
name: '每万研究人员经费投入额',
value: [81.7, 75.4]
}, {
name: '每万人研究人员数',
value: [81.7, 75.4]
}
])
onMounted(() => {
const dom = document.getElementById('char');
const myChart = echarts.init(dom);
// 2. 传入容器，生成配置
const option = radarChart(
[
"创新资源",
"知识创造",
"企业创新",
"创新绩效",
"创新环境"
],
[
[4200, 3000, 20000, 35000, 50000, 18000],
[1000, 42000, 32000, 35000, 50000, 18000]
]
);
myChart.setOption(option);
// setChart(option, "char7");
});
const tableData = ref([
{
id: 1,
name: '综合创新指数',
percent: [60, 40],
children: []
},
{
time: "2025年1月",
title: "特朗普宣布撤销拜登AI规则",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
id: 2,
name: '创新资源',
percent: [50, 50],
children: []
},
{
time: "2025年1月",
title: "特朗普签署EO 143202",
content: "特朗普政府宣布撤销拜登AI规则，计划"
id: 3,
name: '研发人力',
percent: [70, 30],
children: [
{
id: 31,
name: '每万名就业人员中R&D人员全时当量',
percent: [65, 35],
children: []
},
{
id: 32,
name: '研究人员占R&D人员比例',
percent: [55, 45],
children: []
},
{
id: 33,
name: '科学与工程类毕业生比例',
percent: [70, 30],
children: []
}
]
},
{
time: "2025年1月",
title: "中国网信办约谈英伟达",
content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
id: 4,
name: '研发经费',
percent: [60, 40],
children: [
{
id: 41,
name: 'R&D经费支出总额(购买力平价)',
percent: [65, 35],
children: []
},
{
id: 42,
name: 'R&D经费支出占GDP比重',
percent: [55, 45],
children: []
},
{
id: 43,
name: '基础研究经费占R&D经费比重',
percent: [45, 55],
children: []
}
]
},
{
time: "2025年7月23日",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
id: 5,
name: '科研条件',
percent: [60, 40],
children: [
{
id: 51,
name: '国家级重大科技基础设施数量',
percent: [50, 50],
children: []
}
]
}
]);
</script>
......@@ -114,4 +274,91 @@ const course = ref([
}
}
}
/* ========== 公共外壳 ========== */
.progress-wrapper {
position: relative;
flex: 1;
height: 10px;
}
/* 文字居中在彩色条内 */
.inner-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: #fff;
font-weight: bold;
z-index: 2;
}
/* ========== 左侧：右侧斜切 + 左侧圆角 ========== */
/* 左侧文字 */
.left-text {
font-size: 12px;
color: #333;
margin-right: 8px;
white-space: nowrap;
}
.left-progress {
transform: scaleX(-1);
}
.left-progress :deep(.el-progress-bar__outer) {
border-radius: 0;
clip-path: inset(0 0 0 0);
background: rgba(231, 243, 255, 1);
overflow: hidden;
/* 读行内传进来的变量 */
height: var(--i) !important;
margin-left: var(--j) !important
}
.left-progress :deep(.el-progress-bar__inner) {
border-radius: 0;
/* 移除圆角 */
clip-path: inset(0 0 0 0);
/* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */
background: #055FC2;
/* 读行内传进来的变量 */
height: var(--i) !important;
margin-left: var(--j) !important;
}
/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
.right-progress :deep(.el-progress-bar__outer) {
border-radius: 0;
clip-path: inset(0 0 0 0);
background: #ffccc7;
overflow: hidden;
height: var(--i) !important;
}
.right-progress :deep(.el-progress-bar__inner) {
border-radius: 0;
clip-path: inset(0 0 0 0);
background: #CE4F51;
height: var(--i) !important;
}
:deep(.el-table .cell) {
padding: 0;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
</style>
src/views/ZMOverView/components/gameProfile/radarChart3.js 0 → 100644
浏览文件 @ 5740f160
import * as echarts from 'echarts';
/**
* 生成动态雷达图配置
* @param {string[]} nameList 指标名称（与 indicator 顺序保持一致）
* @param {number[][]} valueList 数据值数组，每组数据为一个数组
*/
const radarChart = (nameList, valueList) => {
// 计算最大值以设置雷达图的max值
const maxValue = Math.max(...valueList.map(values => Math.max(...values)));
const colorList = [
[5, 96, 195], // 蓝色
[208, 85, 87] // 红色
];
// 1. 基础雷达图配置
const option = {
title: { text: '' },
radar: {
radius: '75%', // 雷达图本身占容器 75%
indicator: nameList.map(name => ({
name: name,
max: maxValue * 1.2 // 设置最大值为数据最大值的120%
})),
axisName: {
color: '#ffffff',
fontSize: 18,
fontWeight: 700,
backgroundColor: '#0560C3',
borderRadius: 20,
padding: [8, 20],
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br);
}
},
splitLine: {
lineStyle: { color: 'rgba(200,200,200,.6)' }
},
splitArea: {
show: true,
areaStyle: {
color: [
`#ffffff`,
`#F7F8F9`
]
}
},
},
series: valueList.map((values, index) => ({
name: `组${index + 1}`,
type: 'radar',
data: [
{
value: values,
name: `组${index + 1}`,
areaStyle: {
color: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 0.2)` // 填充颜色
},
itemStyle: {
color: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 1)`, // 圆环颜色
borderWidth: 1, // 边框宽度
backgroundColor: '#ffffff',
borderColor: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 1)` // 边框颜色
},
}
]
}))
};
return option;
};
export default radarChart;
src/views/ZMOverView/components/gameProfile/tableShow.vue 0 → 100644
浏览文件 @ 5740f160
<template>
<div>
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
<el-table-column prop="date" label="Date" sortable />
<el-table-column prop="name" label="Name" sortable />
<el-table-column prop="address" label="Address" sortable />
</el-table>
<el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column prop="date" label="Date" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="address" label="Address" />
</el-table>
</div>
</template>
<script lang="ts" setup>
interface User {
id: number
date: string
name: string
address: string
hasChildren?: boolean
children?: User[]
}
const load = (
row: User,
treeNode: unknown,
resolve: (data: User[]) => void
) => {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
])
}, 1000)
}
const tableData: User[] = [
{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
children: [
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
],
},
{
id: 4,
date: '2016-05-03',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
]
const tableData1: User[] = [
{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
hasChildren: true,
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 4,
date: '2016-05-03',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 5740f160
......@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论