<template v-for="(item, index) in (NoticeData?NoticeData.slice(0, 3):NoticeData)" :key="index">
<div class="item" @click="openAcademicleturesComView(item.id)">
<div class="ico">科技<br>成果</div>
<div class="box">
<div class="title">
<span class="text" style="max-width: 300px">{{item.achiveName}}</span>
<span class="text">{{item.stDate}}</span>
</div>
<div class="text" v-html="item.expert" style="
display: -webkit-box;
height: 40px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
">
</div>
</div>
</div>
</template>
.item{
padding: 10px;
&:hover{
box-shadow: 0px 4px 12px 0px rgba(12, 68, 204, 0.3);
}
cursor: pointer;
display: flex;
justify-content: space-between;
.ico{
width: 68px;
height: 68px;
flex-shrink: 0;
border-radius: 10px;
background: linear-gradient(105deg, #1E3C72 -2.04%, #2A5298 107.42%);
color: #fff;
display: flex;
flex-direction: column;
color: #fff;
justify-content: center;
align-items: center;
}
.box{
width: 412px;
display: flex;
justify-content: space-between;
flex-direction: column;
.title{
display: flex;
justify-content: space-between;
.span1{
color: #1E1E1E;
font-family: HarmonyOS Sans SC;
font-size: 16px;
}
.span2{
color: #838990;
font-size: 12px;
font-style: normal;
font-weight: 400;
}
}
.text{
color: #838990;
text-align: justify;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: 0.56px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
}
标签：flex,item2,新闻,列表,content,color,font,display,justify From： https://www.cnblogs.com/linxiaogang1122/p/18039144