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

5
src/views/home/components/box-1.vue
View File

@@ -9,7 +9,7 @@
:key="index"
>
<p class="item-title">三峡之巅-最新异常名称</p>
<img class="item-img" src="@/assets/images/img-1.png" alt="" />
<img class="item-img" src="@/assets/images/cover.png" />
</li>
</ul>
</div>
@@ -18,8 +18,6 @@
<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>
@@ -88,6 +86,7 @@
width: 100%;
height: vh(164);
display: block;
object-fit: cover;
}
}
}

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>

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>

645
src/views/home/components/box-4.vue
View File

@@ -1,329 +1,334 @@
<template>
<div class="box-4-content">
<div class="content-1 content">
<!-- 1 -->
<div class="title">
游客画像
</div>
<!-- 2 -->
<div class="all-man">
</div>
<ul class="ul-1">
<li class="li ">
<div class="li-title">
<span>年龄性别占比</span>
</div>
<div class="chart-1">
<v-chart class="chart" :option="option1" autoresize />
<span class="sky-1"></span>
</div>
<div class="li-man">总人数：123456</div>
</li>
<li class="li">
<div class="li-title">
<span>客源分析TOP5</span>
</div>
<div class="press-box" v-for="item in 5" :key="i">
<div class="press-title">
<span>河北</span>
<span>55%</span>
</div>
<div class="bg-box">
<div class="bg-width"></div>
</div>
</div>
</li>
<li class="li">
<div class="li-title">
<span>购票来源</span>
</div>
<div class="round-press">
<div class="round-1">
<div class="round-width"></div>
</div>
</div>
<v-chart class="chart" :option="option2" autoresize />
</li>
</ul>
</div>
<div class="content-2 content">
<!-- 1 -->
<div class="title">
停车信息
</div>
<ul class="ul-1">
<li class="li">
<div class="li-title">
<span>年龄性别占比</span>
</div>
<v-chart class="chart" :option="option1" autoresize />
<div class="li-man">总人数：123456</div>
</li>
<li class="li">
<div class="li-title">
<span>客源分析TOP5</span>
</div>
<div class="press-box" v-for="item in 5" :key="i">
<div class="press-title">
<span>河北</span>
<span>55%</span>
</div>
<div class="bg-box">
<div class="bg-width"></div>
</div>
</div>
</li>
<li class="li">
<div class="li-title">
<span>购票来源</span>
</div>
<div class="round-press">
<div class="round-1">
<div class="round-width"></div>
</div>
</div>
<v-chart class="chart" :option="option2" autoresize />
</li>
</ul>
</div>
</div>
<div class="box-4">
<!-- <Title1 title="交通信息" />
<div class="flex justify-evenly pt-10">
<div v-for="item in list" class="cell">
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
<div>
<countup :end-val="item.value" />
<div class="label">{{ item.label }}</div>
</div>
</div>
</div>
<div class="flex">
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<div class="pt-20">
<Line :width="250" :height="170" />
</div>
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<Line :width="250" :height="120" />
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<jam :width="250" :height="200" />
</div>
</div>
</div>
<Title1 title="停车信息" />
<div class="stop-box">
<div>
<img class="icon" src="@/assets/images/icon-5.png" alt="" />
<div>
<div class="label">车库总数</div>
<countup class="value" :end-val="500" />
</div>
<div>
<div class="label">车库总数</div>
<countup class="value" :end-val="500" />
</div>
<div>
<div class="label">已使用车位数</div>
<countup class="value" :end-val="500" />
</div>
</div>
<div>
<div>
<div class="label">三峡之巅</div>
<div class="value error">已满</div>
</div>
<div>
<div class="label">白帝城</div>
<div class="value error">已满</div>
</div>
<div>
<div class="label">天坑地缝</div>
<div class="value success">空余</div>
</div>
<div>
<div class="label">永安宫</div>
<div class="value success">空余</div>
</div>
</div>
</div>
<div class="flex pt-10">
<div class="box-1">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<div class="pt-20">
<Line :width="250" :height="120" />
</div>
</div>
</div>
<div class="box-1">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<traffic-flow />
</div>
</div>
<div class="box-1">
<div class="pt-10">
<Title3 title="景区停车场空位" />
<vacancy />
</div>
</div>
</div>
<div class="flex">
<div class="flex-1">
<Title1 title="车船信息" class="title1" />
</div>
<div class="flex-1">
<Title1 title="酒店信息" class="title1" />
</div>
</div> -->
<div class="flex">
<div class="car-ship">
<div class="mb-6">
<div class="car">
<div class="label">车总数</div>
<div class="flex align-center">
<countup class="value" :end-val="130" /> <span class="unit">辆</span>
</div>
</div>
<div class="table">
<div class="header">
<div>景区</div>
<div>调度</div>
<div>空余</div>
</div>
<div class="cell">
<div class="label">车牌号</div>
<div>车长</div>
<div>车速</div>
</div>
</div>
</div>
<div>
<div class="ship">
<div class="label">车总数</div>
<div class="flex align-center">
<countup class="value" :end-val="130" /> <span class="unit">辆</span>
</div>
</div>
</div>
</div>
<div class="hotel">
<div> 3 </div>
<div> 4 </div>
</div>
</div>
</div>
</template>
<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { PieChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
use([
GaugeChart,
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
]);
provide(THEME_KEY, 'dark');
const option1 = ref({
backgroundColor:'transparent',
series: [
{
name: 'Access From',
width:300,
height:100,
type: 'pie',
left:-50,
top:10,
radius: ['40%', '50%'],
avoidLabelOverlap: true,
padAngle: 5,
itemStyle: {
borderRadius: 2
},
data: [
{ value: 200, name: '30-40%' },
{ value: 500, name: '19岁以下' },
{ value: 234, name: '18-30岁' },
{ value: 135, name: '60岁以上' },
{ value: 100, name: '30-40岁' },
],
labelLine: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
});
const option2 = ref({
backgroundColor:'transparent',
});
import jam from './jam.vue'
import TrafficFlow from './traffic-flow.vue'
import vacancy from './vacancy.vue'
import countup from 'vue-countup-v3'
import icon1 from '@/assets/images/icon-1.png'
import icon2 from '@/assets/images/icon-2.png'
import icon3 from '@/assets/images/icon-3.png'
import icon4 from '@/assets/images/icon-4.png'
let list = ref([
{
label: '路段总数',
value: '1234',
icon: icon1
},
{
label: '当前拥堵路段',
value: '1234',
icon: icon2
},
{
label: '总拥堵次数',
value: '1234',
icon: icon3
},
{
label: '最大拥堵时长',
value: '1234',
icon: icon4
}
])
</script>
<style lang="scss" scoped>
.box-4-content{
width:vw(792);
height:vh(976);
background: linear-gradient( 180deg, rgba(10,37,75,0) 0%, rgba(10,37,75,0.87) 30%, #0A254B 50%, #0A254B 100%);
// background: green;
border-radius: 0px 0px 0px 0px;
.content-2{
.all-2-infor{
.box-1{
display: flex;
width:vw(384);
height: vh(70);
background: linear-gradient( 90deg, #0A4190 0%, #0096FF 47%, #004D88 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
.info1{
text-align: center;
}
.t-ico-1{
justify-content: center;
align-items: center;
.t-ico-1{
width:vw(45);
height:vh(47);
}
}
}
}
}
.content{
.title{
width: vw(220);
height: vh(32);
line-height: vh(32);
background: linear-gradient( 180deg, #02A8F7 0%, #05AEFF 49%, #0184E1 51%, #0572C1 77%, #0085E2 100%);
font-size:vw(16);
text-align: center;
margin: vh(20) auto;
}
.ul-1{
display:flex;
.chart-1{
width:vw(253);
height:vh(150);
position: relative;
.sky-1{
position: absolute;
top:vw(60);
left:50%;
width:vw(30);
height:vw(30);
transform: translate(-50%);
background-color: #00B1FF;
border-radius: 50%;
}
}
.li{
width:vw(253);
height:vh(225);
margin-right:vw(10);
background: radial-gradient( 0% 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
.li-man{
font-size:vw(14);
color:#fff;
margin:0 auto;
text-align: center;
}
.round-press{
}
.press-box{
padding:vw(5) vw(10);
// margin-bottom:vh(10);
.press-title{
display: flex;
justify-content: space-between;
color:rgba(255,255,255,0.9);
font-size:vw(12);
margin-bottom:vh(10)
}
.bg-box{
width: 100%;
height: vw(10);
background: rgba(0,150,255,0.15);
border-radius: vw(5);
}
.bg-width{
background: linear-gradient( to left, #FF7021 0%, rgba(255,112,33,0) 100%);
border-radius: vw(5);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width:50%;
height:100%;
position: relative;
}
.bg-width::before{
display: block;
content: '';
width:vw(10);
height:vw(10);
// border-radius: 50%;
position: absolute;
right:0;
top:0;
width: 0;
height: 0;
border-left: vw(10) solid red;
// border-right-width: vw(10);
// border-bottom-width: vw(10);
// border-left-width: vw(10);
}
}
.li-title{
background: url(/src/assets/images/t-title-bg.png) no-repeat 100%;
span{
background: linear-gradient(90deg, #FFFFFF 0%, #0096FF 100%);
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: vw(15);
line-height: vh(18);
text-align: left;
font-style: normal;
text-transform: none;
display: inline-block;
margin-left:vw(20);
margin-bottom:vh(10);
}
.li-1-echat{
position: relative;
.sty-1{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:50rpx;
height:50rpx;
}
// width: 100%;
// height: 300px;
.chart {
}
}
}
}
}
}
.chart {
width: vw(253);
height: vh(120);
}
}
.title1 {
:deep(.title) {
width: vw(300) !important;
}
}
.box-4 {
margin-top: vh(120);
width: vw(790);
height: vh(950);
padding: vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-5.png');
background-size: 100% 100%;
.cell {
display: flex;
align-items: center;
.icon {
width: vw(64);
height: vh(60);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(24);
font-weight: bold;
}
.label {
font-weight: 400;
font-size: vw(14);
margin-top: vh(10);
color: rgba(255, 255, 255, 0.9);
}
}
.box {
width: vw(250);
height: vh(200);
margin-right: vw(8);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.box-1 {
width: vw(250);
height: vh(200);
margin-right: vw(8);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.stop-box {
display: flex;
gap: vw(20);
.icon {
width: vw(45);
height: vh(48);
}
& > div {
flex: 1;
display: flex;
align-items: center;
justify-content: space-evenly;
height: vh(70);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.label {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
.value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #ffffff;
}
.error {
color: #e21b1b;
}
.success {
color: #02f9fa;
}
}
}
.car-ship {
flex: 1;
& > div {
position: relative;
flex: 1;
height: vh(110);
display: flex;
align-items: center;
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.icon {
width: vw(352);
height: vh(70);
padding-top: vh(10);
padding-left: vw(90);
background-size: 100% 100%;
box-sizing: border-box;
}
.car {
@extend .icon;
background-image: url('@/assets/images/icon-6.png');
}
.ship {
@extend .icon;
background-image: url('@/assets/images/icon-7.png');
}
.label {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
margin-bottom: vh(6);
}
.value {
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
}
.unit {
font-weight: bold;
font-size: vw(14);
color: #02f9fa;
margin-top: vh(6);
}
.table {
position: absolute;
left: vw(160);
width: vw(200);
height: vh(100);
z-index: 2;
.header {
display: flex;
height: vh(18);
line-height: vh(18);
text-align: center;
background: rgba(0, 150, 255, 0.4);
& > div {
flex: 1;
font-weight: 400;
font-size: vw(12);
color: #52b8ff;
}
}
.cell {
display: flex;
height: vh(30);
line-height: vh(30);
text-align: center;
background: #074686;
& > div {
flex: 1;
}
}
}
}
}
.hotel {
flex: 1;
}
}
</style>

190
src/views/home/components/jam.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<div class="top" id="jam" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import * as echarts from 'echarts'
let topChart = null
let result = [
{ name: '路段1', value: 86 },
{ name: '路段1', value: 83 },
{ name: '路段1', value: 73 },
{ name: '路段1', value: 61 },
{ name: '路段1', value: 61 }
]
let option = {
backgroundColor: 'transparent',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
left: '4%',
right: '4%',
top: '16%',
bottom: '-10%',
containLabel: true
},
xAxis: [
{
splitLine: {
show: false
},
type: 'value',
show: false
}
],
yAxis: [
{
splitLine: {
show: false
},
axisLine: {
show: false
},
type: 'category',
axisTick: {
show: false
},
data: result.map((item) => item.name),
axisLabel: {
show: false
}
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
},
verticalAlign: 'bottom',
padding: [0, 0, 6, 0],
inside: true,
formatter: function (value) {
return `{value|${value}}`
},
rich: {
name: {
align: 'center',
color: '#D3E5FF',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
},
value: {
align: 'center',
color: '#fff',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
}
}
},
data: result.map((item) => item.value)
}
],
series: [
{
name: '',
type: 'bar',
barWidth: fitChartSize(4),
MaxSize: 0,
showBackground: true,
barBorderRadius: [30, 0, 0, 30],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},
label: {
show: true,
offset: [10, -13],
color: '#D3E5FF',
fontWeight: 500,
position: 'left',
align: 'left',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN',
formatter: function (params) {
return params.data.name
}
},
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
barBorderRadius: [3, 0, 0, 3],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255, 112, 33, 0)'
},
{
offset: 1,
color: 'rgba(255, 112, 33, 1)'
}
]
}
}
}
})
},
{
name: '外圆',
type: 'scatter',
emphasis: {
scale: false
},
showSymbol: true,
symbol: 'circle',
symbolSize: fitChartSize(10),
z: 2,
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
color: '#fff',
opacity: 1
}
}
}),
animationDelay: 500
}
]
}
const init = () => {
topChart = echarts.init(document.getElementById('jam'))
topChart.setOption(option)
}
const resize = () => {
if (topChart) {
topChart.dispose()
topChart = null
init()
}
}
onMounted(() => {
init()
window.addEventListener('resize', resize)
})
</script>
<style scoped lang="scss">
.top {
width: 100%;
height: vh(160);
}
</style>

