btgym/src/views/ty/index.vue

<template>
  <div id="ty">

    <div class="main">
      <div class="left">
        <div class="tiyuBla">
          <div style="position: absolute; right: 28%; top: 52%">体育</div>
        </div>

        <div class="tongji"></div>

        <div class="bfb">
          <div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div>

          <div class="num">24,352,345</div>

          <!-- <div class="cntTxt">
                     <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
                     <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
                  </div> -->

          <div class="cntTxt">
            <canvas
              id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
              :width="cWidth"
              :height="cHeight"
              class="charts"
              @click="tap"
            />
          </div>

          <div class="rsType">
            <div class="typeItem">
              <div>安静</div>
              <img
                style="width: 45%; height: 40%; margin-top: 10%"
                src="../../assets/ty/quiet.png"
              />
            </div>
            <div class="typeItem">
              <div>舒适</div>
              <img
                style="width: 45%; height: 40%; margin-top: 10%"
                src="../../assets/ty/soft.png"
              />
            </div>
            <div class="typeItem">
              <div>拥挤</div>
              <img
                style="width: 45%; height: 40%; margin-top: 10%"
                src="../../assets/ty/crowd.png"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="item" ></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  mounted() {
    let cc = window.document.getElementById("app");
    // 清除其他多余的classname
    if (cc.className.indexOf('ty_bg') > -1) {
      cc.className = "btgym";
    } else {
      cc.classList.add("ty_bg");
    }
  },
  methods: {},
};
</script>
<style>
.ty_bg {
  clear: both;
  background-image: url("../../assets/ty/tybg.jpg") !important;
}
</style>
<style lang="less" scoped>
.main {
  display: flex;
  justify-content: space-between;
  .left {
    width: 30%;
    height: 75vh;
    // border: 1px solid red;
    margin-left: 2%;
    margin-top: -4%;
    .tiyuBla {
      width: 100%;
      height: 40%;
      background-image: url("../../assets/ty/ins_title_bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: white;
      font-size: 38px;
      font-weight: bold;
      position: relative;
    }

    .tongji {
      width: 100%;
      height: 35%;
      border: 1px solid #019ade;
    }

    .bfb {
      width: 100%;
      height: 25%;
      background-image: url("../../assets/ty/pins_bh.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      .renshu {
        span{
          margin-right: 5px;
          img{
            width: 10px;
            height: 12px;
          }
        }
        position: absolute;
        top: 30%;
        left: 10%;
        color: #8199bd;
        font-weight: bold;
        font-size: 14px;
      }
      .num {
        color: white;
        font-weight: bold;
        font-size: 20px;
        position: absolute;
        top: 45%;
        left: 6%;
      }
      .cntTxt {
        width: 20%;
        height: 60%;
        // border: 1px solid red;
        position: absolute;
        top: -5%;
        left: 30.5%;
        text-align: center;
        padding-top: 2.5%;
      }
      .rsType {
        width: 30%;
        height: 35%;
        // border: 1px solid red;
        position: absolute;
        top: 30%;
        right: 4%;
        display: flex;
        justify-content: space-between;
        .typeItem {
          width: 30%;
          height: 95%;
          text-align: center;
          color: #687c9e;
          font-size: 14px;
        }
      }
    }
  }

  .right {
    margin-top: 3%;
    width: 65%;
    height: 66vh;
    // border: 1px solid #019ade;
    display: flex;
    flex-wrap: wrap;
    // align-items: center;
    align-content: center;
    justify-content: center;
    background-image: url("../../assets/ty/vbig_bg.png") ;
    background-size:contain;
    background-repeat:no-repeat;
    .item{
      width: 40%; 
      height: 40%; 
      margin-top: 5px;
      background-image: url("../../assets/ty/vsmall_bg.png") ;
      background-size:contain;
      background-repeat:no-repeat;
    }
    .item:nth-child(2),.item:nth-child(4){
      margin-right: 60px;
    }
  }

  .charts {
    width: 225px;
    height: 150px;
  }
  .charts1 {
    width: 550px;
    height: 250px;
  }
}
</style>