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

商品详情swiper

This commit is contained in:
songliang 2022-08-02 14:56:19 +08:00
parent 8e0330b01c
commit d10e46b466
3 changed files with 130 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/build/beike/shop/default/css/app.css vendored
View File

@ -622,21 +622,65 @@ body.page-account .account-card .order-wrap .text {
font-size: 1rem;
}
body.page-product .product-image .swiper {
height: 538px;
}
body.page-product .product-image .swiper:hover .swiper-pager > div {
background-color: rgba(255, 255, 255, 0.548);
opacity: 1;
}
body.page-product .product-image .swiper:hover .swiper-pager > div:hover {
background-color: rgb(255, 255, 255);
}
body.page-product .product-image .left {
margin-right: 1rem;
}
body.page-product .product-image .left > div {
body.page-product .product-image .left > .swiper > div > div {
border: 1px solid #eee;
margin-bottom: 10px;
width: 80px;
height: 80px;
padding: 2px;
background-color: #fff;
cursor: pointer;
}
body.page-product .product-image .left > div.active, body.page-product .product-image .left > div:hover {
body.page-product .product-image .left > .swiper > div > div.active, body.page-product .product-image .left > .swiper > div > div:hover {
border: 1px solid #3a3a3a;
}
body.page-product .product-image .left .swiper-pager > div {
opacity: 0;
background-color: rgba(255, 255, 255, 0);
transition: all 0.5s;
}
body.page-product .product-image .left .swiper-pager .swiper-button-next {
border: 0;
top: 518px;
left: 50%;
height: 55px;
width: 30px;
transform-origin: center;
transform: rotate(90deg) translate(0, 25%);
}
body.page-product .product-image .left .swiper-pager .swiper-button-next:hover, body.page-product .product-image .left .swiper-pager .swiper-button-next.active {
border: 0 !important;
}
body.page-product .product-image .left .swiper-pager .swiper-button-next::after {
font-size: 18px;
}
body.page-product .product-image .left .swiper-pager .swiper-button-prev {
border: 0;
top: 8px;
left: 50%;
height: 55px;
width: 30px;
transform-origin: center;
transform: rotate(90deg) translate(0, 25%);
}
body.page-product .product-image .left .swiper-pager .swiper-button-prev:hover, body.page-product .product-image .left .swiper-pager .swiper-button-prev.active {
border: 0 !important;
}
body.page-product .product-image .left .swiper-pager .swiper-button-prev::after {
font-size: 18px;
}
body.page-product .product-image .right {
border: 1px solid #eee;
}

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

@ -2,22 +2,77 @@
body.page-product {
.product-image {
.swiper {
height: 538px;
&:hover {
.swiper-pager > div {
background-color: rgba(255, 255, 255, 0.548);
opacity: 1;
&:hover {
background-color: rgba(255, 255, 255);
}
}
}
}
.left {
margin-right: 1rem;
> div {
> .swiper > div > div{
border: 1px solid #eee;
margin-bottom: 10px;
width: 80px;
height: 80px;
padding: 2px;
background-color: #fff;
cursor: pointer;
&.active, &:hover {
border: 1px solid #3a3a3a;
}
}
.swiper-pager {
> div {
opacity: 0;
background-color: rgba(255, 255, 255, 0);
transition: all .5s;
}
.swiper-button-next {
border: 0;
top: 518px;
left: 50%;
height: 55px;
width: 30px;
transform-origin: center;
transform: rotate(90deg) translate(0,25%);
&:hover,&.active {
border: 0 !important;
}
&::after {
font-size: 18px;
}
}
.swiper-button-prev{
border: 0;
top: 8px;
left: 50%;
height: 55px;
width: 30px;
transform-origin: center;
transform: rotate(90deg) translate(0,25%);
&:hover,&.active {
border: 0 !important;
}
&::after {
font-size: 18px;
}
}
}
}
.right {

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

@ -20,9 +20,15 @@
<div class="col-12 col-md-6">
<div class="product-image d-flex align-items-start">
<div class="left swiper mySwiper" v-if="images.length">
<div class="swiper-wrapper">
<div class="swiper-slide" :class="!index ? 'active' : ''" :data-image="image.image" v-for="image, index in images"><img :src="image.thumb" class="img-fluid"></div>
<div class="left" v-if="images.length">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" :class="!index ? 'active' : ''" :data-image="image.image" v-for="image, index in images"><img :src="image.thumb" class="img-fluid"></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>
@ -254,10 +260,26 @@
}
});
$("body").on("mouseover", ".product-image .left > div", function() {
$("body").on("mouseover", ".product-image .left > .swiper > div > div", function() {
const image = $(this).data('image')
$('.product-image .right').find('img').attr('src', image);
$(this).addClass('active').siblings().removeClass('active');
});
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 6,
spaceBetween:10,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer: true,
});
</script>
@endpush