165 lines
4.0 KiB
Vue
165 lines
4.0 KiB
Vue
<template>
|
|
<div class="dataScreen-container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
|
|
<div class="boxTop">
|
|
<img src="./img/leftTitle.png" alt="" class="img1" />
|
|
<div class="boxTopRight">
|
|
<div class="index_animation__s5UDk" />
|
|
<ul v-for="(item, index) in titleList" :key="index">
|
|
<li
|
|
:style="{
|
|
'background-image': current == index ? `url(${titleImg1})` : `url(${titleImg2})`,
|
|
color: current == index ? 'rgb(46, 255, 183)' : '',
|
|
}"
|
|
@click="handleTabs(item, index)"
|
|
>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<component :is="key" :base-id="baseId" />
|
|
<base-select v-model="baseId" :type="2" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import './flexible'
|
|
import pageOne from './pageOne';
|
|
import pageTwo from './pageTwo';
|
|
import pageThree from './pageThree';
|
|
import pageLand from './pageLand';
|
|
import pageFour from './pageFour';
|
|
import pageFive from './pageFive';
|
|
export default {
|
|
name: '',
|
|
components: {
|
|
pageOne,
|
|
pageTwo,
|
|
pageLand,
|
|
pageThree,
|
|
pageFour,
|
|
pageFive,
|
|
},
|
|
provide() {
|
|
return {
|
|
getType: () => this.key,
|
|
getX: () => this.scale.x,
|
|
getY: () => this.scale.y,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
baseId: null,
|
|
titleList: [
|
|
{ name: '首\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0页', type: 'pageOne' },
|
|
{ name: '土地资源', type: 'pageLand' },
|
|
{ name: '科技支撑', type: 'pageTwo' },
|
|
{ name: '产业基地', type: 'pageThree' },
|
|
{ name: '全维监测', type: 'pageFour' },
|
|
{ name: '农产品溯源', type: 'pageFive' },
|
|
],
|
|
titleImg1: require('./img/1.png'),
|
|
titleImg2: require('./img/2.png'),
|
|
style: {
|
|
width: '1920',
|
|
height: '1080',
|
|
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
|
|
},
|
|
current: 0,
|
|
key: 'pageOne',
|
|
scale: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.setScale();
|
|
/* 窗口改变事件*/
|
|
window.onresize = () => {
|
|
this.setScale();
|
|
};
|
|
},
|
|
methods: {
|
|
handleTabs(item, index) {
|
|
window.addEventListener('resize', () => {
|
|
this.setScale();
|
|
});
|
|
if (index != this.current) {
|
|
this.current = index;
|
|
this.key = item.type;
|
|
}
|
|
},
|
|
getScale() {
|
|
const w = window.innerWidth / this.style.width;
|
|
const h = window.innerHeight / this.style.height;
|
|
return { x: w, y: h };
|
|
},
|
|
setScale() {
|
|
this.scale = this.getScale();
|
|
this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.dataScreen-container {
|
|
position: fixed;
|
|
z-index: 100;
|
|
transform-origin: 0 0;
|
|
left: 50%;
|
|
top: 50%;
|
|
transition: 0.3s;
|
|
background: url('./img/bg.png');
|
|
background-size: 100% 100%;
|
|
user-select: none;
|
|
.boxTop {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 75px;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
display: flex;
|
|
.img1 {
|
|
width: 30%;
|
|
height: auto;
|
|
}
|
|
.boxTopRight {
|
|
width: 70%;
|
|
height: 90%;
|
|
border-bottom: 1px solid skyblue;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.index_animation__s5UDk {
|
|
animation: index_animation 4s linear infinite;
|
|
background: url('./img/animation.png') no-repeat;
|
|
bottom: 0;
|
|
height: 6px;
|
|
left: -20%;
|
|
position: absolute;
|
|
width: 20%;
|
|
}
|
|
@keyframes index_animation {
|
|
from {
|
|
left: -20%;
|
|
}
|
|
to {
|
|
left: 110%;
|
|
}
|
|
}
|
|
ul li {
|
|
list-style: none;
|
|
width: 100px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: #fff;
|
|
text-align: center;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|