ContestPortal/src/views/news/components/newsList.vue

<template>
  <ul>
    <li v-for="newsItems in newsData" :key="newsItems.id">
      <div class="box-list" @click="handleClick(newsItems)">
        <div class="left-box-list">
          <p class="list-title">{{ newsItems.title }}</p>
          <p class="list-summary">{{ newsItems.summary }}</p>
          <p class="list-time">{{ newsItems.date }}</p>
        </div>
        <img class="news-image" :src="newsItems.imageUrl" alt="News Image">
      </div>
      <el-divider/>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from "vue-router";
const router = useRouter()
// 假新闻数据
const newsData = ref([
  {
    id:1,
    title: '科技新闻1',
    date: '2024年9月23日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://img1.xcarimg.com/exp/7971/8041/8084/8581/20130421003812814631.jpg'
  },
  {
    id:2,
    title: '体育新闻2',
    date: '2024年9月22日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://pic.rmb.bdstatic.com/50252becb3b391b2cb68ddde4a9c5d9b.jpeg'
  },
  {
    id:3,
    title: '科技新闻3',
    date: '2024年9月23日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641'
  },
  {
    id:4,
    title: '科技新闻4',
    date: '2024年9月23日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://img1.baidu.com/it/u=655643694,820713725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729'
  },
  {
    id:5,
    title: '科技新闻5',
    date: '2024年9月23日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/00/00/ChMlWV0v7jyIHLj_AAgsbG2bHDcAAL5lQE1rfYACCyE751.jpg'
  },
  {
    id:6,
    title: '科技新闻6',
    date: '2024年9月23日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/1601bcb82e9858e21149cf64086a21db.jpg'
  },
  {
    id:7,
    title: '体育新闻7',
    date: '2024年9月22日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/6280b93c7eb748a24466bd0d3021e3a9.jpg'
  },
  {
    id:8,
    title: '科技新闻8',
    date: '2024年9月23日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/113da83a57b3661c3170c2571007f8e5.jpg'
  },
  {
    id:9,
    title: '科技新闻9',
    date: '2024年9月23日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://img1.baidu.com/it/u=515359320,1010066691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=810'
  },
  {
    id:10,
    title: '科技新闻10',
    date: '2024年9月23日',
    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
    imageUrl: 'https://q6.itc.cn/images01/20240613/84d2e170b23b47be86f17ec5009febf9.jpeg'
  },
]);
const handleClick = (newsItems)=>{
  // router.push(`/news/${newsItems.id}`);
  router.push({path:'/newsDetail',query:newsItems})
}
</script>

<style scoped>
.box-list{
  display: flex;
  /*background: cornsilk;*/
  width: 95%;
  height: 100px;
  margin-left: 30px;
  margin-bottom: 10px;
  align-items: center;
  cursor: pointer; /* 默认鼠标指针形状 */
}
.box-list:hover {
  background-color: lightgrey; /* 鼠标悬停时改变背景颜色 */
}
.left-box-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding-right: 10px;
}
.list-title{
  font-size: 22px;
  margin-left: 60px;
}
.list-summary{
  font-size: 16px;
  margin-left: 60px;
  margin-top: 15px;
  color: #999999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1 ;
  overflow: hidden;
  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
  max-width: calc(100% - 130px); /* 减去右侧图片宽度和内边距 */
}
.list-time{
  margin-left: 60px;
  margin-top: 20px;
  color: #999999;
}
.news-image {
  width: 100px;
  height: 80px;
  margin-right: 30px;
}
</style>