sqxp/docs/原型图/web/密码重置弹窗.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叁强鲜配 - 密码重置</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
        .dialog { background: #fff; border-radius: 12px; width: 480px; max-width: 90%; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
        .dialog-header { padding: 20px 24px; border-bottom: 1px solid #ebeef5; display: flex; justify-content: space-between; align-items: center; }
        .dialog-title { font-size: 18px; font-weight: 600; }
        .dialog-close { font-size: 20px; color: #909399; cursor: pointer; }
        .dialog-close:hover { color: #303133; }
        .dialog-body { padding: 24px; }
        .dialog-footer { padding: 16px 24px; border-top: 1px solid #ebeef5; display: flex; justify-content: flex-end; gap: 12px; }
        .user-info { display: flex; align-items: center; gap: 16px; padding: 16px; background: #f5f7fa; border-radius: 8px; margin-bottom: 20px; }
        .user-avatar { width: 48px; height: 48px; border-radius: 50%; background: #1989fa; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .user-detail h4 { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
        .user-detail p { font-size: 13px; color: #909399; }
        .warning-box { background: #fef0f0; border: 1px solid #ffccc7; border-radius: 8px; padding: 16px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; }
        .warning-icon { font-size: 20px; color: #ee0a24; }
        .warning-text { font-size: 14px; color: #ee0a24; line-height: 1.6; }
        .password-box { background: #f0f9eb; border: 1px solid #b7eb8f; border-radius: 8px; padding: 16px; text-align: center; }
        .password-label { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .password-value { font-size: 28px; font-weight: 700; color: #07c160; letter-spacing: 4px; }
        .password-tips { font-size: 12px; color: #909399; margin-top: 12px; }
        .form-item { margin-bottom: 16px; }
        .form-label { font-size: 14px; color: #606266; margin-bottom: 8px; display: block; }
        .btn { padding: 10px 24px; border-radius: 8px; font-size: 14px; cursor: pointer; border: none; }
        .btn-primary { background: #1989fa; color: #fff; }
        .btn-default { background: #fff; color: #606266; border: 1px solid #dcdfe6; }
        .btn-success { background: #07c160; color: #fff; }
    </style>
</head>
<body>
    <div id="app">
        <div class="dialog-overlay">
            <div class="dialog">
                <div class="dialog-header">
                    <span class="dialog-title">密码重置</span>
                    <span class="dialog-close" onclick="history.back()">×</span>
                </div>
                <div class="dialog-body">
                    <div class="user-info">
                        <div class="user-avatar">张</div>
                        <div class="user-detail">
                            <h4>张伟</h4>
                            <p>供应商 | 城东区域 | 13800138001</p>
                        </div>
                    </div>
                    <div class="warning-box">
                        <span class="warning-icon">⚠</span>
                        <div class="warning-text">
                            重置密码后，系统将生成新的随机密码。请将此密码告知用户，并提醒用户在首次登录后尽快修改密码。
                        </div>
                    </div>
                    <div class="password-box">
                        <div class="password-label">新随机密码</div>
                        <div class="password-value">Ab123456</div>
                        <div class="password-tips">密码已复制到剪贴板，请妥善保管</div>
                    </div>
                </div>
                <div class="dialog-footer">
                    <button class="btn btn-default" onclick="history.back()">关闭</button>
                    <button class="btn btn-primary">重新生成密码</button>
                    <button class="btn btn-success">发送短信通知用户</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({ setup() { return {}; } });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>