swiper组件
同行居中展示且限制2行
//HTML部分 <div class="blockHeight"> <div class="upBlock"> <span class="topicWord" v-if="item.tag" v-text="item.tag">热</span> <span class="topicTitle" v-if="item.adviceTitle" v-text="item.adviceTitle"></span> <span class="topicTitle" v-else>此文案未配置</span> </div> </div> //CSS部分 .blockHeight{ display: flex; align-items: center; height: 2.5rem; } .upBlock{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break: break-all; margin: .5rem; padding-top: 0.7rem; } .topicWord{ background-color:rgb(251, 92, 95); border-radius: 0.2rem; float: left; text-align: center; width: 0.8rem; height: 0.85rem; margin-right: 0.5rem; font-size: 0.5rem; color: white; } .topicTitle{ color: black; font-size: .6rem; }
背景图片动态获取
:style="item.imageUrl?'background:url('+item.imageUrl+');background-size: 100% 100%;':''"
效果如下图
HTML部分
<div class="swiper-banner swiper-container" > <div class="swiper-wrapper"> <div class="swiper-slide bannerSlide" v-for="(item,index) in recommendData[1]"> <div class="moduleBlock" :style="item.imageUrl?'background:url('+item.imageUrl+');background-size: 100% 100%;':''" v-if="(item.adviceCategory==2)||(item.adviceCategory==1)||(!item.adviceCategory)" @click='gotoRec(item)'> <div class="blockHeight"> <div class="upBlock"> <span class="topicWord" v-if="item.tag" v-text="item.tag">热</span> <span class="topicTitle" v-if="item.adviceTitle" v-text="item.adviceTitle"></span> <span class="topicTitle" v-else>此文案未配置</span> </div> </div> <div class="commentList"> <span class="commentContent" v-if="item.adviceDesc" v-text="item.adviceDesc"></span> <span class="commentContent" v-else>此文案未配置</span> </div> </div> <div class="moduleBlock" :style="item.imageUrl?'background:url('+item.imageUrl+');background-size: 100% 100%;':''" v-if="(item.adviceCategory==4)||(item.adviceCategory==5)" @click='gotoRec(item)'> <div class="blockHeight"> <div class="upBlock"> <span class="topicWord" v-if="item.tag" v-text="item.tag">热</span> <span class="topicTitle" v-if="item.adviceTitle" v-text="item.adviceTitle"></span> <!-- <div class="topicTitle" v-else v-text="getTitle(item.adviceRelateId)"></div> --> </div> </div> <div class="commentList" v-if="item.adviceDesc"> <span class="commentContent" v-if="item.adviceDesc" v-text="item.adviceDesc"></span> <!-- <span class="commentContent" v-else v-text="getComment(item.adviceRelateId)"></span> --> </div> </div> </div> </div> <div class="bannerPage swiper-pagination"></div> </div> </div>
CSS部分
.swiper-banner { width: 100%; height: 135px; background-color: #fff; margin-bottom: .5rem; } .moduleBlock{ height: 5rem; border-radius: 0.4rem; margin: 0.8rem; background-color: rgb(255,247,247); background-size: 100% 100%; } .blockHeight{ display: flex; align-items: center; height: 2.5rem; } .upBlock{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break: break-all; margin: .5rem; padding-top: 0.7rem; } .topicWord{ background-color:rgb(251, 92, 95); border-radius: 0.2rem; float: left; text-align: center; width: 0.8rem; height: 0.85rem; margin-right: 0.5rem; font-size: 0.5rem; color: white; } .topicTitle{ color: black; font-weight: bold; font-size: .6rem; } .commentList{ margin:0.7rem } .commentContent{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; word-break: break-all; font-size: 0.5rem; }