移风店大屏前端
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.

146 lines
3.2 KiB

2 years ago
<template>
<div
class="next"
:style="{
width: width + 'px',
height: height + 'px',
transform: `scale(${scale}) translate(-50%, -50%)`,
}"
>
<div class="left-border"></div>
<div class="right-border"></div>
<div class="bot-border"></div>
<div class="top-border"></div>
<ScreenHeader />
<ScreenBottom/>
<ScreenContent />
<ScreenContentLeft />
<ScreenContentRight />
</div>
</template>
<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'
let width = 0
let height = 0
export default {
name: 'next',
data () {
return {
width: 1920,
height: 960
}
},
computed: {
...mapGetters(['scale'])
},
components: {
ScreenHeader,
ScreenContent,
ScreenContentLeft,
ScreenContentRight,
ScreenBottom
},
beforeRouteEnter (to, from, next) {
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 () {
if (width && height) {
this.width = width
this.height = height
}
},
mounted () {
this.setScale()
window.addEventListener('resize', debounce(this.setScale))
},
methods: {
...mapActions({
set_scale: 'SET_SCALE'
}),
// 获取缩放比
getScale () {
const { width, height } = this
const ww = window.innerWidth / width
const wh = window.innerHeight / height
return ww < wh ? ww : wh
},
// 设置缩放比
setScale () {
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;
.left-border {
width: 560px;
height: 100%;
background: url("~@/assets/images/index/left-border.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left:-1px;
top: 0;
z-index: 10;
}
.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;
}
.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{
width: 100%;
height: 130px;
background: url("~@/assets/images//index/bot-border.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0px;
top: 0;
transform: scaleY(-1);
z-index: 10;
}
}
</style>