首页 > 其他分享 >图片列表2

图片列表2

时间:2024-02-28 11:46:26浏览次数:26  
标签:box flex 0px 1fr 列表 height font 图片

 

    <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

相关文章

  • 图片列表3
     <templatev-for="(item,index)in(ResearchTrendsta?ResearchTrendsta.slice(0,6):ResearchTrendsta)":key="index"><divclass="navcontentitem"@click="deill(item)">......
  • 新闻列表item
     <divclass="list">      <templatev-for="(item,index)inmdata":key="index">        <li@click="godell(item)">          <spanid="title">{{item.achi......
  • 新闻列表item2
        <templatev-for="(item,index)in(NoticeData?NoticeData.slice(0,3):NoticeData)":key="index">            <divclass="item"@click="openAcademicleturesComView(item.id)">      ......
  • 图片列表
      <templatev-for="(item,index)in(NewsData?NewsData.slice(0,3):NewsData)":key="index">        <divclass="newlistitem"@click="newsDetails(item.id)">          <img:src=&quo......
  • item图片左右结构1
     <divclass="item"@click="deill(item)"><divclass="img"><img:src="item.image"></div><divclass......
  • editormd等文件引用第三方图片地址CSDN等出现403问题
    问题描述最近在自己开发的站点引用CSDN文章图片时,网络请求提示403,效果如下:问题原因首先,http请求体的header中有一个referrer字段,用来表示发起http请求的源地址信息,这个referrer信息是可以省略但是不可修改的,就是说你只能设置是否带上这个referrer信息,不能定制referrer里面的......
  • Vue学习笔记18--列表渲染
    总结: <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>列表渲染</title>&l......
  • python中的列表和元组有什么区别
    python中的列表和元组有什么区别在Python中,列表(List)和元组(Tuple)都是用来存储一组有序元素的数据结构,它们之间有几个重要的区别:可变性:列表是可变的(Mutable),意味着你可以改变列表中的元素,包括添加、删除、修改元素。元组是不可变的(Immutable),一旦创建后就无法修改。你不能在元组中......
  • Java中使用Graphics2D实现图片添加文字/图片水印
    场景java实现给图片添加水印实现步骤:获取原图片对象信息(本地图片或网络图片)添加水印(设置水印颜色、字体、坐标等)处理输出目标图片。注:博客:https://blog.csdn.net/badao_liumang_qizhi实现1、新建工具类 importorg.apache.commons.lang3.StringUtils;importjavax.im......
  • 【opencv】两种cpp读取图片作为
    #include<fstream>//ifstream,ifstream::inusingnamespacestd;intmain(){ //1.打开图片文件 //评论区的@霍鑫网络帮忙发现一个隐藏的bug,在此表示感谢,已经修正 ifstreamis("test.jpg",ifstream::in|ios::binary); //2.计算图片长度 is.seekg(0,is.end);......