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> |
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script setup> |
<script setup> |
||||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
import { Pagination } from 'ant-design-vue'; |
||||||
import { useRouter, useRoute } from "vue-router" |
|
||||||
|
|
||||||
const router = useRouter() |
import { getindexcolumn ,getindexgzdt} from '@/api/mainHome'; |
||||||
const route = useRoute() |
import { ref } from 'vue'; |
||||||
|
import { useRouter } from 'vue-router'; |
||||||
|
|
||||||
const total = ref(0) |
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 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> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<style scoped lang="less"> |
||||||
|
.container { |
||||||
</style> |
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> |
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script setup> |
<script setup> |
||||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
import { Pagination } from 'ant-design-vue'; |
||||||
import { useRouter, useRoute } from "vue-router" |
|
||||||
|
|
||||||
const router = useRouter() |
import { getindexcolumn, getindexarticle ,getindexnotice} from '@/api/mainHome'; |
||||||
const route = useRoute() |
import { ref } from 'vue'; |
||||||
|
import { useRouter } from 'vue-router'; |
||||||
|
|
||||||
const total = ref(0) |
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 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> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<style scoped lang="less"> |
||||||
|
.container { |
||||||
</style> |
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