217 lines
9.4 KiB
HTML
217 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LVVXH3TL04"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-LVVXH3TL04');
|
|
</script>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
|
|
<title>愈心谷 · 心理健康服务</title>
|
|
<style>
|
|
:root{
|
|
--pri:#E54D42; --blue:#4A90E2; --green:#5CB85C;
|
|
--text:#333; --sub:#999;
|
|
--hero-start:#FF9F80; --hero-end:#FFB8A6;
|
|
--bg-start:#FFD1C7; --bg-end:#FFC8B5;
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{
|
|
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
|
|
background:linear-gradient(180deg,var(--bg-start) 0%,var(--bg-end) 40%,#fff5f0 100%);
|
|
color:var(--text);max-width:430px;margin:0 auto;min-height:100vh;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
|
|
/* ── Top Bar ── */
|
|
.topbar{
|
|
text-align:center;padding:16px 0 10px;
|
|
position:sticky;top:0;z-index:10;
|
|
background:linear-gradient(180deg,var(--bg-start) 0%,rgba(255,209,199,0.6) 100%);
|
|
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
|
|
}
|
|
|
|
/* ── Hero ── */
|
|
.hero{
|
|
background:linear-gradient(135deg,var(--hero-start),var(--hero-end));
|
|
border-radius:20px;margin:8px 16px 0;padding:28px 20px 36px;
|
|
position:relative;overflow:hidden;min-height:160px;
|
|
}
|
|
/* white translucent circles instead of emoji hearts */
|
|
.hero .dc{position:absolute;border-radius:50%;background:rgba(255,255,255,0.25);z-index:0}
|
|
.hero .dc1{width:50px;height:50px;top:10px;right:30px}
|
|
.hero .dc2{width:30px;height:30px;top:45px;right:70px}
|
|
.hero .dc3{width:20px;height:20px;top:20px;right:95px}
|
|
.hero .logo-wrap{position:relative;z-index:2;margin-bottom:10px}
|
|
.hero .sub{font-size:14px;color:rgba(255,255,255,0.92);position:relative;z-index:2}
|
|
/* hand-heart: CSS hearts instead of emoji */
|
|
.hero .hearts-css{position:absolute;right:14px;bottom:16px;z-index:0;opacity:0.45}
|
|
.hero .hearts-css .hh{
|
|
display:inline-block;width:50px;height:50px;position:relative;
|
|
margin:0 4px;
|
|
}
|
|
.hero .hearts-css .hh::before,.hero .hearts-css .hh::after{
|
|
content:"";position:absolute;width:26px;height:40px;border-radius:26px 26px 0 0;
|
|
background:#fff;
|
|
}
|
|
.hero .hearts-css .hh::before{left:15px;top:0;transform:rotate(-45deg);transform-origin:0 100%}
|
|
.hero .hearts-css .hh::after{left:0;top:0;transform:rotate(45deg);transform-origin:100% 100%}
|
|
.hero::after{
|
|
content:"";position:absolute;bottom:0;left:0;right:0;height:30px;
|
|
background:linear-gradient(transparent,rgba(255,209,199,0.3));
|
|
}
|
|
|
|
/* ── Section ── */
|
|
.section{padding:0 16px;margin-top:24px}
|
|
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
|
|
.sec-head .title{font-size:17px;font-weight:600;color:var(--text)}
|
|
.sec-head .more{font-size:13px;color:var(--sub);cursor:pointer}
|
|
|
|
/* ── Service Cards ── */
|
|
.services{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
.svc-card{
|
|
border-radius:12px;padding:14px 12px;
|
|
display:flex;align-items:center;gap:10px;box-shadow:0 2px 6px rgba(0,0,0,0.04);
|
|
cursor:pointer;transition:transform 0.15s;
|
|
word-break:keep-all;overflow:hidden;
|
|
}
|
|
.svc-card:active{transform:scale(0.97)}
|
|
/* CSS icons replacing emojis */
|
|
.svc-card .sicon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;font-size:16px}
|
|
.svc-card .sinfo{flex:1;min-width:0}
|
|
.svc-card .sinfo .sl{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px;white-space:nowrap}
|
|
.svc-card .sinfo .sd{font-size:11px;color:var(--sub);white-space:nowrap}
|
|
|
|
.svc-psy{background:#FFECEC}.svc-psy .sicon{background:#FFD4D4;color:var(--pri)}
|
|
.svc-edu{background:#FFF8E6}.svc-edu .sicon{background:#FFE8C0;color:#E8985A}
|
|
.svc-ai{background:#E6F0FF}.svc-ai .sicon{background:#CDE3FF;color:var(--blue)}
|
|
.svc-heal{background:#E6FFE8}.svc-heal .sicon{background:#CDF0D0;color:var(--green)}
|
|
|
|
/* ── Activity Card ── */
|
|
.act-card{
|
|
background:#fff;border-radius:16px;padding:28px 20px;
|
|
position:relative;overflow:hidden;
|
|
box-shadow:0 4px 12px rgba(0,0,0,0.06);
|
|
}
|
|
/* fixed: strokes behind all text, lower opacity */
|
|
.act-card .strokes{position:absolute;inset:0;pointer-events:none;opacity:0.08;z-index:0}
|
|
.act-card .strokes span{position:absolute;border-radius:3px;transform:rotate(-30deg)}
|
|
.act-card .strokes .s1{top:15px;left:-5px;width:160px;height:10px;background:var(--hero-end)}
|
|
.act-card .strokes .s2{top:70px;right:-10px;width:120px;height:8px;background:var(--blue)}
|
|
.act-card .strokes .s3{bottom:45px;left:20px;width:100px;height:7px;background:#E0D5F5}
|
|
.act-card .strokes .s4{bottom:15px;right:0px;width:140px;height:6px;background:var(--green)}
|
|
.act-card .main-text{font-size:28px;font-weight:800;color:#222;letter-spacing:4px;margin-bottom:10px;position:relative;z-index:1;line-height:1}
|
|
.act-card .side{display:flex;gap:20px;margin-bottom:14px;position:relative;z-index:1}
|
|
.act-card .side .st{font-size:12px;color:var(--sub);line-height:1.7;white-space:nowrap}
|
|
.act-card .footer{font-size:11px;color:#aaa;border-top:1px solid #f0f0f0;padding-top:12px;position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
|
|
/* ── Bottom Card ── */
|
|
.bot-card{
|
|
background:#fff;border-radius:16px;padding:30px 20px;
|
|
margin:16px 16px 80px;position:relative;overflow:hidden;
|
|
box-shadow:0 2px 10px rgba(0,0,0,0.05);
|
|
}
|
|
.bot-card .blobs{position:absolute;bottom:-20px;right:-10px}
|
|
.bot-card .blobs span{display:inline-block;border-radius:50%}
|
|
.bot-card .blobs .b1{width:100px;height:100px;background:var(--hero-end);opacity:0.15;margin-right:-30px}
|
|
.bot-card .blobs .b2{width:60px;height:60px;background:#E0D5F5;opacity:0.2;margin-bottom:-20px}
|
|
.bot-card .btext{font-size:20px;color:#666;font-weight:300;position:relative;z-index:1;line-height:1.6}
|
|
.bot-card .btext .em{color:var(--pri);font-weight:500}
|
|
|
|
/* ── Nav ── */
|
|
.nav{
|
|
position:fixed;bottom:0;left:50%;transform:translateX(-50%);
|
|
width:100%;max-width:430px;background:#fff;
|
|
display:flex;justify-content:space-around;padding:6px 0 calc(10px + env(safe-area-inset-bottom,0));
|
|
border-top:1px solid #f0f0f0;z-index:100;
|
|
box-shadow:0 -2px 8px rgba(0,0,0,0.03);
|
|
}
|
|
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--sub);cursor:pointer;line-height:1}
|
|
.nav-item.active{color:var(--pri)}
|
|
/* CSS nav icons replacing emojis */
|
|
.nav-item .ni{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
|
|
.nav-item.active .ni{color:var(--pri)}
|
|
|
|
@media(max-width:380px){
|
|
.hero .logo-wrap img{height:28px!important}
|
|
.svc-card{padding:10px 8px}
|
|
.svc-card .sinfo .sl{font-size:13px}
|
|
.act-card .main-text{font-size:22px}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="topbar"><img src="logo.png" alt="愈心脊" style="height:24px;vertical-align:middle"></div>
|
|
|
|
<!-- Hero -->
|
|
<div class="hero">
|
|
<div class="dc dc1"></div><div class="dc dc2"></div><div class="dc dc3"></div>
|
|
<div class="logo-wrap"><img src="logo.png" alt="愈心脊" style="height:36px"></div>
|
|
<p class="sub">专业的心理健康服务平台</p>
|
|
<div class="hearts-css"><span class="hh"></span><span class="hh"></span></div>
|
|
</div>
|
|
|
|
<!-- 专业服务 -->
|
|
<div class="section">
|
|
<div class="sec-head"><span class="title">专业服务</span></div>
|
|
<div class="services">
|
|
<div class="svc-card svc-psy">
|
|
<div class="sicon">💬</div>
|
|
<div class="sinfo"><div class="sl">心理咨询</div><div class="sd">你的心灵港湾</div></div>
|
|
</div>
|
|
<div class="svc-card svc-edu">
|
|
<div class="sicon">📋</div>
|
|
<div class="sinfo"><div class="sl">心理评估</div><div class="sd">科学评估，即刻开始</div></div>
|
|
</div>
|
|
<div class="svc-card svc-ai">
|
|
<div class="sicon">◈</div>
|
|
<div class="sinfo"><div class="sl">私域活动</div><div class="sd">从第一个好友开始</div></div>
|
|
</div>
|
|
<div class="svc-card svc-heal">
|
|
<div class="sicon">♡</div>
|
|
<div class="sinfo"><div class="sl">健康管理</div><div class="sd">关注今天，即关注未来</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动中心 -->
|
|
<div class="section">
|
|
<div class="sec-head"><span class="title">活动中心</span><span class="more">更多 →</span></div>
|
|
<div class="act-card">
|
|
<div class="strokes">
|
|
<span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span>
|
|
</div>
|
|
<div class="main-text">I SEE YOU</div>
|
|
<div class="side">
|
|
<div class="st">艺术<br>无边界</div>
|
|
<div class="st">表达有<br>力量</div>
|
|
</div>
|
|
<div class="footer">NDI叙事绘画治疗法®九周年大会</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Card -->
|
|
<div class="bot-card">
|
|
<div class="blobs"><span class="b1"></span><span class="b2"></span></div>
|
|
<div class="btext"><span class="em">I want to care more</span><br>about you</div>
|
|
</div>
|
|
|
|
<!-- Nav -->
|
|
<div class="nav">
|
|
<div class="nav-item active"><span class="ni">⌂</span>首页</div>
|
|
<div class="nav-item"><span class="ni">◉</span>心理咨询</div>
|
|
<div class="nav-item"><span class="ni">☰</span>心理测评</div>
|
|
<div class="nav-item"><span class="ni">✦</span>私域活动</div>
|
|
<div class="nav-item"><span class="ni">♡</span>健康管理</div>
|
|
<div class="nav-item"><span class="ni">◍</span>我的</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|