Require:
The default list only displays 6 items of data. Click the 'Expand More' button to display all lists. Click the 'Collapse' button to restore the list to the default 6 items.
Picture effects
Directly upload the code
<template>
<div class="enterprise">
<!-- 内容区 -->
<div class="main">
<!-- 热门产品 -->
<div class="main-area products">
<div class="layer">
<div class="area-title">
<span class="ico-tit-left"></span><span class="tit-text">热门产品</span><span class="ico-tit-right"></span>
</div>
<div class="con">
<ul class="product-ul">
<li v-for="item,index in productLst" :key="index" v-if="showProductMore ? index < 6 : index + 1">
<img :src="item.pic" />
<div class="info">
<h2>{
{
item.title}}</h2>
<p>{
{
item.mgs}}</p>
</div>
</li>
</ul>
<div class="btn-showMore" v-if="productLst.length > 6">
<el-button type="primary" @click="showProductMore = !showProductMore">{
{
showProductMore ? '展开更多':'收起'}}<i
class="el-icon-plus"></i></el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'enterprise',
data () {
return {
//显示更多--热门产品
showProductMore: true,
//热门产品
productLst: [
{
pic: require('@/assets/img/enterprise/product-pic1.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
{
pic: require('@/assets/img/enterprise/product-pic2.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
{
pic: require('@/assets/img/enterprise/product-pic3.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
{
pic: require('@/assets/img/enterprise/product-pic4.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
{
pic: require('@/assets/img/enterprise/product-pic5.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
{
pic: require('@/assets/img/enterprise/product-pic6.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
{
pic: require('@/assets/img/enterprise/product-pic4.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
{
pic: require('@/assets/img/enterprise/product-pic5.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
{
pic: require('@/assets/img/enterprise/product-pic6.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', }
],
}
},
methods: {
}
}
</script>
<style scoped>
.layer {
width: 1300px;
margin: 0 auto;
}
/* 内容区 */
.main-area{
padding-bottom: 46px;
}
.area-title{
display: flex;
align-items: center;
justify-content: center;
padding:60px 0;
}
.tit-text{
font-size: 40px;
color: #393939;
line-height: 56px;
letter-spacing: 5px;
padding:0 68px;
font-weight: 500;
}
.ico-tit-left,.ico-tit-right{
width:143px;height: 18px;
display: block;
}
.ico-tit-left{
background: url(~assets/img/enterprise/ico-tit-left.png) center 0 no-repeat;
}
.ico-tit-right{
background: url(~assets/img/enterprise/ico-tit-right.png) center 0 no-repeat;
}
.product-ul{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap:wrap
}
.product-ul li{
width: 49%;
display: flex;
background: #F3F3F3;
margin-bottom:24px;
}
.product-ul li img{
width:280px;height: 270px;
}
.product-ul li .info{
width:350px;
padding:60px 24px 10px;
}
.product-ul li .info p{
font-size: 18px;
}
.el-button{
border-radius:0;
padding: 14px 20px;
}
.btn-showMore{
margin-top:20px;
display: flex;
justify-content: center;
}
.btn-showMore .el-button--primary{
background-color: #2B5077;
border-color: #2B5077;
}
</style>