需要展示如上图所示:右下角pdf
这种样式的标签
<ul class="list">
<li class="item" v-for="(item,index) in showLlist.group">
<div class="cont"><img src="./img/2.jpg" alt=""></div>
<div class="tt"></div>
<span class="text">pdf</span>
</li>
</ul>
.list{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.item{
width: 23.5%;
border: 1px solid red;
height: 30%;
font-size: .4rem;
margin-right: 1.8%;
margin-bottom: .25rem;
position: relative;
overflow: hidden;
}
.item .cont{
width: 100%;
height: 100%;
}
.item img{
width: 100%;
height: 100%;
object-fit: cover;
}
.item:nth-child(4n){
margin-right: 0;
}
.tt{
position: absolute;
right: -0.45rem;
bottom: 0;
width: .9rem;
height: 2.5rem;
transform: skew(-45deg,0);
background: #f59a24;
line-height: 2.5rem;
}
.text{
position: absolute;
display: inline-block;
transform: rotate(-45deg);
height: .67rem;
bottom: .27rem;
right: 0;
font-size: .86rem;
color: #fff;
line-height: .6rem;
overflow: hidden;
}