feat: 将荣誉资质模块布局重构为响应式网格,并移除其描述字段
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
43
js/index.js
43
js/index.js
@@ -90,29 +90,16 @@ $(function () {
|
||||
$("#certBox").empty();
|
||||
$("#partnerBox").empty();
|
||||
|
||||
// 荣誉资质 - 左右布局
|
||||
// 荣誉资质 - 网格布局
|
||||
if (commentObj.honor && commentObj.honor.length > 0) {
|
||||
commentObj.honor.forEach((item, index) => {
|
||||
// 生成左侧Tab按钮
|
||||
$("#honorTabs").append(`
|
||||
<button class="honor-tab ${index === 0 ? 'active' : ''}" data-index="${index}">
|
||||
<div class="honor-tab-content">
|
||||
<h4>${item.name}</h4>
|
||||
${item.description ? `<p>${item.description}</p>` : ''}
|
||||
</div>
|
||||
</button>
|
||||
`);
|
||||
|
||||
// 生成右侧图片slide
|
||||
$("#honorSlides").append(`
|
||||
<div class="honor-slide ${index === 0 ? 'active' : ''}">
|
||||
<img src="${item.img}" alt="${item.name}">
|
||||
// 生成网格项
|
||||
$("#honorGrid").append(`
|
||||
<div class="honor-grid-item">
|
||||
<img src="${item.img}" alt="${item.name}" title="${item.name}">
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
|
||||
// 初始化点击切换事件
|
||||
initHonorTabs();
|
||||
}
|
||||
// 合作伙伴
|
||||
if (commentObj.partner && commentObj.partner.length > 0) {
|
||||
@@ -266,26 +253,6 @@ $(function () {
|
||||
location.href = "partner/cps.html";
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// 荣誉资质切换功能
|
||||
// ============================================
|
||||
function initHonorTabs() {
|
||||
const $tabs = $('.honor-tab');
|
||||
const $slides = $('.honor-slide');
|
||||
|
||||
$tabs.on('click', function () {
|
||||
const index = $(this).data('index');
|
||||
|
||||
// 更新tab active状态
|
||||
$tabs.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
// 更新slide active状态
|
||||
$slides.removeClass('active');
|
||||
$slides.eq(index).addClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 全场景全栈解决方案 - 幻灯片功能
|
||||
// ============================================
|
||||
|
||||
Reference in New Issue
Block a user