style:首页样式
This commit is contained in:
zjc
@@ -2,7 +2,12 @@
|
||||
<div class="box-1">
|
||||
<div class="title">核心景区视频</div>
|
||||
<ul class="list">
|
||||
<li class="item" v-for="(item, index) in 10" :key="index">
|
||||
<li
|
||||
class="item"
|
||||
:style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
|
||||
v-for="(item, index) in 10"
|
||||
:key="index"
|
||||
>
|
||||
<p class="item-title">三峡之巅-最新异常名称</p>
|
||||
<img class="item-img" src="@/assets/images/img-1.png" alt="" />
|
||||
</li>
|
||||
@@ -10,14 +15,20 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import item1 from '@/assets/images/item-1.png'
|
||||
import item2 from '@/assets/images/item-2.png'
|
||||
|
||||
console.log(item1, 'item1')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-1 {
|
||||
margin: vh(10);
|
||||
width: vw(326);
|
||||
border-radius: vw(2);
|
||||
background: linear-gradient(270deg, #08366a 0%, #004192 100%);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title {
|
||||
width: vw(260);
|
||||
@@ -61,21 +72,22 @@
|
||||
|
||||
.item {
|
||||
margin-bottom: vh(13);
|
||||
background-size: 100% 100%;
|
||||
&-title {
|
||||
margin-bottom: vh(6);
|
||||
margin-left: vw(45);
|
||||
color: #fff;
|
||||
font-size: vw(16);
|
||||
margin-bottom: vh(6);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: vh(2);
|
||||
background: linear-gradient(270deg, #0063ff 0%, rgba(0, 5, 25, 0) 100%);
|
||||
}
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: vh(164);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
109
src/views/home/components/gauge.vue
Normal file
109
src/views/home/components/gauge.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="gauge" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
})
|
||||
|
||||
let gaugeChart = null
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const init = () => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
gaugeChart = echarts.init(document.getElementById(props.id))
|
||||
gaugeChart.setOption({
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: '100%',
|
||||
splitNumber: 10,
|
||||
center: ['50%', '60%'],
|
||||
itemStyle: {
|
||||
color: '#58D9F9',
|
||||
shadowColor: 'rgba(0,138,255,0.45)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: true,
|
||||
width: fitChartSize(6)
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: fitChartSize(6)
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
width: '100%',
|
||||
lineHeight: 20,
|
||||
height: 20,
|
||||
offsetCenter: [0, '20%'],
|
||||
valueAnimation: true,
|
||||
formatter: function (value) {
|
||||
return '{value|' + value.toFixed(0) + '}{unit|%}'
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontWeight: 'bolder',
|
||||
color: '#02F9FA'
|
||||
},
|
||||
unit: {
|
||||
fontSize: fitChartSize(12),
|
||||
color: '#02F9FA'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 80
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
const resize = () => {
|
||||
if (gaugeChart) {
|
||||
gaugeChart.dispose()
|
||||
init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gauge {
|
||||
width: vw(70);
|
||||
height: vh(50);
|
||||
}
|
||||
</style>
|
||||
@@ -2,18 +2,26 @@
|
||||
<main class="wrapper">
|
||||
<box1 />
|
||||
<div class="header">
|
||||
<ul class="nav-left">
|
||||
<li class="nav-left-item">安全</li>
|
||||
<li class="nav-left-item">景区</li>
|
||||
<li class="nav-left-item">交通</li>
|
||||
</ul>
|
||||
<div class="title">奉节县旅游指挥调度中心</div>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<ul class="nav-right">
|
||||
<li class="nav-right-item">停车</li>
|
||||
<li class="nav-right-item">工单</li>
|
||||
<li class="nav-right-item">舆情</li>
|
||||
<li class="nav-right-item">酒店</li>
|
||||
</ul>
|
||||
</div>
|
||||
<box2 />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import box1 from './components/box-1.vue'
|
||||
import box2 from './components/box-2.vue'
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
@@ -25,19 +33,61 @@
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
.title {
|
||||
width: vw(3133);
|
||||
height: vh(120);
|
||||
font-size: vw(48);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
padding-top: vh(20);
|
||||
color: #fff;
|
||||
letter-spacing: vw(10);
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
||||
background-image: url('@/assets/images/title.png');
|
||||
background-size: 100% 100%;
|
||||
.header {
|
||||
position: absolute;
|
||||
left: vw(326);
|
||||
.title {
|
||||
width: vw(3133);
|
||||
height: vh(120);
|
||||
font-size: vw(48);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
padding-top: vh(20);
|
||||
color: #fff;
|
||||
letter-spacing: vw(10);
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
||||
background-image: url('@/assets/images/title.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: vw(630);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-left: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
position: absolute;
|
||||
right: vw(424);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-right: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user