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="left-border"></div>
    <div class="right-border"></div>
    <div class="bot-border"></div>
    <div class="top-border"></div>

    <ScreenHeader />
    <ScreenBottom />
    <ScreenContent />
    <ScreenContentLeft />
    <ScreenContentRight />
    <ZdyfLeftYfcj />
    <ZdyfRightGarden />
    <ZdyfRightTalents />
    <ZdyfCenterQyjj/>
    </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 ZdyfCenterQyjj from './dialog-module/zdyf-center/qyjj'

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,
    ZdyfLeftYfcj,
    ZdyfRightTalents,
    ZdyfRightGarden,
    ZdyfCenterQyjj
  },
  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>