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
2024-12-18 11:08:13 +08:00
parent 1108aafed4
commit 44c87aa7ff
8 changed files with 189 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/scenic/components/box-2.vue
View File

@@ -3,33 +3,58 @@
<div class="flex">
<div class="box mr-10">
<Title1 title="排队信息" />
<div class="flex justify-between">
<div class="top flex justify-between">
<count-item label="今日出票" :count="35600" suffix="张" />
<count-item label="今日接待人数" :count="35600" suffix="人" />
<count-item label="排队人数" :count="35600" suffix="人" />
<count-item label="排队持续时间" :count="35600" suffix="S" />
</div>
<div class="pt-10">
<Title3 title="景区排队人数" />
<div class="border">
<div class="pt-10">
<Title3 title="景区排队人数" />
</div>
<Line :width="520" :height="300" />
</div>
<Line :width="540" :height="340" />
</div>
<div class="box mr-10">
<Title1 title="景区承载" />
<div class="flex">
<pie :width="160" :height="50" />
<FProgress :width="200" :height="70" />
<div class="flex flex-1 justify-between">
<count-item label="景区当前人数" :count="35600" suffix="张" />
<count-item label="景区最大承载" :count="35600" suffix="人" />
</div>
</div>
<div class="pt-10">
<Title3 title="景区排队人数" />
<div class="border">
<div class="pt-10">
<Title3 title="景区排队人数" />
</div>
<Line :width="520" :height="300" />
</div>
<Line :width="540" :height="300" />
</div>
<div class="box-1 mr-10">
<Title1 title="停车信息" />
<div class="flex">
<div class="flex">
<FProgress :width="140" :height="70" />
<FProgress :width="140" :height="70" />
<FProgress :width="140" :height="70" />
</div>
<div class="ml-20 flex flex-1 justify-between">
<count-item label="总停车场数" :count="561" suffix="个" />
<count-item label="总停车位数" :count="150000" suffix="个" />
</div>
</div>
<div class="flex">
<div class="border flex-1">
<Title3 title="今日景区承载量" />
<Line :width="350" :height="310" />
</div>
<div class="border flex-1">
<Title3 title="车辆归属地占比" />
<Pie :width="350" :height="310" />
</div>
</div>
</div>
<div class="box-2">
<Title1 title="安全信息 " />
@@ -40,16 +65,27 @@
<script setup>
import CountItem from './count-item.vue'
import pie from './pie.vue'
import FProgress from './progress-1.vue'
</script>
<style scoped lang="scss">
.container {
flex: 1;
margin: vh(120) vw(10) 0 vw(10);
.top {
padding: 0 vw(10);
height: vh(70);
}
.bg {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
}
.border {
padding: 0 vw(10);
margin: 0 vw(10);
box-sizing: border-box;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.box {
@extend .bg;
width: vw(575);