101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
});
|