/* * 退出登录确认弹窗 UI * 只改变视觉，不修改退出逻辑和点击事件 */ body.logout-dialog-open { overflow: hidden !important; } /* 遮罩层 */ body.logout-dialog-open .van-overlay, body.logout-dialog-open .logout-ui-overlay { background: rgba(10, 15, 30, 0.66) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* 弹窗主体 */ .logout-ui-dialog, .van-dialog.logout-ui-dialog { position: fixed !important; z-index: 99999 !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; width: min(390px, calc(100vw - 36px)) !important; min-width: 300px !important; max-width: 390px !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%) !important; overflow: hidden !important; border: 1px solid rgba(223, 228, 239, 0.95) !important; border-radius: 20px !important; color: #172033 !important; text-align: center !important; background: radial-gradient( circle at 100% 0, rgba(37, 244, 238, 0.10), transparent 35% ), #ffffff !important; box-shadow: 0 30px 80px rgba(7, 13, 30, 0.32), 0 8px 25px rgba(7, 13, 30, 0.15) !important; animation: logoutDialogEnter 0.22s ease-out both; } /* 顶部图标 */ .logout-ui-dialog::before { content: "↪"; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 25px auto 8px; border-radius: 17px; color: #fe2c55; font-size: 27px; line-height: 1; font-weight: 800; background: linear-gradient( 145deg, rgba(254, 44, 85, 0.13), rgba(254, 44, 85, 0.05) ); box-shadow: 0 10px 22px rgba(254, 44, 85, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9); } /* Vant标题 */ .logout-ui-dialog .van-dialog__header, .logout-ui-dialog .logout-ui-title { display: block !important; margin: 0 !important; padding: 7px 24px 4px !important; color: #11182c !important; font-size: 20px !important; line-height: 1.4 !important; font-weight: 800 !important; letter-spacing: 0.02em !important; text-align: center !important; } /* 提示文字 */ .logout-ui-dialog .van-dialog__content { padding: 0 !important; } .logout-ui-dialog .van-dialog__message, .logout-ui-dialog .logout-ui-message { display: block !important; margin: 0 !important; padding: 6px 28px 24px !important; color: #7a8499 !important; font-size: 14px !important; line-height: 1.65 !important; font-weight: 400 !important; text-align: center !important; white-space: normal !important; } /* 按钮区域 */ .logout-ui-dialog .van-dialog__footer, .logout-ui-dialog .logout-ui-footer { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 14px 18px 18px !important; border: 0 !important; border-top: 1px solid #edf0f5 !important; background: #fbfcfe !important; } /* 清除 Vant 默认按钮分隔线 */ .logout-ui-dialog .van-hairline--top::after, .logout-ui-dialog .van-hairline--left::after, .logout-ui-dialog .van-dialog__footer::after, .logout-ui-dialog .van-dialog__cancel::after, .logout-ui-dialog .van-dialog__confirm::after { display: none !important; border: 0 !important; } /* 两个按钮公共样式 */ .logout-ui-dialog .van-dialog__cancel, .logout-ui-dialog .van-dialog__confirm, .logout-ui-dialog .logout-ui-cancel, .logout-ui-dialog .logout-ui-confirm { display: inline-flex !important; flex: 1 1 0 !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 47px !important; min-height: 47px !important; margin: 0 !important; padding: 0 18px !important; border-radius: 13px !important; font-size: 15px !important; line-height: 47px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-align: center !important; white-space: nowrap !important; cursor: pointer !important; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important; } /* 取消 */ .logout-ui-dialog .van-dialog__cancel, .logout-ui-dialog .logout-ui-cancel { border: 1px solid #dde3ed !important; color: #556078 !important; background: linear-gradient( 180deg, #ffffff, #f3f5f9 ) !important; box-shadow: 0 6px 15px rgba(30, 43, 72, 0.06) !important; } /* 确认退出 */ .logout-ui-dialog .van-dialog__confirm, .logout-ui-dialog .logout-ui-confirm { border: 1px solid transparent !important; color: #ffffff !important; background: linear-gradient( 110deg, #fe2c55, #ff496b ) !important; box-shadow: 0 10px 22px rgba(254, 44, 85, 0.25) !important; } .logout-ui-dialog .van-dialog__cancel:hover, .logout-ui-dialog .logout-ui-cancel:hover { transform: translateY(-1px); filter: brightness(0.98); } .logout-ui-dialog .van-dialog__confirm:hover, .logout-ui-dialog .logout-ui-confirm:hover { transform: translateY(-1px); box-shadow: 0 13px 26px rgba(254, 44, 85, 0.32) !important; } .logout-ui-dialog .van-dialog__cancel:active, .logout-ui-dialog .van-dialog__confirm:active, .logout-ui-dialog .logout-ui-cancel:active, .logout-ui-dialog .logout-ui-confirm:active { transform: scale(0.97); } /* 避免原来的普通文字布局干扰 */ .logout-ui-dialog br { display: none !important; } /* 手机适配 */ @media (max-width: 520px) { .logout-ui-dialog, .van-dialog.logout-ui-dialog { width: calc(100vw - 28px) !important; min-width: 0 !important; border-radius: 18px !important; } .logout-ui-dialog .van-dialog__footer, .logout-ui-dialog .logout-ui-footer { gap: 10px !important; padding: 13px 14px 15px !important; } .logout-ui-dialog .van-dialog__cancel, .logout-ui-dialog .van-dialog__confirm, .logout-ui-dialog .logout-ui-cancel, .logout-ui-dialog .logout-ui-confirm { height: 45px !important; min-height: 45px !important; line-height: 45px !important; } } @keyframes logoutDialogEnter { from { opacity: 0; transform: translate(-50%, -47%) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }