feat(web): 首页 Hero 添加家庭幸福健康抽象插画背景

- 新增 web/images/hero-family.svg（1440×900 SVG）
- 包含：屋顶/成长树/太阳/彩虹弧/家庭五人剪影/心形/草地祥云
- 暖色调大地色系（棕#C4956A / 浅绿#8DB48E / 淡黄#F5D89A / 蓝#A8D4E6）
- .hero-bg 加 SVG 背景图 + 左侧渐变遮罩确保文字可读性

web/css/style.css

@@ -428,12 +428,27 @@ ul { list-style: none; }
   position: absolute;
   inset: 0;
   background:
+    url(../images/hero-family.svg) center/cover no-repeat,
     radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74, 155, 215, .10), transparent),
     radial-gradient(ellipse 60% 40% at 80% 80%, rgba(78, 205, 196, .08), transparent),
     radial-gradient(ellipse 50% 50% at 20% 70%, rgba(255, 217, 61, .06), transparent);
   pointer-events: none;
 }
 
+.hero-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to right,
+    rgba(254, 249, 240, 0.82) 0%,
+    rgba(254, 249, 240, 0.65) 45%,
+    rgba(254, 249, 240, 0.10) 70%,
+    transparent 100%
+  );
+  pointer-events: none;
+}
+
 .hero-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;

web/images/hero-family.svg

