万圣节&圣诞节皮肤

2026-09-29 18:50:21 +08:00
parent 6b3dea2f05
commit 7e6995deaf
31 changed files with 1038 additions and 27 deletions
@@ -0,0 +1,100 @@
+import { memo } from "react";
+
+const BAT_POSITIONS = [8, 24, 40, 56, 72, 88];
+
+/** 设备卡片的静态万圣节装饰：两角蜘蛛网、倒挂蝙蝠串、右上黑猫；只占上沿，不接收点击或参与布局。 */
+export default memo(function HalloweenCardDecoration() {
+  return (
+    <div className="halloween-card-decoration" aria-hidden="true">
+      <svg
+        className="halloween-card-web halloween-card-web-left"
+        viewBox="0 0 34 30"
+        fill="none"
+        focusable="false"
+      >
+        <g stroke="#d7dee0" strokeOpacity="0.5" strokeWidth="0.8">
+          <path d="M0 0L34 6M0 0L30 15M0 0L20 25M0 0L8 30" />
+          <path d="M12 0Q11.2 5.6 7.6 9Q4.4 12 0 13" />
+          <path d="M22 0Q20.8 10.4 13.8 16.8Q7.6 22.4 0 24" />
+          <path d="M32 0Q30.4 15.2 20 24.6Q10.8 32.8 0 34" />
+        </g>
+      </svg>
+      <svg
+        className="halloween-card-web halloween-card-web-right"
+        viewBox="0 0 34 30"
+        fill="none"
+        focusable="false"
+      >
+        <g stroke="#d7dee0" strokeOpacity="0.5" strokeWidth="0.8">
+          <path d="M0 0L34 6M0 0L30 15M0 0L20 25M0 0L8 30" />
+          <path d="M12 0Q11.2 5.6 7.6 9Q4.4 12 0 13" />
+          <path d="M22 0Q20.8 10.4 13.8 16.8Q7.6 22.4 0 24" />
+          <path d="M32 0Q30.4 15.2 20 24.6Q10.8 32.8 0 34" />
+        </g>
+      </svg>
+
+      <div className="halloween-card-bats">
+        <svg
+          className="halloween-card-wire"
+          viewBox="0 0 100 18"
+          preserveAspectRatio="none"
+          focusable="false"
+        >
+          <path
+            d="M0 2Q50 15 100 2"
+            fill="none"
+            stroke="#4d4358"
+            strokeWidth="1"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+        {BAT_POSITIONS.map((position) => {
+          const ratio = position / 100;
+          // 与挂线的二次曲线保持一致；蝙蝠固定尺寸，不随宽屏拉伸。
+          const top = 2 + 26 * ratio * (1 - ratio);
+          return (
+            <span
+              key={position}
+              className="halloween-card-bat"
+              style={{ left: `${position}%`, top }}
+            >
+              <svg viewBox="0 0 10 5" fill="#6d5a80" focusable="false">
+                <path d="M0 2.6Q1.8 0.4 3.4 1.8Q4.2 0.6 5 1.6Q5.8 0.6 6.6 1.8Q8.2 0.4 10 2.6Q8.4 2.4 7.4 3.6Q6.4 4.8 5 4.6Q3.6 4.8 2.6 3.6Q1.6 2.4 0 2.6Z" />
+              </svg>
+            </span>
+          );
+        })}
+      </div>
+
+      <svg
+        className="halloween-card-cat"
+        viewBox="0 0 40 36"
+        fill="none"
+        focusable="false"
+      >
+        {/* 黑猫剪影：暗底上用细描边勾轮廓，琥珀色眼睛点睛。 */}
+        <g fill="#101114" stroke="rgba(255,255,255,0.28)" strokeWidth="0.8">
+          <path d="M15 7L13.5 1.5L18.5 4.5Z" />
+          <path d="M25 7L26.5 1.5L21.5 4.5Z" />
+          <circle cx="20" cy="10" r="6" />
+          <path d="M13 32Q12 18 16 14Q20 12 24 14Q28 18 27 32Z" />
+        </g>
+        <path
+          d="M27 30Q34 28 33 20Q33 16 30 15"
+          stroke="#101114"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+        <path
+          d="M27 30Q34 28 33 20Q33 16 30 15"
+          stroke="rgba(255,255,255,0.22)"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <path d="M16.6 9.6Q18.1 8.2 19.6 9.6Q18.1 11 16.6 9.6Z" fill="#ffb347" />
+        <path d="M20.6 9.6Q22.1 8.2 23.6 9.6Q22.1 11 20.6 9.6Z" fill="#ffb347" />
+      </svg>
+    </div>
+  );
+});