<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>禧天典当 · 三页交互原型</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;600;700&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<style>
:root{
--ink-900:#1a1410;--ink-800:#2b2018;--ink-700:#3d2f24;--ink-600:#5a4636;--ink-500:#7a6248;--ink-400:#a08666;--ink-300:#c9b294;--ink-200:#e6d5bc;--ink-100:#f4ebdb;--ink-50:#faf6ed;
--ver-700:#8b2e1f;--ver-600:#b13923;--ver-500:#c84a31;--gold-700:#8b6914;--gold-600:#b8892b;--gold-500:#d4a73f;--gold-400:#e3c063;--gold-300:#f0d99a;--jade-700:#2c5a4f;--jade-600:#3d7a6b;--jade-500:#5a9384;
--bg:#faf6ed;--surface:#fff;--text:#1a1410;--text-2:#5a4636;--text-3:#a08666;--border:rgba(122,98,72,.18);--border-2:rgba(122,98,72,.35);
--serif:'Noto Serif SC','Songti SC',serif;--sans:'Noto Sans SC',-apple-system,'PingFang SC',sans-serif;--brush:'Ma Shan Zheng','Noto Serif SC',cursive;
--shadow-sm:0 1px 2px rgba(43,32,24,.06);--shadow-md:0 4px 16px rgba(43,32,24,.08);--shadow-lg:0 12px 40px rgba(43,32,24,.12);--ease:cubic-bezier(.25,1,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{font-family:var(--sans);font-size:14px;color:var(--text);background:linear-gradient(180deg,#f4ebdb 0%,#e6d5bc 100%);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,textarea,select{font-family:inherit}button{border:0;background:none;color:inherit;cursor:pointer}.stage{height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;gap:42px;position:relative;overflow:hidden}.stage:before{content:'禧';position:absolute;right:4%;top:1%;font-family:var(--brush);font-size:320px;color:rgba(139,105,20,.045);pointer-events:none}.phone{width:390px;height:844px;background:var(--bg);border-radius:48px;position:relative;overflow:hidden;box-shadow:0 0 0 12px #1a1410,0 0 0 14px #3d2f24,0 30px 80px rgba(26,20,16,.42),0 10px 30px rgba(26,20,16,.22);z-index:1}.phone:after{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:120px;height:32px;background:#1a1410;border-radius:20px;z-index:400;pointer-events:none}.screen{position:absolute;inset:0;border-radius:48px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}.status-bar{height:50px;position:absolute;top:0;left:0;right:0;z-index:450;display:flex;align-items:flex-end;justify-content:space-between;padding:0 32px 8px;font-size:15px;font-weight:600;color:var(--status-color,var(--text))}.status-icons{display:flex;gap:5px;align-items:flex-end}.status-icons svg{width:16px;height:16px;fill:currentColor}.page{position:absolute;inset:0 0 72px 0;display:flex;flex-direction:column;background:var(--bg);opacity:0;pointer-events:none;transform:translateX(24px);transition:opacity .26s var(--ease),transform .26s var(--ease)}.page.active{opacity:1;pointer-events:auto;transform:translateX(0)}.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none}.page-home{--status-color:var(--text)}.page-mine{--status-color:#fff}.top-nav{position:sticky;top:0;z-index:40;background:rgba(250,246,237,.88);backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid var(--border);padding:58px 20px 12px}.brand{display:flex;align-items:center;gap:10px}.seal{width:36px;height:36px;background:var(--ver-600);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--brush);font-size:22px;color:var(--gold-300);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(139,46,31,.3);position:relative}.seal:after{content:'';position:absolute;inset:3px;border:1px solid rgba(243,217,154,.4);border-radius:2px}.brand-name{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.05em}.brand-tag{font-size:10px;color:var(--text-3);letter-spacing:.22em;margin-top:2px}.section{margin:20px 16px 0;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}.section-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}.section-title{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.06em;display:flex;align-items:center;gap:8px}.section-title:before{content:'';width:3px;height:14px;background:linear-gradient(180deg,var(--ver-600),var(--gold-500));border-radius:2px}.section-more{font-size:11px;color:var(--text-3)}
/* home */.banner-section{padding:16px 20px 0}.banner{height:180px;border-radius:16px;overflow:hidden;position:relative;box-shadow:var(--shadow-md)}.slides{display:flex;width:300%;height:100%;animation:slide 12s ease-in-out infinite}@keyframes slide{0%,25%{transform:translateX(0)}33%,58%{transform:translateX(-33.333%)}66%,91%{transform:translateX(-66.666%)}100%{transform:translateX(0)}}.slide{width:33.333%;height:100%;flex-shrink:0;position:relative;padding:0 28px;display:flex;align-items:center;color:var(--ink-50);overflow:hidden}.slide.s1{background:radial-gradient(circle at 20% 80%,rgba(212,167,63,.4),transparent 50%),linear-gradient(135deg,#2b2018,#1a1410)}.slide.s2{background:linear-gradient(135deg,#2c5a4f,#1a3530)}.slide.s3{background:linear-gradient(135deg,#8b2e1f,#5a1e14)}.slide:before{content:'';position:absolute;right:-35px;top:-20px;width:180px;height:180px;border:1px solid rgba(212,167,63,.25);border-radius:50%}.eyebrow{font-size:10px;letter-spacing:.28em;color:var(--gold-300);margin-bottom:8px}.slide-title{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.3;letter-spacing:.06em}.slide-title em{font-style:normal;color:var(--gold-300)}.slide-sub{font-size:12px;color:rgba(244,235,219,.72);margin:6px 0 12px}.slide-cta{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-900);background:var(--gold-400);padding:6px 12px;border-radius:99px;font-weight:600}.dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px}.dot{width:16px;height:3px;background:rgba(255,255,255,.35);border-radius:2px}.dot:first-child{width:24px;background:var(--gold-400)}.trust{margin:24px 20px 0;background:linear-gradient(180deg,#fff,#faf6ed);border:1px solid var(--border);border-radius:16px;padding:24px 20px 18px;position:relative;box-shadow:var(--shadow-sm)}.trust:before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent)}.trust-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.trust-title{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.1em}.medal{font-size:10px;color:var(--gold-700);background:var(--gold-300);padding:4px 9px;border-radius:99px}.stats{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:center}.stat{text-align:center}.line{height:36px;background:var(--border)}.num{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ver-600)}.unit{font-size:11px;color:var(--text-2);font-weight:500}.label{font-size:10px;color:var(--text-3);letter-spacing:.14em;margin-top:4px}.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--border)}.badge{font-size:11px;color:var(--text-2);display:flex;align-items:center;gap:6px}.badge-i{width:22px;height:22px;border-radius:6px;background:var(--ink-100);display:flex;align-items:center;justify-content:center;color:var(--ver-600)}.badge-i svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}.cta{margin:24px 20px 0;background:radial-gradient(ellipse at top,rgba(139,46,31,.05),transparent 70%),linear-gradient(180deg,#fff,#faf6ed);border:1px solid var(--border-2);border-radius:16px;padding:24px 20px 22px;text-align:center}.cta-eyebrow{display:inline-block;font-size:10px;color:var(--ver-600);background:rgba(184,57,35,.08);padding:4px 10px;border-radius:99px;letter-spacing:.2em;margin-bottom:10px}.cta-title{font-family:var(--serif);font-size:20px;font-weight:700}.cta-title em{font-style:normal;color:var(--ver-600)}.cta-sub{font-size:12px;color:var(--text-3);margin:5px 0 18px}.main-btn{width:100%;background:linear-gradient(180deg,var(--ver-500),var(--ver-700));color:var(--gold-300);border-radius:12px;padding:16px 20px;font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.15em;box-shadow:0 4px 0 var(--ver-700),0 8px 20px rgba(139,46,31,.35)}.main-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ver-700),0 4px 12px rgba(139,46,31,.3)}.cta-features{display:flex;justify-content:space-around;border-top:1px dashed var(--border);margin-top:16px;padding-top:16px;font-size:11px;color:var(--text-2)}.green-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--jade-600);margin-right:5px}.flow{margin:28px 20px 24px}.flow-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}.flow-title{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.08em}.flow-scroll{display:flex;gap:10px;overflow-x:auto;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}.flow-step{flex:0 0 140px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 14px}.flow-num{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--gold-500);line-height:1}.flow-name{font-family:var(--serif);font-size:14px;font-weight:600;margin:8px 0 4px}.flow-desc{font-size:10.5px;color:var(--text-3);line-height:1.5}
/* evaluate */.page-eval{--status-color:var(--text)}.eval-top{padding:60px 16px 12px;background:var(--bg);flex-shrink:0}.eval-row{height:44px;display:flex;align-items:center;justify-content:space-between}.eval-title{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.1em}.cancel{font-size:12px;color:var(--text-3)}.fee-bar{margin:6px 16px 12px;padding:10px 12px;background:linear-gradient(135deg,rgba(212,167,63,.12),rgba(212,167,63,.06));border:1px solid rgba(212,167,63,.3);border-radius:8px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink-700)}.fee-icon{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--gold-500),var(--gold-700));color:white;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fee-text{flex:1;line-height:1.5}.fee-text strong{color:var(--ver-700)}.quota{text-align:right}.quota .qnum{display:block;font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ver-600)}.quota .qlbl{font-size:9px;color:var(--text-3)}.eval-scroll{flex:1;overflow-y:auto;padding:0 16px 16px;scrollbar-width:none}.eval-scroll::-webkit-scrollbar{display:none}.form-card{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden}.form-title{padding:14px 14px 8px;font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.05em;display:flex;align-items:center;gap:7px}.form-title:before{content:'';width:3px;height:12px;background:var(--ver-600);border-radius:2px}.req{color:var(--ver-600)}.form-body{padding:0 14px 14px}.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px;background:var(--ink-100);border:1px solid var(--border);border-radius:8px;font-size:11px;color:var(--ink-700);transition:.16s}.cat.selected{background:linear-gradient(135deg,rgba(184,57,35,.08),rgba(212,167,63,.1));border-color:var(--ver-600);color:var(--ver-700);font-weight:600;box-shadow:0 2px 8px rgba(184,57,35,.15)}.cat span{font-size:22px;margin-bottom:5px}.upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.upload{aspect-ratio:1;background:var(--ink-100);border:1.5px dashed var(--border-2);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-3);font-size:10px;position:relative;overflow:hidden}.upload svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}.uploaded{background:linear-gradient(135deg,#1a1410,#3d2f24);border-style:solid;color:#fff}.uploaded:after{content:attr(data-tag);position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.52);color:var(--gold-300);font-size:9px;padding:1px 5px;border-radius:4px}.up-emoji{font-size:36px}.remove{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff}.field{margin-bottom:12px}.field:last-child{margin-bottom:0}.field-label{display:block;font-size:12px;color:var(--ink-700);font-weight:500;margin-bottom:6px}.input,.textarea,.select{width:100%;padding:10px 12px;background:var(--ink-100);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);outline:none;transition:.16s}.input:focus,.textarea:focus,.select:focus{border-color:var(--ver-600);background:white;box-shadow:0 0 0 3px rgba(184,57,35,.1)}.textarea{min-height:72px;resize:none;line-height:1.5}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.price-wrap{position:relative}.price-wrap:before{content:'¥';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--serif);font-weight:700;color:var(--ver-600)}.price-wrap .input{padding-left:28px;font-family:var(--serif);font-weight:600}.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.quick button{padding:4px 10px;background:var(--ink-100);border:1px solid var(--border);border-radius:99px;font-size:11px;color:var(--ink-700)}.quick button.active{background:rgba(184,57,35,.08);border-color:var(--ver-600);color:var(--ver-700);font-weight:600}.submit-bar{padding:12px 16px 14px;background:var(--bg);border-top:1px solid var(--border);flex-shrink:0}.submit-btn{width:100%;height:48px;border-radius:24px;background:linear-gradient(180deg,var(--ver-500),var(--ver-700));color:white;font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.18em;box-shadow:0 4px 16px rgba(139,46,31,.35);display:flex;align-items:center;justify-content:center;gap:8px}.submit-btn:active{transform:translateY(1px)}.submit-price{font-size:13px;margin-left:4px;padding-left:8px;border-left:1px solid rgba(255,255,255,.32)}
/* mine */.user-header{padding:60px 20px 80px;background:radial-gradient(ellipse at top right,rgba(212,167,63,.3),transparent 60%),radial-gradient(ellipse at bottom left,rgba(184,57,35,.2),transparent 50%),linear-gradient(135deg,#2b2018 0%,#3d2f24 50%,#1a1410 100%);color:var(--ink-50);position:relative;overflow:hidden}.user-header:before{content:'';position:absolute;top:30px;right:-50px;width:200px;height:200px;border:1px solid rgba(212,167,63,.2);border-radius:50%}.user-info{position:relative;z-index:2;display:flex;align-items:center;gap:16px}.avatar{width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#d4a73f,#8b6914);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:28px;font-weight:700;color:#fff;border:2px solid var(--gold-400);box-shadow:0 4px 12px rgba(0,0,0,.3)}.user-name{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.05em;margin-bottom:4px}.user-phone{font-size:12px;color:rgba(244,235,219,.7);letter-spacing:.05em}.quota-card{position:relative;margin:-60px 16px 0;background:linear-gradient(180deg,#fff,#faf6ed);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow-md);z-index:5}.quota-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.quota-title{font-family:var(--serif);font-size:14px;font-weight:600}.quota-detail{font-size:11px;color:var(--text-3)}.quota-nums{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:12px}.quota-used{font-family:var(--serif);font-size:20px;color:var(--text-3)}.quota-total{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--ver-600)}.bar{height:6px;background:var(--ink-100);border-radius:3px;overflow:hidden;margin-bottom:10px}.bar-fill{height:100%;width:40%;background:linear-gradient(90deg,var(--gold-500),var(--ver-500));border-radius:3px}.quota-tip{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3)}.verify{margin:16px 16px 0;background:linear-gradient(135deg,#fff7e6,#fef0d0);border:1px solid #f0d99a;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;position:relative}.verify.verified{background:linear-gradient(135deg,#e8f5e9,#d4ead5);border-color:#a8d4c7}.verify-icon{width:36px;height:36px;border-radius:8px;background:rgba(184,137,43,.15);display:flex;align-items:center;justify-content:center;color:var(--gold-700);flex-shrink:0}.verify-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}.verify-text{flex:1}.verify-title{font-family:var(--serif);font-size:13px;font-weight:600}.verify-desc{font-size:10.5px;color:var(--text-2);margin-top:2px}.verify-btn{font-size:11px;color:white;background:var(--ver-600);padding:6px 12px;border-radius:99px;font-weight:600}.verify.verified .verify-btn{background:var(--jade-600)}.order-tabs{display:flex;padding:0 12px;margin-top:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}.order-tab{flex:0 0 auto;padding:10px;font-size:12.5px;color:var(--text-2);position:relative;white-space:nowrap}.order-tab.active{color:var(--ver-600);font-weight:600}.order-tab.active:after{content:'';position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:22px;height:2px;background:var(--ver-600);border-radius:2px}.order-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 8px 10px}.order-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:8px}.order-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:rgba(212,167,63,.12);color:var(--gold-700)}.order-icon svg,.grid-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}.order-badge{position:absolute;right:-3px;top:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--ver-600);color:white;font-size:9px;border:1.5px solid white}.order-label{font-size:11px;color:var(--text-2)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:16px 8px}.service{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:8px}.grid-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}.g1{background:linear-gradient(135deg,#fef0d0,#f0d99a);color:var(--gold-700)}.g2{background:linear-gradient(135deg,#fbe5dc,#f0c5b3);color:var(--ver-600)}.g3{background:linear-gradient(135deg,#d4ead5,#a8d4c7);color:var(--jade-700)}.service-label{font-size:11px;color:var(--text-2)}
/* tab */.tabbar{position:absolute;left:0;right:0;bottom:0;height:72px;background:rgba(250,246,237,.92);backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;padding:0 4px 8px;z-index:350}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-3);font-size:10px;letter-spacing:.1em;padding:8px 0;position:relative}.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.tab.active{color:var(--ver-600)}.tab.active:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--ver-600);border-radius:0 0 2px 2px}.tab-center{margin-top:-20px}.tab-center-bg{width:56px;height:56px;border-radius:50%;margin:0 auto;background:linear-gradient(180deg,var(--ver-500),var(--ver-700));color:var(--gold-300);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(139,46,31,.4),inset 0 1px 0 rgba(255,255,255,.2),0 0 0 4px var(--bg)}.tab-center-bg svg{width:24px;height:24px;stroke-width:2}.tab-center-label{font-size:10px;margin-top:4px;color:var(--text-2)}.tab-center.active .tab-center-label{color:var(--ver-600);font-weight:600}
/* sheets */.mask{position:absolute;inset:0;background:rgba(26,20,16,.5);backdrop-filter:blur(3px);z-index:500;opacity:0;pointer-events:none;transition:.25s}.mask.show{opacity:1;pointer-events:auto}.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:20px 20px 0 0;z-index:510;transform:translateY(105%);transition:transform .36s cubic-bezier(.16,1,.3,1);max-height:80%;padding:8px 20px 32px;box-shadow:0 -8px 32px rgba(26,20,16,.22);display:flex;flex-direction:column}.sheet.show{transform:translateY(0)}.handle{width:36px;height:4px;background:var(--ink-200);border-radius:2px;margin:0 auto 12px}.sheet-title{font-family:var(--serif);font-size:17px;font-weight:600;text-align:center;letter-spacing:.06em}.sheet-sub{font-size:11px;color:var(--text-3);text-align:center;margin:4px 0 16px}.sheet-list{overflow:auto;scrollbar-width:none}.detail-item,.order-card{background:white;border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}.detail-item{display:flex;align-items:center;gap:12px}.detail-i{width:36px;height:36px;border-radius:8px;background:rgba(184,57,35,.1);display:flex;align-items:center;justify-content:center;color:var(--ver-600)}.detail-info{flex:1}.detail-name{font-size:13px;font-weight:500}.detail-meta{font-size:11px;color:var(--text-3);margin-top:2px}.detail-amt{font-family:var(--serif);font-weight:700;color:var(--ver-600)}.positive{color:var(--jade-600)}.order-top{display:flex;justify-content:space-between;border-bottom:1px dashed var(--border);padding-bottom:10px;margin-bottom:10px}.order-id{font-size:11px;color:var(--text-3)}.order-status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px}.s1{background:rgba(212,167,63,.15);color:var(--gold-700)}.s2{background:rgba(122,98,72,.12);color:var(--ink-700)}.s3{background:rgba(184,57,35,.1);color:var(--ver-600)}.s4{background:rgba(139,46,31,.12);color:var(--ver-700)}.s5{background:rgba(61,122,107,.12);color:var(--jade-700)}.order-body{display:flex;align-items:center;gap:10px}.thumb{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,var(--ink-100),var(--ink-200));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;color:var(--ink-700)}.order-detail{flex:1;min-width:0}.order-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.order-date{font-size:11px;color:var(--text-3);margin-top:4px}.order-price{font-family:var(--serif);font-weight:700;color:var(--ver-600)}.order-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px dashed var(--border);padding-top:10px;margin-top:10px}.order-btn{font-size:11px;padding:5px 12px;border-radius:99px;border:1px solid var(--border);color:var(--text-2)}.order-btn.primary{background:var(--ver-600);border-color:var(--ver-600);color:white}.form-field{background:white;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px}.form-field input{width:100%;border:0;outline:0;background:none;font-size:14px}.sheet-primary{width:100%;background:linear-gradient(180deg,var(--ver-500),var(--ver-600));color:var(--gold-300);border-radius:12px;padding:14px 20px;font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.15em}.pay-amount{background:linear-gradient(135deg,rgba(212,167,63,.1),rgba(212,167,63,.04));border:1px solid rgba(212,167,63,.25);border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.pay-value{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--ver-700)}.pay-value:before{content:'¥';font-size:16px}.pay-method{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--jade-600);border-radius:10px;padding:12px 14px;margin-bottom:14px}.wechat{width:28px;height:28px;border-radius:6px;background:#07c160;color:white;display:flex;align-items:center;justify-content:center;font-size:15px}.pay-rule{padding:10px 12px;background:rgba(61,122,107,.08);border-radius:8px;font-size:11px;color:var(--jade-700);line-height:1.5;margin-bottom:16px}.pay-btn{width:100%;height:46px;border-radius:23px;background:#07c160;color:white;font-size:14px;letter-spacing:.1em}.toast{position:absolute;top:62px;left:50%;transform:translateX(-50%) translateY(-18px);z-index:700;background:rgba(26,20,16,.92);color:var(--ink-50);padding:10px 18px;border-radius:99px;font-size:13px;white-space:nowrap;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.side{width:380px;z-index:1}.notes{background:white;border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow-lg)}.notes-eyebrow{font-size:11px;letter-spacing:.3em;color:var(--ver-600);margin-bottom:8px}.notes-title{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:6px}.notes-sub{font-size:12px;color:var(--text-3);line-height:1.7}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.chip{font-size:11px;background:var(--ink-50);border:1px solid var(--border);padding:6px 10px;border-radius:99px;color:var(--text-2)}@media(max-width:900px){.side{display:none}.stage{padding:18px}.phone{transform:scale(.92)}}@media(max-width:480px){body{overflow:auto}.stage{padding:0;height:100vh}.phone{width:100%;height:100vh;border-radius:0;box-shadow:none}.phone:after{display:none}.screen{border-radius:0}}
</style>
</head>
<body>
<div class="stage">
<div class="phone">
<div class="screen">
<div class="status-bar"><span>19:34</span><div class="status-icons"><svg viewBox="0 0 24 24"><path d="M2 22h20V11H2v11zm2-9h16v7H4v-7zM7 2h10v2H7V2zm5 4h-2v3h2V6z"/></svg><svg viewBox="0 0 24 24"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg><svg viewBox="0 0 24 24"><path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/></svg></div></div>
<main class="page page-home active" data-page="home">
<div class="scroll">
<div class="top-nav"><div class="brand"><div class="seal">禧</div><div><div class="brand-name">禧天典当</div><div class="brand-tag">XI TIAN · PAWN</div></div></div></div>
<section class="banner-section"><div class="banner"><div class="slides"><div class="slide s1"><div><div class="eyebrow">金秋特惠</div><div class="slide-title">藏珍<em>焕新</em><br>价值再发现</div><div class="slide-sub">专业评估 · 公正价格</div><button class="slide-cta" data-go="eval">立即参与 →</button></div></div><div class="slide s2"><div><div class="eyebrow">玉石专场</div><div class="slide-title">温润<em>如玉</em><br>匠心评估</div><div class="slide-sub">和田玉 · 翡翠 · 独山玉</div><button class="slide-cta" data-go="eval">免费咨询 →</button></div></div><div class="slide s3"><div><div class="eyebrow">新人福利</div><div class="slide-title">首单<em>免单</em><br>评估零门槛</div><div class="slide-sub">在线提交 · 极速出价</div><button class="slide-cta" data-go="eval">立即领取 →</button></div></div></div><div class="dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></div></section>
<section class="trust"><div class="trust-head"><div><div class="trust-title">实力背书</div><div class="label">TRUST & STRENGTH</div></div><div class="medal">行业认证</div></div><div class="stats"><div class="stat"><div class="num">12<span class="unit">年</span></div><div class="label">行业深耕</div></div><div class="line"></div><div class="stat"><div class="num">86<span class="unit">+</span></div><div class="label">鉴定专家</div></div><div class="line"></div><div class="stat"><div class="num">10<span class="unit">万</span></div><div class="label">累计鉴定</div></div></div><div class="badges"><div class="badge"><span class="badge-i"><svg viewBox="0 0 24 24"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg></span>持牌经营</div><div class="badge"><span class="badge-i"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83"/></svg></span>权威鉴定</div><div class="badge"><span class="badge-i"><svg viewBox="0 0 24 24"><path d="M12 1l9 4v6c0 5.55-3.84 10.74-9 12-5.16-1.26-9-6.45-9-12V5l9-4z"/></svg></span>隐私保密</div></div></section>
<section class="cta"><div class="cta-eyebrow">限时免费</div><div class="cta-title">传家之宝 <em>一键估值</em></div><div class="cta-sub">专业鉴定师 · 30 分钟极速报价</div><button class="main-btn" data-go="eval">估 立即免费评估 →</button><div class="cta-features"><span><i class="green-dot"></i>0 费用</span><span><i class="green-dot"></i>0 门槛</span><span><i class="green-dot"></i>0 风险</span></div></section>
<section class="flow"><div class="flow-head"><div class="flow-title">典当流程</div><div class="section-more">详情 ›</div></div><div class="flow-scroll"><div class="flow-step"><div class="flow-num">壹</div><div class="flow-name">在线提交</div><div class="flow-desc">拍照上传藏品图片与基本信息</div></div><div class="flow-step"><div class="flow-num">贰</div><div class="flow-name">专业鉴定</div><div class="flow-desc">权威专家团队实物或视频评估</div></div><div class="flow-step"><div class="flow-num">叁</div><div class="flow-name">极速报价</div><div class="flow-desc">30 分钟内出具公正评估价格</div></div><div class="flow-step"><div class="flow-num">肆</div><div class="flow-name">成交放款</div><div class="flow-desc">满意即成交，资金安全到账</div></div></div></section>
</div>
</main>
<main class="page page-eval" data-page="eval">
<div class="eval-top"><div class="eval-row"><div class="eval-title"><span style="font-family:var(--brush);color:var(--ver-600)">禧</span> 提交评估</div><button class="cancel" data-go="home">‹ 返回首页</button></div></div>
<div class="fee-bar"><div class="fee-icon">?</div><div class="fee-text">评估费 <strong>¥30</strong>，<span style="color:var(--jade-700)">成交全额退还</span>，未成交扣费</div><button class="quota" id="quotaBox"><span class="qnum" id="quotaNum">3</span><span class="qlbl">免费次数</span></button></div>
<div class="eval-scroll">
<div class="form-card"><div class="form-title">文玩品类 <span class="req">*</span></div><div class="form-body"><div class="cat-grid" id="catGrid"><button class="cat selected"><span>🪨</span>玉石</button><button class="cat"><span>🏺</span>瓷器</button><button class="cat"><span>🪵</span>木质</button><button class="cat"><span>🧶</span>核雕</button><button class="cat"><span>🎨</span>漆器</button><button class="cat"><span>🛕</span>佛像</button><button class="cat"><span>🪙</span>铜器</button><button class="cat"><span>📿</span>其他</button></div></div></div>
<div class="form-card"><div class="form-title">上传细节图 / 视频 <span class="req">*</span></div><div class="form-body"><div class="upload-grid" id="uploadGrid"><div class="upload uploaded" data-tag="封面"><span class="up-emoji">💎</span><button class="remove" data-remove>×</button></div><div class="upload uploaded" data-tag="细节"><span class="up-emoji">🪨</span><button class="remove" data-remove>×</button></div><button class="upload" data-video><svg viewBox="0 0 24 24"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg><span>视频 12"</span></button><button class="upload" data-add-img><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg><span>图片</span></button><button class="upload" data-add-video><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg><span>视频</span></button><div class="upload" style="background:transparent;border:none">已传 2/9</div></div><div style="font-size:10px;color:var(--text-3);margin-top:8px;line-height:1.5">建议上传：正面 · 背面 · 细节 · 铭文，至多 9 张</div></div></div>
<div class="form-card"><div class="form-title">文玩信息</div><div class="form-body"><div class="field"><label class="field-label">藏品名称 <span class="req">*</span></label><input id="itemName" class="input" placeholder="例：和田玉如意挂件"></div><div class="field-row"><div class="field"><label class="field-label">年代</label><select class="select"><option>不确定</option><option>清代</option><option>民国</option><option>2000年后</option></select></div><div class="field"><label class="field-label">来源</label><select class="select"><option>家传</option><option>拍卖行</option><option>古玩市场</option><option>其他</option></select></div></div><div class="field"><label class="field-label">规格描述 <span class="req">*</span></label><textarea class="textarea" placeholder="例：高 5cm · 宽 3cm · 重 28g，含鉴定证书"></textarea></div></div></div>
<div class="form-card"><div class="form-title">心理价位 <span class="req">*</span></div><div class="form-body"><div class="price-wrap"><input id="priceInput" class="input" type="number" placeholder="期望成交价"></div><div class="quick"><button data-price="1000">1千</button><button data-price="5000">5千</button><button data-price="10000">1万</button><button data-price="50000">5万</button><button data-price="100000">10万</button><button data-price="500000">50万</button></div></div></div>
<div class="form-card"><div class="form-title">补充备注</div><div class="form-body"><textarea id="remark" class="textarea" placeholder="可补充：是否有证书、修补、来源故事等"></textarea><div id="remarkCount" style="font-size:10px;color:var(--text-3);margin-top:6px;text-align:right">0 / 200</div></div></div><div style="height:8px"></div>
</div>
<div class="submit-bar"><button class="submit-btn" id="submitEval">估 提交评估 <span class="submit-price" id="submitPrice">免费</span></button></div>
</main>
<main class="page page-mine" data-page="mine">
<div class="scroll">
<section class="user-header"><div class="user-info"><div class="avatar">海</div><div><div class="user-name">海拔科技</div><div class="user-phone">17373127962</div></div></div></section>
<div class="quota-card"><div class="quota-head"><div class="quota-title">免费评估次数</div><button class="quota-detail" id="btnQuotaDetail">明细 ›</button></div><div class="quota-nums"><span class="quota-used" id="mineUsed">2</span><span>/</span><span class="quota-total">5</span><span>次</span></div><div class="bar"><div class="bar-fill"></div></div><div class="quota-tip"><span>本月剩余 <strong id="mineRemain" style="color:var(--ver-600)">3</strong> 次</span><span>每月 1 日刷新</span></div></div>
<div class="verify" id="verifyBanner"><div class="verify-icon"><svg viewBox="0 0 24 24"><path d="M9 12l2 2 4-4"/><path d="M21 12c0 1-1 3-3 4-1 6-9 6-9 0-2-1-3-3-3-4 0-3 3-5 7-5s7 2 7 5z"/></svg></div><div class="verify-text"><div class="verify-title" id="verifyTitle">未实名认证</div><div class="verify-desc" id="verifyDesc">完成认证，解锁签约与放款服务</div></div><button class="verify-btn" id="btnVerify">去认证</button></div>
<section class="section"><div class="section-head"><div class="section-title">我的订单</div><button class="section-more" data-order="all">全部订单 ›</button></div><div class="order-tabs"><button class="order-tab active" data-order="all">全部 <span>9</span></button><button class="order-tab" data-order="eval">待评估 <span>2</span></button><button class="order-tab" data-order="mail">待邮寄 <span>2</span></button><button class="order-tab" data-order="sign">待签署 <span>1</span></button><button class="order-tab" data-order="payout">待打款 <span>1</span></button><button class="order-tab" data-order="done">已完成 <span>3</span></button></div><div class="order-grid"><button class="order-item" data-order="all"><div class="order-icon">📄</div><div class="order-label">全部</div></button><button class="order-item" data-order="eval"><div class="order-icon">🔍<span class="order-badge">2</span></div><div class="order-label">待评估</div></button><button class="order-item" data-order="mail"><div class="order-icon">📦<span class="order-badge">2</span></div><div class="order-label">待邮寄</div></button><button class="order-item" data-order="sign"><div class="order-icon">✍<span class="order-badge">1</span></div><div class="order-label">待签署</div></button><button class="order-item" data-order="payout"><div class="order-icon">¥<span class="order-badge">1</span></div><div class="order-label">待打款</div></button><button class="order-item" data-order="done"><div class="order-icon">✓</div><div class="order-label">已完成</div></button></div></section>
<section class="section"><div class="section-head"><div class="section-title">我的服务</div></div><div class="service-grid"><button class="service" data-service-action="invite"><div class="grid-icon g1">邀</div><div class="service-label">邀请好友</div></button><button class="service" data-service-action="feedback"><div class="grid-icon g2">馈</div><div class="service-label">意见反馈</div></button><button class="service" data-service-action="about"><div class="grid-icon g3">关</div><div class="service-label">关于我们</div></button><button class="service" data-kf="phone"><div class="grid-icon g2">☎</div><div class="service-label">一键呼叫</div></button><button class="service" data-kf="online"><div class="grid-icon g1">聊</div><div class="service-label">在线客服</div></button><button class="service" data-kf="wechat"><div class="grid-icon g3">微</div><div class="service-label">微信客服</div></button></div></section><div style="height:20px"></div>
</div>
</main>
<nav class="tabbar"><button class="tab active" data-go="home"><svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>首页</button><button class="tab tab-center" data-go="eval"><div class="tab-center-bg"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg></div><div class="tab-center-label">评估</div></button><button class="tab" data-go="mine"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg>我的</button></nav>
<div class="mask" id="mask"></div>
<section class="sheet" id="quotaSheet"><div class="handle"></div><div class="sheet-title">评估次数明细</div><div class="sheet-sub">本月免费次数使用记录</div><div class="sheet-list" id="quotaList"></div></section>
<section class="sheet" id="orderSheet"><div class="handle"></div><div class="sheet-title" id="orderTitle">全部订单</div><div class="sheet-sub">查看历史交易记录</div><div class="sheet-list" id="orderList"></div></section>
<section class="sheet" id="verifySheet"><div class="handle"></div><div class="sheet-title">实名认证</div><div class="sheet-sub">认证信息仅用于合规签约，将严格保密</div><div class="form-field"><input id="realName" placeholder="请输入真实姓名" maxlength="20"></div><div class="form-field"><input id="idCard" placeholder="请输入身份证号" maxlength="18"></div><button class="sheet-primary" id="submitVerify">提交认证</button></section>
<section class="sheet" id="paySheet"><div class="handle"></div><div class="sheet-title">确认支付</div><div class="sheet-sub">未成交将扣除评估费，成交后全额退还</div><div class="pay-amount"><span>评估费</span><span class="pay-value">30.00</span></div><div class="pay-method"><div class="wechat">微</div><div><div style="font-size:13px;font-weight:500">微信支付</div><div style="font-size:10px;color:var(--text-3);margin-top:2px">推荐 · 极速到账</div></div></div><div class="pay-rule">成交全额退还；未成交仅扣 ¥30，平台担保交易</div><button class="pay-btn" id="confirmPay">微信支付 ¥30.00</button></section>
<div class="toast" id="toast">操作成功</div>
</div>
</div>
<aside class="side"><div class="notes"><div class="notes-eyebrow">INTERACTIVE PROTOTYPE</div><h1 class="notes-title">禧天典当 · 三页交互原型</h1><p class="notes-sub">已整合为单个 HTML 文件：统一 iPhone 14 Pro 风格手机外壳，首页 / 评估 / 我的 三页通过底部菜单与 CTA 在同一文件内切换。</p><div class="chips"><span class="chip">首页 CTA → 评估</span><span class="chip">评估提交</span><span class="chip">0额度微信支付</span><span class="chip">实名认证弹层</span><span class="chip">订单状态弹层</span><span class="chip">次数明细</span><span class="chip">客服入口</span></div></div></aside>
</div>
<script>
const $=(s,p=document)=>p.querySelector(s);const $$=(s,p=document)=>Array.from(p.querySelectorAll(s));let current='home';let freeLeft=3;const fee=30;
const quotaData=[['和田玉如意挂件 · 评估','今天 14:32','-1 次',false],['翡翠手镯 · 评估','昨天 18:05','-1 次',false],['邀请好友奖励','2026-06-12','+1 次',true],['紫砂壶 · 评估','2026-06-10','-1 次',false],['月度赠送（5次）','2026-06-01','+5 次',true]];
const orders={all:[['XT2026061601','和田玉如意挂件','2026-06-16 14:32','¥ 18,800','待评估','s1','玉'],['XT2026061602','老坑冰种翡翠手镯','2026-06-16 11:20','¥ 86,000','待评估','s1','翠'],['XT2026061401','明代紫砂壶','2026-06-14 10:21','¥ 12,500','待邮寄','s2','壶'],['XT2026061208','黄花梨手串','2026-06-12 16:48','¥ 5,600','待邮寄','s2','串'],['XT2026061002','老蜜蜡108颗','2026-06-10 09:15','¥ 23,000','待签署','s3','蜡'],['XT2026060801','沉香念珠','2026-06-08 11:30','¥ 9,800','待打款','s4','香'],['XT2026060503','青铜香炉','2026-06-05 15:20','¥ 4,200','已完成','s5','炉'],['XT2026060301','战国玛瑙珠','2026-06-03 13:42','¥ 7,800','已完成','s5','玛'],['XT2026052801','清代金佛像','2026-05-28 10:00','¥ 32,000','已完成','s5','佛']],eval:[],mail:[],sign:[],payout:[],done:[]};orders.eval=orders.all.filter(o=>o[4]=='待评估');orders.mail=orders.all.filter(o=>o[4]=='待邮寄');orders.sign=orders.all.filter(o=>o[4]=='待签署');orders.payout=orders.all.filter(o=>o[4]=='待打款');orders.done=orders.all.filter(o=>o[4]=='已完成');
function go(page){current=page;$$('.page').forEach(p=>p.classList.toggle('active',p.dataset.page===page));$$('.tabbar .tab').forEach(t=>t.classList.toggle('active',t.dataset.go===page));document.documentElement.style.setProperty('--status-color',page==='mine'?'#fff':'var(--text)');closeSheet();}
function toast(msg){const t=$('#toast');t.textContent=msg;t.classList.add('show');clearTimeout(window.tt);window.tt=setTimeout(()=>t.classList.remove('show'),1800)}
function openSheet(id){$('#mask').classList.add('show');$(id).classList.add('show')}function closeSheet(){$('#mask').classList.remove('show');$$('.sheet').forEach(s=>s.classList.remove('show'))}
function updateQuota(){ $('#quotaNum').textContent=freeLeft; $('#mineRemain').textContent=freeLeft; $('#mineUsed').textContent=5-freeLeft; $('#submitPrice').textContent=freeLeft>0?'免费':'¥'+fee; $('.bar-fill').style.width=((5-freeLeft)/5*100)+'%';}
function renderQuota(){ $('#quotaList').innerHTML=quotaData.map(d=>`<div class="detail-item"><div class="detail-i">${d[3]?'赠':'用'}</div><div class="detail-info"><div class="detail-name">${d[0]}</div><div class="detail-meta">${d[1]}</div></div><div class="detail-amt ${d[3]?'positive':''}">${d[2]}</div></div>`).join('')}
function renderOrders(type='all'){const map={all:'全部订单',eval:'待评估',mail:'待邮寄',sign:'待签署',payout:'待打款',done:'已完成'};const action={s1:['催评估','已通知评估师',1],s2:['填写物流','请填写快递单号',1],s3:['去签署','跳转电子合同签署',1],s4:['查看进度','网银放款中，请稍候',0],s5:['查看合同','查看电子合同',0]};$('#orderTitle').textContent=map[type]||'订单';$('#orderList').innerHTML=(orders[type]||[]).map(o=>{const a=action[o[5]];return `<div class="order-card"><div class="order-top"><div class="order-id">订单号 ${o[0]}</div><div class="order-status ${o[5]}">${o[4]}</div></div><div class="order-body"><div class="thumb">${o[6]}</div><div class="order-detail"><div class="order-name">${o[1]}</div><div class="order-date">${o[2]}</div></div><div class="order-price">${o[3]}</div></div><div class="order-actions"><button class="order-btn" onclick="toast('查看订单详情')">详情</button><button class="order-btn ${a[2]?'primary':''}" onclick="toast('${a[1]}')">${a[0]}</button></div></div>`}).join('')}
$$('[data-go]').forEach(el=>el.addEventListener('click',e=>{e.preventDefault();go(el.dataset.go)}));$$('.cat').forEach(c=>c.onclick=()=>{$$('.cat').forEach(x=>x.classList.remove('selected'));c.classList.add('selected')});$$('.quick button').forEach(b=>b.onclick=()=>{$$('.quick button').forEach(x=>x.classList.remove('active'));b.classList.add('active');$('#priceInput').value=b.dataset.price});$('#remark').oninput=()=>{let v=$('#remark').value;if(v.length>200){$('#remark').value=v.slice(0,200);v=$('#remark').value}$('#remarkCount').textContent=v.length+' / 200'};$$('[data-add-img]').forEach(b=>b.onclick=()=>toast('调起相机/相册'));$$('[data-add-video]').forEach(b=>b.onclick=()=>toast('录制/选择视频'));$$('[data-remove]').forEach(b=>b.onclick=e=>{e.stopPropagation();b.parentElement.remove();toast('已删除')});$('#submitEval').onclick=()=>{if(!$('#itemName').value.trim())return toast('请填写藏品名称');if(!$('#priceInput').value.trim())return toast('请填写心理价位');if(freeLeft>0){freeLeft--;updateQuota();toast('提交成功 · 免费次数 -1');setTimeout(()=>toast('评估师 30 分钟内联系您'),1200)}else openSheet('#paySheet')};$('#confirmPay').onclick=()=>{toast('调起微信支付...');setTimeout(()=>{closeSheet();toast('支付成功 · 评估单已派单')},900)};$('#btnQuotaDetail').onclick=()=>openSheet('#quotaSheet');$('#quotaBox').onclick=()=>toast('本月剩余 '+freeLeft+' 次免费评估');$$('[data-order]').forEach(el=>el.onclick=()=>{const type=el.dataset.order;$$('.order-tab').forEach(t=>t.classList.toggle('active',t.dataset.order===type));renderOrders(type);openSheet('#orderSheet')});$('#btnVerify').onclick=()=>openSheet('#verifySheet');$('#submitVerify').onclick=()=>{const name=$('#realName').value.trim(),id=$('#idCard').value.trim();if(!name)return toast('请输入真实姓名');if(!id||id.length<15)return toast('请输入正确的身份证号');closeSheet();$('#verifyBanner').classList.add('verified');$('#verifyTitle').textContent='已实名认证';$('#verifyDesc').textContent=name+' · 认证编号 '+id.slice(-6);$('#btnVerify').textContent='查看';toast('实名认证成功')};$$('[data-service-action]').forEach(b=>b.onclick=()=>toast({invite:'邀请好友 · 双方各得 +1 评估次数',feedback:'进入意见反馈',about:'禧天典当 v1.2.6'}[b.dataset.serviceAction]));$$('[data-kf]').forEach(b=>b.onclick=()=>{const k=b.dataset.kf;if(k==='phone')toast('正在呼叫 400-888-1688');if(k==='online')toast('正在连接在线客服…');if(k==='wechat'){navigator.clipboard&&navigator.clipboard.writeText('xitian_kf');toast('微信号 xitian_kf 已复制')}});$('#mask').onclick=closeSheet;$$('.handle').forEach(h=>h.onclick=closeSheet);renderQuota();renderOrders();updateQuota();
</script>
</body>
</html>
index.html
index.html