Skip to content

R
risk-monitor
提交 d289a480 authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 1178e388 79e641cb
隐藏空白字符变更
内嵌 并排
正在显示 包含 885 行增加 和 871 行删除
src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue
浏览文件 @ d289a480
...@@ -8,18 +8,16 @@ ...@@ -8,18 +8,16 @@
<div class="carousel-item" v-for="item in showCarouselList"> <div class="carousel-item" v-for="item in showCarouselList">
<div class="item-top"> <div class="item-top">
<div class="top-img"> <div class="top-img">
<img :src="ele" :class="{img1: index !== 0}" alt v-for="(ele, index) in item.imageList" /> <img :src="ele" :class="{ img1: index !== 0 }" alt v-for="(ele, index) in item.imageList" />
</div> </div>
<div class="top-num">{{ item.count }}次</div> <div class="top-num">{{ item.count }}次</div>
</div> </div>
<div class="item-title">{{ item.name }}</div> <div class="item-title">{{ item.name }}</div>
<div class="type"> <div class="type">
<div <div class="type-item" :class="getClassName(ele.industryName)" v-for="ele in item.industryList">
class="type-item" {{ ele.industryName }}
:class="getClassName(ele.industryName)" </div>
v-for="ele in item.industryList"
>{{ ele.industryName }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -34,8 +32,8 @@ ...@@ -34,8 +32,8 @@
<div class="left-title">排华联盟分布情况</div> <div class="left-title">排华联盟分布情况</div>
</div> </div>
<div class="title-right"> <div class="title-right">
<div class="right-num" :class="{click: currentAntiType === 'num'}">排华联盟数量</div> <div class="right-num" :class="{ click: currentAntiType === 'num' }">排华联盟数量</div>
<div class="right-num" :class="{click: currentAntiType === 'active'}">排华联盟动态</div> <div class="right-num" :class="{ click: currentAntiType === 'active' }">排华联盟动态</div>
</div> </div>
</div> </div>
...@@ -86,11 +84,7 @@ ...@@ -86,11 +84,7 @@
</el-tooltip> </el-tooltip>
<div class="item-bottom"> <div class="item-bottom">
<div class="bottom-left"> <div class="bottom-left">
<div <div class="left-item" :class="getClassName(ele.industryName)" v-for="ele in item.industryList">
class="left-item"
:class="getClassName(ele.industryName)"
v-for="ele in item.industryList"
>
<span>{{ ele.industryName }}</span> <span>{{ ele.industryName }}</span>
</div> </div>
</div> </div>
...@@ -111,7 +105,7 @@ ...@@ -111,7 +105,7 @@
<div class="img-list"> <div class="img-list">
<img <img
:src="ele.image" :src="ele.image"
:class="{img1: index !== 0}" :class="{ img1: index !== 0 }"
alt alt
v-for="(ele, index) in item.countryList" v-for="(ele, index) in item.countryList"
/> />
...@@ -157,544 +151,540 @@ ...@@ -157,544 +151,540 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getAllUnionList, getDynamic, getPrediction, getUnionCount, getIndustry, getCountryRelation } from '@/api/allUnion.js' import { getAllUnionList, getDynamic, getPrediction, getUnionCount, getIndustry, getCountryRelation } from "@/api/allUnion.js";
const carouselList = ref([ const carouselList = ref([
{ {
name: '芯片四方联盟1', name: "芯片四方联盟1",
num: 21, num: 21,
area: ['人工智能'], area: ["人工智能"],
imgList: [ 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"
}, },
{ {
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: '芯片四方联盟2', name: "芯片四方联盟2",
num: 21, num: 21,
area: ['人工智能'], area: ["人工智能"],
imgList: [ 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"
}, },
{ {
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: '芯片四方联盟3', name: "芯片四方联盟3",
num: 21, num: 21,
area: ['人工智能'], area: ["人工智能"],
imgList: [ 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"
}, },
{ {
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: '芯片四方联盟4', name: "芯片四方联盟4",
num: 21, num: 21,
area: ['人工智能'], area: ["人工智能"],
imgList: [ 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"
}, },
{ {
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: '芯片四方联盟5', name: "芯片四方联盟5",
num: 21, num: 21,
area: ['人工智能', '集成电路'], area: ["人工智能", "集成电路"],
imgList: [ 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"
}, },
{ {
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: '芯片四方联盟6', name: "芯片四方联盟6",
num: 21, num: 21,
area: ['人工智能'], area: ["人工智能"],
imgList: [ 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"
}, },
{ {
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 startIndex = ref(0); const startIndex = ref(0);
const handleSwitch = flag => { const handleSwitch = flag => {
if (flag == "left") { if (flag == "left") {
if (startIndex.value === 0) { if (startIndex.value === 0) {
startIndex.value = carouselList.value.length - 5; startIndex.value = carouselList.value.length - 5;
} else { } else {
startIndex.value--; startIndex.value--;
} }
} else { } else {
if (startIndex.value === carouselList.value.length - 5) { if (startIndex.value === carouselList.value.length - 5) {
startIndex.value = 0; startIndex.value = 0;
} else { } else {
startIndex.value++; startIndex.value++;
} }
} }
}; };
const getAreaList = (areaList) => { const getAreaList = areaList => {
if (areaList && areaList.length > 2) { if (areaList && areaList.length > 2) {
const array = areaList.splice(0, 2) const array = areaList.splice(0, 2);
console.log('---areaList', array) console.log("---areaList", array);
return array return array;
} else { } else {
return areaList return areaList;
} }
} };
const getImageList = (imageList) => { const getImageList = imageList => {
if (imageList && imageList.length > 5) { if (imageList && imageList.length > 5) {
const array = imageList.splice(0, 5) const array = imageList.splice(0, 5);
return array return array;
} else { } else {
return imageList return imageList;
} }
} };
//打压遏制手段分布 //打压遏制手段分布
const showCarouselList = computed(() => { const showCarouselList = computed(() => {
return carouselList.value.slice(startIndex.value, startIndex.value + 5); return carouselList.value.slice(startIndex.value, startIndex.value + 5);
}); });
const getClassName = (type) => { const getClassName = type => {
let className = '' let className = "";
switch (type) { switch (type) {
case '人工智能': case "人工智能":
className = 'ai' className = "ai";
break break;
case '新材料': case "新材料":
className = 'material' className = "material";
break break;
case '量子科技': case "量子科技":
className = 'technology' className = "technology";
break break;
case '生物科技': case "生物科技":
className = 'organism' className = "organism";
break break;
case '航空航天': case "航空航天":
className = 'aerospace' className = "aerospace";
break break;
case '能源': case "能源":
className = 'energy' className = "energy";
break break;
case '集成电路': case "集成电路":
className = 'integrated' className = "integrated";
break break;
case '': case "":
className = 'none-class' className = "none-class";
break break;
default: default:
className = 'other' className = "other";
} }
return className return className;
} };
const currentAntiType = ref('num') const currentAntiType = ref("num");
const antiChinaNum = ref([ const antiChinaNum = ref([
{ {
name: '美国1111111111111111', name: "美国1111111111111111",
value: 24, value: 24,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: '欧盟', name: "欧盟",
value: 18, value: 18,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: 'Japan', name: "Japan",
value: 13, value: 13,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: '韩国', name: "韩国",
value: 13, value: 13,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: '英国', name: "英国",
value: 9, value: 9,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: '加拿大', name: "加拿大",
value: 6, value: 6,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: '澳大利亚', name: "澳大利亚",
value: 5, value: 5,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: '菲律宾', name: "菲律宾",
value: 3, value: 3,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: '新西兰', name: "新西兰",
value: 3, value: 3,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}, },
{ {
name: '印度', name: "印度",
value: 2, value: 2,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
} }
]) ]);
// echarts地图的颜色区间 // echarts地图的颜色区间
const startColor = [130, 175, 224]; // rgb(130, 175, 224) const startColor = [130, 175, 224]; // rgb(130, 175, 224)
const endColor = [5, 95, 194]; // rgb(5, 95, 194) const endColor = [5, 95, 194]; // rgb(5, 95, 194)
// 计算颜色插值函数 // 计算颜色插值函数
const getColorByValue = (value, maxValue) => { const getColorByValue = (value, maxValue) => {
if (maxValue === 0) return `rgb(${startColor.join(',')})`; if (maxValue === 0) return `rgb(${startColor.join(",")})`;
const ratio = value / maxValue; const ratio = value / maxValue;
const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * ratio); const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * ratio);
const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * ratio); const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * ratio);
const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * ratio); const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * ratio);
return `rgb(${r}, ${g}, ${b})`; return `rgb(${r}, ${g}, ${b})`;
} };
const chartDom = ref() const chartDom = ref();
const myChart = ref() const myChart = ref();
function createChart() { function createChart() {
// 找到最大值用于颜色计算 // 找到最大值用于颜色计算
const maxValue = Math.max(...antiChinaNum.value.map(item => item.value)); const maxValue = Math.max(...antiChinaNum.value.map(item => item.value));
// 为每个数据项计算颜色 // 为每个数据项计算颜色
const processedData = antiChinaNum.value.map(item => ({ const processedData = antiChinaNum.value.map(item => ({
...item, ...item,
itemStyle: { itemStyle: {
color: getColorByValue(item.value, maxValue) color: getColorByValue(item.value, maxValue)
} }
})) }));
const option = { const option = {
// geo: { // geo: {
// map: 'world', // map: 'world',
// roam: true, // roam: true,
// label: { // label: {
// show: false, // show: false,
// color: '#555' // color: '#555'
// }, // },
// itemStyle: { // itemStyle: {
// areaColor: 'rgba(231, 243, 255, 1)', // 所有区域的默认底色 // areaColor: 'rgba(231, 243, 255, 1)', // 所有区域的默认底色
// borderColor: 'rgb(130, 175, 224)' // 边界线颜色 // borderColor: 'rgb(130, 175, 224)' // 边界线颜色
// } // }
// }, // },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: function (params) { formatter: function (params) {
if (params.data) { if (params.data) {
// 从数据中查找对应的中文名称 // 从数据中查找对应的中文名称
const item = antiChinaNum.value.find((item) => item.name === params.name) const item = antiChinaNum.value.find(item => item.name === params.name);
console.log(item) console.log(item);
if (item) { if (item) {
return `${item.zhName}: ${params.data.value || 0}`; return `${item.zhName}: ${params.data.value || 0}`;
} else { } else {
return `${params.name}: ${params.data.value || 0}`; return `${params.name}: ${params.data.value || 0}`;
} }
}
} return params.name;
return params.name; }
} },
}, visualMap: {
visualMap: { min: 0,
min: 0, max: maxValue,
max: maxValue, left: "left",
left: 'left', top: "bottom",
top: 'bottom', text: ["高", "低"],
text: ['高', '低'], calculable: true,
calculable: true, inRange: {
inRange: { color: [`rgb(${startColor.join(",")})`, `rgb(${endColor.join(",")})`]
color: [ },
`rgb(${startColor.join(',')})`, textStyle: {
`rgb(${endColor.join(',')})` color: "#fff"
] }
}, },
textStyle: { series: [
color: '#fff' {
} name: "数据值",
}, type: "map",
series: [ roam: true, // 允许缩放和平移
{ zoom: 1.2, // 初始缩放级别
name: '数据值', map: "world",
type: 'map', emphasis: {
roam: true, // 允许缩放和平移 label: {
zoom: 1.2, // 初始缩放级别 show: true,
map: 'world', color: "#fff"
emphasis: { },
label: { itemStyle: {
show: true, areaColor: null,
color: '#fff' borderWidth: 1,
}, borderColor: "#fff"
itemStyle: { }
areaColor: null, },
borderWidth: 1, itemStyle: {
borderColor: '#fff' areaColor: "rgba(231, 243, 255, 1)", // 所有区域的默认底色
} borderColor: "rgb(130, 175, 224)" // 边界线颜色
}, },
itemStyle: { data: processedData
areaColor: 'rgba(231, 243, 255, 1)', // 所有区域的默认底色 }
borderColor: 'rgb(130, 175, 224)' // 边界线颜色 ]
}, };
data: processedData myChart.value.setOption(option);
}
]
};
myChart.value.setOption(option);
} }
function fetchGeoJSON() { function fetchGeoJSON() {
chartDom.value = document.getElementById('echartsMap') chartDom.value = document.getElementById("echartsMap");
if (!chartDom.value) return; if (!chartDom.value) return;
if (myChart.value) myChart.value.dispose(); if (myChart.value) myChart.value.dispose();
myChart.value = echarts.init(chartDom.value) myChart.value = echarts.init(chartDom.value);
myChart.value.showLoading(); myChart.value.showLoading();
fetch('/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/world.json').then((res) => res.json()).then((result) => { fetch("/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/world.json")
echarts.registerMap('world', result); .then(res => res.json())
createChart(); .then(result => {
myChart.value.hideLoading(); echarts.registerMap("world", result);
}) createChart();
myChart.value.hideLoading();
});
} }
const newsList = ref([ const newsList = ref([
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: '芯片四方联盟: 发布新版管制清单', title: "芯片四方联盟: 发布新版管制清单",
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...', content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ['新材料', '集成电路'], area: ["新材料", "集成电路"],
time: '2025年12月18日' time: "2025年12月18日"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: '芯片四方联盟: 发布新版管制清单', title: "芯片四方联盟: 发布新版管制清单",
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...', content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ['新材料', '集成电路'], area: ["新材料", "集成电路"],
time: '2025年12月18日' time: "2025年12月18日"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: '芯片四方联盟: 发布新版管制清单', title: "芯片四方联盟: 发布新版管制清单",
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...', content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ['新材料', '集成电路'], area: ["新材料", "集成电路"],
time: '2025年12月18日' time: "2025年12月18日"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: '芯片四方联盟: 发布新版管制清单', title: "芯片四方联盟: 发布新版管制清单",
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...', content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ['新材料', '集成电路'], area: ["新材料", "集成电路"],
time: '2025年12月18日' time: "2025年12月18日"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: '芯片四方联盟: 发布新版管制清单', title: "芯片四方联盟: 发布新版管制清单",
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...', content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ['新材料', '集成电路'], area: ["新材料", "集成电路"],
time: '2025年12月18日' time: "2025年12月18日"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: '芯片四方联盟: 发布新版管制清单', title: "芯片四方联盟: 发布新版管制清单",
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...', content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ['新材料', '集成电路'], area: ["新材料", "集成电路"],
time: '2025年12月18日' time: "2025年12月18日"
} }
]) ]);
const warningList = ref([ const warningList = ref([
{ {
countries: [ countries: [
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: '美国' name: "美国"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: '美国' name: "美国"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: '美国' name: "美国"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: '美国' name: "美国"
} }
], ],
area: [ area: [
{ {
type: '人工智能', type: "人工智能",
content: '推出“数字基础设施增长计划框架”（DiGi Framework）', content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
time: '2024年11月21日' time: "2024年11月21日"
}, },
{ {
type: '人工智能', type: "人工智能",
content: '推出“数字基础设施增长计划框架”（DiGi Framework）', content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
time: '2024年11月21日' time: "2024年11月21日"
}, },
{ {
type: '人工智能', type: "人工智能",
content: '推出“数字基础设施增长计划框架”（DiGi Framework）', content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
time: '2024年11月21日' time: "2024年11月21日"
} }
], ],
num: 3 num: 3
}, },
{ {
countries: [ countries: [
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: '美国' name: "美国"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: '美国' name: "美国"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: '美国' name: "美国"
}, },
{ {
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png', img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: '美国' name: "美国"
} }
], ],
area: [ area: [
{ {
type: '人工智能', type: "人工智能",
content: '推出“数字基础设施增长计划框架”（DiGi Framework）', content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
time: '2024年11月21日' time: "2024年11月21日"
} }
], ],
num: 1 num: 1
} }
]) ]);
const getContent = (countries) => { const getContent = countries => {
if (countries) { if (countries) {
let result = '' // 美国 / 日本 / 韩国 / 印度 let result = ""; // 美国 / 日本 / 韩国 / 印度
if (countries.length > 1) { if (countries.length > 1) {
for (let i = 0; i < countries.length; i++) { for (let i = 0; i < countries.length; i++) {
result += countries[i].name result += countries[i].name;
if (i !== countries.length - 1) { if (i !== countries.length - 1) {
result += ' / ' result += " / ";
} }
} }
} else if (countries.length === 1) { } else if (countries.length === 1) {
result += countries[0].name result += countries[0].name;
} }
return result
}
} return result;
}
};
const leftChartRef = ref(null); const leftChartRef = ref(null);
let leftChart; let leftChart;
...@@ -703,378 +693,397 @@ let rightChart; ...@@ -703,378 +693,397 @@ let rightChart;
// 联盟领域分布 // 联盟领域分布
const initLeftDonut = async () => { const initLeftDonut = async () => {
if (!leftChartRef.value) return; if (!leftChartRef.value) return;
if (leftChart) leftChart.dispose(); if (leftChart) leftChart.dispose();
leftChart = echarts.init(leftChartRef.value); leftChart = echarts.init(leftChartRef.value);
let data = [] let data = [];
try { try {
const res = await getIndustry(); const res = await getIndustry();
if (res && res.code === 200) { if (res && res.code === 200) {
for (let i = 0; i < res.data.length; i++) { for (let i = 0; i < res.data.length; i++) {
let item = { let item = {
name: '', name: "",
value: 0 value: 0
} };
item.name = res.data[i].industry item.name = res.data[i].industry;
item.value = res.data[i].amount item.value = res.data[i].amount;
item.itemStyle = { item.itemStyle = {
color: getColor(colors, item.name) color: getColor(colors, item.name)
} };
data.push(item) data.push(item);
} }
} }
} catch (error) { } catch (error) {
console.error("获取限制领域分布情况接口失败:", error); console.error("获取限制领域分布情况接口失败:", error);
} }
// console.log('----data', data) // console.log('----data', data)
// const data = [ // const data = [
// { name: "集成电路", value: 50 }, // { name: "集成电路", value: 50 },
// { name: "人工智能", value: 46 }, // { name: "人工智能", value: 46 },
// { name: "通信网络", value: 40 }, // { name: "通信网络", value: 40 },
// { name: "能源", value: 32 }, // { name: "能源", value: 32 },
// { name: "先进制造", value: 31 }, // { name: "先进制造", value: 31 },
// { name: "生物科技", value: 31 }, // { name: "生物科技", value: 31 },
// { name: "航空航天", value: 30 }, // { name: "航空航天", value: 30 },
// { name: "新材料", value: 24 } // { name: "新材料", value: 24 }
// ]; // ];
const option = { const option = {
tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` }, tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
series: [{ series: [
type: "pie", {
radius: [96, 120], type: "pie",
center: ["50%", "50%"], radius: [96, 120],
avoidLabelOverlap: true, center: ["50%", "50%"],
itemStyle: { borderWidth: 0 }, avoidLabelOverlap: true,
label: { itemStyle: { borderWidth: 0 },
show: true, label: {
position: "outside", show: true,
alignTo: 'edge', position: "outside",
formatter: ({ name, value, percent }) => `{name|${name}} {value|${value}项} {percent|${percent}%}`, alignTo: "edge",
minMargin: 5, formatter: ({ name, value, percent }) => `{name|${name}} {value|${value}项} {percent|${percent}%}`,
edgeDistance: 10, minMargin: 5,
lineHeight: 15, edgeDistance: 10,
rich: { lineHeight: 15,
name: { fontSize: 16, fontFamily: "Microsoft YaHei", fontWeight: 700, lineHeight: 24, color: "rgb(59, 65, 75)" }, rich: {
value: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" }, name: {
percent: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" } fontSize: 16,
} fontFamily: "Microsoft YaHei",
}, fontWeight: 700,
labelLine: { lineHeight: 24,
show: true, color: "rgb(59, 65, 75)"
length: 30, },
length2: 0, value: {
maxSurfaceAngle: 80 fontSize: 14,
}, fontFamily: "Microsoft YaHei",
labelLayout: function (params) { fontWeight: 400,
const isLeft = params.labelRect.x < leftChart.getWidth() / 2; lineHeight: 22,
const points = params.labelLinePoints; color: "rgb(95, 101, 108)"
// 导航线终点在标签下方 },
const lineY = params.labelRect.y + params.labelRect.height; percent: {
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width; fontSize: 14,
points[2][1] = lineY; fontFamily: "Microsoft YaHei",
points[1][1] = lineY; fontWeight: 400,
return { lineHeight: 22,
labelLinePoints: points color: "rgb(95, 101, 108)"
}; }
}, }
data: data.map((d, i) => ({ },
...d, labelLine: {
labelLine: { lineStyle: { color: getColor(colors, d.name), width: 1 } } show: true,
})) length: 30,
}] length2: 0,
}; maxSurfaceAngle: 80
leftChart.setOption(option); },
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 () => { const initRightDonut = async () => {
if (!rightChartRef.value) return; if (!rightChartRef.value) return;
if (rightChart) rightChart.dispose(); if (rightChart) rightChart.dispose();
rightChart = echarts.init(rightChartRef.value); rightChart = echarts.init(rightChartRef.value);
let data = [] let data = [];
let links = [] let links = [];
try { try {
const res = await getCountryRelation(); const res = await getCountryRelation();
if (res && res.code === 200) { if (res && res.code === 200) {
for (let i = 0; i < res.data.length; i++) { for (let i = 0; i < res.data.length; i++) {
let item = { let item = {
name: res.data[i].country, name: res.data[i].country,
x: Math.random() * 10, x: Math.random() * 10,
y: Math.random() * 10 y: Math.random() * 10
} };
let item1 = { let item1 = {
name: res.data[i].relationCountry, name: res.data[i].relationCountry,
x: Math.random() * 10, x: Math.random() * 10,
y: Math.random() * 10 y: Math.random() * 10
} };
// 先判断data中是否包含上述数据 // 先判断data中是否包含上述数据
let index = data.findIndex((ele) => ele.name === item.name) let index = data.findIndex(ele => ele.name === item.name);
let index1 = data.findIndex((ele) => ele.name === item1.name) let index1 = data.findIndex(ele => ele.name === item1.name);
// 不存在则向data中添加 // 不存在则向data中添加
if (index === -1) { if (index === -1) {
data.push(item) data.push(item);
} }
if (index1 === -1) { if (index1 === -1) {
data.push(item1) data.push(item1);
} }
let link = { let link = {
source: item.name, source: item.name,
target: item1.name, target: item1.name,
symbolSize: [5, 20], symbolSize: [5, 20],
label: { label: {
show: false show: false
}, },
lineStyle: { lineStyle: {
width: res.data[i].amount, width: res.data[i].amount,
curveness: 0.2 curveness: 0.2
} }
} };
links.push(link) links.push(link);
} }
} }
} catch (error) { } catch (error) {
console.error("获取限制领域分布情况接口失败:", error); console.error("获取限制领域分布情况接口失败:", error);
} }
// console.log('----data', data) // console.log('----data', data)
// const data = [ // const data = [
// { // {
// name: 'Node 1', // name: 'Node 1',
// x: 300, // x: 300,
// y: 300 // y: 300
// }, // },
// { // {
// name: 'Node 2', // name: 'Node 2',
// x: 800, // x: 800,
// y: 300 // y: 300
// }, // },
// { // {
// name: 'Node 3', // name: 'Node 3',
// x: 550, // x: 550,
// y: 100 // y: 100
// }, // },
// { // {
// name: 'Node 4', // name: 'Node 4',
// x: 550, // x: 550,
// y: 500 // y: 500
// } // }
// ] // ]
// const links = [ // const links = [
// { // {
// source: 0, // source: 0,
// target: 1, // target: 1,
// symbolSize: [5, 20], // symbolSize: [5, 20],
// label: { // label: {
// show: false // show: false
// }, // },
// lineStyle: { // lineStyle: {
// width: 5, // width: 5,
// curveness: 0.2 // curveness: 0.2
// } // }
// }, // },
// { // {
// source: 'Node 2', // source: 'Node 2',
// target: 'Node 1', // target: 'Node 1',
// label: { // label: {
// show: false // show: false
// }, // },
// lineStyle: { // lineStyle: {
// curveness: 0.2 // curveness: 0.2
// } // }
// }, // },
// { // {
// source: 'Node 1', // source: 'Node 1',
// target: 'Node 3' // target: 'Node 3'
// }, // },
// { // {
// source: 'Node 2', // source: 'Node 2',
// target: 'Node 3' // target: 'Node 3'
// }, // },
// { // {
// source: 'Node 2', // source: 'Node 2',
// target: 'Node 4' // target: 'Node 4'
// }, // },
// { // {
// source: 'Node 1', // source: 'Node 1',
// target: 'Node 4' // target: 'Node 4'
// } // }
// ] // ]
let option = { let option = {
title: { title: {
// text: 'Basic Graph' // text: 'Basic Graph'
}, },
tooltip: {}, tooltip: {},
animationDurationUpdate: 1500, animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut', animationEasingUpdate: "quinticInOut",
dataZoom: [ dataZoom: [
{ {
type: 'slider', type: "slider",
start: 10, start: 10,
end: 10 end: 10
} }
], ],
series: [ series: [
{ {
type: 'graph', type: "graph",
layout: 'none', layout: "none",
symbolSize: 50, symbolSize: 50,
roam: true, roam: true,
label: { label: {
show: true show: true
}, },
edgeSymbol: ['circle', ''], edgeSymbol: ["circle", ""],
edgeSymbolSize: [4, 10], edgeSymbolSize: [4, 10],
edgeLabel: { edgeLabel: {
fontSize: 20 fontSize: 20
}, },
data: data, data: data,
// links: [], // links: [],
links: links, links: links,
lineStyle: { lineStyle: {
opacity: 0.9, opacity: 0.9,
width: 2, width: 2,
curveness: 0 curveness: 0
} }
} }
] ]
}; };
rightChart.setOption(option); rightChart.setOption(option);
}; };
const getColor = (colors, name) => { const getColor = (colors, name) => {
const index = colors.findIndex((i) => i.name === name) const index = colors.findIndex(i => i.name === name);
if (index !== -1) { if (index !== -1) {
return colors[index].value return colors[index].value;
} else { } else {
return "rgba(105, 177, 255, 1)" return "rgba(105, 177, 255, 1)";
} }
} };
const colors = [ const colors = [
{ {
name: '集成电路', name: "集成电路",
value: "rgba(105, 177, 255, 1)", value: "rgba(105, 177, 255, 1)"
}, },
{ {
name: '新一代通信网络', name: "新一代通信网络",
value: "rgba(135, 232, 222, 1)", value: "rgba(135, 232, 222, 1)"
}, },
{ {
name: '人工智能', name: "人工智能",
value: "rgba(255, 192, 105, 1)", value: "rgba(255, 192, 105, 1)"
}, },
{ {
name: '能源', name: "能源",
value: "rgba(89, 126, 247, 1)", value: "rgba(89, 126, 247, 1)"
}, },
{ {
name: '先进制造', name: "先进制造",
value: "rgba(214, 228, 255, 1)", value: "rgba(214, 228, 255, 1)"
}, },
{ {
name: '生物科技', name: "生物科技",
value: "rgba(255, 120, 117, 1)", value: "rgba(255, 120, 117, 1)"
}, },
{ {
name: '航空航天', name: "航空航天",
value: "rgba(179, 127, 235, 1)", value: "rgba(179, 127, 235, 1)"
}, },
{ {
name: '新材料', name: "新材料",
value: "rgba(255, 163, 158, 1)", value: "rgba(255, 163, 158, 1)"
} }
]; ];
// 获取联盟列表 // 获取联盟列表
const getUnionList = async () => { const getUnionList = async () => {
try { try {
const res = await getAllUnionList(); const res = await getAllUnionList();
if (res && res.code === 200) { if (res && res.code === 200) {
console.log('----getUnionList', res.data) console.log("----getUnionList", res.data);
carouselList.value = res.data carouselList.value = res.data;
} }
} catch (error) { } catch (error) {
console.error("获取联盟列表接口失败:", error); console.error("获取联盟列表接口失败:", error);
} }
} };
// 获取联盟动态 // 获取联盟动态
const getDynamicList = async () => { const getDynamicList = async () => {
try { try {
const res = await getDynamic(); const res = await getDynamic();
if (res && res.code === 200) { if (res && res.code === 200) {
console.log('----getDynamicList', res.data) console.log("----getDynamicList", res.data);
newsList.value = res.data newsList.value = res.data;
} }
} catch (error) { } catch (error) {
console.error("获取联盟动态接口失败:", error); console.error("获取联盟动态接口失败:", error);
} }
} };
// 获取联盟预警 // 获取联盟预警
const getPredictionList = async () => { const getPredictionList = async () => {
try { try {
const res = await getPrediction(); const res = await getPrediction();
if (res && res.code === 200) { if (res && res.code === 200) {
console.log('----getPredictionList', res.data) console.log("----getPredictionList", res.data);
warningList.value = res.data warningList.value = res.data;
} }
} catch (error) { } catch (error) {
console.error("获取联盟动态接口失败:", error); console.error("获取联盟动态接口失败:", error);
} }
} };
// 获取排华联盟数量 // 获取排华联盟数量
const getUnionCountList = async () => { const getUnionCountList = async () => {
try { try {
const res = await getUnionCount(); const res = await getUnionCount();
if (res && res.code === 200) { if (res && res.code === 200) {
console.log('----getUnionCountList', res.data) console.log("----getUnionCountList", res.data);
// 处理一下数据 // 处理一下数据
antiChinaNum.value = res.data.map(item => { antiChinaNum.value = res.data.map(item => {
item.value = item.count item.value = item.count;
item.zhName = item.name item.zhName = item.name;
item.name = item.ename item.name = item.ename;
return item return item;
}) });
} }
} catch (error) { } catch (error) {
console.error("获取联盟动态接口失败:", error); console.error("获取联盟动态接口失败:", error);
} }
} };
const getTime = (time) => { const getTime = time => {
if (time) { if (time) {
const array = time.split('-') const array = time.split("-");
return `${array[0]}年${array[1]}月${array[2]}日` return `${array[0]}年${array[1]}月${array[2]}日`;
} }
} };
const getName = (item) => { const getName = item => {
if (item) { if (item) {
return item[0].industryName return item[0].industryName;
} else { } else {
return '' return "";
} }
} };
onMounted(async () => { onMounted(async () => {
await getUnionList() await getUnionList();
await getDynamicList() await getDynamicList();
await getPredictionList() await getPredictionList();
await getUnionCountList() await getUnionCountList();
fetchGeoJSON(); fetchGeoJSON();
initLeftDonut() initLeftDonut();
initRightDonut() initRightDonut();
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -1215,8 +1224,7 @@ onMounted(async () => { ...@@ -1215,8 +1224,7 @@ onMounted(async () => {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
width: calc(100% - 22px); width: calc(100% - 22px);
height: 24px; height: 25px;
.type-item { .type-item {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
...@@ -1234,11 +1242,13 @@ onMounted(async () => { ...@@ -1234,11 +1242,13 @@ onMounted(async () => {
width: 24px; width: 24px;
height: 48px; height: 48px;
margin-right: 8px; margin-right: 8px;
cursor: pointer;
} }
.right-btn { .right-btn {
width: 24px; width: 24px;
height: 48px; height: 48px;
margin-left: 8px; margin-left: 8px;
cursor: pointer;
} }
} }
......
src/views/ruleRestriction/detail/index.vue
浏览文件 @ d289a480
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
</div> </div>
</div> </div>
<div class="title"> <div class="title">
<span class="title-one">当前规则限制数据已关联至{{ overviewInfo.Relation[0].TYPE }}：</span> <span class="title-one">当前规则限制数据已关联至{{ getRelation?.TYPE }}：</span>
<span class="title-two">{{ overviewInfo.Relation[0].RELATIONNAME }} &nbsp;{{ overviewInfo.Relation[0].RELATIONDATE }}</span> <span class="title-two">{{ getRelation?.RELATIONNAME }} &nbsp;{{ getRelation?.RELATIONDATE }}</span>
<img src="./assets/right.png" alt /> <img src="./assets/right.png" alt />
</div> </div>
<div class="main"> <div class="main">
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, computed } from "vue";
import ningbo from "./assets/ningbo.png"; import ningbo from "./assets/ningbo.png";
import deguo from "./assets/deguo.png"; import deguo from "./assets/deguo.png";
import cycle from "./assets/cycle.png"; import cycle from "./assets/cycle.png";
...@@ -309,6 +309,10 @@ const getTime = (time) => { ...@@ -309,6 +309,10 @@ const getTime = (time) => {
return `${array[0]}年${array[1]}月${array[2]}日` return `${array[0]}年${array[1]}月${array[2]}日`
} }
} }
const getRelation = computed(() => {
return overviewInfo?.Relation ? overviewInfo?.Relation[0] : {}
})
onMounted(() => { onMounted(() => {
getUrlParams() getUrlParams()
getSanctionOverviewInfo() getSanctionOverviewInfo()
...@@ -547,7 +551,7 @@ onMounted(() => { ...@@ -547,7 +551,7 @@ onMounted(() => {
.tit3 { .tit3 {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
margin-right: 8px; margin-right: 8px;
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
border: 1px solid rgba(255, 163, 158, 1); border: 1px solid rgba(255, 163, 158, 1);
color: rgba(245, 34, 45, 1); color: rgba(245, 34, 45, 1);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论