<template>
        <div class="popWin" style="z-index: 10;">
            <div class="popWinBg"></div>
            <div class="popWinMain" style="height: 800px; width: 1300px;">
                <div class="gridView">
                    <div class="lozengeDecoration">
                        <div class="lozengeDecorationInner animate__fadeInDown animate__animated animate__slow"
                            style="visibility: visible; animation-delay: 0s; animation-name: fadeInDown;"></div>
                        <div class="lozengeDecorationInner animate__fadeInDown animate__animated animate__slow"
                            style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInDown;"></div>
                        <div class="lozengeDecorationInner animate__fadeInDown animate__animated animate__slow"
                            style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInDown;"></div>
                        <div class="lozengeDecorationInner animate__fadeInDown animate__animated animate__slow"
                            data-wow-delay="0.8999999999999999s"
                            style="visibility: visible; animation-delay: 0.9s; animation-name: fadeInDown;"></div>
                        <div class="lozengeDecorationInner animate__fadeInDown animate__animated animate__slow"
                            data-wow-delay="1.2s"
                            style="visibility: visible; animation-delay: 1.2s; animation-name: fadeInDown;"></div>
                    </div>
                    <div class="iconTopLeft">
                        <div class="iconTopLeftInner" style="height: 100%; width: 100%;"></div>
                    </div>
                    <div class="iconTopRight">
                        <div class="iconTopRightInner" style="height: 100%; width: 100%;"></div>
                    </div>
                    <div class="iconBottomRight">
                        <div class="iconBottomRightInner" style="height: 100%;"></div>
                    </div>
                    <div class="iconBottomLeft">
                        <div class="iconBottomLeftInner " style="height: 100%; width: 100%;"></div>
                    </div>
                    <div class="gridViewTop">
                        <div class="gTop1"></div>
                        <div class="gTop2"></div>
                        <div class="gTop3"></div>
                    </div>
                    <div class="gridViewCenter">
                        <div class="gridViewCenter_01"></div>
                        <div class="gridViewCenter_02"></div>
                        <div class="gridViewCenter_03"></div>
                    </div>
                    <div class="gridViewBottom">
                        <div class="gridViewBottom1"></div>
                        <div class="gridViewBottom2"></div>
                        <div class="gridViewBottom3"></div>
                    </div>
                </div>
                <div class="popClose"
                    @click="closePop"
                    style="translate: none; rotate: none; scale: none; transform: rotateX(180deg);"></div>
            </div>
        </div>
</template>
<script setup>
import {toRef,defineProps,defineEmits} from 'vue';

const props = defineProps({
    title: String,
    message: String,
    close: Function,
});

const emit = defineEmits('close');
const closePop = () => {
    // 关闭弹窗动画，一秒内完成宽度缩减为0
    const popWinMain = document.querySelector('.popWinMain');
    if (popWinMain) {
        popWinMain.style.transition = 'max-width 1s';
        popWinMain.style.maxWidth = '0';
    }
    setTimeout(() => {
        emit('close', false);
    }, 1100); // 等待1秒后隐藏弹窗
};
</script>
<style>
@keyframes zhankai {
    0% {
        max-width: 1%;
    }
    100% {
        max-width: 100%;
    }
}
.gridView {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: .41667rem;
    min-width: 1.30208rem;
    bottom: 0;
    right: 0;
    z-index: -1;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
}

.gridView .lozengeDecoration {
    position: absolute;
    left: 10px;
    width: 80px;
    top: 0;
    height: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start
}

.gridView .lozengeDecoration .lozengeDecorationInner {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEpJREFUeNpiZF75n4EAqAbiFjzyrUyUGgDENUyUGgBi4DKkhoABLTADcBkCkmwmYEAtsgATpQagG0KWAciGkG0AzBCKDAABgAADAKw7E0EELbJHAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    opacity: .9
}

.gridView .lozengeDecoration .lozengeDecorationInner:nth-child(1) {
    opacity: .5
}

.gridView .lozengeDecoration .lozengeDecorationInner:nth-child(2) {
    opacity: .6
}

