This commit is contained in:
@@ -105,11 +105,11 @@ a:hover {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn2 {
|
.btn2 {
|
||||||
padding: 8px 32px;
|
padding: 10px 40px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -75,6 +75,21 @@
|
|||||||
pointer-events: auto;
|
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 右对齐(和下方卡片区域右边保持一致) */
|
/* 3D 地球容器:与 section-content 右对齐(和下方卡片区域右边保持一致) */
|
||||||
.banner-globe {
|
.banner-globe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -25,6 +25,7 @@
|
|||||||
<div class="banner-text">
|
<div class="banner-text">
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
<div class="banner-copy">
|
<div class="banner-copy">
|
||||||
|
<div id="bannerTags" class="banner-tags"></div>
|
||||||
<h1 id="bannerTitle"></h1>
|
<h1 id="bannerTitle"></h1>
|
||||||
<p class="banner-desc" id="bannerDesc"></p>
|
<p class="banner-desc" id="bannerDesc"></p>
|
||||||
<a
|
<a
|
||||||
|
|||||||
26
js/index.js
26
js/index.js
@@ -41,6 +41,26 @@ $(function () {
|
|||||||
}
|
}
|
||||||
const idx = index >= 0 && index < bannerData.length ? index : 0;
|
const idx = index >= 0 && index < bannerData.length ? index : 0;
|
||||||
const item = bannerData[idx] || {};
|
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 || "");
|
$("#bannerTitle").text(item.title || "");
|
||||||
$("#bannerDesc").text(item.description || "");
|
$("#bannerDesc").text(item.description || "");
|
||||||
const $btn = $("#bannerButton");
|
const $btn = $("#bannerButton");
|
||||||
@@ -76,6 +96,12 @@ $(function () {
|
|||||||
}
|
}
|
||||||
bannerTextTimer = setInterval(() => {
|
bannerTextTimer = setInterval(() => {
|
||||||
current = (current + 1) % bannerData.length;
|
current = (current + 1) % bannerData.length;
|
||||||
|
// 淡入动画:先让文案透明,再渐显
|
||||||
|
const $copy = $(".banner-copy");
|
||||||
|
$copy
|
||||||
|
.stop(true, true)
|
||||||
|
.css({ opacity: 0 })
|
||||||
|
.animate({ opacity: 1 }, 400);
|
||||||
updateBannerText(current);
|
updateBannerText(current);
|
||||||
}, 5000);
|
}, 5000);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -277,6 +277,13 @@
|
|||||||
<label>描述</label>
|
<label>描述</label>
|
||||||
<t-input v-model="banner.description" placeholder="一句宣传语"></t-input>
|
<t-input v-model="banner.description" placeholder="一句宣传语"></t-input>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-item form-item--full">
|
||||||
|
<label>标签</label>
|
||||||
|
<t-input
|
||||||
|
v-model="banner.tags"
|
||||||
|
placeholder="如:高速,低价,安全(多个标签用逗号分隔)"
|
||||||
|
></t-input>
|
||||||
|
</div>
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label>跳转链接</label>
|
<label>跳转链接</label>
|
||||||
<t-input v-model="banner.url" placeholder="/cloud.html"></t-input>
|
<t-input v-model="banner.url" placeholder="/cloud.html"></t-input>
|
||||||
@@ -896,7 +903,7 @@
|
|||||||
this.bannerList.push({
|
this.bannerList.push({
|
||||||
title: "",
|
title: "",
|
||||||
description: "",
|
description: "",
|
||||||
img: "",
|
tags: "",
|
||||||
url: "",
|
url: "",
|
||||||
blank: false,
|
blank: false,
|
||||||
button_text: "",
|
button_text: "",
|
||||||
|
|||||||
Reference in New Issue
Block a user