JayChou
6 months ago
parent
4c504f76d4
commit
3a6254d1cc
13 changed files with 366 additions and 253 deletions
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,8 +1,9 @@ |
||||
import defaultImage from '@/assets/images/item.png'; |
||||
export default { |
||||
mounted(el: any, binding: any) { |
||||
el.onerror = () => { |
||||
// 当图片加载失败时，设置默认图片
|
||||
el.src = binding.value || '/student/src/assets/images/item.png' // 默认图片
|
||||
el.src = binding.value || defaultImage // 默认图片
|
||||
} |
||||
}, |
||||
} |
||||
|
||||
@ -0,0 +1,19 @@ |
||||
import { defineStore } from 'pinia' |
||||
import { getLogo } from '@/api/setting' |
||||
const settingStore = defineStore('setting', { |
||||
state: () => ({ |
||||
logo: '', |
||||
}), |
||||
actions: { |
||||
setLogo() { |
||||
getLogo().then((res: any) => { |
||||
console.log(res, 'this.logo') |
||||
this.logo = res.result.logo |
||||
|
||||
|
||||
document.querySelector("link[rel~='icon']").href = import.meta.env.VITE_APP_BASE_API + '/' + this.logo |
||||
}) |
||||
}, |
||||
}, |
||||
}) |
||||
export default settingStore |
||||
@ -1,183 +1,161 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<el-tabs |
||||
v-model="activeName" |
||||
style="max-width: 70%; margin: auto" |
||||
class="container" |
||||
@tab-click="handleTabClick" |
||||
> |
||||
<el-tab-pane |
||||
v-for="category in categories" |
||||
:key="category.id" |
||||
:label="category.name" |
||||
:name="category.id" |
||||
> |
||||
<ul> |
||||
<li |
||||
v-for="newsItem in getNewsItemsForCategory(category)" |
||||
:key="newsItem.id" |
||||
> |
||||
<div class="box-list" @click.stop="handleNewsClick(newsItem)"> |
||||
<div class="left-box-list"> |
||||
<p class="list-title">{{ newsItem.title }}</p> |
||||
<p class="list-summary"> |
||||
{{ stripHtmlTags(newsItem.summary) }} |
||||
</p> |
||||
<p class="list-time">{{ newsItem.date }}</p> |
||||
<div class="container"> |
||||
<div class="news-list"> |
||||
<div class="item" v-for="(item,index) in newsList" :key="item.id"> |
||||
<div class="news-title" :id="index.toString()">{{ item.name }}</div> |
||||
<div class="children"> |
||||
<div class="son-item" v-for="obj in item.cmsArticleList" :key="obj.id" @click="toNewsDetail(obj.id)"> |
||||
<div class="left"> |
||||
<div class="title">{{ obj.title }}</div> |
||||
<div class="content"> |
||||
{{ obj.info }} |
||||
</div> |
||||
<img |
||||
class="news-image" |
||||
:src="newsItem.imageUrl" |
||||
alt="News Image" |
||||
|
||||
/> |
||||
<div class="time"><div>{{ obj.publishTime }}</div> <div style="margin-left: 20px;">发布人：{{ obj.createBy }}</div></div> |
||||
</div> |
||||
<el-divider /> |
||||
</li> |
||||
</ul> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
<div class="right"> |
||||
<img :src="setImageUrl(obj.comimg)" alt="" v-default-image/> |
||||
</div> |
||||
</div> |
||||
<el-empty description="无新闻" v-if="item.cmsArticleList.length === 0" style="height: 200px;"/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 右侧栏目 --> |
||||
</div> |
||||
<div class="right-coulom"> |
||||
<div :class="active === index ? 'item active' : 'item' " @click="scrollById(index)" v-for="(item,index) in columnList" :key="item">{{ item }}</div> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import { ref, onMounted } from 'vue' |
||||
import { useRouter } from 'vue-router' |
||||
import { getColumnListApi, queryEssayListApi } from '@/api/news' |
||||
let categories = ref([]) |
||||
let newsItems = ref({}) |
||||
let activeName = ref('') |
||||
const router = useRouter() |
||||
|
||||
//使用正则表达式转换html标签文本 |
||||
function stripHtmlTags(html) { |
||||
return html.replace(/<[^>]*>/g, '') |
||||
} |
||||
|
||||
// 获取栏目信息 |
||||
const fetchColumnList = async () => { |
||||
const response = await getColumnListApi() |
||||
if (response.success && response.result) { |
||||
categories.value = response.result.filter( |
||||
(category) => category.isShow === '1', |
||||
) |
||||
// 尝试立即加载第一个栏目的新闻列表 |
||||
if (categories.value.length > 0) { |
||||
await fetchNewsList(categories.value[0].id) |
||||
activeName.value = categories.value[0].id |
||||
} |
||||
} |
||||
} |
||||
import { getNewsListApi } from '@/api/news' |
||||
|
||||
// 栏目新闻列表查询 |
||||
const fetchNewsList = async (categoryId) => { |
||||
try { |
||||
const response = await queryEssayListApi(categoryId) |
||||
// console.log(response.success,'是否有响应') |
||||
// console.log(response.result.records,'获取的响应数据') |
||||
if (response.success && response.result.records) { |
||||
newsItems.value[categoryId] = response.result.records.map((data) => ({ |
||||
id: data.id, |
||||
title: data.title, |
||||
date: data.publishTime, |
||||
summary: data.content, |
||||
imageUrl: data.comimg ? getAbsoluteImagePath(data.comimg) : '', |
||||
})) |
||||
} |
||||
} catch (error) { |
||||
console.error('获取新闻列表失败', error) |
||||
} |
||||
} |
||||
|
||||
//获取图片完整地址 |
||||
const getAbsoluteImagePath = (relativePath) => { |
||||
const baseImageUrl = 'https://localhost:18085/jeecg-boot/' // 替换为实际的服务器地址 |
||||
return baseImageUrl + relativePath |
||||
} |
||||
|
||||
// 获取指定栏目的新闻列表 |
||||
const getNewsItemsForCategory = (category) => { |
||||
return newsItems.value[category.id] || [] |
||||
} |
||||
|
||||
// 初始化加载栏目列表 |
||||
onMounted(() => { |
||||
fetchColumnList() |
||||
}) |
||||
|
||||
// 当选项卡改变时更新当前显示的新闻列表 |
||||
const handleTabClick = async (tab) => { |
||||
const categoryId = tab.props.name |
||||
if (!newsItems.value[categoryId]?.length) { |
||||
await fetchNewsList(categoryId) |
||||
} |
||||
activeName.value = categoryId |
||||
} |
||||
|
||||
// 处理新闻条目的点击事件 |
||||
const handleNewsClick = (newsItem) => { |
||||
const router = useRouter() |
||||
const newsList = ref<any>([]) |
||||
const columnList = ref<any>([]) |
||||
const active = ref(0) |
||||
const getNewsListApiEvent = async () => { |
||||
const res:any = await getNewsListApi() |
||||
console.log(res, '212121') |
||||
columnList.value = res.result.map(item => item.name) |
||||
newsList.value = res.result |
||||
} |
||||
getNewsListApiEvent() |
||||
const scrollById = (index: number) => { |
||||
active.value = index |
||||
const targetPosition = (document.getElementById(index.toString()) as HTMLElement).offsetTop - 120; |
||||
window.scrollTo({ |
||||
top: targetPosition, |
||||
behavior: 'smooth', // 平滑滚动 |
||||
}); |
||||
} |
||||
const toNewsDetail = (id: number) => { |
||||
router.push({ |
||||
name: 'newsDetail', |
||||
params: { id: newsItem.id.toString() }, |
||||
path: '/detail/' + id |
||||
}) |
||||
} |
||||
</script> |
||||
<style scoped> |
||||
.main { |
||||
margin-top: 100px; |
||||
const setImageUrl = (url: string) => { |
||||
return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url |
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.container { |
||||
width: 1200px; |
||||
margin: auto; |
||||
height: 98vh; |
||||
overflow-y: scroll; |
||||
padding: 0; |
||||
display: block; |
||||
} |
||||
.container::-webkit-scrollbar { |
||||
width: 0; |
||||
} |
||||
.box-list { |
||||
display: flex; |
||||
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; |
||||
margin-top: 100px; |
||||
.news-list { |
||||
width: 100%; |
||||
// height: 900px; |
||||
// background-color: #f2f3f5; |
||||
padding: 15px; |
||||
border: 1px solid #f2f3f5; |
||||
border-radius: 5px; |
||||
.item { |
||||
.news-title { |
||||
font-size: 24px; |
||||
font-weight: 700; |
||||
} |
||||
.children { |
||||
margin: 20px 0; |
||||
.son-item { |
||||
width: 100%; |
||||
height: 100px; |
||||
background-color: #fff; |
||||
padding: 15px; |
||||
display: flex; |
||||
border-bottom: 1px solid rgba(228, 230, 235, 0.5); |
||||
justify-content: space-between; |
||||
cursor: pointer; |
||||
.left { |
||||
width: 1000px; |
||||
.title { |
||||
font-size: 18px; |
||||
font-weight: 700; |
||||
color: #4f5153; |
||||
} |
||||
.content { |
||||
margin-top: 8px; |
||||
font-size: 13px; |
||||
color: #8a919f; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 1; |
||||
-webkit-box-orient: vertical; |
||||
overflow: hidden; |
||||
} |
||||
.time { |
||||
margin-top: 8px; |
||||
font-size: 12px; |
||||
color: #8a919f; |
||||
display: flex; |
||||
} |
||||
} |
||||
.right { |
||||
display: flex; |
||||
flex: 1; |
||||
align-items: center; |
||||
justify-content: center; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
&:hover { |
||||
background-color: #f7f8fa; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.news-image { |
||||
width: 100px; |
||||
height: 80px; |
||||
margin-right: 30px; |
||||
.right-coulom { |
||||
position: fixed; |
||||
left: 200px; |
||||
top: 100px; |
||||
z-index: 999; |
||||
width: 150px; |
||||
// height: 300px; |
||||
background-color: #f2f3f5; |
||||
padding: 10px; |
||||
border-radius: 5px; |
||||
.item { |
||||
height: 45px; |
||||
// text-align: center; |
||||
line-height: 22px; |
||||
font-size: 16px; |
||||
padding: 10px; |
||||
border-radius: 5px; |
||||
cursor: pointer; |
||||
margin: 5px 0; |
||||
&:hover { |
||||
background-color: #0bd7c628; |
||||
color: #0bd7c6; |
||||
} |
||||
} |
||||
.active { |
||||
background-color: #0bd7c628; |
||||
color: #0bd7c6; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue