|
|
@@ -39,7 +39,9 @@ html.kb-page, .kb-page body { height: 100vh; overflow: hidden; }
|
|
|
|
|
|
.kb-body-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding-bottom:var(--space-md); min-height:0; position:relative; }
|
|
|
.kb-body-inner { position:relative; width:100%; max-width:700px; height:100%; display:flex; align-items:center; justify-content:center; }
|
|
|
- .kb-body-img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-lg); box-shadow:0 8px 40px rgba(74,155,215,0.08); }
|
|
|
+ .kb-body-img { display:none; }
|
|
|
+ .kb-body-silhouette { display:block; width:100%; height:100%; max-width:420px; margin:0 auto; }
|
|
|
+ .kb-body-silhouette svg { width:100%; height:auto; display:block; }
|
|
|
|
|
|
.kb-marker { position:absolute; z-index:2; }
|
|
|
.kb-marker-card { pointer-events:auto; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1.5px solid var(--m-color,var(--color-border-light)); box-shadow:0 4px 16px rgba(0,0,0,0.06); min-width:170px; max-width:220px; transition:box-shadow .2s, transform .2s; }
|
|
|
@@ -131,7 +133,36 @@ html.kb-page, .kb-page body { height: 100vh; overflow: hidden; }
|
|
|
|
|
|
<div class="kb-body-wrap" id="kbDesktop">
|
|
|
<div class="kb-body-inner" id="kbBodyInner">
|
|
|
- <img src="img/human-body.png" alt="人体五维成长百科" class="kb-body-img" id="kbBodyImg">
|
|
|
+ <div class="kb-body-silhouette">
|
|
|
+ <svg viewBox="0 0 200 480" xmlns="http://www.w3.org/2000/svg" fill="none">
|
|
|
+ <!-- head -->
|
|
|
+ <ellipse cx="100" cy="52" rx="36" ry="42" fill="#E8F4FA" stroke="#4A9BD7" stroke-width="2"/>
|
|
|
+ <!-- neck -->
|
|
|
+ <rect x="88" y="90" width="24" height="18" rx="6" fill="#E8F4FA" stroke="#4A9BD7" stroke-width="2"/>
|
|
|
+ <!-- torso -->
|
|
|
+ <path d="M60 108 Q50 110 48 140 L44 260 Q42 290 55 300 L145 300 Q158 290 156 260 L152 140 Q150 110 140 108 Z" fill="#E8F4FA" stroke="#4A9BD7" stroke-width="2"/>
|
|
|
+ <!-- left arm -->
|
|
|
+ <path d="M48 120 Q20 130 18 180 L16 260 Q15 275 22 278 Q30 280 32 270 L36 200 Q38 160 50 140" fill="#E8F4FA" stroke="#4A9BD7" stroke-width="2" stroke-linejoin="round"/>
|
|
|
+ <!-- right arm -->
|
|
|
+ <path d="M152 120 Q180 130 182 180 L184 260 Q185 275 178 278 Q170 280 168 270 L164 200 Q162 160 150 140" fill="#E8F4FA" stroke="#4A9BD7" stroke-width="2" stroke-linejoin="round"/>
|
|
|
+ <!-- left leg -->
|
|
|
+ <path d="M70 295 Q60 310 56 360 L52 440 Q50 460 60 462 Q70 462 72 450 L78 380 Q82 340 85 310" fill="#E8F4FA" stroke="#4A9BD7" stroke-width="2" stroke-linejoin="round"/>
|
|
|
+ <!-- right leg -->
|
|
|
+ <path d="M130 295 Q140 310 144 360 L148 440 Q150 460 140 462 Q130 462 128 450 L122 380 Q118 340 115 310" fill="#E8F4FA" stroke="#4A9BD7" stroke-width="2" stroke-linejoin="round"/>
|
|
|
+ <!-- brain highlight -->
|
|
|
+ <ellipse cx="100" cy="44" rx="22" ry="26" fill="rgba(99,102,241,0.18)" stroke="#6366F1" stroke-width="1.5" stroke-dasharray="4 2"/>
|
|
|
+ <!-- heart area -->
|
|
|
+ <circle cx="108" cy="155" r="14" fill="rgba(255,107,157,0.18)" stroke="#FF6B9D" stroke-width="1.5" stroke-dasharray="4 2"/>
|
|
|
+ <!-- gut area -->
|
|
|
+ <ellipse cx="95" cy="210" rx="22" ry="28" fill="rgba(255,140,66,0.15)" stroke="#FF8C42" stroke-width="1.5" stroke-dasharray="4 2"/>
|
|
|
+ <!-- hands -->
|
|
|
+ <ellipse cx="168" cy="260" rx="10" ry="12" fill="rgba(245,158,11,0.18)" stroke="#F59E0B" stroke-width="1.5" stroke-dasharray="4 2"/>
|
|
|
+ <!-- feet -->
|
|
|
+ <ellipse cx="68" cy="456" rx="14" ry="7" fill="rgba(16,185,129,0.18)" stroke="#10B981" stroke-width="1.5" stroke-dasharray="4 2"/>
|
|
|
+ <!-- center line (subtle) -->
|
|
|
+ <line x1="100" y1="108" x2="100" y2="300" stroke="#4A9BD7" stroke-width="0.8" opacity="0.25"/>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|