图片列表3

 

 <template v-for="(item, index) in (ResearchTrendsta?ResearchTrendsta.slice(0, 6):ResearchTrendsta)" :key="index">
                        <div class="navcontentitem" @click="deill(item)">
                            <img :src="item.coverImage"/>
                            <div class="right">
                                <div class="title">{{item.tilte}}</div>
                                <div class="time">{{item.pulishTime}}</div>

                            </div>

                        </div>

                    </template>

　　

    height: 206px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-top: 20px;
        .navcontentitem{
            width: 321px;
            height: 93px;
            display: flex;
            cursor: pointer;
            justify-content: space-between;

            &:hover{
                opacity: 0.7;

            }
            img{
                width: 142px;
                height: 93px;
            }
            .right{
                width: 165px;
                height: 93px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title{
                    color: #727272;
                    text-align: justify;
                    font-size: 15px;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    display: -webkit-box;
                }
                .time{
                    color: #727272;

                    font-size: 12px;
                }
            }
        }