74
src/views/home/components/pie.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<div class="pie" :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({
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '40%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
borderWidth: fitChartSize(2)
},
label: {
color: '#D3F0FE',
fontSize: fitChartSize(12)
},
labelLine: {
normal: {
lineStyle: {
type: 'dashed'
}
}
},
data: [
{ value: 484, name: '19岁以下', labelLine: { length: 2 } },
{ value: 300, name: '18-30岁', labelLine: { length: 2 } },
{ value: 1048, name: '30-40岁', labelLine: { length: 2 } },
{ value: 580, name: '40-60岁', labelLine: { length: 2 } },
{ value: 735, name: '60岁以上', labelLine: { length: 2 } }
]
}
]
})
window.addEventListener('resize', resize)
}
const resize = () => {
if (gaugeChart) {
gaugeChart.dispose()
init()
}
}
</script>
<style lang="scss" scoped>
.pie {
width: vw(253);
height: vh(100);
}
</style>

199
src/views/home/components/ticket.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div class="ticket" id="ticket" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import * as echarts from 'echarts'
let ticketChart = null
var qxzbData = [
{
name: '处理中',
value: 500,
full: 1000 // 最大值
},
{
name: '超期中',
value: 756,
full: 1000
},
{
name: '延期中',
value: 800,
full: 1000
}
]
var returnData = function (qxzbData, name) {
for (var a = 0; a < qxzbData.length; a++) {
if (qxzbData[a].name == name) {
return qxzbData[a].value
}
}
}
let option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
formatter: function (rsp) {
if (rsp.name != '') {
return rsp.name + '<br/>' + rsp.marker + ' ' + rsp.value + ' （' + rsp.percent + '）'
}
}
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
// textStyle: {
// color: '#4A9AE4'
// },
data: qxzbData,
itemHeight: fitChartSize(8),
itemWidth: fitChartSize(8),
itemGap: fitChartSize(20),
formatter: function (name) {
return '{title|' + name + '} {value|' + returnData(qxzbData, name) + '}'
},
textStyle: {
rich: {
title: {
color: '#fff',
fontSize: fitChartSize(14)
},
value: {
color: '#00D5F6',
fontSize: fitChartSize(14)
}
}
}
},
color: ['#F15A25', '#01FEFE', '#12B5FD'],
series: [
{
name: qxzbData[0].name, //最里面的圈
type: 'pie',
clockWise: false, //顺时加载
radius: ['15%', '25%'],
center: ['30%', '50%'],
label: {
normal: {
show: false
}
},
labelLine: {
show: false
},
itemStyle: {
emphasis: {
show: false
}
},
data: [
{
value: qxzbData[0].value,
name: qxzbData[0].name
},
{
value: qxzbData[0].full,
itemStyle: {
normal: {
color: '#07439C'
}
}
}
]
},
{
name: qxzbData[1].name, //第二个圈
type: 'pie',
clockWise: false, //顺时加载
radius: ['30%', '40%'],
center: ['30%', '50%'],
label: {
normal: {
show: false
}
},
labelLine: {
show: false
},
itemStyle: {
emphasis: {
show: false
}
},
data: [
{
value: qxzbData[1].value,
name: qxzbData[1].name
},
{
value: qxzbData[1].full,
itemStyle: {
normal: {
color: '#07439C'
}
}
}
]
},
{
name: qxzbData[2].name, //最外层圈
type: 'pie',
clockWise: false, //顺时加载
radius: ['45%', '55%'],
center: ['30%', '50%'],
label: {
normal: {
show: false
}
},
labelLine: {
show: false
},
itemStyle: {
emphasis: {
show: false
}
},
data: [
{
value: qxzbData[2].value,
name: qxzbData[2].name
},
{
value: qxzbData[2].full,
itemStyle: {
normal: {
color: '#07439C'
}
}
}
]
}
]
}
const init = () => {
ticketChart = echarts.init(document.getElementById('ticket'))
ticketChart.setOption(option)
window.addEventListener('resize', resize)
}
const resize = () => {
if (ticketChart) {
ticketChart.dispose()
ticketChart = null
init()
}
}
onMounted(() => {
init()
})
</script>
<style scoped lang="scss">
.ticket {
width: 100%;
height: vh(200);
}
</style>

