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>
111 lines
5.8 KiB
CSS
111 lines
5.8 KiB
CSS
:root{
|
|
--pri:#E54D42; --num:#C8923A; --num-d:#8a6d3b;
|
|
--ys:#5CB85C; --ys-d:#3f8f45;
|
|
--text:#333; --sub:#999;
|
|
--bg-start:#FFD1C7; --bg-end:#FFC8B5;
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
|
|
/* legacy body → scoped */
|
|
.app-page{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
|
|
color:var(--text);background:linear-gradient(160deg,var(--bg-start),var(--bg-end));
|
|
min-height:100vh;padding-bottom:80px;}
|
|
.wrap{max-width:430px;margin:0 auto;padding:0 14px;}
|
|
.top{text-align:center;padding:22px 0 10px;}
|
|
.top .t{font-size:24px;font-weight:800;letter-spacing:3px;color:#fff;
|
|
text-shadow:0 2px 8px rgba(0,0,0,.15);}
|
|
.top .s{font-size:12px;color:#fff;opacity:.9;margin-top:4px;}
|
|
.card{background:#fff;border-radius:18px;padding:20px;margin:14px 0;
|
|
box-shadow:0 8px 30px rgba(0,0,0,.08);}
|
|
.tag{display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;
|
|
color:#fff;font-weight:600;margin-bottom:10px;}
|
|
.tag-num{background:var(--num);}
|
|
.tag-ys{background:var(--ys);}
|
|
|
|
/* Part1 数字 */
|
|
.hex{width:76px;height:76px;margin:6px auto 8px;display:flex;align-items:center;
|
|
justify-content:center;font-size:34px;font-weight:800;color:#fff;
|
|
background:linear-gradient(135deg,var(--num),var(--num-d));
|
|
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
|
|
.p-title{text-align:center;font-size:19px;font-weight:700;color:var(--num-d);}
|
|
.p-oneline{text-align:center;font-size:13px;color:var(--sub);margin-top:4px;}
|
|
.pyr{text-align:center;margin:16px 0;}
|
|
|
|
/* Part2 体质 */
|
|
.ys-type{text-align:center;font-size:20px;font-weight:700;color:var(--ys-d);margin:4px 0;}
|
|
.ys-dir{text-align:center;font-size:13px;color:var(--sub);}
|
|
.bars{margin:16px 0 6px;}
|
|
.bar-row{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13px;}
|
|
.bar-row .lab{width:20px;text-align:center;font-weight:700;}
|
|
.bar-track{flex:1;height:14px;background:#f0f0f0;border-radius:8px;overflow:hidden;}
|
|
.bar-fill{height:100%;border-radius:8px;transition:width .6s;}
|
|
.bar-row .val{width:34px;text-align:right;color:var(--sub);}
|
|
|
|
/* 付费墙 */
|
|
.lock{position:relative;margin-top:14px;border-radius:14px;overflow:hidden;
|
|
border:1px solid #f2e6d0;}
|
|
.lock .blur{filter:blur(10px);opacity:0.35;pointer-events:none;user-select:none;
|
|
padding:16px;font-size:13px;line-height:1.9;color:#666;}
|
|
.lock .cover{position:absolute;inset:0;background:linear-gradient(180deg,
|
|
rgba(255,255,255,.4),rgba(255,255,255,.92));display:flex;flex-direction:column;
|
|
align-items:center;justify-content:center;text-align:center;padding:16px;}
|
|
.lock .cover .lk-t{font-size:15px;font-weight:700;color:var(--num-d);}
|
|
.lock .cover .lk-d{font-size:12px;color:var(--sub);margin:6px 0 12px;}
|
|
.unlock-btn{background:var(--pri);color:#fff;border:none;padding:11px 30px;
|
|
border-radius:24px;font-size:15px;font-weight:700;cursor:pointer;
|
|
box-shadow:0 4px 14px rgba(229,77,66,.35);}
|
|
.unlocked .cover{display:none;}
|
|
.unlocked .blur{filter:none;pointer-events:auto;user-select:auto;}
|
|
|
|
/* Part3 今日锦囊 */
|
|
.jn h4{font-size:14px;color:var(--ys-d);margin-bottom:8px;}
|
|
.jn .row{font-size:13px;line-height:2;color:#555;}
|
|
.jn .row b{color:var(--ys-d);}
|
|
.jn .st{font-size:12px;color:var(--sub);margin-bottom:6px;}
|
|
|
|
/* 契合度 / 分享 */
|
|
.mini-form{display:flex;gap:6px;align-items:center;justify-content:center;
|
|
flex-wrap:wrap;margin-top:10px;}
|
|
.mini-form input{width:56px;padding:9px 4px;border:1.5px solid #eee;
|
|
border-radius:9px;text-align:center;font-size:14px;}
|
|
.mini-form button,.share-btn{background:var(--pri);color:#fff;border:none;
|
|
padding:10px 20px;border-radius:22px;font-size:14px;font-weight:600;cursor:pointer;}
|
|
.share-btn{display:block;width:100%;margin-top:6px;}
|
|
.match-score{text-align:center;font-size:32px;font-weight:800;color:var(--pri);margin:8px 0 2px;}
|
|
|
|
/* 深度入口 */
|
|
.deep{display:flex;gap:10px;margin:16px 0;}
|
|
.deep a{flex:1;text-align:center;padding:13px 6px;border-radius:14px;
|
|
color:#fff;text-decoration:none;font-size:13px;font-weight:600;}
|
|
.deep .d-num{background:linear-gradient(135deg,var(--num),var(--num-d));}
|
|
.deep .d-ys{background:linear-gradient(135deg,var(--ys),var(--ys-d));}
|
|
|
|
.disc{font-size:11px;color:#fff;opacity:.8;text-align:center;line-height:1.7;
|
|
padding:14px 8px;}
|
|
.err{text-align:center;color:#fff;padding:40px 20px;font-size:15px;}
|
|
|
|
/* 分享卡片 canvas 弹层 */
|
|
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;
|
|
align-items:center;justify-content:center;z-index:99;padding:20px;}
|
|
.modal.on{display:flex;}
|
|
.modal .m-box{background:#fff;border-radius:16px;padding:16px;max-width:340px;text-align:center;}
|
|
.modal canvas{width:100%;border-radius:10px;}
|
|
.modal .m-tip{font-size:12px;color:var(--sub);margin:10px 0;}
|
|
.modal .m-close{color:var(--pri);font-size:14px;cursor:pointer;}
|
|
|
|
/* 支付弹窗 */
|
|
.pay-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;
|
|
align-items:center;justify-content:center;z-index:100;padding:20px;}
|
|
.pay-modal.on{display:flex;}
|
|
.pay-modal .pm-box{background:#fff;border-radius:20px;padding:28px 24px 22px;
|
|
max-width:300px;width:100%;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.15);}
|
|
.pay-modal .pm-icon{font-size:36px;margin-bottom:10px;}
|
|
.pay-modal .pm-title{font-size:18px;font-weight:700;color:#333;margin-bottom:4px;}
|
|
.pay-modal .pm-desc{font-size:13px;color:var(--sub);margin-bottom:6px;line-height:1.6;}
|
|
.pay-modal .pm-price{font-size:28px;font-weight:800;color:var(--pri);margin:8px 0;}
|
|
.pay-modal .pm-price small{font-size:14px;font-weight:400;color:var(--sub);}
|
|
.pay-modal .pm-features{font-size:12px;color:#888;margin:10px 0 14px;line-height:1.9;}
|
|
.pay-modal .pm-btn{display:block;width:100%;background:var(--pri);color:#fff;border:none;
|
|
padding:12px;border-radius:24px;font-size:15px;font-weight:700;cursor:pointer;
|
|
box-shadow:0 4px 14px rgba(229,77,66,.35);margin-bottom:8px;}
|
|
.pay-modal .pm-cancel{font-size:12px;color:#aaa;cursor:pointer;background:none;border:none;}
|