1.做适应平板显示的内容大小

loulijun2021

2022-08-05 d33eacc1f85ac3a736b33ba4713a19aae466d711

 src/views/xtsy/index.vue

@@ -81,19 +81,23 @@
    <div class="center">
      <div class="title" style="margin-top: 20px"><i class="el-icon-s-fold" style="margin-right: 5px" />用户概况</div>
      <div class="center_content">
        <div class="content">
        <div class="content" :style="{height: isIpad?'300px':'400px'}">
          <div class="content_title">活跃时段</div>
          <div>
            <div style="width: 100%;height: 300px;margin: 20px 0 0 10px">
              <div id="line01" style="width: 100%;height:100%" />
            </div>
            <div
              id="line01"
              style="width: 100%;"
              :style="{height:isIpad?'200px':'300px'}"
            />
          </div>
        </div>
        <div class="content">
        <div class="content" :style="{height: isIpad?'300px':'400px'}">
          <div class="content_title">Top用户</div>
          <div style="width: 100%;height: 300px;margin: 20px 0 0 10px">
            <div id="bar01" style="width: 100%;height:100%" />
          </div>
          <div
            id="bar01"
            style="width: 100%;"
            :style="{height:isIpad?'200px':'300px'}"
          />
        </div>
      </div>
    </div>
@@ -108,23 +112,24 @@
  name: 'Index',
  data() {
    return {
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      barTopColor01: ['42,197,137', '187,236,218'],
      barTopColor02: ['248,216,76', '255,250,238'],
      barTopColor03: ['42,197,137', '187,236,218'],
      barTopColor04: ['232,103,103', '253,240,240']

    }
  },
  created() {
    console.log(document.documentElement.clientHeight, 1)
    console.log(document.documentElement.clientWidth, 2)

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.handleEcharts()
    setTimeout(() => {
      this.handleEcharts()
    }, 10)
  },
  methods: {
    // 获取页面高度
@@ -133,6 +138,9 @@
        this.mainHeight = window.innerHeight - 120
        // this.mainHeight = window.innerHeight - 200
        // this.tableHeight = this.mainHeight - 100

        // this.isIpad = this.mainHeight <= 768
        this.isIpad = window.innerHeight < 769
      })
    },
    handleEcharts() {
@@ -168,6 +176,12 @@
      loadEcharts('bar01', bar01(data))
    },
    async getLine01() {
      // if (this.isIpad) {
      //   document.getElementById('line01').style.height = '200px'
      // } else {
      //   document.getElementById('line01').style.height = '300px'
      // }
      // console.log(document.getElementById('line01'))
      const data2 = [
        { key: '2', value: 0 },
        { key: '4', value: 0.2 },
@@ -258,7 +272,8 @@

    .content {
      width: 49%;
      height: 400px;
      //height: 400px;

      background-color: #fff;
      border-radius: 5px;