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

feat(solution2): 更新解决方案

master
peijunlei 3 weeks ago
parent
677f3c69ec
commit
e4afdff043
3 changed files with 101 additions and 16 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. 40
      public/themes/dist_static/static/css/solution2.css
  2. 36
      public/themes/dist_static/static/js/solution2.js
  3. 41
      public/themes/website/1/zh/demo/solution2.html

40
public/themes/dist_static/static/css/solution2.css
View File

@ -279,6 +279,7 @@
.sl2-core--dual .sl2-core__pagination {
display: none;
}
.sl2-scene {
padding-top: 7.5rem;
padding-bottom: 0;
@ -398,24 +399,37 @@
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
.sl2-more__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 3.125rem;
}
.sl2-more__title {
margin: 0 0 3.125rem;
margin: 0;
color: var(--color-text);
font-family: "MiSans VF", "PingFang SC", sans-serif;
font-size: var(--font-48);
font-weight: 400;
line-height: var(--font-64);
}
.sl2-more__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
.sl2-more__swiper {
overflow: hidden;
}
.sl2-more__arrows-mobile {
display: none;
}
.sl2-more__slide {
height: auto;
min-width: 0;
}
.sl2-more__card {
display: flex;
flex-direction: column;
gap: 2.8125rem;
min-width: 0;
height: 100%;
text-decoration: none;
transition: color var(--duration-fast) var(--easing);
}
@ -532,11 +546,7 @@
width: 520Px;
height: 390Px;
}
.sl2-more__grid {
grid-template-columns: 1fr;
gap: 32Px;
}
}
@media (max-width: 992px) {
.sl2-scene__slide {
width: 420Px;
@ -590,18 +600,20 @@
width: 300Px;
height: 260Px;
}
.sl2-scene__head .s-arrows {
display: none;
}
.sl2-scene__arrows-mobile {
.sl2-scene__arrows-mobile,
.sl2-more__arrows-mobile {
display: flex;
justify-content: flex-start;
margin-top: 24Px;
}
.sl2-scene__arrows-mobile .s-arrows {
.sl2-scene__arrows-mobile .s-arrows,
.sl2-more__arrows-mobile .s-arrows {
display: flex;
gap: 16Px;
}
.sl2-more__head .s-arrows {
display: none;
}
.sl2-core__slide {
width: 300Px;
}

36
public/themes/dist_static/static/js/solution2.js
View File

@ -71,9 +71,45 @@ function initSceneSwiper() {
}
});
}
function initMoreSwiper() {
const root = document.querySelector(".sl2-more");
const el = root?.querySelector(".sl2-more__swiper");
if (!root || !el || !window.Swiper) return;
new window.Swiper(el, {
slidesPerView: 3,
spaceBetween: 40,
speed: 600,
observer: true,
observeParents: true,
watchOverflow: true,
navigation: {
prevEl: root.querySelector(".sl2-more__head .s-arrows__prev"),
nextEl: root.querySelector(".sl2-more__head .s-arrows__next")
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 20,
navigation: {
prevEl: root.querySelector(".sl2-more__arrows-mobile .s-arrows__prev"),
nextEl: root.querySelector(".sl2-more__arrows-mobile .s-arrows__next")
}
},
768: {
slidesPerView: 2,
spaceBetween: 24
},
1200: {
slidesPerView: 3,
spaceBetween: 40
}
}
});
}
$(function () {
setActiveNav();
initCoreSwiper();
initSceneSwiper();
initMoreSwiper();
});
//#endregion

41
public/themes/website/1/zh/demo/solution2.html
View File

@ -201,10 +201,29 @@ $current_cate_id = $current_cate['id'] ?? 0;
{if !empty($sub_cates[5])}
<section class="sl2-more section__wrap" id="more" data-header-dark>
<h2 class="sl2-more__title">{$sub_cates[5]['title'] ?? ''}</h2>
<div class="sl2-more__grid">
<div class="sl2-more__head">
<h2 class="sl2-more__title">{$sub_cates[5]['title'] ?? ''}</h2>
<div class="s-arrows">
<button type="button" class="s-arrows__prev" aria-label="上一项">
<svg viewBox="0 0 12.2529 11.314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.252930" height="11.313965" fill="none" customFrame="#000000">
<path id="合并" d="M5.18202 1.41422L6.59622 0L12.2531 5.65686L12.2529 5.65702L10.8389 7.07108L6.59608 11.3139L5.18186 9.89966L8.4245 6.65702L-0 6.65702L0 4.657L8.42482 4.65702L5.18202 1.41422Z" fill="rgb(239,67,53)" fill-rule="evenodd" />
</svg>
</button>
<button type="button" class="s-arrows__next" aria-label="下一项">
<svg viewBox="0 0 12.2529 11.314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.252930" height="11.313965" fill="none" customFrame="#000000">
<path id="合并" d="M5.18202 1.41422L6.59622 0L12.2531 5.65686L12.2529 5.65702L10.8389 7.07108L6.59608 11.3139L5.18186 9.89966L8.4245 6.65702L-0 6.65702L0 4.657L8.42482 4.65702L5.18202 1.41422Z" fill="rgb(239,67,53)" fill-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="sl2-more__swiper swiper">
<div class="swiper-wrapper">
{php}$others = getOtherCategoryCategoryId($current_cate['id'],$seller_id,5);{/php}
{volist name="others" id="vo"}
<article class="swiper-slide sl2-more__slide">
<a class="sl2-more__card" href="{$vo.alias ?? ''}">
<div class="sl2-more__media">
<img src="{$vo.thumbnail.url ?? ''}" alt="" width="400" height="300" loading="lazy" />
@ -219,8 +238,26 @@ $current_cate_id = $current_cate['id'] ?? 0;
</span>
</div>
</a>
</article>
{/volist}
</div>
</div>
<div class="sl2-more__arrows-mobile">
<div class="s-arrows">
<button type="button" class="s-arrows__prev" aria-label="上一项">
<svg viewBox="0 0 12.2529 11.314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.252930" height="11.313965" fill="none" customFrame="#000000">
<path id="合并" d="M5.18202 1.41422L6.59622 0L12.2531 5.65686L12.2529 5.65702L10.8389 7.07108L6.59608 11.3139L5.18186 9.89966L8.4245 6.65702L-0 6.65702L0 4.657L8.42482 4.65702L5.18202 1.41422Z" fill="rgb(239,67,53)" fill-rule="evenodd" />
</svg>
</button>
<button type="button" class="s-arrows__next" aria-label="下一项">
<svg viewBox="0 0 12.2529 11.314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.252930" height="11.313965" fill="none" customFrame="#000000">
<path id="合并" d="M5.18202 1.41422L6.59622 0L12.2531 5.65686L12.2529 5.65702L10.8389 7.07108L6.59608 11.3139L5.18186 9.89966L8.4245 6.65702L-0 6.65702L0 4.657L8.42482 4.65702L5.18202 1.41422Z" fill="rgb(239,67,53)" fill-rule="evenodd" />
</svg>
</button>
</div>
</div>
</section>
{/if}
</main>

Write Preview
Loading…
Cancel
Save