viewof dashboard = { const POS = "#8B4E1D", NEU = "#C49A63", NEG = "#E2D8C5", ACCENT = "#ac8368"; const PART_TIP = "Household participation"; const BASE = 760; // 设计稿基准宽度,整体按 window.innerWidth/BASE 缩放 const catDesc = { CW: "Physical/mental comfort, health, body perceptions, satisfaction (excludes acoustics)", TH: "Physical/mental comfort, health, body perceptions, satisfaction (excludes acoustics) ", AC: "Sound transmission, noise levels, acoustic comfort, reverberation, privacy", DM: "Material aging, structural integrity, surface condition, damage, performance over time", SP: "External opinions, neighbor reactions, visitor comments, professional skepticism, curiosity", RC: "Decision satisfaction, regrets, alternative choices, what would be done differently", VM: "Pre-choice drivers, environmental ethics, health priorities, philosophical beliefs", FF: "Financial motivations, costs, and benefits associated with hemp-lime." }; // ==== category code → URL slug(目标页 catMap 认单词) ==== const slugMap = { CW:"comfort", TH:"temperature", AC:"acoustic", DM:"durability", SP:"social", RC:"reflection", VM:"values", FF:"financial" }; const css = ` @import url('https://cdn.jsdelivr.net/npm/@fontsource/carlito@5.2.8/400.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/carlito@5.2.8/700.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/carlito@5.2.8/400-italic.css'); /* 缩放外层:占满框宽,内容左上角为原点缩放 */ .rd-scaler{width:100%;position:relative;overflow:visible} .rd-stage{width:${BASE}px;transform-origin:top left;will-change:transform} .rdash{--accent:${ACCENT};--pos:${POS};--neu:${NEU};--neg:${NEG}; --ink:#1f1a17;--muted:rgba(31,26,23,.5);--line:#e7ddcc; --ease:cubic-bezier(.16,1,.3,1); --sans:'Carlito','Calibri','Segoe UI',sans-serif; font-family:Georgia,"Times New Roman",serif;color:var(--ink); background:transparent;padding:28px;box-sizing:border-box;width:${BASE}px} .rdash *,.rdash *::before,.rdash *::after{box-sizing:border-box} .rd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .rd-card{position:relative;border:1px solid var(--line);border-radius:16px; background:#fff;cursor:pointer;padding:26px 18px;text-align:center;min-height:148px; display:flex;flex-direction:column;align-items:center;justify-content:center; transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s; box-shadow:0 1px 2px rgba(31,26,23,.04),0 10px 22px -18px rgba(31,26,23,.2)} .rd-card:hover{transform:translateY(-5px);border-color:#7a4310;cursor:pointer; box-shadow:0 22px 44px -22px rgba(31,26,23,.34);z-index:50} .rd-ic{width:38px;height:38px;margin:0 auto 8px;color:var(--accent); transition:transform .28s var(--ease)} .rd-card:hover .rd-ic{transform:scale(1.12)} .rd-ic .ic-img{width:100%;height:100%;object-fit:contain} .rd-ic svg{width:100%;height:100%} .rd-title{font-size:15px;font-weight:700;line-height:1.25} /* ===== 卡片底部 category score(标题下,不改变卡片尺寸) ===== */ .rd-cnum{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:700; line-height:1;display:flex;align-items:baseline;justify-content:center;gap:5px; margin:6px 0 0} .rd-cnum .num{color:var(--ink)} .rd-cnum .den{color:#d8c7ad;font-size:17px} /* 卡片 hover tooltip */ .rd-cardtip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px); width:240px;max-width:240px;background:#fff;color:var(--ink);font-family:var(--sans); font-size:13px;line-height:1.5;font-weight:400;padding:11px 14px;border-radius:10px; border:1px solid var(--line);box-shadow:0 14px 36px -10px rgba(31,26,23,.4); opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;text-align:center} .rd-card:hover .rd-cardtip{opacity:1;transform:translate(-50%,0)} /* 第一行(前两张卡)的 tooltip 往下显示,避免被顶部截断 */ .rd-card:nth-child(1) .rd-cardtip, .rd-card:nth-child(2) .rd-cardtip{bottom:auto;top:calc(100% + 8px);z-index:100} .rdash.is-open .rd-grid{display:none} .rd-panel{display:none;border:1px solid var(--line);border-radius:16px;background:#fff; padding:28px 34px;min-height:var(--grid-h,620px); box-shadow:0 1px 2px rgba(31,26,23,.04),0 24px 60px -32px rgba(31,26,23,.3); animation:rdfade .4s var(--ease)} .rdash.is-open .rd-panel{display:block} @keyframes rdfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* category 头部:居中 */ .rd-phead{position:relative;display:flex;flex-direction:column;align-items:center; text-align:center;gap:10px;padding-bottom:18px;border-bottom:1px solid var(--line)} .rd-phead .rd-ic{margin:0;width:78px;height:78px} .rd-pcode{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--accent)} .rd-pttl{font-size:25px;font-weight:700} .rd-close{position:absolute;top:-6px;right:0;width:38px;height:38px;border:none; border-radius:10px;background:rgba(175,99,28,.1);color:var(--accent);font-size:22px; line-height:1;cursor:pointer;transition:background .2s} .rd-close:hover{background:rgba(175,99,28,.22)} /* category 总分:居中;展开子项时隐藏 */ .rd-catscore{text-align:center;padding:24px 2px 16px} .rd-catnum{font-size:64px;font-weight:700;line-height:1} .rd-catnum .num{color:var(--ink)} .rd-catnum .den{color:#d8c7ad} .rd-catname{font-size:15px;font-weight:600;color:var(--ink);margin-top:6px} .rd-panel.has-open .rd-catscore{display:none} .rd-sub{border-bottom:1px solid var(--line)} .rd-sub:first-of-type{border-top:1px solid var(--line)} .rd-subhead{display:flex;align-items:center;gap:14px;padding:18px 4px;cursor:pointer; transition:padding-left .2s var(--ease)} .rd-subhead:hover{padding-left:6px} .rd-subcode{font-family:var(--sans);flex:none;font-size:13px;font-weight:700;color:var(--accent);min-width:46px} .rd-subname{flex:1;font-size:17px;font-weight:600} .rd-tip{flex:none;position:relative;width:20px;height:20px;border-radius:50%; border:1.5px solid var(--muted);color:var(--muted);font-size:12px;font-weight:700; font-family:var(--sans); display:grid;place-items:center;cursor:help} .rd-tip.info{font-style:italic} .rd-tipbox{position:absolute;bottom:150%;right:-8px;width:300px;max-width:300px; background:#fff;color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.6;font-weight:400; padding:13px 15px;border-radius:10px;border:1px solid var(--line); box-shadow:0 14px 36px -10px rgba(31,26,23,.4); opacity:0;pointer-events:none;transform:translateY(4px); transition:opacity .2s,transform .2s;z-index:30;text-align:left} .rd-tip:hover .rd-tipbox{opacity:1;transform:translateY(0)} .rd-tip-right .rd-tipbox{right:auto;left:-8px;width:auto;white-space:nowrap} .rd-chev{flex:none;color:var(--accent);transition:transform .3s var(--ease)} .rd-chev svg{width:16px;height:16px;display:block} .rd-sub.open .rd-chev{transform:rotate(90deg)} .rd-sub.open .rd-subname{color:var(--accent)} .rd-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)} .rd-sub.open .rd-detail{grid-template-rows:1fr} .rd-detail>div{overflow:hidden;min-height:0} /* subcategory 内容:左对齐 */ .rd-dinner{padding:12px 4px 26px 50px;text-align:left} .rd-scorenum{font-size:40px;font-weight:700;line-height:1;display:block;margin-bottom:16px} .rd-partrow{display:flex;align-items:center;gap:10px;margin-bottom:18px} .rd-partnum{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.01em} .rd-bar{display:flex;height:30px;border-radius:7px;overflow:hidden;background:var(--line); font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;max-width:560px} .rd-bar .seg{display:flex;align-items:center;justify-content:flex-end;padding:0 10px; min-width:0;white-space:nowrap} .rd-bar .pos{background:var(--pos)} .rd-bar .neu{background:var(--neu)} .rd-bar .neg{background:var(--neg);color:var(--ink)} .rd-legend{display:flex;gap:20px;font-family:var(--sans);font-size:13px;color:var(--muted)} .rd-legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:middle} .rd-legendrow{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;max-width:560px} .rd-learnmore{font-family:var(--sans);font-size:13px;font-weight:700; color:var(--accent) !important;text-decoration:none !important; border:1px solid var(--accent);border-radius:8px; padding:8px 16px;background:#fff;cursor:pointer; transition:background .2s,border-color .2s,color .2s} .rd-learnmore:hover{background:var(--accent);border-color:var(--accent); color:#fff !important} `; const root = html`

`; const stage = html`

`; const rdash = html`

`; stage.appendChild(rdash); root.appendChild(html``); root.appendChild(stage); const partHTML = n => `N=${n}`; const barHTML = sc => { const seg = (cls,v) => v>0 ? `${v>=10?v:""}` : ""; return `

${seg("pos",sc.p||0)}${seg("neu",sc.n||0)}${seg("neg",sc.g||0)}

`; }; rdash.innerHTML = `

${indicators.map((d,i)=>{ const cs = scores[d.code] && typeof scores[d.code].score === "number" ? scores[d.code].score : null; return `

${icons(d.code)}

${d.title}

${cs !== null ? `

${cs}/ 100

` : ""} ${catDesc[d.code] ? `

${catDesc[d.code]}

` : ""}

`; }).join("")}

`; const grid = rdash.querySelector(".rd-grid"); const host = rdash.querySelector(".rd-panel-host"); const cards = [...grid.querySelectorAll(".rd-card")]; let openIndex = null; root.value = null; // ==== 缩放:按视口宽/BASE 缩放,并把外层高度设为内容缩放后的高度 ==== function rescale(){ const w = (window.innerWidth || root.clientWidth || BASE); const scale = w / BASE; stage.style.transform = `scale(${scale})`; root.style.height = (stage.offsetHeight * scale) + "px"; } const ro = new ResizeObserver(rescale); ro.observe(root); window.addEventListener("resize", rescale); const mo = new MutationObserver(rescale); mo.observe(rdash, {subtree:true, attributes:true, childList:true}); requestAnimationFrame(rescale); function buildPanel(d){ const el = document.createElement("div"); el.className = "rd-panel"; const catScore = scores[d.code] && typeof scores[d.code].score === "number" ? scores[d.code].score : null; el.innerHTML = `

${icons(d.code)}

${d.code}

${d.title}

${catScore !== null ? `

${catScore} / 100

Category Score

` : ""} ${d.subs.map((s,i)=>`

${s.code} ${s.name} ?${s.def} ${icons("chev")}

${(()=>{ const sc = scores[s.code]; if(!sc) return ""; const score = (typeof sc.score === "number") ? sc.score : (sc.p||0); return ` ${score}

${partHTML(sc.part||0)} i${PART_TIP}

${barHTML(sc)}

Positive Neutral Negative

Learn More

`; })()}

`).join("")}`; el.querySelectorAll(".rd-sub").forEach(sub=>{ sub.querySelector(".rd-subhead").addEventListener("click", e=>{ if(e.target.closest(".rd-tip")) return; const was = sub.classList.contains("open"); el.querySelectorAll(".rd-sub.open").forEach(x=>x.classList.remove("open")); if(!was) sub.classList.add("open"); el.classList.toggle("has-open", !!el.querySelector(".rd-sub.open")); rescale(); }); }); el.querySelector(".rd-close").addEventListener("click", close); return el; } function open(i){ const gh = grid.getBoundingClientRect().height; rdash.style.setProperty("--grid-h", gh + "px"); openIndex = i; host.innerHTML = ""; host.appendChild(buildPanel(indicators[i])); rdash.classList.add("is-open"); root.value = indicators[i].code; root.dispatchEvent(new Event("input",{bubbles:true})); rescale(); } function close(){ openIndex = null; rdash.classList.remove("is-open"); host.innerHTML = ""; root.value = null; root.dispatchEvent(new Event("input",{bubbles:true})); rescale(); } cards.forEach(c => c.addEventListener("click", ()=>open(+c.dataset.i))); return root; }