feat：完善整体样式
This commit is contained in:
zjc
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="flex">
|
||||
<div class="box mr-10">
|
||||
<div class="box mr-8">
|
||||
<Title1 title="排队信息" />
|
||||
<div class="count-box flex justify-between">
|
||||
<count-item label="今日出票" :count="35600" suffix="张" />
|
||||
@@ -16,7 +16,7 @@
|
||||
<Line :width="520" :height="300" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box mr-10">
|
||||
<div class="box mr-8">
|
||||
<Title1 title="景区承载" />
|
||||
<div class="flex">
|
||||
<progress1 :width="200" :height="70" />
|
||||
@@ -32,7 +32,7 @@
|
||||
<Line :width="520" :height="300" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-1 mr-10">
|
||||
<div class="box-1 mr-8">
|
||||
<Title1 title="停车信息" />
|
||||
<div class="flex">
|
||||
<div class="flex">
|
||||
@@ -42,21 +42,21 @@
|
||||
</div>
|
||||
<div class="ml-20 flex flex-1 justify-between">
|
||||
<count-item label="总停车场数" :count="561" suffix="个" />
|
||||
<count-item label="总停车位数" :count="150000" suffix="个" />
|
||||
<count-item label="总停车位数" :count="15" suffix="个" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border flex-1">
|
||||
<div class="border mr-8 flex-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="今日景区承载量" />
|
||||
</div>
|
||||
<Line :width="350" :height="300" />
|
||||
<Line :width="360" :height="300" />
|
||||
</div>
|
||||
<div class="border flex-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="车辆归属地占比" />
|
||||
</div>
|
||||
<PieRow :width="340" :height="300" />
|
||||
<PieRow :width="360" :height="300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,8 +75,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-10">
|
||||
<div class="box-3 mr-10">
|
||||
<div class="flex mt-8">
|
||||
<div class="box-3 mr-8">
|
||||
<Title1 title="交通信息" />
|
||||
<div class="count-box flex">
|
||||
<count-item label="总通景路段" :count="35600" suffix="张" />
|
||||
@@ -85,25 +85,41 @@
|
||||
<count-item label="拥堵持续时间" :count="35600" suffix="S" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border">
|
||||
<div class="border mr-8">
|
||||
<Title3 title="今日交通负载" />
|
||||
<traffic-flow />
|
||||
</div>
|
||||
<div class="border">
|
||||
<div class="border mr-8">
|
||||
<Title3 title="今日交通负载" />
|
||||
<PieCol :width="230" :height="300" />
|
||||
<jam :width="220" :height="160" />
|
||||
<div class="legend">
|
||||
<ul class="legend__wrapper">
|
||||
<li class="legend-item" v-for="(item, index) in 6" :key="index">
|
||||
<p class="legend-item-label">路段1</p>
|
||||
<p class="legend-item-value">10%</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border">
|
||||
<Title3 title="今日交通负载" />
|
||||
<PieCol :width="230" :height="300" />
|
||||
<jam :width="220" :height="160" />
|
||||
<div class="legend">
|
||||
<ul class="legend__wrapper">
|
||||
<li class="legend-item" v-for="(item, index) in 6" :key="index">
|
||||
<p class="legend-item-label">路段1</p>
|
||||
<p class="legend-item-value">10%</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-4 mr-10">
|
||||
<div class="box-4 mr-8">
|
||||
<Title1 title="用户画像" />
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
<div class="border mr-8 flex-1">
|
||||
<Title3 title="年龄/性别占比" />
|
||||
<age-ratio />
|
||||
<div class="count">总人数：<countup endVal="124563" /></div>
|
||||
@@ -136,7 +152,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border flex-1">
|
||||
<div class="border mr-8 flex-1">
|
||||
<Title3 title="客源地分析TOP5" />
|
||||
<top />
|
||||
</div>
|
||||
@@ -151,14 +167,15 @@
|
||||
<div class="box-5">
|
||||
<Title1 title="车船信息" />
|
||||
<div class="flex mb-6">
|
||||
<div class="border pt-10 pb-10">
|
||||
<div class="border mr-8 pt-10 pb-10">
|
||||
<Title2 title="车车车车车车" />
|
||||
<div class="car-box mt-10">
|
||||
<div class="pr-20">
|
||||
<img class="icon" src="@/assets/images/icon-6.png" />
|
||||
<div class="car-item pr-20">
|
||||
<div class="label">车总数</div>
|
||||
<div class="value">130辆</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="car-item">
|
||||
<div class="label">今日累计运营(班次)</div>
|
||||
<div class="value">130次</div>
|
||||
</div>
|
||||
@@ -178,11 +195,12 @@
|
||||
<div class="border pt-10 pb-10">
|
||||
<Title2 title="船船船船船船" />
|
||||
<div class="car-box mt-10">
|
||||
<div class="pr-20">
|
||||
<img class="icon" src="@/assets/images/icon-6.png" />
|
||||
<div class="car-item pr-20">
|
||||
<div class="label">车总数</div>
|
||||
<div class="value">130辆</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="car-item">
|
||||
<div class="label">今日累计运营(班次)</div>
|
||||
<div class="value">130次</div>
|
||||
</div>
|
||||
@@ -200,7 +218,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border">
|
||||
<div class="border pt-10 pb-10">
|
||||
<div id="car-ship" class="car-ship" />
|
||||
<img class="full" src="@/assets/images/full.png" @click="show = true" />
|
||||
</div>
|
||||
@@ -218,6 +236,7 @@
|
||||
import BigCarShipMap from './big-car-ship-map.vue'
|
||||
import AgeRatio from './age-ratio.vue'
|
||||
import top from './top.vue'
|
||||
import jam from './jam.vue'
|
||||
import ticket from './ticket.vue'
|
||||
import TrafficFlow from './traffic-flow.vue'
|
||||
|
||||
@@ -239,6 +258,70 @@
|
||||
:deep(.anchorBL) {
|
||||
display: none;
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@mixin icon($column) {
|
||||
width: vw(50);
|
||||
height: vh(60);
|
||||
display: flex;
|
||||
flex-direction: $column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: vw(8);
|
||||
width: vw(170);
|
||||
}
|
||||
&-item {
|
||||
color: #fff;
|
||||
}
|
||||
&-item:nth-child(1) {
|
||||
@include icon(column);
|
||||
background-image: url('@/assets/images/legend-item-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(2) {
|
||||
@include icon(column);
|
||||
background-image: url('@/assets/images/legend-item-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(3) {
|
||||
@include icon(column);
|
||||
background-image: url('@/assets/images/legend-item-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(4) {
|
||||
@include icon(column-reverse);
|
||||
background-image: url('@/assets/images/legend-item-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(5) {
|
||||
@include icon(column-reverse);
|
||||
background-image: url('@/assets/images/legend-item-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(6) {
|
||||
@include icon(column-reverse);
|
||||
background-image: url('@/assets/images/legend-item-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item-label {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
line-height: vh(14);
|
||||
}
|
||||
&-item-value {
|
||||
font-weight: bold;
|
||||
font-size: vw(16);
|
||||
line-height: vh(18);
|
||||
}
|
||||
}
|
||||
.dialog {
|
||||
:deep(.el-dialog) {
|
||||
width: vw(2540);
|
||||
@@ -279,51 +362,54 @@
|
||||
}
|
||||
.border {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0 vw(10);
|
||||
margin: 0 vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box {
|
||||
@extend .bg;
|
||||
width: vw(570);
|
||||
width: vw(510);
|
||||
height: vh(475);
|
||||
}
|
||||
.box-1 {
|
||||
@extend .bg;
|
||||
width: vw(750);
|
||||
height: vh(475);
|
||||
}
|
||||
.box-2 {
|
||||
@extend .bg;
|
||||
width: vw(440);
|
||||
height: vh(475);
|
||||
}
|
||||
.box-3 {
|
||||
@extend .bg;
|
||||
width: vw(850);
|
||||
height: vh(465);
|
||||
}
|
||||
.box-4 {
|
||||
@extend .bg;
|
||||
width: vw(840);
|
||||
height: vh(465);
|
||||
}
|
||||
.box-5 {
|
||||
@extend .bg;
|
||||
width: vw(650);
|
||||
height: vh(465);
|
||||
}
|
||||
.car-box {
|
||||
width: vw(350);
|
||||
width: vw(316);
|
||||
height: vh(74);
|
||||
padding-left: vw(75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/icon-6.png');
|
||||
background-size: 100% 100%;
|
||||
.icon {
|
||||
position: absolute;
|
||||
width: vw(350);
|
||||
height: vw(74);
|
||||
}
|
||||
.car-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&:nth-child(2) {
|
||||
padding-left: vw(80);
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
@@ -333,12 +419,12 @@
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
margin-top: vh(10);
|
||||
margin-top: vh(6);
|
||||
}
|
||||
}
|
||||
.car-ship {
|
||||
width: vw(630);
|
||||
height: vh(230);
|
||||
width: vw(660);
|
||||
height: vh(240);
|
||||
}
|
||||
.full {
|
||||
cursor: pointer;
|
||||
|
||||
Reference in New Issue
Block a user