feat: 轮播标签功能 — 后台加标签字段 + 多色平行四边形
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
后台: - 轮播表单新增: 标签(逗号分隔) / 跳转链接 / 按钮文字 / 按钮链接 - 标签字段提示: 云计算,高性价比,弹性伸缩 前台 CSS: - 标签改为左对齐 - 6 种渐变色自动轮换: 蓝紫/粉红/绿/金/橙/紫 - 保持平行四边形 skewX + 发光效果
This commit is contained in:
@@ -244,7 +244,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
justify-content: flex-end;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-tag-pill {
|
.banner-tag-pill {
|
||||||
@@ -292,6 +292,37 @@
|
|||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 多色标签 — 每个标签自动分配不同渐变色 */
|
||||||
|
.banner-tag-pill:nth-child(1) {
|
||||||
|
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
|
||||||
|
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-tag-pill:nth-child(2) {
|
||||||
|
background: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
|
||||||
|
box-shadow: 0 4px 12px rgba(244, 114, 182, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-tag-pill:nth-child(3) {
|
||||||
|
background: linear-gradient(135deg, #34D399 0%, #059669 100%);
|
||||||
|
box-shadow: 0 4px 12px rgba(52, 211, 153, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-tag-pill:nth-child(4) {
|
||||||
|
background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
|
||||||
|
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-tag-pill:nth-child(5) {
|
||||||
|
background: linear-gradient(135deg, #FB923C 0%, #EA580C 100%);
|
||||||
|
box-shadow: 0 4px 12px rgba(251, 146, 60, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-tag-pill:nth-child(n+6) {
|
||||||
|
background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
|
||||||
|
box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
/* 按钮优化 - 科技感渐变发光效果 */
|
/* 按钮优化 - 科技感渐变发光效果 */
|
||||||
.banner-cont .btn2 {
|
.banner-cont .btn2 {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -418,6 +418,10 @@
|
|||||||
<label>标题</label>
|
<label>标题</label>
|
||||||
<input type="text" class="form-control" data-banner="${index}" data-field="title" value="${banner.title || ''}" placeholder="弹性算力">
|
<input type="text" class="form-control" data-banner="${index}" data-field="title" value="${banner.title || ''}" placeholder="弹性算力">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>标签(逗号分隔)</label>
|
||||||
|
<input type="text" class="form-control" data-banner="${index}" data-field="tags" value="${banner.tags || ''}" placeholder="云计算,高性价比,弹性伸缩">
|
||||||
|
</div>
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label>描述</label>
|
<label>描述</label>
|
||||||
<input type="text" class="form-control" data-banner="${index}" data-field="description" value="${banner.description || ''}" placeholder="宣传语">
|
<input type="text" class="form-control" data-banner="${index}" data-field="description" value="${banner.description || ''}" placeholder="宣传语">
|
||||||
@@ -429,6 +433,18 @@
|
|||||||
<button class="btn btn-secondary upload-btn" data-target-banner="${index}.img">选择文件</button>
|
<button class="btn btn-secondary upload-btn" data-target-banner="${index}.img">选择文件</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>跳转链接</label>
|
||||||
|
<input type="text" class="form-control" data-banner="${index}" data-field="url" value="${banner.url || ''}" placeholder="/cloud.html">
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>按钮文字</label>
|
||||||
|
<input type="text" class="form-control" data-banner="${index}" data-field="button_text" value="${banner.button_text || ''}" placeholder="立即查看">
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>按钮链接</label>
|
||||||
|
<input type="text" class="form-control" data-banner="${index}" data-field="button_link" value="${banner.button_link || ''}" placeholder="/cloud.html">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user