251
src/views/home/components/top.vue Normal file
View File

@@ -0,0 +1,251 @@
<template>
<div class="top" id="top" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import * as echarts from 'echarts'
let topChart = null
let colorList = [
'rgba(255, 38, 38, 1)',
'rgba(255, 96, 0, 1)',
'rgba(255, 165, 7, 1)',
'rgba(0, 234, 255, 1)',
'rgba(0, 132, 255, 1)',
'#2379FF'
]
let colorListA = [
'rgba(255, 38, 38, 0.1)',
'rgba(255, 96, 0, 0.1)',
'rgba(255, 165, 7, 0.1)',
'rgba(0, 234, 255, 0.1)',
'rgba(0, 132, 255, 0.1)',
'#49B1FF'
]
let colorListB = [
'rgba(249, 136, 136, 1)',
'rgba(255, 162, 106, 1)',
'rgba(255, 210, 130, 1)',
'rgba(142, 255, 206, 1)',
'rgba(165, 232, 255, 1)'
]
let colorListC = [
'rgba(249, 136, 136, 0.1)',
'rgba(255, 162, 106, 0.1)',
'rgba(255, 210, 130, 0.1)',
'rgba(142, 255, 206, 0.1)',
'rgba(165, 232, 255, 0.1)'
]
let result = [
{ name: '河北', value: 86 },
{ name: '山西', value: 83 },
{ name: '河南', value: 73 },
{ name: '内蒙', value: 61 },
{ name: '辽宁', value: 61 }
]
let option = {
color: colorList,
backgroundColor: 'transparent',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
left: '4%',
right: '4%',
top: '6%',
bottom: '-4%',
containLabel: true
},
xAxis: [
{
splitLine: {
show: false
},
type: 'value',
show: false
}
],
yAxis: [
{
splitLine: {
show: false
},
axisLine: {
show: false
},
type: 'category',
axisTick: {
show: false
},
data: result.map((item) => item.name),
axisLabel: {
show: false
}
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
},
verticalAlign: 'bottom',
padding: [0, 0, 10, 0],
inside: true,
formatter: function (value) {
return `{value|${value}}`
},
rich: {
name: {
align: 'center',
color: '#D3E5FF',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
},
value: {
align: 'center',
color: '#fff',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
}
}
},
data: result.map((item) => item.value)
}
],
series: [
{
name: '',
type: 'bar',
barWidth: fitChartSize(12),
MaxSize: 0,
showBackground: true,
barBorderRadius: [30, 0, 0, 30],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},
label: {
show: true,
offset: [10, -17],
color: '#D3E5FF',
fontWeight: 500,
position: 'left',
align: 'left',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN',
formatter: function (params) {
return params.data.name
}
},
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
barBorderRadius: [3, 0, 0, 3],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: colorListA[index]
},
{
offset: 1,
color: colorList[index]
}
]
}
}
}
})
}
// {
// name: '外圆',
// type: 'scatter',
// emphasis: {
// scale: false
// },
// showSymbol: true,
// symbol: 'circle',
// symbolSize: 8, // 进度条白点
// z: 2,
// data: result.map((item, index) => {
// return {
// name: item.name,
// value: item.value,
// itemStyle: {
// color: colorListB[index],
// borderColor: colorListC[index],
// borderWidth: 12,
// shadowColor: colorListC[index],
// shadowBlur: 10,
// opacity: 1
// }
// }
// }),
// animationDelay: 500
// },
// {
// name: '外圆',
// type: 'scatter',
// emphasis: {
// scale: false
// },
// showSymbol: true,
// symbol: 'circle',
// symbolSize: 3, // 进度条白点
// z: 3,
// data: result.map((item, index) => {
// return {
// name: item.name,
// value: item.value,
// itemStyle: {
// color: colorListB[index],
// borderColor: colorListC[index],
// borderWidth: 30,
// shadowColor: colorListC[index],
// shadowBlur: 10,
// opacity: 1
// }
// }
// }),
// animationDelay: 500
// }
]
}
const init = () => {
topChart = echarts.init(document.getElementById('top'))
topChart.setOption(option)
}
const resize = () => {
if (topChart) {
topChart.dispose()
topChart = null
init()
}
}
onMounted(() => {
init()
window.addEventListener('resize', resize)
})
</script>
<style scoped lang="scss">
.top {
width: 100%;
height: vh(260);
}
</style>

