wjd
/
rui-neng
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(about): 调整集团成员交互

master
peijunlei 2 weeks ago
parent
eeb87e1676
commit
5261a96ae1
4 changed files with 65 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      public/themes/dist_static/static/css/about.css
  2. 33
      public/themes/dist_static/static/js/about.js
  3. 22
      public/themes/website/1/en/demo/about.html
  4. 22
      public/themes/website/1/zh/demo/about.html

19
public/themes/dist_static/static/css/about.css
View File

@ -498,23 +498,19 @@
.ab-members__more {
min-width: 12.5rem;
}
.ab-members__logos {
.ab-members__logos-swiper {
width: 100%;
overflow: hidden;
}
.ab-members__logos-swiper .ab-members__logos {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 1rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: thin;
box-sizing: border-box;
}
.ab-members__logo {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 10rem;
width: 100%;
height: 6.25rem;
padding: 0;
border: 0;
@ -523,6 +519,7 @@
color: inherit;
cursor: pointer;
transition: background var(--duration-fast) var(--easing);
box-sizing: border-box;
}
.ab-members__logo img {
display: block;

33
public/themes/dist_static/static/js/about.js
View File

@ -74,10 +74,43 @@ function initHonorsToggle() {
btn.querySelector("span").textContent = expanded ? t("about.collapse") : t("about.expand_more");
});
}
function initMembersLogosSwiper() {
const el = document.querySelector(".ab-members__logos-swiper");
if (!el || !window.Swiper) return;
const count = el.querySelectorAll(".ab-members__logo").length;
const enableCarousel = count > 5;
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
new window.Swiper(el, {
slidesPerView: 5,
spaceBetween: 16,
watchOverflow: true,
rewind: enableCarousel,
autoplay: enableCarousel && !reduceMotion ? {
delay: 3e3,
disableOnInteraction: false,
pauseOnMouseEnter: true
} : false,
breakpoints: {
0: {
slidesPerView: 2,
spaceBetween: 12
},
576: {
slidesPerView: 3,
spaceBetween: 16
},
993: {
slidesPerView: 5,
spaceBetween: 16
}
}
});
}
$(function() {
setActiveNav();
initHistorySwiper();
counterUpInit();
initHonorsToggle();
initMembersLogosSwiper();
});
//#endregion

22
public/themes/website/1/en/demo/about.html
View File

@ -244,16 +244,18 @@
{php}$member_idx++;{/php}
{/hcTaglib:content}
</div>
<div class="ab-members__logos nav" role="tablist" aria-label="Group members">
{php}$member_idx = 0;{/php}
{hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"}
<button type="button" class="ab-members__logo nav-link {if $member_idx == 0}active{/if}" id="ab-member-tab-{$case_top.id}"
data-bs-toggle="tab" data-bs-target="#ab-member-panel-{$case_top.id}"
role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
<img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
</button>
{php}$member_idx++;{/php}
{/hcTaglib:content}
<div class="ab-members__logos-swiper swiper">
<div class="ab-members__logos nav swiper-wrapper" role="tablist" aria-label="Group members">
{php}$member_idx = 0;{/php}
{hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"}
<button type="button" class="ab-members__logo nav-link swiper-slide {if $member_idx == 0}active{/if}" id="ab-member-tab-{$case_top.id}"
data-bs-toggle="tab" data-bs-target="#ab-member-panel-{$case_top.id}"
role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
<img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
</button>
{php}$member_idx++;{/php}
{/hcTaglib:content}
</div>
</div>
</div>
</div>

22
public/themes/website/1/zh/demo/about.html
View File

@ -244,16 +244,18 @@
{php}$member_idx++;{/php}
{/hcTaglib:content}
</div>
<div class="ab-members__logos nav" role="tablist" aria-label="集团成员">
{php}$member_idx = 0;{/php}
{hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"}
<button type="button" class="ab-members__logo nav-link {if $member_idx == 0}active{/if}" id="ab-member-tab-{$case_top.id}"
data-bs-toggle="tab" data-bs-target="#ab-member-panel-{$case_top.id}"
role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
<img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
</button>
{php}$member_idx++;{/php}
{/hcTaglib:content}
<div class="ab-members__logos-swiper swiper">
<div class="ab-members__logos nav swiper-wrapper" role="tablist" aria-label="集团成员">
{php}$member_idx = 0;{/php}
{hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"}
<button type="button" class="ab-members__logo nav-link swiper-slide {if $member_idx == 0}active{/if}" id="ab-member-tab-{$case_top.id}"
data-bs-toggle="tab" data-bs-target="#ab-member-panel-{$case_top.id}"
role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
<img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
</button>
{php}$member_idx++;{/php}
{/hcTaglib:content}
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save