jackyu66gitandCursor
2fb1dfee14
Archive the differentiated YuXinGu product docs, AI engineering system, design contract, and Go/Vue scaffold. Next execution prioritizes Cece-parity over early innovation (see .ai/product/STRATEGY.md). Co-authored-by: Cursor <cursoragent@cursor.com>
214 lines
7.8 KiB
CSS
214 lines
7.8 KiB
CSS
/* 首页 · 测测式信息流（愈心谷品牌色） */
|
|
|
|
body.app-body[data-nav="home"]{
|
|
background:
|
|
radial-gradient(120% 80% at 80% -10%, rgba(255,180,160,.55) 0%, transparent 55%),
|
|
radial-gradient(90% 60% at 10% 8%, rgba(255,210,190,.7) 0%, transparent 50%),
|
|
linear-gradient(180deg, #FFD6CC 0%, #FFE8E0 28%, #FFF6F2 55%, #FFF9F7 100%);
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
/* ── 品牌顶区 ── */
|
|
.home-brand{
|
|
text-align:center;padding:18px 20px 6px;position:relative;z-index:2;
|
|
}
|
|
.home-brand img{height:28px;vertical-align:middle}
|
|
.home-brand .word{
|
|
margin-top:10px;
|
|
font-family:"Noto Serif SC","Songti SC","PingFang SC",serif;
|
|
font-size:28px;font-weight:700;letter-spacing:0.18em;
|
|
color:#2a2a2a;line-height:1.2;
|
|
}
|
|
.home-brand .word em{
|
|
font-style:normal;color:var(--pri);
|
|
}
|
|
.home-brand .tagline{
|
|
margin-top:6px;font-size:12px;color:rgba(0,0,0,.38);letter-spacing:0.12em;
|
|
}
|
|
|
|
/* 装饰光斑 */
|
|
.home-glow{
|
|
position:absolute;pointer-events:none;border-radius:50%;filter:blur(2px);z-index:0;
|
|
}
|
|
.home-glow.g1{width:140px;height:140px;top:40px;right:-30px;background:rgba(255,255,255,.45)}
|
|
.home-glow.g2{width:90px;height:90px;top:100px;left:-20px;background:rgba(255,200,180,.4)}
|
|
|
|
/* ── 愈心解码（顶区主入口） ── */
|
|
.decode-hero{
|
|
margin:14px 16px 0;position:relative;z-index:2;
|
|
padding:18px 16px 16px;background:#fff;border-radius:20px;
|
|
box-shadow:0 8px 28px rgba(229,77,66,.12);
|
|
text-align:center;
|
|
animation:bdayIn .5s ease both;
|
|
}
|
|
.decode-hero .di-title{
|
|
font-family:"Noto Serif SC","Songti SC",serif;
|
|
font-size:17px;font-weight:700;color:#C8923A;letter-spacing:0.1em;
|
|
}
|
|
.decode-hero .di-sub{font-size:12px;color:#aaa;margin:4px 0 14px}
|
|
.decode-hero .di-inputs{
|
|
display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;
|
|
}
|
|
.decode-hero input{
|
|
padding:11px 6px;border:1.5px solid #eee;border-radius:12px;
|
|
font-size:15px;text-align:center;outline:none;background:#fdfaf8;
|
|
transition:border-color .15s;
|
|
}
|
|
.decode-hero input:focus{border-color:#F0B8B0;background:#fff}
|
|
.decode-hero input.dc-y{width:64px}
|
|
.decode-hero input.dc-md{width:48px}
|
|
.decode-hero .dc-sep{font-size:12px;color:#bbb}
|
|
.decode-hero button{
|
|
padding:11px 18px;background:linear-gradient(135deg,#FF7A6E,var(--pri));
|
|
color:#fff;border:none;border-radius:22px;font-size:14px;font-weight:600;
|
|
cursor:pointer;box-shadow:0 6px 16px rgba(229,77,66,.28);
|
|
}
|
|
.decode-hero button:active{opacity:.9}
|
|
@keyframes bdayIn{
|
|
from{opacity:0;transform:translateY(8px)}
|
|
to{opacity:1;transform:translateY(0)}
|
|
}
|
|
|
|
/* ── 分类 chips ── */
|
|
.chips{
|
|
display:flex;gap:8px;padding:14px 16px 4px;
|
|
overflow-x:auto;-webkit-overflow-scrolling:touch;
|
|
scrollbar-width:none;position:relative;z-index:2;
|
|
}
|
|
.chips::-webkit-scrollbar{display:none}
|
|
.chip{
|
|
flex-shrink:0;padding:7px 14px;border-radius:999px;
|
|
background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
|
|
font-size:12px;color:#666;text-decoration:none;
|
|
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
|
|
transition:background .15s,color .15s;
|
|
}
|
|
.chip:active,.chip.on{background:#fff;color:var(--pri);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.04)}
|
|
|
|
/* ── 白色内容面板（测测式上浮 sheet） ── */
|
|
.home-sheet{
|
|
margin-top:14px;background:#fff;
|
|
border-radius:22px 22px 0 0;
|
|
padding:8px 0 28px;
|
|
box-shadow:0 -4px 24px rgba(180,100,80,.06);
|
|
position:relative;z-index:3;
|
|
animation:sheetUp .55s cubic-bezier(.22,.8,.28,1) both;
|
|
}
|
|
@keyframes sheetUp{
|
|
from{opacity:0;transform:translateY(24px)}
|
|
to{opacity:1;transform:translateY(0)}
|
|
}
|
|
|
|
.section{padding:0 16px;margin-top:20px}
|
|
.sec-head{
|
|
display:flex;justify-content:space-between;align-items:baseline;
|
|
margin-bottom:12px;
|
|
}
|
|
.sec-head .title{
|
|
font-size:17px;font-weight:700;color:#222;letter-spacing:0.02em;
|
|
}
|
|
.sec-head .more{
|
|
font-size:12px;color:#bbb;text-decoration:none;
|
|
}
|
|
|
|
/* ── 图标宫格 ── */
|
|
.test-grid{
|
|
display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;
|
|
padding:4px 2px 2px;
|
|
}
|
|
.test-item{
|
|
display:flex;flex-direction:column;align-items:center;gap:8px;
|
|
text-decoration:none;color:var(--text);position:relative;
|
|
transition:transform .15s;
|
|
}
|
|
.test-item:active{transform:scale(0.92)}
|
|
.test-item .icon{
|
|
width:54px;height:54px;border-radius:18px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:22px;flex-shrink:0;
|
|
box-shadow:inset 0 -2px 0 rgba(0,0,0,.03);
|
|
}
|
|
.test-item .label{
|
|
font-size:11px;color:#555;text-align:center;line-height:1.25;
|
|
max-width:68px;word-break:keep-all;
|
|
}
|
|
.test-item .badge{
|
|
position:absolute;top:-4px;right:6px;
|
|
font-size:9px;background:linear-gradient(135deg,#FF7A6E,var(--pri));
|
|
color:#fff;padding:1px 5px;border-radius:6px;line-height:1.4;
|
|
box-shadow:0 2px 6px rgba(229,77,66,.3);
|
|
}
|
|
|
|
.icon-pink{background:#FFE4E4;color:var(--pri)}
|
|
.icon-blue{background:#E3EEFF;color:var(--blue)}
|
|
.icon-purple{background:#EDE4FF;color:var(--purple)}
|
|
.icon-orange{background:#FFE8D6;color:var(--orange)}
|
|
.icon-green{background:#E0F6E4;color:var(--green)}
|
|
.icon-rose{background:#FFE0EC;color:var(--pink)}
|
|
.icon-teal{background:#DDF6EF;color:#2EA88A}
|
|
.icon-gold{background:#FFF3D6;color:#C8923A}
|
|
.icon-night{background:#E8E2F4;color:#6B5B95}
|
|
.icon-mute{background:#F3F3F3;color:#aaa}
|
|
|
|
/* ── 热门信息流卡片（测测 feed） ── */
|
|
.feed{display:flex;flex-direction:column;gap:12px}
|
|
.feed-card{
|
|
display:flex;gap:14px;align-items:stretch;
|
|
padding:12px;background:#FAFAFA;border-radius:16px;
|
|
text-decoration:none;color:var(--text);
|
|
transition:transform .12s, background .12s;
|
|
position:relative;overflow:hidden;
|
|
}
|
|
.feed-card:active{transform:scale(0.985);background:#F5F5F5}
|
|
.feed-cover{
|
|
width:72px;height:72px;border-radius:14px;flex-shrink:0;
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:28px;position:relative;overflow:hidden;
|
|
}
|
|
.feed-cover::after{
|
|
content:"";position:absolute;inset:0;
|
|
background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 50%);
|
|
}
|
|
.feed-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:2px 0}
|
|
.feed-body .name{font-size:15px;font-weight:650;color:#222;line-height:1.35}
|
|
.feed-body .meta{font-size:12px;color:#999;margin-top:4px;line-height:1.4}
|
|
.feed-body .stat{font-size:11px;color:#c4c4c4;margin-top:6px}
|
|
.feed-tag{
|
|
position:absolute;top:10px;right:10px;
|
|
font-size:10px;color:#fff;background:var(--pri);
|
|
padding:2px 7px;border-radius:8px;
|
|
}
|
|
|
|
.fc-a .feed-cover{background:linear-gradient(145deg,#FFD0C8,#FFB0A4);color:#C23B32}
|
|
.fc-b .feed-cover{background:linear-gradient(145deg,#E4D8F8,#C9B6F0);color:#5B4A8A}
|
|
.fc-c .feed-cover{background:linear-gradient(145deg,#D6E8FF,#B0D0F5);color:#3A6FB0}
|
|
.fc-d .feed-cover{background:linear-gradient(145deg,#D8F0DC,#B5E0BE);color:#3A8A4A}
|
|
.fc-e .feed-cover{background:linear-gradient(145deg,#FFE6C8,#F5C98A);color:#B07A28}
|
|
|
|
/* ── 快捷入口横滑 ── */
|
|
.scroll-row{
|
|
display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px;
|
|
-webkit-overflow-scrolling:touch;scrollbar-width:none;
|
|
}
|
|
.scroll-row::-webkit-scrollbar{display:none}
|
|
.mini-card{
|
|
flex:0 0 148px;padding:14px 14px 16px;border-radius:16px;
|
|
text-decoration:none;color:#333;position:relative;overflow:hidden;
|
|
transition:transform .12s;
|
|
}
|
|
.mini-card:active{transform:scale(0.97)}
|
|
.mini-card .mi{font-size:22px;margin-bottom:8px}
|
|
.mini-card .mt{font-size:14px;font-weight:650}
|
|
.mini-card .md{font-size:11px;color:rgba(0,0,0,.4);margin-top:3px;line-height:1.35}
|
|
.mc-coral{background:linear-gradient(160deg,#FFE8E2,#FFD4CA)}
|
|
.mc-mint{background:linear-gradient(160deg,#E4F6EA,#D0EDD8)}
|
|
.mc-sky{background:linear-gradient(160deg,#E6F0FF,#D4E4FF)}
|
|
.mc-sand{background:linear-gradient(160deg,#FFF3E0,#FFE4C2)}
|
|
|
|
@media(max-width:380px){
|
|
.home-brand .word{font-size:24px}
|
|
.test-item .icon{width:48px;height:48px;font-size:20px;border-radius:16px}
|
|
.test-item .label{font-size:10px}
|
|
.feed-cover{width:64px;height:64px}
|
|
}
|