102
src/views/home/components/traffic-flow.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<div class="traffic-flow" id="traffic-flow" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import * as echarts from 'echarts'
let trafficChart = null
let option = {
grid: {
left: '4%',
right: '4%',
top: '10%',
bottom: '10%',
containLabel: true
},
xAxis: {
boundaryGap: true,
type: 'category',
data: ['河北', '山西', '河南', '内蒙', '辽宁'],
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(5, 72, 134, 1)'
}
},
axisLabel: {
fontSize: fitChartSize(12),
color: 'rgba(255,255,255,0.9)'
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: fitChartSize(12),
color: 'rgba(255,255,255,0.9)'
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(0, 150, 255,0.4)',
type: 'dashed'
}
}
},
series: [
{
data: [820, 932, 901, 934, 1290],
type: 'bar',
showBackground: true,
barWidth: fitChartSize(8),
itemStyle: {
barBorderRadius: [3, 3, 0, 0],
color: {
type: 'linear',
x: 0,
y: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 208, 255, 0)'
},
{
offset: 1,
color: 'rgba(0, 208, 255, 1)'
}
]
}
},
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
}
}
]
}
const init = () => {
trafficChart = echarts.init(document.getElementById('traffic-flow'))
trafficChart.setOption(option)
window.addEventListener('resize', resize)
}
const resize = () => {
if (trafficChart) {
trafficChart.dispose()
trafficChart = null
init()
}
}
onMounted(() => {
init()
})
</script>
<style scoped lang="scss">
.traffic-flow {
width: 100%;
height: vh(160);
}
</style>

