lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善功能

Browse Source
This commit is contained in:
zjc
2025-01-16 12:37:23 +08:00
parent ef5cb642ca
commit 2a11f91d36
43 changed files with 2644 additions and 3108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/views/traffic/components/box-1.vue
View File

@@ -1,28 +1,28 @@
<template>
<div class="traffic-box-1">
<div class="title-num">
<div class="box-1">
<div class="statistics">
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-num"
><span><countup endVal="88895" /> </span>
<div class="item-num">
<span><countup endVal="334600" /> </span>
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-num"
><span><countup endVal="88895" /> </span>
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总拥堵路段 </div>
<div class="item-num">
<span><countup endVal="35600" /> </span>
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />核心路段 </div>
<div class="item-num"
><span><countup endVal="88895" /></span>
><span><countup endVal="15000" /></span>
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵路口 </div>
<div class="item-num"
><span><countup endVal="88895" /></span>
><span><countup endVal="2345" /></span>
</div>
</div>
</div>
@@ -61,85 +61,85 @@
</script>
<style lang="scss" scoped>
.chart {
display: flex;
flex-wrap: wrap;
gap: vw(8);
padding: vw(8);
.box-1 {
margin-top: vh(120);
width: vw(940);
height: vh(950);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
&-item {
width: vw(444);
height: vh(420);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
&__inner {
.chart {
display: flex;
align-items: center;
}
&__legend {
flex: 1;
flex-wrap: wrap;
gap: vw(8);
padding: 0 vw(8);
&-item {
position: relative;
width: 100%;
height: vh(40);
width: vw(456);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
&__inner {
display: flex;
align-items: center;
margin-bottom: vh(8);
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
height: vh(380);
}
&::before {
position: absolute;
content: '';
width: vw(4);
&__legend {
flex: 1;
&-item {
position: relative;
width: 100%;
height: vh(40);
background-color: #0096ff;
}
display: flex;
align-items: center;
margin-bottom: vh(8);
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
.dot {
width: vw(4);
height: vw(4);
margin: 0 vw(16);
}
&::before {
position: absolute;
content: '';
width: vw(4);
height: vh(40);
background-color: #0096ff;
}
.name {
font-weight: 400;
font-size: vw(12);
color: #ffffff;
width: vw(130);
}
.dot {
width: vw(4);
height: vw(4);
margin: 0 vw(16);
}
.value {
font-weight: bold;
font-size: vw(15);
color: #ffffff;
.name {
font-weight: 400;
font-size: vw(12);
color: #ffffff;
width: vw(130);
}
.value {
font-weight: bold;
font-size: vw(15);
color: #ffffff;
}
}
}
}
}
.traffic-box-1 {
position: relative;
margin-top: vh(120);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.title-num {
.statistics {
padding: 0 vw(40);
height: vh(110);
display: flex;
justify-content: flex-start;
padding: vw(40);
align-items: center;
.item-box {
flex: 1;
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.8);
color: #fff;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: vh(20);
img {
margin-right: vw(5);