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

update

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