@@ -0,0 +1,229 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 900" width="1440" height="900">
+  <defs>
+    <!-- 暖色渐变 -->
+    <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#FEF9F0"/>
+      <stop offset="60%" stop-color="#FDF4E8"/>
+      <stop offset="100%" stop-color="#F5EBD8"/>
+    </linearGradient>
+    <linearGradient id="groundGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#C4956A"/>
+      <stop offset="100%" stop-color="#8DB48E"/>
+    </linearGradient>
+    <linearGradient id="sunGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#F5D89A"/>
+      <stop offset="100%" stop-color="#F5B87A"/>
+    </linearGradient>
+    <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#F5D89A" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#F5D89A" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="treeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#8DB48E"/>
+      <stop offset="100%" stop-color="#6B9B6F"/>
+    </linearGradient>
+    <linearGradient id="roofGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#C4956A"/>
+      <stop offset="100%" stop-color="#A07850"/>
+    </linearGradient>
+    <linearGradient id="rainbowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#A8D4E6" stop-opacity="0.6"/>
+      <stop offset="25%" stop-color="#8DB48E" stop-opacity="0.5"/>
+      <stop offset="50%" stop-color="#F5D89A" stop-opacity="0.5"/>
+      <stop offset="75%" stop-color="#F5B87A" stop-opacity="0.5"/>
+      <stop offset="100%" stop-color="#A8D4E6" stop-opacity="0.3"/>
+    </linearGradient>
+    <!-- 柔和阴影 -->
+    <filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="softShadow" x="-10%" y="-10%" width="120%" height="130%">
+      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#C4956A" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+
+  <!-- 天空背景 -->
+  <rect width="1440" height="900" fill="url(#skyGrad)"/>
+
+  <!-- 远山轮廓（增加层次） -->
+  <ellipse cx="200" cy="750" rx="300" ry="120" fill="#E8D4B8" opacity="0.4"/>
+  <ellipse cx="1300" cy="770" rx="280" ry="100" fill="#E8D4B8" opacity="0.35"/>
+
+  <!-- 祥云点缀 -->
+  <g opacity="0.25" fill="#C4956A">
+    <ellipse cx="150" cy="200" rx="60" ry="22"/>
+    <ellipse cx="190" cy="195" rx="40" ry="18"/>
+    <ellipse cx="120" cy="205" rx="35" ry="15"/>
+  </g>
+  <g opacity="0.2" fill="#8DB48E">
+    <ellipse cx="1280" cy="250" rx="70" ry="24"/>
+    <ellipse cx="1320" cy="244" rx="45" ry="18"/>
+    <ellipse cx="1250" cy="254" rx="38" ry="14"/>
+  </g>
+  <g opacity="0.18" fill="#F5D89A">
+    <ellipse cx="600" cy="150" rx="55" ry="20"/>
+    <ellipse cx="635" cy="146" rx="35" ry="15"/>
+    <ellipse cx="570" cy="154" rx="30" ry="12"/>
+  </g>
+
+  <!-- 太阳 -->
+  <circle cx="1100" cy="160" r="90" fill="url(#sunGlow)"/>
+  <circle cx="1100" cy="160" r="55" fill="url(#sunGrad)" filter="url(#softGlow)"/>
+  <g stroke="#F5D89A" stroke-width="2.5" stroke-linecap="round" opacity="0.5">
+    <line x1="1100" y1="85" x2="1100" y2="65"/>
+    <line x1="1100" y1="235" x2="1100" y2="255"/>
+    <line x1="1025" y1="160" x2="1005" y2="160"/>
+    <line x1="1175" y1="160" x2="1195" y2="160"/>
+    <line x1="1047" y1="107" x2="1032" y2="92"/>
+    <line x1="1153" y1="213" x2="1168" y2="228"/>
+    <line x1="1047" y1="213" x2="1032" y2="228"/>
+    <line x1="1153" y1="107" x2="1168" y2="92"/>
+  </g>
+
+  <!-- 彩虹弧线 -->
+  <path d="M 180 620 Q 720 300 1260 620" stroke="url(#rainbowGrad)" stroke-width="18" fill="none" stroke-linecap="round" opacity="0.45"/>
+
+  <!-- 成长之树（右侧） -->
+  <g filter="url(#softShadow)">
+    <!-- 树干 -->
+    <rect x="1220" y="420" width="22" height="260" rx="6" fill="#A07850"/>
+    <rect x="1215" y="430" width="8" height="200" rx="4" fill="#B88A60" opacity="0.4"/>
+    <!-- 树冠（大圆形叠压） -->
+    <circle cx="1180" cy="370" r="85" fill="url(#treeGrad)" opacity="0.85"/>
+    <circle cx="1250" cy="340" r="75" fill="#7DAF7D" opacity="0.8"/>
+    <circle cx="1210" cy="300" r="65" fill="#9DC89D" opacity="0.85"/>
+    <circle cx="1270" cy="390" r="60" fill="#8DB48E" opacity="0.75"/>
+    <!-- 树根 -->
+    <path d="M 1220 680 Q 1190 690 1160 700" stroke="#A07850" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.6"/>
+    <path d="M 1242 680 Q 1272 692 1295 700" stroke="#A07850" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.6"/>
+    <path d="M 1222 680 Q 1220 710 1218 740" stroke="#A07850" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.5"/>
+    <!-- 树上挂的心形 -->
+    <g transform="translate(1205, 240)">
+      <path d="M 0 8 C -4 -2 -12 -2 -12 5 C -12 12 0 22 0 22 C 0 22 12 12 12 5 C 12 -2 4 -2 0 8Z" fill="#FF8C8C" opacity="0.7"/>
+    </g>
+    <g transform="translate(1260, 280)">
+      <path d="M 0 6 C -3 -1.5 -9 -1.5 -9 4 C -9 9 0 16 0 16 C 0 16 9 9 9 4 C 9 -1.5 3 -1.5 0 6Z" fill="#F5B87A" opacity="0.65"/>
+    </g>
+    <!-- 叶片点缀 -->
+    <ellipse cx="1180" cy="370" rx="8" ry="4" fill="#6B9B6F" opacity="0.7" transform="rotate(-30 1180 370)"/>
+    <ellipse cx="1230" cy="330" rx="7" ry="3.5" fill="#6B9B6F" opacity="0.7" transform="rotate(20 1230 330)"/>
+    <ellipse cx="1200" cy="400" rx="6" ry="3" fill="#6B9B6F" opacity="0.6" transform="rotate(-15 1200 400)"/>
+  </g>
+
+  <!-- 房子（左侧） -->
+  <g filter="url(#softShadow)" transform="translate(80, 360)">
+    <!-- 墙体 -->
+    <rect x="20" y="100" width="180" height="140" rx="6" fill="#F5EBD8"/>
+    <rect x="20" y="100" width="60" height="140" rx="4" fill="#EDE4D0" opacity="0.6"/>
+    <!-- 屋顶 -->
+    <polygon points="110,20 0,100 220,100" fill="url(#roofGrad)"/>
+    <!-- 屋顶瓦纹 -->
+    <g stroke="#8B6340" stroke-width="1" opacity="0.25">
+      <line x1="30" y1="95" x2="110" y2="25"/>
+      <line x1="65" y1="95" x2="110" y2="45"/>
+      <line x1="100" y1="95" x2="110" y2="65"/>
+      <line x1="135" y1="95" x2="110" y2="45"/>
+      <line x1="170" y1="95" x2="110" y2="25"/>
+    </g>
+    <!-- 门 -->
+    <rect x="85" y="155" width="50" height="85" rx="6" fill="#C4956A"/>
+    <circle cx="125" cy="200" r="4" fill="#F5D89A"/>
+    <!-- 窗户 -->
+    <rect x="35" y="125" width="38" height="45" rx="4" fill="#A8D4E6" opacity="0.7"/>
+    <line x1="54" y1="125" x2="54" y2="170" stroke="#F5EBD8" stroke-width="2"/>
+    <line x1="35" y1="147" x2="73" y2="147" stroke="#F5EBD8" stroke-width="2"/>
+    <rect x="147" y="125" width="38" height="45" rx="4" fill="#A8D4E6" opacity="0.7"/>
+    <line x1="166" y1="125" x2="166" y2="170" stroke="#F5EBD8" stroke-width="2"/>
+    <line x1="147" y1="147" x2="185" y2="147" stroke="#F5EBD8" stroke-width="2"/>
+    <!-- 烟囱 -->
+    <rect x="145" y="15" width="22" height="40" rx="3" fill="#B88A60"/>
+    <rect x="143" y="12" width="26" height="8" rx="3" fill="#A07850"/>
+    <!-- 炊烟 -->
+    <g stroke="#C4956A" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.3">
+      <path d="M 156 -5 Q 162 -20 156 -30 Q 150 -40 156 -55"/>
+      <path d="M 165 -5 Q 171 -18 165 -28"/>
+    </g>
+  </g>
+
+  <!-- 地面 / 草地 -->
+  <ellipse cx="720" cy="920" rx="900" ry="280" fill="url(#groundGrad)" opacity="0.55"/>
+  <!-- 草地纹理 -->
+  <g stroke="#6B9B6F" stroke-width="2" stroke-linecap="round" opacity="0.4">
+    <line x1="50" y1="800" x2="55" y2="775"/>
+    <line x1="80" y1="795" x2="75" y2="770"/>
+    <line x1="110" y1="798" x2="115" y2="773"/>
+    <line x1="250" y1="820" x2="255" y2="795"/>
+    <line x1="300" y1="815" x2="295" y2="790"/>
+    <line x1="380" y1="825" x2="385" y2="800"/>
+    <line x1="1050" y1="830" x2="1055" y2="805"/>
+    <line x1="1120" y1="820" x2="1115" y2="795"/>
+    <line x1="1190" y1="825" x2="1195" y2="800"/>
+    <line x1="1280" y1="815" x2="1275" y2="790"/>
+  </g>
+
+  <!-- 小花 -->
+  <g opacity="0.6">
+    <circle cx="200" cy="780" r="5" fill="#F5D89A"/>
+    <circle cx="400" cy="810" r="4" fill="#FF8C8C"/>
+    <circle cx="600" cy="795" r="4.5" fill="#F5D89A"/>
+    <circle cx="800" cy="815" r="4" fill="#A8D4E6"/>
+    <circle cx="1000" cy="800" r="5" fill="#FF8C8C"/>
+    <circle cx="1180" cy="790" r="4" fill="#F5D89A"/>
+    <circle cx="1300" cy="810" r="4.5" fill="#8DB48E"/>
+  </g>
+
+  <!-- 家庭五人剪影（中心） -->
+  <g opacity="0.22" fill="#C4956A" filter="url(#softShadow)">
+    <!-- 祖父母（最两端） -->
+    <ellipse cx="440" cy="645" rx="18" ry="22"/>
+    <rect x="430" y="665" width="20" height="90" rx="8"/>
+    <circle cx="438" cy="640" r="20"/>
+
+    <ellipse cx="1000" cy="645" rx="18" ry="22"/>
+    <rect x="990" y="665" width="20" height="90" rx="8"/>
+    <circle cx="998" cy="640" r="20"/>
+
+    <!-- 父母（中间两侧） -->
+    <ellipse cx="560" cy="640" rx="16" ry="20"/>
+    <rect x="550" y="660" width="18" height="85" rx="7"/>
+    <circle cx="558" cy="635" r="18"/>
+
+    <ellipse cx="880" cy="640" rx="16" ry="20"/>
+    <rect x="870" y="660" width="18" height="85" rx="7"/>
+    <circle cx="878" cy="635" r="18"/>
+
+    <!-- 孩子（中心） -->
+    <ellipse cx="720" cy="665" rx="14" ry="17"/>
+    <rect x="710" y="682" width="18" height="70" rx="6"/>
+    <circle cx="718" cy="660" r="16"/>
+
+    <!-- 手拉手连接 -->
+    <path d="M 450 700 Q 500 690 560 695 Q 640 688 720 690 Q 800 688 880 695 Q 940 690 990 700" stroke="#C4956A" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.8"/>
+  </g>
+
+  <!-- 星光点缀 -->
+  <g fill="#F5D89A" opacity="0.5">
+    <circle cx="300" cy="120" r="2.5"/>
+    <circle cx="480" cy="80" r="2"/>
+    <circle cx="750" cy="100" r="2.5"/>
+    <circle cx="950" cy="70" r="2"/>
+    <circle cx="1350" cy="300" r="2"/>
+    <circle cx="200" cy="400" r="2"/>
+  </g>
+
+  <!-- 爱的符号（五枚心形散落） -->
+  <g opacity="0.45">
+    <path d="M 320 480 C 316 474 308 474 308 480 C 308 486 320 496 320 496 C 320 496 332 486 332 480 C 332 474 324 474 320 480Z" fill="#F5B87A"/>
+    <path d="M 500 550 C 497 545 491 545 491 550 C 491 555 500 563 500 563 C 500 563 509 555 509 550 C 509 545 503 545 500 550Z" fill="#FF8C8C"/>
+    <path d="M 940 520 C 937 515 931 515 931 520 C 931 525 940 533 940 533 C 940 533 949 525 949 520 C 949 515 943 515 940 520Z" fill="#F5D89A"/>
+    <path d="M 1120 480 C 1117 475 1111 475 1111 480 C 1111 485 1120 493 1120 493 C 1120 493 1129 485 1129 480 C 1129 475 1123 475 1120 480Z" fill="#8DB48E"/>
+    <path d="M 680 430 C 677 425 671 425 671 430 C 671 435 680 443 680 443 C 680 443 689 435 689 430 C 689 425 683 425 680 430Z" fill="#A8D4E6"/>
+  </g>
+
+  <!-- 底部柔和渐隐 -->
+  <rect x="0" y="700" width="1440" height="200" fill="url(#skyGrad)" opacity="0.5"/>
+</svg>