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

新版式

Browse Source
This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,8 +32,9 @@
</div> -->
</div>
<div class="chart">
<div class="chart-item">
<div class="chart-item" >
<Title3 title="拥堵频次占比" />
<div class="chart__inner">
<div>
<spotRate
@@ -41,8 +42,9 @@
:total="chartData.totalNum"
label="拥堵频次总数"
/>
<ul class="chart__legend">
<ul class="chart__legend flex" style="flex-wrap: wrap;">
<li
class="chart__legend-item"
v-for="(item, index) in chartData.roadNum"
:key="index"
@@ -65,6 +67,7 @@
<div class="new-ul">
<ul class="chart__legend">
<li
class="chart__legend-item"
v-for="(item, index) in chartData.typeNum"
:key="index"
@@ -88,8 +91,9 @@
:total="chartData.totalTime"
label="拥堵总时长"
/>
<ul class="chart__legend">
<ul class="chart__legend flex" style="flex-wrap: wrap;">
<li
class="chart__legend-item"
v-for="(item, index) in chartData.roadTime"
:key="index"
@@ -116,6 +120,7 @@
<div class="new-ul">
<ul class="chart__legend">
<li
class="chart__legend-item"
v-for="(item, index) in chartData.typeTime"
:key="index"
@@ -179,45 +184,62 @@
<style lang="scss" scoped>
.new-vehicle{
padding-top:vh(20);
width:100%;
}
.new-ul{
padding:0 vw(30);
padding:0 0;
margin-top:vh(20);
}
.box-1 {
margin-top: vh(120);
width: vw(626);
height: vh(950);
width: vw(800);
// height: vh(950);
// height: 100%;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.chart {
display: flex;
flex-wrap: wrap;
gap: vw(8);
gap: vw(4);
padding: 0 vw(8);
height:100%;
overflow: auto;
padding-bottom: vh(150);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&-item {
width: vw(300);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
// display: flex;
// align-items: center;
width:100%;
flex-wrap: wrap;
justify-content: center;
position: relative;
// top:vh(-10);
// height:20%;
overflow: hidden;
// width: vw(300);
// background-image: url('@/assets/images/bg-3.png');
// background-size: 100% 100%;
}
&__inner {
width:100%;
display: flex;
justify-content: center;
height: vh(380);
// height: vh(380);
}
&__legend {
flex: 1;
display: flex;
&-item {
position: relative;
width: 100%;
height: vh(30);
height: vh(50);
display: flex;
align-items: center;
margin-bottom: vh(8);
margin-bottom: vh(15);
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
&::before {
@@ -236,15 +258,15 @@
.name {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #ffffff;
width: vw(110);
// width: vw(110);
}
.value {
// padding-right: vw(20);
font-weight: bold;
font-size: vw(15);
font-size: font-vw(20);
color: #ffffff;
}
}
@@ -261,7 +283,7 @@
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: #fff;
text-align: left;
margin-bottom: vh(20);
@@ -277,7 +299,7 @@
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #02f9fa;
text-align: left;
font-style: normal;