134 lines
3.2 KiB
Vue
134 lines
3.2 KiB
Vue
<template>
|
|
<div class="data-home-index">
|
|
<template v-for="(n, index) in homeList" :key="n.name">
|
|
<div class="home-enter-item" :style="n.style" @click="itemClick(index)">
|
|
<div class="name">
|
|
<span>{{ n.title || '--' }}</span>
|
|
</div>
|
|
<div class="img-icon" :style="n.imgstyle"><img :src="getAssetsFile(n.img)" /></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { getAssetsFile } from '@/utils';
|
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
let rollDataList = reactive([
|
|
{ title: '勐腊镇', value: 533.1 },
|
|
{ title: '孟定镇', value: 1069.2 },
|
|
{ title: '孟永镇', value: 411.8 },
|
|
{ title: '耿马镇', value: 429.4 },
|
|
{ title: '大兴乡', value: 162.7 },
|
|
{ title: '勐简乡', value: 2309.9 },
|
|
// 更多项...
|
|
]);
|
|
|
|
let homeList = reactive([
|
|
{
|
|
title: '产业运营管理后台',
|
|
name: 'operationM',
|
|
linkType: 0,
|
|
url: '',
|
|
img: 'images/vsualized/home1.png',
|
|
style: 'left: 20%;bottom:320px;',
|
|
imgstyle: 'width:100px;height:100px',
|
|
},
|
|
{
|
|
title: '农业产业运营服务平台',
|
|
name: 'operation',
|
|
linkType: 0,
|
|
url: '',
|
|
img: 'images/vsualized/home2.png',
|
|
style: 'left: 20%;bottom: 64px;',
|
|
imgstyle: 'width:160px;height:160px',
|
|
},
|
|
{
|
|
title: '数字大屏',
|
|
name: 'dataV',
|
|
linkType: 1,
|
|
url: '/new-digital-agriculture-screen/v2/land',
|
|
img: 'images/vsualized/home3.png',
|
|
style: 'right: 20%;bottom:320px;',
|
|
imgstyle: 'width:100px;height:100px',
|
|
},
|
|
{
|
|
title: '农业产业政务服务平台',
|
|
name: 'gov',
|
|
linkType: 0,
|
|
url: '',
|
|
img: 'images/vsualized/home4.png',
|
|
style: 'right: 20%;bottom: 64px;',
|
|
imgstyle: 'width:160px;height:160px',
|
|
},
|
|
// 更多项...
|
|
]);
|
|
|
|
const itemClick = (index) => {
|
|
if (index != undefined) {
|
|
let val = homeList[index] || null;
|
|
if (val && val.url != '') {
|
|
if (val.linkType == 1) {
|
|
// router.push({ name: val.url });
|
|
router.push({ path: val.url });
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// });
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.data-home-index {
|
|
height: 100%;
|
|
width: 100%;
|
|
.home-enter-item {
|
|
position: fixed;
|
|
z-index: 2;
|
|
text-align: center;
|
|
padding: 16px 0;
|
|
cursor: pointer;
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
transform: translateX(0) rotate(0);
|
|
}
|
|
25% {
|
|
transform: translateX(-15px) rotate(-3deg);
|
|
}
|
|
50% {
|
|
transform: translateX(12px) rotate(2deg);
|
|
}
|
|
75% {
|
|
transform: translateX(-6px) rotate(1deg);
|
|
}
|
|
}
|
|
.name {
|
|
color: #fff;
|
|
font-family: 'JinBuTi';
|
|
margin: 24px 0;
|
|
background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
|
|
border: 2px solid #01fefd;
|
|
border-radius: 8px;
|
|
|
|
padding: 0 24px;
|
|
span {
|
|
backdrop-filter: blur(8px);
|
|
line-height: 40px;
|
|
text-shadow: 0px 4px 8px 0px #01fefd;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
.img-icon {
|
|
margin: auto;
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
animation: shake 5s /* 持续时间 */ ease-in-out /* 缓动函数 */ infinite; /* 无限循环 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|