基于VUE + Echarts 实现可视化数据大屏景区管理平台

时间：2025-01-19 12:20:55
<template>
<div class="t-index">
<div class="t-container">
<div class="t-row-33">

<div class="t-left">
<div class="t-row-33">

<div class="t-zh-service">
<h2 class="t-tit">智慧服务</h2>

<div class="t-row-5">
<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-e6ba01">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-689f0e">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-03be87">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-ed6e07">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-9b36e3">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-ce045a">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-03be87">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-5292f4">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-e6ba01">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

</div>

</div>
<!-- 智慧服务 end -->

<div class="t-zh-marketing">
<h2 class="t-tit">智慧营销</h2>

<div class="t-row-5">
<div class="t-line-2">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-9b36e3">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-e6ba01">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-ce045a">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-line-2">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-689f0e">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-5292f4">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-03be87">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

</div>
</div>
</div>
<!-- 智慧营销 end -->
</div>

<div class="t-bigData-warp">
<h2 class="t-tit">景区大数据</h2>

<div class="opacity-bg">
<div class="t-row-5">
<div class="t-line-3">
<a href="javascript: void(0)" class="bg-ed6e07">
<i class="icon-a1"></i> 大数据采集
</a>
</div>

<div class="t-line-3">
<a href="javascript: void(0)" class="bg-5292f4">
<i class="icon-a1"></i> 大数据采集
</a>
</div>

<div class="t-line-3">
<a href="javascript: void(0)" class="bg-9b36e3">
<i class="icon-a1"></i> 大数据采集
</a>
</div>

</div>
</div>
</div>
</div>
<!-- t-left end -->

<div class="t-right">
<div class="t-zh-manage">
<h2 class="t-tit">智慧管理</h2>

<div class="t-row-5">
<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-e6ba01">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-9b36e3">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-ce045a">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-ed6e07">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-s bg-5292f4">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>

<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-03be87">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-link-item-l">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-e6ba01">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>
<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-689f0e">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-5292f4">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-9b36e3">
<i class="icon-a1"></i>
<p>智慧服务item</p>
</a>
</div>
</div>

<div class="t-line-3">
<div class="t-list-item">
<a href="javascript: void(0)" class="link-item link-item-m bg-ed6e07">
<i class="icon-a1"></i>
<p>智慧服务{{1374 - 466 - 66}}</p>
</a>
</div>
</div>

</div>

</div>
<!-- 智慧管理 end -->
</div>
<!-- t-right end -->
</div>
</div>
</div>
</template>

<script>export default {
name: "index"
}</script>

<style scoped>/* 设计稿 宽1374 466*2 + 66*2 + 310 */
.t-container{ width: 13.74rem; margin: 0 auto; padding-top: .3rem; }
.t-container *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.t-row-33:before,
.t-row-33:after,
.t-row-5:before,
.t-row-5:after,
.clearfix:after,
.clearfix:before{
content: '';
display: table;
}
.t-row-33:after,
.t-row-5:after,
.clearfix:after{ clear: both; }

.t-row-33{ margin-left: -.33rem; margin-right: -.33rem; }
.t-row-5{ margin-left: -.05rem; margin-right: -.05rem; }

.bg-e6ba01{ background-color: #e6ba01; }
.bg-ed6e07{ background-color: #ed6e07; }
.bg-689f0e{ background-color: #689f0e; }
.bg-03be87{ background-color: #03be87; }
.bg-9b36e3{ background-color: #9b36e3; }
.bg-9b36e3{ background-color: #9b36e3; }
.bg-ce045a{ background-color: #ce045a; }
.bg-5292f4{ background-color: #5292f4; }


.t-container .t-left,
.t-container .t-right,
.t-zh-service,
.t-zh-marketing{ float: left; padding-left: .33rem; padding-right: .33rem;}

.t-container .t-left{ width: 9.08rem; padding-left: .33rem; padding-right: .33rem;}
.t-container .t-right{ width: 5.22rem; padding-left: .33rem; padding-right: .33rem;}

.t-tit{ color: #fff; font-size: 18px; font-weight: normal; margin-bottom: .15rem; }


.t-zh-service{ width: 5.32rem; }
.t-zh-marketing{ width: 3.76rem; }

.t-line-3,
.t-line-2,
.t-link-item-l{ float: left; padding-left: 5px; padding-right: 5px; }
.t-line-3{ width: 33.333333%; }
.t-line-2{ width: 50%; }
.t-link-item-l{ width: 66.66666% }

.link-item{ display: table-cell; width: 3.5%; vertical-align: middle; text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.link-item-s{ height: 1.2rem; }
.link-item-m{ height: 1.5rem; }

.t-list-item{ margin-bottom: 10px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.t-list-item a{ color: #fff; }
.t-list-item a i{ font-size: .5rem; display: inline-block;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.t-list-item a p{ padding-top: .05rem; font-size: .18rem;}
.t-list-item:hover{
-webkit-box-shadow: 0px 5px 20px rgba(0,0,0,.3);
-moz-box-shadow: 0px 5px 20px rgba(0,0,0,.3);
box-shadow: 0px 5px 20px rgba(0,0,0,.3);
}
.t-list-item:hover i{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

.t-bigData-warp .opacity-bg{ background-color: rgba(0,0,0,.5); padding: 10px;}
.t-bigData-warp a{ display: block; width: 100%; text-align: center; line-height: 1.08rem; color: #fff; font-size: 0.18rem;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.t-bigData-warp a:hover i{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.t-bigData-warp a i{ font-size: .4rem; vertical-align: middle; margin-right: .15rem; display: inline-block;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}</style>

相关文章