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

图片列表3

时间:2024-02-28 11:46:09浏览次数:22  
标签:flex 1fr height width 93px 列表 display 图片

 

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

  

标签:flex,1fr,height,width,93px,列表,display,图片
From: https://www.cnblogs.com/linxiaogang1122/p/18039333

相关文章

  • 新闻列表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);......
  • 爬取彼岸图库中的图片数据
    fromlxmlimportetreeimportrequestsimportos#爬取彼岸图库中的图片数据if__name__=='__main__':#爬取到页面源码数据url='https://pic.netbian.com/4kmeinv/'headers={'User-Agent':'Mozilla/5.0(WindowsNT10.0;W......