3 lines
5.9 KiB
HTML
3 lines
5.9 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>
|
||
*{box-sizing:border-box}body{margin:0;background:#ece9e6;font:14px -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#222}.phone{width:min(390px,100vw);min-height:844px;margin:28px auto;background:#FAFAF8;box-shadow:0 20px 60px #4b372f33;overflow:hidden}.top{height:76px;padding:14px 16px 10px;background:#fff;display:flex;align-items:center;border-bottom:1px solid #f0ede9;position:relative}.brand{flex:1}.brand strong{display:block;font-size:19px;color:#E96B6B}.brand small{color:#888}.pill{font-size:11px;color:#2E9B68;background:#ECF8F2;padding:5px 8px;border-radius:99px}.bell{margin-left:12px;font-size:12px}.preview{text-align:center;padding:4px;background:#FFF7E9;color:#B77B19;font-size:10px}.status{margin:8px 16px 0;padding:10px 12px;background:#fff;border:1px solid #e8e5e2;border-radius:12px;display:flex;justify-content:space-between;font-size:12px}.ok{color:#2E9B68}.banner{height:146px;margin:8px 16px 0;border-radius:16px;background:linear-gradient(135deg,#FFF3F2,#FBE8DE);padding:22px 16px;position:relative;overflow:hidden}.banner:after{content:'♡';position:absolute;right:8px;top:-36px;font-size:150px;color:#e96b6b26}.banner h1{font-size:20px;margin:0;color:#6F3A35;width:70%;line-height:1.35}.banner p{font-size:12px;color:#8B5E56}.banner a{display:inline-block;color:#fff;background:#E96B6B;border-radius:99px;padding:7px 12px;font-size:12px}.entries{margin:10px 16px 0;padding:12px 5px;background:#fff;border-radius:16px;display:grid;grid-template-columns:repeat(4,1fr);row-gap:12px;box-shadow:0 4px 16px #4b372f0d}.entry{text-align:center;font-size:12px}.icon{width:38px;height:38px;margin:0 auto 5px;border-radius:12px;display:grid;place-items:center;font-weight:700}.entry:nth-child(1) .icon{background:#FFF0EF;color:#D85D62}.entry:nth-child(2) .icon{background:#FFF7E6;color:#B77B19}.entry:nth-child(3) .icon{background:#ECF8F2;color:#2E8A62}.entry:nth-child(4) .icon{background:#EEF5FF;color:#4A72B8}.entry:nth-child(5) .icon{background:#F5EFFB;color:#8865A7}.entry:nth-child(6) .icon{background:#FFF2E8;color:#B9723B}.entry:nth-child(7) .icon{background:#EEF0FB;color:#5F6FAE}.entry:nth-child(8) .icon{background:#EAF7F5;color:#31867C}.section{margin:24px 16px 0}.heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:10px}.heading h2{font-size:17px;margin:0}.heading small{display:block;color:#888;font-weight:400;margin-top:3px}.more{font-size:12px;color:#E96B6B}.recommend{background:#fff;padding:13px;border-radius:16px;box-shadow:0 4px 16px #4b372f0d;display:flex;gap:12px}.avatar{width:68px;height:84px;border-radius:10px;background:linear-gradient(145deg,#f3d8cf,#e8b7aa);display:grid;place-items:center;color:#fff;font-size:22px}.person{flex:1}.name{font-size:16px;font-weight:650}.meta{font-size:12px;color:#777;margin-top:5px}.reason{margin-top:8px;color:#555;font-size:12px}.tag{display:inline-block;background:#ECF8F2;color:#2E9B68;padding:3px 7px;border-radius:99px;font-size:10px}.actions{margin-top:9px;display:flex;gap:8px}.actions span{flex:1;text-align:center;padding:7px;border-radius:99px;background:#FFF3F2;color:#E96B6B}.actions .primary{background:#E96B6B;color:#fff}.service{padding:14px;background:linear-gradient(135deg,#FFF8F7,#FFF9F0);border:1px solid #f8e3dd;border-radius:16px;display:flex;align-items:center}.service strong{display:block}.service p{font-size:11px;color:#666;margin:5px 0 0}.service a{margin-left:auto;color:#E96B6B;font-size:11px}.tabbar{position:sticky;bottom:0;margin-top:24px;height:62px;background:#fff;border-top:1px solid #eee;display:flex;justify-content:space-around;align-items:center;font-size:11px}.tabbar span:first-child{color:#E96B6B;font-weight:650}
|
||
</style></head><body><main class="phone"><header class="top"><div class="brand"><strong>善缘丹阳</strong><small>真实相识 · 公益牵线</small></div><span class="pill">公益服务</span><span class="bell">消息 2</span></header><div class="preview">界面预览数据</div><div class="status"><span class="ok">✓ 已实名</span><span class="ok">✓ 本地资格</span><span class="ok">✓ 资料已审核</span></div><section class="banner"><h1>让真诚的相遇，在丹阳发生</h1><p>实名认证 · 人工审核 · 公益服务</p><a>了解平台 ›</a></section><section class="entries"><div class="entry"><div class="icon">缘</div>找对象</div><div class="entry"><div class="icon">牵</div>公益红娘</div><div class="entry"><div class="icon">聚</div>公益活动</div><div class="entry"><div class="icon">谈</div>婚恋咨询</div><div class="entry"><div class="icon">学</div>婚恋课堂</div><div class="entry"><div class="icon">伴</div>婚前辅导</div><div class="entry"><div class="icon">安</div>婚恋反诈</div><div class="entry"><div class="icon">站</div>善缘服务站</div></section><section class="section"><div class="heading"><h2>今日推荐<small>根据双方条件，为你认真筛选</small></h2><span class="more">查看更多</span></div><div class="recommend"><div class="avatar">林</div><div class="person"><div><span class="name">林女士 · 29岁</span> <span class="tag">已认证</span></div><div class="meta">165cm · 丹阳 · 教育行业</div><div class="reason">✓ 双方生活规划较为契合<br>✓ 都期待认真稳定的关系</div><div class="actions"><span>不合适</span><span class="primary">喜欢</span></div></div></div></section><section class="section"><div class="heading"><h2>善缘公益服务<small>需要时，我们在这里陪伴你</small></h2></div><div class="service"><div><strong>需要更有温度的帮助？</strong><p>公益红娘尊重双方意愿并提供人工推荐</p></div><a>申请 ›</a></div></section><nav class="tabbar"><span>首页</span><span>找对象</span><span>消息</span><span>活动</span><span>我的</span></nav></main></body></html> |