189
src/views/home/components/vacancy.vue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<div class="vacancy" id="vacancy" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import * as echarts from 'echarts'
let topChart = null
let result = [
{ name: '三峡之颠', value: 86 },
{ name: '白帝城', value: 83 },
{ name: '瞿塘峡', value: 73 },
{ name: '天坑地缝', value: 61 }
]
let option = {
backgroundColor: 'transparent',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
left: '4%',
right: '4%',
top: '20%',
bottom: '-4%',
containLabel: true
},
xAxis: [
{
splitLine: {
show: false
},
type: 'value',
show: false
}
],
yAxis: [
{
splitLine: {
show: false
},
axisLine: {
show: false
},
type: 'category',
axisTick: {
show: false
},
data: result.map((item) => item.name),
axisLabel: {
show: false
}
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
},
verticalAlign: 'bottom',
padding: [0, 0, 6, 0],
inside: true,
formatter: function (value) {
return `余{value|${value}}`
},
rich: {
name: {
align: 'center',
color: '#D3E5FF',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
},
value: {
align: 'center',
color: '#fff',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
}
}
},
data: result.map((item) => item.value)
}
],
series: [
{
name: '',
type: 'bar',
barWidth: fitChartSize(4),
MaxSize: 0,
showBackground: true,
barBorderRadius: [30, 0, 0, 30],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},
label: {
show: true,
offset: [10, -13],
color: '#D3E5FF',
fontWeight: 500,
position: 'left',
align: 'left',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN',
formatter: function (params) {
return params.data.name
}
},
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
barBorderRadius: [3, 0, 0, 3],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 204, 255, 0)'
},
{
offset: 1,
color: 'rgba(0, 204, 255, 1)'
}
]
}
}
}
})
},
{
name: '外圆',
type: 'scatter',
emphasis: {
scale: false
},
showSymbol: true,
symbol: 'circle',
symbolSize: fitChartSize(10),
z: 2,
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
color: '#fff',
opacity: 1
}
}
}),
animationDelay: 500
}
]
}
const init = () => {
topChart = echarts.init(document.getElementById('vacancy'))
topChart.setOption(option)
}
const resize = () => {
if (topChart) {
topChart.dispose()
topChart = null
init()
}
}
onMounted(() => {
init()
window.addEventListener('resize', resize)
})
</script>
<style scoped lang="scss">
.vacancy {
width: 100%;
height: vh(170);
}
</style>

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

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