提交 afe87dfb authored 作者: coderBryanFu's avatar coderBryanFu

update

上级 944692dd
......@@ -522,7 +522,7 @@ body {
z-index: 999999;
width: 713px;
height: 413px;
top: 65px;
top: 64px;
left: 140px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
......
......@@ -132,7 +132,7 @@
<template v-if="rankType === 'institution'">
<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" />
<img :src="item.orgPicture ? item.orgPicture : defaultImg" alt="" class="rank-icon" />
<div class="rank-name" :title="item.name">{{ item.name }}</div>
<div class="rank-progress-container">
<div class="rank-progress-bar" :style="{ width: getProgressWidth(item.count) }"></div>
......@@ -157,7 +157,7 @@
<div v-for="(item, index) in rankList" :key="index" class="table-row">
<div class="col-rank rank-num" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
<div class="col-name flex-align">
<img :src="defaultImg" class="rank-icon" />
<img :src="item.orgPicture ? item.orgPicture : defaultImg" class="rank-icon" />
<span class="text-ellipsis" :title="item.name">{{ item.name }}</span>
</div>
<div class="col-domain">
......@@ -258,6 +258,12 @@
</svg>
</div>
</div>
<div class="left-btn" @click="handleLeft">
<img src="@/assets/icons/card-btn-left.png" alt="">
</div>
<div class="right-btn" @click="handleRight">
<img src="@/assets/icons/card-btn-right.png" alt="">
</div>
</div>
</div>
</template>
......@@ -282,6 +288,7 @@ import {
getDomainContainmentTimeline
} from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus";
const router = useRouter();
......@@ -452,6 +459,8 @@ const handleGetDomainContainmentTimeline = async () => {
// 处理返回的数据结构
const processedData = processTimelineData(res.data);
timelineList.value = processedData;
console.log('timelineList', timelineList.value);
}
} catch (error) {
console.error("获取美对我领域打压遏制时间线失败:", error);
......@@ -466,7 +475,10 @@ const rowHeight = 230;
const startX = 250;
const startY = 45;
const timeLineActiveIndex = ref(0)
const axisDates = computed(() => {
const dates = [];
if (timelineList.value.length > 0) {
dates.push({
......@@ -486,11 +498,40 @@ const axisDates = computed(() => {
y: lastNode.y - 25
});
}
return dates;
return dates
});
const handleLeft = () => {
if(timeLineActiveIndex.value === 0) {
ElMessage.warning('当前已经是第一组数据!')
} else {
timeLineActiveIndex.value --
}
}
const handleRight = () => {
if(timeLineActiveIndex.value === (timelineList.value.length % 9 )) {
ElMessage.warning('当前已经是最后一组数据!')
} else {
timeLineActiveIndex.value ++
}
console.log('axisDates',axisDates.value);
console.log('timelineNodes',timelineNodes.value);
}
const timelineNodes = computed(() => {
return timelineList.value.map((item, index) => {
// 计算起始索引:activeIndex * 9
const startIndex = timeLineActiveIndex.value * 9;
// 计算结束索引:起始索引 + 9(因为slice的第二个参数是结束索引,不包含)
const endIndex = timeLineActiveIndex.value + 9;
const showTimeLineList = timelineList.value.slice(startIndex, endIndex);
return showTimeLineList.map((item, index) => {
const row = Math.floor(index / maxPerRow);
const col = index % maxPerRow;
......@@ -517,7 +558,7 @@ const timelineNodes = computed(() => {
contentWidth: 320,
contentHeight: 180
};
});
})
});
const getColorName = tag => {
......@@ -1251,7 +1292,7 @@ watch(activeDate, () => {
.bottom-content {
display: flex;
gap: 17px;
background: rgba(255, 255, 255, 0.65);
.news-section {
width: 792px;
height: 700px;
......@@ -1343,7 +1384,7 @@ watch(activeDate, () => {
.select-box {
width: 691px;
height: 32px;
margin: 17px auto 36px auto;
margin: 10px auto 5px auto;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -1398,12 +1439,12 @@ watch(activeDate, () => {
}
.main-box {
width: 100%;
height: 567px;
padding: 24px 51px 51px 27px;
height: 577px;
padding: 24px 30px 0px 27px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 21px;
gap: 28px;
overflow-y: auto;
.rank-item {
display: flex;
......@@ -1664,7 +1705,7 @@ watch(activeDate, () => {
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
background: rgba(255, 255, 255, 0.65);
background: transparent;
.news-item-title {
display: flex;
......@@ -1738,6 +1779,33 @@ watch(activeDate, () => {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
position: relative;
.left-btn{
position: absolute;
z-index: 9999;
left: 0;
top: 345px;
width: 24px;
height: 48px;
img{
width: 100%;
height: 100%;
}
}
.right-btn{
position: absolute;
z-index: 9999;
right: 0;
top: 345px;
width: 24px;
height: 48px;
img{
width: 100%;
height: 100%;
}
}
.bottom-item {
width: 100%;
......@@ -1794,7 +1862,6 @@ watch(activeDate, () => {
width: 100%;
height: 652px;
position: relative;
.nav-btn {
position: absolute;
top: 50%;
......@@ -1816,8 +1883,7 @@ watch(activeDate, () => {
.svg-container {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
overflow: hidden;
display: block;
padding: 0;
box-sizing: border-box;
......
......@@ -717,10 +717,10 @@ onUnmounted(() => {
.box1-main {
height: 836px;
overflow: hidden;
overflow-y: auto;
background: rgba(255, 255, 255, 0.65);
.box1-item {
width: 430px;
height: 167px;
padding: 12px 0;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
......@@ -747,7 +747,7 @@ onUnmounted(() => {
width: 388px;
margin-left: 12px;
.title {
// height: 30px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
......@@ -756,20 +756,29 @@ onUnmounted(() => {
line-height: 30px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content {
height: 48px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tag-box {
margin-top: 4px;
// height: 28px;
height: 28px;
display: flex;
flex-wrap: wrap;
gap: 8px;
......@@ -998,7 +1007,7 @@ onUnmounted(() => {
margin: 0 auto;
margin-top: 8px;
width: 283px;
max-height: 172px;
height: 150px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
......@@ -1008,13 +1017,15 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
// overflow-y: auto;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.area-box {
width: 283px;
margin: 0 auto;
margin-top: 8px;
margin-top: 28px;
// height: 24px;
display: flex;
flex-wrap: wrap;
......@@ -1245,7 +1256,7 @@ onUnmounted(() => {
margin: 0 auto;
margin-top: 8px;
width: 283px;
max-height: 172px;
height: 150px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
......@@ -1255,12 +1266,15 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
// overflow-y: auto;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.area-box {
width: 283px;
margin: 0 auto;
margin-top: 8px;
margin-top: 28px;
// height: 24px;
display: flex;
flex-wrap: wrap;
......
......@@ -326,7 +326,7 @@ const getUSGovernmentSanctionHistoryData = async () => {
else if (item.status === 4) level = "white";
grouped[deptName].events.push({
date: item.postDate ? item.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
date: item.endDate ? item.endDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
content: item.name || item.summary,
tags: item.techDomainList ? item.techDomainList.slice(0, 2) : [],
level: level,
......
......@@ -81,7 +81,7 @@
</template>
<script setup>
import { onMounted, ref, computed, provide } from "vue";
import { onMounted, onUnmounted, ref, computed, provide } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import background from "./assets/images/backgroundBT.png";
......@@ -159,6 +159,8 @@ provide("activeDate", activeDate);
const handleDateClick = type => {
activeDate.value = type;
};
</script>
<style lang="scss" scoped>
......@@ -276,7 +278,7 @@ const handleDateClick = type => {
height: 192px;
position: fixed;
top: 149px;
left: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
......@@ -295,12 +297,11 @@ const handleDateClick = type => {
cursor: pointer;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
&:hover{
&:hover {
background: var(--color-bg-hover);
// span{
// color: var(--color-main-active);
// }
}
img {
......
......@@ -21,7 +21,7 @@
<div class="box1-main-center" id="chart1"></div>
<div class="box1-main-footer">
<div class="box-footer-left">
<img src="../assets/icons/right-icon1.png" alt="" />
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
从立法耗时角度分析,大而美法案从提交到签署仅39天,远快于历史同类法案(通常需6个月以上),立法速度极快。
......@@ -52,7 +52,7 @@
<div class="box2-main-center" id="chart2"></div>
<div class="box2-main-footer">
<div class="box-footer-left">
<img src="../assets/icons/right-icon1.png" alt="" />
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
法案本质是共和党与资本集团的深度联盟,共和党获超
......@@ -403,7 +403,7 @@
</div>
<div class="box3-main-footer">
<div class="box-footer-left">
<img src="../assets/icons/right-icon1.png" alt="" />
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
法案以218:214​(众议院)和51:50​(副总统决胜票)微弱优势强行通过,暴露两党极端对立、党内倒戈频发的特点。
......@@ -1219,6 +1219,7 @@ onMounted(async () => {
width: 130px;
display: flex;
justify-content: flex-end;
align-items: center;
.icon {
width: 16px;
height: 16px;
......@@ -1254,6 +1255,9 @@ onMounted(async () => {
// border-right: 1px solid rgba(243, 243, 244, 1);
width: 215px;
.box1-right-top {
height: 20px;
box-sizing: border-box;
padding-top: 8px;
:deep(.el-progress-bar__inner) {
background: rgba(22, 119, 255, 1);
border-radius: 0;
......@@ -1264,6 +1268,9 @@ onMounted(async () => {
}
}
.box1-right-bottom {
height: 20px;
box-sizing: border-box;
padding-top: 8px;
:deep(.el-progress-bar__inner) {
background: rgba(255, 172, 77, 1);
border-radius: 0;
......
......@@ -899,7 +899,7 @@ onMounted(() => {
position: relative;
.usr-icon1 {
position: absolute;
bottom: 0px;
bottom: 0;
left: 18px;
width: 48px;
height: 48px;
......@@ -1076,7 +1076,7 @@ onMounted(() => {
}
.usr-icon1 {
position: absolute;
// bottom: -15px;
bottom: -15px;
left: 55px;
width: 48px;
height: 48px;
......@@ -1091,7 +1091,7 @@ onMounted(() => {
}
.usr-icon2 {
position: absolute;
// bottom: -15px;
bottom: -15px;
right: 55px;
width: 48px;
height: 48px;
......@@ -1110,7 +1110,7 @@ onMounted(() => {
margin-top: 30px;
.info-right-title {
height: 22px;
// height: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
......
......@@ -17,17 +17,17 @@ const getPieChart = (data, colorList) => {
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 18,
lineHeight: 24,
rich: {
name: {
color: 'rgba(59, 65, 75, 1)',
fontFamily: 'Microsoft YaHei',
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
padding: [10, 0, 10, 0]
},
time: {
fontSize: 14,
fontSize: 16,
fontFamily: 'Microsoft YaHei',
color: '#rgba(95, 101, 108, 1)',
padding: [10, 0, 10, 0]
......
......@@ -108,16 +108,20 @@ onMounted(async () => {
<style lang="scss" scoped>
.wrap {
width: 100%;
// height: 984px;
height: 100%;
overflow: hidden;
overflow-y: auto;
.header {
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
position: sticky;
top: 0;
z-index: 99;
.header-top {
margin-top: 20px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论