前端代码：电商单品创意展示卡片，背景颜色联动

一张卡片讲清一款潮流训练鞋：四套配色轮播、价格与按钮联动，背景渐变随配色切换，中文文案与品牌露出，适合电商首屏或单品推广页的快速演示。

亮点卖点

• 多配色轮播：Slick 轮播 + 自定义圆点，切换时背景渐变同步变色，营造品牌感。
• 轻量依赖：本地化 reset、Slick、jQuery、字体与图片，离线也能直接打开。
• 品牌露出：顶部 KS 主题徽标，可替换为你的品牌；按钮与价格强调购买行动。
• 极简布局：一屏聚焦单品，无干扰元素，适合嵌入着陆页或组件库。

设计风格

• 红/绿/蓝/黑四套渐变背景，与鞋款配色呼应，形成沉浸感。
• 大标题 + 简短卖点文案，价格与按钮靠右突出转化。
• 卡片居中、轻阴影衬托，按钮悬停有渐变填充动效。

适用场景

• 电商单品详情首屏、活动促销页、品牌新品展示。
• UI 组件库示例、设计稿占位或交互 Demo。
• 需要快速换肤、改文案的单品轮播模块。

使用方式

1. 直接打开 index.html 预览（离线可用）。
2. 替换配图：将 assets/img/1.jpg~4.jpg 换成你的产品图，并更新 index.html 中的 alt 文案与价格。
3. 修改文案/价格/按钮：在 index.html 更新标题、描述、价格和按钮文字。
4. 配色联动：在 index.html 的 figure 的 data-color 中调整渐变起止色，背景和按钮渐变会自动跟随。

文件结构

• index.html：页面结构、中文文案、KS 品牌徽标。
• style.css：布局、渐变背景、按钮/轮播样式。
• script.js：Slick 初始化与背景/价格配色联动。
• assets/css：本地 reset、Slick 样式。
• assets/js：本地 jQuery、Slick。
• assets/img：本地产品图。
• assets/fonts：本地 Open Sans Condensed 字体。

自定义提示

• 想加更多配色：在 .slider 内新增 figure，填好图片与 data-color，无需改 JS。
• 想换字体或品牌色：替换 assets/fonts 或调整 body/按钮的颜色变量。
• 如果需要接口驱动价格或库存，可在 script.js 内读取接口数据后更新 .price 和按钮文案。