water_maintenance/src/components/WindowQingXiCheAndQv/WindowCountdown.vue

<script setup>
import dayjs from "dayjs";
import { computed, onMounted, onUnmounted, ref } from "vue";
import { WindowCountdownStore } from "@/components/WindowQingXiCheAndQv/store/WindowCountdownStore.js";
import { ComVal } from "../ThreeWorldEventQingXiCheAndQv/common/ComVal.js";


let txtCode = "WindowCountdown";

/**
 * 退出的逻辑
 */
const exitEvent = () => {
    ComVal.find().fpsEventDel(txtCode);

    if (typeof WindowCountdownStore().obj.callbackEvent == "function") {
        WindowCountdownStore().obj.callbackEvent(
            WindowCountdownStore().obj.myJson
        );
    }

    WindowCountdownStore().obj.viewOpen = false;
    WindowCountdownStore().obj.callbackEvent = null;
    WindowCountdownStore().obj.myJson = null;
}

onMounted(() => {
    txtEvent();
});


/**
 * 倒计时展示的逻辑
 */
const txtEvent = () => {
    
    ComVal.find().fpsEventDel(txtCode);
    ComVal.find().fpsEventAdd(txtCode, null, (1000 / 1), function(fpsEventAddRet) {
        
        WindowCountdownStore().obj.num = parseInt(WindowCountdownStore().obj.num) - 1;
        if (WindowCountdownStore().obj.num <= 0) {
            ComVal.find().fpsEventDel(fpsEventAddRet.code);
            exitEvent();
        }

    });
    
}

</script>

<template>
    <div class="WindowCountdown">
        
        <div class="main">
            
            <div class="yuan">
                {{ WindowCountdownStore().obj.num }}
            </div>

        </div>

    </div>
</template>

<style lang="less" >
* {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
</style>

<style lang="less" scoped>
.WindowCountdown * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.WindowCountdown {
    position: fixed;
    z-index: 0;
    width: 0px;
    height: 0px;
    top: 0px;
    left: 0px;
    z-index: 1000;

    .main {

        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: #00000050;

        .yuan {
            
            position: fixed;
            width: 15rem;
            height: 15rem;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            margin: -7.5rem 0px 0px -7.5rem;

            // background-image: url("../../assets/res/img/window/yuan.svg");
            // background-image: url("../../assets/res/img/window/yuan.webp");
            background-image: url("../../assets/res/img/window/yuan2.svg");
            background-position: center;
            background-size: 100% 100%;

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

            font-size: 10rem;
            font-weight: 500;
            color: #ffffff;

        }

    }

    
}
</style>