Skip to content

R
risk-monitor
提交 afc38de7 authored 作者: 李顺's avatar 李顺
浏览文件
操作

[update]:新增全联盟页面

上级 90ab7147
隐藏空白字符变更
内嵌 并排
正在显示 包含 1535 行增加 和 5 行删除
src/App.vue
浏览文件 @ afc38de7
...@@ -65,7 +65,8 @@ const router = useRouter(); ...@@ -65,7 +65,8 @@ const router = useRouter();
const handleToHome = () => { const handleToHome = () => {
router.push({ router.push({
path: "/overview" path: "/ZMOverView"
// path: "/overview"
}); });
}; };
......
src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/world.json 0 → 100644
浏览文件 @ afc38de7
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue
浏览文件 @ afc38de7
<!--科技要闻--> <!--科技要闻-->
<template> <template>
<div class="content-wrapper"> <div class="content-wrapper">
全联盟 <!-- 轮播栏目 -->
<div class="carousel-list">
<img src="./assets/leftbtn.png" alt class="left-btn" @click="changeIndex(-1)" />
<div class="content">
<div class="carousel-item" v-for="item in carouselList">
<div class="item-top">
<div class="top-img">
<img :src="ele.img" :class="{img1: index !== 0}" alt v-for="(ele, index) in item.imgList" />
</div>
<div class="top-num">{{ item.num }}次</div>
</div>
<div class="item-title">{{ item.name }}</div>
<div class="type">
<div class="type-item" :class="getClassName(ele)" v-for="ele in item.area">{{ ele }}</div>
</div>
</div>
</div>
<img src="./assets/rightbtn.png" alt class="right-btn" @click="changeIndex(1)" />
</div>
<!-- 排华联盟分布 -->
<div class="anti-china">
<div class="anti-title">
<div class="title-left">
<img src="./assets/union.png" alt />
<div class="left-title">排华联盟分布情况</div>
</div>
<div class="title-right">
<div class="right-num" :class="{click: currentAntiType === 'num'}">排华联盟数量</div>
<div class="right-num" :class="{click: currentAntiType === 'active'}">排华联盟动态</div>
</div>
</div>
<div class="anti-content">
<div class="content-left">
<div class="item" v-for="item in antiChinaNum">
<div class="item-left">
<img :src="item.img" alt />
<span>{{ item.name }}</span>
</div>
<div class="item-right">{{ item.value }}个</div>
</div>
</div>
<div class="content-right" id="echartsMap"></div>
</div>
</div>
<!-- 排华联盟最新动态和预警 -->
<div class="anti-news">
<div class="news">
<div class="news-title">
<img src="./assets/news.png" alt />
<span>排华联盟最新动态</span>
</div>
<div class="news-content">
<div class="item" v-for="item in newsList">
<div class="item-title">
<img :src="item.img" alt />
<span>{{ item.title }}</span>
</div>
<div class="item-content">{{ item.content }}</div>
<div class="item-bottom">
<div class="bottom-left">
<div class="left-item" :class="getClassName(ele)" v-for="ele in item.area">
<span>{{ ele }}</span>
</div>
</div>
<div class="bottom-right">{{ item.time }}</div>
</div>
</div>
</div>
</div>
<div class="warning">
<div class="warning-title">
<img src="./assets/warning.png" alt />
<span>新增排华联盟预警</span>
</div>
<div class="warning-content">
<div class="content-item" v-for="item in warningList">
<div class="item-title">
<div class="title-left">
<div class="img-list">
<img
:src="ele.img"
:class="{img1: index !== 0}"
alt
v-for="(ele, index) in item.countries"
/>
</div>
<div class="left-content">{{ getContent(item.countries) }}</div>
</div>
<div class="title-right">{{ item.num }}次合作</div>
</div>
<div class="item-content">
<div class="content-list" v-for="ele in item.area">
<div class="list-left" :class="getClassName(ele.type)">
<span>{{ ele.type }}</span>
</div>
<div class="list-content">{{ ele.content }}</div>
<div class="list-time">{{ ele.time }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- bottom -->
<div class="anti-area">
<div class="area-left">
<div class="left-title">
<img src="./assets/union.png" alt />
<span>排华联盟领域分布</span>
</div>
<div class="left-content" ref="leftChartRef"></div>
</div>
<div class="area-right">
<div class="right-title">
<img src="./assets/circle1.png" alt />
<span>排华联盟国家紧密度</span>
</div>
<div class="right-content" ref="rightChartRef"></div>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
const carouselList = ref([
{
name: '芯片四方联盟',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟',
num: 21,
area: ['人工智能', '集成电路'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
// {
// name: '芯片四方联盟',
// num: 21,
// area: ['人工智能'],
// imgList: [
// {
// img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
// },
// {
// img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
// },
// {
// img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
// },
// {
// img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
// },
// {
// img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
// },
// {
// img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
// },
// ]
// },
])
const getClassName = (type) => {
let className = ''
switch (type) {
case '人工智能':
className = 'ai'
break
case '新材料':
className = 'material'
break
case '量子科技':
className = 'technology'
break
case '生物科技':
className = 'organism'
break
case '航空航天':
className = 'aerospace'
break
case '能源':
className = 'energy'
break
case '集成电路':
className = 'integrated'
break
default:
className = 'other'
}
return className
}
const currentAntiType = ref('num')
const antiChinaNum = ref([
{
name: '美国',
value: 24,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '欧盟',
value: 18,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '日本',
value: 13,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '韩国',
value: 13,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '英国',
value: 9,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '加拿大',
value: 6,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '澳大利亚',
value: 5,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '菲律宾',
value: 3,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '新西兰',
value: 3,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '印度',
value: 2,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
}
])
const chartDom = ref()
const myChart = ref()
function createChart() {
const option = {
geo: {
map: 'world',
roam: true,
label: {
show: false,
color: '#555'
},
itemStyle: {
areaColor: '#f5f5f5', // 所有区域的默认底色
borderColor: '#ccc' // 边界线颜色
}
},
tooltip: {},
visualMap: [],
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
encode: {
tooltip: 2,
label: 2
},
data: [],
itemStyle: {
color: 'rgb(130, 175, 224)',
borderWidth: 1,
borderColor: '#3c7865'
}
},
{
type: 'map',
geoIndex: 0,
map: '',
data: []
}
]
};
myChart.value.setOption(option);
}
function fetchGeoJSON() {
chartDom.value = document.getElementById('echartsMap')
myChart.value = echarts.init(chartDom.value)
myChart.value.showLoading();
fetch('/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/world.json').then((res) => res.json()).then((result) => {
echarts.registerMap('world', result);
createChart();
myChart.value.hideLoading();
})
}
const newsList = ref([
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
}
])
const warningList = ref([
{
countries: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
}
],
area: [
{
type: '人工智能',
content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
time: '2024年11月21日'
},
{
type: '人工智能',
content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
time: '2024年11月21日'
},
{
type: '人工智能',
content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
time: '2024年11月21日'
}
],
num: 3
},
{
countries: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
}
],
area: [
{
type: '人工智能',
content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
time: '2024年11月21日'
}
],
num: 1
}
])
const getContent = (countries) => {
let result = '' // 美国 / 日本 / 韩国 / 印度
for (let i = 0; i < countries.length; i++) {
result += countries[i].name
if (i !== countries.length - 1) {
result += ' / '
}
}
return result
}
const leftChartRef = ref(null);
let leftChart;
const rightChartRef = ref(null);
let rightChart;
const initLeftDonut = async () => {
if (!leftChartRef.value) return;
if (leftChart) leftChart.dispose();
leftChart = echarts.init(leftChartRef.value);
// let data = []
// try {
// const params = {
// year: value1.value
// }
// const res = await getAreaDistribution(params);
// if (res && res.code === 200) {
// console.log('----getAreaDistribution', res.data)
// for (let i = 0; i < res.data.length; i++) {
// let item = {
// name: '',
// value: 0
// }
// item.name = res.data[i].AREANAME
// item.value = res.data[i].AREACOUNT
// item.itemStyle = {
// color: getColor(colors, item.name)
// }
// data.push(item)
// }
// }
// } catch (error) {
// console.error("获取限制领域分布情况接口失败:", error);
// }
// // console.log('----data', data)
const data = [
{ name: "集成电路", value: 50 },
{ name: "人工智能", value: 46 },
{ name: "通信网络", value: 40 },
{ name: "能源", value: 32 },
{ name: "先进制造", value: 31 },
{ name: "生物科技", value: 31 },
{ name: "航空航天", value: 30 },
{ name: "新材料", value: 24 }
];
const option = {
tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
series: [{
type: "pie",
radius: [96, 120],
center: ["50%", "50%"],
avoidLabelOverlap: true,
itemStyle: { borderWidth: 0 },
label: {
show: true,
position: "outside",
alignTo: 'edge',
formatter: ({ name, value, percent }) => `{name|${name}} {value|${value}项} {percent|${percent}%}`,
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
name: { fontSize: 16, fontFamily: "Microsoft YaHei", fontWeight: 700, lineHeight: 24, color: "rgb(59, 65, 75)" },
value: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" },
percent: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" }
}
},
labelLine: {
show: true,
length: 30,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < leftChart.getWidth() / 2;
const points = params.labelLinePoints;
// 导航线终点在标签下方
const lineY = params.labelRect.y + params.labelRect.height;
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
points[2][1] = lineY;
points[1][1] = lineY;
return {
labelLinePoints: points
};
},
data: data.map((d, i) => ({
...d,
labelLine: { lineStyle: { color: getColor(colors, d.name), width: 1 } }
}))
}]
};
leftChart.setOption(option);
};
const initRightDonut = async () => {
if (!rightChartRef.value) return;
if (rightChart) rightChart.dispose();
rightChart = echarts.init(rightChartRef.value);
// let data = []
// try {
// const params = {
// year: value1.value
// }
// const res = await getAreaDistribution(params);
// if (res && res.code === 200) {
// console.log('----getAreaDistribution', res.data)
// for (let i = 0; i < res.data.length; i++) {
// let item = {
// name: '',
// value: 0
// }
// item.name = res.data[i].AREANAME
// item.value = res.data[i].AREACOUNT
// item.itemStyle = {
// color: getColor(colors, item.name)
// }
// data.push(item)
// }
// }
// } catch (error) {
// console.error("获取限制领域分布情况接口失败:", error);
// }
// // console.log('----data', data)
const data = [
{
name: 'Node 1',
x: 300,
y: 300
},
{
name: 'Node 2',
x: 800,
y: 300
},
{
name: 'Node 3',
x: 550,
y: 100
},
{
name: 'Node 4',
x: 550,
y: 500
}
]
const links = [
{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: false
},
lineStyle: {
width: 5,
curveness: 0.2
}
},
{
source: 'Node 2',
target: 'Node 1',
label: {
show: false
},
lineStyle: {
curveness: 0.2
}
},
{
source: 'Node 1',
target: 'Node 3'
},
{
source: 'Node 2',
target: 'Node 3'
},
{
source: 'Node 2',
target: 'Node 4'
},
{
source: 'Node 1',
target: 'Node 4'
}
]
let option = {
title: {
// text: 'Basic Graph'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', ''],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: data,
// links: [],
links: links,
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
rightChart.setOption(option);
};
const getColor = (colors, name) => {
const index = colors.findIndex((i) => i.name === name)
if (index !== -1) {
return colors[index].value
} else {
return "rgba(105, 177, 255, 1)"
}
}
const colors = [
{
name: '集成电路',
value: "rgba(105, 177, 255, 1)",
},
{
name: '新一代通信网络',
value: "rgba(135, 232, 222, 1)",
},
{
name: '人工智能',
value: "rgba(255, 192, 105, 1)",
},
{
name: '能源',
value: "rgba(89, 126, 247, 1)",
},
{
name: '先进制造',
value: "rgba(214, 228, 255, 1)",
},
{
name: '生物科技',
value: "rgba(255, 120, 117, 1)",
},
{
name: '航空航天',
value: "rgba(179, 127, 235, 1)",
},
{
name: '新材料',
value: "rgba(255, 163, 158, 1)",
}
];
onMounted(() => {
fetchGeoJSON();
initLeftDonut()
initRightDonut()
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 1666px; width: 1666px;
height: 2132px; height: 2132px;
// 领域样式
// 人工智能
.ai {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
// 新材料
.material {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
// 量子科技
.technology {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
// 生物科技
.organism {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
// 航空航天
.aerospace {
border: 1px solid rgba(173, 198, 255, 1);
background: rgba(240, 245, 255, 1);
color: rgba(22, 119, 255, 1);
}
// 能源
.energy {
border: 1px solid rgba(217, 247, 190, 1);
background: rgba(246, 255, 237, 1);
color: rgba(56, 158, 13, 1);
}
// 集成电路
.integrated {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(9, 88, 217, 1);
}
// 其他
.other {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(9, 88, 217, 1);
}
.carousel-list {
width: 1666px;
height: 178px;
margin-top: 16px;
display: flex;
align-items: center;
.content {
width: calc(100% - 48px - 16px);
display: flex;
align-items: center;
justify-content: space-around;
.carousel-item {
width: 307px;
height: 178px;
// margin-right: 16px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 1);
.item-top {
width: 100%;
height: 48px;
padding: 15px 22px 9px 25px;
display: flex;
align-items: center;
justify-content: space-between;
.top-img {
display: flex;
align-items: center;
img {
width: 24px;
height: 24px;
}
.img1 {
margin-left: -8px;
}
}
.top-num {
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 30px;
font-weight: 400;
line-height: 39px;
letter-spacing: 0px;
text-align: right;
color: rgba(5, 95, 194, 1);
}
}
.item-title {
margin-left: 25px;
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
color: rgba(59, 65, 75, 1);
}
.type {
margin-left: 22px;
margin-top: 51px;
.type-item {
display: inline-block;
border-radius: 4px;
padding: 2px 8px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
margin-left: 8px;
}
}
}
}
.left-btn {
width: 24px;
height: 48px;
margin-right: 8px;
}
.right-btn {
width: 24px;
height: 48px;
margin-left: 8px;
}
}
.anti-china {
margin-top: 16px;
margin-left: 33px;
width: 1601px;
height: 700px;
background: rgba(255, 255, 255, 1);
.anti-title {
width: 100%;
height: 48px;
padding-left: 19px;
padding-right: 43px;
display: flex;
align-items: center;
justify-content: space-between;
.title-left {
display: flex;
align-items: center;
img {
width: 17px;
height: 17px;
margin-right: 8px;
}
.left-title {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
color: rgba(5, 95, 194, 1);
}
}
.title-right {
display: flex;
align-items: center;
justify-content: center;
.right-num {
/* 切换按钮 */
width: 120px;
height: 32px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 8px;
border-radius: 4px;
border: 1px solid rgba(230, 231, 232, 1);
color: rgb(95, 101, 108);
background: rgba(255, 255, 255, 1);
}
.click {
border: 1px solid rgba(5, 95, 194, 1);
color: rgb(5, 95, 194);
background: rgba(231, 243, 255, 1);
}
}
}
.anti-content {
width: 100%;
height: calc(100% - 48px);
display: flex;
.content-left {
width: 197px;
margin-left: 38px;
margin-top: 55px;
margin-bottom: 55px;
overflow-y: auto;
display: flex;
flex-direction: column;
.item {
/* 容器 493 */
width: 100%;
height: 38px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 4px 12px 4px 12px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 50px;
/* 业务系统/模态背景模糊 */
backdrop-filter: blur(30px);
background: rgba(255, 255, 255, 0.65);
margin-bottom: 16px;
.item-left {
display: flex;
align-items: center;
img {
width: 16px;
height: 16px;
margin-right: 8px;
}
span {
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
}
.item-right {
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
}
}
.content-right {
width: calc(100% - 197px - 38px - 16px - 45px);
height: calc(100% - 20px - 20px);
// background: red;
margin-left: 16px;
margin-right: 45px;
margin-bottom: 20px;
margin-top: 20px;
}
}
}
.anti-news {
margin-top: 16px;
margin-left: 33px;
width: 1601px;
height: 700px;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: space-between;
.news {
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
width: 793px;
height: 700px;
.news-title {
width: 100%;
height: 48px;
display: flex;
align-items: center;
// justify-content: center;
img {
width: 22px;
height: 18px;
margin-right: 15px;
margin-left: 16px;
}
span {
color: rgba(5, 95, 194, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
}
}
.news-content {
width: 100%;
height: calc(100% - 48px);
padding: 4px 28px 25px 27px;
overflow-y: auto;
.item {
width: 100%;
height: 126px;
padding: 16px 0px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
background: rgba(255, 255, 255, 0.65);
.item-title {
width: 100%;
height: 30px;
display: flex;
align-items: center;
img {
width: 20px;
height: 20px;
margin-right: 5px;
}
span {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
}
.item-content {
margin-left: 28px;
width: calc(100% - 28px);
height: 30px;
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;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
}
.item-bottom {
margin-left: 28px;
width: calc(100% - 28px);
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
.bottom-left {
display: flex;
align-items: center;
.left-item {
/* 数据展示/Tag标签/亮色/蓝 */
// width: 72px;
height: 24px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border-radius: 4px;
margin-right: 8px;
span {
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
}
}
.bottom-right {
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: left;
}
}
}
}
}
.warning {
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
width: 793px;
height: 700px;
.warning-title {
width: 100%;
height: 48px;
display: flex;
align-items: center;
// justify-content: center;
img {
width: 22px;
height: 18px;
margin-right: 15px;
margin-left: 16px;
}
span {
color: rgba(5, 95, 194, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
}
}
.warning-content {
width: 100%;
height: calc(100% - 48px);
padding: 4px 28px 25px 27px;
overflow-y: auto;
.content-item {
width: 100%;
height: auto;
padding: 12px 24px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
margin-bottom: 12px;
.item-title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.title-left {
display: flex;
align-items: center;
.img-list {
display: flex;
align-items: center;
margin-right: 12px;
img {
width: 24px;
height: 24px;
}
.img1 {
margin-left: -8px;
}
}
.left-content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
}
.title-right {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: right;
}
}
.item-content {
width: 100%;
margin-top: 14px;
.content-list {
display: flex;
width: 100%;
height: 38px;
align-items: center;
justify-content: space-around;
.list-left {
/* 数据展示/Tag标签/亮色/绿 */
// width: 72px;
height: 24px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border-radius: 4px;
span {
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
}
.list-content {
width: 475px;
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;
// margin-left: 13px;
// margin-right: 13px;
}
.list-time {
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: left;
}
}
}
}
}
}
}
.anti-area {
margin-top: 16px;
margin-left: 33px;
width: 1601px;
height: 500px;
// background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: space-between;
.area-left {
width: 792px;
height: 500px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---10, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
.left-title {
width: 100%;
height: 48px;
display: flex;
align-items: center;
// justify-content: center;
img {
width: 22px;
height: 18px;
margin-right: 15px;
margin-left: 16px;
}
span {
color: rgba(5, 95, 194, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
}
}
.left-content {
width: 100%;
height: calc(100% - 48px);
padding: 33px 48px 59px 50px;
}
}
.area-right {
width: 792px;
height: 500px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---10, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
.right-title {
width: 100%;
height: 48px;
display: flex;
align-items: center;
// justify-content: center;
img {
width: 17px;
height: 18px;
margin-right: 15px;
margin-left: 16px;
}
span {
color: rgba(5, 95, 194, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
}
}
.right-content {
width: 100%;
height: calc(100% - 48px);
padding: 33px 48px 59px 50px;
}
}
}
} }
</style> </style>
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ afc38de7
...@@ -435,6 +435,7 @@ onMounted(() => { ...@@ -435,6 +435,7 @@ onMounted(() => {
.risk-signals { .risk-signals {
width: 769px; width: 769px;
height: 568px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
box-sizing: border-box; box-sizing: border-box;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论