Skip to content

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

update

上级 5e3760b4
显示空白字符变更
内嵌 并排
正在显示 包含 1302 行增加 和 12 行删除
src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue
浏览文件 @ 4fe8aaf0
<!--科技要闻-->
<template>
<div class="content-wrapper">
全要素
<div class="header">
<div class="header-arrow-left">
<img src="../../assets/left-btn.png" alt="" />
</div>
<div class="header-arrow-right">
<img src="../../assets/right-btn.png" alt="" />
</div>
<div
class="header-item"
:class="{
headerItem1: index === 0,
headerItem2: index === 1,
headerItem3: index === 2,
headerItem4: index === 3,
headerItem5: index === 4
}"
v-for="(item, index) in headerList"
:key="index"
>
<div class="name">{{ item.name }}</div>
<div class="num">{{ item.value }}</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="box box1">
<div class="box1-header">
<div class="icon">
<img src="./assets/images/box-header-icon1.png" alt="" />
</div>
<div class="title">{{ "最新动态" }}</div>
</div>
<div class="box1-main">
<div class="box1-item" v-for="(item, index) in box1DataList" :key="index">
<div class="box1-item-left">{{ index + 1 }}</div>
<div class="box1-item-right">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
<div class="tag-box">
<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">{{ val }}</div>
</div>
<div class="box1-item-right-footer">
<div class="time">{{ item.time }}</div>
<div class="area-box">
<div class="area" v-for="(vall, idxx) in item.areaList" :key="idxx">{{ vall.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box-header-icon2.png" alt="" />
</div>
<div class="title">{{ "美对我要素打压情况" }}</div>
</div>
<div class="box2-main">
<div class="inner-box1">
<div class="left">
<div class="left-main">
<div
class="left-item"
:class="{ leftItemActive: box2LeftActiveIndex === index }"
v-for="(item, index) in box2DataList"
:key="index"
@click="handleClickBox2Item(index)"
>
<div class="id">{{ index + 1 }}</div>
<div class="text">{{ item.title }}</div>
</div>
</div>
<div class="left-footer">
<el-pagination
background
layout="prev, pager, next"
:total="box2Total"
:page-size="box2PageSize"
v-model:current-page="box2CurrentPage"
@current-change="handleGetBox2DataList"
/>
</div>
</div>
<div class="right">
<div class="title">{{ box2DataList[box2LeftActiveIndex].title }}</div>
<div class="tag-box">
<div
class="tag"
v-for="(item, index) in box2DataList[box2LeftActiveIndex].tagList"
:key="index"
>
{{ item }}
</div>
</div>
<div class="content">{{ box2DataList[box2LeftActiveIndex].content }}</div>
<div class="area-box">
<div
class="area"
v-for="(item, index) in box2DataList[box2LeftActiveIndex].areaList"
:key="index"
>
{{ item.name }}
</div>
</div>
<div class="footer">
{{
`${box2DataList[box2LeftActiveIndex].time} · ${box2DataList[box2LeftActiveIndex].org} · ${box2DataList[box2LeftActiveIndex].type}`
}}
</div>
</div>
</div>
<div class="inner-box2" id="box2Chart"></div>
</div>
</div>
<div class="box box3">
<div class="box3-header">
<div class="icon">
<img src="./assets/images/box-header-icon2.png" alt="" />
</div>
<div class="title">{{ "美自身要素发展情况" }}</div>
</div>
<div class="box3-main">
<div class="inner-box1">
<div class="left">
<div class="left-main">
<div
class="left-item"
:class="{ leftItemActive: box3LeftActiveIndex === index }"
v-for="(item, index) in box3DataList"
:key="index"
@click="handleClickBox3Item(index)"
>
<div class="id">{{ index + 1 }}</div>
<div class="text">{{ item.title }}</div>
</div>
</div>
<div class="left-footer">
<el-pagination
background
layout="prev, pager, next"
:total="box3Total"
:page-size="box3PageSize"
v-model:current-page="box3CurrentPage"
@current-change="handleGetBox3DataList"
/>
</div>
</div>
<div class="right">
<div class="title">{{ box3DataList[box3LeftActiveIndex].title }}</div>
<div class="tag-box">
<div
class="tag"
v-for="(item, index) in box3DataList[box3LeftActiveIndex].tagList"
:key="index"
>
{{ item }}
</div>
</div>
<div class="content">{{ box3DataList[box3LeftActiveIndex].content }}</div>
<div class="area-box">
<div
class="area"
v-for="(item, index) in box3DataList[box3LeftActiveIndex].areaList"
:key="index"
>
{{ item.name }}
</div>
</div>
<div class="footer">
{{
`${box3DataList[box3LeftActiveIndex].time} · ${box3DataList[box3LeftActiveIndex].org} · ${box3DataList[box3LeftActiveIndex].type}`
}}
</div>
</div>
</div>
<div class="inner-box2" id="box3Chart"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./uitls/worldCloudChart";
const headerList = ref([
{
name: "科研仪器",
value: 132
},
{
name: "科研机构",
value: 104
},
{
name: "科研人才",
value: 177
},
{
name: "科研数据",
value: 60
},
{
name: "科研经费",
value: 45
}
]);
const box1DataList = ref([
{
title: '更新"中国涉军企业清单"(NS-CMIC List)',
content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
tagList: ["科研机构", "科研经费"],
time: "2025年12月18日",
areaList: [
{
name: "量子科技"
},
{
name: "量子科技"
}
]
},
{
title: '更新"中国涉军企业清单"(NS-CMIC List)',
content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
tagList: ["科研机构", "科研经费"],
time: "2025年12月18日",
areaList: [
{
name: "量子科技"
},
{
name: "量子科技"
}
]
},
{
title: '更新"中国涉军企业清单"(NS-CMIC List)',
content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
tagList: ["科研机构", "科研经费"],
time: "2025年12月18日",
areaList: [
{
name: "量子科技"
},
{
name: "量子科技"
}
]
},
{
title: '更新"中国涉军企业清单"(NS-CMIC List)',
content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
tagList: ["科研机构", "科研经费"],
time: "2025年12月18日",
areaList: [
{
name: "量子科技"
},
{
name: "量子科技"
}
]
}
]);
const box2DataList = ref([
{
title: "防止受关注国家访问美国敏感数据的规定",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
},
{
title: "防止受关注国家访问美国敏感数据的规定2",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
},
{
title: "防止受关注国家访问美国敏感数据的规定3",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
},
{
title: "防止受关注国家访问美国敏感数据的规定4",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
},
{
title: "防止受关注国家访问美国敏感数据的规定5",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
}
]);
const box2LeftActiveIndex = ref(0);
const handleClickBox2Item = index => {
box2LeftActiveIndex.value = index;
};
const box2Total = ref(25);
const box2CurrentPage = ref(1);
const box2PageSize = ref(5);
const handleGetBox2DataList = async () => {};
const box2ChartData = ref([
{
name: "限制中国获取能源技术",
value: 35
},
{
name: "加强美国在核能领域得到领导力",
value: 12
},
{
name: "关注核聚变能源研究",
value: 15
},
{
name: "发展风能",
value: 21
},
{
name: "实施能源税收延期",
value: 18
},
{
name: "限制采购中国产电池",
value: 5
},
{
name: "评估中美现代化技术",
value: 11
},
{
name: "应对中国制造2025战略",
value: 9
},
{
name: "抵制外国人才争夺",
value: 16
}
]);
const box3DataList = ref([
{
title: "防止受关注国家访问美国敏感数据的规定",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
},
{
title: "防止受关注国家访问美国敏感数据的规定2",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
},
{
title: "防止受关注国家访问美国敏感数据的规定3",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
},
{
title: "防止受关注国家访问美国敏感数据的规定4",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
},
{
title: "防止受关注国家访问美国敏感数据的规定5",
tagList: ["科研机构", "科研经费"],
content:
'美国司法部发布最终规则，明确禁止将"美国人"的敏感个人数据(包括基因组、生物识别、健康、地理位置及财务数据)大规模交易给中国等"受关注国家"的实体与个人。此规定旨在防止...',
areaList: [
{
name: "人工智能"
},
{
name: "生物科技"
}
],
time: "2025年12月18日",
org: "司法部",
type: "行政令"
}
]);
const box3LeftActiveIndex = ref(0);
const handleClickBox3Item = index => {
box3LeftActiveIndex.value = index;
};
const box3Total = ref(25);
const box3CurrentPage = ref(1);
const box3PageSize = ref(5);
const handleGetBox3DataList = async () => {};
const box3ChartData = ref([
{
name: "限制中国获取能源技术",
value: 35
},
{
name: "加强美国在核能领域得到领导力",
value: 12
},
{
name: "关注核聚变能源研究",
value: 15
},
{
name: "发展风能",
value: 21
},
{
name: "实施能源税收延期",
value: 18
},
{
name: "限制采购中国产电池",
value: 5
},
{
name: "评估中美现代化技术",
value: 11
},
{
name: "应对中国制造2025战略",
value: 9
},
{
name: "抵制外国人才争夺",
value: 16
}
]);
onMounted(() => {
let box2Chart = getWordCloudChart(box2ChartData.value);
setChart(box2Chart, "box2Chart");
let box3Chart = getWordCloudChart(box3ChartData.value);
setChart(box3Chart, "box3Chart");
});
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1666px;
height: 2132px;
// background: orange;
.header {
width: 1664px;
height: 176px;
display: flex;
justify-content: center;
gap: 16px;
position: relative;
.header-arrow-left {
position: absolute;
left: 0;
top: 64px;
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.header-arrow-right {
position: absolute;
right: 0;
top: 64px;
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.header-item {
width: 307px;
height: 178px;
border-radius: 10px;
.name {
margin-top: 53px;
margin-left: 112px;
width: 174px;
height: 39px;
color: rgba(255, 255, 255, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 30px;
font-weight: 400;
line-height: 39px;
letter-spacing: 0px;
text-align: left;
}
.num {
margin-top: -8px;
margin-left: 112px;
width: 174px;
height: 39px;
color: rgba(255, 255, 255, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 30px;
font-weight: 400;
line-height: 39px;
letter-spacing: 0px;
text-align: left;
}
}
.headerItem1 {
background: url("./assets/images/bg1.png");
}
.headerItem2 {
background: url("./assets/images/bg2.png");
}
.headerItem3 {
background: url("./assets/images/bg3.png");
}
.headerItem4 {
background: url("./assets/images/bg4.png");
}
.headerItem5 {
background: url("./assets/images/bg5.png");
}
}
.main {
width: 1598px;
height: 884px;
margin: 0 auto;
margin-top: 14px;
display: flex;
justify-content: space-between;
.box {
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);
}
.left {
width: 472px;
.box1 {
width: 472px;
height: 884px;
overflow: hidden;
.box1-header {
height: 48px;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 1);
background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
.icon {
width: 22px;
height: 18px;
margin-top: 15px;
margin-left: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 89px;
height: 31px;
margin-top: 8px;
margin-left: 11px;
color: var(--color-main-active);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
}
}
.box1-main {
height: 836px;
overflow: hidden;
overflow-y: auto;
background: rgba(255, 255, 255, 0.65);
.box1-item {
width: 430px;
padding: 12px 0;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
margin: 0 auto;
display: flex;
.box1-item-left {
width: 30px;
height: 30px;
border-radius: 50px;
background: rgba(246, 250, 255, 1);
line-height: 30px;
text-align: center;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
}
.box1-item-right {
width: 388px;
margin-left: 12px;
.title {
height: 30px;
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;
}
.content {
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;
}
.tag-box {
margin-top: 4px;
height: 28px;
display: flex;
gap: 8px;
.tag {
width: 80px;
height: 28px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
text-align: center;
line-height: 28px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
}
}
.box1-item-right-footer {
height: 30px;
margin-top: 4px;
display: flex;
justify-content: space-between;
align-items: center;
.time {
width: 124px;
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: left;
}
.area-box {
height: 24px;
display: flex;
gap: 8px;
justify-content: flex-end;
.area {
height: 24px;
padding: 0 8px;
line-height: 24px;
text-align: center;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
}
}
}
}
}
}
}
.right {
width: 1110px;
.box2 {
width: 1110px;
height: 434px;
.box2-header {
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 1);
background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
display: flex;
.icon {
width: 17px;
height: 16.5px;
margin-left: 19px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-top: 8px;
margin-left: 13px;
width: 199px;
height: 31px;
color: var(--color-main-active);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
}
}
.box2-main {
height: 386px;
background: rgba(255, 255, 255, 0.65);
display: flex;
justify-content: center;
gap: 16px;
.inner-box1 {
width: 640px;
height: 368px;
overflow: hidden;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
display: flex;
.left {
width: 320px;
border-right: 1px solid rgba(234, 236, 238, 1);
.left-main {
margin-top: 9px;
height: 270px;
.left-item {
height: 54px;
border: 1px solid transparent;
display: flex;
align-items: center;
&:hover {
background: rgba(246, 250, 255, 1);
}
cursor: pointer;
.id {
margin-left: 16px;
width: 24px;
height: 24px;
border-radius: 50px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: center;
}
.text {
width: 260px;
height: 30px;
margin-left: 12px;
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;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.leftItemActive {
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
}
}
.left-footer {
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
}
.right {
width: 320px;
.title {
width: 283px;
min-height: 24px;
max-height: 48px;
margin: 16px auto 18px;
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;
}
.tag-box {
width: 283px;
margin: 0 auto;
height: 28px;
display: flex;
gap: 8px;
.tag {
height: 28px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
line-height: 28px;
text-align: center;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
}
}
.content {
margin: 0 auto;
margin-top: 8px;
width: 283px;
height: 150px;
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: justify;
}
.area-box {
width: 283px;
margin: 0 auto;
margin-top: 28px;
height: 24px;
display: flex;
justify-content: flex-start;
gap: 8px;
.area {
height: 24px;
padding: 0 8px;
line-height: 24px;
text-align: center;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
}
.footer {
width: 283px;
margin: 0 auto;
margin-top: 8px;
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: left;
}
}
}
.inner-box2 {
width: 412px;
height: 368px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
}
}
}
.box3 {
margin-top: 16px;
width: 1110px;
height: 434px;
.box3-header {
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 1);
background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
display: flex;
.icon {
width: 17px;
height: 16.5px;
margin-left: 19px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-top: 8px;
margin-left: 13px;
width: 199px;
height: 31px;
color: var(--color-main-active);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: left;
}
}
.box3-main {
height: 386px;
background: rgba(255, 255, 255, 0.65);
display: flex;
justify-content: center;
gap: 16px;
.inner-box1 {
width: 640px;
height: 368px;
overflow: hidden;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
display: flex;
.left {
width: 320px;
border-right: 1px solid rgba(234, 236, 238, 1);
.left-main {
margin-top: 9px;
height: 270px;
.left-item {
height: 54px;
border: 1px solid transparent;
display: flex;
align-items: center;
&:hover {
background: rgba(246, 250, 255, 1);
}
cursor: pointer;
.id {
margin-left: 16px;
width: 24px;
height: 24px;
border-radius: 50px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: center;
}
.text {
width: 260px;
height: 30px;
margin-left: 12px;
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;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.leftItemActive {
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
}
}
.left-footer {
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
}
.right {
width: 320px;
.title {
width: 283px;
min-height: 24px;
max-height: 48px;
margin: 16px auto 18px;
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;
}
.tag-box {
width: 283px;
margin: 0 auto;
height: 28px;
display: flex;
gap: 8px;
.tag {
height: 28px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
line-height: 28px;
text-align: center;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
}
}
.content {
margin: 0 auto;
margin-top: 8px;
width: 283px;
height: 150px;
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: justify;
}
.area-box {
width: 283px;
margin: 0 auto;
margin-top: 28px;
height: 24px;
display: flex;
justify-content: flex-start;
gap: 8px;
.area {
height: 24px;
padding: 0 8px;
line-height: 24px;
text-align: center;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
}
.footer {
width: 283px;
margin: 0 auto;
margin-top: 8px;
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: left;
}
}
}
.inner-box2 {
width: 412px;
height: 368px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
}
}
}
}
}
}
</style>
src/views/ZMOverView/components/fourSuppress/components/allElement/uitls/worldCloudChart.js 0 → 100644
浏览文件 @ 4fe8aaf0
const getWordCloudChart = (data) => {
const option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
series: [
{
type: "wordCloud",
width: '80%',
height: '80%',
shape: "rect", //
// 其他形状你可以使用形状路径
// 或者自定义路径
// shape: 'circle' // 圆形（默认）
// shape: 'rect' // 矩形
// shape: 'roundRect' // 圆角矩形
// shape: 'triangle' // 三角形
// shape: 'diamond' // 菱形
// shape: 'pentagon' // 五边形
// shape: 'star' // 星形
// shape: 'cardioid' // 心形
gridSize: 15, // 网格大小，影响词间距。
sizeRange: [10, 30], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 15,
drawOutOfBound: false, // 是否超出画布
// 字体
textStyle: {
// normal: {
// color: function () {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
// },
color: function () {
let colors = [
"rgba(189, 33, 33, 1)",
"rgba(232, 151, 21, 1)",
"rgba(220, 190, 68, 1)",
"rgba(96, 58, 186, 1)",
"rgba(32, 121, 69, 1)",
"rgba(22, 119, 255, 1)",
];
return colors[parseInt(Math.random() * colors.length)];
},
emphasis: {
shadowBlur: 5,
shadowColor: "#333",
},
},
// 设置词云数据
data: data,
},
],
}
return option
}
export default getWordCloudChart
\ No newline at end of file
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ 4fe8aaf0
......@@ -35,28 +35,25 @@ import AddDomain from "./components/addDomain/index.vue";
import AllUnion from "./components/allUnion/index.vue";
import AllElement from "./components/allElement/index.vue";
const navList = ref([
{ name: "全政府" },
{ name: "全领域" },
{ name: "全联盟" },
{ name: "全要素" }
]);
const navList = ref([{ name: "全政府" }, { name: "全领域" }, { name: "全联盟" }, { name: "全要素" }]);
const activeNav = ref("全政府");
const handleNavClick = (name) => {
const handleNavClick = name => {
activeNav.value = name;
};
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1601px;
// width: 1601px;
width: 1666px;
height: 2203px;
margin: 0 auto;
.main-nav {
width: 100%;
width: 1601px;
height: 55px;
margin: 0 auto;
padding: 4px 5px;
display: flex;
align-items: center;
......@@ -89,7 +86,7 @@ const handleNavClick = (name) => {
}
span {
font-family: 'YouSheBiaoTiHei';
font-family: "YouSheBiaoTiHei";
font-size: 24px;
font-weight: 400;
line-height: 31px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论