Skip to content

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

最新ZM概览更新

上级 30768356
隐藏空白字符变更
内嵌 并排
正在显示 包含 663 行增加 和 228 行删除
src/views/ZMOverView/commonTitle/comTitle.vue
浏览文件 @ 29532a44
......@@ -21,11 +21,12 @@ const props = defineProps({
<style scoped lang="scss">
.com-title {
width: 100%;
width: 1601px;
height: 42px;
display: flex;
align-items: center;
margin-bottom: 36px;
// margin-bottom: 36px;
margin: 0 auto;
.cl1 {
width: 24px;
height: 30px;
......
src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue
浏览文件 @ 29532a44
......@@ -151,11 +151,46 @@
</div>
<div class="bottom-content">
<div class="timeline-container">
<div class="timeline-item">
<div ref="mainChartRef" :style="{ width: '100%', height: totalHeight + 'px' }"></div>
<div class="timeline-list">
<div v-for="(dept, index) in filteredTimelineList" :key="index" class="dept-row">
<div class="dept-info">
<img :src="defaultImg" alt="" class="dept-icon" />
<div class="dept-text">
<div class="dept-name">{{ dept.name }}</div>
<div class="dept-count">{{ dept.count }}次</div>
</div>
</div>
<div class="events-container">
<div v-for="(event, eIndex) in dept.events" :key="eIndex" class="event-card">
<div class="card-top-line" :class="getLineColorClass(event.level)"></div>
<div class="event-header">
<div class="event-date">{{ event.date }}</div>
<div v-if="event.level" class="traffic-light">
<div class="light" :class="{ active: event.level === 'green', green: true }"></div>
<div class="light" :class="{ active: event.level === 'yellow', yellow: true }"></div>
<div class="light" :class="{ active: event.level === 'red', red: true }"></div>
</div>
</div>
<el-tooltip
effect="dark"
:content="event.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="event-content">{{ event.content }}</div>
</el-tooltip>
<div class="event-tags">
<span v-for="(tag, tIndex) in event.tags" :key="tIndex" class="tag" :class="getTagClass(tag)">
{{ tag }}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="timelineBar">
<div ref="sliderChartRef" style="width: 100%; height: 100%"></div>
<div class="timelineBar" :style="{ backgroundImage: `url(${timelineBg})` }">
<div ref="sliderChartRef" style="width: 100%; height: 100%; touch-action: none;"></div>
</div>
</div>
</div>
......@@ -173,6 +208,7 @@ import icon1 from "../../assets/icon1.png";
import icon2 from "../../assets/icon2.png";
import icon3 from "../../assets/icon3.png";
import icon4 from "../../assets/icon4.png";
import timelineBg from "../../assets/timeline.png";
import defaultImg from "../../../../assets/images/default-icon2.png";
const cardList = ref([
......@@ -282,30 +318,219 @@ const dynamicList = ref([
}
]);
const getTagClass = tag => {
// 1. 定义已知标签的固定颜色映射
const getColorName = (tag) => {
const tagColorMap = {
航空航天: "tag-blue",
生物科技: "tag-blue",
集成电路: "tag-blue",
能源: "tag-green",
新材料: "tag-green",
人工智能: "tag-red"
航空航天: "blue",
生物科技: "blue",
集成电路: "blue",
能源: "green",
新材料: "green",
人工智能: "red"
};
// 2. 如果是已知标签，直接返回对应颜色
if (tagColorMap[tag]) return tagColorMap[tag];
// 3. 如果是未知标签，使用简单的字符串哈希算法分配一个稳定的颜色
const colors = ["tag-blue", "tag-green", "tag-red"];
const colors = ["blue", "green", "red", "orange", "purple", "cyan"];
let hash = 0;
for (let i = 0; i < tag.length; i++) {
hash = tag.charCodeAt(i) + ((hash << 5) - hash);
}
// 取绝对值并取模，确保同一个字符串永远得到同一个颜色类
return colors[Math.abs(hash) % colors.length];
};
const getTagClass = tag => {
return `tag-${getColorName(tag)}`;
};
const getLineColorClass = (level) => {
if (level) {
return `line-${level}`;
}
return `line-default`;
};
const dateRange = ref([0, 0]);
const filteredTimelineList = computed(() => {
if (!dateRange.value || dateRange.value[0] === 0) return timelineList.value;
const [start, end] = dateRange.value;
return timelineList.value.map(dept => {
const events = dept.events.filter(e => {
const t = parseDate(e.date);
return t >= start && t <= end;
});
return { ...dept, events };
});
});
const timelineList = ref([
{
name: "商务部",
count: 77,
events: [
{
date: "2025年1月24日",
content: "商务部发布《人工智能扩散框架》",
tags: ["人工智能"],
level: "red"
},
{
date: "2025年2月10日",
content: "工业与安全局出口管制指南，限制先进AI芯片及相关技术...",
tags: ["集成电路"]
},
{
date: "2025年2月15日",
content: "商务部宣布实施美国人工智能出口项目",
tags: ["人工智能"]
},
{
date: "2025年4月10日",
content: "针对中国产海运、钢、铝、铜矿产及制品加征关税",
tags: ["新材料"],
level: "yellow"
},
{
date: "2025年4月15日",
content: "工业与安全局新增实体清单，包含45家中国科技企业",
tags: ["人工智能"],
level: "red"
}
]
},
{
name: "国务院",
count: 49,
events: [
{
date: "2025年1月26日",
content: "联合声明—战略人工智能伙伴关系",
tags: ["人工智能"],
level: "green"
},
{
date: "2025年2月1日",
content: "商务部宣布实施美国人工智能出口项目商务部宣布实施美...",
tags: ["人工智能"]
},
{
date: "2025年2月13日",
content: "国务院宣布终止5项美中文化交流计划，包括政策制定者...",
tags: ["量子科技", "航空航天"],
level: "red"
},
{
date: "2025年3月8日",
content: "国务院宣布进一步调整对中国留学生的签证政策，主要针...",
tags: ["人工智能"]
},
{
date: "2025年4月19日",
content: "联合声明—战略人工智能伙伴关系",
tags: ["人工智能"],
level: "green"
}
]
},
{
name: "财政部",
count: 49,
events: [
{
date: "2025年1月28日",
content: "财政部执行税收抵免新规与供应链审查，终止电动汽车税...",
tags: ["能源"],
level: "red"
},
{
date: "2025年2月11日",
content: '将6名中国个人和10家中国实体加入"特别指定国民清单"',
tags: ["集成电路"]
},
{
date: "2025年2月27日",
content: '向EDA巨头发出"正告函"，暂停处理对华出口3nm及以下...',
tags: ["集成电路"],
level: "red"
},
{
date: "2025年4月10日",
content: "财政部准备向美国9家人工智能企业投资210亿元",
tags: ["人工智能"],
level: "green"
}
]
},
{
name: "贸易代表办公室",
count: 49,
events: [
{
date: "2025年1月25日",
content: '对“中国相关船舶”进入美国港口征收“入港费”，并分...',
tags: ["能源"],
level: "yellow"
},
{
date: "2025年2月2日",
content: "对进口自中国的半导体产品加征关税",
tags: ["集成电路"]
},
{
date: "2025年2月20日",
content: '向EDA巨头发出"正告函"，暂停处理对华出口3nm及以下...',
tags: ["集成电路"]
},
{
date: "2025年3月23日",
content: "财政部准备向美国9家人工智能企业投资210亿元",
tags: ["人工智能"],
level: "green"
},
{
date: "2025年4月21日",
content: "财政部拟议出台《境外投资规程》，限制对华高科技投...",
tags: ["人工智能"],
level: "yellow"
}
]
},
{
name: "商务部",
count: 77,
events: [
{
date: "2025年1月24日",
content: "商务部发布《人工智能扩散框架》",
tags: ["人工智能"],
level: "red"
},
{
date: "2025年2月10日",
content: "工业与安全局出口管制指南，限制先进AI芯片及相关技术...",
tags: ["集成电路"]
},
{
date: "2025年2月15日",
content: "商务部宣布实施美国人工智能出口项目",
tags: ["人工智能"]
},
{
date: "2025年4月10日",
content: "针对中国产海运、钢、铝、铜矿产及制品加征关税",
tags: ["新材料"],
level: "yellow"
},
{
date: "2025年4月15日",
content: "工业与安全局新增实体清单，包含45家中国科技企业",
tags: ["人工智能"],
level: "red"
}
]
}
]);
const rankingList = ref([
{
depts: ["商务部", "财政部", "国务院"],
......@@ -343,10 +568,7 @@ const rankingList = ref([
const chartRef = ref(null);
let myChart = null;
const mainChartRef = ref(null);
const sliderChartRef = ref(null);
const totalHeight = ref(600);
let mainChart = null;
let sliderChart = null;
const parseDate = (str) => {
......@@ -366,114 +588,23 @@ const timelineAllData = computed(() => {
return all.sort((a, b) => parseDate(b.date) - parseDate(a.date));
});
const updateTimeline = (startTime, endTime) => {
const filtered = timelineAllData.value.filter(item => {
const t = parseDate(item.date);
return t >= startTime && t <= endTime;
});
const itemHeight = 80;
totalHeight.value = Math.max(filtered.length * itemHeight, 552);
setTimeout(() => {
if (!mainChart) return;
mainChart.resize();
const option = {
grid: {
left: 150,
right: 50,
top: 20,
bottom: 20
},
tooltip: {
show: true,
formatter: (params) => {
const item = filtered[params.dataIndex];
return `${item.date}<br/>${item.title}`;
}
},
singleAxis: {
type: 'category',
orient: 'vertical',
data: filtered.map((_, i) => i),
top: 20,
bottom: 20,
left: 120,
width: '80%',
axisLabel: {
interval: 0,
formatter: (value, index) => {
if (!filtered[index]) return '';
return filtered[index].date;
},
align: 'right',
margin: 20,
textStyle: {
color: '#666',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#ccc',
width: 2
}
},
axisPointer: {
animation: true,
label: {
show: true
}
},
splitLine: { show: false }
},
series: [
{
type: 'scatter',
coordinateSystem: 'singleAxis',
data: filtered.map((_, i) => [i, 0]),
symbolSize: 14,
itemStyle: {
color: '#2f79c4',
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
formatter: (params) => {
const item = filtered[params.dataIndex];
return item.title;
},
position: 'right',
offset: [20, 0],
color: '#333',
fontSize: 16,
fontWeight: 'bold',
width: 400,
overflow: 'truncate'
}
}
]
};
mainChart.setOption(option);
}, 50);
};
const initTimeline = () => {
if (!mainChartRef.value) return;
mainChart = echarts.init(mainChartRef.value);
updateTimeline(0, Date.now() + 365 * 24 * 3600 * 1000 * 10);
};
const initSlider = () => {
if (!sliderChartRef.value) return;
sliderChart = echarts.init(sliderChartRef.value);
const dates = timelineAllData.value.map(item => parseDate(item.date));
const minDate = Math.min(...dates);
const maxDate = Math.max(...dates);
const rangeMin = minDate - 30 * 24 * 3600 * 1000;
const rangeMax = maxDate + 30 * 24 * 3600 * 1000;
// 设定总范围：2010年1月1日 - 当前年份年底
const currentYear = new Date().getFullYear();
const rangeMin = new Date(2018, 0, 1).getTime();
const rangeMax = new Date(currentYear, 11, 31).getTime();
// 设定默认选中范围：2025-01-01 到 2025-04-25
const defaultStart = new Date(2025, 0, 1).getTime();
const defaultEnd = new Date(2025, 3, 25).getTime();
// 初始化 dateRange 为默认选中范围
dateRange.value = [defaultStart, defaultEnd];
const option = {
grid: {
......@@ -497,12 +628,38 @@ const initSlider = () => {
type: 'slider',
xAxisIndex: 0,
filterMode: 'weakFilter',
height: 30,
bottom: 10,
handleSize: '100%',
showDetail: true,
start: 0,
end: 100
height: '100%',
top: 0,
bottom: 0,
left: 20,
right: 20,
// 默认选中范围
startValue: defaultStart,
endValue: defaultEnd,
backgroundColor: 'transparent',
borderColor: 'transparent',
fillerColor: 'rgba(246, 250, 255, 1)',
dataBackground: {
lineStyle: { color: 'transparent' },
areaStyle: { color: 'transparent' }
},
selectedDataBackground: {
lineStyle: { color: 'transparent' },
areaStyle: { color: 'transparent' }
},
labelFormatter: (value) => {
const date = new Date(value);
const y = date.getFullYear();
const m = (date.getMonth() + 1).toString().padStart(2, '0');
const d = date.getDate().toString().padStart(2, '0');
return `${y}-${m}-${d}`;
},
textStyle: {
color: '#5F656C',
fontSize: 12
},
// 解决 passive event 警告的关键配置
preventDefaultMouseMove: false
}
],
series: [
......@@ -510,30 +667,22 @@ const initSlider = () => {
type: 'scatter',
data: dates.map(d => [d, 0]),
symbolSize: 5,
itemStyle: { color: '#ccc' }
itemStyle: { color: 'transparent' }
}
]
};
sliderChart.setOption(option);
sliderChart.on('dataZoom', function () {
sliderChart.on('dataZoom', () => {
const opt = sliderChart.getOption();
const startValue = opt.dataZoom[0].startValue;
const endValue = opt.dataZoom[0].endValue;
let startT, endT;
if (startValue != null && endValue != null) {
startT = startValue;
endT = endValue;
} else {
const range = rangeMax - rangeMin;
const startP = opt.dataZoom[0].start;
const endP = opt.dataZoom[0].end;
startT = rangeMin + range * startP / 100;
endT = rangeMin + range * endP / 100;
if (opt.dataZoom && opt.dataZoom[0]) {
const start = opt.dataZoom[0].startValue;
const end = opt.dataZoom[0].endValue;
if (start && end) {
dateRange.value = [start, end];
}
}
updateTimeline(startT, endT);
});
};
......@@ -646,11 +795,9 @@ const initChart = () => {
onMounted(() => {
initChart();
initTimeline();
initSlider();
window.addEventListener("resize", () => {
myChart && myChart.resize();
mainChart && mainChart.resize();
sliderChart && sliderChart.resize();
});
});
......@@ -1215,7 +1362,204 @@ const prev = () => {
padding: 8px 8px 8px 8px;
background-color: rgb(247, 248, 249);
border: 1px solid rgb(234, 236, 238);
.timeline-item {
display: flex;
flex-direction: column;
.timeline-list {
flex: 1;
overflow-y: auto;
padding-right: 8px;
padding-bottom: 8px;
.dept-row {
display: flex;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
.dept-info {
width: 200px;
flex-shrink: 0;
display: flex;
align-items: center;
background-color: #fff;
border-radius: 4px;
margin-right: 8px;
padding: 12px 16px;
box-sizing: border-box;
height: 130px;
.dept-icon {
width: 48px;
height: 50px;
margin-right: 8px;
}
.dept-text {
.dept-name {
font-family: "Microsoft YaHei";
font-size: 18px;
font-weight: 700;
color: rgb(59, 65, 75);
line-height: 24px;
}
.dept-count {
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
color: rgb(59, 65, 75);
line-height: 24px;
}
}
}
.events-container {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
// 隐藏滚动条
&::-webkit-scrollbar {
display: none;
}
.event-card {
min-width: 240px;
max-width: 240px;
height: 130px;
background-color: #fff;
border-radius: 4px;
padding: 12px;
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
flex-shrink: 0;
.card-top-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
&.line-blue { background-color: #2f79c4; }
&.line-green { background-color: rgb(33, 129, 57); }
&.line-red { background-color: rgb(206, 79, 81); }
&.line-orange { background-color: #fa8c16; }
&.line-yellow { background-color: rgb(232, 189, 11); }
&.line-purple { background-color: #722ed1; }
&.line-cyan { background-color: #13c2c2; }
&.line-default { background-color: rgb(234, 236, 238); }
}
.event-header {
display: flex;
justify-content: space-between;
align-items: center;
.event-date {
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 700;
color: rgb(59, 65, 75);
line-height: 30px;
}
.traffic-light {
display: flex;
gap: 2px;
background-color: rgb(247, 248, 249);
padding: 2px 2px;
border-radius: 20px;
.light {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgb(234, 236, 238);
&.green.active {
background-color: rgb(33, 129, 57);
}
&.yellow.active {
background-color: rgb(232, 189, 11);
}
&.red.active {
background-color: rgb(206, 79, 81);
}
}
}
}
.event-content {
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
color: rgb(59, 65, 75);
line-height: 24px;
// margin-bottom: auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
.tag {
padding: 2px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
border: 1px solid;
&.tag-blue {
color: rgba(9, 88, 217, 1);
background: rgba(230, 244, 255, 1);
border-color: rgba(186, 224, 255, 1);
}
&.tag-green {
color: rgba(56, 158, 13, 1);
background: rgba(246, 255, 237, 1);
border-color: rgba(217, 247, 190, 1);
}
&.tag-red {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1);
}
&.tag-orange {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
border-color: rgba(255, 213, 145, 1);
}
&.tag-purple {
color: rgba(114, 46, 209, 1);
background: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1);
}
&.tag-cyan {
color: rgba(19, 194, 194, 1);
background: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1);
}
}
}
}
}
}
}
.timelineBar {
width: 100%;
height: 552px;
overflow-y: auto;
......@@ -1227,6 +1571,9 @@ const prev = () => {
width: 100%;
height: 51px;
background-color: rgba(255, 255, 255, 1);
background-size: 100% 20px;
background-repeat: no-repeat;
background-position: center;
}
}
}
......
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ 29532a44
......@@ -47,7 +47,7 @@ const handleNavClick = name => {
<style lang="scss" scoped>
.content-wrapper {
// width: 1601px;
width: 1666px;
width: 1601px;
height: 2203px;
margin: 0 auto;
.main-nav {
......
src/views/ZMOverView/components/newRisk/WaveBall.vue
浏览文件 @ 29532a44
......@@ -70,10 +70,40 @@ const makeOption = () => {
},
label: {
show: true,
formatter: `${props.data.change}` + `${props.data.unit}`,
fontSize: 24,
color: `${props.color[5]}`,
insideColor: `${props.color[5]}`,
formatter: function () {
const change = props.data.change;
const unit = props.data.unit;
if (change === '无新增') {
return `{noChange|${change}}\n{b|共${props.data.count}${unit}}`
}
return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}`
},
rich: {
num: {
fontSize: 36,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [-4, 0, 8, 0]
},
noChange: {
fontSize: 24,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [0, 0, 8, 0]
},
unit: {
fontSize: 18,
fontWeight: 'normal',
color: `${props.color[5]}`,
padding: [0, 0, 12, 0],
verticalAlign: 'bottom'
},
b: {
fontSize: 16,
color: `${props.color[5]}`,
opacity: 0.8
}
}
}
}]
}
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 29532a44
......@@ -11,7 +11,10 @@
<div class="stats">
<div v-for="value in sections[index].waveBall">
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
<div class="waveBall-text">{{ value.title }}</div>
<div class="waveBall-text">
{{ value.title }}
<span v-if="value.change !== '无新增'" class="red-dot"></span>
</div>
</div>
</div>
<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
......@@ -31,6 +34,9 @@
<div>风险信号</div>
<div class="num">12</div>
<div class="manage-btn" @click="handleToRiskManage">
风险信号管理 >
</div>
</div>
<div style="display: flex">
<div class="risk-signals">
......@@ -159,7 +165,7 @@ const sections = ref([
},
{
title: "对实体清单的更新及修订",
date: "12-18",
date: "12-19",
waveBall: [
{
percent: 10, // 估算的百分比
......@@ -179,6 +185,7 @@ const sections = ref([
},
{
title: "SDN清单更新",
date: "12-15",
waveBall: [
{
percent: 15, // 估算的百分比
......@@ -198,7 +205,7 @@ const sections = ref([
},
{
title: "232调查：商用飞机和喷气发动机进口对国家安全的...",
date: "12-18",
date: "12-15",
waveBall: [
{
percent: 3, // 估算的百分比
......@@ -269,6 +276,12 @@ const handleCarouselChange = index => {
}
};
const handleToRiskManage = () => {
// 这里的路由路径请根据实际情况修改
// router.push('/riskSignalManage');
console.log('跳转到风险信号管理');
};
const handleSwithCurNews = name => {
if (name === "left") {
carouselRef.value.prev();
......@@ -290,12 +303,15 @@ onMounted(() => {
.policy-monitoring {
font-family: Arial, sans-serif;
width: 1601px;
margin: 0 auto;
}
.header {
width: 1601px;
display: flex;
justify-content: space-around;
margin-bottom: 20px;
justify-content: space-between;
margin-bottom: 16px;
}
.content {
......@@ -327,7 +343,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
display: flex;
align-items: center;
img {
/* 矢量 347 */
width: 22px;
......@@ -357,6 +373,26 @@ onMounted(() => {
letter-spacing: 0px;
text-align: center;
}
.manage-btn {
margin-left: auto; /* 推到最右侧 */
margin-right: 16px; /* 适当的右边距 */
padding: 4px 12px;
border-radius: 20px;
background-color: rgba(206, 79, 81, 0.1);
border: 1px solid rgba(206, 79, 81, 0.1);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgb(206, 79, 81);
cursor: pointer;
&:hover {
background-color: rgba(206, 79, 81, 0.2);
}
}
}
}
......@@ -373,7 +409,7 @@ onMounted(() => {
}
.section-title {
margin: 16px;
margin: 8px 16px;
/* 容器 1559 */
width: 125px;
height: 31px;
......@@ -383,9 +419,8 @@ onMounted(() => {
/* 容器 519 */
height: 210px;
display: flex;
justify-content: left;
margin-top: 10px;
padding: 0 39px;
justify-content: space-between;
padding: 0 35px;
.waveBall-text {
margin-top: 17px;
......@@ -398,6 +433,23 @@ onMounted(() => {
line-height: 26px;
letter-spacing: 0px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.red-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 77, 79, 1);
margin-left: 8px;
// 如果需要绝对定位，可以使用下面的样式，但在 flex 布局中 margin-left 更简单
// position: absolute;
// right: -14px;
// top: 50%;
// transform: translateY(-50%);
}
}
}
......
src/views/ZMOverView/index.vue
浏览文件 @ 29532a44
......@@ -22,18 +22,6 @@
</div>
</div>
</div>
<div class="data-select">
<div
v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<div class="content-box">
<!-- 导航栏 -->
<div class="content-nav">
......@@ -46,15 +34,29 @@
</div>
</div>
<!-- 最新风险动态 -->
<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;"></commonTitle>
<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;margin-bottom: 36px;"></commonTitle>
<newRisk></newRisk>
<!-- 最新科技要闻 -->
<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
<!-- 美对华“四全”打压 -->
<commonTitle id="us-pressure" title="美对华“四全”打压" style="margin-top: 64px;"></commonTitle>
<div id="us-pressure" class="us-pressure-section">
<div class="data-select">
<div
v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<commonTitle title="美对华“四全”打压" style="margin-bottom: 36px;"></commonTitle>
</div>
<fourSuppress></fourSuppress>
<!-- 中美博弈概况 -->
<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;"></commonTitle>
<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;margin-bottom: 36px;"></commonTitle>
<gameProfile></gameProfile>
</div>
</div>
......@@ -141,55 +143,6 @@ const handleDateClick = (type) => {
flex-direction: column;
overflow: hidden;
position: relative;
.data-select {
width: 120px;
height: 144px;
position: absolute;
top: 291px;
left: 0;
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 10;
.date-item {
display: flex;
align-items: center;
padding-left: 18px;
height: 46px;
cursor: pointer;
// transition: all 0.3s;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
img {
width: 18px;
height: 18px;
margin-right: 18px;
}
span {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgb(95, 101, 108);
}
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
}
}
}
}
.background-img {
width: 100%;
height: 700px;
......@@ -286,6 +239,58 @@ const handleDateClick = (type) => {
width: 100%;
overflow-y: auto;
padding: 48px 160px;
.us-pressure-section {
position: relative;
margin-top: 64px;
.data-select {
width: 120px;
height: 144px;
position: absolute;
top: 80px;
left: -160px;
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 10;
.date-item {
display: flex;
align-items: center;
padding-left: 18px;
height: 46px;
cursor: pointer;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
img {
width: 18px;
height: 18px;
margin-right: 18px;
}
span {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgb(95, 101, 108);
}
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
}
}
}
}
}
.content-nav {
.nav-title {
font-size: 48px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论