<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; } } }
标签:box,flex,0px,1fr,列表,height,font,图片 From: https://www.cnblogs.com/linxiaogang1122/p/18039299