feat:新增景区页面
This commit is contained in:
69
src/views/scenic/components/box-2.vue
Normal file
69
src/views/scenic/components/box-2.vue
Normal 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>
|
||||
Reference in New Issue
Block a user