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

style:首页

Browse Source
This commit is contained in:
zjc
2024-12-16 17:38:50 +08:00
parent cc9782e007
commit 0c148685d2
39 changed files with 2838 additions and 1282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/views/home/components/box-3.vue
View File

@@ -0,0 +1,245 @@
<template>
<div class="box-3">
<div class="header">
<div class="flex">
<div class="left">
<div class="item">
<div class="label">今年总游客数</div>
<countup v-for="item in count" :endVal="item" />
</div>
<div class="item">
<div class="label">全县景区总游客人数</div>
<countup v-for="item in count" :endVal="item" />
</div>
<div class="item">
<div class="label">总在园人数</div>
<countup v-for="item in count" :endVal="item" />
</div>
</div>
<div class="right">
<div class="item">
<div class="label">安全度</div>
<div class="value">安全</div>
</div>
<div class="item">
<div class="label">舒适度</div>
<div class="value">舒适</div>
</div>
<div class="item">
<div class="label">接待情况</div>
<div class="value">排队</div>
</div>
<div class="item">
<div class="label">交通拥挤度</div>
<div class="value">舒适</div>
</div>
<div class="item">
<div class="label">停车场负荷度</div>
<div class="value">超负荷</div>
</div>
</div>
</div>
</div>
<Map />
<div class="footer">
<div class="left">
<div>
<div class="flex">
<div class="item">
<p class="label">今日工单总条数</p>
<countup :endVal="1234" />
</div>
<div class="item">
<p class="label">工单完成数</p>
<countup :endVal="1234" />
</div>
</div>
<p>工单完成数</p>
</div>
<div>
<div class="flex">
<div class="item">
<p class="label">紧急工单数</p>
<countup :endVal="1234" />
</div>
<div class="item">
<p class="label">紧急工单完成数</p>
<countup :endVal="1234" />
</div>
</div>
<p>工单完成数</p>
</div>
</div>
<div class="right">
<div class="item">
<span class="tag tag--success">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="item">
<span class="tag tag--error">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="item">
<span class="tag tag--primary">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
import countup from 'vue-countup-v3'
import Map from '@/components/Map/index.vue'
let count = ref('6945959')
</script>
<style lang="scss" scoped>
.box-3 {
width: vw(1614);
height: vh(950);
margin-top: vh(120);
.header {
width: vw(1614);
height: vh(128);
padding: 0 vw(90);
box-sizing: border-box;
background-image: url('@/assets/images/group.png');
background-size: 100% 100%;
.left {
display: flex;
width: vw(950);
margin-top: vh(20);
}
.right {
flex: 1;
display: flex;
margin-top: vh(20);
}
.item {
flex: 1;
.label {
margin-bottom: vh(10);
font-weight: 400;
font-size: vw(16);
color: rgba(255, 255, 255, 0.9);
}
.value {
font-weight: bold;
font-size: vw(28);
color: #02f9fa;
line-height: vh(33);
}
}
.countup-wrap {
display: inline-block;
width: vw(40);
height: vh(40);
margin-right: vw(4);
border-radius: vw(4);
color: #ffffff;
font-size: vw(28);
font-weight: bold;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
}
}
.footer {
display: flex;
width: 100%;
height: vh(120);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.left {
flex: 1;
display: flex;
& > div {
flex: 1;
height: vh(110);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.item {
padding: vh(10) vw(24);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.label {
font-weight: 400;
font-size: vw(14);
margin-bottom: vh(10);
color: rgba(255, 255, 255, 0.9);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-weight: bold;
}
}
}
.right {
padding: vh(10) vw(24);
.item {
display: flex;
margin-bottom: vh(12);
&:nth-last-child(1) {
margin-bottom: 0;
}
.tag {
padding: 0 vw(16);
font-weight: bold;
font-size: vw(14);
display: flex;
align-items: center;
justify-content: center;
border-radius: vw(2);
&--success {
color: #02f9fa;
border: 1px solid #02f9fa;
box-shadow: inset 0 0 vw(8) 0 #0be1ab;
}
&--error {
color: #ee2c2c;
border: 1px solid #ee2c2c;
box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
}
&--primary {
color: #00aaff;
border: 1px solid #00aaff;
box-shadow: inset 0 0 vw(8) 0 #00aaff;
}
}
.content {
margin-left: vw(4);
padding: 0 vw(10);
width: vw(900);
height: vh(24);
line-height: vh(24);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
font-size: vw(14);
color: #ffffff;
border-radius: vw(2);
background: rgba(0, 150, 255, 0.28);
}
}
}
}
}
</style>