cdfg_h5/src/components/shared/Loading.vue

<template>
    <transition appear name="custom-classes-transition" leave-active-class="animated fadeOut faster">
        <div v-if="show" class="scene-loading" :class="{ small: small, default: thumbStyle }" @touchmove.prevent >
            <div class="content">
                <div :style="`transform:translateZ(0) scale(${small});`">
                    <div v-for="item in 3" :key="item" :class="`brick brick-${item} ${enter ? 'enter' : ''}`">
                        <div class="brick-top face"></div>
                        <div class="brick-bottom face"></div>
                        <div class="brick-left face"></div>
                        <div class="brick-right face"></div>
                        <div class="brick-front face"></div>
                        <div class="brick-back face"></div>
                    </div>
                </div>

                <div :class="`logo`" v-show="metadata.num">
                    <div>
                        <div v-if="loadingLogoFile" class="logo-main" :style="{ 'background-image': `url(${loadingLogoFile})` }"></div>
                        <div v-else>
                            <i class="iconfont icon-hengbiaoCN"></i>
                        </div>
                    </div>
                </div>
                <div class="copy-right" v-if="!loadingLogoFile">
                    <span>四维时代提供技术支持</span>
                </div>
            </div>
        </div>
    </transition>
</template>
<script setup>
import { ref, watch, computed, onMounted, defineProps } from 'vue'
import { useStore } from 'vuex'
import { useApp } from '@/app'
const props = defineProps({
    small: {
        type: Boolean,
        default: false,
    },
    thumb: {
        type: Boolean,
        default: false,
    },
})
const store = useStore()
const progres = ref(0)
const enter = ref(false)
const thumb = ref(null)
const thumbStyle = ref(null)
const show = ref(true)
const metadata = computed(() => store.getters['scene/metadata'])
const loadingLogoFile = computed(() => store.getters['scene/loadingLogoFile'])

onMounted(() => {
    enter.value = true
})

if (props.thumb) {
    useApp().then(app => {
        app.Scene.on('ready', () => {
            show.value = false
        })
        app.store.on('metadata', metadata => {
            if (metadata.entry) {
                thumb.value = app.resource.getUserResourceURL('thumb-2k.jpg')
            } else {
                thumb.value = require('@/assets/images/loading.jpg')
                thumbStyle.value = 'default'
            }
        })
    })
}
</script>
<style lang="scss" scoped>
@use "sass:math";
// $brick-width: 15px;
// $brick-height: 5px;

