<template>
  <div class="bigScreen">
    <div class="bigScreen-con" ref="appRef">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else>
        <div class="header">
          <div class="d-flex head">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex">
              <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
              <div class="title">
                <dv-decoration-5
                  :dur="1"
                  class="dv-dec-5"
                  :color="decorationColor" />
              </div>
              <dv-decoration-8
                class="dv-dec-8"
                :reverse="true"
                :color="decorationColor" />
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>
        </div>
        <screencontent v-show="isshow" />
      </div>
    </div>
  </div>
</template>
<script>
  import drawMixin from "@/utils/drawMixin";
  import screencontent from "./screencontent";
  export default {
    mixins: [drawMixin],
    data () {
      return {
        isshow: true,
        loading: true,
        decorationColor: ["#568aea", "#568aea"],
      };
    },
    components: {
      screencontent,
    },
    mounted () {

      // this.timeFn();
      this.cancelLoading();
    },
    beforeDestroy () {
      clearInterval(this.timing);
    },
    methods: {
      cancelLoading () {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "./index.scss";
</style>