yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

发达
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-22 00:29:46 +08:00
parent 637260e711
commit b5cda581eb
3 changed files with 25 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -19,13 +19,9 @@
<body id="index"> <body id="index">
<header>{include file="public/header"}</header> <header>{include file="public/header"}</header>
<!-- banner --> <!-- banner：去掉图片轮播，仅保留文案轮播 + 右侧地球 -->
<section class="section banner"> <section class="section banner">
<div class="swiper banner-cont"> <div class="banner-cont">
<div class="swiper-wrapper" id="bannerWrapper"></div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 固定文案区域，使用第一张轮播图的标题/描述/按钮 -->
<div class="banner-text"> <div class="banner-text">
<div class="section-content"> <div class="section-content">
<div class="banner-copy"> <div class="banner-copy">
@@ -43,7 +39,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="banner-s"> <div class="banner-s">
<div class="section-content banner-list"> <div class="section-content banner-list">
<div class="banner-item" id="cloud-box"> <div class="banner-item" id="cloud-box">

64
js/index.js
View File

@@ -32,8 +32,8 @@ $(function () {
} }
} }
isRecommend(); isRecommend();
let bannerSwiper = null;
let bannerData = []; let bannerData = [];
let bannerTextTimer = null;
const updateBannerText = (index) => { const updateBannerText = (index) => {
if (!Array.isArray(bannerData) || bannerData.length === 0) { if (!Array.isArray(bannerData) || bannerData.length === 0) {
@@ -57,59 +57,35 @@ $(function () {
} }
}; };
const initBannerSwiper = () => { // 简单的文案轮播（不再使用 Swiper 图片，仅轮播标题/描述/按钮）
if (bannerSwiper) { const startBannerTextLoop = () => {
bannerSwiper.destroy(true, true); if (!Array.isArray(bannerData) || bannerData.length === 0) {
}
bannerSwiper = new Swiper(".swiper", {
loop: true,
autoplay: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
slideChange: function () {
// realIndex 对应原始数据下标
updateBannerText(this.realIndex || 0);
},
},
});
};
const renderBannerSlides = (list = []) => {
const wrapper = document.getElementById("bannerWrapper");
if (!wrapper) {
return; return;
} }
if (!Array.isArray(list) || list.length === 0) { let current = 0;
initBannerSwiper(); // 初始化先展示第一条
updateBannerText(current);
// 清理旧定时器
if (bannerTextTimer) {
clearInterval(bannerTextTimer);
bannerTextTimer = null;
}
// 只有一条时不需要轮播
if (bannerData.length === 1) {
return; return;
} }
wrapper.innerHTML = ""; bannerTextTimer = setInterval(() => {
list.forEach((item) => { current = (current + 1) % bannerData.length;
const slide = document.createElement("div"); updateBannerText(current);
slide.className = "swiper-slide"; }, 5000);
const targetAttr = item.blank ? "_blank" : "_self";
const imgHtml = `<img class="img-responsive img center-block" src="${
item.img || ""
}" alt="${item.alt || item.title || "banner"}">`;
const mediaBlock = item.url
? `<a href="${item.url}" target="${targetAttr}">${imgHtml}</a>`
: imgHtml;
slide.innerHTML = mediaBlock;
wrapper.appendChild(slide);
});
initBannerSwiper();
}; };
// 设置首页函数 // 设置首页函数
function setIndexData() { function setIndexData() {
const commentObj = JSON.parse(sessionStorage.commentData); const commentObj = JSON.parse(sessionStorage.commentData);
bannerData = commentObj.banner || []; bannerData = commentObj.banner || [];
renderBannerSlides(bannerData); // 仅轮播文案
// 初始化时使用第一张轮播图的文案 startBannerTextLoop();
updateBannerText(0);
if (commentObj.honor.length > 0) { if (commentObj.honor.length > 0) {
commentObj.honor.forEach((item) => { commentObj.honor.forEach((item) => {
$("#certBox").append(`<div class="cert-item"> $("#certBox").append(`<div class="cert-item">

23
plugins/addon/theme_configurator/template/admin/index.html
View File

@@ -257,9 +257,9 @@
</t-tab-panel> </t-tab-panel>
<t-tab-panel value="home" label="首页内容"> <t-tab-panel value="home" label="首页内容">
<t-card class="theme-card" title="首页轮播" bordered> <t-card class="theme-card" title="首页轮播文案" bordered>
<div v-if="!bannerList.length" class="empty-tip"> <div v-if="!bannerList.length" class="empty-tip">
还没有轮播图，点击下方按钮添加。 还没有轮播文案，点击下方按钮添加。
</div> </div>
<div class="banner-item" v-for="(banner, index) in bannerList" :key="index"> <div class="banner-item" v-for="(banner, index) in bannerList" :key="index">
<div class="banner-item__header"> <div class="banner-item__header">
@@ -277,25 +277,6 @@
<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>
<div class="upload-row">
<t-input v-model="banner.img" placeholder="/upload/banner.png"></t-input>
<t-upload
theme="custom"
:action="uploadUrl"
:headers="uploadHeaders"
:format-response="uploadFormatResponse"
:show-upload-progress="false"
:max="1"
@success="(ctx) => handleUpload(['banner', index, 'img'], ctx)"
>
<t-button size="small" class="ml-10">
<t-icon name="upload" size="small" /> 上传
</t-button>
</t-upload>
</div>
</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>