style:首页样式
This commit is contained in:
zjc
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="box-2">
|
||||
<div class="header">
|
||||
<div class="title"> 景区信息 </div>
|
||||
<span class="more" />
|
||||
</div>
|
||||
<div class="flex pt-20">
|
||||
<div class="item core">
|
||||
<span class="title-1">全县景区数</span>
|
||||
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
|
||||
</div>
|
||||
<div class="item queue">
|
||||
<span class="title-1">核心景区数</span>
|
||||
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
|
||||
</div>
|
||||
<div class="item congestion">
|
||||
<span class="title-1">低感景区总数</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>
|
||||
<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="suffix">人</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<span class="statistic-title">白帝城</span>
|
||||
<span class="statistic-value">通畅</span>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<span class="statistic-title">天坑地缝</span>
|
||||
<span class="statistic-value">通畅</span>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<span class="statistic-title">永安宫</span>
|
||||
<span class="statistic-value">通畅</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-3"><span>景区排队人数</span></div>
|
||||
<div class="pt-20">
|
||||
<Line :width="370" :height="180" id="line" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="title-2"><span>景区承载量</span></div>
|
||||
<div class="statistic">
|
||||
<div class="statistic-item">
|
||||
<gauge id="gauge1" />
|
||||
<span class="statistic-title">三峡之巅</span>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<gauge id="gauge2" />
|
||||
<span class="statistic-title">三峡之巅</span>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<gauge id="gauge3" />
|
||||
<span class="statistic-title">三峡之巅</span>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<gauge id="gauge4" />
|
||||
<span class="statistic-title">三峡之巅</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-3"><span>今日景区承载量</span></div>
|
||||
<div class="pt-20">
|
||||
<Line :width="370" :height="180" id="line1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import countup from 'vue-countup-v3'
|
||||
import gauge from './gauge.vue'
|
||||
import Line from '@/components/Line/index.vue'
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box-2 {
|
||||
margin-top: vh(120);
|
||||
width: vw(800);
|
||||
height: vh(950);
|
||||
padding: vw(8);
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding-left: vw(70);
|
||||
height: vh(52);
|
||||
margin: 0 vh(10);
|
||||
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;
|
||||
}
|
||||
.unit {
|
||||
color: #02f9fa;
|
||||
font-size: vw(14);
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
.core {
|
||||
background-image: url('@/assets/images/core.png');
|
||||
}
|
||||
.queue {
|
||||
background-image: url('@/assets/images/queue.png');
|
||||
}
|
||||
.congestion {
|
||||
background-image: url('@/assets/images/congestion.png');
|
||||
}
|
||||
.box {
|
||||
width: vw(384);
|
||||
height: vh(360);
|
||||
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);
|
||||
width: 100%;
|
||||
height: vh(88);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&-title {
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
&-value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.count {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
color: #ff4400 !important;
|
||||
}
|
||||
.prefix,
|
||||
.suffix {
|
||||
color: #ff4400;
|
||||
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');
|
||||
background-size: 100% 100%;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user