yifeng_integration/src/views/next/index.vue

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