.gridView .lozengeDecoration .lozengeDecorationInner:nth-child(3) {
    opacity: .7
}

.gridView .lozengeDecoration .lozengeDecorationInner:nth-child(4) {
    opacity: .8
}

.gridView .iconTopLeft {
    width: 23PX;
    height: 25PX;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    top: 10PX;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start
}

.gridView .iconTopLeft .iconTopLeftInner {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAZCAYAAADaILXQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAOVJREFUeNrs1D8LAWEcwPHfUZRiMFgsNoNMRqPRiomRmcFik8V8gywWAykvQF6BvAAvgFE2FuXP9+pRUnJ3fuP96lM3XN/unufuscKLh7iYGDbIi4cJubxv7DXsNt5CAxfkYLn1K16Aba6b2Gk9eRJLRDHCXGtZnNeaIoMtOuJjvsV7KOOEKq5a8RL6uKOOvficz3gaM4QxwEr+mPd4BAuksDZx0YoPUcTBLMdNK15B22xcDUdRGCeexcR8fl1zhohW3PlREma9bVEci1PxdSzGcdaMv2+oatjLkRvEg3gQ/zJPAQYAYf8kJApbcNEAAAAASUVORK5CYII=) left bottom no-repeat;
    background-size: 23PX 25PX;
    width: 1%;
    height: 0%;
    position: relative;
    flex-shrink: 0
}

.gridView .iconTopRight {
    width: 12PX;
    height: 11PX;
    flex-shrink: 0;
    position: absolute;
    right: 0;
    top: 0PX;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start
}

.gridView .iconTopRight .iconTopRightInner {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACRJREFUeNpiZF75/z8DCYCJgUTAAsSMRKr9T5YNoxpoogEgwAA95wPC9Q9Z7AAAAABJRU5ErkJggg==) left top no-repeat;
    background-size: 12PX 11PX;
    width: 0%;
    height: 30%;
    position: relative;
    flex-shrink: 0
}
@keyframes lachang {
    0% {
      width: 1px;
    }
    100% {
        width: 67px;
    }
}
.gridView .iconBottomRight {
    height: 39px;
    flex-shrink: 0;
    position: absolute;
    right: 0;
    bottom: 0PX;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    animation: lachang 1s ease-in-out;
    width: 67px;
}

.gridView .iconBottomRight .iconBottomRightInner {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAnCAYAAABUr/U/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAN9JREFUeNrs2TEOAVEAhOFdFG7gEriHuAFRKUWj5QKCAyhEJ1E6gCvQuoFKq9AwT15iw+MA5p9kslt/ye68zebl7T0j2ROhhMMrYIABBhhggAEGGGCAAQYYYIABBhhggAEGGGCAYZMqGK/M4vXkjtFWB+pN7Tpj1NSVmqsT9eCKEQDWEWSvzp3fGUO1pV7UXmb8r7WhTuN9Xz27rkmY0U28LtWd8zkjzGg9zKg6cj50FWe0o15dMYozOlaPrsfx9xldOH+bJGfUEaP5bUZTqfyS+qN8zKjrY5Kc0VQeAgwAFKIjAiGWhCgAAAAASUVORK5CYII=) right top no-repeat;
    background-size: 67px 39px;
    width: 30%;
    height: 0%;
    position: relative;
    flex-shrink: 0;
    animation: lachang 3s linear infinite;
    animation-delay: 2s;
}

.gridView .iconBottomLeft {
    width: 11PX;
    height: 11PX;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    bottom: 0PX;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start
}

.gridView .iconBottomLeft .iconBottomLeftInner {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACVJREFUeNpiZF75/z8DBDAyEABMDCSAUcVkK2ZBYv+nqskAAQYAhjADwpL0IbIAAAAASUVORK5CYII=) right bottom no-repeat;
    background-size: 11PX 11PX;
    width: 0%;
    height: 20%;
    position: relative;
    flex-shrink: 0
}

.gridView .gridViewTop {
    width: 100%;
    height: 24PX;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start
}

.gridView .gridViewTop .gTop1 {
    background: url(data:image/png;base64,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) no-repeat;
    background-size: 100% 100%;
    width: 96PX;
    height: 100%;
    position: relative;
    flex-shrink: 0
}

