diff --git a/apps/web/src/pages/generate/constants.ts b/apps/web/src/pages/generate/constants.ts index 199e2421f..9b4ed569c 100644 --- a/apps/web/src/pages/generate/constants.ts +++ b/apps/web/src/pages/generate/constants.ts @@ -99,7 +99,12 @@ export const TITLE_PRESETS = [ key: "fresh_minimal", label: "清新简约", style: { size: 24, color: "#333333", bold: false, italic: false, stroke: false, shadow: false }, - previewStyle: { fontWeight: 400, color: "#333333", fontSize: "32px" }, + previewStyle: { + fontWeight: 400, + color: "#333333", + fontSize: "32px", + WebkitTextStroke: "0.5px #888888", + }, }, { key: "variety_show", @@ -117,7 +122,12 @@ export const TITLE_PRESETS = [ key: "business", label: "商务极简", style: { size: 24, color: "#1a1a1a", bold: false, italic: false, stroke: false, shadow: false }, - previewStyle: { fontWeight: 400, color: "#1a1a1a", fontSize: "32px" }, + previewStyle: { + fontWeight: 400, + color: "#1a1a1a", + fontSize: "32px", + WebkitTextStroke: "0.5px #999999", + }, }, { key: "retro_film", @@ -148,6 +158,7 @@ export const TITLE_PRESETS = [ previewStyle: { fontWeight: 400, color: "#333333", + WebkitTextStroke: "0.5px #888888", textShadow: "1px 1px 2px rgba(0,0,0,0.3)", fontSize: "32px", }, diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css index 187dbfa97..e6bfbdc69 100644 --- a/apps/web/src/pages/generate/generate.css +++ b/apps/web/src/pages/generate/generate.css @@ -1733,16 +1733,16 @@ /* 标题预设卡片网格 */ .xx-title-presets-grid { display: grid; - grid-template-columns: repeat(6, 1fr); - gap: 8px; + grid-template-columns: repeat(8, 1fr); + gap: 6px; } .xx-title-preset-card { display: flex; align-items: center; justify-content: center; - width: 52px; - height: 52px; + width: 48px; + height: 48px; padding: 0; background: #3a3a3a; border: 2px solid transparent; diff --git a/apps/web/src/pages/products/products.css b/apps/web/src/pages/products/products.css index 710d81b6b..58bae02de 100644 --- a/apps/web/src/pages/products/products.css +++ b/apps/web/src/pages/products/products.css @@ -135,7 +135,7 @@ ============================================================ */ .xx-products-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); } @@ -282,20 +282,28 @@ } .xx-product-play { - position: relative; - z-index: 1; - width: 44px; - height: 44px; - border-radius: var(--radius-full); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + width: 52px; + height: 52px; + border-radius: 50%; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); - font-size: var(--font-size-md); - transition: var(--transition-all); + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + color: #fff; + transition: all 0.2s; + cursor: pointer; } .xx-product-card:hover .xx-product-play { background: var(--primary-color); - transform: scale(1.1); + transform: translate(-50%, -50%) scale(1.1); } /* 时长标签 */ @@ -315,7 +323,7 @@ /* 卡片信息区 */ .xx-product-info { - padding: 14px; + padding: 8px 10px; display: flex; flex-direction: column; gap: var(--space-sm);