360 lines
31 KiB
HTML
360 lines
31 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>Hera 首页预览</title>
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||
background: #eef6ff;
|
||
color: #29243a;
|
||
}
|
||
.phone {
|
||
max-width: 470px;
|
||
min-height: 100vh;
|
||
margin: 0 auto;
|
||
padding: 118px 18px 112px;
|
||
background: linear-gradient(180deg, rgba(154,124,255,.92) 0%, rgba(220,201,255,.76) 27%, rgba(253,241,255,.9) 52%, #eef6ff 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.capsule {
|
||
position: absolute;
|
||
top: 58px;
|
||
right: 18px;
|
||
width: 126px;
|
||
height: 40px;
|
||
border-radius: 22px;
|
||
background: rgba(255,255,255,.72);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
font-size: 26px;
|
||
font-weight: 900;
|
||
}
|
||
.day-switch { display: flex; align-items: center; gap: 28px; }
|
||
.avatar-orb {
|
||
width: 72px; height: 72px; border-radius: 50%;
|
||
background: #fffef0; display: flex; align-items: center; justify-content: center;
|
||
box-shadow: 0 8px 18px rgba(119,102,154,.12);
|
||
}
|
||
.water-face {
|
||
width: 45px; height: 52px; border-radius: 50% 50% 52% 52%;
|
||
background: linear-gradient(180deg, #9ff5ff, #39c6ea);
|
||
color: #3274c8; text-align: center; line-height: 42px; font-size: 22px;
|
||
}
|
||
.day-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
|
||
.day-tab { color: rgba(42,34,62,.58); position: relative; }
|
||
.day-tab + .day-tab:before {
|
||
content: ""; position: absolute; left: -1px; top: 12px; width: 1px; height: 8px; background: rgba(42,34,62,.4);
|
||
}
|
||
.day-label { display: block; font-size: 19px; }
|
||
.day-status { display: inline-block; margin-top: 6px; min-width: 58px; height: 27px; border-radius: 15px; line-height: 27px; font-size: 16px; }
|
||
.day-tab.active { color: #29243a; font-weight: 900; }
|
||
.day-tab.active .day-label { font-size: 26px; }
|
||
.day-tab.active .day-status { background: #7956f4; color: #fff; }
|
||
.date-row { margin-top: 34px; display: flex; justify-content: space-between; color: #4f485f; font-size: 15px; }
|
||
.month-day { font-size: 22px; font-weight: 900; }
|
||
.summary-card {
|
||
margin-top: 24px; min-height: 126px; border-radius: 12px;
|
||
background: linear-gradient(105deg, #7139f3, #8344ff 54%, #d35af3);
|
||
color: #fff; padding: 26px 18px; display: flex; align-items: center; justify-content: space-between;
|
||
overflow: hidden; position: relative;
|
||
}
|
||
.summary-card:after {
|
||
content: ""; position: absolute; right: -18px; top: -24px; width: 140px; height: 140px; border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(131,226,255,.95), rgba(61,121,250,.72) 52%, rgba(255,255,255,0) 70%);
|
||
}
|
||
.summary-copy { width: 245px; font-size: 20px; line-height: 1.75; font-weight: 800; z-index: 1; }
|
||
.index-orb {
|
||
width: 92px; height: 92px; border-radius: 50%;
|
||
background: radial-gradient(circle at 45% 36%, #e8ffff, #86dfff 42%, #5a71ff);
|
||
box-shadow: 0 0 0 7px rgba(255,255,255,.22);
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1;
|
||
}
|
||
.index-number { font-size: 42px; line-height: .95; font-weight: 900; }
|
||
.index-label { font-size: 13px; margin-top: 4px; }
|
||
.lucky-grid { margin-top: 14px; display: grid; grid-template-columns: 1.35fr .75fr; gap: 12px; }
|
||
.lucky-box {
|
||
min-height: 58px; border-radius: 12px; padding: 0 14px; background: rgba(255,255,255,.55);
|
||
display: flex; align-items: center; gap: 10px; font-size: 16px;
|
||
}
|
||
.colors { background: rgba(246,233,255,.72); }
|
||
.numbers { background: rgba(234,225,255,.72); }
|
||
.direction { background: rgba(255,241,198,.82); }
|
||
.hours { background: rgba(196,235,255,.82); }
|
||
.lucky-label { font-size: 18px; font-weight: 900; white-space: nowrap; }
|
||
.swatch { width: 28px; height: 28px; border-radius: 8px; }
|
||
.color-chip, .hour-chip { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||
.slot { width: 28px; height: 36px; border-radius: 7px; background: linear-gradient(180deg,#8f75ff,#7454ef); color: #fff; font-size: 28px; text-align: center; line-height: 36px; font-weight: 900; }
|
||
.branch { width: 25px; height: 25px; border-radius: 50%; background: #5bb8df; color: #fff; text-align: center; line-height: 25px; font-weight: 900; }
|
||
.dimension-head { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; }
|
||
.dimension-head strong { font-size: 27px; }
|
||
.dimension-head span { color: #6d6578; font-size: 16px; }
|
||
.dimension-list { margin-top: 16px; display: flex; flex-direction: column; gap: 13px; }
|
||
.card {
|
||
min-height: 126px; border-radius: 12px; background: rgba(255,255,255,.86);
|
||
padding: 18px 42px 18px 18px; position: relative; display: flex; gap: 13px;
|
||
box-shadow: 0 8px 18px rgba(90,79,116,.06);
|
||
}
|
||
.icon { width: 36px; height: 36px; flex: none; border-radius: 12px; }
|
||
.heart { background: radial-gradient(circle at 32% 32%, #ffd2df, #ff79a3 68%, #fff 70%); transform: rotate(-10deg); }
|
||
.gourd { background: radial-gradient(circle at 50% 28%, #ffc65c 0 28%, transparent 29%), radial-gradient(circle at 50% 65%, #f0a222 0 48%, transparent 49%); }
|
||
.vase { background: radial-gradient(circle at 50% 18%, #d5fff0 0 24%, transparent 25%), linear-gradient(180deg, #7df0c9, #2ccda0); border-radius: 18px 18px 10px 10px; }
|
||
.coin { border-radius: 50%; background: radial-gradient(circle, #fff8bb 0 33%, #f1b82d 34% 100%); }
|
||
.fan { border-radius: 50% 50% 8px 8px; background: conic-gradient(from 235deg, #c29cff, #fff, #8e63ef, #c29cff); }
|
||
.scroll { background: repeating-linear-gradient(90deg, #ffe8aa 0 7px, #f5c868 8px 12px); }
|
||
.bamboo { background: linear-gradient(135deg, transparent 20%, #30d3b9 21% 38%, transparent 39% 50%, #25bfa8 51% 68%, transparent 69%); }
|
||
.horse { border-radius: 50% 18px 50% 18px; background: linear-gradient(135deg, #dbe9ff, #6b94f8); }
|
||
.title-row { display: flex; align-items: center; gap: 12px; }
|
||
.title { font-size: 22px; font-weight: 900; white-space: nowrap; }
|
||
.headline { color: #5d5667; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.detail { margin-top: 18px; color: #666071; font-size: 17px; line-height: 1.7; }
|
||
.tag {
|
||
position: absolute; right: 18px; top: 20px; width: 28px; height: 28px; border-radius: 50%;
|
||
color: #fff; font-weight: 900; line-height: 28px; text-align: center; font-size: 16px;
|
||
}
|
||
.tag.yi { background: #4bc660; }
|
||
.tag.ji { background: #f45b72; }
|
||
.arrow { position: absolute; right: 18px; bottom: 16px; font-size: 32px; }
|
||
.tabbar {
|
||
position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
|
||
width: min(470px, 100vw); height: 94px; border-radius: 18px 18px 0 0; background: rgba(255,255,255,.96);
|
||
display: flex; align-items: center; justify-content: space-around; box-shadow: 0 -8px 24px rgba(85,79,110,.1);
|
||
font-size: 17px; font-weight: 900;
|
||
}
|
||
.tab { width: 86px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
|
||
.tab.active { color: #ff9b2a; }
|
||
.tab-icon { width: 24px; height: 20px; border-radius: 0 0 12px 12px; background: currentColor; position: relative; }
|
||
.tab-icon:before { content: ""; position: absolute; left: 3px; top: -12px; width: 18px; height: 18px; border-radius: 12px 12px 7px 7px; background: currentColor; }
|
||
.mine-icon { width: 28px; height: 19px; border-radius: 14px 14px 8px 8px; background: currentColor; position: relative; }
|
||
.mine-icon:before { content: ""; position: absolute; left: 8px; top: -15px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
|
||
.realm { margin-top: -48px; }
|
||
.realm-face { width: 66px; height: 66px; border-radius: 50%; border: 7px solid #f0f7ff; background: #fff; display: grid; place-items: center; color: #ff79a3; font-size: 34px; box-shadow: 0 8px 18px rgba(121,129,164,.16); }
|
||
.page-view { display: none; }
|
||
.page-view.active { display: block; }
|
||
.tab { border: 0; background: transparent; color: #29243a; cursor: pointer; font: inherit; }
|
||
.tab.active { color: #ff9b2a; }
|
||
.my-profile { display: flex; align-items: center; min-height: 78px; margin-top: 2px; }
|
||
.my-info { flex: 1; margin-left: 20px; min-width: 0; }
|
||
.my-name-row { display: flex; align-items: center; gap: 7px; }
|
||
.my-name { font-size: 25px; line-height: 1.1; font-weight: 900; }
|
||
.gender { width: 23px; height: 23px; border-radius: 50%; background: #5cc8ff; color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 900; }
|
||
.my-birthday { margin-top: 12px; display: flex; align-items: center; gap: 7px; color: #6e6378; font-size: 16px; border: 0; background: transparent; padding: 0; cursor: pointer; }
|
||
.my-arrow { color: rgba(38,32,56,.45); font-size: 36px; }
|
||
.quick-card { margin-top: 34px; min-height: 112px; border-radius: 16px; background: rgba(255,255,255,.76); display: flex; align-items: center; gap: 34px; padding: 15px 28px; box-shadow: 0 12px 28px rgba(94,76,134,.08); }
|
||
.quick-entry { width: 78px; text-align: center; font-size: 17px; color: #2b2637; }
|
||
.quick-icon { width: 50px; height: 50px; margin: 0 auto 11px; border-radius: 50%; background: #ece4ff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(138,106,194,.12); }
|
||
.quick-rabbit { color: #5c4438; font-size: 38px; }
|
||
.quick-drop { width: 36px; height: 44px; border-radius: 50% 50% 52% 52%; background: linear-gradient(180deg,#9ff5ff,#39c6ea); color: #3274c8; line-height: 34px; font-size: 20px; }
|
||
.palace { margin-top: 28px; }
|
||
.section-line { display: flex; align-items: center; gap: 9px; }
|
||
.section-line strong { font-size: 27px; }
|
||
.section-line span { font-size: 18px; }
|
||
.section-line em { color: #e74f83; font-style: normal; font-weight: 900; }
|
||
.palace-empty { width: 118px; height: 150px; margin-top: 17px; border-radius: 12px; background: linear-gradient(180deg,#ffe3a3,#fff7a8); box-shadow: 0 14px 24px rgba(216,170,67,.18); }
|
||
.settings { margin-top: 26px; border-radius: 17px; background: rgba(255,255,255,.92); padding: 0 20px; box-shadow: 0 14px 34px rgba(93,83,114,.08); }
|
||
.settings-row { min-height: 67px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(220,224,236,.76); font-size: 20px; }
|
||
.settings-row:last-child { border-bottom: 0; }
|
||
.settings-row span:nth-child(2) { flex: 1; }
|
||
.menu-mark { width: 29px; height: 29px; border: 3px solid #252238; border-radius: 9px; display: grid; place-items: center; font-size: 16px; }
|
||
.menu-headset { border-radius: 50% 50% 42% 42%; border-bottom-color: transparent; }
|
||
.menu-doc { position: relative; }
|
||
.menu-doc:after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px; border-radius: 50%; border: 3px solid #252238; background: #fff; }
|
||
.tiangong-preview { min-height: 100vh; margin: -118px -18px -112px; padding: 92px 42px 140px; background: #fff; color: #202126; }
|
||
.tiangong-title { display: block; margin-bottom: 10px; text-align: center; color: #26272b; font-size: 29px; font-weight: 700; }
|
||
.tiangong-subtitle { display: block; margin-bottom: 42px; text-align: center; color: #9a9da5; font-size: 15px; }
|
||
.deity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 18px; }
|
||
.deity-card { background: transparent; border: 0; padding: 0; text-align: center; }
|
||
.deity-card.locked .deity-figure { opacity: .28; filter: grayscale(1); }
|
||
.deity-figure { height: 122px; background: #fff; display: grid; place-items: center; overflow: hidden; }
|
||
.deity-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.deity-name { height: 32px; margin-top: 3px; background: #dceddf; color: #283b32; line-height: 32px; font-size: 14px; font-weight: 600; }
|
||
.phone.realm-active { padding-top: 118px; background: #fff; }
|
||
.phone.realm-active .capsule { display: none; }
|
||
.phone.realm-active .tabbar { background: rgba(255,255,255,.96); }
|
||
.page-view.tiangong-detail-preview { height: 100vh; margin: -118px -18px -112px; padding: 0; display: none; flex-direction: column; overflow: hidden; background: #fff9eb; color: #25262a; }
|
||
.page-view.tiangong-detail-preview.active { display: flex; }
|
||
.detail-nav-preview { height: 70px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; }
|
||
.detail-nav-preview strong { font-size: 21px; }
|
||
.cash-scene { width: 100%; min-height: 0; flex: 1; display: block; object-fit: cover; }
|
||
.cash-actions { height: 116px; padding: 13px 25px; flex: none; display: flex; justify-content: space-between; background: rgba(255,247,226,.86); backdrop-filter: blur(8px); }
|
||
.cash-action { width: 43px; height: 76px; padding: 10px 0; border: 0; border-radius: 23px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #e3f0e9; color: #25282b; font-size: 17px; line-height: 1; box-shadow: 0 4px 10px rgba(129,154,137,.18); cursor: pointer; }
|
||
.phone.detail-active + .tabbar { display: none; }
|
||
.page-view.subpage-preview { min-height: 100vh; margin: -118px -18px -112px; padding: 28px 22px 118px; display: none; background: linear-gradient(180deg,#a38af5 0%,#d6cafa 31%,#edf4ff 66%,#eaf3ff 100%); color: #28243a; }
|
||
.page-view.subpage-preview.active { display: block; }
|
||
.preview-back { border: 0; background: transparent; color: #40365e; font-size: 40px; cursor: pointer; }
|
||
.element-preview { padding-top: 22px !important; }
|
||
.element-plot { height: 330px; margin-top: 8px; position: relative; display: grid; place-items: center; }
|
||
.radar-shape { width: 220px; height: 220px; clip-path: polygon(50% 0,98% 35%,79% 97%,21% 97%,2% 35%); background: repeating-radial-gradient(circle at center, transparent 0 24px, rgba(180,130,101,.2) 25px 27px); border: 1px solid rgba(180,130,101,.25); }
|
||
.radar-value { position: absolute; padding: 4px 10px; border-radius: 13px; color:#fff; font-weight:900; font-size:13px; }
|
||
.radar-value.earth { top:0; background:#c8836d; }.radar-value.metal { right:7px; top:116px; background:#d5aa52; }.radar-value.water { right:63px; bottom:4px; background:#5bb8df; }.radar-value.wood { left:63px; bottom:4px; background:#69bb7e; }.radar-value.fire { left:4px; top:116px; background:#ed6d79; }
|
||
.element-info-card { margin-top: 20px; padding: 22px 18px; border-radius: 14px; background:rgba(255,255,255,.75); }
|
||
.element-info-card + .element-info-card { margin-top: 16px; }.element-info-card b { display:block; font-size:19px; }.element-info-card p { margin:14px 0 0; color:#686273; font-size:15px; line-height:1.75; }.element-info-card .tag { position:static; display:inline-block; width:auto; height:auto; padding:7px 18px; border-radius:20px; margin-right:12px; font-size:16px; line-height:1; }.tag.day { background:#ff9b2a; }.tag.good { background:#49bb68; }.tag.avoid { background:#ef5b80; }
|
||
.follow-preview { text-align:center; }.follow-title-preview { margin-top:140px; color:#8f640d; font-size:34px; line-height:1.65; font-weight:900; }.follow-tip-preview { display:block; margin-top:28px; color:#9e8b65; font-size:16px; }.follow-qr-row { margin-top:52px; display:flex; justify-content:center; gap:18px; }.follow-qr-card { width:142px; padding:12px 10px 18px; border-radius:18px; background:#fff; box-shadow:0 8px 18px rgba(95,75,38,.16); color:#7a4a20; font-size:16px; font-weight:900; }.follow-qr-card img { width:118px; height:118px; object-fit:cover; border-radius:9px; display:block; margin:0 auto 12px; }.follow-search { margin-top:45px; display:flex; justify-content:center; gap:14px; }.follow-search span { padding:10px 14px; border-radius:20px; background:rgba(255,255,255,.8); color:#7a4a20; font-size:13px; box-shadow:0 4px 12px rgba(98,80,49,.1); }.follow-other { display:block; margin-top:30px; color:#9e8b65; font-size:15px; }.follow-brand { display:block; margin-top:26px; color:#8f640d; font-size:34px; font-weight:400; }
|
||
.agreement-preview { background:#fffdf7 !important; color:#292929; }.agreement-heading { text-align:center; font-size:24px; color:#8f640d; font-weight:700; }.agreement-tabs-preview { margin-top:40px; display:flex; justify-content:space-around; color:#8f640d; font-size:18px; font-weight:700; }.agreement-tabs-preview .selected { border-bottom:3px solid #8f640d; padding-bottom:12px; }.agreement-copy { margin-top:38px; font-size:17px; line-height:1.95; color:#353535; }.agreement-copy h3 { font-size:22px; }.phone.subpage-active .capsule { display:none; }.phone.full-subpage + .tabbar { display:none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="phone">
|
||
<div class="capsule">••• ◎</div>
|
||
<section class="page-view active" data-page="home">
|
||
<section class="day-switch">
|
||
<div class="avatar-orb"><div class="water-face">⌣</div></div>
|
||
<div class="day-tabs">
|
||
<div class="day-tab"><span class="day-label">昨日</span><span class="day-status">小逆</span></div>
|
||
<div class="day-tab active"><span class="day-label">今日</span><span class="day-status">小逆</span></div>
|
||
<div class="day-tab"><span class="day-label">明日</span><span class="day-status">平日</span></div>
|
||
</div>
|
||
</section>
|
||
<section class="date-row">
|
||
<span><span class="month-day">10月12日</span> 星期一</span>
|
||
<span>农历丙午年 九月初三</span>
|
||
</section>
|
||
<section class="summary-card">
|
||
<div class="summary-copy">小逆之日,少言多思,养精蓄锐为上。</div>
|
||
<div class="index-orb"><div class="index-number">42</div><div class="index-label">综合指数</div></div>
|
||
</section>
|
||
<section class="lucky-grid">
|
||
<div class="lucky-box colors"><strong class="lucky-label">吉色</strong><span class="swatch" style="background:#a7ad2a"></span><span>绿茶色</span><span class="swatch" style="background:#50c3cf"></span><span>瀑布蓝</span></div>
|
||
<div class="lucky-box numbers"><strong class="lucky-label">吉数</strong><span class="slot">6</span><span class="slot">8</span></div>
|
||
<div class="lucky-box direction"><strong class="lucky-label">吉向</strong><span>⌖</span><span>东北</span></div>
|
||
<div class="lucky-box hours"><strong class="lucky-label">吉时</strong><span class="hour-chip"><span class="branch">子</span><span>23-01点</span></span><span class="hour-chip"><span class="branch">申</span><span>15-17点</span></span></div>
|
||
</section>
|
||
<section class="dimension-head"><strong>维度解析</strong><span>排序 ⇅</span></section>
|
||
<section class="dimension-list">
|
||
<article class="card"><div class="icon heart"></div><div><div class="title-row"><span class="title">情感</span><span class="headline">默契收集,心流时刻</span></div><div class="detail">适合捕捉和TA的默契瞬间,让这些小细节成为关系里的锚点。</div></div><span class="tag yi">宜</span><span class="arrow">›</span></article>
|
||
<article class="card"><div class="icon gourd"></div><div><div class="title-row"><span class="title">健康</span><span class="headline">润肺养身,舒缓秋燥</span></div><div class="detail">秋日干燥适合润肺养身,舒缓身体的秋燥不适感。</div></div><span class="tag yi">宜</span><span class="arrow">›</span></article>
|
||
<article class="card"><div class="icon vase"></div><div><div class="title-row"><span class="title">生活</span><span class="headline">收纳旧物,沉淀回忆</span></div><div class="detail">秋日里适合收纳旧物,在整理中沉淀那些温暖的小回忆。</div></div><span class="tag yi">宜</span><span class="arrow">›</span></article>
|
||
<article class="card"><div class="icon coin"></div><div><div class="title-row"><span class="title">财富</span><span class="headline">勿乱囤货,按需消费</span></div><div class="detail">财富能量忌盲目囤积,适合避开非必要的批量采购,保持理性消费。</div></div><span class="tag ji">忌</span><span class="arrow">›</span></article>
|
||
<article class="card"><div class="icon fan"></div><div><div class="title-row"><span class="title">社交</span><span class="headline">勿涉纷争,保持中立</span></div><div class="detail">易卷入人际是非,适合远离矛盾,保持中立姿态。</div></div><span class="tag ji">忌</span><span class="arrow">›</span></article>
|
||
<article class="card"><div class="icon scroll"></div><div><div class="title-row"><span class="title">学业</span><span class="headline">基础松散,学业忌跳级</span></div><div class="detail">底层知识不牢,别急于学习进阶内容。</div></div><span class="tag ji">忌</span><span class="arrow">›</span></article>
|
||
<article class="card"><div class="icon bamboo"></div><div><div class="title-row"><span class="title">事业</span><span class="headline">敷衍了事,别凑活</span></div><div class="detail">今日易因松散出错,适合认真对待每一项小任务,别敷衍。</div></div><span class="tag ji">忌</span><span class="arrow">›</span></article>
|
||
<article class="card"><div class="icon horse"></div><div><div class="title-row"><span class="title">出行</span><span class="headline">勿负重行,轻装简从</span></div><div class="detail">今日出行负重易生疲惫,建议轻装出门,避免带过多不必要的物品。</div></div><span class="tag ji">忌</span><span class="arrow">›</span></article>
|
||
</section>
|
||
</section>
|
||
<section class="page-view tiangong-preview" data-page="realm">
|
||
<span class="tiangong-title">天宫</span>
|
||
<span class="tiangong-subtitle">供奉神祇,收集属于你的福运</span>
|
||
<div class="deity-grid">
|
||
<div class="deity-card"><div class="deity-figure"><img src="./assets/tiangong/wealth.png" alt="财神"></div><div class="deity-name">财神</div></div>
|
||
<div class="deity-card locked"><div class="deity-figure"><img src="./assets/tiangong/fortune.png" alt="禄星"></div><div class="deity-name">禄星</div></div>
|
||
<div class="deity-card locked"><div class="deity-figure"><img src="./assets/tiangong/longevity.png" alt="寿星"></div><div class="deity-name">寿星</div></div>
|
||
<div class="deity-card locked"><div class="deity-figure"><img src="./assets/tiangong/wenchang.png" alt="文昌星"></div><div class="deity-name">文昌星</div></div>
|
||
<div class="deity-card locked"><div class="deity-figure"><img src="./assets/tiangong/matchmaker.png" alt="月老"></div><div class="deity-name">月老</div></div>
|
||
</div>
|
||
</section>
|
||
<section class="page-view tiangong-detail-preview" data-page="cash-detail">
|
||
<div class="detail-nav-preview"><strong>敬神</strong></div>
|
||
<img class="cash-scene" src="./assets/tiangong/wealth-detail-scene.jpg" alt="财神供奉场景">
|
||
<div class="cash-actions">
|
||
<button class="cash-action"><span>上</span><span>香</span></button><button class="cash-action"><span>祈</span><span>愿</span></button><button class="cash-action"><span>回</span><span>向</span></button><button class="cash-action"><span>送</span><span>神</span></button><button class="cash-action" id="detailBack"><span>返</span><span>回</span></button>
|
||
</div>
|
||
</section>
|
||
<section class="page-view" data-page="my">
|
||
<section class="my-profile">
|
||
<div class="avatar-orb"><div class="water-face">⌣</div></div>
|
||
<div class="my-info">
|
||
<div class="my-name-row"><span class="my-name">You</span><span class="gender">♂</span></div>
|
||
<button class="my-birthday" id="birthdayToggle"><span>▦</span><span id="birthdayText">19**_06_18</span><span id="birthdayEye">⌣</span></button>
|
||
</div>
|
||
<span class="my-arrow">›</span>
|
||
</section>
|
||
<section class="quick-card">
|
||
<div class="quick-entry"><div class="quick-icon quick-rabbit">⌇</div><span>我的生肖</span></div>
|
||
<div class="quick-entry" id="elementEntry"><div class="quick-icon"><div class="quick-drop">⌣</div></div><span>我的元素</span></div>
|
||
</section>
|
||
<section class="palace">
|
||
<div class="section-line"><strong>我的天宫</strong><span>(已收集 <em>1</em> 款)</span></div>
|
||
<div class="palace-empty"></div>
|
||
</section>
|
||
<section class="settings">
|
||
<div class="settings-row"><span class="menu-mark menu-headset"></span><span>联系我们</span><span>›</span></div>
|
||
<div class="settings-row" id="followEntry"><span class="menu-mark">✦</span><span>关注我们</span><span>›</span></div>
|
||
<div class="settings-row" id="agreementEntry"><span class="menu-mark menu-doc"></span><span>用户协议</span><span>›</span></div>
|
||
</section>
|
||
</section>
|
||
<section class="page-view subpage-preview element-preview" data-page="element">
|
||
<button class="preview-back" data-back="my">‹</button>
|
||
<div class="element-plot"><div class="radar-shape"></div><span class="radar-value earth">● 土 42%</span><span class="radar-value metal">✦ 金 22%</span><span class="radar-value water">● 水 8%</span><span class="radar-value wood">● 木 22%</span><span class="radar-value fire">● 火 7%</span></div>
|
||
<div class="element-info-card"><b><span class="tag day">日主</span>壬</b><p>日主,即出生日期中的天干,其五行属性直接代表自身能量基础。</p><p>你适应力强,擅长在变化中寻找机会与路径。</p></div>
|
||
<div class="element-info-card"><b><span class="tag good">喜用</span>金水</b><p>喜用,是更容易让事情进展顺、做得稳、发挥得好的行为方式。</p><p>你擅长运用水的变通与金的锐利,遇事能灵活调整方向。</p></div>
|
||
<div class="element-info-card"><b><span class="tag avoid">忌用</span>木火土</b><p>忌用,是容易让你更累、更乱或效率不佳的行为方式。</p></div>
|
||
</section>
|
||
<section class="page-view subpage-preview follow-preview" data-page="follow">
|
||
<button class="preview-back" data-back="my">‹</button><div class="follow-title-preview">关注我们<br>一触即吉</div><span class="follow-tip-preview">点击图片保存,扫码关注</span><div class="follow-qr-row"><div class="follow-qr-card"><img src="./assets/follow-redbook.jpg" alt="小红书二维码">小红书</div><div class="follow-qr-card"><img src="./assets/follow-video.jpg" alt="视频号二维码">视频号</div></div><div class="follow-search"><span>那小吉 ⌕</span><span>那吉 nagiflow ⌕</span></div><span class="follow-other">其他平台搜索我们</span><span class="follow-brand">那吉<br>NAGI FLOW</span>
|
||
</section>
|
||
<section class="page-view subpage-preview agreement-preview" data-page="agreement">
|
||
<button class="preview-back" data-back="my">‹</button><div class="agreement-heading">协议</div><div class="agreement-tabs-preview"><span class="selected">用户协议</span><span>隐私政策</span></div><div class="agreement-copy"><h3>用户协议</h3><p>为使用小程序软件服务,您应当阅读并遵守相关注册协议以及专项规则。请您审慎阅读、充分理解各条款内容,特别是免除或限制责任的相应条款。</p><h3>一、协议的范围</h3><p>本协议是您与那吉之间关于使用那吉软件服务所订立的协议。所有规则均为本协议不可分割的一部分,与协议正文具有同等法律效力。</p><h3>二、适用范围</h3><p>本政策适用于您通过本应用进行的所有操作及我们因此收集的个人信息。</p></div>
|
||
</section>
|
||
</main>
|
||
<nav class="tabbar">
|
||
<button class="tab active" data-target="home"><span class="tab-icon"></span><span>首页</span></button>
|
||
<button class="tab realm" data-target="realm"><span class="realm-face">⌁</span><span>天宫</span></button>
|
||
<button class="tab" data-target="my"><span class="mine-icon"></span><span>我的</span></button>
|
||
</nav>
|
||
<script>
|
||
const tabs = Array.from(document.querySelectorAll('.tabbar .tab'));
|
||
const pages = Array.from(document.querySelectorAll('.page-view'));
|
||
const phone = document.querySelector('.phone');
|
||
tabs.forEach((tab) => {
|
||
tab.addEventListener('click', () => {
|
||
const target = tab.dataset.target;
|
||
tabs.forEach((item) => item.classList.toggle('active', item === tab));
|
||
pages.forEach((page) => page.classList.toggle('active', page.dataset.page === target));
|
||
phone.classList.toggle('realm-active', target === 'realm');
|
||
phone.classList.remove('detail-active', 'subpage-active', 'full-subpage');
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
});
|
||
const wealthCard = document.querySelector('[data-page="realm"] .deity-card');
|
||
const detailBack = document.getElementById('detailBack');
|
||
function showCashDetail() {
|
||
pages.forEach((page) => page.classList.toggle('active', page.dataset.page === 'cash-detail'));
|
||
phone.classList.add('realm-active');
|
||
phone.classList.add('detail-active');
|
||
phone.classList.remove('subpage-active', 'full-subpage');
|
||
document.querySelector('.tab.realm').classList.add('active');
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
function showRealm() {
|
||
pages.forEach((page) => page.classList.toggle('active', page.dataset.page === 'realm'));
|
||
phone.classList.add('realm-active');
|
||
phone.classList.remove('detail-active');
|
||
phone.classList.remove('subpage-active', 'full-subpage');
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
function showSubpage(name, fullScreen = false) {
|
||
pages.forEach((page) => page.classList.toggle('active', page.dataset.page === name));
|
||
phone.classList.add('subpage-active');
|
||
phone.classList.toggle('full-subpage', fullScreen);
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
function showMy() {
|
||
pages.forEach((page) => page.classList.toggle('active', page.dataset.page === 'my'));
|
||
phone.classList.remove('subpage-active', 'full-subpage');
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
wealthCard?.addEventListener('click', showCashDetail);
|
||
detailBack?.addEventListener('click', showRealm);
|
||
document.getElementById('elementEntry')?.addEventListener('click', () => showSubpage('element'));
|
||
document.getElementById('followEntry')?.addEventListener('click', () => showSubpage('follow', true));
|
||
document.getElementById('agreementEntry')?.addEventListener('click', () => showSubpage('agreement', true));
|
||
document.querySelectorAll('[data-back="my"]').forEach((button) => button.addEventListener('click', showMy));
|
||
let birthdayVisible = false;
|
||
const birthdayToggle = document.getElementById('birthdayToggle');
|
||
const birthdayText = document.getElementById('birthdayText');
|
||
const birthdayEye = document.getElementById('birthdayEye');
|
||
birthdayToggle?.addEventListener('click', () => {
|
||
birthdayVisible = !birthdayVisible;
|
||
birthdayText.textContent = birthdayVisible ? '1998_06_18' : '19**_06_18';
|
||
birthdayEye.textContent = birthdayVisible ? '◉' : '⌣';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|