eiacloud-mcp-ui/src/components/login.vue

<!-- 新版登录弹窗 / 页面内嵌 -->
<template>
    <component
        :is="asPage ? 'div' : 'el-dialog'"
        v-bind="rootBind"
        @update:model-value="onDialogVisibleChange"
    >
        <div v-if="!asPage" class="login-header">
            <!-- 关闭按钮 -->
            <icon-svg name="closeMessage" size="24px" class="dialog-close" @click="handleClose" />
        </div>
        <div class="login-box">
            <!-- 轮播图 -->
            <div v-if="isPC" class="login-side-view">
                <el-carousel height="430px" arrow="never">
                    <el-carousel-item v-for="item in sideViewList" :key="item.id">
                        <div class="login-side-view-item">
                            <img :src="item.img" alt="">
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <!-- 登录方式切换 -->
            <div class="login-way">

                <!-- 切换 -->
                <div class="way-tab">
                    <div
                        v-for="item in visibleLoginWayTab"
                        :key="item.index"
                        class="way-tab-item"
                        :class="{ 'is-active': item.index === loginWayIndex }"
                        @click="handleWayIndex(item.index)"
                    >
                        <icon-svg :name="item.icon" size="18px" class="way-tab-icon" />
                        <span class="way-tab-text">{{ item.title }}</span>
                    </div>
                </div>

                <!-- 内容展示 -->
                <div class="way-item">
                    <!-- 密码登录 -->
                    <div class="way-item-center" v-show="loginWayIndex === 0">
                        <h3 class="wic-title">云助手账号登录</h3>
                        <!-- 手机号 -->
                        <input class="way-item-input" id="username" placeholder="请输入手机号" v-model="phoneNumber" />
                        <!-- 密码 -->
                        <div class="way-item-lcl">
                            <input class="way-item-input" id="password" placeholder="请输入密码"
                                :type="showPassword ? 'text' : 'password'" autocomplete="off"
                                v-model="passwordNumber" />
                            <icon-svg :name="showPassword ? 'password_eye_off' : 'password_eye_on'" size="14px"
                                style="cursor:pointer" @click="showPassword = !showPassword" />
                        </div>
                        <!-- 记住密码 -->
                        <div class="way-checkbox">
                            <el-checkbox v-model="checkRemember"></el-checkbox>
                            <span class="way-checkbox-password">记住密码</span>
                        </div>
                        <!-- 登录按钮 -->
                        <span class="way-login-btn" @click="submitForm">登录</span>
                    </div>

                    <!-- 验证码登录 -->
                    <div class="way-item-center" v-show="loginWayIndex === 1">
                        <h3 class="wic-title">手机验证码登录/注册</h3>
                        <!-- 手机号 -->
                        <input class="way-item-input" id="username" placeholder="请输入手机号" v-model="phoneNumber" />
                        <!-- 验证码 -->
                        <div class="way-item-lcl">
                            <input class="way-item-input" id="code" placeholder="请输入验证码" v-model="codeNumber" />
                            <span class="way-item-code" @click="sendMessage">{{ codeText }}</span>
                        </div>
                        <!-- 登录协议 -->
                        <div class="way-checkbox">
                            <el-checkbox v-model="checkProtocol"></el-checkbox>
                            <span class="way-checkbox-text">我已阅读并同意<span
                                    @click="openUrl('https://www.eiacloud.com/hpy/lawstandardApp/getDetailYS?type=agreement')">《用户协议》</span>和<span
                                    @click="openUrl('https://www.eiacloud.com/hpy/lawstandardApp/getDetailYS')">《隐私政策》</span></span>
                        </div>
                        <span class="way-login-btn" @click="submitForm">登录/注册</span>
                    </div>

                    <div class="way-item-center" v-show="loginWayIndex === 2">
                        <div class="scan-subtab">
                            <div class="scan-subtab-item" :class="{'is-active': scanTab === 'app'}" @click="handleAppScanClick">
                                <icon-svg name="lg_app" size="20px" class="scan-subtab-icon" />
                                <span>APP扫码登录</span>
                            </div>
                            <div class="scan-subtab-item" :class="{'is-active': scanTab === 'wechat'}" @click="wechatLogin">
                                <icon-svg name="lg_weixin" size="20px" class="scan-subtab-icon" />
                                <span>微信登录</span>
                            </div>
                        </div>

                        <!-- APP 二维码 -->
                        <div v-show="scanTab === 'app'" class="way-qr-container">
                            <div class="way-qr">
                                <img v-if="qrCodeImage" :src="qrCodeImage" alt="二维码">

                                <!-- 二维码失效 -->
                                <div class="error-qr" v-show="!qrCodeValid && qrCodeImage">
                                    <p>二维码已失效</p>
                                    <span @click="resetQrCode">点击刷新</span>
                                </div>
                            </div>

                            <!-- 提示 -->
                            <div class="way-qr-text">请使用<span>环评云助手APP</span>扫码登录</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="confirm-box" v-show="qrCodeType == 2">
            <p class="p-h3">扫码成功</p>
            <p class="p-text">请按照APP提示完成相关操作</p>
        </div>
        <div class="confirm-box-fail" v-show="qrCodeType == 4">
            <p class="p-h3">用户取消授权</p>
        </div>
    </component>
