feat:新增景区页面

This commit is contained in:
zjc
2024-12-17 18:18:07 +08:00
parent 5e5ce522db
commit 1108aafed4
22 changed files with 1061 additions and 126 deletions

View File

@@ -0,0 +1,69 @@
<template>
<div class="container">
<div class="flex">
<div class="box mr-10">
<Title1 title="排队信息" />
<div class="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>
<Line :width="540" :height="340" />
</div>
<div class="box mr-10">
<Title1 title="景区承载" />
<div class="flex">
<pie :width="160" :height="50" />
<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>
<Line :width="540" :height="300" />
</div>
<div class="box-1 mr-10">
<Title1 title="停车信息" />
</div>
<div class="box-2">
<Title1 title="安全信息 " />
</div>
</div>
</div>
</template>
<script setup>
import CountItem from './count-item.vue'
import pie from './pie.vue'
</script>
<style scoped lang="scss">
.container {
flex: 1;
margin: vh(120) vw(10) 0 vw(10);
.bg {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
}
.box {
@extend .bg;
width: vw(575);
height: vh(475);
}
.box-1 {
@extend .bg;
width: vw(770);
height: vh(475);
}
.box-2 {
@extend .bg;
width: vw(440);
height: vh(475);
}
}
</style>