JayChou
2 weeks ago
parent
b515ddc4f4
commit
8a24ea2496
10 changed files with 648 additions and 104 deletions
@ -0,0 +1,12 @@ |
||||
import { defineStore } from 'pinia'; |
||||
export const useSettingStore = defineStore({ |
||||
id: 'app-setting', |
||||
state: () => ({ |
||||
activeIndex: 0, |
||||
}), |
||||
actions: { |
||||
serIndex(index) { |
||||
this.activeIndex = index; |
||||
}, |
||||
}, |
||||
}); |
||||
@ -1,20 +1,212 @@ |
||||
<template> |
||||
<div class=""> |
||||
文章管理 |
||||
<div class="container"> |
||||
<div class="news-list"> |
||||
<div class="item" v-for="i in newList" :key="i"> |
||||
<div class="left" |
||||
><div class="year">{{ i.publishTime.split('-')[0] }}-{{ i.publishTime.split('-')[1] }}</div |
||||
><div class="day">{{ i.publishTime.split(' ')[0].split('-')[2] }}</div></div |
||||
> |
||||
<div class="right"> |
||||
<div class="title">{{ i.title }}</div> |
||||
<div class="editor">{{ i.source }}</div> |
||||
<div class="description"><div v-html="i.info"></div></div> |
||||
<div class="get-info" @click="onGetInfo(i)">查看详情</div> |
||||
</div> |
||||
</div> |
||||
<!-- 分页 --> |
||||
<div class="pagination"> <Pagination :current="current" :pageSize="page.pageSize" :total="total" show-less-items @change="onChange" /></div> |
||||
</div> |
||||
<!-- 栏目 --> |
||||
<div class="column-list"> |
||||
<div class="title">栏目列表</div> |
||||
<div class="list"> |
||||
<div class="item" @click="getindexallarticleEvent">全部</div> |
||||
<div class="item" v-for="i in newColumnList" :key="i.id" @click="getMyNewsList(i)">{{ i.name }}</div> |
||||
<!-- <div class="item">项目申报</div> |
||||
<div class="item">新闻列表</div> --> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
||||
import { useRouter, useRoute } from "vue-router" |
||||
import { Pagination } from 'ant-design-vue'; |
||||
|
||||
import { getindexcolumn ,getindexgzdt} from '@/api/mainHome'; |
||||
import { ref } from 'vue'; |
||||
import { useRouter } from 'vue-router'; |
||||
|
||||
const router = useRouter() |
||||
const route = useRoute() |
||||
const router = useRouter(); |
||||
const current = ref(1); |
||||
const total = ref(0); |
||||
const page = ref({ |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
}); |
||||
const newColumnList = ref([]); |
||||
const getindexcolumnEvent = async () => { |
||||
const res = await getindexcolumn(); |
||||
console.log(res); |
||||
newColumnList.value = res; |
||||
}; |
||||
getindexcolumnEvent(); |
||||
|
||||
const total = ref(0) |
||||
const getMyNewsList = (item) => { |
||||
console.log(item); |
||||
getindexarticleEvent(item.id); |
||||
}; |
||||
const newList = ref([]); |
||||
const getindexarticleEvent = async (id) => { |
||||
columnId.value = id; |
||||
const res = await getindexgzdt({ columnId: id, ...page.value }); |
||||
console.log(res); |
||||
newList.value = res.records; |
||||
total.value = res.total; |
||||
}; |
||||
const columnId = ref(''); |
||||
const onChange = (page) => { |
||||
console.log(page); |
||||
page.pageNo = page; |
||||
if (columnId.value) { |
||||
getindexarticleEvent(columnId.value); |
||||
} else { |
||||
getindexallarticleEvent(); |
||||
} |
||||
}; |
||||
const getindexallarticleEvent = async () => { |
||||
const res = await getindexgzdt(); |
||||
console.log(res); |
||||
newList.value = res.records; |
||||
total.value = res.total; |
||||
}; |
||||
getindexallarticleEvent(); |
||||
|
||||
// 查看详情 |
||||
const onGetInfo = (item) => { |
||||
console.log(item); |
||||
router.push({ |
||||
path: '/main-home/newsInfo', |
||||
query: { |
||||
id: item.id, |
||||
}, |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
<style scoped lang="less"> |
||||
.container { |
||||
position: relative; |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
margin-top: 50px; |
||||
.news-list { |
||||
position: relative; |
||||
width: calc(1200px - 415px); |
||||
margin-right: 30px; |
||||
min-height: 755px; |
||||
padding-bottom: 80px; |
||||
.item { |
||||
display: flex; |
||||
width: 100%; |
||||
border-bottom: 2px solid #ccc; |
||||
padding-bottom: 45px; |
||||
margin-top: 40px; |
||||
.left { |
||||
width: 100px; |
||||
height: 100px; |
||||
border: 1px solid #ccc; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.year { |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
.day { |
||||
font-size: 40px; |
||||
font-weight: 600; |
||||
color: #333; |
||||
} |
||||
} |
||||
.right { |
||||
margin-left: 30px; |
||||
.title { |
||||
font-size: 22px; |
||||
color: #000; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.editor { |
||||
position: relative; |
||||
font-size: 14px; |
||||
color: #999; |
||||
font-size: 14px; |
||||
margin-top: 10px; |
||||
} |
||||
.editor::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
width: 53px; |
||||
bottom: -15px; |
||||
height: 4px; |
||||
background-color: #d9d9d9; |
||||
} |
||||
.description { |
||||
margin-top: 30px; |
||||
width: 660px; |
||||
} |
||||
.get-info { |
||||
color: #fff; |
||||
width: 132px; |
||||
height: 40px; |
||||
text-align: center; |
||||
line-height: 40px; |
||||
margin-top: 30px; |
||||
background-color: #002e97; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.column-list { |
||||
position: sticky; |
||||
top: 0; |
||||
width: 385px; |
||||
background-color: #fff; |
||||
height: 755px; |
||||
padding: 30px; |
||||
.title { |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
color: #555; |
||||
} |
||||
.list { |
||||
.item { |
||||
font-size: 16px; |
||||
color: #555; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
border-bottom: 1px solid #d9d9d9; |
||||
cursor: pointer; |
||||
} |
||||
.item:hover { |
||||
color: #002e97; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.pagination { |
||||
// background-color: #fff; |
||||
position: absolute; |
||||
bottom: -20px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
margin-top: 20px; |
||||
height: 70px; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
</style> |
||||
@ -1,20 +1,212 @@ |
||||
<template> |
||||
<div class=""> |
||||
栏目管理 |
||||
<div class="container"> |
||||
<div class="news-list"> |
||||
<div class="item" v-for="i in newList" :key="i"> |
||||
<div class="left" |
||||
><div class="year">{{ i.publishTime.split('-')[0] }}-{{ i.publishTime.split('-')[1] }}</div |
||||
><div class="day">{{ i.publishTime.split(' ')[0].split('-')[2] }}</div></div |
||||
> |
||||
<div class="right"> |
||||
<div class="title">{{ i.title }}</div> |
||||
<div class="editor">{{ i.source }}</div> |
||||
<div class="description"><div v-html="i.info"></div></div> |
||||
<div class="get-info" @click="onGetInfo(i)">查看详情</div> |
||||
</div> |
||||
</div> |
||||
<!-- 分页 --> |
||||
<div class="pagination"> <Pagination :current="current" :pageSize="page.pageSize" :total="total" show-less-items @change="onChange" /></div> |
||||
</div> |
||||
<!-- 栏目 --> |
||||
<div class="column-list"> |
||||
<div class="title">栏目列表</div> |
||||
<div class="list"> |
||||
<div class="item" @click="getindexallarticleEvent">全部</div> |
||||
<div class="item" v-for="i in newColumnList" :key="i.id" @click="getMyNewsList(i)">{{ i.name }}</div> |
||||
<!-- <div class="item">项目申报</div> |
||||
<div class="item">新闻列表</div> --> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
||||
import { useRouter, useRoute } from "vue-router" |
||||
import { Pagination } from 'ant-design-vue'; |
||||
|
||||
import { getindexcolumn, getindexarticle ,getindexnotice} from '@/api/mainHome'; |
||||
import { ref } from 'vue'; |
||||
import { useRouter } from 'vue-router'; |
||||
|
||||
const router = useRouter() |
||||
const route = useRoute() |
||||
const router = useRouter(); |
||||
const current = ref(1); |
||||
const total = ref(0); |
||||
const page = ref({ |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
}); |
||||
const newColumnList = ref([]); |
||||
const getindexcolumnEvent = async () => { |
||||
const res = await getindexcolumn(); |
||||
console.log(res); |
||||
newColumnList.value = res; |
||||
}; |
||||
getindexcolumnEvent(); |
||||
|
||||
const total = ref(0) |
||||
const getMyNewsList = (item) => { |
||||
console.log(item); |
||||
getindexarticleEvent(item.id); |
||||
}; |
||||
const newList = ref([]); |
||||
const getindexarticleEvent = async (id) => { |
||||
columnId.value = id; |
||||
const res = await getindexnotice({ columnId: id, ...page.value }); |
||||
console.log(res); |
||||
newList.value = res.records; |
||||
total.value = res.total; |
||||
}; |
||||
const columnId = ref(''); |
||||
const onChange = (page) => { |
||||
console.log(page); |
||||
page.pageNo = page; |
||||
if (columnId.value) { |
||||
getindexarticleEvent(columnId.value); |
||||
} else { |
||||
getindexallarticleEvent(); |
||||
} |
||||
}; |
||||
const getindexallarticleEvent = async () => { |
||||
const res = await getindexnotice(); |
||||
console.log(res); |
||||
newList.value = res.records; |
||||
total.value = res.total; |
||||
}; |
||||
getindexallarticleEvent(); |
||||
|
||||
// 查看详情 |
||||
const onGetInfo = (item) => { |
||||
console.log(item); |
||||
router.push({ |
||||
path: '/main-home/newsInfo', |
||||
query: { |
||||
id: item.id, |
||||
}, |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
<style scoped lang="less"> |
||||
.container { |
||||
position: relative; |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
margin-top: 50px; |
||||
.news-list { |
||||
position: relative; |
||||
width: calc(1200px - 415px); |
||||
margin-right: 30px; |
||||
min-height: 755px; |
||||
padding-bottom: 80px; |
||||
.item { |
||||
display: flex; |
||||
width: 100%; |
||||
border-bottom: 2px solid #ccc; |
||||
padding-bottom: 45px; |
||||
margin-top: 40px; |
||||
.left { |
||||
width: 100px; |
||||
height: 100px; |
||||
border: 1px solid #ccc; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.year { |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
.day { |
||||
font-size: 40px; |
||||
font-weight: 600; |
||||
color: #333; |
||||
} |
||||
} |
||||
.right { |
||||
margin-left: 30px; |
||||
.title { |
||||
font-size: 22px; |
||||
color: #000; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.editor { |
||||
position: relative; |
||||
font-size: 14px; |
||||
color: #999; |
||||
font-size: 14px; |
||||
margin-top: 10px; |
||||
} |
||||
.editor::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
width: 53px; |
||||
bottom: -15px; |
||||
height: 4px; |
||||
background-color: #d9d9d9; |
||||
} |
||||
.description { |
||||
margin-top: 30px; |
||||
width: 660px; |
||||
} |
||||
.get-info { |
||||
color: #fff; |
||||
width: 132px; |
||||
height: 40px; |
||||
text-align: center; |
||||
line-height: 40px; |
||||
margin-top: 30px; |
||||
background-color: #002e97; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.column-list { |
||||
position: sticky; |
||||
top: 0; |
||||
width: 385px; |
||||
background-color: #fff; |
||||
height: 755px; |
||||
padding: 30px; |
||||
.title { |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
color: #555; |
||||
} |
||||
.list { |
||||
.item { |
||||
font-size: 16px; |
||||
color: #555; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
border-bottom: 1px solid #d9d9d9; |
||||
cursor: pointer; |
||||
} |
||||
.item:hover { |
||||
color: #002e97; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.pagination { |
||||
// background-color: #fff; |
||||
position: absolute; |
||||
bottom: -20px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
margin-top: 20px; |
||||
height: 70px; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue