wxjt-asset-web/src/views/dataShow/index.vue

<template>
  <div class="page">
    <div class="container" ref="appRef">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else>
        <dv-decoration-3 style="width:250px;height:30px;position: absolute;bottom: -10px;right: 60px;" />

        <HeaderComponent></HeaderComponent>

        <div class="body d-flex">
          <btns></btns>
          <div class="left d-flex flex-column">
            <dv-border-box-12>
              <MapComponent></MapComponent>
            </dv-border-box-12>
            <leftBottom class="mt-2"></leftBottom>
          </div>
          <div class="right d-flex flex-column ml-2">
            <dv-border-box-12><right1></right1></dv-border-box-12>
            <dv-border-box-12><right2></right2></dv-border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/mixin/drawMixin";
import MapComponent from "./map.vue";
import HeaderComponent from "./header.vue";
import right1 from "./right1.vue";
import right2 from "./right2.vue";
import btns from "./btns.vue";
import leftBottom from "./leftBottom.vue"
export default {
  components: {
    MapComponent,
    HeaderComponent,
    right1,
    right2,
    btns,
    leftBottom
  },
  mixins: [drawMixin],
  data() {
    return {
      loading: true,
    }
  },
  methods: {

  },
  computed: {},
  mounted() {
    setTimeout(() => {
      this.loading = false;
    },500)
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/scss/style.scss";
  .page {
    background: url("~@/assets/pageBg.png") no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    position: relative;
  }
  .container {
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;

    position: relative;
    top: 50%;
    left: 50%;

    .body {
      padding-top: 60px;
      padding-left: 14%;
      .left {
        flex-basis: 60%;
      }
      .right {
        flex: 1;
        padding-right: 60px;

        div + div {
          margin-top: .5rem;
        }
      }
    }
  }
</style>