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

商品列表hover

This commit is contained in:
songliang 2022-08-04 16:19:03 +08:00
parent bdb36da1f7
commit 641dce77e8
3 changed files with 185 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -566,6 +566,79 @@ footer .footer-bottom {
}
.product-wrap .image {
margin-bottom: 10px;
position: relative;
}
.product-wrap .image .image-old {
opacity: 1;
transition: all ease-out 0.4s;
}
.product-wrap .image .image-hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.product-wrap .image .button-wrap {
width: 100%;
position: absolute;
z-index: 40;
bottom: -30px;
opacity: 0;
transition: all 0.3s ease-out;
display: flex;
justify-content: center;
}
.product-wrap .image .button-wrap a {
color: white;
display: block;
margin: 4px;
background-color: #252323;
width: 36px;
height: 38px;
text-align: center;
line-height: 38px;
border-radius: 4px;
text-decoration: none;
position: relative;
}
.product-wrap .image .button-wrap a > span {
font-size: 11px;
text-transform: none;
line-height: 18px;
transition: all 0.2s ease-in-out;
opacity: 0;
background-color: #000;
padding: 0 5px;
white-space: nowrap;
position: absolute;
bottom: calc(100% + 20px);
left: 50%;
transform: translate(-50%);
}
.product-wrap .image .button-wrap a > span::before {
content: "";
border: 5px solid transparent;
border-top-color: #000;
position: absolute;
bottom: -9px;
left: 50%;
margin-left: -5px;
}
.product-wrap .image .button-wrap a:hover span {
opacity: 1;
bottom: calc(100% + 7px);
z-index: 2;
}
.product-wrap .image:hover .image-hover {
opacity: 1;
transition: all ease-out 0.4s;
}
.product-wrap .image:hover .image-old {
opacity: 0;
}
.product-wrap:hover .button-wrap {
bottom: 10px;
opacity: 1;
}
.product-wrap .product-name {
margin-bottom: 6px;

91
resources/beike/shop/default/css/product-style.scss vendored
View File

@ -4,8 +4,99 @@
margin-bottom: 26px;
text-align: center;
.image {
margin-bottom: 10px;
position: relative;
.image-old {
opacity: 1;
transition: all ease-out .4s;
}
.image-hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.button-wrap {
width: 100%;
position: absolute;
z-index: 40;
bottom: -30px;
opacity: 0;
transition: all .3s ease-out;
display: flex;
justify-content: center;
a {
color: white;
display: block;
margin: 4px;
background-color: #252323;
width: 36px;
height: 38px;
text-align: center;
line-height: 38px;
border-radius: 4px;
text-decoration: none;
position: relative;
>span {
font-size: 11px;
text-transform: none;
line-height: 18px;
transition: all .2s ease-in-out;
opacity: 0;
background-color: #000;
padding: 0 5px;
white-space: nowrap;
position: absolute;
bottom: calc(100% + 20px);
left: 50%;
transform: translate(-50%);
&::before {
content: "";
border: 5px solid transparent;
border-top-color: #000;
position: absolute;
bottom: -9px;
left: 50%;
margin-left: -5px;
}
}
&:hover {
span {
opacity: 1;
bottom: calc(100% + 7px);
z-index: 2;
}
}
}
}
&:hover {
.image-hover {
opacity: 1;
transition: all ease-out .4s;
}
.image-old {
opacity: 0;
}
}
}
&:hover {
.button-wrap {
bottom: 10px;
opacity: 1;
}
}
.product-name {

23
themes/default/shared/product.blade.php
View File

@ -1,8 +1,27 @@
<div class="product-wrap">
<div class="image"><a href="{{ $product['url'] }}"><img src="{{ $product['images'][0] ?? image_resize('', 400, 400) }}" class="img-fluid"></a></div>
<div class="image">
<a href="{{ $product['url'] }}">
<div class="image-old">
<img src="{{ $product['images'][0] ?? image_resize('', 400, 400) }}" class="img-fluid">
</div>
<div class="image-hover">
<img src="{{ $product['images'][1] ?? image_resize('', 400, 400) }}" class="img-fluid">
</div>
</a>
<div class="button-wrap">
<a href="" class="btn-left">
<i class="iconfont">&#xe77f;</i>
<span>加入收藏</span>
</a>
<a href="" class="btn-right">
<i class="iconfont">&#xf13a;</i>
<span>加入购物车</span>
</a>
</div>
</div>
<div class="product-name">{{ $product['name'] }}</div>
<div class="product-price">
<span class="price-new">{{ $product['price_format'] }}</span>
<span class="price-lod">{{ $product['origin_price_format'] }}</span>
</div>
</div>
</div>