新闻列表item2

       <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;

                            }

                        }

                    }