style(products+generate): 成片库播放按钮居中+卡片缩小+预设卡片紧凑化+深色T描边 #1610

Merged
xiaoxia merged 1 commits from fix/visual-polish-6items into develop 2026-09-01 16:49:58 +08:00
3 changed files with 35 additions and 16 deletions
+13 -2
View File
@@ -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",
},
+4 -4
View File
@@ -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;
+18 -10
View File
@@ -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);