.gridView .gridViewTop .gTop2 {
    background: url(data:image/png;base64,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) no-repeat;
    background-size: 100% 100%;
    width: calc(100% - 107PX);
    height: 100%;
    position: relative;
    transform: scale(1.0001)
}

.gridView .gridViewTop .gTop3 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAYCAYAAAAs7gcTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASZJREFUeNrsU11PA0EIBG7TVk30j+uvrK8mpvHBNh4jM9z14019li1hdxkYYK8+Pe9fzN1K3bhaXKq72Ng0HkofRxwPr/SCjjNgCXQPi7EDtk9mOxt2fH9TKo+wptBB4IjA2N67ko274Z+Hj6LyVtEGLYI2QsBpszPkaVjOs3kuoPJF83gWiPvMNIAKgrOzAgUMy7I+cWcKgPWq7VCk1Y+0YEAIyI4b2ll5Ez6fZq90TbfacpIRTARbwDUNAuavrAE46tilFJDzQAjJrFxdhoONBRmKtHuAmGSrHUllSYhmYdD74epuFfWfBcilVg6N5xUseuBSs6Jm6PXWTD0quwnS2GWwOHFFe1VCf1t8o+UyL3Qa5W1WSdgv5B98/vv+GIw/lPEtwAAsy+S85br/vgAAAABJRU5ErkJggg==) no-repeat;
    background-size: 100% 100%;
    width: 11PX;
    height: 100%;
    position: relative;
    flex-shrink: 0
}

.gridView .gridViewCenter {
    width: 100%;
    height: calc(100% - 37PX);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start
}

.gridView .gridViewCenter .gridViewCenter_01 {
    background: url(data:image/png;base64,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) no-repeat;
    background-size: 100% 100%;
    width: 96PX;
    height: 100%;
    flex-shrink: 0;
    transform: scale(1.000001)
}

.gridView .gridViewCenter .gridViewCenter_02 {
    background: url(//images.wanjunshijie.com/demo/shujudaping/zhihuigongdi/assets/bg_05-2dc8fe7e.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    transform: scale(1.000001)
}

.gridView .gridViewCenter .gridViewCenter_03 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAA/CAYAAAA2RzKdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAOBJREFUeNrsljEOwjAMRf3tBDIgARIjl+EwHIurYmynaVMEQzckUslq6zz/fteLsb8/bgQGcWJiu0sSC1Ywk2TRcjxQOV+e5XRl2nANeMADHvCAB/yXMLbAOn7dj8P6acSM9bAd1v61TXcCge7EVqyQbcqrw6+e1dWx8uM2IkIgwuA50ft881/PeWmhCXsxLc3N1kDVczSkVZm75voWMCs3f17ihBeghhVpLTTP6FQNQlP1L0BaT+yGJjiadVNQrirhO545WYEFMkfCN1xMw/DtNmDP5aySd7b1FhJJLwEGADYuGG6RjlUSAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
    width: 11PX;
    height: 100%;
    flex-shrink: 0;
    transform: scale(1.000001)
}

.gridView .gridViewBottom {
    width: 100%;
    height: 13PX;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start
}