.scene-loading {
    $brick-width: 30px;
    $brick-height: 10px;
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
    z-index: 100;

    &.thumb {
        position: fixed;
        left: 0;
        top: 0;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        z-index: 5000;
        &.default {
            background-position: right center;
        }
    }

    * {
        opacity: 1 !important;
    }

    .content {
        width: 100%;
        height: 100%;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        .all {
            perspective: 100px;
            text-align: center;
            display: inline-block;
        }
        .brick {
            text-align: center;
            position: relative;
            width: $brick-width;
            height: $brick-height;
            transform-style: preserve-3d;
            transform-origin: math.div($brick-width, 2) math.div($brick-height, 2);
            margin: 0 auto math.div($brick-width, 12);
        }
        .brick-1 {
            animation: rorate 2s 1s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(30px);
        }
        .brick-2 {
            animation: rorate 2s 0.75s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(20px);
        }
        .brick-3 {
            animation: rorate 2s 0.5s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(10px);
        }

        .face {
            width: $brick-width;
            height: $brick-height;
            overflow: hidden;
            position: absolute;
            background: rgba(255, 255, 255, 0.4);
            opacity: 0;
        }
        .brick.enter {
            transition: 0.5s all;
            transform: rotateX(-30deg) rotateY(45deg);
            .face {
                transition: 0.5s all;
                opacity: 1;
            }
        }
        .brick-2 {
            .face {
                background: rgba(255, 255, 255, 0.3);
            }
            .brick-front,
            .brick-back {
                background: rgba(255, 255, 255, 0.4);
            }
        }
        .brick-3 {
            .face {
                background: rgba(255, 255, 255, 0.2);
            }
            .brick-front,
            .brick-back {
                background: rgba(255, 255, 255, 0.1);
            }
        }
        .brick-front {
            transform: translate3d(0, 0, math.div($brick-width, 2));
            background: rgba(255, 255, 255, 0.6);
        }
        .brick-top {
            width: $brick-width;
            height: $brick-width;
            transform: rotateX(90deg) translate3d(0, 0, math.div($brick-width, 2));
            background-color: rgba(255, 255, 255, 0.8);
        }
        .brick-bottom {
            width: $brick-width;
            height: $brick-width;
            transform: rotateX(-90deg) translate3d(0, 0, math.div(-$brick-height, 2));
            background-color: rgba(255, 255, 255, 0.8);
        }
        .brick-left {
            transform: rotateY(-90deg) translate3d(0, 0, math.div($brick-width, 2));
            background: rgba(255, 255, 255, 0.5);
        }
        .brick-right {
            transform: rotateY(90deg) translate3d(0, 0, math.div($brick-width, 2));
            background: rgba(255, 255, 255, 0.5);
        }
        .brick-back {
            transform: rotateY(180deg) translate3d(0, 0, math.div($brick-width, 2));
            background: rgba(255, 255, 255, 0.6);
        }
    }
    .logo {
        width: 100%;
        // height: 48px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        // margin-top: 12px;
        opacity: 0;
        // visibility: hidden;
        &.enter {
            animation: logo-enter 0.5s forwards;
            visibility: initial;
        }
        .logo-main {
            // width: 100%;
            // height: 80px;
            width: 140px;
            height: 70px;
            position: absolute;
            left: 50%;
            top: 80%;
            transform: translateX(-50%) translateY(-50%);
        }
        div {
            margin: 0 auto;
            width: 100%;
            height: 100%;
            position: relative;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            min-height: 70px;
        }
        i {
            position: absolute;
            left: 50%;
            top: 65%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 148px;
        }
    }
    .copy-right {
        color: rgba(255, 255, 255, 0.6);
        opacity: 0.5;
        position: absolute;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        line-height: 30px;
        height: 48px;
        white-space: nowrap;
        span {
            white-space: nowrap;
        }
    }
}
.small {
    $brick-width: 12px;
    $brick-height: 4px;
    display: table;
    table-layout: fixed;
    // pointer-events: none;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    // background-color: rgba(0, 0, 0, 0.45);
    z-index: 100;
    * {
        opacity: 1 !important;
    }

    .content {
        width: 100%;
        height: 100%;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        .all {
            perspective: 100px;
            text-align: center;
            display: inline-block;
        }
        .brick {
            text-align: center;
            position: relative;
            width: $brick-width;
            height: $brick-height;
            transform-style: preserve-3d;
            transform-origin: math.div($brick-width, 2) math.div($brick-height, 2);
            margin: 0 auto math.div($brick-width, 12);
        }
        .brick-1 {
            animation: rorate 2s 1s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(30px);
        }
        .brick-2 {
            animation: rorate 2s 0.75s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(20px);
        }
        .brick-3 {
            animation: rorate 2s 0.5s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(10px);
        }

        .face {
            width: $brick-width;
            height: $brick-height;
            overflow: hidden;
            position: absolute;
            background: rgba(255, 255, 255, 0.4);
            opacity: 0;
        }
        .brick.enter {
            transition: 0.5s all;
            transform: rotateX(-30deg) rotateY(45deg);
            .face {
                transition: 0.5s all;
                opacity: 1;
            }
        }
        .brick-2 {
            .face {
                background: rgba(255, 255, 255, 0.3);
            }
            .brick-front,
            .brick-back {
                background: rgba(255, 255, 255, 0.4);
            }
        }
        .brick-3 {
            .face {
                background: rgba(255, 255, 255, 0.2);
            }
            .brick-front,
            .brick-back {
                background: rgba(255, 255, 255, 0.1);
            }
        }
        .brick-front {
            transform: translate3d(0, 0, math.div($brick-width, 2));
            background: rgba(255, 255, 255, 0.6);
        }
        .brick-top {
            width: $brick-width;
            height: $brick-width;
            transform: rotateX(90deg) translate3d(0, 0, math.div($brick-width, 2));
            background-color: rgba(255, 255, 255, 0.8);
        }
        .brick-bottom {
            width: $brick-width;
            height: $brick-width;
            transform: rotateX(-90deg) translate3d(0, 0, math.div(-$brick-height, 2));
            background-color: rgba(255, 255, 255, 0.8);
        }
        .brick-left {
            transform: rotateY(-90deg) translate3d(0, 0, math.div($brick-width, 2));
            background: rgba(255, 255, 255, 0.5);
        }
        .brick-right {
            transform: rotateY(90deg) translate3d(0, 0, math.div($brick-width, 2));
            background: rgba(255, 255, 255, 0.5);
        }
        .brick-back {
            transform: rotateY(180deg) translate3d(0, 0, math.div($brick-width, 2));
            background: rgba(255, 255, 255, 0.6);
        }
    }
    .logo {
        width: 100%;
        // height: 48px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        // margin-top: 12px;
        opacity: 0;
        // visibility: hidden;
        &.enter {
            animation: logo-enter 0.5s forwards;
            visibility: initial;
        }
        .logo-main {
            // width: 100%;
            // height: 80px;
            width: 70px;
            height: 35px;
            position: absolute;
            left: 50%;
            top: 80%;
            transform: translateX(-50%) translateY(-50%);
        }
        div {
            margin: 0 auto;
            width: 100%;
            height: 100%;
            position: relative;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            min-height: 35px;
        }
        i {
            position: absolute;
            left: 50%;
            top: 65%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 74px;
        }
    }

    .logo-bottom {
        width: 100%;
        height: 48px;
        color: #fff;
        font-size: 16px;
        position: absolute;
        bottom: 42px;
        left: 0;
        div {
            margin: 0 auto;
            width: 100%;
            height: 100%;
            position: relative;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }
        i {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 140px;
        }
    }
}
[show-mode='mobile'],
[edit-mode='mobile'] {
    $brick-width: 24px;
    $brick-height: 8px;
    .content {
        .brick {
            width: $brick-width;
            height: $brick-height;
            transform-origin: math.div($brick-width, 2) math.div($brick-height, 2);
            margin: 0 auto math.div($brick-width, 12);
            &.enter {
                transition: 0.5s all;
                transform: rotateX(-30deg) rotateY(45deg);

                .face {
                    transition: 0.5s all;
                    opacity: 1;
                }
            }
        }
        .brick-1 {
            animation: rorate 2s 1s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(30px);
        }
        .brick-2 {
            animation: rorate 2s 0.75s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(20px);
        }
        .brick-3 {
            animation: rorate 2s 0.5s infinite linear;
            transform: rotateX(-30deg) rotateY(45deg) translateZ(10px);
        }
        .face {
            width: $brick-width;
            height: $brick-height;
        }
        .brick-front {
            transform: translate3d(0, 0, math.div($brick-width, 2));
        }
        .brick-top {
            width: $brick-width;
            height: $brick-width;
            transform: rotateX(90deg) translate3d(0, 0, math.div($brick-width, 2));
        }
        .brick-bottom {
            width: $brick-width;
            height: $brick-width;
            transform: rotateX(-90deg) translate3d(0, 0, math.div(-$brick-height, 2));
        }
        .brick-left {
            transform: rotateY(-90deg) translate3d(0, 0, math.div($brick-width, 2));
        }
        .brick-right {
            transform: rotateY(90deg) translate3d(0, 0, math.div($brick-width, 2));
        }
        .brick-back {
            transform: rotateY(180deg) translate3d(0, 0, math.div($brick-width, 2));
        }
    }
    .logo {
        margin-top: 5px;
        .logo-main {
            margin-top: 15px;
        }
        i {
            font-size: 100px;
        }
    }
    // .bottom-intro {
    //     div {
    //         height: 36px;
    //     }
    // }
    .logo-bottom {
        bottom: 0.7rem;
        i {
            font-size: 75px;
        }
        div {
            height: 36px;
        }
    }
}

@keyframes logo-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes rorate {
    0% {
        transform: rotateX(-30deg) rotateY(-45deg);
    }
    50% {
        transform: rotateX(-30deg) rotateY(-315deg);
    }
    100% {
        transform: rotateX(-30deg) rotateY(-315deg);
    }
}
</style>