diff --git a/.codebuddy/skills/sku-designer/SKILL.md b/.codebuddy/skills/sku-designer/SKILL.md index 63af364..8688310 100644 --- a/.codebuddy/skills/sku-designer/SKILL.md +++ b/.codebuddy/skills/sku-designer/SKILL.md @@ -1,13 +1,14 @@ --- name: sku设计 -description: +description: 设计电商产品的 SKU 配置。当用户需要为产品生成 SKU 配置时使用此技能。 --- # SKU 设计 ## Overview -[TODO: 描述此技能的作用和使用场景] +- 为每个产品生成 SKU 配置 +- 将 SKU 配置放到每个产品对应的 `SKU` 目录下 ## SKU 编码规则 diff --git a/产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图1-正面展示.html b/产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图1-正面展示.html index fd9bcc0..d286ce0 100644 --- a/产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图1-正面展示.html +++ b/产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图1-正面展示.html @@ -14,7 +14,7 @@ width: 800px; height: 800px; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; - background: linear-gradient(135deg, #1a5f2a 0%, #2d8a3e 50%, #1a5f2a 100%); + background: linear-gradient(145deg, #0d2818 0%, #1a5f2a 30%, #2d8a3e 60%, #1a5f2a 100%); position: relative; overflow: hidden; } @@ -27,103 +27,147 @@ justify-content: center; position: relative; } + /* 背景光晕效果 */ + .glow { + position: absolute; + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(144,238,144,0.15) 0%, transparent 70%); + top: 50%; + left: 50%; + transform: translate(-50%, -30%); + pointer-events: none; + } /* 顶部标题 */ .header { position: absolute; - top: 30px; + top: 25px; left: 0; right: 0; text-align: center; + z-index: 10; } .title { - font-size: 48px; + font-size: 44px; font-weight: bold; color: #fff; - text-shadow: 3px 3px 6px rgba(0,0,0,0.3); + text-shadow: 0 2px 10px rgba(0,0,0,0.5); letter-spacing: 4px; } .subtitle { - font-size: 24px; - color: #90ee90; - margin-top: 10px; - letter-spacing: 2px; + font-size: 22px; + color: #a8e6a8; + margin-top: 8px; + letter-spacing: 3px; } - /* 产品图片区域 */ - .product-area { - width: 500px; - height: 400px; + /* 产品展示台 */ + .product-stage { + width: 520px; + height: 420px; + background: rgba(255,255,255,0.08); + border-radius: 30px; display: flex; align-items: center; justify-content: center; - margin-top: 40px; + position: relative; + margin-top: 30px; + backdrop-filter: blur(5px); + border: 1px solid rgba(255,255,255,0.15); + box-shadow: + 0 20px 60px rgba(0,0,0,0.3), + inset 0 1px 0 rgba(255,255,255,0.1); + } + /* 产品图片 */ + .product-img-wrapper { + position: relative; + padding: 20px; } .product-img { - max-width: 100%; - max-height: 100%; + max-width: 420px; + max-height: 340px; object-fit: contain; - filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4)); + border-radius: 15px; + box-shadow: + 0 15px 40px rgba(0,0,0,0.4), + 0 0 0 1px rgba(255,255,255,0.1); + } + /* 倒影效果 */ + .product-reflection { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%) scaleY(-1); + max-width: 420px; + max-height: 340px; + object-fit: contain; + opacity: 0.15; + filter: blur(3px); + mask-image: linear-gradient(to top, rgba(0,0,0,0.3), transparent); + -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.3), transparent); } /* 卖点标签 */ .features { position: absolute; - bottom: 120px; + bottom: 110px; display: flex; - gap: 20px; + gap: 15px; + z-index: 10; } .feature-tag { - background: rgba(255,255,255,0.95); - padding: 12px 24px; - border-radius: 30px; - font-size: 20px; + background: linear-gradient(135deg, #fff 0%, #f0f8f0 100%); + padding: 10px 20px; + border-radius: 25px; + font-size: 18px; color: #1a5f2a; font-weight: bold; - box-shadow: 0 4px 15px rgba(0,0,0,0.2); + box-shadow: 0 4px 20px rgba(0,0,0,0.25); + border: 1px solid rgba(255,255,255,0.5); } /* 底部信息 */ .footer { position: absolute; - bottom: 40px; + bottom: 35px; text-align: center; + z-index: 10; } .brand { - font-size: 32px; + font-size: 30px; color: #fff; font-weight: bold; letter-spacing: 3px; + text-shadow: 0 2px 10px rgba(0,0,0,0.3); } .slogan { - font-size: 18px; - color: #90ee90; - margin-top: 8px; + font-size: 16px; + color: #a8e6a8; + margin-top: 5px; } /* 装饰元素 */ - .deco-circle { + .deco-line { position: absolute; - border: 3px solid rgba(255,255,255,0.2); - border-radius: 50%; + background: linear-gradient(90deg, transparent, rgba(144,238,144,0.3), transparent); + height: 1px; } .deco-1 { - width: 600px; - height: 600px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + top: 150px; + left: 100px; + right: 100px; } .deco-2 { - width: 700px; - height: 700px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-style: dashed; + bottom: 180px; + left: 150px; + right: 150px; }
+
+
+
+