<template>
  <div class="content" id="box">
         <leftcard />
         <centercard />
         <rightcard />
  </div>
</template>
<script>
import "@/utils/flexible.js";
import ScaleBox from "./box.vue";
import drawMixin from "@/utils/drawMixin";
import leftcard from "./leftcard";
import centercard from "./centercard";
import rightcard from "./rightcard";
export default {
  mixins: [drawMixin],
  data () {
    return {
      decorationColor: ["#568aea", "#568aea"],
    };
  },
  components: {
    leftcard,
    centercard,
    rightcard,
    ScaleBox,
  },
  mounted () {
    // this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy () {
    clearInterval(this.timing);
  },
  methods: {
    cancelLoading () {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: calc(100% -94px);
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;

}
  // #box{
  // width: 1620px;
  // height: 680px;
  // position: absolute;
  // transform-origin: left top;
  // overflow: hidden;
  // }
</style>