Skip to content

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

update

上级 5c8cf7a1
隐藏空白字符变更
内嵌 并排
正在显示 包含 1497 行增加 和 134 行删除
src/components/SnakeTimeline/index.vue 0 → 100644
浏览文件 @ 4baedea7
<template>
<div class="snake-timeline-container">
<!-- Left Navigation Button -->
<div class="nav-btn left" @click="scrollLeft" :class="{ disabled: isStart }">
<img src="@/assets/icons/card-btn-left.png" alt="Previous" />
</div>
<!-- Scrollable Content -->
<div class="timeline-wrapper" ref="scrollContainer" @scroll="checkScroll">
<div class="timeline-track">
<!-- Connecting Line -->
<div class="connecting-line"></div>
<!-- Cards -->
<div
v-for="(item, index) in timelineData"
:key="index"
class="timeline-card-item"
:class="{ 'item-top': index % 2 !== 0, 'item-bottom': index % 2 === 0 }"
>
<!-- Date Label -->
<div class="date-label">
<span class="year">{{ item.year }}</span>
<span class="month">{{ item.month }}</span>
</div>
<!-- Node/Dot -->
<div class="timeline-node"></div>
<!-- Card Content -->
<div class="card-content">
<div class="tags">
<span
v-for="(tag, tIndex) in item.tags"
:key="tIndex"
class="tag"
:class="getTagClass(tag)"
>
{{ tag }}
</span>
</div>
<h3 class="title" :title="item.title">{{ item.title }}</h3>
<p class="description">{{ item.description }}</p>
<div class="footer">
<span class="date">{{ item.fullDate }}</span>
<span class="separator">·</span>
<span class="source">{{ item.source }}</span>
<span class="separator">·</span>
<span class="category">{{ item.category }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right Navigation Button -->
<div class="nav-btn right" @click="scrollRight" :class="{ disabled: isEnd }">
<img src="@/assets/icons/card-btn-right.png" alt="Next" />
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const scrollContainer = ref(null);
const isStart = ref(true);
const isEnd = ref(false);
const timelineData = ref([
{
year: '2025年',
month: '5月',
tags: ['人工智能', '航空航天'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
},
{
year: '2025年',
month: '5月',
tags: ['人工智能'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
},
{
year: '2025年',
month: '5月',
tags: ['集成电路'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
},
{
year: '2025年',
month: '6月',
tags: ['新材料', '量子科技'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
},
{
year: '2025年',
month: '6月',
tags: ['人工智能', '航空航天'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
},
{
year: '2025年',
month: '7月',
tags: ['新材料', '能源'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
},
{
year: '2025年',
month: '7月',
tags: ['人工智能', '航空航天'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
},
{
year: '2025年',
month: '8月',
tags: ['能源'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
},
{
year: '2025年',
month: '8月',
tags: ['新材料', '量子科技'],
title: '《国家量子倡议再授权法案》发布',
description: '计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...',
fullDate: '11月15日',
source: '参议院',
category: '科技法案'
}
]);
const getTagClass = (tag) => {
// Simple logic to assign colors based on tag name or random
const map = {
'人工智能': 'tag-red',
'航空航天': 'tag-blue',
'集成电路': 'tag-blue-dark',
'新材料': 'tag-cyan',
'量子科技': 'tag-purple',
'能源': 'tag-green'
};
return map[tag] || 'tag-default';
};
const scrollLeft = () => {
if (scrollContainer.value) {
scrollContainer.value.scrollBy({ left: -400, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollContainer.value) {
scrollContainer.value.scrollBy({ left: 400, behavior: 'smooth' });
}
};
const checkScroll = () => {
if (!scrollContainer.value) return;
const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value;
isStart.value = scrollLeft <= 0;
isEnd.value = Math.ceil(scrollLeft + clientWidth) >= scrollWidth;
};
onMounted(() => {
checkScroll();
window.addEventListener('resize', checkScroll);
});
onUnmounted(() => {
window.removeEventListener('resize', checkScroll);
});
</script>
<style lang="scss" scoped>
.snake-timeline-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 20px 40px; /* Space for buttons */
box-sizing: border-box;
background-color: transparent;
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
width: 24px;
height: 48px;
&.left {
left: 0;
}
&.right {
right: 0;
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.timeline-wrapper {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
&::-webkit-scrollbar {
display: none;
}
.timeline-track {
display: flex;
position: relative;
padding: 20px 0;
min-width: max-content;
align-items: center; /* Center items vertically relative to the line */
height: 550px; /* Sufficient height for top and bottom cards */
}
}
.connecting-line {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 2px;
background-color: #A9C4DF;
z-index: 0;
transform: translateY(-50%);
}
.timeline-card-item {
position: relative;
flex: 0 0 320px;
margin-right: 40px;
display: flex;
flex-direction: column;
align-items: flex-start; /* Align content to the left or center */
justify-content: flex-start;
height: 100%;
&:last-child {
margin-right: 0;
}
/* Common Node Styles */
.timeline-node {
width: 12px;
height: 12px;
background-color: #2F88FF;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px #2F88FF;
position: absolute;
top: 50%;
left: 24px; /* Align with card content padding */
z-index: 1;
transform: translateY(-50%);
}
/* Date Label Styles */
.date-label {
background: #EAF4FF;
color: #2F88FF;
padding: 4px 12px;
border-radius: 8px;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.2;
position: absolute;
left: 0;
.year {
font-size: 14px;
}
.month {
font-size: 16px;
}
}
/* Card Content Styles */
.card-content {
background: #fff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #eee;
transition: transform 0.2s;
width: 100%;
position: absolute;
left: 0;
&:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
/* ... inner content styles remain same ... */
.tags {
display: flex;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
.tag {
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid currentColor;
&.tag-red { color: #FF4D4F; background: #FFF1F0; border-color: #FFA39E; }
&.tag-blue { color: #1890FF; background: #E6F7FF; border-color: #91D5FF; }
&.tag-blue-dark { color: #2F54EB; background: #F0F5FF; border-color: #ADC6FF; }
&.tag-cyan { color: #13C2C2; background: #E6FFFB; border-color: #87E8DE; }
&.tag-purple { color: #722ED1; background: #F9F0FF; border-color: #D3ADF7; }
&.tag-green { color: #52C41A; background: #F6FFED; border-color: #B7EB8F; }
&.tag-default { color: #666; background: #F5F5F5; border-color: #D9D9D9; }
}
}
.title {
font-size: 16px;
font-weight: bold;
color: #333;
margin: 0 0 8px 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.description {
font-size: 13px;
color: #666;
margin: 0 0 16px 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.footer {
display: flex;
align-items: center;
font-size: 12px;
color: #999;
.separator {
margin: 0 4px;
}
}
}
/* Bottom Alignment (Even) */
&.item-bottom {
.date-label {
top: 50%;
transform: translateY(-55px); /* Just above the line */
}
.card-content {
top: 50%;
margin-top: 20px; /* Below the line */
}
}
/* Top Alignment (Odd) */
&.item-top {
.date-label {
top: 50%;
transform: translateY(15px); /* Just below the line */
}
.card-content {
bottom: 50%;
margin-bottom: 20px; /* Above the line */
}
}
}
}
</style>
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ 4baedea7
......@@ -2,31 +2,30 @@
<template>
<div class="content-wrapper">
<div class="btn-box">
<div v-for="(value, index) in buttonsData" class="btn-item" :style="{ background: value.background }">
<!-- <div class="btn-left">
<img class="btn-left-icon" :src="`/public/icon/ZM/btn-icon2-${index}.png`"
style="width: 22px; height: 19px;" />
<div class="btn-left-text" >{{ value.text }}</div>
</div> -->
<div :style="{
height: '60px',
width: '60px',
backgroundImage: 'url(' + `/public/icon/ZM/btn-icon2-${index}.png` + ')',
backgroundSize: 'cover'
}">
{{ value.text }}
</div>
<div class="btn-right">
{{ value.count + "次" }}
<div class="btn-wrapper">
<div class="btn-box">
<div v-for="(value, index) in buttonsData" class="btn-item" :style="{ background: value.background }">
<div
:style="{
backgroundImage: 'url(' + `/public/icon/ZM/btn-icon2-${index}.png` + ')'
}"
class="btn-left-text"
>
{{ value.text }}
</div>
<div class="btn-right">
{{ value.count + "次" }}
</div>
</div>
</div>
<img :src="leftBtn" alt="" class="left-btn" />
<img :src="rightBtn" alt="" class="right-btn" />
</div>
<div class="main-charts">
<div class="charts-title">
<div class="title-left">
<img src="./icon/icon-1.png" alt="" />
<span>美对华制裁措施数量趋势</span>
<span>美对华领域打压遏制数量趋势</span>
</div>
<div class="title-right">
<el-select v-model="select1" placeholder="按月统计" class="custom-select">
......@@ -35,50 +34,394 @@
</div>
</div>
<div class="charts-content">
<div id="chartRef" style=" width: 1453px; height: 354px"></div>
<div id="chartRef" class="chart-container"></div>
</div>
</div>
<div>
<div style="width: 792px; height: 700px" class="main-charts">
<div class="charts-title" style="padding: 8px">
<div class="bottom-content">
<div class="news-section main-charts">
<div class="charts-title news-title">
<div class="title-left">
<img src="./icon/icon-1.png" alt="" />
<span>美对华制裁措施数量趋势</span>
<img src="./icon/icon-2.png" alt="" style="width: 22px; height: 18px" />
<span>美对华领域打压遏制最新动态</span>
</div>
</div>
<div v-for="value in newsList" class="news-item">
<div class="news-item-title">
<div style="width: 400px; display: flex; gap: 8px">
<div v-for="tag in value.tags" :key="tag" class="tag" :style="{
color: getTagColor(tag).textColor,
backgroundColor: getTagColor(tag).bgColor,
border: '1px solid ' + getTagColor(tag).textColor
}">
{{ tag }}
<div class="news-content">
<div v-for="value in newsList" class="news-item">
<div class="news-item-title">
<div class="tag-container">
<div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
{{ tag }}
</div>
</div>
</div>
<div class="date">
{{ value.date + " · " + value.type }}
<div class="date">
{{ value.date + " · " + value.type }}
</div>
</div>
<div class="content-title">
{{ value.title }}
</div>
<el-tooltip
effect="dark"
:content="value.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="content-text">
{{ value.content }}
</div>
</el-tooltip>
</div>
<div class="content-title">
{{ value.title }}
</div>
</div>
<div class="empty-section">
<div class="bottom-item">
<div class="bottom-item-title">
<img :src="icon3" alt="" />
<span>美对华领域打压遏制排行</span>
</div>
</div>
<div class="select-box">
<div class="rank-btns">
<div class="rank-btn" :class="{ active: rankType === 'institution' }" @click="rankType = 'institution'">
对我打压机构
</div>
<div class="rank-btn" :class="{ active: rankType === 'enterprise' }" @click="rankType = 'enterprise'">
受打压企业
</div>
<div class="rank-btn" :class="{ active: rankType === 'school' }" @click="rankType = 'school'">
受打压院校
</div>
</div>
<div class="content-text">
{{ value.content }}
<el-select v-model="selectedField" placeholder="全部领域" class="field-select">
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="main-box">
<div v-for="(item, index) in rankList" :key="index" class="rank-item">
<div class="rank-num" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
<img :src="defaultImg" alt="" class="rank-icon" />
<div class="rank-name">{{ item.name }}</div>
<div class="rank-progress-container">
<div class="rank-progress-bar" :style="{ width: getProgressWidth(item.count) }"></div>
</div>
<div class="rank-count">{{ item.count }}次</div>
</div>
</div>
</div>
<div style="width: 792px; height: 700px"></div>
</div>
<div class="line-time">
<div class="bottom-item">
<div class="bottom-item-title">
<img :src="icon4" alt="" />
<span>美对我领域打压遏制时间线</span>
</div>
<el-select v-model="selectedFieldTimeline" placeholder="全部领域" class="field-select">
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="line-main">
<div class="nav-btn left"><img :src="leftBtn" alt="" /></div>
<div class="svg-container">
<svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" width="100%" height="100%">
<defs>
<marker
id="arrow"
markerWidth="10"
markerHeight="10"
refX="8"
refY="3"
orient="auto"
markerUnits="strokeWidth"
>
<path d="M0,0 L0,6 L9,3 z" fill="#e8f2ff" />
</marker>
</defs>
<path :d="snakePath" fill="none" stroke="#e8f2ff" stroke-width="2" />
<g v-for="(label, index) in axisDates" :key="'date-' + index">
<foreignObject :x="label.x" :y="label.y" width="80" height="60" style="overflow: visible">
<div class="axis-date-label">
<div class="year">{{ label.year }}</div>
<div class="month">{{ label.month }}</div>
</div>
</foreignObject>
</g>
<g v-for="(node, index) in timelineNodes" :key="index">
<line :x1="node.x" :y1="node.y" :x2="node.x" :y2="node.y + 150" stroke="#1677ff" stroke-width="1" />
<circle :cx="node.x" :cy="node.y" r="4" fill="#fff" stroke="#1677ff" stroke-width="3" />
<foreignObject
:x="node.contentX"
:y="node.contentY"
:width="node.contentWidth"
:height="node.contentHeight"
style="overflow: visible"
>
<div class="timeline-content-item">
<div class="item-tags">
<span v-for="tag in node.tags" :key="tag" :class="getTagClass(tag)">{{ tag }}</span>
</div>
<div class="item-title">{{ node.title }}</div>
<el-tooltip
effect="dark"
:content="node.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="item-desc">{{ node.content }}</div>
</el-tooltip>
<div class="item-footer">{{ node.info }}</div>
</div>
</foreignObject>
</g>
</svg>
</div>
<div class="nav-btn right"><img :src="rightBtn" alt="" /></div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, computed, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getMultiLineChart from "./multiLineChart";
import leftBtn from "../../assets/left-btn.png";
import rightBtn from "../../assets/right-btn.png";
import icon3 from "./icon/icon-3.png";
import icon4 from "./icon/icon-4.png";
import defaultImg from "../../../../assets/images/default-icon2.png";
const select1 = ref("");
const rankType = ref("institution");
const selectedField = ref("");
const selectedFieldTimeline = ref("");
const timelineScrollX = ref(0);
const timelineContainerWidth = 1601;
const timelineList = ref([
{
date: "2025年 5月",
tags: ["人工智能", "航空航天"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
},
{
date: "2025年 6月",
tags: ["人工智能"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
},
{
date: "2025年 7月",
tags: ["集成电路"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
},
{
date: "2025年 8月",
tags: ["新材料", "量子科技"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
},
{
date: "2025年 9月",
tags: ["人工智能", "航空航天"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
},
{
date: "2025年 10月",
tags: ["新材料", "能源"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
},
{
date: "2025年 11月",
tags: ["人工智能", "航空航天"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
},
{
date: "2025年 12月",
tags: ["新材料", "能源"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
},
{
date: "2025年 12月",
tags: ["集成电路"],
title: "《国家量子倡议再授权法案》发布",
content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
info: "11月15日 · 参议院 · 科技法案"
}
]);
const maxPerRow = 3;
const nodeGapX = 450;
const rowHeight = 215;
const startX = 190;
const startY = 45;
const axisDates = computed(() => {
const dates = [];
if (timelineList.value.length > 0) {
dates.push({
year: timelineList.value[0].date.split(" ")[0],
month: timelineList.value[0].date.split(" ")[1],
x: startX - 140,
y: startY - 25
});
const lastNode = timelineNodes.value[timelineNodes.value.length - 1];
const isEvenRow = lastNode.row % 2 === 0;
const endX = isEvenRow ? lastNode.x + 400 : lastNode.x - 140;
dates.push({
year: timelineList.value[timelineList.value.length - 1].date.split(" ")[0],
month: timelineList.value[timelineList.value.length - 1].date.split(" ")[1],
x: endX,
y: lastNode.y - 25
});
}
return dates;
});
const timelineNodes = computed(() => {
return timelineList.value.map((item, index) => {
const row = Math.floor(index / maxPerRow);
const col = index % maxPerRow;
let x;
if (row % 2 === 0) {
x = startX + col * nodeGapX;
} else {
x = startX + (maxPerRow - 1 - col) * nodeGapX;
}
const y = startY + row * rowHeight;
const contentX = x + 20;
const contentY = y + 10;
return {
...item,
x,
y,
row,
col,
contentX,
contentY,
contentWidth: 320,
contentHeight: 140
};
});
});
const getColorName = tag => {
const tagColorMap = {
航空航天: "blue",
生物科技: "blue",
集成电路: "blue",
能源: "green",
新材料: "green",
人工智能: "red"
};
if (tagColorMap[tag]) return tagColorMap[tag];
const colors = ["blue", "green", "red", "orange", "purple", "cyan"];
let hash = 0;
for (let i = 0; i < tag.length; i++) {
hash = tag.charCodeAt(i) + ((hash << 5) - hash);
}
return colors[Math.abs(hash) % colors.length];
};
const getTagClass = tag => {
return "tag-item " + `tag-${getColorName(tag)}`;
};
const snakePath = computed(() => {
if (timelineNodes.value.length === 0) return "";
let path = `M ${startX - 100} ${startY}`;
path += ` L ${timelineNodes.value[0].x} ${timelineNodes.value[0].y}`;
for (let i = 0; i < timelineNodes.value.length - 1; i++) {
const curr = timelineNodes.value[i];
const next = timelineNodes.value[i + 1];
if (curr.row !== next.row) {
const radius = rowHeight / 2;
if (curr.row % 2 === 0) {
const turnX = curr.x + 400;
path += ` L ${turnX} ${curr.y}`;
path += ` A ${radius} ${radius} 0 0 1 ${turnX} ${next.y}`;
path += ` L ${next.x} ${next.y}`;
} else {
const turnX = curr.x - 100;
path += ` L ${turnX} ${curr.y}`;
path += ` A ${radius} ${radius} 0 0 0 ${turnX} ${next.y}`;
path += ` L ${next.x} ${next.y}`;
}
} else {
path += ` L ${next.x} ${next.y}`;
}
}
const last = timelineNodes.value[timelineNodes.value.length - 1];
if (last.row % 2 === 0) {
path += ` L ${last.x + 400} ${last.y}`;
} else {
path += ` L ${last.x - 100} ${last.y}`;
}
return path;
});
const svgWidth = computed(() => {
return timelineContainerWidth;
});
const svgHeight = computed(() => {
const rows = Math.ceil(timelineList.value.length / maxPerRow);
return startY + rows * rowHeight;
});
const scrollLeft = () => {
if (timelineScrollX.value < 0) {
timelineScrollX.value += nodeGapX;
}
};
const scrollRight = () => {
const maxScroll = -(timelineNodes.value.length * nodeGapX - timelineContainerWidth + startX + 100);
if (timelineScrollX.value > maxScroll) {
timelineScrollX.value -= nodeGapX;
}
};
const fieldOptions = ref([
{ label: "全部领域", value: "" },
{ label: "集成电路", value: "集成电路" },
{ label: "人工智能", value: "人工智能" },
{ label: "量子科技", value: "量子科技" }
]);
const buttonsData = [
{
text: "集成电路",
......@@ -149,28 +492,73 @@ const box5Data = ref({
data: [
{
name: "集成电路",
color: "rgba(9, 88, 217, 0.7)", // 定义颜色
value: [88, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30]
color: "#0052D9",
value: [87, 78, 74, 67, 60, 59, 63, 66, 63, 58, 56, 62]
},
{
name: "人工智能",
color: "rgba(51, 153, 255, 0.7)", // 定义颜色
value: [20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75]
name: "生物科技",
color: "#00A79D",
value: [13, 13, 8, 13, 20, 37, 34, 25, 22, 20, 27, 18]
},
{
name: "量子科技",
color: "#7B61FF",
value: [18, 16, 12, 16, 16, 26, 30, 29, 25, 25, 33, 25]
},
{
name: "新一代信息技术",
color: "rgba(255, 187, 51, 0.7)", // 定义颜色
value: [30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85]
color: "#FF9F1C",
value: [10, 22, 22, 34, 48, 51, 46, 55, 55, 60, 68, 70]
},
{
name: "量子科技",
color: "rgba(117, 73, 255, 0.7)", // 定义颜色
value: [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95]
name: "人工智能",
color: "#E34D59",
value: [25, 34, 39, 45, 53, 54, 50, 47, 50, 54, 56, 51]
},
{
name: "通信网络",
color: "#0052D9",
value: [22, 26, 31, 31, 38, 33, 26, 38, 36, 40, 45, 47]
},
{
name: "新能源",
color: "#2BA471",
value: [53, 44, 43, 41, 34, 29, 57, 44, 61, 67, 61, 61]
},
{
name: "先进制造",
color: "rgba(102, 102, 102, 0.7)", // 定义颜色
value: [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105]
color: "#363B42",
value: [70, 75, 78, 75, 75, 80, 73, 51, 71, 77, 80, 89]
},
{
name: "航空航天",
color: "#3762F0",
value: [18, 16, 12, 16, 16, 26, 30, 29, 25, 25, 33, 25]
},
{
name: "海洋",
color: "#76D1FF",
value: [13, 13, 8, 13, 20, 37, 34, 25, 22, 20, 27, 18]
},
{
name: "新材料",
color: "#FFD900",
value: [10, 22, 22, 34, 48, 51, 46, 55, 55, 60, 68, 70]
},
{
name: "深海",
color: "#002060",
value: [22, 26, 31, 31, 38, 33, 26, 38, 36, 40, 45, 47]
},
{
name: "极地",
color: "#A6A6A6",
value: [53, 44, 43, 41, 34, 29, 57, 44, 61, 67, 61, 61]
},
{
name: "核",
color: "#FFB3B3",
value: [25, 34, 39, 45, 53, 54, 50, 47, 50, 54, 56, 51]
}
]
});
......@@ -251,6 +639,24 @@ const getTagColor = tagName => {
return foundTag ? { textColor: foundTag.textColor, bgColor: foundTag.bgColor } : { textColor: "#000", bgColor: "#fff" };
};
const rankList = ref([
{ name: "美国商务部", count: 45 },
{ name: "美国财政部", count: 38 },
{ name: "美国白宫", count: 36 },
{ name: "美国国务院", count: 34 },
{ name: "美国战争部", count: 33 },
{ name: "联邦参议院", count: 31 },
{ name: "美国美国国土安全部", count: 28 },
{ name: "美国贸易代表办公室", count: 20 },
{ name: "联邦通信委员会", count: 16 },
{ name: "美国食品药品监督管理局", count: 12 }
]);
const maxCount = Math.max(...rankList.value.map(item => item.count));
const getProgressWidth = count => {
return (count / maxCount) * 100 + "%";
};
onMounted(() => {
let Chart = getMultiLineChart(box5Data.value);
setChart(Chart, "chartRef");
......@@ -263,10 +669,15 @@ onMounted(() => {
height: 2132px;
}
.btn-wrapper {
position: relative;
width: 1601px;
}
.btn-box {
margin-top: 16px;
width: 1601px;
height: auto;
width: 100%;
height: 176px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
......@@ -276,6 +687,28 @@ onMounted(() => {
padding: 0;
}
.left-btn {
width: 24px;
height: 48px;
position: absolute;
top: 50%;
left: -33px;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.right-btn {
width: 24px;
height: 48px;
position: absolute;
top: 50%;
right: -33px;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.btn-item {
/* 全领域-总统计 */
width: 307px;
......@@ -284,16 +717,35 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
align-items: center;
justify-content: space-between; // 调整为两端对齐
padding: 0 10px; // 添加内边距以便文本和图标有空间
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
justify-content: space-between;
padding: 0 16px;
.btn-left-text {
width: fit-content;
min-width: 60px;
height: 60px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 60px;
letter-spacing: 0px;
text-align: left;
color: rgba(255, 255, 255, 1);
//不换行
white-space: nowrap;
display: flex;
align-items: center;
font-style: italic;
}
.btn-right {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
font-style: italic;
}
}
.btn-left {
......@@ -306,13 +758,6 @@ onMounted(() => {
margin-right: 8px; // 图标和文本之间的间距
}
.btn-left-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 30px; // 根据图标大小调整这个值
}
.main-charts {
margin-top: 16px;
width: 1601px;
......@@ -322,7 +767,6 @@ onMounted(() => {
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
margin-bottom: 22px;
.charts-title {
width: 100%;
......@@ -413,6 +857,246 @@ onMounted(() => {
}
}
.bottom-content {
display: flex;
gap: 17px;
.news-section {
width: 792px;
height: 700px;
.news-title {
padding: 8px;
}
.tag-container {
display: flex;
align-items: center;
gap: 8px;
.tag-item {
padding: 2px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
border: 1px solid transparent;
&.tag-blue {
color: rgba(9, 88, 217, 1);
background: rgba(230, 244, 255, 1);
border-color: rgba(186, 224, 255, 1);
}
&.tag-green {
color: rgba(56, 158, 13, 1);
background: rgba(246, 255, 237, 1);
border-color: rgba(217, 247, 190, 1);
}
&.tag-red {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1);
}
&.tag-orange {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
border-color: rgba(255, 213, 145, 1);
}
&.tag-purple {
color: rgba(114, 46, 209, 1);
background: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1);
}
&.tag-cyan {
color: rgba(19, 194, 194, 1);
background: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1);
}
}
}
}
.empty-section {
width: 792px;
height: 700px;
margin-top: 16px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
.bottom-item {
width: 100%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 17px;
padding-right: 35px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
.bottom-item-title {
display: flex;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 14px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 24px;
color: rgb(5, 95, 194);
}
}
}
.select-box {
width: 691px;
height: 32px;
margin: 17px auto 36px auto;
display: flex;
justify-content: space-between;
align-items: center;
.rank-btns {
display: flex;
gap: 8px;
.rank-btn {
padding: 4px 12px;
border-radius: 4px;
border: 1px solid rgb(230, 231, 232);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgb(95, 101, 108);
cursor: pointer;
background-color: #fff;
&.active {
color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
background-color: rgba(231, 243, 255, 1);
}
}
}
.field-select {
width: 160px;
:deep(.el-input) {
.el-input__wrapper {
height: 32px;
padding: 0 12px;
box-sizing: border-box;
background-color: #fff;
border-radius: 4px;
.el-input__inner {
height: 32px;
line-height: 32px;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
&::placeholder {
color: rgb(95, 101, 108);
}
}
}
}
}
}
.main-box {
width: 100%;
height: 567px;
padding: 24px 51px 51px 27px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 21px;
overflow-y: auto;
.rank-item {
display: flex;
align-items: center;
height: 30px;
.rank-num {
width: 24px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
margin-right: 12px;
text-align: center;
color: #3b414b;
&.rank-1 {
color: #d94b4b;
}
&.rank-2 {
color: #e3935d;
}
&.rank-3 {
color: #ebd348;
}
}
.rank-icon {
width: 30px;
height: 30px;
margin-right: 12px;
}
.rank-name {
width: 180px;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 700;
color: rgb(59, 65, 75);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-progress-container {
flex: 1;
height: 12px;
margin: 0 20px;
background: transparent;
display: flex;
align-items: center;
.rank-progress-bar {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, rgba(55, 98, 240, 0) 0%, rgba(55, 98, 240, 0.8) 100%);
}
}
&:nth-child(1) .rank-progress-bar {
background: linear-gradient(90deg, rgba(217, 75, 75, 0) 0%, rgba(217, 75, 75, 0.8) 100%);
}
&:nth-child(2) .rank-progress-bar {
background: linear-gradient(90deg, rgba(227, 147, 93, 0) 0%, rgba(227, 147, 93, 0.8) 100%);
}
&:nth-child(3) .rank-progress-bar {
background: linear-gradient(90deg, rgba(235, 211, 72, 0) 0%, rgba(235, 211, 72, 0.8) 100%);
}
.rank-count {
width: 60px;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 700;
color: rgb(59, 65, 75);
text-align: right;
}
}
}
}
}
.news-content {
overflow-y: auto;
overflow-x: hidden;
}
.news-item {
/* 全政府-动态 (四全-最新动态) */
width: 737px;
......@@ -430,24 +1114,12 @@ onMounted(() => {
background: rgba(255, 255, 255, 0.65);
.news-item-title {
line-height: 30px;
display: flex;
justify-content: space-between;
width: 689px;
.tag {
/* 数据展示/Tag标签/亮色/绿 */
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border-radius: 4px;
display: none;
}
.date {
......@@ -486,21 +1158,240 @@ onMounted(() => {
}
.content-text {
color: rgba(95, 101, 108, 1);
width: 689px;
height: 30px;
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;
/* 禁止换行 */
text-align: left;
color: rgba(59, 65, 75, 1);
margin-top: 8px;
/* 单行省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
/* 隐藏溢出内容 */
text-overflow: ellipsis;
/* 溢出部分显示省略号 */
cursor: pointer;
}
}
.line-time {
margin-top: 16px;
width: 1601px;
height: 700px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
.bottom-item {
width: 100%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 17px;
padding-right: 35px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
.bottom-item-title {
display: flex;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 14px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 24px;
color: rgb(5, 95, 194);
}
}
.field-select {
width: 160px;
:deep(.el-input) {
.el-input__wrapper {
height: 32px;
padding: 0 12px;
box-sizing: border-box;
background-color: #fff;
border-radius: 4px;
.el-input__inner {
height: 32px;
line-height: 32px;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
&::placeholder {
color: rgb(95, 101, 108);
}
}
}
}
}
}
.line-main {
width: 100%;
height: 652px;
position: relative;
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
img {
width: 24px;
height: 48px;
}
&.left {
left: 0;
}
&.right {
right: 0;
}
}
.svg-container {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.axis-date-label {
background: rgba(231, 243, 255, 1);
padding: 4px 2px;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: auto;
min-width: 60px;
.year,
.month {
font-family: "Microsoft YaHei";
font-size: 18px;
font-weight: 700;
line-height: 24px;
color: rgb(5, 95, 194);
margin-bottom: 0;
}
}
.timeline-content-item {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
.item-tags {
display: flex;
gap: 8px;
.tag-item {
padding: 2px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
border: 1px solid transparent; // Ensure border width is set for all
&.tag-blue {
color: rgba(9, 88, 217, 1);
background: rgba(230, 244, 255, 1);
border-color: rgba(186, 224, 255, 1);
}
&.tag-green {
color: rgba(56, 158, 13, 1);
background: rgba(246, 255, 237, 1);
border-color: rgba(217, 247, 190, 1);
}
&.tag-red {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1);
}
&.tag-orange {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
border-color: rgba(255, 213, 145, 1);
}
&.tag-purple {
color: rgba(114, 46, 209, 1);
background: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1);
}
&.tag-cyan {
color: rgba(19, 194, 194, 1);
background: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1);
}
}
}
.item-title {
font-size: 18px;
font-weight: 700;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
line-height: 24px;
}
.item-desc {
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
line-height: 24px;
font-family: "Microsoft YaHei";
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
cursor: pointer;
}
.item-footer {
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
line-height: 24px;
font-family: "Microsoft YaHei";
margin-top: 4px;
}
}
}
}
</style>
<style>
.common-prompt-popper.el-popper {
padding: 8px 16px !important;
border-radius: 10px !important;
background-color: rgb(59, 65, 75) !important;
font-size: 16px !important;
font-weight: 400 !important;
font-family: "Microsoft YaHei" !important;
line-height: 30px !important;
color: #fff !important;
border: none !important;
}
.common-prompt-popper.el-popper .el-popper__arrow::before {
background-color: rgb(59, 65, 75) !important;
border-color: rgb(59, 65, 75) !important;
}
</style>
src/views/ZMOverView/components/fourSuppress/components/addDomain/multiLineChart.js
浏览文件 @ 4baedea7
......@@ -10,18 +10,17 @@ const getMultiLineChart = (data) => {
const echartsSeries = series.map((item, index) => ({
name: item.name,
type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色
// },
// {
// offset: 1,
// color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色
// }
// ])
// },
symbol: 'circle',
symbolSize: 8,
itemStyle: {
color: '#fff', // 图表圆点内部为白色
borderColor: item.color, // 圆点边框为系列颜色
borderWidth: 2
},
lineStyle: {
width: 2,
color: item.color
},
emphasis: {
focus: 'series'
},
......@@ -29,38 +28,84 @@ const getMultiLineChart = (data) => {
}));
return {
color: series.map(item => item.color),
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
backgroundColor: 'rgba(255, 255, 255, 0.9)',
textStyle: {
color: '#666'
},
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 4px;'
},
grid: {
top: '15%',
right: '1%',
bottom: '0%',
left: '1%',
right: '2%',
bottom: '5%',
left: '2%',
containLabel: true
},
legend: {
show: true,
top: 10,
left: 'center'
top: 0,
left: 'center',
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
data: series.map(item => ({
name: item.name,
itemStyle: {
color: item.color, // 强制图例使用实心系列颜色
borderWidth: 0
}
})),
textStyle: {
fontFamily: 'Microsoft YaHei',
fontSize: 16,
fontWeight: 400,
lineHeight: 24,
color: 'rgb(95, 101, 108)'
}
},
color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
xAxis: [
{
type: 'category',
boundaryGap: false,
data: title
data: title,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999',
fontSize: 12,
margin: 15
}
}
],
yAxis: [
{
type: 'value'
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999',
fontSize: 12
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#E0E6F1'
}
}
}
],
series: echartsSeries
......
src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue
浏览文件 @ 4baedea7
......@@ -559,7 +559,7 @@ onMounted(() => {
<style lang="scss" scoped>
.content-wrapper {
width: 1666px;
height: 2132px;
height: 1076px;
// background: orange;
.header {
width: 1664px;
......@@ -567,6 +567,7 @@ onMounted(() => {
display: flex;
justify-content: center;
gap: 16px;
margin: 0 auto;
position: relative;
.header-arrow-left {
position: absolute;
......
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ 4baedea7
......@@ -20,7 +20,7 @@
<AllGovernment v-if="activeNav === '全政府'" />
<AddDomain v-if="activeNav === '全领域'" />
<AllUnion v-if="activeNav === '全联盟'" />
<AllElement v-if="activeNav === '全要素'" />
<AllElement v-if="activeNav === '全要素'" />
</div>
</template>
......@@ -48,7 +48,7 @@ const handleNavClick = name => {
.content-wrapper {
// width: 1601px;
width: 1601px;
height: 2203px;
height: auto;
margin: 0 auto;
.main-nav {
width: 1601px;
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 4baedea7
......@@ -8,7 +8,7 @@
</div>
<div style="display: flex; height: 650px; width: 100%">
<div style="width: 50%">
<div style="display: flex; justify-content: space-between; margin-right: 50px; ine-height: 32px;align-items: center;" >
<div style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;" >
<div style="display: flex; margin-left: 50px">
数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px">
......@@ -61,9 +61,9 @@
<div v-for="(value, index) in btnList" class="btn-item" :style="{
background: value.background
}">
<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px;margin:0 22px" />
<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px; margin: 0 22px" />
{{ value.text }}
<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-right: 22px; width: 22px; height: 19px" />
<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
</div>
</div>
</div>
......@@ -263,7 +263,7 @@ const btnList = ref([
<style lang="scss" scoped>
.content-wrapper {
width: 1601px;
width: 1600px;
height: 1600px;
margin: 0 auto;
.card-box {
......@@ -277,7 +277,7 @@ const btnList = ref([
background: rgba(255, 255, 255, 1);
.card-title {
width: 1602px;
width: 100%;
height: 48px;
display: flex;
......@@ -412,7 +412,7 @@ const btnList = ref([
.btn-box {
margin-top: 16px;
width: 1601px;
width: 100%;
height: auto;
/* 高度自适应内容 */
display: flex;
......@@ -420,7 +420,7 @@ const btnList = ref([
/* 行方向布局 */
flex-wrap: wrap;
/* 允许换行 */
justify-content: space-between;
justify-content: flex-start;
align-items: stretch;
/* 使所有按钮高度一致 */
gap: 16px 16px;
......@@ -430,8 +430,7 @@ const btnList = ref([
}
.btn-item {
width: calc(20% - 16px);
/* 宽度为容器宽度的20%减去一个间隙的宽度 */
width: 307px;
height: 60px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
......@@ -442,7 +441,7 @@ const btnList = ref([
display: flex;
/* 使用flex布局 */
color: rgba(255, 255, 255, 1);
justify-content: space-between;
justify-content: flex-start;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 4baedea7
......@@ -493,6 +493,7 @@ onMounted(() => {
.risk-signals {
width: 769px;
height: 470px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论