{"id":1503,"date":"2026-08-31T17:05:17","date_gmt":"2026-08-31T09:05:17","guid":{"rendered":"https:\/\/haomusheji.com\/?page_id=1503"},"modified":"2026-08-31T18:21:57","modified_gmt":"2026-08-31T10:21:57","slug":"%e4%ba%8c%e9%a0%81","status":"publish","type":"page","link":"https:\/\/haomusheji.com\/","title":{"rendered":"\u4e3b\u9801"},"content":{"rendered":"\n<p>   <style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700;800;900&family=Noto+Serif+SC:wght@700;900&family=Inter:wght@400;500;600&display=swap');\n  *, *::before, *::after { box-sizing: border-box; }\n  html, body { margin: 0; }\n  img { max-width: 100%; display: block; }\n  .serif { font-family: 'Playfair Display', 'Noto Serif SC', serif; }\n  .sans { font-family: 'Inter', -apple-system, sans-serif; }\n  .no-scrollbar::-webkit-scrollbar { display: none; }\n  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n  .clamp-hero { font-size: clamp(48px, 10vw, 110px); line-height: 0.85; letter-spacing: -0.03em; }\n  .clamp-h2 { font-size: clamp(22px, 4vw, 28px); }\n  .clamp-h2-mid { font-size: clamp(24px, 3.5vw, 32px); }\n  .clamp-sub { font-size: clamp(22px, 5vw, 28px); }\n  .min0 { min-width: 0; }\n  .break-safe { overflow-wrap: break-word; word-break: break-word; }\n  @media (max-width: 480px) {\n    .hero-tight { font-size: clamp(42px, 12vw, 48px) !important; }\n  }\n<\/style> <\/p>\n\n\n\n\n<p><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/react@18\/umd\/react.production.min.js\" crossorigin=\"\"><\/script> <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin=\"\"><\/script> <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script> <style>\n\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700;800;900&family=Noto+Serif+SC:wght@700;900&family=Inter:wght@400;500;600&display=swap');\n\n  *, *::before, *::after { box-sizing: border-box; }\n\n  html, body { margin: 0; }\n\n  img { max-width: 100%; display: block; }\n\n  .serif { font-family: 'Playfair Display', 'Noto Serif SC', serif; }\n\n  .sans { font-family: 'Inter', -apple-system, sans-serif; }\n\n  .no-scrollbar::-webkit-scrollbar { display: none; }\n\n  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n\n  .clamp-hero { font-size: clamp(48px, 10vw, 110px); line-height: 0.85; letter-spacing: -0.03em; }\n\n  .clamp-h2 { font-size: clamp(22px, 4vw, 28px); }\n\n  .clamp-h2-mid { font-size: clamp(24px, 3.5vw, 32px); }\n\n  .clamp-sub { font-size: clamp(22px, 5vw, 28px); }\n\n  .min0 { min-width: 0; }\n\n  .break-safe { overflow-wrap: break-word; word-break: break-word; }\n\n  @media (max-width: 480px) {\n\n    .hero-tight { font-size: clamp(42px, 12vw, 48px) !important; }\n\n  }\n\n<\/style> <script>\n\n  const { useState, useMemo } = React;\n\n  const h = React.createElement;\n\n\n\n  const initialCases = [\n\n    { id: \"1\", no: \"CASE 01\", category: \"\u5976\u8336\u5e97\", title: \"\u8336\u5ba4\u00b7\u8857\u9053\u8f49\u89d2\u5e97\", location: \"\u6df1\u5733\u00b735\u33a1\" },\n\n    { id: \"2\", no: \"CASE 02\", category: \"\u5496\u5561\u5ef3\", title: \"COFFEE\u00b7\u6728\u8cea\u5496\u5561\u9928\", location: \"\u676d\u5dde\u00b780\u33a1\" },\n\n    { id: \"3\", no: \"CASE 03\", category: \"\u8fa6\u516c\u5ba4\", title: \"OFFICE\u00b7\u806f\u5408\u8fa6\u516c\u7a7a\u9593\", location: \"\u4e0a\u6d77\u00b7220\u33a1\" },\n\n    { id: \"4\", no: \"CASE 04\", category: \"\u96f6\u552e\u5e97\", title: \"RETAIL\u00b7\u9078\u7269\u5e97\u9673\u5217\", location: \"\u6210\u90fd\u00b760\u33a1\" }\n\n  ];\n\n\n\n  function App() {\n\n    const [cases, setCases] = useState(initialCases);\n\n    const [activeTag, setActiveTag] = useState(\"All\");\n\n    const [toast, setToast] = useState(\"\");\n\n\n\n    const showToast = (msg) => {\n\n      setToast(msg);\n\n      setTimeout(() => setToast(\"\"), 2200);\n\n    };\n\n\n\n    const categories = useMemo(() => {\n\n      return Array.from(new Set(cases.map((c) => c.category)));\n\n    }, [cases]);\n\n\n\n    const filteredCases = useMemo(() => {\n\n      if (activeTag === \"All\") return cases;\n\n      return cases.filter((c) => c.category === activeTag);\n\n    }, [cases, activeTag]);\n\n\n\n    const handleAddCase = () => {\n\n      const newCats = [\"\u5c55\u5ef3\", \"\u6c11\u5bbf\", \"\u9910\u5ef3\"];\n\n      const nextCat = newCats.find((cat) => !categories.includes(cat)) || \"\u5c55\u5ef3\";\n\n      const newCase = {\n\n        id: (cases.length + 1).toString(),\n\n        no: `CASE ${String(cases.length + 1).padStart(2, \"0\")}`,\n\n        category: nextCat,\n\n        title: nextCat === \"\u5c55\u5ef3\" ? \"GALLERY\u00b7\u85dd\u8853\u5c55\u5ef3\" : nextCat === \"\u6c11\u5bbf\" ? \"STAY\u00b7\u5c71\u9593\u6c11\u5bbf\" : \"REST\u00b7\u65e5\u5f0f\u5b9a\u98df\u5e97\",\n\n        location: \"\u65b0\u589e\u00b7\u6f14\u793a\"\n\n      };\n\n      setCases((prev) => [...prev, newCase]);\n\n      setActiveTag(nextCat);\n\n      showToast(`\u5df2\u65b0\u589e\u5206\u985e\u300c${nextCat}\u300d\u00b7\u6a19\u7c64\u81ea\u52d5\u66f4\u65b0`);\n\n    };\n\n\n\n    return h(\"div\", { className: \"w-full bg-white\" }, [\n\n      h(\"div\", { key: \"main\", className: \"w-full max-w-[1280px] mx-auto px-[16px] md:px-[24px] bg-[#FFFCF8] text-[#0F1A2E] selection:bg-black selection:text-white box-border relative\" }, [\n\n        toast && h(\"div\", { key: \"toast\", className: \"absolute bottom-[20px] left-1\/2 -translate-x-1\/2 z-[100] px-[18px] h-[40px] rounded-full bg-[#0F1A2E] text-white text-[12px] sans flex items-center justify-center shadow-lg max-w-[90%] text-center pointer-events-none\" }, toast),\n\n        \n\n        h(\"div\", { key: \"top-bar\", className: \"w-full box-border pt-[18px] pb-[6px] flex justify-between items-center min0\" }, [\n\n          h(\"div\", { key: \"tb-1\", className: \"text-[10px] tracking-[0.2em] sans text-[#0F1A2E]\/60 break-safe\" }, \"\u9996\u9801\"),\n\n          h(\"div\", { key: \"tb-2\", className: \"text-[10px] tracking-[0.12em] sans text-[#0F1A2E]\/30 break-safe\" }, \"HAOMU DESIGN \u00a9 2026\")\n\n        ]),\n\n\n\n        h(\"section\", { key: \"sec-1\", className: \"w-full box-border mt-[8px]\" }, [\n\n          h(\"div\", { key: \"nav\", className: \"w-full box-border border border-[#F0EDE8] bg-[#FFFBF6] rounded-[2px] flex flex-col md:flex-row md:items-center justify-between px-[14px] sm:px-[18px] md:px-[22px] py-[12px] md:py-0 md:h-[52px] gap-3 min0\" }, [\n\n            h(\"div\", { key: \"nav-left\", className: \"flex items-center gap-[12px] sm:gap-[18px] min0 flex-wrap\" }, [\n\n              h(\"div\", { key: \"logo\", className: \"serif font-black tracking-[-0.02em] text-[16px] leading-none shrink-0\" }, \"HAOMU DESIGN\"),\n\n              h(\"div\", { key: \"nav-txt\", className: \"hidden lg:flex items-center gap-2 text-[11px] tracking-[0.06em] sans text-[#0F1A2E]\/70 min0\" }, [\n\n                h(\"span\", { key: \"nt-1\", className: \"whitespace-nowrap\" }, \"\u5206\u4eab\u624b\u7e6a\u6559\u7a0b \u00d7 \u5546\u696d\u6848\u4f8b\"),\n\n                h(\"span\", { key: \"nt-2\", className: \"opacity-30\" }, \"|\"),\n\n                h(\"span\", { key: \"nt-3\", className: \"opacity-60\" }, \"haomusheji.com\")\n\n              ])\n\n            ]),\n\n            h(\"div\", { key: \"nav-right\", className: \"flex items-center justify-between md:justify-end gap-3 w-full md:w-auto min0 flex-wrap\" }, [\n\n              h(\"div\", { key: \"nr-lbl\", className: \"hidden md:block text-[10px] tracking-[0.18em] sans text-[#0F1A2E]\/50 mr-2 whitespace-nowrap\" }, \"TUTORIALS \u2014 DESIGN CASES\"),\n\n              h(\"div\", { key: \"nr-btns\", className: \"flex items-center gap-[10px] flex-wrap\" }, [\n\n                h(\"a\", { key: \"btn-wa\", href: \"https:\/\/wa.me\/19295283110\", target: \"_blank\", rel: \"noopener noreferrer\", className: \"cursor-pointer h-[32px] px-[14px] flex items-center justify-center border border-black rounded-full text-[11px] sans font-medium tracking-[0.02em] hover:bg-black hover:text-white active:bg-black active:text-white active:scale-[0.97] transition-all shrink-0\" }, \"WhatsApp \u8aee\u8a62\"),\n\n                h(\"a\", { key: \"btn-co\", href: \"#cases\", onClick: (e) => { e.preventDefault(); document.getElementById(\"cases\")?.scrollIntoView({ behavior: \"smooth\" }); }, className: \"cursor-pointer h-[32px] px-[14px] flex items-center justify-center border border-black rounded-full text-[11px] sans font-medium tracking-[0.02em] hover:bg-black hover:text-white active:bg-black active:text-white active:scale-[0.97] transition-all shrink-0\" }, \"\u8a2d\u8a08\u5408\u4f5c \u2192\")\n\n              ])\n\n            ])\n\n          ]),\n\n\n\n          h(\"div\", { key: \"hero-box\", className: \"w-full box-border mt-[14px] md:mt-[16px] border border-[#E8E0D3] bg-[#FFFCF8] flex flex-col lg:flex-row min0 overflow-hidden\" }, [\n\n            h(\"div\", { key: \"hero-left\", className: \"w-full lg:w-[60%] min-w-0 px-[18px] sm:px-[22px] md:px-[32px] lg:px-[36px] pt-[24px] sm:pt-[28px] md:pt-[36px] lg:pt-[42px] pb-[24px] sm:pb-[28px] md:pb-[36px] border-b lg:border-b-0 lg:border-r border-[#E8E0D3] flex flex-col justify-between min0 box-border\" }, [\n\n              h(\"div\", { key: \"hl-top\", className: \"min0\" }, [\n\n                h(\"div\", { key: \"hlt-sub\", className: \"flex items-center gap-3 text-[10px] tracking-[0.18em] sans text-[#0F1A2E]\/60 min0\" }, [\n\n                  h(\"span\", { key: \"hlts-1\", className: \"w-[28px] h-[1px] bg-[#0F1A2E]\/30 block shrink-0\" }),\n\n                  h(\"span\", { key: \"hlts-2\", className: \"break-safe\" }, \"\u2014 AI INTERIOR DESIGN \u00d7 HAND DRAWING\")\n\n                ]),\n\n                h(\"h1\", { key: \"hlt-title\", className: \"serif font-[900] clamp-hero hero-tight mt-[20px] sm:mt-[26px] text-[#0F1A2E] break-safe min0\" }, [\n\n                  h(\"span\", { key: \"hm\", className: \"block\" }, \"HAOMU\"),\n\n                  h(\"span\", { key: \"ds\", className: \"block\" }, \"DESIGN\")\n\n                ])\n\n              ]),\n\n              h(\"div\", { key: \"hl-bot\", className: \"mt-[28px] sm:mt-[36px] md:mt-[54px] flex flex-col sm:flex-row gap-[18px] sm:gap-[24px] md:gap-[36px] min0\" }, [\n\n                h(\"div\", { key: \"hlb-1\", className: \"text-[13px] sm:text-[14px] leading-[1.6] sans font-medium text-[#0F1A2E] min-w-0 sm:min-w-[190px] shrink-0 break-safe\" }, [\n\n                  h(\"div\", { key: \"b1\" }, \"01 \u5206\u4eab\u624b\u7e6a\u6559\u7a0b \/\"),\n\n                  h(\"div\", { key: \"b2\" }, \"\u8a2d\u8a08\u6848\u4f8b\u5206\u4eab \/\"),\n\n                  h(\"div\", { key: \"b3\" }, \"\u5546\u696d\u7a7a\u9593\u8a2d\u8a08\")\n\n                ]),\n\n                h(\"div\", { key: \"hlb-2\", className: \"text-[12px] sm:text-[12.5px] leading-[1.7] sans text-[#0F1A2E]\/60 max-w-[420px] min-w-0 break-safe\" }, \"\u5206\u4eab iPad \u5ba4\u5167\u624b\u7e6a\u6559\u7a0b\uff0c\u5f9e\u900f\u8996\u5230\u6750\u8cea\u4e00\u6b65\u4e00\u6b65\u6559\u3002\u6848\u4f8b\u5c55\u793a\u771f\u5be6\u8a2d\u8a08\u80fd\u529b\uff0c\u6709\u9805\u76ee\u9700\u6c42\u4e5f\u53ef\u4ee5\u76f4\u63a5\u806f\u7e6b\u5408\u4f5c\u3002\")\n\n              ])\n\n            ]),\n\n\n\n            h(\"div\", { key: \"hero-right\", className: \"w-full lg:w-[40%] min-w-0 bg-white p-[18px] sm:p-[22px] md:p-[28px] flex flex-col box-border\" }, [\n\n              h(\"div\", { key: \"hr-header\", className: \"flex justify-between items-center mb-[18px] sm:mb-[22px] min0\" }, [\n\n                h(\"div\", { key: \"hrh-1\", className: \"text-[10px] tracking-[0.18em] sans text-[#0F1A2E]\/50\" }, \"NEW DROP\"),\n\n                h(\"div\", { key: \"hrh-2\", className: \"px-[10px] h-[20px] rounded-full bg-[#F5EFE6] border border-[#E8E0D3] text-[10px] sans flex items-center shrink-0\" }, \"\u514d\u8cbb\")\n\n              ]),\n\n              h(\"h2\", { key: \"hr-title\", className: \"serif clamp-sub leading-[1.2] font-bold tracking-[-0.01em] text-[#0F1A2E] break-safe\" }, [\n\n                \"\u624b\u7e6a\u6559\u7a0b\u5206\u4eab\",\n\n                h(\"br\", { key: \"br\" }),\n\n                \"\u6301\u7e8c\u66f4\u65b0\u4e2d\"\n\n              ]),\n\n              h(\"p\", { key: \"hr-desc\", className: \"mt-[12px] sm:mt-[14px] text-[12px] leading-[1.7] sans text-[#0F1A2E]\/55 break-safe\" }, \"\u5f9e\u8d77\u7a3f\u3001\u900f\u8996\u3001\u7dda\u7a3f\u5230\u6750\u8cea\u8207\u5149\u5f71\uff0c\u514d\u8cbb\u5206\u4eab\u5be6\u7528\u7684\u5ba4\u5167\u624b\u7e6a\u65b9\u6cd5\uff0c\u8ddf\u8457\u6559\u7a0b\u4e00\u6b65\u4e00\u6b65\u5b8c\u6210\u4f5c\u54c1\u3002\"),\n\n              h(\"div\", { key: \"hr-actions\", className: \"mt-[20px] sm:mt-[26px] flex flex-col gap-[12px] min0\" }, [\n\n                h(\"a\", { key: \"act-1\", href: \"#cases\", onClick: (e) => { e.preventDefault(); document.getElementById(\"cases\")?.scrollIntoView({ behavior: \"smooth\" }); }, className: \"cursor-pointer w-full h-[46px] bg-[#0F1A2E] text-white rounded-full flex items-center justify-center text-[12px] tracking-[0.04em] sans font-medium hover:bg-black active:bg-black active:scale-[0.98] transition-all\" }, \"\u958b\u59cb\u5b78\u7fd2\u6559\u7a0b \u2192\"),\n\n                h(\"a\", { key: \"act-2\", href: \"#cases\", onClick: (e) => { e.preventDefault(); document.getElementById(\"cases\")?.scrollIntoView({ behavior: \"smooth\" }); }, className: \"cursor-pointer w-full h-[46px] bg-white border border-[#0F1A2E] rounded-full flex items-center justify-center text-[12px] tracking-[0.04em] sans font-medium hover:bg-[#F9F5EF] active:bg-[#F0E8D8] active:scale-[0.98] transition-all\" }, \"\u67e5\u770b\u8a2d\u8a08\u6848\u4f8b \u2192\")\n\n              ]),\n\n              h(\"div\", { key: \"hr-footer\", className: \"mt-auto pt-[24px] sm:pt-[28px] min0\" }, [\n\n                h(\"a\", { key: \"ig\", href: \"https:\/\/www.instagram.com\/haomusheji\", target: \"_blank\", rel: \"noopener noreferrer\", className: \"cursor-pointer w-full flex justify-between items-center border-t border-[#E8E0D3] pt-[14px] group\" }, [\n\n                  h(\"span\", { key: \"igt\", className: \"text-[10px] tracking-[0.18em] sans text-[#0F1A2E]\/70 group-hover:text-[#0F1A2E] transition-colors\" }, \"INSTAGRAM @haomusheji \u2192\"),\n\n                  h(\"span\", { key: \"iga\", className: \"text-[12px] group-hover:translate-x-1 transition-transform\" }, \"\u2197\")\n\n                ]),\n\n                h(\"div\", { key: \"tags\", className: \"mt-[14px] flex flex-wrap gap-3 text-[10px] tracking-[0.06em] sans text-[#0F1A2E]\/40\" }, [\n\n                  h(\"span\", { key: \"t1\" }, \"\u2022 \u514d\u8cbb\u6559\u7a0b\"),\n\n                  h(\"span\", { key: \"t2\" }, \"\u2022 \u5be6\u6230\u6848\u4f8b\"),\n\n                  h(\"span\", { key: \"t3\" }, \"\u2022 \u8a2d\u8a08\u5408\u4f5c\")\n\n                ])\n\n              ])\n\n            ])\n\n          ])\n\n        ]),\n\n\n\n        \/* \u5546\u696d\u6848\u4f8b\u8207\u53f3\u5074\u52d5\u614b\u6a19\u7c64 + \u8996\u983b\u7a97\u53e3\u5340\u584a *\/\n\n        h(\"section\", { key: \"sec-2\", id: \"cases\", className: \"w-full box-border mt-[24px] min0\" }, [\n\n          h(\"div\", { key: \"cases-box\", className: \"bg-[#F8F4EE] rounded-[20px] sm:rounded-[24px] border border-[#EDE6DB] p-[14px] sm:p-[18px] md:p-[28px] lg:p-[32px] xl:p-[40px] flex flex-col lg:flex-row gap-[20px] sm:gap-[28px] lg:gap-[40px] min0 box-border overflow-hidden\" }, [\n\n            h(\"div\", { key: \"cb-left\", className: \"w-full lg:w-[45%] xl:w-[42%] flex flex-col min-w-0 min0\" }, [\n\n              h(\"div\", { key: \"cbl-top\", className: \"text-[10px] tracking-[0.2em] sans text-[#0F1A2E]\/50\" }, \"02 CASES \/ PROJECTS\"),\n\n              h(\"h2\", { key: \"cbl-title\", className: \"serif mt-[14px] sm:mt-[18px] clamp-h2-mid leading-[1.2] font-bold text-[#0F1A2E] break-safe\" }, [\n\n                \"\u5546\u696d\u6848\u4f8b\u5206\u4eab \/\",\n\n                h(\"br\", { key: \"br2\" }),\n\n                \"\u8a2d\u8a08\u63a5\u55ae\"\n\n              ]),\n\n              h(\"p\", { key: \"cbl-desc\", className: \"mt-[14px] sm:mt-[16px] text-[13px] leading-[1.7] sans text-[#0F1A2E]\/60 max-w-[380px] break-safe min0\" }, \"\u771f\u5be6\u843d\u5730\u7684\u5546\u696d\u7a7a\u9593\uff1a\u5976\u8336\u5e97\u3001\u5496\u5561\u5ef3\u3001\u8fa6\u516c\u5ba4\u3001\u96f6\u552e\u5e97\u3002\u5206\u4eab\u5f9e\u6bdb\u576f\u5230\u843d\u5730\u5168\u904e\u7a0b\uff0c\u9760\u6848\u4f8b\u63a5\u8a2d\u8a08\u59d4\u8a17\u3002\"),\n\n              h(\"div\", { key: \"cbl-stats\", className: \"mt-[20px] sm:mt-[26px] border-y border-[#E5DDD0] py-[16px] sm:py-[18px] flex min0\" }, [\n\n                h(\"div\", { key: \"st-1\", className: \"flex-1 pr-[12px] sm:pr-[18px] min-w-0\" }, [\n\n                  h(\"div\", { key: \"st1-n\", className: \"serif text-[20px] sm:text-[22px] font-bold leading-none\" }, \"50+\"),\n\n                  h(\"div\", { key: \"st1-t\", className: \"mt-[6px] text-[10px] leading-[1.3] sans text-[#0F1A2E]\/60 break-safe\" }, \"\u5546\u696d\u7a7a\u9593\u843d\u5730\")\n\n                ]),\n\n                h(\"div\", { key: \"st-2\", className: \"flex-1 px-[12px] sm:px-[18px] border-l border-[#E5DDD0] min-w-0\" }, [\n\n                  h(\"div\", { key: \"st2-n\", className: \"serif text-[20px] sm:text-[22px] font-bold leading-none\" }, \"5\u5e74+\"),\n\n                  h(\"div\", { key: \"st2-t\", className: \"mt-[6px] text-[10px] leading-[1.3] sans text-[#0F1A2E]\/60 break-safe\" }, \"\u5546\u696d\u6848\u4f8b\u7d93\u9a57\")\n\n                ]),\n\n                h(\"div\", { key: \"st-3\", className: \"flex-1 pl-[12px] sm:pl-[18px] border-l border-[#E5DDD0] min-w-0\" }, [\n\n                  h(\"div\", { key: \"st3-n\", className: \"serif text-[20px] sm:text-[22px] font-bold leading-none\" }, \"10\u5206\"),\n\n                  h(\"div\", { key: \"st3-t\", className: \"mt-[6px] text-[10px] leading-[1.3] sans text-[#0F1A2E]\/60 break-safe\" }, \"\u6bdb\u576f\u8b8a\u6548\u679c\u5716\")\n\n                ])\n\n              ]),\n\n              h(\"div\", { key: \"cbl-btns\", className: \"mt-[18px] sm:mt-[22px] flex flex-wrap gap-[10px] sm:gap-[12px] min0\" }, [\n\n                h(\"a\", { key: \"cb-wa\", href: \"https:\/\/wa.me\/19295283110\", target: \"_blank\", rel: \"noopener noreferrer\", className: \"cursor-pointer h-[38px] px-[16px] sm:px-[18px] rounded-full bg-[#0F8A4D] text-white flex items-center gap-[8px] text-[12px] sans font-medium hover:bg-[#0c6d3d] active:bg-[#0a5a32] active:scale-[0.97] transition-all shrink-0\" }, [\n\n                  h(\"span\", { key: \"icon\", className: \"w-[18px] h-[18px] rounded-full bg-white text-[#0F8A4D] flex items-center justify-center text-[10px] font-bold shrink-0\" }, \"W\"),\n\n                  h(\"span\", { key: \"txt\", className: \"whitespace-nowrap\" }, \"WhatsApp \u5feb\u901f\u54a8\u8be2\")\n\n                ]),\n\n                h(\"a\", { key: \"cb-cases\", href: \"#cases\", onClick: (e) => { e.preventDefault(); showToast(`\u7576\u524d\u5206\u985e\u7be9\u9078\u51fa ${filteredCases.length} \u500b\u6848\u4f8b`); }, className: \"cursor-pointer h-[38px] px-[16px] sm:px-[18px] rounded-full bg-white border border-[#E8E0D3] flex items-center text-[12px] sans font-medium hover:bg-[#FFFBF6] active:bg-[#F5F1EB] active:scale-[0.97] transition-all shrink-0\" }, \"\u67e5\u770b\u6848\u4f8b \u2192\")\n\n              ]),\n\n              h(\"div\", { key: \"cbl-scroll\", className: \"hidden lg:block lg:mt-auto lg:pt-[40px]\" }, [\n\n                h(\"div\", { key: \"scr\", className: \"text-[10px] tracking-[0.12em] sans text-[#0F1A2E]\/30\" }, \"SCROLL FOR CASES \u2193\")\n\n              ])\n\n            ]),\n\n\n\n            \/* \u53f3\u5074\uff1a\u8ddf\u96a8\u6587\u7ae0\u5f8c\u53f0\u6a19\u7c64\u6539\u8b8a + \u9810\u7559\u4e00\u500b\u8996\u983b\u7a97\u53e3 *\/\n\n            h(\"div\", { key: \"cb-right\", className: \"w-full lg:w-[55%] xl:w-[58%] min-w-0 min0\" }, [\n\n              h(\"div\", { key: \"cbr-card\", className: \"bg-white rounded-[16px] sm:rounded-[20px] border border-[#EDE6DB] shadow-[0_8px_30px_rgba(15,26,46,0.04)] p-[12px] sm:p-[14px] md:p-[16px] min0 box-border overflow-hidden\" }, [\n\n                \n\n                \/* \u52d5\u614b\u6a19\u7c64\u6b04\uff08\u96a8\u5f8c\u53f0\u6587\u7ae0\u6a19\u7c64\/\u5206\u985e\u8b8a\u52d5\uff09 *\/\n\n                h(\"div\", { key: \"filter-bar\", className: \"flex items-center gap-[8px] min0 box-border max-w-full overflow-hidden\" }, [\n\n                  h(\"div\", { key: \"fb-inner\", className: \"flex items-center gap-[8px] flex-wrap pb-[2px] min0 max-w-full\" }, [\n\n                    h(\"button\", { key: \"all-btn\", onClick: () => { setActiveTag(\"All\"); showToast(\"\u986f\u793a\u5168\u90e8\u6848\u4f8b\"); }, className: `cursor-pointer h-[28px] px-[14px] rounded-full text-[11px] sans font-medium whitespace-nowrap transition-all flex-shrink-0 hover:opacity-90 active:scale-[0.96] ${activeTag === \"All\" ? \"bg-[#0F1A2E] text-white\" : \"bg-[#F0E8D8] text-[#0F1A2E]\/70 hover:bg-[#E8E0D3]\"}` }, \"All\"),\n\n                    categories.map((cat) => h(\"button\", { key: cat, onClick: () => { setActiveTag(cat); showToast(`\u5df2\u5207\u63db\u81f3\u300c${cat}\u300d`); }, className: `cursor-pointer h-[28px] px-[14px] rounded-full text-[11px] sans font-medium whitespace-nowrap transition-all flex-shrink-0 hover:opacity-90 active:scale-[0.96] ${activeTag === cat ? \"bg-[#0F1A2E] text-white\" : \"bg-[#F0E8D8] text-[#0F1A2E]\/70 hover:bg-[#E8E0D3]\"}` }, cat)),\n\n                    h(\"button\", { key: \"add-btn\", onClick: handleAddCase, className: \"cursor-pointer h-[28px] px-[14px] rounded-full text-[11px] sans font-medium whitespace-nowrap bg-[#F5F1EB] border border-dashed border-[#D8D0C2] text-[#0F1A2E]\/50 hover:text-[#0F1A2E] hover:border-[#0F1A2E]\/30 active:scale-[0.96] transition-all flex-shrink-0\", title: \"\u6f14\u793a\uff1a\u5f8c\u53f0\u7de8\u8f2f\u6a19\u7c64\u81ea\u52d5\u589e\u52a0\" }, \"+ Add Case\")\n\n                  ])\n\n                ]),\n\n\n\n                \/* \u9810\u7559\u4e00\u500b\u8996\u983b\u7a97\u53e3 *\/\n\n                h(\"div\", { key: \"video-container\", className: \"mt-[14px] relative w-full aspect-[16\/9] bg-[#0F1A2E] rounded-[14px] overflow-hidden flex flex-col items-center justify-center border border-black\/15 shadow-inner\" }, [\n\n                  h(\"div\", { key: \"vid-bg\", className: \"absolute inset-0 bg-gradient-to-br from-[#1a2c4e] to-[#0f1a2e] opacity-90\" }),\n\n                  h(\"div\", { key: \"play-btn\", className: \"relative z-10 w-14 h-14 rounded-full bg-white\/90 backdrop-blur text-[#0F1A2E] flex items-center justify-center shadow-lg hover:scale-105 transition-transform cursor-pointer mb-3\", onClick: () => showToast(\"\u6b63\u5728\u8f09\u5165\u6848\u4f8b\u5c55\u793a\u5f71\u7247...\") }, [\n\n                    h(\"span\", { key: \"tri\", className: \"ml-1 text-[18px]\" }, \"\u25b6\")\n\n                  ]),\n\n                  h(\"div\", { key: \"vid-txt\", className: \"relative z-10 text-center px-4\" }, [\n\n                    h(\"div\", { key: \"vt1\", className: \"text-white text-[13px] font-semibold tracking-wide sans\" }, `\u6b63\u5728\u5c55\u793a\uff1a${activeTag === \"All\" ? \"\u5168\u90e8\u5546\u696d\u6848\u4f8b\u7cbe\u9078\" : activeTag + \" \u5c08\u5c6c\u9805\u76ee\u89e3\u6790\"}`),\n\n                    h(\"div\", { key: \"vt2\", className: \"text-white\/60 text-[10px] sans mt-1\" }, `\u7b26\u5408\u689d\u4ef6\u6848\u4f8b\u6578\uff1a${filteredCases.length} \u500b \u00b7 \u9ede\u64ca\u64ad\u653e\u67e5\u770b\u7a7a\u9593\u52d5\u7dda\u8207\u6e32\u67d3\u5168\u666f`)\n\n                  ])\n\n                ]),\n\n\n\n                \/* \u5e95\u90e8\u72c0\u614b\u8207\u806f\u7e6b\u5217 *\/\n\n                h(\"div\", { key: \"cbr-bot\", className: \"mt-[12px] sm:mt-[14px] flex flex-col gap-[10px] sm:gap-[12px] min0\" }, [\n\n                  h(\"a\", { key: \"view-all\", href: \"#cases\", onClick: (e) => { e.preventDefault(); showToast(`\u7576\u524d\u5206\u985e\u5171\u6709 ${filteredCases.length} \u500b\u6848\u4f8b`); }, className: \"cursor-pointer w-full h-[40px] rounded-full bg-[#F5F1EB] border border-[#E8E0D3] text-[11px] sans text-[#0F1A2E]\/70 hover:bg-[#EFE8DB] active:bg-[#E8E0D3] active:scale-[0.99] transition-all flex items-center justify-center\" }, [`\u67e5\u770b\u5168\u90e8 ${filteredCases.length} \u500b\u6848\u4f8b \u2192`]),\n\n                  h(\"div\", { key: \"contact-strip\", className: \"w-full box-border rounded-full bg-[#FFFBF6] border border-[#E8E0D3] px-[10px] sm:px-[12px] py-[8px] sm:h-[48px] sm:py-0 flex flex-col sm:flex-row sm:items-center justify-between gap-2 min0\" }, [\n\n                    h(\"div\", { key: \"cs-l\", className: \"flex items-center gap-[10px] min0\" }, [\n\n                      h(\"div\", { key: \"csl-logo\", className: \"w-[28px] h-[28px] rounded-full bg-[#0F1A2E] text-white flex items-center justify-center serif text-[11px] font-bold shrink-0\" }, \"HM\"),\n\n                      h(\"div\", { key: \"csl-txt\", className: \"min0\" }, [\n\n                        h(\"div\", { key: \"csl-1\", className: \"text-[11px] sans font-medium leading-none\" }, \"\u806f\u7e6b\u63a5\u55ae\"),\n\n                        h(\"div\", { key: \"csl-2\", className: \"hidden sm:block text-[9px] sans text-[#0F1A2E]\/40 leading-none mt-[3px]\" }, \"\u6848\u4f8b\u9a45\u52d5\u3001\u9760\u5c08\u696d\u63a5\u59d4\u8a17\")\n\n                      ])\n\n                    ]),\n\n                    h(\"div\", { key: \"cs-r\", className: \"flex items-center gap-[8px] sm:gap-[10px] text-[10px] sans text-[#0F1A2E]\/60 min0 flex-wrap\" }, [\n\n                      h(\"a\", { key: \"cs-m\", href: \"mailto:design@haomusheji.com\", className: \"hover:text-[#0F1A2E] transition-colors break-all sm:break-normal\" }, \"design@haomusheji.com\"),\n\n                      h(\"span\", { key: \"cs-sep\", className: \"hidden sm:inline w-[1px] h-[12px] bg-[#E8E0D3] shrink-0\" }),\n\n                      h(\"a\", { key: \"cs-w\", href: \"https:\/\/wa.me\/19295283110\", target: \"_blank\", rel: \"noopener noreferrer\", className: \"hover:text-[#0F1A2E] transition-colors whitespace-nowrap\" }, \"+1 929 528 3110\")\n\n                    ])\n\n                  ])\n\n                ])\n\n              ])\n\n            ])\n\n          ]),\n\n\n\n          h(\"div\", { key: \"c-info\", className: \"mt-[10px] sm:mt-[12px] px-[4px] sm:px-[6px] flex flex-col sm:flex-row justify-between items-start sm:items-center gap-1 min0\" }, [\n\n            h(\"div\", { key: \"ci-1\", className: \"text-[9px] sm:text-[10px] sans text-[#0F1A2E]\/40 tracking-[0.04em] break-safe\" }, [`\u6a19\u7c64\u81ea\u52d5\u751f\u6210\u81ea\u5f8c\u53f0\u5206\u985e \u00b7 ${categories.length} \u500b\u5206\u985e \u00b7 ${cases.length} \u500b\u6848\u4f8b`]),\n\n            h(\"div\", { key: \"ci-2\", className: \"text-[9px] sm:text-[10px] sans text-[#0F1A2E]\/30 whitespace-nowrap\" }, \"DEMO: \u9ede\u64ca + Add Case \u81ea\u52d5\u65b0\u589e\u6a19\u7c64\")\n\n          ])\n\n        ]),\n\n\n\n        h(\"section\", { key: \"sec-3\", className: \"w-full box-border mt-[24px] mb-[24px] min0\" }, [\n\n          h(\"div\", { key: \"footer-box\", className: \"border border-[#E5E0D8] bg-[#FFFCF8] flex flex-col lg:flex-row min0 box-border overflow-hidden\" }, [\n\n            h(\"div\", { key: \"fb-left\", className: \"w-full lg:w-[65%] min-w-0 px-[18px] sm:px-[22px] md:px-[32px] pt-[22px] sm:pt-[28px] md:pt-[32px] pb-[20px] sm:pb-[24px] flex flex-col box-border min0\" }, [\n\n              h(\"h2\", { key: \"fbl-title\", className: \"serif clamp-h2 leading-[1.35] font-[700] text-[#0F1A2E] max-w-[520px] break-safe\" }, [\n\n                \"\u5148\u7528\u6559\u7a0b\u5b78\u6703\u624b\u7e6a\uff0c\",\n\n                h(\"br\", { key: \"br3\" }),\n\n                \"\u518d\u7528\u771f\u5be6\u6848\u4f8b\u770b\u61c2\u8a2d\u8a08\u3002\"\n\n              ]),\n\n              h(\"div\", { key: \"fbl-links\", className: \"mt-[18px] sm:mt-[22px] flex flex-wrap gap-[8px] sm:gap-[10px] min0\" }, [\n\n                h(\"a\", { key: \"fl-wa\", href: \"https:\/\/wa.me\/19295283110\", target: \"_blank\", rel: \"noopener noreferrer\", className: \"cursor-pointer h-[40px] px-[16px] sm:px-[18px] rounded-full bg-[#0F1A2E] text-white flex items-center text-[11px] sans tracking-[0.04em] font-medium hover:bg-black active:bg-black active:scale-[0.97] transition-all shrink-0\" }, \"WhatsApp \u8aee\u8a62\u5408\u4f5c\"),\n\n                h(\"a\", { key: \"fl-em\", href: \"mailto:design@haomusheji.com\", className: \"cursor-pointer h-[40px] px-[16px] sm:px-[18px] rounded-full bg-white border border-[#0F1A2E] flex items-center text-[11px] sans tracking-[0.04em] font-medium hover:bg-[#F9F5EF] active:bg-[#F0E8D8] active:scale-[0.97] transition-all shrink-0 break-all\" }, \"design@haomusheji.com\"),\n\n                h(\"span\", { key: \"fl-re\", className: \"h-[40px] px-[16px] sm:px-[18px] rounded-full bg-white border border-[#E5E0D8] flex items-center text-[11px] sans tracking-[0.12em] text-[#0F1A2E]\/60 shrink-0 whitespace-nowrap\" }, \"REMOTE \u00b7 WORLDWIDE\")\n\n              ]),\n\n              h(\"div\", { key: \"fbl-cols\", className: \"mt-[28px] sm:mt-[36px] grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[20px] sm:gap-[24px] border-t border-[#E5E0D8] pt-[18px] sm:pt-[22px] min0\" }, [\n\n                h(\"div\", { key: \"col-1\", className: \"min0\" }, [\n\n                  h(\"div\", { key: \"c1-t\", className: \"text-[10px] tracking-[0.18em] sans text-[#0F1A2E]\/40 mb-[8px] sm:mb-[10px]\" }, \"CONTACT\"),\n\n                  h(\"div\", { key: \"c1-v\", className: \"text-[11px] leading-[1.8] sans text-[#0F1A2E] break-safe\" }, [\n\n                    h(\"div\", { key: \"c1v-1\" }, h(\"a\", { href: \"https:\/\/wa.me\/19295283110\", target: \"_blank\", rel: \"noopener noreferrer\", className: \"hover:underline\" }, \"WhatsApp +1 929 528 3110\")),\n\n                    h(\"div\", { key: \"c1v-2\" }, h(\"a\", { href: \"mailto:design@haomusheji.com\", className: \"hover:underline break-all\" }, \"Email design@haomusheji.com\")),\n\n                    h(\"div\", { key: \"c1v-3\", className: \"text-[#0F1A2E]\/60\" }, \"wechat haomu_design\")\n\n                  ])\n\n                ]),\n\n                h(\"div\", { key: \"col-2\", className: \"min0\" }, [\n\n                  h(\"div\", { key: \"c2-t\", className: \"text-[10px] tracking-[0.18em] sans text-[#0F1A2E]\/40 mb-[8px] sm:mb-[10px]\" }, \"LOCATION\"),\n\n                  h(\"div\", { key: \"c2-v\", className: \"text-[11px] leading-[1.8] sans text-[#0F1A2E] break-safe\" }, [\n\n                    h(\"div\", { key: \"c2v-1\" }, \"\u5ba4\u5167\u8a2d\u8a08 \/ \u5546\u696d\u7a7a\u9593\"),\n\n                    h(\"div\", { key: \"c2v-2\", className: \"text-[#0F1A2E]\/60\" }, \"\u652f\u6301\u9060\u7a0b\u6e9d\u901a\"),\n\n                    h(\"div\", { key: \"c2v-3\", className: \"text-[#0F1A2E]\/60\" }, \"\u9805\u76ee\u5408\u4f5c\u53ef\u76f4\u63a5\u806f\u7e6b\")\n\n                  ])\n\n                ]),\n\n                h(\"div\", { key: \"col-3\", className: \"min0 sm:col-span-2 md:col-span-1\" }, [\n\n                  h(\"div\", { key: \"c3-t\", className: \"text-[10px] tracking-[0.18em] sans text-[#0F1A2E]\/40 mb-[8px] sm:mb-[10px]\" }, \"COPYRIGHT\"),\n\n                  h(\"div\", { key: \"c3-v\", className: \"text-[11px] leading-[1.8] sans text-[#0F1A2E]\/60 break-safe\" }, [\n\n                    h(\"div\", { key: \"c3v-1\" }, \"\u00a9 2026 HAOMU DESIGN\"),\n\n                    h(\"div\", { key: \"c3v-2\" }, \"\u624b\u7e6a\u6559\u7a0b \u00b7 \u8a2d\u8a08\u6848\u4f8b\"),\n\n                    h(\"div\", { key: \"c3v-3\" }, \"\u4fdd\u7559\u6240\u6709\u6b0a\u5229\")\n\n                  ])\n\n                ])\n\n              ])\n\n            ]),\n\n\n\n            h(\"div\", { key: \"fb-right\", className: \"w-full lg:w-[35%] min-w-0 border-t lg:border-t-0 lg:border-l border-[#E5E0D8] px-[18px] sm:px-[22px] md:px-[24px] pt-[16px] sm:pt-[18px] pb-[18px] sm:pb-[20px] flex flex-col bg-[#FFFBF6]\/50 box-border min0\" }, [\n\n              h(\"div\", { key: \"ads-top\", className: \"flex justify-between items-center min0\" }, [\n\n                h(\"div\", { key: \"at-1\", className: \"text-[10px] tracking-[0.18em] sans text-[#0F1A2E]\/40\" }, \"ADVERTISEMENT\"),\n\n                h(\"div\", { key: \"at-2\", className: \"px-[8px] h-[18px] rounded-[4px] border border-[#0F1A2E]\/20 text-[9px] tracking-[0.12em] sans flex items-center shrink-0\" }, \"ADSENSE\")\n\n              ]),\n\n              h(\"div\", { key: \"ads-box\", className: \"mt-[14px] sm:mt-[18px] bg-[#F5F1EB] border border-dashed border-[#E0D8C8] rounded-[12px] p-[14px] sm:p-[18px] min0 box-border\" }, [\n\n                h(\"div\", { key: \"ab-txt\", className: \"text-[11px] leading-[1.7] sans text-[#0F1A2E]\/50 break-safe\" }, [\n\n                  \"\u5ee3\u544a\u4f4d\",\n\n                  h(\"br\", { key: \"br4\" }),\n\n                  \"\u6b64\u8655\u70ba\u5ee3\u544a\u4f4d\uff0c\u7528\u65bc\u7db2\u7ad9\u5167\u5167\u5bb9\u8b8a\u73fe\u3002\",\n\n                  h(\"br\", { key: \"br5\" }),\n\n                  \"\u4fdd\u6301\u7559\u767d\uff0c\u4e0d\u5f71\u97ff\u6574\u9ad4\u95b1\u8b80\u9ad4\u9a57\u3002\"\n\n                ]),\n\n                h(\"div\", { key: \"ab-grid\", className: \"mt-[14px] sm:mt-[18px] grid grid-cols-3 gap-[6px] sm:gap-[8px] min0\" }, [\n\n                  h(\"div\", { key: \"ad1\", className: \"h-[48px] sm:h-[56px] bg-white border border-[#E8E0D3] rounded-[8px] flex items-center justify-center text-[10px] tracking-[0.12em] sans text-[#0F1A2E]\/30\" }, \"AD 1\"),\n\n                  h(\"div\", { key: \"ad2\", className: \"h-[48px] sm:h-[56px] bg-white border border-[#E8E0D3] rounded-[8px] flex items-center justify-center text-[10px] tracking-[0.12em] sans text-[#0F1A2E]\/30\" }, \"AD 2\"),\n\n                  h(\"div\", { key: \"ad3\", className: \"h-[48px] sm:h-[56px] bg-white border border-[#E8E0D3] rounded-[8px] flex items-center justify-center text-[10px] tracking-[0.12em] sans text-[#0F1A2E]\/30\" }, \"AD 3\")\n\n                ])\n\n              ]),\n\n              h(\"div\", { key: \"ads-bot\", className: \"mt-auto pt-[16px] sm:pt-[20px] flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 border-t border-[#E5E0D8] mt-[16px] sm:mt-[20px] min0\" }, [\n\n                h(\"div\", { key: \"ab-l\", className: \"text-[10px] sans text-[#0F1A2E]\/50 tracking-[0.02em] break-safe\" }, \"HAOMU DESIGN \/ \u624b\u7e6a\u6559\u7a0b\"),\n\n                h(\"button\", { key: \"ab-r\", onClick: () => window.scrollTo({ top: 0, behavior: \"smooth\" }), className: \"cursor-pointer text-[10px] sans text-[#0F1A2E]\/50 tracking-[0.04em] hover:text-[#0F1A2E] active:text-[#0F1A2E] transition-colors shrink-0\" }, \"\u56de\u5230\u9802\u90e8 \u2191\")\n\n              ])\n\n            ])\n\n          ])\n\n        ]),\n\n\n\n        h(\"div\", { key: \"bottom-gap\", className: \"h-[16px] sm:h-[20px]\" })\n\n      ])\n\n    ]);\n\n  }\n\n\n\n  ReactDOM.createRoot(document.getElementById(\"root\")).render(\n\n    h(React.StrictMode, null, h(App))\n\n  );\n\n<\/script><\/p>\n\n\n\n\n\n<p><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script> <style>\n\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700;800;900&family=Noto+Serif+SC:wght@700;900&family=Inter:wght@400;500;600&display=swap');\n\n  *, *::before, *::after { box-sizing: border-box; }\n\n  html, body { margin: 0; }\n\n  img { max-width: 100%; display: block; }\n\n  .serif { font-family: 'Playfair Display', 'Noto Serif SC', serif; }\n\n  .sans { font-family: 'Inter', -apple-system, sans-serif; }\n\n  \n\n  .custom-logo-wrap {\n\n    display: inline-flex;\n\n    flex-direction: column;\n\n    align-items: flex-start;\n\n    line-height: 1;\n\n  }\n\n  .custom-logo-main {\n\n    font-family: 'Inter', sans-serif;\n\n    font-weight: 900;\n\n    font-style: italic;\n\n    letter-spacing: -0.02em;\n\n    font-size: 19px;\n\n    color: #0F1A2E;\n\n  }\n\n  .custom-logo-sub {\n\n    font-family: 'Inter', sans-serif;\n\n    font-weight: 600;\n\n    font-size: 8.5px;\n\n    letter-spacing: 0.14em;\n\n    color: #0F1A2E;\n\n    opacity: 0.75;\n\n    margin-top: 2px;\n\n  }\n\n<\/style><\/p>\n\n<div class=\"w-full max-w-[1280px] mx-auto px-4 md:px-6 bg-[#FFFCF8] text-[#0F1A2E] selection:bg-black selection:text-white box-border font-sans\"><!-- \u9802\u90e8\u8cc7\u8a0a\u5217 -->\n\n<div class=\"w-full pt-4 pb-2 flex justify-between items-center text-[10px] tracking-[0.2em] text-[#0F1A2E]\/60\">\u9996\u9801HAOMU DESIGN \u00a9 2026<\/div>\n\n<!-- \u5c0e\u89bd\u5217 -->\n\n<div class=\"w-full border border-[#F0EDE8] bg-[#FFFBF6] rounded-[2px] flex flex-col md:flex-row md:items-center justify-between px-4 md:px-6 py-3 md:py-0 md:h-[64px] gap-3\">\n\n<div class=\"flex items-center gap-4 flex-wrap\">\n\n<div class=\"custom-logo-wrap\"><span class=\"custom-logo-main\">HAOMU<\/span> <span class=\"custom-logo-sub\">HAOMU\u8a2d\u8a08\/design<\/span><\/div>\n\n<div class=\"hidden lg:flex items-center gap-2 text-[11px] tracking-[0.06em] text-[#0F1A2E]\/70\">\u5206\u4eab\u624b\u7e6a\u6559\u7a0b \u00d7 \u5546\u696d\u6848\u4f8b<span class=\"opacity-30\">|<\/span> <span class=\"opacity-60\">haomusheji.com<\/span><\/div>\n\n<\/div>\n\n<div class=\"flex items-center justify-between md:justify-end gap-3 w-full md:w-auto\"><span class=\"hidden md:block text-[10px] tracking-[0.18em] text-[#0F1A2E]\/50 mr-2\">TUTORIALS \u2014 DESIGN CASES<\/span>\n\n<div class=\"flex items-center gap-2.5 flex-wrap\"><a class=\"h-[32px] px-4 flex items-center justify-center border border-black rounded-full text-[11px] font-medium hover:bg-black hover:text-white transition-all\" href=\"https:\/\/wa.me\/19295283110\" target=\"_blank\" rel=\"noopener noreferrer\">WhatsApp \u8aee\u8a62<\/a> <a class=\"h-[32px] px-4 flex items-center justify-center border border-black rounded-full text-[11px] font-medium hover:bg-black hover:text-white transition-all\" href=\"https:\/\/haomusheji.com\/?page_id=1361\">\u8a2d\u8a08\u5408\u4f5c \u2192<\/a><\/div>\n\n<\/div>\n\n<\/div>\n\n<!-- Hero \u5340\u584a -->\n\n<div class=\"w-full mt-4 border border-[#E8E0D3] bg-[#FFFCF8] flex flex-col lg:flex-row overflow-hidden\">\n\n<div class=\"w-full lg:w-[60%] px-5 md:px-9 pt-8 pb-8 border-b lg:border-b-0 lg:border-r border-[#E8E0D3] flex flex-col justify-between\">\n\n<div>\n\n<div class=\"flex items-center gap-3 text-[10px] tracking-[0.18em] text-[#0F1A2E]\/60\">\u2014 AI INTERIOR DESIGN \u00d7 HAND DRAWING<\/div>\n\n<h1 class=\"font-black text-[48px] sm:text-[78px] md:text-[92px] leading-[0.85] tracking-[-0.04em] mt-5 text-[#0F1A2E]\">HAOMU<br>DESIGN<\/h1>\n\n<\/div>\n\n<div class=\"mt-8 flex flex-col sm:flex-row gap-5\">\n\n<div class=\"text-[13px] leading-[1.6] font-medium text-[#0F1A2E] sm:w-[190px] shrink-0\">\n\n<div>01 \u5206\u4eab\u624b\u7e6a\u6559\u7a0b \/<\/div>\n\n<div>\u8a2d\u8a08\u6848\u4f8b\u5206\u4eab \/<\/div>\n\n<div>\u5546\u696d\u7a7a\u9593\u8a2d\u8a08<\/div>\n\n<\/div>\n\n<div class=\"text-[12px] leading-[1.7] text-[#0F1A2E]\/60 max-w-[420px]\">\u5206\u4eab iPad \u5ba4\u5167\u624b\u7e6a\u6559\u7a0b\uff0c\u5f9e\u900f\u8996\u5230\u6750\u8cea\u4e00\u6b65\u4e00\u6b65\u6559\u3002\u6848\u4f8b\u5c55\u793a\u771f\u5be6\u8a2d\u8a08\u80fd\u529b\uff0c\u6709\u9805\u76ee\u9700\u6c42\u4e5f\u53ef\u4ee5\u76f4\u63a5\u806f\u7e6b\u5408\u4f5c\u3002<\/div>\n\n<\/div>\n\n<\/div>\n\n<!-- \u53f3\u5074\u5361\u7247 (\u5df2\u52a0\u5165\u60a8\u6307\u5b9a\u7684\u6559\u7a0b\u8207\u6848\u4f8b\u93c8\u63a5) -->\n\n<div class=\"w-full lg:w-[40%] bg-white p-5 md:p-7 flex flex-col justify-between\">\n\n<div>\n\n<div class=\"flex justify-between items-center mb-5\"><span class=\"text-[10px] tracking-[0.18em] text-[#0F1A2E]\/50\">NEW DROP<\/span> <span class=\"px-2.5 h-5 rounded-full bg-[#F5EFE6] border border-[#E8E0D3] text-[10px] flex items-center\">\u514d\u8cbb<\/span><\/div>\n\n<h2 class=\"text-[24px] sm:text-[28px] leading-[1.2] font-bold tracking-[-0.01em] text-[#0F1A2E]\">\u624b\u7e6a\u6559\u7a0b\u5206\u4eab<br>\u6301\u7e8c\u66f4\u65b0\u4e2d<\/h2>\n\n<p class=\"mt-3 text-[12px] leading-[1.7] text-[#0F1A2E]\/55\">\u5f9e\u8d77\u7a3f\u3001\u900f\u8996\u3001\u7dda\u7a3f\u5230\u6750\u8cea\u8207\u5149\u5f71\uff0c\u514d\u8cbb\u5206\u4eab\u5be6\u7528\u7684\u5ba4\u5167\u624b\u7e6a\u65b9\u6cd5\uff0c\u8ddf\u8457\u6559\u7a0b\u4e00\u6b65\u4e00\u6b65\u5b8c\u6210\u4f5c\u54c1\u3002<\/p>\n\n<div class=\"mt-6 flex flex-col gap-3\"><a class=\"w-full h-[46px] bg-[#0F1A2E] text-white rounded-full flex items-center justify-center text-[12px] font-medium hover:bg-black transition-all\" href=\"https:\/\/haomusheji.com\/?page_id=1191\" target=\"_blank\" rel=\"noopener\">\u958b\u59cb\u5b78\u7fd2\u6559\u7a0b \u2192<\/a> <a class=\"w-full h-[46px] bg-white border border-[#0F1A2E] rounded-full flex items-center justify-center text-[12px] font-medium hover:bg-[#F9F5EF] transition-all\" href=\"https:\/\/haomusheji.com\/?page_id=1361\" target=\"_blank\" rel=\"noopener\">\u67e5\u770b\u8a2d\u8a08\u6848\u4f8b \u2192<\/a><\/div>\n\n<\/div>\n\n<div class=\"mt-8 pt-6 border-t border-[#E8E0D3]\"><a class=\"flex justify-between items-center text-[10px] tracking-[0.18em] text-[#0F1A2E]\/70 hover:text-[#0F1A2E]\" href=\"https:\/\/www.instagram.com\/haomudesign\" target=\"_blank\" rel=\"noopener noreferrer\">INSTAGRAM @haomusheji \u2197<\/a><\/div>\n\n<\/div>\n\n<\/div>\n\n<!-- \u5546\u696d\u6848\u4f8b\u8207\u8996\u983b\u7a97\u53e3\u5340\u584a -->\n\n<section id=\"cases\" class=\"w-full mt-6\">\n\n<div class=\"bg-[#F8F4EE] rounded-[24px] border border-[#EDE6DB] p-4 md:p-10 flex flex-col lg:flex-row gap-8\">\n\n<div class=\"w-full lg:w-[42%] flex flex-col justify-between\">\n\n<div>\n\n<div class=\"text-[10px] tracking-[0.2em] text-[#0F1A2E]\/50\">02 CASES \/ PROJECTS<\/div>\n\n<h2 class=\"text-[28px] font-bold text-[#0F1A2E] mt-3\">\u5546\u696d\u6848\u4f8b\u5206\u4eab \/<br>\u8a2d\u8a08\u63a5\u55ae<\/h2>\n\n<p class=\"text-[13px] leading-[1.7] text-[#0F1A2E]\/60 mt-3\">\u771f\u5be6\u843d\u5730\u7684\u5546\u696d\u7a7a\u9593\uff1a\u5976\u8336\u5e97\u3001\u5496\u5561\u5ef3\u3001\u8fa6\u516c\u5ba4\u3001\u96f6\u552e\u5e97\u3002\u5206\u4eab\u5f9e\u6bdb\u576f\u5230\u843d\u5730\u5168\u904e\u7a0b\uff0c\u9760\u6848\u4f8b\u63a5\u8a2d\u8a08\u59d4\u8a17\u3002<\/p>\n\n<div class=\"mt-6 border-y border-[#E5DDD0] py-4 flex gap-6\">\n\n<div>\n\n<div class=\"text-[20px] font-bold\">50+<\/div>\n\n<div class=\"text-[10px] text-[#0F1A2E]\/60 mt-1\">\u5546\u696d\u7a7a\u9593\u843d\u5730<\/div>\n\n<\/div>\n\n<div>\n\n<div class=\"text-[20px] font-bold\">5\u5e74+<\/div>\n\n<div class=\"text-[10px] text-[#0F1A2E]\/60 mt-1\">\u5546\u696d\u6848\u4f8b\u7d93\u9a57<\/div>\n\n<\/div>\n\n<div>\n\n<div class=\"text-[20px] font-bold\">10\u5206<\/div>\n\n<div class=\"text-[10px] text-[#0F1A2E]\/60 mt-1\">\u6bdb\u576f\u8b8a\u6548\u679c\u5716<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<div class=\"mt-6 flex flex-wrap gap-3\"><a class=\"h-[38px] px-4 rounded-full bg-[#0F8A4D] text-white flex items-center gap-2 text-[12px] font-medium hover:bg-[#0c6d3d] transition-all\" href=\"https:\/\/wa.me\/19295283110\" target=\"_blank\" rel=\"noopener noreferrer\"> <span class=\"w-4 h-4 rounded-full bg-white text-[#0F8A4D] flex items-center justify-center text-[9px] font-bold\">W<\/span> WhatsApp \u5feb\u901f\u54a8\u8be2 <\/a> <a class=\"h-[38px] px-4 rounded-full bg-white border border-[#E8E0D3] flex items-center text-[12px] font-medium hover:bg-[#FFFBF6] transition-all\" href=\"https:\/\/haomusheji.com\/?page_id=1361\">\u67e5\u770b\u6848\u4f8b \u2192<\/a><\/div>\n\n<\/div>\n\n<!-- \u53f3\u5074\uff1a\u8ddf\u96a8\u6a19\u7c64\u8207\u9810\u7559\u8996\u983b\u7a97\u53e3 -->\n\n<div class=\"w-full lg:w-[58%] bg-white rounded-[20px] border border-[#EDE6DB] p-4 flex flex-col justify-between shadow-sm\">\n\n<div><!-- \u6a19\u7c64\u6b04 -->\n\n<div class=\"flex items-center gap-2 flex-wrap pb-2\">\u8a2d\u8a08\u6848\u4f8b\u5c55\u793a<\/div>\n\n<!-- \u8996\u983b\u7a97\u53e3\u9810\u7559 -->\n\n<div class=\"mt-3 relative w-full aspect-[16\/9] bg-[#0F1A2E] rounded-[14px] overflow-hidden flex flex-col items-center justify-center border border-black\/15 shadow-inner\">\n\n<div class=\"absolute inset-0 bg-gradient-to-br from-[#1a2c4e] to-[#0f1a2e] opacity-90\"> <\/div>\n\n<video src=\"https:\/\/haomusheji.com\/wp-content\/uploads\/2026\/08\/8\u670824\u65e5-2.mp4\" poster=\"https:\/\/haomusheji.com\/wp-content\/uploads\/2026\/08\/8a197b37-3b08-412c-a52a-2.jpg\" controls autoplay muted loop style=\"position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;\"><\/video>\n\n<\/div>\n\n<\/div>\n\n<div class=\"mt-4 pt-3 border-t border-[#EDE6DB] flex flex-col sm:flex-row justify-between items-center gap-2\"><a class=\"w-full h-[36px] rounded-full bg-[#F5F1EB] border border-[#E8E0D3] text-[11px] text-[#0F1A2E]\/70 flex items-center justify-center hover:bg-[#EFE8DB] transition-all\" href=\"https:\/\/haomusheji.com\/?page_id=1361\" target=\"_blank\" rel=\"noopener\">\u67e5\u770b\u5168\u90e8\u6848\u4f8b \u2192<\/a><\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<!-- \u5e95\u90e8 Footer \u5340\u584a -->\n\n<section class=\"w-full mt-6 mb-6\">\n\n<div class=\"border border-[#E5E0D8] bg-[#FFFCF8] flex flex-col lg:flex-row overflow-hidden rounded-[4px]\">\n\n<div class=\"w-full lg:w-[65%] px-6 md:px-8 pt-8 pb-6 flex flex-col justify-between border-b lg:border-b-0 lg:border-r border-[#E5E0D8]\">\n\n<div>\n\n<h2 class=\"text-[24px] md:text-[32px] leading-[1.3] font-bold text-[#0F1A2E]\">\u5148\u7528\u6559\u7a0b\u5b78\u6703\u624b\u7e6a\uff0c<br>\u518d\u7528\u771f\u5be6\u6848\u4f8b\u770b\u61c2\u8a2d\u8a08\u3002<\/h2>\n\n<div class=\"mt-6 flex flex-wrap gap-3\"><a class=\"h-10 px-5 rounded-full bg-[#0F1A2E] text-white flex items-center text-[12px] font-medium hover:bg-black transition-all\" href=\"https:\/\/wa.me\/19295283110\" target=\"_blank\" rel=\"noopener noreferrer\">WhatsApp \u8aee\u8a62\u5408\u4f5c<\/a> <a class=\"h-10 px-5 rounded-full bg-white border border-[#0F1A2E] flex items-center text-[12px] font-medium hover:bg-[#F9F5EF] transition-all\" href=\"https:\/\/haomusheji.com\/?page_id=1361\">design@haomusheji.com<\/a><\/div>\n\n<\/div>\n\n<div class=\"mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6 border-t border-[#E5E0D8] pt-6 text-[11px] leading-[1.8] text-[#0F1A2E]\/70\">\n\n<div>\n\n<div class=\"text-[10px] tracking-[0.18em] text-[#0F1A2E]\/40 mb-2 font-bold\">CONTACT<\/div>\n\n<div>WhatsApp: +1 929-528-3110<br>Email: design@haomusheji.com<\/div>\n\n<\/div>\n\n<div>\n\n<div class=\"text-[10px] tracking-[0.18em] text-[#0F1A2E]\/40 mb-2 font-bold\">LOCATION<\/div>\n\n<div>\u5ba4\u5167\u8a2d\u8a08 \/ \u5546\u696d\u7a7a\u9593<br>\u652f\u63f4\u9060\u7a0b\u6e9d\u901a<\/div>\n\n<\/div>\n\n<div>\n\n<div class=\"text-[10px] tracking-[0.18em] text-[#0F1A2E]\/40 mb-2 font-bold\">COPYRIGHT<\/div>\n\n<div>\u00a9 2026 HAOMU\u8a2d\u8a08<br>\u4fdd\u7559\u6240\u6709\u6b0a\u5229<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<!-- \u53f3\u5074\u5ee3\u544a\u4f4d -->\n\n<div class=\"w-full lg:w-[35%] p-6 bg-[#FFFBF6]\/50 flex flex-col justify-between\">\n\n<div>\n\n<div class=\"flex justify-between items-center text-[10px] tracking-[0.18em] text-[#0F1A2E]\/40 mb-3\">ADVERTISEMENT<span class=\"border border-[#0F1A2E]\/20 px-1.5 py-0.5 rounded text-[9px]\">ADSENSE<\/span><\/div>\n\n<div class=\"bg-[#F5F1EB] border border-dashed border-[#E0D8C8] rounded-[12px] p-4 text-[11px] text-[#0F1A2E]\/50\"> <\/div>\n\n<\/div>\n\n<div class=\"mt-6 pt-4 border-t border-[#E5E0D8] flex justify-between items-center text-[10px] text-[#0F1A2E]\/50\">HAOM\u8a2d\u8a08<strong><a class=\"hover:underline\" href=\"#\">\u56de\u5230\u9802\u90e8 \u2191<\/a><\/strong><\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/div>\n\n\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\n\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9996\u9801HAOMU DESIGN \u00a9 202 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1503","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/haomusheji.com\/index.php?rest_route=\/wp\/v2\/pages\/1503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/haomusheji.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/haomusheji.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/haomusheji.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haomusheji.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1503"}],"version-history":[{"count":54,"href":"https:\/\/haomusheji.com\/index.php?rest_route=\/wp\/v2\/pages\/1503\/revisions"}],"predecessor-version":[{"id":1567,"href":"https:\/\/haomusheji.com\/index.php?rest_route=\/wp\/v2\/pages\/1503\/revisions\/1567"}],"wp:attachment":[{"href":"https:\/\/haomusheji.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}