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

297
src/views/home/components/box-2.vue
View File

@@ -1,32 +1,33 @@
<template>
<div class="box-2">
<div class="header">
<div class="title"> 景区信息 </div>
<span class="more" />
</div>
<Title1 title="景区信息">
<template #right>
<span class="more" />
</template>
</Title1>
<div class="flex pt-20">
<div class="item core">
<span class="title-1">全县景区数</span>
<span class="label">全县景区数</span>
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
</div>
<div class="item queue">
<span class="title-1">核心景区数</span>
<span class="label">核心景区数</span>
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
</div>
<div class="item congestion">
<span class="title-1">低感景区总数</span>
<span class="label">低感景区总数</span>
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
</div>
</div>
<div class="flex pt-20">
<div class="box">
<div class="title-2"><span>景区排队人数</span></div>
<Title2 title="景区排队人数" />
<div class="statistic">
<div class="statistic-item">
<span class="statistic-title">三峡之巅</span>
<span class="statistic-value">
<span class="prefix">排队</span>
<span class="count">100</span>
<span class="value">100</span>
<span class="suffix">人</span>
</span>
</div>
@@ -43,13 +44,13 @@
<span class="statistic-value">通畅</span>
</div>
</div>
<div class="title-3"><span>景区排队人数</span></div>
<Title3 title="景区排队人数" />
<div class="pt-20">
<Line :width="370" :height="180" id="line" />
<Line :width="370" :height="140" />
</div>
</div>
<div class="box">
<div class="title-2"><span>景区承载量</span></div>
<Title2 title="景区承载量" />
<div class="statistic">
<div class="statistic-item">
<gauge id="gauge1" />
@@ -68,24 +69,82 @@
<span class="statistic-title">三峡之巅</span>
</div>
</div>
<div class="title-3"><span>今日景区承载量</span></div>
<Title3 title="今日景区承载量" />
<div class="pt-20">
<Line :width="370" :height="180" id="line1" />
<Line :width="370" :height="140" />
</div>
</div>
</div>
<div class="ticket-box">
<Title2 title="景区购票数" />
<div class="ticket-wrap">
<img src="@/assets/images/ticket.png" alt="" />
<div> <span class="label">当日购票量：</span><countup endVal="768578" /> </div>
<div> <span class="label">未来3天购票量：</span><countup endVal="768578" /> </div>
<div> <span class="label">3天后购票量：</span><countup endVal="768578" /> </div>
</div>
</div>
<Title1 title="游客画像" />
<div class="flex">
<div class="box-1">
<Title3 title="年龄/性别占比" />
<pie id="pie" />
<div class="count">总人数：<countup endVal="124563" /></div>
<div class="cell pt-20">
<img class="icon" src="@/assets/images/man.png" />
<div class="bg">
<span class="text">男性</span>
<div class="progress">
<el-progress
:percentage="50"
:show-text="false"
color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
/>
</div>
<span class="man">50%</span>
</div>
</div>
<div class="cell pt-20">
<img class="icon" src="@/assets/images/woman.png" />
<div class="bg">
<span class="text">女性</span>
<div class="progress">
<el-progress
:percentage="50"
:show-text="false"
color="linear-gradient( to right,
#0A4482 0%, #FF7021 100%)"
/>
</div>
<span class="woman">50%</span>
</div>
</div>
</div>
<div class="box-1">
<Title3 title="客源地分析TOP5" />
<top />
</div>
<div class="box-1">
<Title3 title="购票来源" />
<div class="count">总人数：<countup endVal="124563" /></div>
<ticket />
</div>
</div>
</div>
</template>
<script setup>
import countup from 'vue-countup-v3'
import pie from './pie.vue'
import top from './top.vue'
import gauge from './gauge.vue'
import Line from '@/components/Line/index.vue'
onMounted(() => {})
import ticket from './ticket.vue'
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.box-2 {
margin-top: vh(120);
width: vw(800);
@@ -94,33 +153,16 @@
box-sizing: border-box;
background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%;
.header {
position: relative;
.title {
margin: vh(10) auto;
width: vw(468);
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
}
.more {
position: absolute;
top: vh(0);
right: vw(20);
cursor: pointer;
width: vw(60);
height: vh(24);
background-image: url('@/assets/images/more.png');
background-size: 100% 100%;
}
.more {
position: absolute;
top: vh(0);
right: vw(20);
cursor: pointer;
width: vw(60);
height: vh(24);
background-image: url('@/assets/images/more.png');
background-size: 100% 100%;
}
.item {
position: relative;
flex: 1;
@@ -130,18 +172,18 @@
display: flex;
align-items: center;
background-size: 100% 100%;
}
.title-1 {
position: absolute;
top: vh(-10);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.7);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-weight: bold;
.label {
position: absolute;
top: vh(-10);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.7);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-weight: bold;
}
}
.unit {
color: #02f9fa;
@@ -159,30 +201,12 @@
}
.box {
width: vw(384);
height: vh(360);
height: vh(320);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
}
.title-2 {
width: vw(253);
height: vh(28);
display: flex;
align-items: center;
background-image: url('@/assets/images/title-5.png');
background-size: 100% 100%;
& > span {
padding-left: vw(22);
font-weight: bold;
font-size: vw(15);
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
.statistic {
display: flex;
margin-top: vh(12);
@@ -207,10 +231,10 @@
font-size: vw(24);
color: #02f9fa;
}
.count {
.value {
font-weight: bold;
font-size: vw(28);
color: #ff4400 !important;
color: #ff4400;
}
.prefix,
.suffix {
@@ -218,21 +242,88 @@
font-size: vw(12);
}
}
.title-3 {
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
}
.box-1 {
width: vw(253);
height: vh(270);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
}
&:nth-child(2) {
margin-right: vw(10);
}
}
.count {
margin: vw(20) vw(20) 0 vw(20);
height: vh(24);
font-weight: bold;
font-size: vw(14);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-left: vw(4) solid #37d8fc;
border-right: vw(4) solid #37d8fc;
background: rgba(0, 150, 255, 0.19);
}
.cell {
margin-left: vw(10);
display: flex;
align-items: center;
.bg {
display: flex;
align-items: center;
height: vh(20);
padding-right: vw(10);
background: linear-gradient(to right, rgba(0, 150, 255, 0), rgba(0, 150, 255, 0.17) 100%);
}
.icon {
width: vw(26);
height: vh(28);
margin-right: vw(4);
}
.text {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
.progress {
width: vw(120);
margin-left: vw(4);
}
.man {
font-weight: bold;
font-size: vw(14);
color: #02f9fa;
margin-left: vw(10);
}
.woman {
font-weight: bold;
font-size: vw(14);
color: #f15a25;
margin-left: vw(10);
}
}
.ticket-box {
margin-top: vh(20);
width: 100%;
height: vh(106);
background-color: radial-gradient(to right, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
.title {
width: vw(253);
height: vh(28);
display: flex;
align-items: center;
background-image: url('@/assets/images/title-5.png');
background-size: 100% 100%;
& > span {
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
padding-left: vw(22);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
font-size: vw(15);
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
@@ -240,5 +331,33 @@
}
}
}
.ticket-wrap {
display: flex;
align-items: center;
justify-content: space-between;
& > img {
width: vw(74);
height: vh(74);
}
& > div {
flex: 1;
height: vh(58);
display: flex;
align-items: center;
background-image: url('@/assets/images/ticket-item-bg.png');
background-size: 100% 100%;
}
.label {
padding-left: vw(10);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-weight: bold;
}
}
}
</style>