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
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>
|