water_maintenance/src/components/ThreeWorldEventQingXiCheAndQv/LoadingDemo.vue

<script setup>
import { QingXiCheAndQvMyThreeWorldStore } from "./store/QingXiCheAndQvMyThreeWorldStore.js";

</script>

<template>
    <div class="LoadingDemo">

        <div class="bgDiv"></div>
        <div class="main">
            <!-- 加载进度 {{ QingXiCheAndQvMyThreeWorldStore().loadPercentage }} % -->

            <!-- <img class="logo" src="../../assets/res/img/main/loading/logo.svg" /> -->
            <img class="logo" src="../../assets/res/img/main/loading/logo_2.svg" />
            <!-- <div class="logoTxt">市政供水仿真平台</div> -->
            <!-- <div class="logoTxt">市政供水仿真平台</div> -->
            <div class="loadTxt" >数据加载中Loading...</div>

            <div class="loading">

                <img class="progressImg" src="../../assets/res/img/main/loading/progress.webp" />
                <div class="loadDiv" :style="'width:' + QingXiCheAndQvMyThreeWorldStore().loadPercentage + '%;'" >
                    <img
                    :style="
                    'width:' + (100 / QingXiCheAndQvMyThreeWorldStore().loadPercentage * 95 )
                    + '%;left:' + (100 / QingXiCheAndQvMyThreeWorldStore().loadPercentage * 2.5 ) + '%;'
                    "
                    class="loadingImg" src="../../assets/res/img/main/loading/loading.webp" />
                </div>

                <div class="progressTxt" > {{ 
                    (
                        (QingXiCheAndQvMyThreeWorldStore().loadPercentage == "" || QingXiCheAndQvMyThreeWorldStore().loadPercentage == undefined || QingXiCheAndQvMyThreeWorldStore().loadPercentage == 0)
                        ? "0" : QingXiCheAndQvMyThreeWorldStore().loadPercentage
                    )
                }} % </div>

            </div>

        </div>

        
    </div>
</template>

<style lang="less" scoped>

.LoadingDemo * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.LoadingDemo {

    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9;
    color: #ffffff;
    font-size: 2.1428rem;
    
    // background-image: url("../../assets/res/img/bg.png");
    // background-position: center;
    // background-size: 100% 100%;
    
    .bgDiv {
        position: fixed;
        z-index: 0;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: #061f51;
    }

    .main {

        position: fixed;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;

        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // align-items: center;

        // background: linear-gradient( 164deg, #3A7DC1 0%, rgba(70,148,229,0.61) 39%, rgba(58,125,193,0) 100%), linear-gradient( 197deg, #3A7DC1 0%, rgba(70,148,229,0.63) 63%, rgba(58,125,193,0) 100%);
        
        .logo {
            width: 9.7857rem;
            left: 50%;
            top: 50%;
            margin: -10rem 0px 0px -4.89285rem;
            position: fixed;
        }

        .logoTxt {
            position: fixed;
            width: 100%;
            font-size: 2.1rem;
            color: #98BDDD;
            text-align: center;
            top: 50%;
            margin: 0.5rem 0px 0px 0px;
        }

        .loadTxt {
            position: fixed;
            width: 100%;
            text-align: center;
            top: 50%;
            margin: 9.5rem 0px 0px 0px;
            color: #9BC0F6;
            font-size: 1.8rem;
            font-weight: 400;

        }

        .loading {

            width: 46%;
            // height: 1.2857rem;
            height: 3.6rem;
            position: fixed;
            top: 50%;
            left: 27%;
            margin: 13.5rem 0px 0px 0px;

            .progressImg {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                z-index: 0;
            }
            
            // background-image: url("../../assets/res/img/main/loading/progress.svg");
            // background-position: center;
            // background-size: 100% 100%;

            .loadDiv {

                position: absolute;
                // width: 100%;
                width: 0%;
                top: 0px;
                left: 0px;
                height: 100%;
                overflow: hidden;

                .loadingImg {
                    
                    position: absolute;
                    width: 95%;
                    left: 2.5%;
                    top: 50%;
                    height: 0.8rem;
                    margin: -0.38rem 0px 0px 0px;

                }

            }

            .progressTxt {
                color: #9BC0F6;
                font-size: 1.5714rem;
                position: absolute;
                right: 1rem;
                top: 3rem;
            }

        }

    }

}

</style>