iTDM-web/itdmWeb/src/views/user/firstIndex.vue

<template>
    <div class="chooseSystem-container" ref="systemContainer">
      <div class="header">
        <!-- <img src="../../assets/tg.png" alt="" style="width: auto;height: 100%;"> -->
      </div>
      <img src="../../assets/content.png" alt="" ref="systemContent">
      <div class="common-system system-iTDM" ref="systemiTDM" @click="chooseSystem('/dashboard/analysis')"></div>
    </div>
</template>

  <script>
  export default {
    name: '',
    data () {
      return {
        timer: null
      }
    },
    created () {
    },
    mounted () {
      // 设置定时器--因为初始执行方法时img没有加载完，所以获取不到高度；定时一段时间等img加载之后再执行
      this.timer = setTimeout(() => {
        this.setSystemStyle()
      }, 100)
      // this.$nextTick(() => {
      // })
      window.addEventListener('resize', this.setSystemStyle)
    },
    beforeDestroy() {
      // 清除定时器
      if(this.timer){
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    methods: {
      setSystemStyle(){
        // console.log(this.$refs)
        // 获取图片宽高和top以及left
        var systemWidth = this.$refs.systemContent.offsetWidth
        // var systemHeight = this.$refs.systemContent.offsetHeight
        // 因为高度是动态的，所以初始化可能会出现获取不到高度的情况
        var systemHeight = systemWidth * (700/1476)
        var systemTop = this.$refs.systemContent.offsetTop
        var systemLeft = this.$refs.systemContent.offsetLeft
        // console.log(systemWidth, systemHeight, systemTop, systemLeft)
        // 设置iTDM动态宽高和top以及left
        this.$refs.systemiTDM.style.width = (systemWidth * 0.234) + 'px'
        this.$refs.systemiTDM.style.height = (systemHeight * 0.107) + 'px'
        this.$refs.systemiTDM.style.top = (systemTop - systemHeight/2 + systemHeight*0.18) + 'px'
        this.$refs.systemiTDM.style.left = (systemLeft - systemWidth/2 + systemWidth*0.03) + 'px'
      },
      chooseSystem(url){
        this.$router.push({path: url})
        // this.$router.push({path: item.url})
      },
    }
  }
  </script>

  <style lang="scss">
  .chooseSystem-container{
    width: 100%;
    height: 100%;
    background: url('../../assets/bg.png') no-repeat center center;
    background-size: cover;
    position: relative;
    .header{
      width: 100%;
      height: 68px;
      position: absolute;
      right: 0;
      top: 20px;
      // padding-right: 20px;
      // background: url('../../assets/title.png') no-repeat right center;
      background-size: contain;
      background: url('../../assets/tg.png') no-repeat right center;
    }
    img{
      width: 80%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .common-system{
      cursor: pointer;
      position: absolute;
    }
    .system-iTDM{
      width: 0;
      height: 0;
      // background: red;
      top: 0;
      left: 0;
    }
  }
  </style>