wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

https://gitee.com/beikeshop/beikeshop/issues/I63IOI?from=project-issue 调整移动端商品详情页图片样式

This commit is contained in:
songliang 2022-12-07 18:09:58 +08:00
parent 2bbff19a86
commit 96577ab1d6
2 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/beike/shop/default/css/page-product.scss vendored
View File

@ -16,7 +16,7 @@ body.page-product {
} }
.product-image { .product-image {
.swiper { #swiper {
height: 250px; height: 250px;
@media (min-width: 480px) { @media (min-width: 480px) {
height: 400px; height: 400px;
@ -39,6 +39,14 @@ body.page-product {
} }
} }
#swiper-2 {
.swiper-pagination {
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #ff6600;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
}
}
.left { .left {
margin-right: 1rem; margin-right: 1rem;

56
themes/default/product.blade.php
View File

@ -17,26 +17,35 @@
<div class="row mb-5 mt-3 mt-md-0" id="product-top"> <div class="row mb-5 mt-3 mt-md-0" id="product-top">
<div class="col-12 col-lg-6 mb-3"> <div class="col-12 col-lg-6 mb-3">
<div class="product-image d-flex align-items-start"> <div class="product-image d-flex align-items-start">
@if(!is_mobile())
<div class="left" v-if="images.length"> <div class="left" v-if="images.length">
<div class="swiper" id="swiper"> <div class="swiper" id="swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" :class="!index ? 'active' : ''" v-for="image, index in images"> <div class="swiper-slide" :class="!index ? 'active' : ''" v-for="image, index in images">
<a href="javascript:;" :data-image="image.preview" :data-zoom-image="image.popup"> <a href="javascript:;" :data-image="image.preview" :data-zoom-image="image.popup">
<img :src="image.thumb" class="img-fluid"> <img :src="image.thumb" class="img-fluid">
</a> </a>
</div>
</div>
<div class="swiper-pager">
<div class="swiper-button-next new-feature-slideshow-next"></div>
<div class="swiper-button-prev new-feature-slideshow-prev"></div>
</div> </div>
</div> </div>
<div class="swiper-pager">
<div class="swiper-button-next new-feature-slideshow-next"></div>
<div class="swiper-button-prev new-feature-slideshow-prev"></div>
</div>
</div> </div>
</div> <div class="right" id="zoom">
<img :src="images.length ? images[0].preview : '{{ asset('image/placeholder.png') }}'" class="img-fluid">
<div class="right" id="zoom"> </div>
<img :src="images.length ? images[0].preview : '{{ asset('image/placeholder.png') }}'" class="img-fluid"> @else
</div> <div class="swiper" id="swiper-2">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="image, index in images">
<img :src="image.preview" class="img-fluid">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
@endif
</div> </div>
</div> </div>
@ -256,13 +265,12 @@
} }
}); });
$(document).on("mouseover", ".product-image .swiper .swiper-slide a", function() { $(document).on("mouseover", ".product-image #swiper .swiper-slide a", function() {
$(this).parent().addClass('active').siblings().removeClass('active'); $(this).parent().addClass('active').siblings().removeClass('active');
$('#zoom').trigger('zoom.destroy'); $('#zoom').trigger('zoom.destroy');
$('#zoom img').attr('src', $(this).attr('data-image')); $('#zoom img').attr('src', $(this).attr('data-image'));
$('#zoom').zoom({url: $(this).attr('data-zoom-image')}); $('#zoom').zoom({url: $(this).attr('data-zoom-image')});
}); });
var swiper = new Swiper("#swiper", { var swiper = new Swiper("#swiper", {
direction: "vertical", direction: "vertical",
slidesPerView: 1, slidesPerView: 1,
@ -294,6 +302,16 @@
observeParents: true observeParents: true
}); });
var swiper2 = new Swiper("#swiper-2", {
slidesPerView: 1,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
observer: true,
observeParents: true
});
$(document).ready(function () { $(document).ready(function () {
$('#zoom').trigger('zoom.destroy'); $('#zoom').trigger('zoom.destroy');
$('#zoom').zoom({url: $('#swiper a').attr('data-zoom-image')}); $('#zoom').zoom({url: $('#swiper a').attr('data-zoom-image')});