这是一段由eyoucms开发的网站，我想不限制产品展示条数，但是代码只展示4个， 以下是源码 <section class="home-mainproduct">
<div class="l-wrap" data-
aos="zoom-in">
<div class="mainpro-top">
<div class="mainpro-title">
<div class="home-title">{eyou
:field name=&
#39;typename&
#39; /}</div>
</div>
<div class="mainpro-button">
<div class="mainproduct-button-prev"><em class="iconfont icon-jiantou_xiangzuo"></em></div>
<div class="mainproduct-button-next"><em class="iconfont icon-jiantou_xiangyou"></em></div>
</div>
</div>
<div class="swiper" id="homemainproduct">
<div class="swiper-wrapper homepro-list"> {eyou
:artlist titlelen=&
#39;30&
#39; loop="40"}
<div class="swiper-slide"> <a href="{$field.arcurl}" class="lazy-wrap img" title="{$field.title}"> <img data-src="{$field.litpic}" data-sizes="224x0 768w,224x0 1024w,261x0 1280w,282x0 1366w,301x0 1440w,341x0 1600w" width="380" height="380" class="lazy" alt="{$field.title}"/> {eyou
:assign name=&
#39;tjsp&
#39; value=&
#39;$eyou.field.tjsp&
#39;}
{eyou
:empty name=&
#39;$tjsp&
#39;}
{eyou
:else /} <em class="iconfont icon-videoplay"></em> {/eyou
:empty} <span class="lazy-load"></span> </a>
<div class="info"> <a href="{$field.arcurl}" class="title">{$field.title}</a>
<p class="text">{$field.seo_description|html_msubstr=
###,0,78,true}</p>
<a href="{$field.arcurl}" class="home-more" rel="nofollow" aria-label="{$field.title}">Read More <em class="iconfont icon-jiantou_xiangyou"></em></a> </div>
</div>
{/eyou
:artlist} </div>
</div>
<div class="mainproduct-more"> <a href="{eyou
:field name=&
#39;typeurl&
#39; /}" class="home-more" title="{eyou
:field name=&
#39;typename&
#39; /}" rel="nofollow">Main Products<em class="iconfont icon-jiantou_xiangyou"></em></a> </div>
</div>
</section>css样式是.home-mainproduct
#homemainproduct {
margin-top
: 30px;
height
: 658px
}
.home-mainproduct .homepro-list .swiper-slide {
background
: #FFF;
display
: flex;
align-items
: center;
height
: calc((100% - 30px)/ 2);
border-radius
: 4px;
position
: relative
}
.home-mainproduct .homepro-list .swiper-slide
::before {
content
: "";
position
: absolute;
top
: 0px;
left
: 50%;
transform
: translateX(-50%);
width
: 80%;
height
: 4px;
background
: #d8d8d8;
border-radius
: 2px;
z-index
: 9;
transition
: all .1s linear
}
.home-mainproduct .homepro-list .swiper-slide
:hover
::before {
background
: var(--color)
}
.home-mainproduct .homepro-list .swiper-slide
:hover .info .title {
color
: var(--color)
}
.home-mainproduct .homepro-list .swiper-slide .img {
width
: 40%;
display
: flex;
align-items
: center;
justify-content
: center;
height
: 100%;
position
: relative;
z-index
: 1
}
.home-mainproduct .homepro-list .swiper-slide
:hover .img img {
transform
: scale(1.03)
}
.home-mainproduct .homepro-list .swiper-slide .img img {
max-width
: 100%;
max-height
: 100%;
width
: 100%;
height
: auto;
object-fit
: cover
}
.home-mainproduct .homepro-list .swiper-slide .info {
flex
: 1;
padding
: 20px
}
.home-mainproduct .homepro-list .swiper-slide .info .title {
font-size
: 18px;
font-weight
: var(--fontblod5);
display
: -webkit-box;
-webkit-box-orient
: vertical;
-webkit-line-clamp
: 2;
overflow
: hidden;
margin-bottom
: 20px
}
.home-mainproduct .homepro-list .swiper-slide .info .text {
font-size
: 16px;
display
: -webkit-box;
-webkit-box-orient
: vertical;
-webkit-line-clamp
: 2;
overflow
: hidden;
margin-bottom
: 20px;
color
: var(--summarycolor)
}
.home-mainproduct .homepro-list .swiper-slide .info .home-more {
min-width
: 140px;
height
: 44px
}
.home-mainproduct .mainproduct-more {
text-align
: center;
margin-top
: 4%
}
本文介绍了如何通过新增floating属性来改进<aos:menu/>标签。当floating设置为true时，该菜单将作为激活型菜单使用，例如右键菜单或按钮下拉菜单；而当floating设置为false时，则该菜单将直接渲染到容器组件的主体可视区域内。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
