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 />
  </div>
</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 ZdyfRightGarden from './dialog-module/zdyf-right/kyll/garden.vue'
import ZdyfRightTalents from './dialog-module/zdyf-right/kyll/talents.vue'
import HsyfLeftOrganization from './dialog-module/hsyf-left/organization/organization.vue'
import ZdyfCenterQyjj from './dialog-module/zdyf-center/qyjj'
import ZdyfLeftldgh from './dialog-module/zdyf-left/ldgh'

let width = 0
let height = 0
export default {
  name: 'next',
  data() {
    return {
      width: 1920,
      height: 960
    }
  },
  watch:{
    navId(val){
      console.log('val::', val)
    }
  },
  computed: {
    ...mapGetters(['scale', 'navId'])
  },
  components: {
    ScreenHeader,
    ScreenContent,
    ScreenContentLeft,
    ScreenContentRight,
    ScreenBottom,
    ZdyfLeftYfcj,
    ZdyfRightTalents,
    ZdyfRightGarden,
    ZdyfCenterQyjj,
    ZdyfLeftldgh,
    HsyfLeftOrganization
  },
  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>