This commit is contained in:
@@ -106,7 +106,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
padding: 8px 32px;
|
||||
padding: 10px 40px;
|
||||
opacity: 1;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -75,6 +75,21 @@
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 轮播文案标签 */
|
||||
.banner-tags {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.banner-tag-pill {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(29, 78, 216, 0.08);
|
||||
color: #1D4ED8;
|
||||
}
|
||||
|
||||
/* 3D 地球容器:与 section-content 右对齐(和下方卡片区域右边保持一致) */
|
||||
.banner-globe {
|
||||
position: absolute;
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
<div class="banner-text">
|
||||
<div class="section-content">
|
||||
<div class="banner-copy">
|
||||
<div id="bannerTags" class="banner-tags"></div>
|
||||
<h1 id="bannerTitle"></h1>
|
||||
<p class="banner-desc" id="bannerDesc"></p>
|
||||
<a
|
||||
|
||||
26
js/index.js
26
js/index.js
@@ -41,6 +41,26 @@ $(function () {
|
||||
}
|
||||
const idx = index >= 0 && index < bannerData.length ? index : 0;
|
||||
const item = bannerData[idx] || {};
|
||||
// 标签渲染:标题上方的小块标签
|
||||
const $tagsWrap = $("#bannerTags");
|
||||
if ($tagsWrap.length) {
|
||||
$tagsWrap.empty();
|
||||
const rawTags = item.tags || "";
|
||||
const tags = rawTags
|
||||
.split(/[,,]/)
|
||||
.map((t) => t.trim())
|
||||
.filter((t) => t);
|
||||
tags.forEach((tag) => {
|
||||
$tagsWrap.append(
|
||||
`<span class="banner-tag-pill">${tag}</span>`
|
||||
);
|
||||
});
|
||||
if (tags.length === 0) {
|
||||
$tagsWrap.hide();
|
||||
} else {
|
||||
$tagsWrap.show();
|
||||
}
|
||||
}
|
||||
$("#bannerTitle").text(item.title || "");
|
||||
$("#bannerDesc").text(item.description || "");
|
||||
const $btn = $("#bannerButton");
|
||||
@@ -76,6 +96,12 @@ $(function () {
|
||||
}
|
||||
bannerTextTimer = setInterval(() => {
|
||||
current = (current + 1) % bannerData.length;
|
||||
// 淡入动画:先让文案透明,再渐显
|
||||
const $copy = $(".banner-copy");
|
||||
$copy
|
||||
.stop(true, true)
|
||||
.css({ opacity: 0 })
|
||||
.animate({ opacity: 1 }, 400);
|
||||
updateBannerText(current);
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
@@ -277,6 +277,13 @@
|
||||
<label>描述</label>
|
||||
<t-input v-model="banner.description" placeholder="一句宣传语"></t-input>
|
||||
</div>
|
||||
<div class="form-item form-item--full">
|
||||
<label>标签</label>
|
||||
<t-input
|
||||
v-model="banner.tags"
|
||||
placeholder="如:高速,低价,安全(多个标签用逗号分隔)"
|
||||
></t-input>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>跳转链接</label>
|
||||
<t-input v-model="banner.url" placeholder="/cloud.html"></t-input>
|
||||
@@ -896,7 +903,7 @@
|
||||
this.bannerList.push({
|
||||
title: "",
|
||||
description: "",
|
||||
img: "",
|
||||
tags: "",
|
||||
url: "",
|
||||
blank: false,
|
||||
button_text: "",
|
||||
|
||||
Reference in New Issue
Block a user