Files
frontend-miniapp/docs/Benchmark/generated-guide-designs-h5-home-hi-fi/01-h5-home-high-fidelity.svg
lyf 8fed715235
Some checks failed
CI / verify (push) Has been cancelled
chore: sync latest project updates
2026-07-03 14:42:38 +08:00

183 lines
15 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
<defs>
<linearGradient id="pageBg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#FBFCFD"/><stop offset="1" stop-color="#F4F6F7"/>
</linearGradient>
<linearGradient id="mapSky" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#FFFFFF"/><stop offset="0.36" stop-color="#F1F6F8"/><stop offset="1" stop-color="#E7EEF1"/>
</linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#FFFFFF"/><stop offset="0.62" stop-color="#EFF4F6"/><stop offset="1" stop-color="#DDE7EC"/>
</linearGradient>
<linearGradient id="wallRight" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#CED9E0"/><stop offset="1" stop-color="#AEBCC5"/>
</linearGradient>
<linearGradient id="wallLeft" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#E2EAEE"/><stop offset="1" stop-color="#C3D0D8"/>
</linearGradient>
<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#DFF2FA" stop-opacity=".72"/><stop offset="1" stop-color="#A8D2E7" stop-opacity=".58"/>
</linearGradient>
<linearGradient id="garden" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#E5F2E8"/><stop offset="1" stop-color="#CFE7D8"/>
</linearGradient>
<radialGradient id="pinGlow" cx="50%" cy="70%" r="50%">
<stop offset="0" stop-color="#2C854F" stop-opacity=".36"/><stop offset="1" stop-color="#2C854F" stop-opacity="0"/>
</radialGradient>
<filter id="cardShadow" x="-30%" y="-30%" width="160%" height="170%">
<feDropShadow dx="0" dy="10" stdDeviation="11" flood-color="#0B1820" flood-opacity=".13"/>
</filter>
<filter id="softShadow" x="-30%" y="-30%" width="160%" height="170%">
<feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#0B1820" flood-opacity=".12"/>
</filter>
<filter id="tinyShadow" x="-40%" y="-40%" width="180%" height="190%">
<feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#0B1820" flood-opacity=".13"/>
</filter>
<filter id="mapDepth" x="-20%" y="-20%" width="150%" height="150%">
<feDropShadow dx="9" dy="14" stdDeviation="8" flood-color="#6D7E88" flood-opacity=".22"/>
</filter>
<clipPath id="mapClip"><rect x="14" y="91" width="362" height="662" rx="19"/></clipPath>
<style>
.font{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',Arial,sans-serif}.black{fill:#000}.text{fill:#3F3F3F}.muted{fill:#ADB0B4}.green{fill:#2C854F}.lime{fill:#E0DF00}.bold{font-weight:700}.heavy{font-weight:800}.panel{fill:#FFFFFF;fill-opacity:.9;stroke:#D9D9D9;stroke-width:1}.glassPanel{fill:#FFFFFF;fill-opacity:.82;stroke:#D9D9D9;stroke-width:1}.label{fill:#FFFFFF;stroke:#D9D9D9;stroke-width:1}.line{stroke:#D9D9D9;stroke-width:1}.facility{fill:#FFFFFF;fill-opacity:.92;stroke:#D9D9D9;stroke-width:1}.roof{fill:url(#roof);stroke:#D3DEE4;stroke-width:1.4}.leftWall{fill:url(#wallLeft);stroke:#B8C7D0;stroke-width:.7}.rightWall{fill:url(#wallRight);stroke:#9EAFB9;stroke-width:.7}.mini{font-size:10px}.small{font-size:12px}.body{font-size:14px}
</style>
</defs>
<rect width="390" height="844" fill="url(#pageBg)"/>
<rect x="0" y="0" width="390" height="844" fill="#F9FAFB" opacity=".68"/>
<text x="18" y="62" class="font black heavy" font-size="36" letter-spacing="0">导览</text>
<g class="font bold" font-size="17">
<text x="306" y="55" class="green">来馆</text>
<path d="M358 42 L366 50 L358 58" fill="none" stroke="#2C854F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g clip-path="url(#mapClip)">
<rect x="14" y="91" width="362" height="662" rx="19" fill="url(#mapSky)"/>
<path d="M-20 204 C90 174 160 130 265 124 C356 119 425 150 446 213 L446 91 L-20 91 Z" fill="#FFFFFF" opacity=".58"/>
<circle cx="305" cy="178" r="105" fill="#2C854F" opacity=".055"/>
<circle cx="82" cy="642" r="118" fill="#1B6EC0" opacity=".045"/>
<path d="M-16 260 L405 168" stroke="#BFD8E4" stroke-width="15" opacity=".45"/>
<path d="M-5 724 L408 628" stroke="#BFD8E4" stroke-width="15" opacity=".38"/>
<path d="M-10 266 L405 174" stroke="#F8FCFD" stroke-width="7" opacity=".8"/>
<path d="M0 730 L408 635" stroke="#F8FCFD" stroke-width="7" opacity=".74"/>
<g transform="translate(-3 104) rotate(-18 198 310)" filter="url(#mapDepth)">
<g opacity=".98">
<polygon points="126,68 302,68 302,151 126,151" class="rightWall" transform="translate(10 16)"/>
<polygon points="126,68 302,68 302,151 126,151" class="roof"/>
<polygon points="151,83 277,83 277,133 151,133" fill="url(#garden)" stroke="#C9E3D1"/>
<g opacity=".48" stroke="#9EC0A9" stroke-width="1"><path d="M170 125 c10 -18 16 -24 31 -33"/><path d="M206 126 c13 -20 26 -30 48 -36"/><path d="M226 132 c15 -13 25 -20 40 -22"/></g>
<polygon points="50,164 244,164 244,279 50,279" class="leftWall" transform="translate(10 16)"/>
<polygon points="50,164 244,164 244,279 50,279" class="roof"/>
<polygon points="72,187 221,187 221,255 72,255" fill="#F9FBFC" stroke="#E1E8EC"/>
<polygon points="266,172 431,172 431,278 266,278" class="rightWall" transform="translate(10 16)"/>
<polygon points="266,172 431,172 431,278 266,278" class="roof"/>
<polygon points="292,190 407,190 407,255 292,255" fill="url(#garden)" stroke="#C9E3D1"/>
<path d="M181 245 Q227 182 274 245 L274 430 L181 430 Z" fill="#F8FBFC" stroke="#CBD7DE" stroke-width="1.4"/>
<path d="M199 265 Q226 227 254 266 L254 406 L199 406 Z" fill="#EDF4F7" stroke="#D5E0E6"/>
<path d="M204 272 Q226 242 248 272" fill="none" stroke="#B9CBD5" stroke-width="3" opacity=".45"/>
<polygon points="132,309 285,309 285,438 132,438" class="leftWall" transform="translate(10 16)"/>
<polygon points="132,309 285,309 285,438 132,438" class="roof"/>
<polygon points="157,333 262,333 262,413 157,413" fill="#FFFFFF" stroke="#E2E9ED"/>
<polygon points="296,336 466,336 466,452 296,452" class="rightWall" transform="translate(10 16)"/>
<polygon points="296,336 466,336 466,452 296,452" class="roof"/>
<polygon points="320,358 438,358 438,430 320,430" fill="url(#garden)" stroke="#C9E3D1"/>
<polygon points="42,437 238,437 238,540 42,540" class="leftWall" transform="translate(10 16)"/>
<polygon points="42,437 238,437 238,540 42,540" class="roof"/>
<polygon points="65,460 215,460 215,515 65,515" fill="#FFFFFF" stroke="#E2E9ED"/>
<polygon points="178,448 230,448 230,664 178,664" fill="#FFFFFF" stroke="#D4DEE4" stroke-width="1.3"/>
<polygon points="240,443 282,443 282,664 240,664" fill="#FFFFFF" stroke="#D4DEE4" stroke-width="1.3"/>
<g stroke="#C8D5DD" stroke-width="1" opacity=".7"><path d="M190 476 h26 M190 510 h26 M190 544 h26 M190 578 h26 M252 474 h18 M252 508 h18 M252 542 h18 M252 576 h18"/></g>
<rect x="310" y="80" width="78" height="24" rx="2" fill="url(#glass)" transform="rotate(0)"/>
<rect x="86" y="574" width="112" height="20" rx="2" fill="url(#glass)" opacity=".6"/>
</g>
<g opacity=".55">
<circle cx="178" cy="105" r="4" fill="#8AB999"/><circle cx="198" cy="98" r="5" fill="#8AB999"/><circle cx="218" cy="114" r="4" fill="#8AB999"/><circle cx="352" cy="220" r="5" fill="#8AB999"/><circle cx="378" cy="238" r="4" fill="#8AB999"/><circle cx="355" cy="397" r="5" fill="#8AB999"/><circle cx="383" cy="404" r="4" fill="#8AB999"/>
</g>
</g>
<g opacity=".26" fill="none" stroke="#56636B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M292 279 c18 -12 38 -10 48 2 c-14 -3 -28 -1 -41 7"/>
<path d="M300 286 l-18 10 l20 3 l-10 15 M314 287 l8 16 l18 8 M330 284 l16 -8 M337 281 l15 2"/>
</g>
</g>
<rect x="14" y="91" width="362" height="662" rx="19" fill="none" stroke="#D9D9D9"/>
<g filter="url(#softShadow)">
<rect x="24" y="104" width="342" height="43" rx="12" class="glassPanel"/>
<circle cx="45" cy="125" r="8.5" fill="none" stroke="#565A5E" stroke-width="2.2"/>
<path d="M51.5 132 L59 139" stroke="#565A5E" stroke-width="2.2" stroke-linecap="round"/>
<text x="74" y="131" class="font muted" font-size="14">搜索展厅、设施或地点</text>
<path d="M338 117 a7 7 0 0 1 14 0 v8 a7 7 0 0 1 -14 0z M345 135 v8 M339 143 h12" fill="none" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round"/>
</g>
<g filter="url(#tinyShadow)">
<rect x="24" y="158" width="122" height="34" rx="11" class="glassPanel"/>
<rect x="27" y="161" width="58" height="28" rx="8" fill="#000"/>
<text x="44" y="180" class="font lime bold" font-size="14">地图</text>
<text x="105" y="180" class="font text" font-size="14">列表</text>
</g>
<g filter="url(#tinyShadow)">
<rect x="25" y="209" width="75" height="34" rx="10" class="facility"/>
<g stroke="#3F3F3F" stroke-width="1.8" fill="none"><rect x="38" y="219" width="7" height="7" rx="1"/><rect x="51" y="219" width="7" height="7" rx="1"/><rect x="38" y="231" width="7" height="7" rx="1"/><rect x="51" y="231" width="7" height="7" rx="1"/></g>
<text x="66" y="231" class="font text bold" font-size="13">图例</text>
</g>
<g filter="url(#tinyShadow)">
<g transform="translate(25 254)"><rect width="38" height="38" rx="12" class="facility"/><text x="19" y="25" text-anchor="middle" class="font green heavy" font-size="18">i</text><text x="19" y="55" text-anchor="middle" class="font black bold mini">服务台</text></g>
<g transform="translate(104 254)"><rect width="38" height="38" rx="12" class="facility"/><path d="M17 25 V14 M17 14 l-5 5 M17 14 l5 5 M23 13 v14" stroke="#2C854F" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><text x="19" y="55" text-anchor="middle" class="font black bold mini">电梯</text></g>
<g transform="translate(183 254)"><rect width="38" height="38" rx="12" class="facility"/><path d="M11 25 c5 -2 7 -7 11 -12 c2 -3 5 -3 7 0 M13 29 c6 -2 9 -8 14 -14" stroke="#2C854F" stroke-width="2" fill="none" stroke-linecap="round"/><text x="19" y="55" text-anchor="middle" class="font black bold mini">扶梯</text></g>
<g transform="translate(262 254)"><rect width="38" height="38" rx="12" class="facility"/><text x="19" y="24" text-anchor="middle" class="font green heavy" font-size="12">WC</text><text x="19" y="55" text-anchor="middle" class="font black bold mini">洗手间</text></g>
<g transform="translate(329 254)"><rect width="38" height="38" rx="12" class="facility"/><path d="M13 26 H25 M22 17 l7 7 l-7 7" stroke="#2C854F" stroke-width="2.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/><text x="19" y="55" text-anchor="middle" class="font black bold mini">出入口</text></g>
</g>
<g filter="url(#softShadow)">
<rect x="75" y="323" width="107" height="47" rx="10" class="label"/>
<path d="M128 370 l-10 10 h20 z" fill="#fff" stroke="#D9D9D9" stroke-width="1"/>
<text x="128.5" y="343" text-anchor="middle" class="font black" font-size="13">地球演化厅</text><text x="128.5" y="360" text-anchor="middle" class="font black" font-size="12">1F-03</text>
<rect x="217" y="346" width="120" height="52" rx="10" class="label"/>
<text x="277" y="367" text-anchor="middle" class="font black bold" font-size="15">恐龙化石展厅</text><text x="277" y="386" text-anchor="middle" class="font black" font-size="14">1F-02</text>
<ellipse cx="276" cy="348" rx="35" ry="16" fill="url(#pinGlow)"/>
<path d="M276 294 C257 294 245 308 245 325 C245 349 276 371 276 371 C276 371 307 349 307 325 C307 308 295 294 276 294 Z" fill="#2C854F"/>
<circle cx="276" cy="323" r="10.5" fill="#FFFFFF"/>
<rect x="235" y="491" width="121" height="48" rx="10" class="label"/><path d="M296 491 l-10 -10 h20 z" fill="#fff" stroke="#D9D9D9" stroke-width="1"/><text x="295.5" y="512" text-anchor="middle" class="font black" font-size="13">生命起源区</text><text x="295.5" y="529" text-anchor="middle" class="font black" font-size="12">1F-05</text>
<rect x="48" y="575" width="126" height="48" rx="10" class="label"/><path d="M111 575 l-10 -10 h20 z" fill="#fff" stroke="#D9D9D9" stroke-width="1"/><text x="111" y="596" text-anchor="middle" class="font black" font-size="13">矿物与岩石厅</text><text x="111" y="613" text-anchor="middle" class="font black" font-size="12">1F-04</text>
<rect x="254" y="647" width="88" height="48" rx="10" class="label"/><path d="M298 647 l-9 -9 h18 z" fill="#fff" stroke="#D9D9D9" stroke-width="1"/><text x="298" y="668" text-anchor="middle" class="font black" font-size="13">1号展厅</text><text x="298" y="685" text-anchor="middle" class="font black" font-size="12">1F-01</text>
</g>
<g class="font" filter="url(#tinyShadow)">
<text x="174" y="663" text-anchor="middle" class="green bold" font-size="20"></text><text x="174" y="684" text-anchor="middle" class="black" font-size="13">主入口</text>
</g>
<g filter="url(#softShadow)">
<rect x="323" y="315" width="43" height="168" rx="13" class="glassPanel"/>
<text x="344.5" y="342" text-anchor="middle" class="font text" font-size="17">3F</text><line x1="329" y1="357" x2="360" y2="357" class="line"/>
<text x="344.5" y="384" text-anchor="middle" class="font text" font-size="17">2F</text><line x1="329" y1="399" x2="360" y2="399" class="line"/>
<rect x="323" y="399" width="43" height="42" rx="8" fill="#000"/><text x="344.5" y="427" text-anchor="middle" class="font lime heavy" font-size="18">1F</text>
<line x1="329" y1="441" x2="360" y2="441" class="line"/><text x="344.5" y="467" text-anchor="middle" class="font text" font-size="17">B1</text>
</g>
<g filter="url(#tinyShadow)">
<rect x="328" y="613" width="38" height="38" rx="12" class="facility"/><path d="M347 622 v20 M337 632 h20" stroke="#ADB0B4" stroke-width="1.2"/><circle cx="347" cy="632" r="4" fill="none" stroke="#3F3F3F" stroke-width="1.7"/>
<rect x="328" y="660" width="38" height="38" rx="12" class="facility"/><text x="347" y="686" text-anchor="middle" class="font text" font-size="22">+</text>
<rect x="328" y="707" width="38" height="38" rx="12" class="facility"/><text x="347" y="733" text-anchor="middle" class="font text" font-size="22">-</text>
</g>
<g filter="url(#tinyShadow)">
<rect x="29" y="688" width="181" height="28" rx="14" class="glassPanel"/>
<circle cx="43" cy="702" r="4" fill="#2C854F"/><text x="55" y="707" class="font text" font-size="12">当前展示 1F 馆内三维地图</text>
</g>
<rect x="18" y="767" width="354" height="54" rx="10" fill="#000000" filter="url(#cardShadow)"/>
<text x="195" y="802" text-anchor="middle" class="font lime heavy" font-size="22">开始导览</text>
</svg>