Your Name
2 months ago
parent
46904b36c5
commit
85ba65f018
11 changed files with 242 additions and 119 deletions
@ -1,14 +1,116 @@ |
||||
<template> |
||||
<div> |
||||
111 |
||||
<div class="header_title"> |
||||
<span>资讯新闻</span> |
||||
<el-divider style="width: 800px"/> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="left"> |
||||
<ul> |
||||
<li v-for="category in column" :key="category.id"> |
||||
<div class="box"> |
||||
<div class="categorySty"> |
||||
<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> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<el-divider/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
// import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
import {queryCategory,queryEssay} from '@/api/news' |
||||
const column = ref([]) |
||||
const essayContent = ref({}) |
||||
//获取栏目信息 |
||||
const CategoryList = async () => { |
||||
const res = await queryCategory() |
||||
column.value = res.data |
||||
// console.log(column.value,'栏目信息') |
||||
} |
||||
const selectEssay =async (essay)=>{ |
||||
essayContent.value = essay |
||||
// console.log(essayContent,'所选文章') |
||||
}; |
||||
// 异步获取栏目信息和对应的文章标题 |
||||
const fetchCategoriesAndEssays = async () => { |
||||
try { |
||||
const categoriesResponse = await queryCategory(); |
||||
column.value = categoriesResponse.data; |
||||
// 对于每个栏目，获取其文章列表 |
||||
for (const category of column.value) { |
||||
const essaysResponse = await queryEssay(category.id); |
||||
category.essays = essaysResponse.data || []; |
||||
console.log(category.essays,'s') |
||||
} |
||||
} catch (error) { |
||||
console.error('查找信息失败', error); |
||||
} |
||||
} |
||||
onMounted(() => { |
||||
CategoryList() |
||||
fetchCategoriesAndEssays() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
<style scoped> |
||||
.header_title{ |
||||
font-size: 20px; |
||||
color: dodgerblue; |
||||
font-weight: bold; |
||||
margin-left:490px; |
||||
margin-top: 30px; |
||||
} |
||||
.left{ |
||||
margin-left: 600px; |
||||
margin-top: 10px; |
||||
height: 85vh; |
||||
overflow-y: auto; |
||||
} |
||||
.left::-webkit-scrollbar { |
||||
width: 0px; |
||||
} |
||||
.box{ |
||||
width: 502px; |
||||
margin-bottom: 5px; |
||||
} |
||||
.categorySty{ |
||||
margin-bottom: 10px; |
||||
font-size: 25px; |
||||
font-weight: 550; |
||||
width: 560px; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
/*background: #FFB21E;*/ |
||||
} |
||||
.categorySty:hover{ |
||||
background: gainsboro; |
||||
cursor: pointer; |
||||
} |
||||
.essaySty{ |
||||
display: flex; /* 启用Flexbox布局 */ |
||||
justify-content: space-between; /* 水平方向两端对齐 */ |
||||
align-items: center; /* 垂直居中对齐 */ |
||||
height: 40px; |
||||
line-height: 40px; |
||||
margin-bottom: 5px; |
||||
width:520px; |
||||
font-size: 20px; |
||||
margin-left: 30px; |
||||
/*background: #FFB21E;*/ |
||||
} |
||||
.essaySty:hover{ |
||||
background: gainsboro; |
||||
cursor: pointer; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,14 +1,67 @@ |
||||
<template> |
||||
<div> |
||||
111 |
||||
<div class="content"> |
||||
<el-card style="max-width:800px;height: 80vh"> |
||||
<template #header> |
||||
<div class="card-header"> |
||||
<span>关于我们</span> |
||||
</div> |
||||
</template> |
||||
<div class="news_main"> |
||||
<!-- {{ aboutEssay.content }}--> |
||||
<textarea v-model="aboutEssay.content" class="textSty"></textarea> |
||||
</div> |
||||
<!-- <template #footer>--> |
||||
<!-- <span>...</span>--> |
||||
<!-- </template>--> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
<script setup> |
||||
import {ref,onMounted} from 'vue' |
||||
import {queryEssayById} from '@/api/news' |
||||
//关于我们文章 |
||||
const aboutEssay = ref('') |
||||
const aboutContent = async (essay_id)=>{ |
||||
const responseEssay = await queryEssayById('1') |
||||
aboutEssay.value = responseEssay.data |
||||
console.log(aboutEssay.value,'关于我们文章') |
||||
} |
||||
onMounted(()=>{ |
||||
aboutContent() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
<style scoped> |
||||
.content{ |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.el-card{ |
||||
width: 800px; |
||||
height: 80vh; |
||||
margin-top: 30px; |
||||
margin-bottom: 30px; |
||||
} |
||||
.card-header{ |
||||
font-size: 25px; |
||||
color: #6da0ff; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
} |
||||
.news_main{ |
||||
padding: 20px; |
||||
height: 80vh; |
||||
font-size: 20px; |
||||
line-height: 1.5; |
||||
overflow-y: auto; |
||||
} |
||||
.textSty{ |
||||
width: 100%; |
||||
height:65vh; |
||||
border: none; |
||||
} |
||||
.textSty::-webkit-scrollbar{ |
||||
width: 0px; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue