<template> <div class="padding-box"> <div class="news-card"> <div v-for="item in props.content3" :key="item.id" class="news-item" @click="handleNewsClick(item)"> <div class="image-wrapper"> <img :src="getImageUrl(item.photo)" :alt="item.title" loading="lazy" /> </div> <div class="content"> <h3 class="title">{{ item.title }}</h3> <time class="subtitle">{{item.createTime}}</time> </div> </div> </div> </div> </template> <script setup lang="ts"> interface NewsItem { id: number | string noticeTitle: string remark: string // 添加其他需要的属性 } // Props 定义 interface Props { content3: NewsItem[] action?: string } const props = withDefaults(defineProps<Props>(), { content3: () => [], action: '' }) // 事件 const emit = defineEmits<{ (e: 'itemClick', item: NewsItem): void }>() // 获取完整图片URL const getImageUrl = (remark: string) => { return 'http://118.107.9.143:8080/jeecg-boot/' + remark } // 处理新闻点击 const handleNewsClick = (item: NewsItem) => { emit('itemClick', item) } </script> <style lang="scss" scoped> .news-card { margin: 7.5px 0; // 15rpx / 2 padding: 0; border-radius: 5px; // 10rpx / 2 font-family: pingfang; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .news-item { display: flex; padding: 15px; gap: 15px; cursor: pointer; transition: background-color 0.3s ease; &:hover { background-color: rgba(0, 0, 0, 0.02); } &:active { background-color: rgba(0, 0, 0, 0.05); } &:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } } .image-wrapper { flex-shrink: 0; width: 80px; height: 80px; border-radius: 4px; overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; &:hover { transform: scale(1.05); } } } .content { flex: 1; min-width: 0; // 防止文本溢出 display: flex; flex-direction: column; justify-content: space-between; } .title { margin: 0; font-size: 16px; font-weight: 500; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .subtitle { font-size: 14px; color: #999; margin-top: auto; } </style>