85 lines
2.8 KiB
PHP
85 lines
2.8 KiB
PHP
@push('header')
|
|
<script src="{{ asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
|
|
<link rel="stylesheet" href="{{ asset('vendor/swiper/swiper-bundle.min.css') }}">
|
|
@endpush
|
|
|
|
<section class="module-item {{ $design ? 'module-item-design' : ''}}" id="module-{{ $module_id }}">
|
|
@include('design._partial._module_tool')
|
|
|
|
<div class="module-info module-product mb-3 mb-md-5 swiper-style-plus">
|
|
<div class="container position-relative">
|
|
<div class="module-title">{{ $content['title'] }}</div>
|
|
@if ($content['products'])
|
|
<div class="swiper module-product-{{ $module_id }} module-slideshow">
|
|
<div class="swiper-wrapper">
|
|
@foreach ($content['products'] as $product)
|
|
<div class="swiper-slide">
|
|
@include('shared.product')
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination rectangle module-product-{{ $module_id }}-pagination"></div>
|
|
<div class="swiper-button-prev product-prev"></div>
|
|
<div class="swiper-button-next product-next"></div>
|
|
@elseif (!$content['products'] and $design)
|
|
<div class="row">
|
|
@for ($s = 0; $s < 4; $s++)
|
|
<div class="col-6 col-md-4 col-lg-3">
|
|
<div class="product-wrap">
|
|
<div class="image"><a href="javascript:void(0)"><img src="{{ asset('catalog/placeholder.png') }}" class="img-fluid"></a></div>
|
|
<div class="product-name">请配置商品</div>
|
|
<div class="product-price">
|
|
<span class="price-new">66.66</span>
|
|
<span class="price-lod">99.99</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function productSwiper() {
|
|
new Swiper ('.module-product-{{ $module_id }}', {
|
|
watchSlidesProgress: true,
|
|
breakpoints:{
|
|
320: {
|
|
slidesPerView: 2,
|
|
slidesPerGroup: 2,
|
|
spaceBetween: 10,
|
|
},
|
|
768: {
|
|
slidesPerView: 4,
|
|
slidesPerGroup: 4,
|
|
spaceBetween: 30,
|
|
},
|
|
},
|
|
spaceBetween: 30,
|
|
// 如果需要分页器
|
|
pagination: {
|
|
el: '.module-product-{{ $module_id }}-pagination',
|
|
clickable: true,
|
|
},
|
|
|
|
// 如果需要前进后退按钮
|
|
navigation: {
|
|
nextEl: '.product-next',
|
|
prevEl: '.product-prev',
|
|
},
|
|
})
|
|
}
|
|
|
|
@if ($design)
|
|
bk.loadStyle('{{ asset('vendor/swiper/swiper-bundle.min.css') }}');
|
|
bk.loadScript('{{ asset('vendor/swiper/swiper-bundle.min.js') }}', () => {
|
|
productSwiper();
|
|
})
|
|
@else
|
|
productSwiper();
|
|
@endif
|
|
|
|
</script>
|
|
</section> |