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:
duanliang
2024-12-16 16:42:46 +08:00
parent cc9782e007
commit 990ff98618
39 changed files with 1895 additions and 864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,128 @@
<template>
<!-- 内容 -->
<div class="box-3-content">
<!-- header -->
<div class="header">
<div class="li-1">
今年总游客数
<div class="li-num">
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
</div>
</div>
<div class="li-1">
全县区总游客人数
<div class="li-num">
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
</div>
</div>
<div class="li-1">
全在园人数
<div class="li-num">
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
</div>
</div>
<div class="li-1 li-2">
景区安全度 <span class="color1">安全</span>
</div>
<div class="li-1 li-2">
景区游玩舒适度 <span class="color1">舒适</span>
</div>
<div class="li-1 li-2">
景区接待情况 <span class="color2">排队</span>
</div>
<div class="li-1 li-2">
交通拥挤度 <span class="color1">舒适</span>
</div>
<div class="li-1 li-2">
停车场负荷度 <span class="color1">超负荷</span>
</div>
</div>
<!-- section -->
<div class="section">
</div>
<!-- footer -->
<div class="footer">
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.box-3-content{
// margin-top:200px;
.header{
margin:0 auto;
width:vw(1618);
height:vh(128);
background-image: url('/src/assets/images/header-top-bg.png');
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
.li-2{
text-align: center;
span{
display: block;
font-size:vw(28);
font-weight: bold;
margin-top:vw(10);
text-align: center;
}
.color1{
color:#02F9FA;
}
.color2{
color:#FF4400;
}
.color3{
color:#E21B1B;
}
}
.li-1{
font-weight: 400;
font-size: vw(16);
color: rgba(255,255,255,0.9);
text-align: left;
font-style: normal;
text-transform: none;
margin-right:vw(10);
.li-num{
margin-top:vh(10);
span{
display: inline-block;
margin:vw(2);
width: vw(40);
height: vh(40);
line-height: vh(40);
text-align: center;
font-weight: bold;
font-size:vw(28);
background: linear-gradient( 180deg, #00B7FF 0%, #0033FF 100%);
border-radius: vw(4);
border: 1px solid;
border-image: linear-gradient(180deg, rgba(55, 216, 252, 0), rgba(131, 226, 255, 1)) 1 1;
}
}
}
}
}
</style>

7
src/views/home/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<main class="wrapper">
<box1 />
<!-- <box1 /> -->
<div class="header">
<ul class="nav-left">
<li class="nav-left-item">安全</li>
@@ -14,15 +14,16 @@
<li class="nav-right-item">舆情</li>
<li class="nav-right-item">酒店</li>
</ul>
<box4 />
<box3 />
</div>
<box2 />
<!-- <box2 /> -->
</main>
</template>
<script setup>
import box1 from './components/box-1.vue'
import box4 from './components/box-4.vue'
import box3 from './components/box-3.vue'
import box2 from './components/box-2.vue'
onMounted(() => {})