117 lines
5.5 KiB
HTML
117 lines
5.5 KiB
HTML
<style>
|
|
.myp-wrap{max-width:720px;margin:0 auto;padding:24px 0;}
|
|
.myp-avatar-area{display:flex;flex-direction:column;align-items:center;margin-bottom:28px;}
|
|
.myp-avatar{width:80px;height:80px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700;user-select:none;}
|
|
.myp-change-avatar{margin-top:10px;font-size:13px;color:var(--primary);cursor:pointer;background:none;border:none;padding:0;}
|
|
.myp-change-avatar:hover{text-decoration:underline;}
|
|
.myp-name{font-size:18px;font-weight:600;color:var(--g-text);margin-top:10px;}
|
|
.myp-role{margin-top:6px;}
|
|
.myp-section-hd{font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;}
|
|
.myp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
|
|
.myp-card-ft{padding-top:18px;display:flex;justify-content:flex-end;}
|
|
.myp-security-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
|
|
.myp-security-left{display:flex;flex-direction:column;gap:3px;}
|
|
.myp-security-title{font-size:14px;font-weight:500;color:var(--g-text);}
|
|
.myp-security-desc{font-size:12px;color:var(--g-text-muted);}
|
|
.myp-log-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--g-border);}
|
|
.myp-log-item:last-child{border-bottom:none;}
|
|
.myp-log-time{font-size:13px;color:var(--g-text);display:flex;align-items:center;gap:6px;}
|
|
.myp-log-meta{font-size:12px;color:var(--g-text-muted);display:flex;align-items:center;gap:12px;}
|
|
</style>
|
|
|
|
<div class="myp-wrap">
|
|
<!-- 头像区 -->
|
|
<div class="myp-avatar-area">
|
|
<div class="myp-avatar">管</div>
|
|
<button class="myp-change-avatar">更换头像</button>
|
|
<div class="myp-name">张伟</div>
|
|
<span class="g-tag g-tag-green myp-role">管理员</span>
|
|
</div>
|
|
|
|
<!-- 基本信息 -->
|
|
<div class="g-card" style="margin-bottom:20px;">
|
|
<div class="myp-section-hd">基本信息</div>
|
|
<div class="myp-form-grid">
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">姓名</label>
|
|
<input class="g-input" value="张伟" placeholder="请输入姓名">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">手机号</label>
|
|
<input class="g-input" value="138****8001" placeholder="请输入手机号">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">邮箱</label>
|
|
<input class="g-input" value="zhangwei@example.com" placeholder="请输入邮箱地址">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">所属门店</label>
|
|
<input class="g-input" value="全部门店" disabled placeholder="所属门店">
|
|
</div>
|
|
</div>
|
|
<div class="myp-card-ft">
|
|
<button class="g-btn g-btn-primary">保存修改</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 安全设置 -->
|
|
<div class="g-card" style="margin-bottom:20px;">
|
|
<div class="myp-section-hd">安全设置</div>
|
|
|
|
<div class="myp-security-row">
|
|
<div class="myp-security-left">
|
|
<span class="myp-security-title"><i data-lucide="lock" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px;"></i>登录密码</span>
|
|
<span class="myp-security-desc">已设置，可修改</span>
|
|
</div>
|
|
<button class="g-btn g-btn-sm">修改</button>
|
|
</div>
|
|
|
|
<div class="g-divider"></div>
|
|
|
|
<div class="myp-security-row">
|
|
<div class="myp-security-left">
|
|
<span class="myp-security-title"><i data-lucide="smartphone" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px;"></i>绑定手机</span>
|
|
<span class="myp-security-desc">138****8001</span>
|
|
</div>
|
|
<button class="g-btn g-btn-sm">更换</button>
|
|
</div>
|
|
|
|
<div class="g-divider"></div>
|
|
|
|
<div class="myp-security-row">
|
|
<div class="myp-security-left">
|
|
<span class="myp-security-title"><i data-lucide="shield-check" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px;"></i>两步验证</span>
|
|
<span class="myp-security-desc">未开启</span>
|
|
</div>
|
|
<div class="g-toggle" onclick="toggleSwitch(this)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 最近登录 -->
|
|
<div class="g-card">
|
|
<div class="myp-section-hd">最近登录</div>
|
|
|
|
<div class="myp-log-item">
|
|
<span class="myp-log-time"><i data-lucide="monitor" style="width:14px;height:14px;"></i>2026-02-13 09:32</span>
|
|
<span class="myp-log-meta"><span>192.168.1.105</span><span>Chrome / Windows</span></span>
|
|
</div>
|
|
<div class="myp-log-item">
|
|
<span class="myp-log-time"><i data-lucide="smartphone" style="width:14px;height:14px;"></i>2026-02-12 18:15</span>
|
|
<span class="myp-log-meta"><span>10.0.0.88</span><span>微信 / iPhone</span></span>
|
|
</div>
|
|
<div class="myp-log-item">
|
|
<span class="myp-log-time"><i data-lucide="monitor" style="width:14px;height:14px;"></i>2026-02-11 14:07</span>
|
|
<span class="myp-log-meta"><span>172.16.0.23</span><span>Chrome / MacOS</span></span>
|
|
</div>
|
|
<div class="myp-log-item">
|
|
<span class="myp-log-time"><i data-lucide="tablet" style="width:14px;height:14px;"></i>2026-02-10 20:44</span>
|
|
<span class="myp-log-meta"><span>192.168.0.51</span><span>Safari / iPad</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleSwitch(el){el.classList.toggle('on');}
|
|
if(typeof lucide!=='undefined'){lucide.createIcons();}
|
|
</script>
|