移风店大屏前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

195 lines
4.6 KiB

2 years ago
<template>
<div class="next" :style="{
width: width + 'px',
height: height + 'px',
transform: `scale(${scale}) translate(-50%, -50%)`,
}">
2 years ago
<div :class="navId != 'whyf' ? 'left-border' : 'whyf-left'"></div>
<div :class="navId != 'whyf' ? 'right-border' : 'whyf-right'"></div>
2 years ago
<div class="bot-border"></div>
<div class="top-border"></div>
<ScreenHeader />
2 years ago
<ScreenBottom v-if="navId != 'whyf'" />
2 years ago
<ScreenContent />
2 years ago
<ScreenContentLeft v-if="navId != 'whyf'" />
<ScreenContentRight v-if="navId != 'whyf'" />
<ZdyfLeftYfcj />
<ZdyfRightGarden />
<ZdyfRightTalents />
<ZdyfCenterQyjj />
<ZdyfLeftldgh />
2 years ago
</div>
</div></template>
2 years ago
<script>
import { debounce } from 'utils/common'
import { mapGetters, mapActions } from 'vuex'
import ScreenHeader from './layout/screen-header'
import ScreenBottom from './layout/screen-bottom'
import ScreenContent from './layout/screen-content'
import ScreenContentLeft from './screen-content-left'
import ScreenContentRight from './screen-content-right'
import ZdyfLeftYfcj from './dialog-module/zdyf-left/yfcj'
import ZdyfRightGarden from './dialog-module/zdyf-right/kyll/garden.vue'
import ZdyfRightTalents from './dialog-module/zdyf-right/kyll/talents.vue'
import ZdyfCenterQyjj from './dialog-module/zdyf-center/qyjj'
import ZdyfLeftldgh from './dialog-module/zdyf-left/ldgh'
2 years ago
let width = 0
let height = 0
export default {
name: 'next',
data() {
2 years ago
return {
width: 1920,
height: 960
}
},
computed: {
2 years ago
...mapGetters(['scale', 'navId'])
2 years ago
},
components: {
ScreenHeader,
ScreenContent,
ScreenContentLeft,
ScreenContentRight,
ScreenBottom,
ZdyfLeftYfcj,
ZdyfRightTalents,
ZdyfRightGarden,
ZdyfCenterQyjj,
ZdyfLeftldgh
2 years ago
},
beforeRouteEnter(to, from, next) {
2 years ago
if (window.location.search) {
const totalArr = window.location.search.split('?')[1].split('&')
totalArr.forEach(item => {
if (item.indexOf('width') > -1) {
width = item.split('=')[1]
} else if (item.indexOf('height') > -1) {
height = item.split('=')[1]
}
})
}
next()
},
created() {
// 获取屏幕高度
const screenHeight = window.innerHeight;
// 判断屏幕高度并设置变量的值
if (screenHeight === 960) {
this.height = 960;
} else if (screenHeight === 1080) {
this.height = 1080;
} else {
this.height = 960;
}
console.log(this.height, 'this.height');
2 years ago
if (width && height) {
this.width = width
this.height = height
}
},
mounted() {
2 years ago
this.setScale()
window.addEventListener('resize', debounce(this.setScale))
},
methods: {
...mapActions({
set_scale: 'SET_SCALE'
}),
// 获取缩放比
getScale() {
2 years ago
const { width, height } = this
const ww = window.innerWidth / width
const wh = window.innerHeight / height
return ww < wh ? ww : wh
},
// 设置缩放比
setScale() {
2 years ago
this.set_scale(this.getScale())
}
}
}
</script>
<style lang="scss" scoped>
.next {
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transition: 0.2s;
transform-origin: 0 0;
overflow: hidden;
2 years ago
.left-border {
width: 560px;
height: 100%;
background: url("~@/assets/images/index/left-border.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: -1px;
2 years ago
top: 0;
z-index: 10;
}
2 years ago
.right-border {
width: 560px;
height: 100%;
background: url("~@/assets/images//index/right-border.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0px;
top: 0;
z-index: 10;
}
2 years ago
.whyf-left {
width: 516px;
height: 100%;
background: url("~@/assets/images/index/whyf/left-border.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: -1px;
top: 0;
z-index: 10;
}
.whyf-right {
width: 516px;
height: 100%;
background: url("~@/assets/images//index/whyf/right-border.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0px;
top: 0;
z-index: 10;
}
2 years ago
.bot-border {
width: 100%;
height: 130px;
background: url("~@/assets/images//index/bot-border.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0px;
bottom: 0;
z-index: 10;
}
.top-border {
2 years ago
width: 100%;
height: 130px;
background: url("~@/assets/images//index/bot-border.png") no-repeat;
background-size: 100% 100%;
position: absolute;
2 years ago
left: 0px;
top: 0;
transform: scaleY(-1);
z-index: 10;
}
2 years ago
}</style>