lg_frontend/pages/visual/PeakCoalView.vue

<template>
  <div class="peak-coal-content" :style="autoStyle">
    <div class="header-content">

    </div>

    <div class="body-content">
      <!--      左侧内容-->
      <div class="left-content">
        <div class="left-data-panel">
          <a-row :gutter="24">
            <a-col :span="12">
              <air-quality/>
            </a-col>
            <a-col :span="12">
              <pollutant-trends/>
            </a-col>
            <a-col :span="24">
              <overview-pollutants/>
            </a-col>
            <a-col :span="24">
              <check-data/>
            </a-col>
          </a-row>
        </div>
      </div>

      <!--      中间内容-->
      <div class="center-content">

      </div>
      <!--      右侧内容-->
      <div class="right-content">
        <div class="right-data-panel">
          <a-row :gutter="24">
            <a-col :span="12">
              <energy-use/>
            </a-col>
            <a-col :span="12">
              <enterprise-operations/>
            </a-col>
            <a-col :span="24">
              <device-run/>
            </a-col>
            <a-col :span="12">
              <warning-statistics/>
            </a-col>
            <a-col :span="12">
              <latest-warning/>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="footer-content">

    </div>

    <div class="left-icon"></div>

    <div class="right-icon"></div>

  </div>
</template>

<script>
export default {
  name: "PeakCoalView",
  data() {
    return {
      autoStyle: {}
    }
  },
  mounted() {
    this.$log.info('test')
    this.$log.error('test')
    this.$log.trace('test')
    this.$log.info('test')
    this.$log.warn('test')
    this.getAutoStyle()
    window.addEventListener('resize', (e) => {
      e.stopPropagation()
      this.getAutoStyle()
    }, false)
  },
  methods: {
    getAutoStyle() {
      const {scale, origin} = this.getScale()
      this.autoStyle = {
        transform: `scale(${scale})`,
        transformOrigin: origin
      }
    },
    getScale() {
      let scale = 1
      let origin = 'top center'
      const baseWidth = 9450
      const baseHeight = 3000
      const innerWidth = window.innerWidth
      const innerHeight = window.innerHeight
      const widthScale = innerWidth / baseWidth
      const scaleHeight = baseHeight * widthScale
      console.log('scaleHeight:', scaleHeight)
      if (scaleHeight <= innerHeight) {
        origin = 'left top'
        scale = widthScale
        if (scale > 1) {
          origin = 'left top'
        }
      } else {
        scale = innerHeight / baseHeight
      }
      return {scale, origin}
    },
  }
}
</script>
<style>
body, html, #__nuxt, #__layout {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}

.list-enter, .list-leave-to
  /* .list-leave-active for below version 2.1.8 */
{
  opacity: 0;
  transform: translateY(30px);
}
</style>
<style scoped lang="less">
@import "assets/styles/mixin";

.peak-coal-content {
  height: 3000px;
  width: 9450px;
  overflow: hidden;
  position: relative;
  user-select: none;

  .header-content {
    position: absolute;
    top: 0px;
    height: 507px;
    width: 100%;
    background: url("assets/peakCoalImages/header/first-title-bg.png") no-repeat center center;
  }

  .body-content {
    position: absolute;
    height: 100%;
    width: 100%;

    .left-content {
      position: absolute;
      left: 0px;
      top: 136px;
      width: 2935px;
      height: 2721px;
      background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px;
      padding: 300px 476px 100px 412px;
      perspective: 500px;
      .left-data-panel {
        height: 100%;
        width: 100%;
        transform: rotateY(2deg)  ;
        transform-origin: left center;
      }
    }

    .right-content {
      position: absolute;
      right: 0px;
      top: 136px;
      width: 2935px;
      height: 2721px;
      background: url("assets/peakCoalImages/right/right-content-bg.png") no-repeat center 60px;
      padding: 300px 476px 100px 480px;
      perspective: 500px;

      .right-data-panel {
        height: 100%;
        width: 100%;
        transform: rotateY(-2deg);
        transform-origin: right center;
      }
    }

    .center-content {
      position: absolute;
      left: 50%;
      top: 411px;
      transform: translateX(-50%);
      width: 4383px;
      height: 2628px;
      background: url("assets/peakCoalImages/center/center-content-bg.png") no-repeat center center;
    }
  }

  .footer-content {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 220px;
    background: url("assets/peakCoalImages/footer/footer-bg.png") no-repeat center center;
  }


  .left-icon {
    position: absolute;
    left: 0px;
    width: 531px;
    height: 100%;
    background: url("assets/peakCoalImages/left/left-icon.png") no-repeat center center;
    background-size: 100% 100%;
  }

  .right-icon {
    position: absolute;
    right: 0px;
    width: 531px;
    height: 100%;
    background: url("assets/peakCoalImages/right/right-icon.png") no-repeat center center;
    background-size: 100% 100%;
  }
}
</style>