.gridView .gridViewBottom .gridViewBottom1 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAANCAYAAABW8mu8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrsV+1u2zAMJCnZSddie98+wx5u7zAU2J8C27AfW2ORu6OUbPvR7qMGmgwmIIiyLCe+I4+01tt3b/Xj3Xv9dHevnz98keXgcvjWdPnaxJeQA9bLg6fvLbRhjoYRstnfmv4y0WouVccwzU2z4RfsHvraJXgtShVtPNo2Bp6AOX7Lg54ISApCaQm6ijmAnoE2sqBOhjuctGQmYD94X3j890D9o8Wf/jBivvbVGEbwGe0kAhiXCQ7AV1cpedTEATzliERduMWLMt9ZqIz+lB8rJsa5YgbIpfbId4A/zybUfq6Nx2dJEjZ7NhP1pP9APxDVaqCG4LPQSrVEGWAr4l6mUvJ6A0G6wbeGjRqA0AfCUgoAB7bodqRQ+9EBSc8EkFO0oQYwdZgFl9gF6UvqzmMEZPRLlx7qOvJAKvylEwPpcRlFN7I+jOIb590FnSHWTxCgo+1kHTj+cdRfba2D74sn8JYJItkBuZ31+8XFSBCLsKlJMcssOL2BBoWerb84MoOyROCP7af7VoTXICCszjrt97G7eZV1tbn3CF+gOVAeoY9MYG2I4BfwIGD7EFtD9KrU3XXMN2/y+HS1B94+onxEfBwHH/+DgM1WkqBp9zrRrvOV+vJAiOXnSE+/Y3+S142E1ey7AAMAMkL/5TsbTHgAAAAASUVORK5CYII=) no-repeat;
    background-size: 100% 100%;
    width: 96PX;
    height: 100%;
    flex-shrink: 0;
    transform: scale(1.000001)
}

.gridView .gridViewBottom .gridViewBottom2 {
    background: url(data:image/png;base64,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) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    transform: scale(1.000001)
}

.gridView .gridViewBottom .gridViewBottom3 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAURJREFUeNpkkFtKBDEQRW8qVUl3Mm8QXJGLcU/+6AguQBBE0B34O+gaRMEvYZjypqebEWw6qXRzuHUqIV9uLyAqkCg+VI3QpFzJUymeFhvv5uewci8IUYAQvFUJXBIRJLrm5NpXT/0SMb8y5JkwQaYiCs8WISYgCIKwukbsvhDtjgxkAEWGdESeNWW3Ut3qyq2PiOkKUfdoMAZ4gI6e1nV0XbAu+X0Dtc+WSsVm2RRMmWCuXcfWBOsG1j/w33tL5AzgRo0GiikHytA6PySCmncEXzgUfDQkC4KtvSU0z1RXTPwmfOtR2fqY2N72UEHTIZWZa1l76hKviQPZHlOijCTPcrBa6Dn3XDhQv2WXD588wwhi0sgzJhZ69k9M3B0nP3kOm4wa9Dyj5xuv6ZH3/B/8E65I5YeJ13THqf0JmFaA41eAAQDlD0BMeA7ADAAAAABJRU5ErkJggg==) no-repeat;
    background-size: 100% 100%;
    width: 11PX;
    height: 100%;
    flex-shrink: 0;
    transform: scale(1.000001)
}

.popWinBg {
    position: fixed;
    z-index: 8;
    width: 100%;
    background: rgba(0,0,0,.9);
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: initial
}
@keyframes guanbi {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}
.popWin {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    position: fixed;
    z-index: 10;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    pointer-events: none;
}

.popWinMain {
    pointer-events: initial;
    position: relative;
    overflow: hidden;
    width: 0%;
    max-width: 1642px;
    height: 85%;
    max-height: 1004px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    animation: zhankai 1s ease-in-out;
}

.popWinMain .popClose {
    position: absolute;
    right: 20px;
    top: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACOSURBVHgBlZPRDYAgDERbJ3ATV9KN3EA3cARGcBWc4CzKF2lLuQRJgPc0XmAAiYiyjI2Zy9yNMLNM18cVAf7cdaML17Mle7vgSpqzp7WhSkw4IunCniQMO5I4bEhceKJYFgQq1t5+RitWYWXNlsD5210JAlWZEgz0rEow2HMjSSyPci0fucorBVM//5CRX/BumQitdJf8AAAAAElFTkSuQmCC) no-repeat;
    width: 16px;
    height: 16px;
    background-size: 100% 100%;
    cursor: pointer;
    z-index: 1000
}

.popWinMain .popWinMainInner {
    position: relative;
    width: calc(100% - 40px);
    height: calc(100% + -0px);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start
}

.popWinMain .popWinMainInner .slot {
    position: relative;
    width: 100%;
    height: calc(100% - 70px);
    overflow: auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start
}

.titleInfo {
    position: relative;
    width: 671px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    z-index: 10;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start
}

.titleInfo .title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 .05208rem #2ad4f0
}

</style>