lg_frontend/pages/visual/PeakCoalView.vue

<template>
  <div class="peak-coal-content">
    <div class="container">
      <div class="header-content point">

      </div>

      <div class="body-content point">
        <!--      左侧内容-->
        <div class="left-content point">
          <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">
          <Map />
          <img class="center-bg" :src="centerBg" />
        </div>
        <!--      右侧内容-->
        <div class="right-content point">
          <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 point">

      </div>

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

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

<!--    <Map />-->

  </div>
</template>

<script>
const centerBg = require('@/assets/peakCoalImages/center/center-content-bg.png')
export default {
  name: "PeakCoalView",
  components: {},
  data() {
    return {
      autoStyle: {},
      centerBg
    }
  },
  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
      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;
  .point-none {
    pointer-events: none;
  }
  .point {
    pointer-events: auto;
  }
  .container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;

  }

  .header-content {
    position: absolute;
    top: 0px;
    height: 507px;
    width: 100%;
    .bg("~/assets/peakCoalImages/header/first-title-bg.png");

  }

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

    .left-content {
      position: absolute;
      left: 0px;
      top: 136px;
      width: 2935px;
      height: 2721px;
      .bg("~/assets/peakCoalImages/left/left-content-bg.png", 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;
      .bg("~/assets/peakCoalImages/right/right-content-bg.png", 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;
      .center-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        pointer-events: none;
      }
    }
  }

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


  .left-icon {
    position: absolute;
    left: 0px;
    width: 531px;
    height: 100%;
    .bg("~/assets/peakCoalImages/left/left-icon.png", center, center);
  }

  .right-icon {
    position: absolute;
    right: 0px;
    width: 531px;
    height: 100%;
    .bg("~/assets/peakCoalImages/right/right-icon.png", center, center);
  }
}
</style>