vue实现列表文字太长显示展开收起
<div class="content"v-for="(item, index) in evaluate":key="index"><div class="photo"><img src="@/assets/15Qrg.png" alt=...
·
<div class="content"
v-for="(item, index) in evaluate"
:key="index"
>
<div class="photo">
<img src="@/assets/15Qrg.png" alt="">
</div>
<div class="eval_content">
<div class="info">
<div class="info_top">
<span>{{item.from_name}}</span>
<span>{{item.create_time}}</span>
</div>
<van-rate :value="item.score" readonly />
</div>
<div>
<p class="desc" :class="{active: item.isShowMore}">{{item.content}}<span class="isShow" v-if="item.isDescStatus" @click="item.isShowMore = !item.isShowMore">
{{item.isShowMore ? '展开' : '收起'}}
</span></p>
</div>
<ul>
<li>
<img src="@/assets/15Qrg.png" alt="">
</li>
<li>
<img src="@/assets/15Qrg.png" alt="">
</li>
<li>
<img src="@/assets/15Qrg.png" alt="">
</li>
</ul>
</div>
</div>
data.evaluate.list.map((item, index) => {
if (item.content.length > 65) {
item.isShowMore = true;
item.isDescStatus = true;
} else {
item.isShowMore = false;
item.isDescStatus = false;
}
if (index === 0 || index === 1) {
arr.push(item)
}
})
this.evaluate = [...arr];
.evaluate {
background-color: #fff;
border-radius: rem(10) rem(10) 0px 0px;
margin: rem(30) rem(25);
.title {
font-size: rem(36);
color: #2D2D2D;
font-weight:500;
padding: rem(50) 0 0 rem(39);
}
.content {
display: flex;
margin: rem(35) rem(38) 0;
padding-bottom: rem(35);
border-bottom: 1px solid #E4E4E4;
.photo {
width: rem(86);
height: rem(86);
border-radius: 50%;
overflow: hidden;
background-color: #ccc;
img {
width: 100%;
height: 100%;
}
}
.eval_content {
flex: 1;
margin-left: rem(27);
.info {
.info_top {
display: flex;
margin-bottom: rem(15);
span:nth-child(1) {
font-weight:400;
font-size: rem(36);
color: #222;
}
span:nth-child(2) {
flex: 1;
text-align: right;
color: #888;
font-weight:400;
font-size: rem(20);
line-height: rem(50);
}
}
}
.desc {
font-size: rem(24);
color: #444;
line-height: rem(38);
font-weight:400;
margin: rem(38) 0 rem(29) 0;
position: relative;
.isShow {
position: absolute;
bottom: 0;
right: rem(8);
color: #FF4600;
font-size: rem(20);
background: #fff;
padding-left: rem(30);
}
}
.active {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
ul {
display: flex;
flex-wrap: wrap;
li {
width: 30%;
height: rem(154);
margin-right: rem(16);
margin-bottom: rem(16);
img {
width: 100%;
height: 100%;
}
}
li:nth-last-child(1) {
margin-right: 0;
}
}
}
}
.content:nth-child(3) {
border-bottom: none;
}
.more {
height: rem(80);
line-height: rem(80);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
span {
color: #FF4600;
font-weight:400;
font-size: rem(24);
margin-right: rem(20);
}
img {
width: rem(8);
height: rem(16);
}
}
}
更多推荐
已为社区贡献8条内容
所有评论(0)