duanshuwen
4e04feda5b
- 为后端Admin新增migration_compat工具，支持离线迁移时的基线资源检查，重构全部alembic迁移脚本适配离线模式，避免重复创建已存在的数据库表和字段 - 完善初始数据库迁移脚本，添加默认部门种子数据，新增ConciergeAdvisor详情字段从JSON到JSONB的类型转换迁移 - 小程序端新增图片资源解析工具resolveNetworkImage，实现本地静态资源到CDN的自动映射，添加图片加载容错降级机制 - 完善HeroSlide类型定义，新增actionLabel字段，优化首页轮播组件的文本渲染与错误处理逻辑 - 新增对应测试用例验证迁移路径正确性与前端数据处理逻辑 - 新增临时 brainstorm UI对比草稿与开发临时状态文件
182 lines
15 KiB
HTML
182 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>我的页面｜用车需求与历史浏览收敛对比稿</title>
|
||
<style>
|
||
:root {
|
||
--ink: #272421;
|
||
--muted: #8d8177;
|
||
--line: #eadfd6;
|
||
--paper: #f7f3ef;
|
||
--card: #fffdfa;
|
||
--accent: #b86a47;
|
||
--accent-deep: #9a5438;
|
||
--accent-soft: #f4e4da;
|
||
--shadow: 0 14px 38px rgba(82, 50, 34, .11);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
min-width: 1180px;
|
||
color: var(--ink);
|
||
background: #eee9e4;
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
button { font: inherit; }
|
||
.page { padding: 52px 56px 72px; }
|
||
.masthead { max-width: 1320px; margin: 0 auto 34px; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
|
||
.eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .16em; font-weight: 700; }
|
||
h1 { margin: 8px 0 8px; font-size: 30px; letter-spacing: -.03em; }
|
||
.intro { margin: 0; color: #71665e; font-size: 14px; line-height: 1.7; }
|
||
.note { max-width: 380px; padding: 14px 16px; border: 1px solid #dfd3ca; border-radius: 14px; color: #756a62; background: rgba(255,253,250,.65); font-size: 12px; line-height: 1.65; }
|
||
.note strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 13px; }
|
||
.board { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
|
||
.proposal { position: relative; padding: 20px 18px 22px; border: 1px solid #e1d8d1; border-radius: 24px; background: #f5f0ec; box-shadow: 0 10px 28px rgba(71, 46, 33, .07); }
|
||
.proposal.recommended { border-color: #d2a38c; box-shadow: 0 18px 40px rgba(141, 82, 56, .14); }
|
||
.tag { position: absolute; top: 18px; right: 18px; padding: 5px 9px; border-radius: 999px; color: var(--accent-deep); background: #f4dfd4; font-size: 11px; font-weight: 700; }
|
||
.proposal h2 { margin: 0; font-size: 16px; }
|
||
.proposal-copy { min-height: 52px; margin: 7px 0 18px; padding-right: 42px; color: #867970; font-size: 12px; line-height: 1.6; }
|
||
.phone { width: 248px; height: 538px; margin: 0 auto; overflow: hidden; border: 5px solid #2d2c2a; border-radius: 30px; background: var(--paper); box-shadow: 0 14px 30px rgba(49, 35, 28, .18); }
|
||
.screen { height: 100%; overflow: hidden; background: var(--paper); }
|
||
.status { height: 25px; padding: 7px 12px 0; color: #6d665f; font-size: 7px; display: flex; justify-content: space-between; }
|
||
.hero { height: 70px; margin: 0 0 14px; padding: 15px 16px; display: flex; align-items: end; border-radius: 0 0 18px 18px; color: white; background: linear-gradient(135deg, #596052, #302d29 63%, #6a4536); }
|
||
.hero-title { font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px #201916; }
|
||
.hero-sub { margin-top: 2px; color: rgba(255,255,255,.7); font-size: 6px; letter-spacing: .12em; }
|
||
.member { margin: 0 14px 14px; padding: 14px; border: 1px solid #eee4dc; border-radius: 15px; background: var(--card); box-shadow: 0 5px 14px rgba(78, 51, 38, .05); }
|
||
.member-head { display: flex; align-items: center; gap: 9px; }
|
||
.avatar { width: 42px; height: 42px; border-radius: 13px; background: #f4efe9; display: grid; place-items: center; color: #b4a9a0; font-size: 23px; }
|
||
.member-name { font-size: 11px; font-weight: 700; }
|
||
.member-sub { margin-top: 4px; color: #9f948b; font-size: 7px; }
|
||
.vip { margin-left: auto; padding: 5px 7px; border-radius: 999px; color: #77a28c; background: #eaf4ed; font-size: 7px; }
|
||
.outline-action { width: 100%; height: 31px; margin-top: 12px; border: 1px solid #ebd8cc; border-radius: 999px; color: var(--accent-deep); background: #fffaf7; font-size: 8px; }
|
||
.explore-title { margin: 0 14px; font-size: 12px; font-weight: 700; }
|
||
.explore-sub { margin: 5px 14px 9px; color: #a1958c; font-size: 7px; }
|
||
.count { float: right; color: #ba9986; font-size: 7px; font-weight: 400; }
|
||
.records { margin: 0 14px 14px; border: 1px solid #eadfd7; border-radius: 14px; background: var(--card); overflow: hidden; }
|
||
.record { min-height: 48px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #f0e9e3; }
|
||
.record:last-child { border-bottom: 0; }
|
||
.record-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); font-size: 13px; }
|
||
.record-icon.photo { color: #f7f1e7; background: linear-gradient(135deg, #8b9f5d, #247e87); }
|
||
.record-text { min-width: 0; flex: 1; }
|
||
.record-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; }
|
||
.record-meta { margin-top: 3px; color: #a89b91; font-size: 7px; }
|
||
.chevron { color: #c7bdb6; font-size: 16px; }
|
||
.section-card { margin: 0 14px 14px; padding: 12px; border: 1px solid #eadfd7; border-radius: 14px; background: var(--card); }
|
||
.section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 10px; font-weight: 700; }
|
||
.section-label span { color: #b09b8e; font-size: 7px; font-weight: 400; }
|
||
.demand-highlight { padding: 10px; border-radius: 11px; background: #fbf0e9; }
|
||
.demand-top { display: flex; align-items: center; gap: 8px; }
|
||
.demand-icon { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; color: white; background: var(--accent); font-size: 12px; }
|
||
.demand-title { font-size: 9px; font-weight: 700; }
|
||
.demand-meta { margin-top: 3px; color: #9d877b; font-size: 7px; }
|
||
.link { margin-left: auto; color: var(--accent-deep); font-size: 8px; }
|
||
.tabs { margin: 0 14px 10px; padding: 4px; display: flex; gap: 4px; border-radius: 10px; background: #eee6df; }
|
||
.tab { flex: 1; padding: 6px 0; border: 0; border-radius: 7px; color: #998c83; background: transparent; font-size: 8px; }
|
||
.tab.active { color: var(--accent-deep); background: #fffdfa; box-shadow: 0 2px 6px rgba(88, 56, 39, .08); font-weight: 700; }
|
||
.two-actions { margin: 0 14px 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
|
||
.action-tile { min-height: 58px; padding: 10px; border: 1px solid #eadfd7; border-radius: 12px; background: var(--card); text-align: left; }
|
||
.action-tile.primary { color: white; border-color: var(--accent); background: var(--accent); }
|
||
.tile-icon { font-size: 15px; }
|
||
.tile-title { display: block; margin-top: 6px; font-size: 9px; font-weight: 700; }
|
||
.tile-meta { display: block; margin-top: 2px; color: #a89c92; font-size: 7px; }
|
||
.primary .tile-meta { color: rgba(255,255,255,.72); }
|
||
.account { margin: 0 14px; padding: 12px; border: 1px solid #eadfd7; border-radius: 14px; background: var(--card); }
|
||
.account-title { font-size: 10px; font-weight: 700; }
|
||
.account-sub { margin-top: 4px; color: #a1968d; font-size: 7px; }
|
||
.bottom { height: 44px; margin-top: 13px; padding: 6px 12px; display: flex; justify-content: space-between; border-top: 1px solid #e7dfd8; background: rgba(255,253,250,.94); }
|
||
.nav-item { color: #aaa19a; font-size: 7px; text-align: center; }
|
||
.nav-icon { display: block; margin-bottom: 2px; font-size: 15px; line-height: 15px; }
|
||
.nav-item.active { color: var(--accent); }
|
||
.legend { max-width: 1320px; margin: 22px auto 0; display: flex; gap: 22px; color: #8a7d73; font-size: 12px; }
|
||
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--accent); }
|
||
.legend span:nth-child(2)::before { background: #d7c2b5; }
|
||
.legend span:nth-child(3)::before { background: #b1c6af; }
|
||
@media (max-width: 1220px) {
|
||
body { min-width: 0; }
|
||
.page { padding: 28px 18px 48px; }
|
||
.masthead { display: block; }
|
||
.note { max-width: none; margin-top: 18px; }
|
||
.board { grid-template-columns: 1fr; max-width: 360px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="page">
|
||
<header class="masthead">
|
||
<div>
|
||
<div class="eyebrow">MINE · INFORMATION ARCHITECTURE</div>
|
||
<h1>“用车需求 + 历史浏览”收敛方式对比</h1>
|
||
<p class="intro">基于你提供的“我的”页面截图，保留现有视觉基线，只比较记录区的组织方式。</p>
|
||
</div>
|
||
<div class="note"><strong>当前基线</strong>“继续探索 / 最近浏览”独立显示；“用车需求”若作为独立入口，会继续增加纵向区块。以下三种方案都把两者放入同一信息层级。</div>
|
||
</header>
|
||
|
||
<section class="board">
|
||
<article class="proposal recommended">
|
||
<div class="tag">推荐</div>
|
||
<h2>A · 我的出行记录</h2>
|
||
<p class="proposal-copy">一个容器内分“用车需求”和“最近浏览”两种记录。语义最直观，改动小，适合当前页面。</p>
|
||
<div class="phone">
|
||
<div class="screen">
|
||
<div class="status"><span>11:14</span><span>100% ▰</span></div>
|
||
<div class="hero"><div><div class="hero-title">把旅程交给懂贵州的人</div><div class="hero-sub">A QUIETER WAY TO TRAVEL</div></div></div>
|
||
<div class="member"><div class="member-head"><div class="avatar">♙</div><div><div class="member-name">万趣会员</div><div class="member-sub">已绑定手机号 185****2260</div></div><div class="vip">已登录</div></div><button class="outline-action">♙ 获取微信头像</button></div>
|
||
<h3 class="explore-title">我的出行记录 <span class="count">2 条记录</span></h3>
|
||
<p class="explore-sub">用车需求与最近浏览集中在这里</p>
|
||
<div class="records">
|
||
<div class="record"><div class="record-icon">⌁</div><div class="record-text"><div class="record-title">用车需求</div><div class="record-meta">5座舒适用车 · 继续填写/查看</div></div><div class="chevron">›</div></div>
|
||
<div class="record"><div class="record-icon photo">◈</div><div class="record-text"><div class="record-title">亲子玩水</div><div class="record-meta">最近浏览 · 玩法路线</div></div><div class="chevron">›</div></div>
|
||
</div>
|
||
<div class="account"><div class="account-title">账号操作</div><div class="account-sub">退出登录会清除本机最近浏览记录</div></div>
|
||
<div class="bottom"><div class="nav-item"><span class="nav-icon">⌂</span>首页</div><div class="nav-item"><span class="nav-icon">☷</span>玩法</div><div class="nav-item"><span class="nav-icon">♧</span>管家</div><div class="nav-item active"><span class="nav-icon">♙</span>我的</div></div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="proposal">
|
||
<h2>B · 我的记录 + 筛选</h2>
|
||
<p class="proposal-copy">统一成一张记录列表，用“全部 / 用车需求 / 浏览记录”筛选。信息更规整，但需要增加筛选交互。</p>
|
||
<div class="phone">
|
||
<div class="screen">
|
||
<div class="status"><span>11:14</span><span>100% ▰</span></div>
|
||
<div class="hero"><div><div class="hero-title">把旅程交给懂贵州的人</div><div class="hero-sub">A QUIETER WAY TO TRAVEL</div></div></div>
|
||
<div class="member"><div class="member-head"><div class="avatar">♙</div><div><div class="member-name">万趣会员</div><div class="member-sub">已绑定手机号 185****2260</div></div><div class="vip">已登录</div></div><button class="outline-action">♙ 获取微信头像</button></div>
|
||
<h3 class="explore-title">我的记录 <span class="count">2 条记录</span></h3>
|
||
<p class="explore-sub">按类型查看你的出行足迹</p>
|
||
<div class="tabs"><button class="tab active">全部</button><button class="tab">用车需求</button><button class="tab">浏览记录</button></div>
|
||
<div class="records">
|
||
<div class="record"><div class="record-icon">⌁</div><div class="record-text"><div class="record-title">用车需求</div><div class="record-meta">5座舒适用车 · 2026-08-26</div></div><div class="chevron">›</div></div>
|
||
<div class="record"><div class="record-icon photo">◈</div><div class="record-text"><div class="record-title">亲子玩水</div><div class="record-meta">玩法路线 · 最近浏览</div></div><div class="chevron">›</div></div>
|
||
</div>
|
||
<div class="account"><div class="account-title">账号操作</div><div class="account-sub">退出登录会清除本机最近浏览记录</div></div>
|
||
<div class="bottom"><div class="nav-item"><span class="nav-icon">⌂</span>首页</div><div class="nav-item"><span class="nav-icon">☷</span>玩法</div><div class="nav-item"><span class="nav-icon">♧</span>管家</div><div class="nav-item active"><span class="nav-icon">♙</span>我的</div></div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="proposal">
|
||
<h2>C · 两个快捷入口 + 浏览列表</h2>
|
||
<p class="proposal-copy">合并成“我的旅程”模块，顶部放两个入口，下面保留历史浏览列表。入口识别快，但占用横向空间。</p>
|
||
<div class="phone">
|
||
<div class="screen">
|
||
<div class="status"><span>11:14</span><span>100% ▰</span></div>
|
||
<div class="hero"><div><div class="hero-title">把旅程交给懂贵州的人</div><div class="hero-sub">A QUIETER WAY TO TRAVEL</div></div></div>
|
||
<div class="member"><div class="member-head"><div class="avatar">♙</div><div><div class="member-name">万趣会员</div><div class="member-sub">已绑定手机号 185****2260</div></div><div class="vip">已登录</div></div><button class="outline-action">♙ 获取微信头像</button></div>
|
||
<h3 class="explore-title">我的旅程 <span class="count">1 条浏览</span></h3>
|
||
<p class="explore-sub">快速处理需求，继续探索内容</p>
|
||
<div class="two-actions"><button class="action-tile primary"><span class="tile-icon">⌁</span><span class="tile-title">用车需求</span><span class="tile-meta">查看 / 继续填写</span></button><button class="action-tile"><span class="tile-icon">◌</span><span class="tile-title">历史浏览</span><span class="tile-meta">1 条记录</span></button></div>
|
||
<div class="records"><div class="record"><div class="record-icon photo">◈</div><div class="record-text"><div class="record-title">亲子玩水</div><div class="record-meta">玩法路线 · 最近浏览</div></div><div class="chevron">›</div></div></div>
|
||
<div class="account"><div class="account-title">账号操作</div><div class="account-sub">退出登录会清除本机最近浏览记录</div></div>
|
||
<div class="bottom"><div class="nav-item"><span class="nav-icon">⌂</span>首页</div><div class="nav-item"><span class="nav-icon">☷</span>玩法</div><div class="nav-item"><span class="nav-icon">♧</span>管家</div><div class="nav-item active"><span class="nav-icon">♙</span>我的</div></div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
<div class="legend"><span>保持现有页面风格</span><span>仅调整记录区</span><span>不改变底部导航与会员卡</span></div>
|
||
</main>
|
||
</body>
|
||
</html>
|