495 lines
28 KiB
HTML
495 lines
28 KiB
HTML
|
||
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>汪圈 · 宠物社交 iOS 重新设计</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;510;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--bg: #14102b;
|
||
--bg-warm: #1c1442;
|
||
--surface: #1f1742;
|
||
--surface-2: #251c4a;
|
||
--surface-hi: #2d2255;
|
||
--fg: #f0e9ff;
|
||
--fg-2: #c7b9e0;
|
||
--muted: #8a7aab;
|
||
--border: #2e234a;
|
||
--border-soft: #251c40;
|
||
--accent: #d8b4ff;
|
||
--accent-2: #ffb3c8;
|
||
--primary: #ffd9a8;
|
||
--primary-on: #2a1d10;
|
||
--success: #8fe5b5;
|
||
--warn: #ffd166;
|
||
--danger: #ff8a9b;
|
||
--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
|
||
--font-body: 'Inter', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
--radius-sm: 10px;
|
||
--radius-md: 16px;
|
||
--radius-lg: 24px;
|
||
--radius-pill: 9999px;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
|
||
body {
|
||
background:
|
||
radial-gradient(ellipse 80% 60% at 20% 0%, rgba(216, 180, 255, 0.12), transparent 60%),
|
||
radial-gradient(ellipse 60% 50% at 90% 20%, rgba(255, 179, 200, 0.10), transparent 60%),
|
||
radial-gradient(ellipse 90% 80% at 50% 100%, rgba(255, 217, 168, 0.06), transparent 60%),
|
||
var(--bg);
|
||
min-height: 100vh;
|
||
}
|
||
.container { max-width: 1840px; margin: 0 auto; padding: 56px 80px 96px; }
|
||
|
||
/* ---- masthead ---- */
|
||
.mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; }
|
||
.brand { display: flex; align-items: center; gap: 14px; }
|
||
.brand-mark {
|
||
width: 56px; height: 56px; border-radius: 16px;
|
||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
|
||
display: grid; place-items: center;
|
||
box-shadow: 0 12px 32px rgba(216, 180, 255, 0.25), inset 0 0 0 1px rgba(255,255,255,0.18);
|
||
}
|
||
.brand-mark svg { width: 28px; height: 28px; color: var(--primary-on); }
|
||
.brand-text { font-family: var(--font-display); }
|
||
.brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
|
||
.brand-tag { font-size: 11px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 6px; }
|
||
|
||
.eyebrow {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 6px 14px; border-radius: var(--radius-pill);
|
||
background: rgba(216, 180, 255, 0.08);
|
||
border: 1px solid rgba(216, 180, 255, 0.18);
|
||
color: var(--accent);
|
||
font: 500 11px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;
|
||
}
|
||
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
|
||
|
||
.hero { max-width: 920px; }
|
||
.hero h1 {
|
||
font-family: var(--font-display); font-weight: 600; font-size: 76px; line-height: 1.04;
|
||
letter-spacing: -0.03em; margin-top: 20px;
|
||
background: linear-gradient(180deg, var(--fg) 0%, var(--fg-2) 100%);
|
||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||
}
|
||
.hero h1 em { font-style: normal; color: var(--accent); }
|
||
.hero p { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--fg-2); max-width: 56ch; }
|
||
|
||
.meta-row { display: flex; gap: 28px; margin-top: 28px; }
|
||
.meta-item { display: flex; flex-direction: column; gap: 4px; }
|
||
.meta-item .k { font: 500 10px/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
|
||
.meta-item .v { font: 600 15px/1.2 var(--font-display); color: var(--fg); }
|
||
|
||
/* ---- phone grid ---- */
|
||
.section-head {
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
margin: 80px 0 32px;
|
||
padding-bottom: 16px; border-bottom: 1px solid var(--border-soft);
|
||
}
|
||
.section-head h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
|
||
.section-head .sub { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
|
||
|
||
.phones {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 28px;
|
||
}
|
||
.phone-card {
|
||
display: flex; flex-direction: column; align-items: center; gap: 18px;
|
||
text-decoration: none; color: inherit;
|
||
transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
|
||
}
|
||
.phone-card:hover { transform: translateY(-6px); }
|
||
.phone-card .label-num { font: 500 11px/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
|
||
.phone-card .label-title { font: 600 16px/1.3 var(--font-display); color: var(--fg); margin-top: 2px; }
|
||
.phone-card .label-desc { font: 400 12px/1.5 var(--font-body); color: var(--fg-2); text-align: center; margin-top: 6px; max-width: 22ch; }
|
||
|
||
.phone {
|
||
width: 280px; height: 580px;
|
||
background: #0a0719; border-radius: 38px;
|
||
position: relative; overflow: hidden;
|
||
box-shadow:
|
||
0 30px 80px rgba(0, 0, 0, 0.45),
|
||
0 0 0 1px rgba(255, 255, 255, 0.06),
|
||
inset 0 0 0 2px rgba(255, 255, 255, 0.04);
|
||
}
|
||
.phone::before {
|
||
content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
|
||
width: 84px; height: 24px; background: #000; border-radius: 9999px; z-index: 5;
|
||
}
|
||
.phone-screen {
|
||
position: absolute; inset: 0;
|
||
overflow: hidden;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.phone-status { height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px 0; font: 600 13px/1 var(--font-body); color: var(--fg); position: relative; z-index: 4; }
|
||
.phone-status .icons { display: flex; gap: 5px; }
|
||
.phone-status .icons span { width: 14px; height: 10px; background: var(--fg); border-radius: 2px; opacity: 0.9; }
|
||
|
||
/* per-screen content previews */
|
||
.p-plaza { padding: 0 16px 16px; }
|
||
.p-plaza .ph-head { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; margin-bottom: 14px; }
|
||
.p-plaza .ph-title { font: 700 18px/1 var(--font-display); letter-spacing: -0.01em; }
|
||
.p-plaza .ph-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
|
||
.p-plaza .tabs { display: flex; gap: 16px; margin-bottom: 12px; }
|
||
.p-plaza .tab { font: 500 12px/1 var(--font-body); color: var(--muted); }
|
||
.p-plaza .tab.act { color: var(--fg); position: relative; }
|
||
.p-plaza .tab.act::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--accent); }
|
||
.p-plaza .post { background: rgba(45, 34, 85, 0.5); border-radius: 14px; padding: 12px; margin-bottom: 10px; border: 1px solid rgba(216, 180, 255, 0.08); }
|
||
.p-plaza .post .head { display: flex; align-items: center; gap: 8px; }
|
||
.p-plaza .post .av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ffb3c8, #ffd9a8); }
|
||
.p-plaza .post .nm { font: 600 11px/1 var(--font-body); }
|
||
.p-plaza .post .tm { font: 400 9px/1 var(--font-body); color: var(--muted); margin-left: auto; }
|
||
.p-plaza .post .body { font: 400 10px/1.45 var(--font-body); color: var(--fg-2); margin-top: 8px; }
|
||
.p-plaza .post .img { height: 60px; border-radius: 8px; margin-top: 8px; background: linear-gradient(135deg, #4a3a7a, #6b4f9a); position: relative; overflow: hidden; }
|
||
.p-plaza .post .img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 40%, rgba(255, 217, 168, 0.4), transparent 50%); }
|
||
.p-plaza .post .row { display: flex; gap: 12px; margin-top: 8px; font: 500 9px/1 var(--font-body); color: var(--muted); }
|
||
|
||
.p-nearby { padding: 0 16px 16px; position: relative; flex: 1; }
|
||
.p-nearby .filters { display: flex; gap: 8px; margin-top: 8px; margin-bottom: 14px; }
|
||
.p-nearby .f { padding: 5px 10px; border-radius: 999px; font: 500 10px/1 var(--font-body); background: rgba(45, 34, 85, 0.4); color: var(--fg-2); border: 1px solid rgba(216, 180, 255, 0.1); }
|
||
.p-nearby .f.act { background: var(--accent); color: var(--primary-on); border-color: transparent; }
|
||
.p-nearby .card {
|
||
position: relative; flex: 1; border-radius: 18px; overflow: hidden;
|
||
background: linear-gradient(160deg, #3a2a6a 0%, #1a1230 100%);
|
||
border: 1px solid rgba(216, 180, 255, 0.1);
|
||
}
|
||
.p-nearby .card .photo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255, 179, 200, 0.3), transparent 60%), linear-gradient(180deg, #6b4f9a 0%, #2a1f4a 100%); }
|
||
.p-nearby .card .photo::before { content: ''; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 217, 168, 0.4); filter: blur(8px); }
|
||
.p-nearby .card .info { position: absolute; left: 14px; right: 14px; bottom: 14px; }
|
||
.p-nearby .card .info .nm { font: 700 18px/1 var(--font-display); color: var(--fg); }
|
||
.p-nearby .card .info .sub { font: 500 11px/1.4 var(--font-body); color: var(--fg-2); margin-top: 4px; }
|
||
.p-nearby .card .info .tag { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 999px; font: 500 9px/1 var(--font-body); background: rgba(255, 217, 168, 0.2); color: var(--primary); border: 1px solid rgba(255, 217, 168, 0.3); }
|
||
.p-nearby .actions { display: flex; gap: 14px; margin-top: 12px; justify-content: center; }
|
||
.p-nearby .actions .a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(45, 34, 85, 0.6); border: 1px solid rgba(216, 180, 255, 0.12); }
|
||
.p-nearby .actions .a.heart { background: linear-gradient(135deg, var(--accent-2), #ff8aab); border: 0; }
|
||
.p-nearby .actions .a svg { width: 18px; height: 18px; color: var(--fg); }
|
||
.p-nearby .actions .a.heart svg { color: white; }
|
||
|
||
.p-msg { padding: 0 16px 16px; }
|
||
.p-msg .head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
|
||
.p-msg .head h3 { font: 700 18px/1 var(--font-display); }
|
||
.p-msg .head .ic { width: 24px; height: 24px; border-radius: 50%; background: rgba(216, 180, 255, 0.12); }
|
||
.p-msg .item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(45, 34, 85, 0.4); }
|
||
.p-msg .item .av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
|
||
.p-msg .item .av.a1 { background: linear-gradient(135deg, #ffb3c8, #ffd9a8); }
|
||
.p-msg .item .av.a2 { background: linear-gradient(135deg, #d8b4ff, #a4d4ff); }
|
||
.p-msg .item .av.a3 { background: linear-gradient(135deg, #8fe5b5, #d8b4ff); }
|
||
.p-msg .item .av.a4 { background: linear-gradient(135deg, #ffd9a8, #ffb3c8); position: relative; }
|
||
.p-msg .item .av.a4::after { content: ''; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid var(--bg); }
|
||
.p-msg .item .col { flex: 1; min-width: 0; }
|
||
.p-msg .item .row1 { display: flex; align-items: center; justify-content: space-between; }
|
||
.p-msg .item .nm { font: 600 12px/1 var(--font-body); }
|
||
.p-msg .item .tm { font: 400 9px/1 var(--font-body); color: var(--muted); }
|
||
.p-msg .item .prv { font: 400 10px/1.3 var(--font-body); color: var(--fg-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.p-msg .item .bd { min-width: 16px; height: 16px; border-radius: 50%; background: var(--accent-2); color: var(--primary-on); font: 700 9px/16px var(--font-body); text-align: center; padding: 0 4px; }
|
||
|
||
.p-me { padding: 0 16px 16px; }
|
||
.p-me .top { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; }
|
||
.p-me .av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
|
||
.p-me .info .nm { font: 700 16px/1 var(--font-display); }
|
||
.p-me .info .sub { font: 400 10px/1.4 var(--font-body); color: var(--muted); margin-top: 4px; }
|
||
.p-me .stats { display: flex; gap: 6px; margin-bottom: 16px; }
|
||
.p-me .st { flex: 1; background: rgba(45, 34, 85, 0.4); border-radius: 10px; padding: 8px; text-align: center; border: 1px solid rgba(216, 180, 255, 0.08); }
|
||
.p-me .st .n { font: 700 16px/1 var(--font-display); color: var(--fg); }
|
||
.p-me .st .l { font: 400 9px/1 var(--font-body); color: var(--muted); margin-top: 4px; }
|
||
.p-me .section { font: 600 11px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 12px 0 8px; }
|
||
.p-me .pet-row { display: flex; gap: 8px; }
|
||
.p-me .pet { flex: 1; background: rgba(45, 34, 85, 0.4); border-radius: 10px; padding: 8px; border: 1px solid rgba(216, 180, 255, 0.08); }
|
||
.p-me .pet .ph { height: 36px; border-radius: 6px; background: linear-gradient(135deg, #ffd9a8, #ffb3c8); }
|
||
.p-me .pet .nm { font: 600 10px/1.2 var(--font-body); margin-top: 6px; }
|
||
.p-me .row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(45, 34, 85, 0.4); font: 500 11px/1 var(--font-body); }
|
||
.p-me .row .chev { color: var(--muted); font-size: 14px; }
|
||
|
||
.p-pub { padding: 0 16px 16px; }
|
||
.p-pub .head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 16px; }
|
||
.p-pub .head h3 { font: 700 18px/1 var(--font-display); }
|
||
.p-pub .head .x { color: var(--muted); font-size: 18px; }
|
||
.p-pub .head .post { padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--primary-on); font: 600 12px/1 var(--font-body); }
|
||
.p-pub .input {
|
||
background: rgba(45, 34, 85, 0.4); border-radius: 12px; padding: 12px;
|
||
min-height: 80px; font: 400 11px/1.5 var(--font-body); color: var(--fg-2);
|
||
border: 1px solid rgba(216, 180, 255, 0.08);
|
||
}
|
||
.p-pub .images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
|
||
.p-pub .img { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, #6b4f9a, #4a3a7a); position: relative; overflow: hidden; }
|
||
.p-pub .img.i2 { background: linear-gradient(135deg, #ffd9a8, #ffb3c8); }
|
||
.p-pub .img.add { background: rgba(45, 34, 85, 0.4); border: 1px dashed rgba(216, 180, 255, 0.2); display: grid; place-items: center; color: var(--muted); font-size: 20px; }
|
||
.p-pub .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
|
||
.p-pub .tag { padding: 4px 10px; border-radius: 999px; font: 500 9px/1 var(--font-body); background: rgba(216, 180, 255, 0.1); color: var(--accent); }
|
||
.p-pub .row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-top: 12px; border-top: 1px solid rgba(45, 34, 85, 0.4); font: 500 11px/1 var(--font-body); }
|
||
|
||
.phone-home { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 120px; height: 4px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; }
|
||
|
||
.footer { margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; font: 400 12px/1.4 var(--font-body); color: var(--muted); }
|
||
.footer .links { display: flex; gap: 24px; }
|
||
.footer a { color: var(--fg-2); text-decoration: none; }
|
||
|
||
@media (max-width: 1600px) {
|
||
.phones { grid-template-columns: repeat(5, 1fr); gap: 18px; }
|
||
.phone { width: 240px; height: 500px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<header class="mast">
|
||
<div class="brand">
|
||
<div class="brand-mark" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="11" cy="4" r="2"/><circle cx="18" cy="8" r="2"/><circle cx="20" cy="16" r="2"/><circle cx="9" cy="20" r="2"/><circle cx="4" cy="14" r="2"/>
|
||
<path d="M8.5 14.5c1.5-2 5-2 6.5 0 1 1.3 1 3 0 4-1.3 1.3-3 1.3-4.3.5-1.3-1-1.5-3-1-4.5z" fill="currentColor" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<div class="brand-text">
|
||
<div class="brand-name">汪圈</div>
|
||
<div class="brand-tag">WangQuan · v2 redesign</div>
|
||
</div>
|
||
</div>
|
||
<div class="eyebrow"><span class="dot"></span>iOS · iPhone 14 · 暗色温柔版</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<h1>为宠物找玩伴,<br/>更<em>温柔</em>一点。</h1>
|
||
<p>把微信小程序里的汪圈重新想象成一款 iOS 原生体验。暖紫底色,柔粉与琥珀点缀,半透明玻璃层叠 —— 弱化冷蓝与高对比,让宠物社交更亲和。</p>
|
||
<div class="meta-row">
|
||
<div class="meta-item"><div class="k">平台</div><div class="v">iOS · iPhone 14 (390×844)</div></div>
|
||
<div class="meta-item"><div class="k">屏幕</div><div class="v">4 主页面 + 1 发布</div></div>
|
||
<div class="meta-item"><div class="k">基线</div><div class="v">Totality Festival · 调柔</div></div>
|
||
<div class="meta-item"><div class="k">交付</div><div class="v">5 个独立 HTML 文件</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="section-head">
|
||
<h2>5 个核心屏幕</h2>
|
||
<div class="sub">点击进入完整页面</div>
|
||
</div>
|
||
|
||
<section class="phones">
|
||
|
||
<a class="phone-card" href="plaza.html">
|
||
<div class="phone">
|
||
<div class="phone-screen" style="background: linear-gradient(180deg, #1c1442 0%, #14102b 100%);">
|
||
<div class="phone-status"><span>9:41</span><div class="icons"><span></span><span></span><span></span></div></div>
|
||
<div class="p-plaza">
|
||
<div class="ph-head">
|
||
<div class="ph-title">广场</div>
|
||
<div class="ph-avatar"></div>
|
||
</div>
|
||
<div class="tabs">
|
||
<div class="tab act">推荐</div>
|
||
<div class="tab">附近</div>
|
||
<div class="tab">热门</div>
|
||
<div class="tab">关注</div>
|
||
</div>
|
||
<div class="post">
|
||
<div class="head"><div class="av"></div><div class="nm">@奶油</div><div class="tm">2分钟前</div></div>
|
||
<div class="body">今天带奶昔去了滨江公园,认识了一只柴犬妹妹 🥺💕</div>
|
||
<div class="img"></div>
|
||
<div class="row"><span>♡ 128</span><span>💬 24</span><span>↗ 6</span></div>
|
||
</div>
|
||
<div class="post">
|
||
<div class="head"><div class="av" style="background: linear-gradient(135deg, #d8b4ff, #a4d4ff);"></div><div class="nm">@乐乐家</div><div class="tm">15分钟前</div></div>
|
||
<div class="body">周末宠物派对报名开始,带毛孩子来玩!</div>
|
||
<div class="row"><span>♡ 87</span><span>💬 12</span><span>↗ 3</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="phone-home"></div>
|
||
</div>
|
||
<div>
|
||
<div class="label-num">01 · 广场</div>
|
||
<div class="label-title">Plaza</div>
|
||
</div>
|
||
<div class="label-desc">社区动态流,推荐 / 附近 / 热门 / 关注 四种内容切分</div>
|
||
</a>
|
||
|
||
<a class="phone-card" href="nearby.html">
|
||
<div class="phone">
|
||
<div class="phone-screen" style="background: linear-gradient(180deg, #1c1442 0%, #14102b 100%);">
|
||
<div class="phone-status"><span>9:41</span><div class="icons"><span></span><span></span><span></span></div></div>
|
||
<div class="p-nearby">
|
||
<div class="filters">
|
||
<div class="f act">3 km</div>
|
||
<div class="f">全部</div>
|
||
<div class="f">金毛</div>
|
||
<div class="f">柯基</div>
|
||
<div class="f">猫咪</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="photo"></div>
|
||
<div class="info">
|
||
<div class="nm">麻薯 · 2岁</div>
|
||
<div class="sub">金毛 · 1.2 km · 3分钟前活跃</div>
|
||
<span class="tag">🌿 喜欢慢跑</span>
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
<div class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></div>
|
||
<div class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><line x1="2" y1="2" x2="22" y2="22"/></svg></div>
|
||
<div class="a heart"><svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
|
||
<div class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="phone-home"></div>
|
||
</div>
|
||
<div>
|
||
<div class="label-num">02 · 附近</div>
|
||
<div class="label-title">Nearby</div>
|
||
</div>
|
||
<div class="label-desc">附近宠物卡片,左右滑找新朋友,过滤距离与品种</div>
|
||
</a>
|
||
|
||
<a class="phone-card" href="messages.html">
|
||
<div class="phone">
|
||
<div class="phone-screen" style="background: linear-gradient(180deg, #1c1442 0%, #14102b 100%);">
|
||
<div class="phone-status"><span>9:41</span><div class="icons"><span></span><span></span><span></span></div></div>
|
||
<div class="p-msg">
|
||
<div class="head">
|
||
<h3>消息</h3>
|
||
<div class="ic"></div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="av a1"></div>
|
||
<div class="col">
|
||
<div class="row1"><div class="nm">麻薯妈妈</div><div class="tm">刚刚</div></div>
|
||
<div class="prv">好的!明天 4 点滨江公园见 🐾</div>
|
||
</div>
|
||
<div class="bd">2</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="av a2"></div>
|
||
<div class="col">
|
||
<div class="row1"><div class="nm">乐乐家</div><div class="tm">10 分钟</div></div>
|
||
<div class="prv">[图片] 这是我家喵的新造型</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="av a3"></div>
|
||
<div class="col">
|
||
<div class="row1"><div class="nm">豆豆</div><div class="tm">今天 14:22</div></div>
|
||
<div class="prv">感谢分享遛狗路线!我们下周去试试</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="av a4"></div>
|
||
<div class="col">
|
||
<div class="row1"><div class="nm">Lucky 之家</div><div class="tm">昨天</div></div>
|
||
<div class="prv">周末宠物派对还差 3 个名额</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="av a1" style="background: linear-gradient(135deg, #d8b4ff, #8fe5b5);"></div>
|
||
<div class="col">
|
||
<div class="row1"><div class="nm">奶油</div><div class="tm">昨天</div></div>
|
||
<div class="prv">欢迎来到汪圈!这里有很多可爱的小动物</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="phone-home"></div>
|
||
</div>
|
||
<div>
|
||
<div class="label-num">03 · 消息</div>
|
||
<div class="label-title">Messages</div>
|
||
</div>
|
||
<div class="label-desc">私聊与群消息列表,未读小红点 + 在线状态点</div>
|
||
</a>
|
||
|
||
<a class="phone-card" href="profile.html">
|
||
<div class="phone">
|
||
<div class="phone-screen" style="background: linear-gradient(180deg, #1c1442 0%, #14102b 100%);">
|
||
<div class="phone-status"><span>9:41</span><div class="icons"><span></span><span></span><span></span></div></div>
|
||
<div class="p-me">
|
||
<div class="top">
|
||
<div class="av"></div>
|
||
<div class="info" style="flex:1">
|
||
<div class="nm">阿布的家长</div>
|
||
<div class="sub">上海 · 浦东新区 · 6 年养宠经验</div>
|
||
</div>
|
||
<div style="width:18px;height:18px;border-radius:50%;background:rgba(216,180,255,0.15);"></div>
|
||
</div>
|
||
<div class="stats">
|
||
<div class="st"><div class="n">128</div><div class="l">动态</div></div>
|
||
<div class="st"><div class="n">342</div><div class="l">关注</div></div>
|
||
<div class="st"><div class="n">1.2k</div><div class="l">粉丝</div></div>
|
||
<div class="st"><div class="n">56</div><div class="l">收藏</div></div>
|
||
</div>
|
||
<div class="section">我的毛孩子 · 2</div>
|
||
<div class="pet-row">
|
||
<div class="pet"><div class="ph"></div><div class="nm">奶昔 · 金毛</div></div>
|
||
<div class="pet"><div class="ph" style="background: linear-gradient(135deg, #d8b4ff, #a4d4ff);"></div><div class="nm">年糕 · 布偶</div></div>
|
||
<div class="pet" style="background: rgba(45, 34, 85, 0.2); display: grid; place-items: center; color: var(--muted);">+</div>
|
||
</div>
|
||
<div class="row" style="margin-top:14px"><span>设置</span><span class="chev">›</span></div>
|
||
<div class="row"><span>消息通知</span><span class="chev">›</span></div>
|
||
<div class="row"><span>帮助与反馈</span><span class="chev">›</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="phone-home"></div>
|
||
</div>
|
||
<div>
|
||
<div class="label-num">04 · 我的</div>
|
||
<div class="label-title">Profile</div>
|
||
</div>
|
||
<div class="label-desc">个人主页 + 毛孩子档案 + 设置入口</div>
|
||
</a>
|
||
|
||
<a class="phone-card" href="publish.html">
|
||
<div class="phone">
|
||
<div class="phone-screen" style="background: linear-gradient(180deg, #1c1442 0%, #14102b 100%);">
|
||
<div class="phone-status"><span>9:41</span><div class="icons"><span></span><span></span><span></span></div></div>
|
||
<div class="p-pub">
|
||
<div class="head">
|
||
<div class="x">✕</div>
|
||
<h3>发布动态</h3>
|
||
<div class="post">发布</div>
|
||
</div>
|
||
<div class="input">说说你家毛孩子的故事吧… #遛弯 #金毛 #江边</div>
|
||
<div class="images">
|
||
<div class="img"></div>
|
||
<div class="img i2"></div>
|
||
<div class="img add">+</div>
|
||
</div>
|
||
<div class="tags">
|
||
<div class="tag">#推荐话题</div>
|
||
<div class="tag">#毛孩子日常</div>
|
||
<div class="tag">#周末聚会</div>
|
||
</div>
|
||
<div class="row"><span>📍 位置</span><span style="color:var(--muted);">上海·滨江公园 ›</span></div>
|
||
<div class="row"><span>👁 可见范围</span><span style="color:var(--muted);">公开 ›</span></div>
|
||
<div class="row"><span>🐾 关联宠物</span><span style="color:var(--muted);">奶昔 ›</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="phone-home"></div>
|
||
</div>
|
||
<div>
|
||
<div class="label-num">05 · 发布</div>
|
||
<div class="label-title">Publish</div>
|
||
</div>
|
||
<div class="label-desc">模态式发布页,图片 + 标签 + 位置 + 可见范围</div>
|
||
</a>
|
||
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div>汪圈 v2 · iOS redesign · Totality Festival 调柔版</div>
|
||
<div class="links">
|
||
<a href="plaza.html">01 广场</a>
|
||
<a href="nearby.html">02 附近</a>
|
||
<a href="messages.html">03 消息</a>
|
||
<a href="profile.html">04 我的</a>
|
||
<a href="publish.html">05 发布</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|