|
|
|
|
@ -1,7 +1,7 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="header_title"> |
|
|
|
|
<div class="header_title" > |
|
|
|
|
<span>资讯新闻</span> |
|
|
|
|
<el-divider style="width: 800px"/> |
|
|
|
|
<el-divider style="margin: 30px auto;"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="container"> |
|
|
|
|
<div class="left"> |
|
|
|
|
@ -9,27 +9,27 @@ |
|
|
|
|
<li v-for="category in column" :key="category.id"> |
|
|
|
|
<div class="box"> |
|
|
|
|
<div class="categorySty"> |
|
|
|
|
<span>· {{category.categoryName}}</span> |
|
|
|
|
<span>· {{ category.categoryName }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div style="margin-left: 10px"> |
|
|
|
|
<ul v-if="category.essays"> |
|
|
|
|
<li class="essaySty" v-for="essay in category.essays" :key="essay.id" @click="selectEssay(essay)"> |
|
|
|
|
<span>{{essay.title}}</span> |
|
|
|
|
<span>{{essay.publishTime}}</span> |
|
|
|
|
<span>{{ essay.title }}</span> |
|
|
|
|
<span>{{ essay.publishTime }}</span> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<el-divider/> |
|
|
|
|
<el-divider /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang='ts' setup> |
|
|
|
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
|
|
|
import {queryCategory,queryEssay} from '@/api/news' |
|
|
|
|
import { queryCategory, queryEssay } from '@/api/news' |
|
|
|
|
const column = ref([]) |
|
|
|
|
const essayContent = ref({}) |
|
|
|
|
//获取栏目信息 |
|
|
|
|
@ -38,7 +38,7 @@ const CategoryList = async () => { |
|
|
|
|
column.value = res.data |
|
|
|
|
// console.log(column.value,'栏目信息') |
|
|
|
|
} |
|
|
|
|
const selectEssay =async (essay)=>{ |
|
|
|
|
const selectEssay = async (essay) => { |
|
|
|
|
essayContent.value = essay |
|
|
|
|
// console.log(essayContent,'所选文章') |
|
|
|
|
}; |
|
|
|
|
@ -51,7 +51,7 @@ const fetchCategoriesAndEssays = async () => { |
|
|
|
|
for (const category of column.value) { |
|
|
|
|
const essaysResponse = await queryEssay(category.id); |
|
|
|
|
category.essays = essaysResponse.data || []; |
|
|
|
|
console.log(category.essays,'s') |
|
|
|
|
console.log(category.essays, 's') |
|
|
|
|
} |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error('查找信息失败', error); |
|
|
|
|
@ -64,52 +64,64 @@ onMounted(() => { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.header_title{ |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: dodgerblue; |
|
|
|
|
.header_title { |
|
|
|
|
font-size: 25px; |
|
|
|
|
color: #293352; |
|
|
|
|
text-align: center; |
|
|
|
|
font-weight: bold; |
|
|
|
|
margin-left:490px; |
|
|
|
|
margin-top: 30px; |
|
|
|
|
} |
|
|
|
|
.left{ |
|
|
|
|
margin-left: 600px; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
height: 85vh; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* .left { |
|
|
|
|
/* margin-left: 600px; |
|
|
|
|
margin-top: 10px; */ |
|
|
|
|
/* height: 85vh; */ |
|
|
|
|
/* overflow-y: auto; */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.left::-webkit-scrollbar { |
|
|
|
|
width: 0px; |
|
|
|
|
} |
|
|
|
|
.box{ |
|
|
|
|
width: 502px; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
|
|
|
|
|
.box { |
|
|
|
|
margin: 0 auto; |
|
|
|
|
width: 900px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
/* border: 1px solid pink; */ |
|
|
|
|
} |
|
|
|
|
.categorySty{ |
|
|
|
|
|
|
|
|
|
.categorySty { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 25px; |
|
|
|
|
font-weight: 550; |
|
|
|
|
width: 560px; |
|
|
|
|
height: 50px; |
|
|
|
|
height: 60px; |
|
|
|
|
line-height: 50px; |
|
|
|
|
/*background: #FFB21E;*/ |
|
|
|
|
} |
|
|
|
|
.categorySty:hover{ |
|
|
|
|
|
|
|
|
|
.categorySty:hover { |
|
|
|
|
background: gainsboro; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.essaySty{ |
|
|
|
|
display: flex; /* 启用Flexbox布局 */ |
|
|
|
|
justify-content: space-between; /* 水平方向两端对齐 */ |
|
|
|
|
align-items: center; /* 垂直居中对齐 */ |
|
|
|
|
|
|
|
|
|
.essaySty { |
|
|
|
|
display: flex; |
|
|
|
|
/* 启用Flexbox布局 */ |
|
|
|
|
justify-content: space-between; |
|
|
|
|
/* 水平方向两端对齐 */ |
|
|
|
|
align-items: center; |
|
|
|
|
/* 垂直居中对齐 */ |
|
|
|
|
height: 40px; |
|
|
|
|
line-height: 40px; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
width:520px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
width: 800px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
margin-left: 30px; |
|
|
|
|
/*background: #FFB21E;*/ |
|
|
|
|
} |
|
|
|
|
.essaySty:hover{ |
|
|
|
|
|
|
|
|
|
.essaySty:hover { |
|
|
|
|
background: gainsboro; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
