图片列表

 

 

 

<template v-for="(item, index) in (NewsData?NewsData.slice(0, 3):NewsData)" :key="index">

                <div class="newlistitem" @click="newsDetails(item.id)">

                    <img :src="item.newsImg"/>

                    <div class="newlistitemTitle">{{item.tilte}}</div>

                </div>

            </template>

 

  .newlistitem{

                &:hover{

                    box-shadow: 0px 4px 12px 0px rgba(12, 68, 204, 0.5);

                }

                cursor: pointer;

                width: 347px;

                height: 334px;

                display: flex;

                flex-direction: column;

                box-shadow: 0px 0px 20px 0px rgba(39, 103, 188, 0.10);

                img{

                    width: 347px;

                    height: 334px;

                }

                .newlistitemTitle{

                    display: flex;

                    width: 347px;

                    height: 85px;

                    padding: 10px 20px 6px 20px;

                    justify-content: center;

                    align-items: center;

                    color: #000;

                    color: #1E1E1E;

                    font-size: 14px;

                    font-style: normal;

                    font-weight: 700;

                    line-height: 140%; /* 19.6px */

                }

            }