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.
339 lines
8.9 KiB
339 lines
8.9 KiB
<template>
|
|
<div
|
|
class="next"
|
|
:style="{
|
|
width: width + 'px',
|
|
height: height + 'px',
|
|
transform: `scale(${scale}) translate(-50%, -50%)`,
|
|
}"
|
|
>
|
|
<div
|
|
:class="
|
|
navId != 'whyf'
|
|
? navId == 'hsyf'
|
|
? 'left-border-red'
|
|
: 'left-border'
|
|
: 'whyf-left'
|
|
"
|
|
></div>
|
|
<div
|
|
:class="
|
|
navId != 'whyf'
|
|
? navId == 'hsyf'
|
|
? 'right-border-red'
|
|
: 'right-border'
|
|
: 'whyf-right'
|
|
"
|
|
></div>
|
|
<div :class="navId == 'hsyf' ? 'bot-border-red' : 'bot-border'"></div>
|
|
<div :class="navId == 'hsyf' ? 'top-border-red' : 'top-border'"></div>
|
|
|
|
<ScreenHeader :navId="navId" />
|
|
<ScreenBottom :navId="navId" v-if="navId != 'whyf'" />
|
|
<ScreenContent />
|
|
<ScreenContentLeft v-if="navId != 'whyf'" />
|
|
<ScreenContentRight v-if="navId != 'whyf'" />
|
|
<ZdyfLeftYfcj />
|
|
<ZdyfRightGarden />
|
|
<ZdyfRightTalents />
|
|
<HsyfLeftOrganization />
|
|
<ZdyfCenterQyjj />
|
|
<ZdyfLeftldgh />
|
|
<HsyfLeftCompany />
|
|
<partyCommitteeZhen />
|
|
<partyCommitteeXincun />
|
|
<partyCommitteeZirancun />
|
|
<partyCommitteeWangge />
|
|
<partyCommitteeDangyuan />
|
|
<partyCommitteeDyzxh />
|
|
<ZdyfLeftYflz />
|
|
<dyfcModal />
|
|
<djhdModal />
|
|
<ywqsModal />
|
|
<partyCommitteeDyzxh />
|
|
<partyCommitteeDyzxh />
|
|
<partyCommitteeDyzxh />
|
|
<HsyfAttractions />
|
|
<HsyfJzfw />
|
|
<ylqdModal />
|
|
<ZdyfKeyEnterprises />
|
|
<ZdyfKeyEnterprisesDetail />
|
|
<EventAnalysis />
|
|
<EventProcessing />
|
|
<KeyPersonnel />
|
|
<ZdyfRightZx />
|
|
<SzyfRightTalents />
|
|
<ZdyfLeftChackPdf />
|
|
<yzfcModal />
|
|
</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'
|
|
import ZdyfLeftYfcj from './dialog-module/zdyf-left/yfcj'
|
|
import ZdyfLeftYflz from './dialog-module/zdyf-left/yfclz.vue'
|
|
import ZdyfLeftChackPdf from './dialog-module/zdyf-left/chackPdf.vue'
|
|
import ZdyfRightGarden from './dialog-module/zdyf-right/kyll/garden.vue'
|
|
import ZdyfRightZx from './dialog-module/zdyf-right/zyzx.vue'
|
|
import ZdyfRightTalents from './dialog-module/zdyf-right/kyll/talents.vue'
|
|
import SzyfRightTalents from './dialog-module/szyf-right/talents.vue'
|
|
import ZdyfKeyEnterprises from './dialog-module/zdyf-right/kyll/keyEnterprises.vue'
|
|
import ZdyfKeyEnterprisesDetail from './dialog-module/zdyf-right/kyll/keyEnterprisesDetail.vue'
|
|
import HsyfLeftOrganization from './dialog-module/hsyf-left/organization/organization.vue'
|
|
import HsyfLeftCompany from './dialog-module/hsyf-left/company/company.vue'
|
|
import HsyfAttractions from './dialog-module/hsyf-left/company/attractions.vue'
|
|
import HsyfJzfw from './dialog-module/hsyf-left/company/jzfw.vue'
|
|
import partyCommitteeZhen from './dialog-module/hsyf-left/partyCommittee/zhen.vue'
|
|
import partyCommitteeXincun from './dialog-module/hsyf-left/partyCommittee/xincun.vue'
|
|
import partyCommitteeZirancun from './dialog-module/hsyf-left/partyCommittee/zirancun.vue'
|
|
import partyCommitteeWangge from './dialog-module/hsyf-left/partyCommittee/wangge.vue'
|
|
import partyCommitteeDangyuan from './dialog-module/hsyf-left/partyCommittee/dangyuan.vue'
|
|
import partyCommitteeDyzxh from './dialog-module/hsyf-left/partyCommittee/dyzxh.vue'
|
|
import dyfcModal from './dialog-module/hsyf-right/dyfcModal.vue'
|
|
import yzfcModal from './dialog-module/szyf-right/yzfcModal.vue'
|
|
import djhdModal from './dialog-module/hsyf-right/djhdModal.vue'
|
|
import ywqsModal from './dialog-module/hsyf-right/ywqsModal.vue'
|
|
import ylqdModal from './dialog-module/hsyf-right/ylqdModal.vue'
|
|
import ZdyfCenterQyjj from './dialog-module/zdyf-center/qyjj'
|
|
import ZdyfLeftldgh from './dialog-module/zdyf-left/ldgh'
|
|
import EventAnalysis from './dialog-module/szyf-left/eventAnalysis.vue'
|
|
import EventProcessing from './dialog-module/szyf-left/eventProcessing.vue'
|
|
import KeyPersonnel from './dialog-module/szyf-left/keyPersonnel.vue'
|
|
|
|
let width = 0
|
|
let height = 0
|
|
export default {
|
|
name: 'next',
|
|
components: {
|
|
ScreenHeader,
|
|
ScreenContent,
|
|
ScreenContentLeft,
|
|
ScreenContentRight,
|
|
ScreenBottom,
|
|
ZdyfLeftYfcj,
|
|
ZdyfRightTalents,
|
|
ZdyfRightGarden,
|
|
ZdyfCenterQyjj,
|
|
ZdyfLeftldgh,
|
|
HsyfLeftOrganization,
|
|
HsyfLeftCompany,
|
|
partyCommitteeZhen,
|
|
partyCommitteeXincun,
|
|
partyCommitteeZirancun,
|
|
partyCommitteeWangge,
|
|
partyCommitteeDangyuan,
|
|
partyCommitteeDyzxh,
|
|
HsyfAttractions,
|
|
HsyfJzfw,
|
|
dyfcModal,
|
|
djhdModal,
|
|
ywqsModal,
|
|
ZdyfLeftYflz,
|
|
ZdyfKeyEnterprises,
|
|
ZdyfKeyEnterprisesDetail,
|
|
ylqdModal,
|
|
EventAnalysis,
|
|
EventProcessing,
|
|
ZdyfRightZx,
|
|
KeyPersonnel,
|
|
SzyfRightTalents,
|
|
ZdyfLeftChackPdf,
|
|
yzfcModal
|
|
},
|
|
data () {
|
|
return {
|
|
width: 1920,
|
|
height: 960
|
|
}
|
|
},
|
|
watch: {
|
|
navId (val) {
|
|
// console.log('val::', val)
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['scale', 'navId'])
|
|
},
|
|
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 () {
|
|
// 获取屏幕高度
|
|
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')
|
|
|
|
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;
|
|
}
|
|
|
|
.left-border-red {
|
|
width: 560px;
|
|
height: 100%;
|
|
background: url("~@/assets/images/index/left-border-red.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: -1px;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.right-border-red {
|
|
width: 560px;
|
|
height: 100%;
|
|
background: url("~@/assets/images/index/right-border-red.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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-red {
|
|
width: 100%;
|
|
height: 130px;
|
|
background: url("~@/assets/images/index/bot-border-red.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0;
|
|
transform: scaleY(-1);
|
|
z-index: 10;
|
|
}
|
|
|
|
.bot-border-red {
|
|
width: 100%;
|
|
height: 130px;
|
|
background: url("~@/assets/images/index/bot-border-red.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>
|
|
|