<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>我的资料 · UI 高保真原型</title>
|
<style>
|
:root {
|
--brand-blue: #003e7e;
|
--brand-blue-2: #1e5ebc;
|
--green: #639c1f;
|
--green-2: #82c236;
|
--ink: #0f172a;
|
--label: #1f2937;
|
--sub: #64748b;
|
--muted: #94a3b8;
|
--line: #f1f5f9;
|
--line-2: #e2e8f0;
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
background: #eef2f7;
|
color: var(--ink);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 40px 16px 64px;
|
min-height: 100vh;
|
}
|
|
/* ==================== 文档头 ==================== */
|
.doc-head { text-align: center; margin-bottom: 28px; }
|
.doc-title { font-size: 20px; font-weight: 700; }
|
.doc-sub { margin-top: 6px; font-size: 13px; color: var(--sub); }
|
|
/* ==================== 手机框 ==================== */
|
.phone {
|
width: 375px;
|
height: 812px;
|
background: #fff;
|
border-radius: 44px;
|
box-shadow: 0 24px 60px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .06);
|
overflow: hidden;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 状态栏（模拟） */
|
.status-bar {
|
height: 44px;
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 22px 0 28px;
|
font-size: 14px;
|
font-weight: 600;
|
letter-spacing: .2px;
|
}
|
.status-icons { display: flex; align-items: center; gap: 5px; }
|
|
/* 自定义导航栏 */
|
.nav {
|
height: 44px;
|
flex-shrink: 0;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.nav-back {
|
position: absolute;
|
left: 10px;
|
width: 40px;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.nav-title { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
|
.nav-actions {
|
position: absolute;
|
right: 14px;
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
}
|
|
/* ==================== 列表 ==================== */
|
.body { flex: 1; display: flex; flex-direction: column; }
|
.list { padding: 4px 16px 0; }
|
|
.row {
|
min-height: 58px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1px solid var(--line);
|
}
|
.row:last-child { border-bottom: none; }
|
.row-label { font-size: 15px; color: var(--label); }
|
.row-right { display: flex; align-items: center; gap: 8px; }
|
.row-value { font-size: 15px; color: var(--muted); letter-spacing: .3px; }
|
|
/* 头像 */
|
.avatar {
|
width: 46px;
|
height: 46px;
|
border-radius: 50%;
|
background: #f1f5f9;
|
border: 1px solid var(--line-2);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
}
|
.avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
/* 认证状态徽标 */
|
.badge {
|
font-size: 13px;
|
font-weight: 500;
|
line-height: 1;
|
padding: 5px 10px;
|
border-radius: 6px;
|
border: 1px solid;
|
}
|
.badge--none { color: #ea580c; background: #fff7ed; border-color: #fdba74; }
|
.badge--ing { color: #1e5ebc; background: #eff6ff; border-color: #93c5fd; }
|
.badge--fail { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }
|
.badge--done { color: #4d7c0f; background: #f7fee7; border-color: #bef264; }
|
|
/* ==================== 底部操作区 ==================== */
|
.footer {
|
margin-top: auto;
|
padding: 16px 24px 22px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 18px;
|
}
|
.btn-logout {
|
width: 100%;
|
height: 48px;
|
border-radius: 24px;
|
background: linear-gradient(90deg, #82c236 0%, #639c1f 100%);
|
color: #fff;
|
font-size: 15px;
|
font-weight: 600;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0 8px 20px rgba(99, 156, 31, .28);
|
}
|
.link-cancel {
|
font-size: 14px;
|
color: var(--brand-blue-2);
|
text-decoration: underline;
|
text-underline-offset: 3px;
|
}
|
|
/* Home 指示条 */
|
.home-bar {
|
height: 26px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
.home-bar span {
|
width: 134px;
|
height: 5px;
|
border-radius: 3px;
|
background: #0f172a;
|
opacity: .85;
|
}
|
|
/* ==================== 图例 / 设计说明 ==================== */
|
.legend {
|
width: 375px;
|
margin-top: 32px;
|
display: flex;
|
flex-direction: column;
|
gap: 18px;
|
}
|
.card {
|
background: #fff;
|
border-radius: 16px;
|
padding: 18px 20px;
|
box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
|
}
|
.card h3 {
|
font-size: 14px;
|
font-weight: 700;
|
margin-bottom: 14px;
|
color: var(--ink);
|
}
|
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
|
.legend-note {
|
font-size: 13px;
|
line-height: 1.7;
|
color: var(--sub);
|
}
|
.legend-note b { color: var(--label); font-weight: 600; }
|
.legend-note .no { color: var(--brand-blue-2); font-weight: 700; margin-right: 4px; }
|
.legend-note li { list-style: none; margin-bottom: 6px; }
|
.avatar-row { display: flex; gap: 28px; align-items: center; }
|
.avatar-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
.avatar-item small { font-size: 12px; color: var(--muted); }
|
</style>
|
</head>
|
<body>
|
<div class="doc-head">
|
<div class="doc-title">「我的资料」页面 · UI 高保真原型</div>
|
<div class="doc-sub">用户端小程序 · 375×812 · 本期交互为占位</div>
|
</div>
|
|
<!-- ==================== 手机原型 ==================== -->
|
<div class="phone">
|
<!-- 状态栏 -->
|
<div class="status-bar">
|
<span>12:00</span>
|
<span class="status-icons">
|
<!-- 信号 -->
|
<svg width="17" height="11" viewBox="0 0 17 11" fill="#0f172a">
|
<rect x="0" y="7" width="3" height="4" rx="1"></rect>
|
<rect x="4.5" y="5" width="3" height="6" rx="1"></rect>
|
<rect x="9" y="2.5" width="3" height="8.5" rx="1"></rect>
|
<rect x="13.5" y="0" width="3" height="11" rx="1"></rect>
|
</svg>
|
<!-- WiFi -->
|
<svg width="16" height="11" viewBox="0 0 16 11" fill="#0f172a">
|
<path d="M8 10.5 5.4 7.6a4 4 0 0 1 5.2 0L8 10.5Z"></path>
|
<path d="M8 5.6c-1.9 0-3.6.7-4.9 1.9L1.4 5.6A9.6 9.6 0 0 1 8 3.1c2.6 0 4.9 1 6.6 2.5l-1.7 1.9A7.1 7.1 0 0 0 8 5.6Z" opacity=".95"></path>
|
</svg>
|
<!-- 电池 -->
|
<svg width="25" height="12" viewBox="0 0 25 12" fill="none">
|
<rect x=".5" y=".5" width="21" height="11" rx="3" stroke="#0f172a" opacity=".4"></rect>
|
<rect x="2" y="2" width="18" height="8" rx="1.6" fill="#0f172a"></rect>
|
<rect x="22.5" y="4" width="2" height="4" rx="1" fill="#0f172a" opacity=".5"></rect>
|
</svg>
|
</span>
|
</div>
|
|
<!-- 导航栏 -->
|
<div class="nav">
|
<div class="nav-back">
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1f2937" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
<path d="m15 18-6-6 6-6" />
|
</svg>
|
</div>
|
<div class="nav-title">我的资料</div>
|
<div class="nav-actions">
|
<!-- 更多 -->
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="#334155">
|
<circle cx="5" cy="12" r="1.7"></circle>
|
<circle cx="12" cy="12" r="1.7"></circle>
|
<circle cx="19" cy="12" r="1.7"></circle>
|
</svg>
|
<!-- 帮助 -->
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#334155" stroke-width="2">
|
<circle cx="12" cy="12" r="9"></circle>
|
<path d="M9.4 9.2a2.6 2.6 0 1 1 3.3 2.5c-.8.3-1.3 1-1.3 1.9v.3" stroke-linecap="round"></path>
|
<circle cx="11.4" cy="17" r="1" fill="#334155" stroke="none"></circle>
|
</svg>
|
</div>
|
</div>
|
|
<!-- 内容 -->
|
<div class="body">
|
<div class="list">
|
<!-- 头像 -->
|
<div class="row">
|
<span class="row-label">头像</span>
|
<div class="row-right">
|
<div class="avatar">
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path>
|
<circle cx="12" cy="13" r="3"></circle>
|
</svg>
|
</div>
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<path d="m9 18 6-6-6-6" />
|
</svg>
|
</div>
|
</div>
|
|
<!-- 手机号（不可更换） -->
|
<div class="row">
|
<span class="row-label">手机号</span>
|
<div class="row-right">
|
<span class="row-value">136****6542</span>
|
</div>
|
</div>
|
|
<!-- 实名认证 -->
|
<div class="row">
|
<span class="row-label">实名认证</span>
|
<div class="row-right">
|
<span class="badge badge--none">未认证</span>
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<path d="m9 18 6-6-6-6" />
|
</svg>
|
</div>
|
</div>
|
|
<!-- 企业 / 个体户认证 -->
|
<div class="row">
|
<span class="row-label">企业/个体户认证</span>
|
<div class="row-right">
|
<span class="badge badge--none">未认证</span>
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<path d="m9 18 6-6-6-6" />
|
</svg>
|
</div>
|
</div>
|
</div>
|
|
<!-- 底部操作 -->
|
<div class="footer">
|
<div class="btn-logout">退出登录</div>
|
<span class="link-cancel">注销账号</span>
|
</div>
|
</div>
|
|
<!-- Home 指示条 -->
|
<div class="home-bar"><span></span></div>
|
</div>
|
|
<!-- ==================== 图例与设计说明 ==================== -->
|
<div class="legend">
|
<div class="card">
|
<h3>认证状态徽标（4 态）</h3>
|
<div class="badge-row">
|
<span class="badge badge--none">未认证</span>
|
<span class="badge badge--ing">认证中</span>
|
<span class="badge badge--fail">认证失败</span>
|
<span class="badge badge--done">已认证</span>
|
</div>
|
</div>
|
|
<div class="card">
|
<h3>头像两种状态</h3>
|
<div class="avatar-row">
|
<div class="avatar-item">
|
<div class="avatar">
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path>
|
<circle cx="12" cy="13" r="3"></circle>
|
</svg>
|
</div>
|
<small>未设置（相机占位）</small>
|
</div>
|
<div class="avatar-item">
|
<div class="avatar">
|
<img src="https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=portrait%20photo%20of%20a%20smiling%20chinese%20young%20man%2C%20studio%20headshot%2C%20clean%20light%20background%2C%20high%20quality&image_size=square" alt="avatar" />
|
</div>
|
<small>已设置（圆形裁切）</small>
|
</div>
|
</div>
|
</div>
|
|
<div class="card">
|
<h3>原型标注</h3>
|
<ul class="legend-note">
|
<li><span class="no">1</span>认证状态共 <b>4</b> 种：未认证 / 认证中 / 认证失败 / 已认证，由后端返回状态枚举驱动徽标样式。</li>
|
<li><span class="no">2</span>后台按会员等级设置所需认证方式；完成<b>企业/个体户认证</b>后，页面将有限展示企业/个体户信息。</li>
|
<li><span class="no">3</span>手机号在小程序<b>暂不支持更换</b>，仅只读展示（已脱敏），故该行无箭头。</li>
|
</ul>
|
</div>
|
</div>
|
</body>
|
</html>
|
