图片列表2

 

    <template v-for="(item, index) in (ResearchTrendsta?ResearchTrendsta.slice(0, 4):ResearchTrendsta)" :key="index">
                        <div class="setitem" @click="deill(item)">
                            <img :src="item.coverImage"/>

                            <div class="textContent">
                                <div class="textContenttitle">
                                    {{item.tilte}}
                                </div>
                                <div class="textContenttime">
                                    {{item.pulishTime}}
                                </div>
                            </div>

                        </div>

                    </template>

　　

    display: grid;
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    grid-gap: 25px;   /* 设置行和列之间的间隔为20px */
                    margin-top: 20px;
                    .setitem{
                        &:hover{
                            box-shadow: 0px 4px 12px 0px rgba(12, 68, 204, 0.4);

                        }
                        cursor: pointer;
                        display: flex;
                        flex-direction: column;
                        padding: 15px;
                        border-radius: 10px;
                        border: 1px solid rgba(41, 69, 135, 0.10);
                        background: #FFF;
                        box-shadow: 0px 0px 20px 0px rgba(41, 69, 135, 0.10);
                        img{
                            width: 228px;
                            height: 149px;
                        }
                       .textContent{
                           width: 228px;
                           height: 70px;
                           display: flex;
                           flex-direction: column;
                           justify-content: space-between;
                           margin-top: 14px;
                           .textContenttitle{
                               color: #727272;
                               text-align: justify;
                               font-family: HarmonyOS Sans SC;
                               font-size: 14px;
                               font-style: normal;
                               font-weight: 500;

                               display: -webkit-box;

                               -webkit-box-orient: vertical;
                               -webkit-line-clamp: 2;  // 根据你的height调整这个数字
                               overflow: hidden;
                           }
                           .textContenttime{
                               color: #727272;
                               font-family: HarmonyOS Sans SC;
                               font-size: 12px;
                               font-style: normal;
                               font-weight: 400;
                               line-height: 23px;
                           }
                       }
                    }