</template>

<script setup>
import { watch, computed, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue';
import globalStore from "@/store/modules/global";
import { codeLogin, passwordLogin, getCode, selectQrCode, selectQrLoop, qrLogin } from "@/api/login";
import { ElMessage } from 'element-plus';
import { getRememberInfo, remember } from '@/utils/auth';
import { checkPhone, IsPC } from "@/utils/common";
import { wechatLoginUrl } from '@/utils/config.js';

const props = defineProps({
    /** 作为独立页面内容展示，非弹窗 */
    asPage: {
        type: Boolean,
        default: false,
    },
});

const global = globalStore();
const isPC = IsPC();
const loginVisable = computed(() => global.loginVisable);
const emit = defineEmits(["update:modelValue", "saveUser", "closed"]);
const dialogVisible = computed(() => props.asPage || loginVisable.value);

const rootBind = computed(() => {
    const className = [
        "lc-dialog",
        { "lc-dialog--mobile": !isPC, "lc-dialog--page": props.asPage },
    ];
    if (props.asPage) {
        return { class: className };
    }
    return {
        modelValue: dialogVisible.value,
        class: className,
        alignCenter: true,
        showClose: false,
        beforeClose: handleClose,
        style: "padding: 0;border-radius: 12px;",
    };
});

const onDialogVisibleChange = (visible) => {
    if (props.asPage) return;
    triggerLoginVisible.value(visible);
};
const loginWayTab = ref([
    {
        title: "账号",
        index: 0,
        icon: "lg_account",
    },
    {
        title: "手机",
        index: 1,
        icon: "lg_phone",
    },
    {
        title: "扫码",
        index: 2,
        icon: "lg_scan",
    },
]);
const visibleLoginWayTab = computed(() =>
    isPC ? loginWayTab.value : loginWayTab.value.filter((item) => item.index !== 2),
);
const sideViewList = ref([
    {
        id: 0,
        img: 'https://cdntest.eiacloud.com/ai/approval/icons/sideView1.png',
    },
    {
        id: 1,
        img: 'https://cdntest.eiacloud.com/ai/approval/icons/sideView2.png',
    },
    {
        id: 2,
        img: 'https://cdntest.eiacloud.com/ai/approval/icons/sideView3.png',
    },
])
const loginWayIndex = ref(0); // 选中的方式
const scanTab = ref('app'); // 扫码方式：'app' 或 'wechat'
const showPassword = ref(false); // 是否显示密码
const phoneNumber = ref(''); // 手机号
const passwordNumber = ref(''); // 密码
const checkRemember = ref(false); //是否记住密码
const codeNumber = ref(''); // 验证码
const codeText = ref("获取验证码"); // 验证码文本
const codeTimer = ref(null); //验证码定时器
const codeSecond = ref(60); //验证码倒计时
const checkProtocol = ref(false); //是否同意协议
const qrCodeImage = ref(''); // 二维码图片
const qrCodeType = ref(0);// 0 超时 1 等待扫描 2 已扫描 3 已确认 4 已取消
const qrCodeTimer = ref(null);//二维码定时器
const qrCodeValid = ref(false);//二维码是否有效

const stopAppScanLogin = () => {
    if (qrCodeTimer.value) {
        clearInterval(qrCodeTimer.value);
        qrCodeTimer.value = null;
    }
    qrCodeValid.value = false;
}

const startAppScanLogin = () => {
    if (loginWayIndex.value !== 2 || scanTab.value !== 'app' || !dialogVisible.value) {
        return;
    }
    qrCode.getQrCode();
}

// 点击切换登录方式
const handleWayIndex = (index) => {
    if (!isPC && index === 2) {
        return;
    }
    loginWayIndex.value = index;
    if (index === 2 && scanTab.value === 'app') {
        startAppScanLogin();
        return;
    }
    stopAppScanLogin();
}

const handleAppScanClick = () => {
    scanTab.value = 'app';
    startAppScanLogin();
}

// 关闭弹窗
const handleClose = () => {
    if (!props.asPage) {
        triggerLoginVisible.value(false);
    }

    if (codeTimer.value) {
        clearInterval(codeTimer.value);
    }

    stopAppScanLogin();
    emit("closed");
}

onBeforeMount(() => {
    // 回显记住密码的数据
    const rememberInfo = getRememberInfo();
    if (rememberInfo) {
        checkRemember.value = true;
        phoneNumber.value = rememberInfo.username;
        passwordNumber.value = rememberInfo.password;
    }

    watch(() => dialogVisible.value, (newValue, oldValue) => {
        if (newValue) {
            // 每次打开登录弹窗时默认回到账号登录，不自动开启APP扫码
            loginWayIndex.value = 0;
            scanTab.value = 'app';
            stopAppScanLogin();
        } else {
            stopAppScanLogin();
        }
    }, { immediate: true })
})


// 发送验证码
const sendMessage = () => {
    // 查看手机号
    if (!checkPhone(phoneNumber.value)) {
        document.getElementById("username")?.focus();
        return false;
    };

    // 发送
    if (!codeTimer.value) {
        const username = phoneNumber.value;
        getCode(username).then((res) => {
            console.log("发送验证码", res);
            document.getElementById("username")?.focus();
            if (res.code !== 200) {
                ElMessage.error({
                    message: res.msg,
                    offset: window.innerHeight / 2 - 50,
                    center: true
                });
                return false;
            }
            ElMessage.success({
                message: res.msg,
                offset: window.innerHeight / 2 - 50,
                center: true
            });
            codeTimer.value = setInterval(() => {
                if (codeSecond.value > 1) {
                    codeSecond.value--;
                    codeText.value = codeSecond.value + "s后重发";
                } else {
                    clearInterval(codeTimer.value);
                    codeText.value = "重发";
                    codeSecond.value = 60;
                    codeTimer.value = null;
                }
            }, 1000);
        })
    }
}

// 点击协议跳转
const openUrl = (url) => {
    window.open(url, "_blank");
}

// 获取二维码
const qrCode = reactive({
    token: "",
    count: 0,
    getQrCode: () => {
        stopAppScanLogin();
        selectQrCode().then((res) => {
            console.log("获取二维码", res);
            if (res.status) {
                qrCode.token = res.data.token;
                qrCode.count = 0;
                qrCodeImage.value = "data:image/png;base64," + res.data.image;
                qrCodeType.value = 1;
                qrCodeTimer.value = setInterval(qrCode.waitScan, 2000);
                qrCodeValid.value = true;
            }
        });
    },
    waitScan: () => {
        if (qrCode.count > 60) {
            stopAppScanLogin();
        } else {
            qrCode.count++;
            selectQrLoop(qrCode.token).then((res) => {
                if (res.status) {
                    if (res.type === 0) {
                        // 有效时间结束
                        stopAppScanLogin();
                    } else if (res.type === 1) {
                        // 等待扫描
                    } else if (res.type === 2) {
                        // 已扫描，等待确定
                        qrCodeType.value = 2;
                    } else if (res.type === 3) {
                        // 确认登录
                        stopAppScanLogin();
                        qrAjaxLogin(qrCode.token, res.userName);
                    } else if (res.type === 4) {
                        // 取消登录
                        stopAppScanLogin();
                        qrCodeType.value = 3;
                        setTimeout(() => {
                            qrCode.getQrCode();
                        }, 3000);
                    } else {
                        stopAppScanLogin();
                        qrCode.getQrCode();
                    }
                }
            })
        }
    }
})

// 登录成功
const afterSuccessLogin = (res) => {
    emit("saveUser", res);
    ElMessage.success({
        message: res.msg,
        offset: window.innerHeight / 2 - 50,
        center: true
    });
    handleClose();
}

// 点击登录
const submitForm = () => {
    if (!checkPhone(phoneNumber.value)) {
        document.getElementById("username")?.focus();
        return false;
    }

    if (loginWayIndex.value === 1) {
        // 验证码登录
        if (!codeNumber.value) {
            document.getElementById("code")?.focus();
            ElMessage.error({
                message: "验证码不能为空",
                offset: window.innerHeight / 2 - 50,
                center: true
            });
            return false;
        }
        if (!checkProtocol.value) {
            ElMessage.error({
                message: "请先阅读并同意《用户协议》和《隐私政策》",
                offset: window.innerHeight / 2 - 50,
                center: true
            });
            return false;
        }
        codeLogin(phoneNumber.value, codeNumber.value).then((res) => {
            console.log("验证码登录", res);
            if (res.code !== 200) {
                ElMessage.error({
                    message: res.msg,
                    offset: window.innerHeight / 2 - 50,
                    center: true
                })
                return false;
            }

            afterSuccessLogin(res);
        })
    } else if (loginWayIndex.value === 0) {
        // 密码登录
        if (!passwordNumber.value) {
            document.getElementById("password")?.focus();
            ElMessage.error({
                message: "密码不能为空",
                offset: window.innerHeight / 2 - 50,
                center: true
            });
            return false;
        }

        const username = phoneNumber.value;
        const password = passwordNumber.value;
        passwordLogin(username, password).then((res) => {
            console.log("密码登录", res);
            if (res.code !== 200) {
                ElMessage.error(res.msg);
                return false;
            }

            // 密码记忆
            if (checkRemember.value) {
                remember(phoneNumber.value, passwordNumber.value);
            } else {
                if (getRememberInfo()) {
                    remember(null, null);
                }
            }

            afterSuccessLogin(res);
        })
    }
}

// ajax 异步登录
const qrAjaxLogin = (token, userName) => {
    const data = {
        qrToken: token,
        username: userName
    }
    qrLogin(data).then((res) => {
        console.log("ajax 异步登录", res);
        if (res.code === 200) {
            afterSuccessLogin(res);
        } else {
            stopAppScanLogin();
            qrCode.getQrCode();
            ElMessage.error({
                message: res.msg,
                offset: window.innerHeight / 2 - 50,
                center: true
            })
        }
    })
}

// 重新获取二维码
const resetQrCode = () => {
    qrCode.getQrCode();
}

let childWindow = null;

const closeWechatLoginChildWindow = () => {
    if (childWindow && !childWindow.closed) {
        childWindow.close();
    }
    childWindow = null;
}

const handleWechatLoginSuccess = (message) => {
    ElMessage.success({
        message: message || '登录成功',
        offset: window.innerHeight / 2 - 50,
        center: true
    });
    handleClose();
    window.location.reload();
}

/**
 * 打开微信扫码登录窗口，并让弹窗在当前屏幕区域内水平垂直居中。
 */
const wechatLogin = () => {
    // scanTab.value = 'wechat';
    stopAppScanLogin();

    const popupWidth = 804;
    const popupHeight = 610;
    const left = window.screenX + Math.max((window.outerWidth - popupWidth) / 2, 0);
    const top = window.screenY + Math.max((window.outerHeight - popupHeight) / 2, 0);
    // const top = Math.round(window.innerHeight * 0.15);

    childWindow = window.open(
        wechatLoginUrl,
        '_blank',
        `width=${popupWidth},height=${popupHeight},left=${left},top=${top}`
    );
}

window.__closeWechatLoginChildWindow = closeWechatLoginChildWindow;
window.__handleWechatLoginSuccess = handleWechatLoginSuccess;

onBeforeUnmount(() => {
    if (window.__closeWechatLoginChildWindow === closeWechatLoginChildWindow) {
        delete window.__closeWechatLoginChildWindow;
    }
    if (window.__handleWechatLoginSuccess === handleWechatLoginSuccess) {
        delete window.__handleWechatLoginSuccess;
    }
});
</script>

<style lang="scss">
.lc-dialog.el-dialog {
    .el-dialog__header {
        padding: 0 !important;
        margin: 0 !important;
    }

    .el-dialog__body {
        padding: 0 !important;
    }
}

.lc-dialog {
    max-width: 782px;
    max-height: 430px;
    padding: 0;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(66, 133, 244, 0.1);
    border-radius: 12px;
    position: relative;

    &.lc-dialog--page {
        position: relative;
        margin: 0 auto;
        flex-shrink: 0;
        width: 782px;
        max-width: calc(100vw - 32px);
    }

    &.lc-dialog--mobile {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px);
        max-height: none;

        .login-box {
            flex-direction: column;

            .login-way {
                min-width: 0;
                width: 100%;
                height: auto;
                min-height: auto;
                padding: 48px 20px 24px;
                gap: 24px;
            }
        }

        .login-header {
            top: 16px;
            right: 16px;
        }
    }

    .login-header {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;

    }

    .login-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;

        .login-side-view {
            width: 360px;
            height: 430px;
            border-radius: 12px 0px 0px 12px;
            overflow: hidden;

            // 设置指示器为圆形
            .el-carousel__indicators {
                .el-carousel__indicator {
                    .el-carousel__button {
                        width: 8px; // 圆形直径
                        height: 8px; // 圆形直径
                        border-radius: 50%; // 确保是圆形
                        background-color: rgba(255, 255, 255, 0.5); // 未激活状态颜色
                    }

                    &.is-active .el-carousel__button {
                        background-color: rgba(255, 255, 255, 1); // 激活状态颜色
                        width: 8px; // 激活状态大小（可以设置不同大小）
                        height: 8px;
                    }
                }
            }

            .login-side-view-item {
                width: 100%;
                height: 100%;
                border-radius: 12px 0px 0px 12px;

                >img {
                    width: 100%;
                    height: 100%;
                    border-radius: 12px 0px 0px 12px;
                }
            }

        }

        .login-way {
            flex: 1;
            min-width: 420px;
            height: 430px;
            padding: 40px;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 30px;

            .way-tab {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                width: 100%;
                padding: 4px;
                background: #F5F6F8;
                border-radius: 24px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                line-height: 19px;
                margin: 0;
                box-sizing: border-box;

                .way-tab-item {
                    flex: 1;
                    min-width: 0;
                    height: 36px;
                    margin: 0;
                    padding: 0;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 4px;
                    font-size: 14px;
                    color: #666666;
                    border-radius: 20px;
                    transition: all 0.2s ease;
                }

                .way-tab-icon {
                    flex-shrink: 0;
                }

                .way-tab-text {
                    line-height: 20px;
                }

                .way-tab-item.is-active {
                    background: #FFFFFF;
                    color: #1678FF;
                    font-weight: 600;
                }
            }

            .way-item {
                width: 100%;

                .way-item-center {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    margin: 0;

                    .wic-title {
                        font-weight: 600;
                        font-size: 18px;
                        color: #333333;
                        line-height: 24px;
                        margin: 0 0 20px 0;
                    }

                    .way-item-input {
                        width: 100%;
                        padding: 12px;
                        background: #FFFFFF;
                        border-radius: 8px;
                        border: 1px solid #DCDFE6;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                        line-height: 20px;

                        &::placeholder {
                            color: #888888; // 占位符
                        }
                    }

                    .way-item-lcl {
                        margin-top: 20px;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        padding: 12px;
                        background: #FFFFFF;
                        border-radius: 8px;
                        border: 1px solid #DCDFE6;

                        .way-item-input {
                            height: 100%;
                            border: none;
                            padding: 0;
                            border-radius: 0px;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #333333;
                            line-height: 20px;

                            &::placeholder {
                                color: #888888; // 占位符
                            }
                        }

                        .way-item-code {
                            min-width: max-content;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #1678FF;
                            cursor: pointer;
                        }
                    }

                    .way-checkbox {
                        margin-top: 24px;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: start;
                        flex-wrap: nowrap;
                        gap: 10px;
                        margin-left: 0;
                        margin-right: 0;
                        margin-bottom: 0;
                        padding: 0;

                        :deep(.el-checkbox) {
                            height: 20px;
                            margin: 0;
                        }

                        :deep(.el-checkbox__inner) {
                            width: 20px;
                            height: 20px;
                        }

                        :deep(.el-checkbox__inner::after) {
                            width: 4px;
                            height: 10px;
                            left: 6px;
                            top: 2px;
                        }

                        .way-checkbox-password {
                            cursor: pointer;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #888888;
                            line-height: 14px;
                            text-align: left;
                        }

                        .way-checkbox-text {
                            cursor: pointer;
                            white-space: nowrap;
                            flex-shrink: 0;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 14px;
                            text-align: left;

                            >span {
                                color: #1678FF;
                            }
                        }

                    }

                    .way-login-btn {
                        margin-top: 24px;
                        width: 100%;
                        background: #1678FF;
                        border-radius: 8px;
                        text-align: center;
                        padding: 14px 0px;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #FFFFFF;
                        line-height: 20px;
                        cursor: pointer;
                    }

                    .scan-subtab {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        gap: 12px;
                        margin: 0 auto 18px;
                        padding: 4px;
                        border-radius: 12px;

                        .scan-subtab-item {
                            height: 28px;
                            padding: 4px;
                            border-radius: 6px;
                            display: inline-flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 4px;
                            color: #666666;
                            font-size: 14px;
                            cursor: pointer;
                            transition: all 0.2s ease;

                            &:hover {
                                color: #1678FF;
                            }

                            &.is-active {
                                background: rgba(22, 120, 255, 0.1);
                                font-weight: 600;
                                color: #1678FF;
                            }

                            .scan-subtab-icon {
                                width: 20px;
                                height: 20px;
                                display: block;
                            }
                        }
                    }

                    .way-qr-container {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        width: 100%;
                        
                        &.wechat-login-container {
                            height: 240px;
                            justify-content: center;
                            
                            iframe {
                                width: 300px;
                                height: 300px;
                            }
                        }
                    }

                    .way-qr {
                        width: max-content;
                        height: max-content;
                        min-width: 160px;
                        min-height: 160px;
                        position: relative;

                        >img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            border-radius: 10px;
                            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
                        }

                        .error-qr {
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;
                            background: rgba(0, 0, 0, 0.7);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            gap: 20px;
                            font-weight: 400;
                            font-size: 14px;
                            color: #ffffff;
                            line-height: 20px;
                            cursor: pointer;

                            >span {
                                color: #ffffff;
                                background-color: #1678ff;
                                padding: 8px 28px;
                                border-radius: 19px 19px 19px 19px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }

                    .way-qr-text {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #888888;
                        margin-top: 20px;

                        >span {
                            color: #1678ff;
                        }
                    }
                }
            }
        }
    }

    .confirm-box,
    .confirm-box-fail {
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        text-align: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 8;

        .p-h3 {
            margin-top: 150px;
            font-size: 24px;
            line-height: 40px;
            font-weight: bold;
            color: #333;
        }

        .p-text {
            color: #333;
            margin-top: 20px;
            font-size: 18px;
            line-height: 28px;
        }
    }

    .confirm-box {
        .p-h3 {
            color: #1678ff;
        }
    }

    .confirm-box-fail {
        .p-h3 {
            color: #d90100;
        }
    }
}
</style>