1
This commit is contained in:
parent
7072f9bb69
commit
ff9c1accb3
@ -38,4 +38,11 @@
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
.txt-2 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box; /* 使用弹性盒子布局 */
|
||||
-webkit-line-clamp: 2; /* 限制文本为两行 */
|
||||
-webkit-box-orient: vertical; /* 设置子元素垂直堆叠 */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
@ -78,6 +78,12 @@ const router = createRouter({
|
||||
title: '洛阳百姓问政-问政热榜' //title配置
|
||||
},
|
||||
component: () => import("../view/hot/index.vue")
|
||||
}, {
|
||||
path: "/news_list",
|
||||
meta: {
|
||||
title: '洛阳百姓问政-新闻列表' //title配置
|
||||
},
|
||||
component: () => import("../view/home/news_list.vue")
|
||||
}, {
|
||||
path: "/admin",
|
||||
meta: {
|
||||
|
@ -16,63 +16,58 @@
|
||||
<div>
|
||||
<div :style="{ fontSize: '23px', color: '#0051B1', cursor: 'pointer'}">最新问政</div>
|
||||
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 10px 0px;"></div>
|
||||
<n-carousel @update:currentIndex="pageNo" autoplay :interval="5000" style="height: 150px;">
|
||||
<n-carousel-item v-for="item in pageCount">
|
||||
<div style="">
|
||||
<div style="height: 150px">
|
||||
<div style="display: flex;">
|
||||
<!-- 左侧内容 -->
|
||||
<div style="width: 50%; cursor: pointer" @click="tn('/info?id=' + item.id)">
|
||||
<n-flex justify="space-between" :size="[0, 0]" v-for="k in leftContent">
|
||||
<div class="te" style="font-size: 18px; width: 80%;">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ k.politics_title }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<div style="font-size: 18px; width: 15%; text-align: right">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ k.department_name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div>
|
||||
<div style="height: 150px">
|
||||
<div style="display: flex;">
|
||||
<!-- 左侧内容 -->
|
||||
<div style="width: 50%; cursor: pointer" >
|
||||
<n-flex justify="space-between" :size="[0, 0]" v-for="k in leftContent">
|
||||
<div class="te" style="font-size: 18px; width: 80%;padding-top: 5px" @click="tn('/info?id=' + k.id)">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ k.politics_title }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<view style="height: 150px;background-color: #E7E7E7;width: 2px;margin: 0px 20px"></view>
|
||||
<!-- 右侧内容 -->
|
||||
<div style="width: 50%; cursor: pointer" @click="tn('/info?id=' + item.id)">
|
||||
<n-flex justify="space-between" :size="[0, 0]" v-for="k in rightContent">
|
||||
<div class="te" style="font-size: 18px; width: 80%;">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ k.politics_title }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<div style="font-size: 18px; width: 15%; text-align: right">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ k.department_name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div style="font-size: 18px; width: 18%; text-align: right">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ k.department_name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
<view style="height: 150px;background-color: #E7E7E7;width: 2px;margin: 0px 20px"></view>
|
||||
<!-- 右侧内容 -->
|
||||
<div style="width: 50%; cursor: pointer" >
|
||||
<n-flex justify="space-between" :size="[0, 0]" v-for="k in rightContent" @click="tn('/info?id=' + k.id)">
|
||||
<div class="te" style="font-size: 18px; width: 80%;padding-top: 5px">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ k.politics_title }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<div style="font-size: 18px; width: 18%; text-align: right">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ k.department_name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
</n-carousel-item>
|
||||
<!-- <template #dots="{ total, currentIndex, to }">-->
|
||||
<!-- <ul class="custom-dots-yuan">-->
|
||||
<!-- <li-->
|
||||
<!-- v-for="index of total"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- :class="{ ['is-active-yuan']: currentIndex === index - 1 }"-->
|
||||
<!-- @click="to(index - 1)"-->
|
||||
<!-- />-->
|
||||
<!-- </ul>-->
|
||||
<!-- </template>-->
|
||||
</n-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-form " style="text-align: center;margin-top: 40px;">
|
||||
<n-flex justify="center">
|
||||
<n-pagination @update:page="newPageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="newPage"
|
||||
:page-count="newPageCount"
|
||||
size="medium"
|
||||
:page-sizes="[{ label: '10条/页',value: 10}]">
|
||||
</n-pagination>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px">
|
||||
<n-flex justify="center" align="center" :size="[0,0]">
|
||||
<div style="width: 40%">
|
||||
<div style="margin-top: 50px">
|
||||
<n-flex justify="space-between" align="center" :size="[20,0]">
|
||||
<div style="width: 38%">
|
||||
<n-flex justify="center" align="center" :size="[15,20]">
|
||||
<div style="cursor: pointer;display: inline-block" @click="tn('/question')">
|
||||
<div style="cursor: pointer;display: inline-block;" @click="tn('/question')">
|
||||
<img src="@/assets/img/zu3.png" style="width: 280px;"/>
|
||||
</div>
|
||||
<div style="cursor: pointer;display: inline-block" @click="tn('/department')">
|
||||
@ -86,66 +81,48 @@
|
||||
</div>
|
||||
</n-flex>
|
||||
<div @click="tn('/admin')"
|
||||
style="font-size: 20px;cursor: pointer;color: #FFFFFF;margin: 0 auto;border-radius: 5px;width: 90%;background-color: #5985F8;height: 50px;line-height: 50px;text-align: center;margin-top: 30px">
|
||||
style="margin: 0 auto;font-size: 20px;cursor: pointer;color: #FFFFFF;border-radius: 5px;width: 95%;background-color: #5985F8;height: 50px;line-height: 50px;text-align: center;margin-top: 30px">
|
||||
部门管理入口
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 60%;">
|
||||
<div style="width: 58%;">
|
||||
<n-flex justify="space-between" :size="[50,0]">
|
||||
<div>
|
||||
<!-- <span @click="contneSelect(0)"-->
|
||||
<!-- :style="{ fontSize: '1.25rem', color: contnetKey === 0 ? '#0051B1' : '#818181', cursor: 'pointer' }">最新问政</span>-->
|
||||
<span :style="{ fontSize: '23px', color: '#0051B1', cursor: 'pointer'}">最新回复</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size:23px;color: #818181">涉及部门</span>
|
||||
<span style="font-size:20px;color: #818181">涉及部门</span>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 10px 0px;"></div>
|
||||
<n-carousel @update:currentIndex="pageNo" autoplay :interval="5000" style="height: 345px;">
|
||||
<n-carousel-item v-for="item in pageCount">
|
||||
<div style="">
|
||||
<div style="height: 290px">
|
||||
<div v-for="item in contentList" style="cursor: pointer" @click="tn('/info?id='+item.id)">
|
||||
<n-flex justify="space-between" :size="[0,0]">
|
||||
<div class="te" style="font-size: 18px;width: 80%;">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ item.politics_title }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<div style="font-size: 18px;width: 15%;text-align: right">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ item.department_name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div style="">
|
||||
<div style="height: 290px">
|
||||
<div v-for="item in contentList" style="cursor: pointer" @click="tn('/info?id='+item.id)">
|
||||
<n-flex justify="space-between" :size="[0,0]">
|
||||
<div class="te" style="font-size: 18px;width: 80%;">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ item.politics_title }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="register-form " style="text-align: center;margin-top: 1.25rem;">-->
|
||||
<!-- <n-flex justify="center">-->
|
||||
<!-- <n-pagination @update:page="pageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="page"-->
|
||||
<!-- :page-count="pageCount"-->
|
||||
<!-- size="medium"-->
|
||||
<!-- :page-sizes="[{ label: '10条/页',value: 10}]">-->
|
||||
<!-- </n-pagination>-->
|
||||
<!-- </n-flex>-->
|
||||
<!-- </div>-->
|
||||
<div style="font-size: 18px;width: 15%;text-align: right">
|
||||
<n-ellipsis :line-clamp="1">
|
||||
{{ item.department_name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
<div style="width: 100%;height: 1px;background-color: #E7E7E7;"></div>
|
||||
</n-carousel-item>
|
||||
<template #dots="{ total, currentIndex, to }">
|
||||
<ul class="custom-dots-yuan">
|
||||
<li
|
||||
v-for="index of total"
|
||||
:key="index"
|
||||
:class="{ ['is-active-yuan']: currentIndex === index - 1 }"
|
||||
@click="to(index - 1)"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
</n-carousel>
|
||||
|
||||
|
||||
</div>
|
||||
<div style="width: 100%;height: 1px;background-color: #E7E7E7;"></div>
|
||||
<div class="register-form " style="text-align: center;margin-top: 1.25rem;">
|
||||
<n-flex justify="center">
|
||||
<n-pagination @update:page="pageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="page"
|
||||
:page-count="pageCount"
|
||||
size="medium"
|
||||
:page-sizes="[{ label: '10条/页',value: 10}]">
|
||||
</n-pagination>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
@ -160,8 +137,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<n-flex align="center">
|
||||
<div style="width: 42.5%;position: relative">
|
||||
<n-flex justify="space-between" align="center">
|
||||
<div style="width: 32%;position: relative">
|
||||
<n-carousel draggable show-arrow :autoplay="true">
|
||||
<div v-for="item in 5" style="padding: 10px">
|
||||
<img style="border-radius: 10px;width: 100%"
|
||||
@ -204,34 +181,123 @@
|
||||
</template>
|
||||
</n-carousel>
|
||||
</div>
|
||||
<div style="width: 50%">
|
||||
<div style="width: 65%">
|
||||
<n-flex justify="space-between">
|
||||
<div v-for="(item, index) in groupList" @click="openGroup(item.id)"
|
||||
:class="{ 'int': true, 'act': item.id == groupIndex }" style="position: relative">
|
||||
<div>{{ item.name }}</div>
|
||||
<div v-if="item.id == groupIndex"
|
||||
style="margin: 0 auto;left: 0;right:0;width: 50px;height: 3px;background-color: #0051B1;position: absolute;bottom: -7px;border-radius: 10px"></div>
|
||||
<div class="act int">公示公告</div>
|
||||
<div @click="tn('/news_list?type=4')" style="color: #818181;font-size: 18px;cursor: pointer">
|
||||
<span style="vertical-align: middle">更多</span>
|
||||
<svg style="width: 20px;height: 20px;color: #818181;vertical-align: middle"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
|
||||
<g fill="none">
|
||||
<path
|
||||
d="M9.97 4.22a.75.75 0 0 1 1.06 0l8.75 8.75a.75.75 0 0 1 0 1.06l-8.75 8.75a.75.75 0 1 1-1.06-1.06l8.22-8.22l-8.22-8.22a.75.75 0 0 1 0-1.06z"
|
||||
fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div style="width: 100%;background-color: #E7E7E7;height: 2px;opacity: 0.35;margin-top: 5px"></div>
|
||||
<div style="height: 300px;padding-top: 10px">
|
||||
<div style="cursor: pointer;padding: 5px 0px;" v-for="(item,index) in groupNews"
|
||||
@click="tn('/news_info?id='+item.id)">
|
||||
<n-flex justify="space-between">
|
||||
<div class="txt-1 xw_width" style="font-size: 17px;">
|
||||
<text class="news_title" style="vertical-align: middle;margin-left: 5px">{{
|
||||
item.news_title
|
||||
}}
|
||||
</text>
|
||||
<n-carousel draggable style="height: 360px" @update:currentIndex="groupNewsNext">
|
||||
<n-carousel-item v-for="k in groupNewsLastPage>6?6:groupNewsLastPage">
|
||||
<div style="height: 360px;padding-top: 10px">
|
||||
<div style="cursor: pointer;padding: 5px 0px;" v-for="(item,index) in groupNews"
|
||||
@click="tn('/news_info?id='+item.id)">
|
||||
<n-flex justify="space-between">
|
||||
<div class="txt-1 xw_width" style="font-size: 17px;">
|
||||
<text class="news_title" style="vertical-align: middle;margin-left: 5px">{{ item.news_title }}
|
||||
</text>
|
||||
</div>
|
||||
<div style="color: #818794;text-align: right">{{ item.showtime }}</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
<div style="color: #818794;text-align: right">{{ item.showtime }}</div>
|
||||
</n-flex>
|
||||
<div style="width: 100%;background-color: #E7E7E7;height: 2px;opacity: 0.35;margin-top: 10px"></div>
|
||||
</div>
|
||||
</n-carousel-item>
|
||||
<template #dots="{ total, currentIndex, to }">
|
||||
<ul class="custom-dots-yuan">
|
||||
<li
|
||||
v-for="index of total"
|
||||
:key="index"
|
||||
:class="{ ['is-active-yuan']: currentIndex === index - 1 }"
|
||||
@click="to(index - 1)"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
</n-carousel>
|
||||
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
<div style="margin-top: 50px">
|
||||
<n-flex>
|
||||
<div style="width: 30%">
|
||||
<n-flex justify="space-between">
|
||||
<div class="act int">跟踪问效</div>
|
||||
<div @click="tn('/news_list?type=1')" style="color: #818181;font-size: 18px;cursor: pointer">
|
||||
<span style="vertical-align: middle">更多</span>
|
||||
<svg style="width: 20px;height: 20px;color: #818181;vertical-align: middle"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
|
||||
<g fill="none">
|
||||
<path
|
||||
d="M9.97 4.22a.75.75 0 0 1 1.06 0l8.75 8.75a.75.75 0 0 1 0 1.06l-8.75 8.75a.75.75 0 1 1-1.06-1.06l8.22-8.22l-8.22-8.22a.75.75 0 0 1 0-1.06z"
|
||||
fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div style="padding-top: 10px">
|
||||
<div class="txt-2 left-gz" v-for="item in groupNewsGz" @click="tn('/news_info?id='+item.id)">
|
||||
<span style="padding-right: 5px">•</span>
|
||||
<span>{{item.news_title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 600px;background-color: #E7E7E7;width: 1px;margin: 0px 20px"></div>
|
||||
<div style="width: 63%">
|
||||
<n-flex justify="space-between">
|
||||
<div class="act int">问政回音壁</div>
|
||||
<div @click="tn('/news_list?type=6')" style="color: #818181;font-size: 18px;cursor: pointer">
|
||||
<span style="vertical-align: middle">更多</span>
|
||||
<svg style="width: 20px;height: 20px;color: #818181;vertical-align: middle"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
|
||||
<g fill="none">
|
||||
<path
|
||||
d="M9.97 4.22a.75.75 0 0 1 1.06 0l8.75 8.75a.75.75 0 0 1 0 1.06l-8.75 8.75a.75.75 0 1 1-1.06-1.06l8.22-8.22l-8.22-8.22a.75.75 0 0 1 0-1.06z"
|
||||
fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div style="padding-top: 20px">
|
||||
<div>
|
||||
<div class="left-gz" v-for="item in groupNewsHy" >
|
||||
<div style="font-size: 20px;" @click="tn('/news_info?id='+item.id)">{{item.news_title}}</div>
|
||||
<div class="txt-2" style="font-size: 15px;margin-top: 10px" @click="tn('/news_info?id='+item.id)">{{item.news_content}}</div>
|
||||
<div>
|
||||
<n-grid x-gap="12" :cols="3">
|
||||
<n-gi v-for="i in item.news_image.slice(0, 3)">
|
||||
<n-image
|
||||
object-fit="cover"
|
||||
:height="100"
|
||||
:width="100"
|
||||
:src="i"
|
||||
/>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</div>
|
||||
<div style="font-size: 14px;color: #9E9E9E;margin-top: 10px">{{item.showtime}}</div>
|
||||
<div style="width: 100%;height: 1px;background-color: #F5F5F5;margin-top: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Footer/>
|
||||
@ -242,27 +308,40 @@ import Header from "@/components/Head.vue";
|
||||
import Footer from "@/components/Footer.vue";
|
||||
import {PaginationProps, useMessage} from 'naive-ui'
|
||||
import {getPolitics, getNewsbx, getNewsbxList} from "@/api/index";
|
||||
import {ref, reactive, onMounted,computed} from 'vue'
|
||||
import {ref, reactive, onMounted, computed} from 'vue'
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const message = useMessage()
|
||||
const page = ref(1);
|
||||
const pageCount = ref(1);
|
||||
const newPage = ref(1);
|
||||
const newPageCount = ref(1);
|
||||
const contentList = ref([]);
|
||||
const contnetKey = ref(0);
|
||||
const groupList = ref([]);
|
||||
const groupIndex = ref(0);
|
||||
const groupNews = ref([]);
|
||||
const newList = ref([]);
|
||||
|
||||
const router = useRouter()
|
||||
onMounted(() => {
|
||||
getApiPolitics();
|
||||
getApiNewsbx();
|
||||
getApiNewPolitics();
|
||||
getApiNewsList();
|
||||
getApiNewsListGz();
|
||||
getApiNewsListHy();
|
||||
})
|
||||
const leftContent = computed(() => contentList.value.slice(0, 4));
|
||||
const rightContent = computed(() => contentList.value.slice(4, 8));
|
||||
|
||||
const leftContent = computed(() => newList.value.slice(0, 4));
|
||||
const rightContent = computed(() => newList.value.slice(4, 8));
|
||||
const getApiNewPolitics = () => {
|
||||
getPolitics({'type': 2, 'page': newPage.value, 'size': 8}).then(res => {
|
||||
if (res.code == 200) {
|
||||
newList.value = res.data.data;
|
||||
//pageCount.value = Math.ceil(res.count / 6);
|
||||
newPageCount.value = res.data.last_page;
|
||||
} else {
|
||||
message.error(res.msg)
|
||||
}
|
||||
});
|
||||
}
|
||||
const getApiPolitics = () => {
|
||||
getPolitics({'type': contnetKey.value, 'page': page.value, 'size': 8}).then(res => {
|
||||
getPolitics({'type': 1, 'page': page.value, 'size': 8}).then(res => {
|
||||
if (res.code == 200) {
|
||||
contentList.value = res.data.data;
|
||||
//pageCount.value = Math.ceil(res.count / 6);
|
||||
@ -272,43 +351,55 @@ const getApiPolitics = () => {
|
||||
}
|
||||
});
|
||||
}
|
||||
const getApiNewsbx = () => {
|
||||
getNewsbx({'flag': 'index'}).then(res => {
|
||||
const groupNews = ref([]);
|
||||
const groupNewsPage = ref(1);
|
||||
const groupNewsLastPage = ref(1);
|
||||
const getApiNewsList = () => {
|
||||
getNewsbxList({'gory_id': 6, 'page': groupNewsPage.value, 'pageSize': 8}).then(res => {
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
groupList.value = res.data;
|
||||
groupIndex.value = res.data[0].id;
|
||||
getApiNewsList(res.data[0].id);
|
||||
groupNews.value = res.data.data;
|
||||
groupNewsLastPage.value = res.data.last_page;
|
||||
} else {
|
||||
message.error(res.msg)
|
||||
}
|
||||
});
|
||||
}
|
||||
const getApiNewsList = (gory_id) => {
|
||||
getNewsbxList({'gory_id': gory_id, 'page': 1, 'pageSize': 7}).then(res => {
|
||||
const groupNewsGz = ref([]);
|
||||
const getApiNewsListGz = () => {
|
||||
getNewsbxList({'gory_id': 1, 'page': 1, 'pageSize': 8}).then(res => {
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
groupNews.value = res.data;
|
||||
groupNewsGz.value = res.data.data;
|
||||
} else {
|
||||
message.error(res.msg)
|
||||
}
|
||||
});
|
||||
}
|
||||
const openGroup = (index) => {
|
||||
groupIndex.value = index;
|
||||
getApiNewsList(index);
|
||||
const groupNewsHy = ref([]);
|
||||
const getApiNewsListHy = () => {
|
||||
getNewsbxList({'gory_id': 6, 'page': 1, 'pageSize': 8}).then(res => {
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
groupNewsHy.value = res.data.data;
|
||||
} else {
|
||||
message.error(res.msg)
|
||||
}
|
||||
});
|
||||
}
|
||||
const pageNo = (index) => {
|
||||
page.value = index + 1;
|
||||
getApiPolitics();
|
||||
const groupNewsNext = (d) => {
|
||||
groupNewsPage.value = d + 1;
|
||||
getApiNewsList();
|
||||
}
|
||||
const pageCheck = (p) => {
|
||||
console.log(p);
|
||||
page.value = p;
|
||||
getApiPolitics();
|
||||
}
|
||||
const contneSelect = (type) => {
|
||||
contnetKey.value = type;
|
||||
page.value = 1;
|
||||
getApiPolitics();
|
||||
const newPageCheck = (p) => {
|
||||
console.log(p);
|
||||
newPage.value = p;
|
||||
getApiNewPolitics();
|
||||
}
|
||||
const chunk = (arr, size) => {
|
||||
const firstChunkSize = Math.ceil(arr.length / 2);
|
||||
@ -447,7 +538,7 @@ const tn = (url) => {
|
||||
.custom-dots-yuan {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
@ -475,6 +566,15 @@ const tn = (url) => {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.left-gz {
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.left-gz:hover{
|
||||
color: #0051B1;
|
||||
}
|
||||
|
||||
/* 当屏幕宽度小于1366px时,设置宽度为50% */
|
||||
@media (max-width: 1366px) {
|
||||
.xw_width {
|
||||
|
124
src/view/home/news_list.vue
Normal file
124
src/view/home/news_list.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<Header/>
|
||||
<div style="padding: 15px 200px;background-color: #ffffff;overflow: hidden">
|
||||
|
||||
<div>
|
||||
<n-flex>
|
||||
<div style="width: 100%">
|
||||
<div style="font-size: 20px">
|
||||
<span @click="tn('/')" style="vertical-align: middle;cursor: pointer">首页</span>
|
||||
<svg style="margin: 0px 10px;width: 25px;height: 25px;vertical-align: middle;color: #999999" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||||
<g fill="none">
|
||||
<path
|
||||
d="M8.646 4.147a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L13.812 10L8.647 4.854a.5.5 0 0 1-.001-.707zm-4 0a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L9.812 10L4.647 4.854a.5.5 0 0 1-.001-.707z"
|
||||
fill="currentColor"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span v-if="id==6" style="color: #0051B1;vertical-align: middle;cursor: pointer">问政回音壁</span>
|
||||
<span v-if="id==4" style="color: #0051B1;vertical-align: middle;cursor: pointer">公示公告</span>
|
||||
<span v-if="id==1" style="color: #0051B1;vertical-align: middle;cursor: pointer">跟踪问效</span>
|
||||
</div>
|
||||
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 20px 0px"></div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="left-gz" v-for="item in groupNews" >
|
||||
<div style="font-size: 20px;" @click="tn_back('/news_info?id='+item.id)">{{item.news_title}}</div>
|
||||
<div class="txt-2" style="font-size: 15px;margin-top: 10px" @click="tn_back('/news_info?id='+item.id)">{{item.news_content}}</div>
|
||||
<div>
|
||||
<n-grid x-gap="12" :cols="3">
|
||||
<n-gi v-for="i in item.news_image.slice(0, 3)">
|
||||
<n-image
|
||||
object-fit="cover"
|
||||
:height="100"
|
||||
:width="100"
|
||||
:src="i"
|
||||
/>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</div>
|
||||
<div style="font-size: 14px;color: #9E9E9E;margin-top: 10px">{{item.showtime}}</div>
|
||||
<div style="width: 100%;height: 1px;background-color: #F5F5F5;margin: 20px 0px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div class="register-form " style="text-align: center;margin-top: 1.25rem;">
|
||||
<n-flex justify="center">
|
||||
<n-pagination @update:page="newPageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="groupNewsPage"
|
||||
:page-count="groupNewsLastPage"
|
||||
size="medium"
|
||||
:page-sizes="[{ label: '10条/页',value: 10}]">
|
||||
</n-pagination>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Header from "@/components/Head.vue";
|
||||
import Footer from "@/components/Footer.vue";
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {getNewsbxList} from "@/api/index";
|
||||
import {PaginationProps, useMessage} from "naive-ui";
|
||||
import {useRouter} from "vue-router";
|
||||
const id=ref(0);
|
||||
const message = useMessage()
|
||||
const router = useRouter()
|
||||
onMounted(() => {
|
||||
id.value=router.currentRoute.value.query.type;
|
||||
console.log(id.value);
|
||||
getApiNewsList();
|
||||
})
|
||||
const groupNews = ref([]);
|
||||
const groupNewsPage = ref(1);
|
||||
const groupNewsLastPage = ref(1);
|
||||
const getApiNewsList = () => {
|
||||
getNewsbxList({'gory_id': id.value, 'page': groupNewsPage.value, 'pageSize': 8}).then(res => {
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
groupNews.value = res.data.data;
|
||||
groupNewsLastPage.value = res.data.last_page;
|
||||
} else {
|
||||
message.error(res.msg)
|
||||
}
|
||||
});
|
||||
}
|
||||
const newPageCheck = (p) => {
|
||||
console.log(p);
|
||||
groupNewsPage.value = p;
|
||||
getApiNewsList();
|
||||
// 滚动到页面顶部
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
const tn = (url) => {
|
||||
router.push(url)
|
||||
}
|
||||
const tn_back = (url) => {
|
||||
window.open('/#' + url, '_blank'); // 在新
|
||||
}
|
||||
type PaginationThemeOverrides = NonNullable<PaginationProps['themeOverrides']>
|
||||
const PaginationThemeOverrides: PaginationThemeOverrides = {
|
||||
"itemTextColorHover": "#0051B1",
|
||||
"itemTextColorPressed": "#0051B1",
|
||||
"itemTextColorActive": "#ffffff",
|
||||
"itemBorderActive": "1px solid #0051B1",
|
||||
"itemColorActive": "#0051B1",
|
||||
"itemColor": "#F5F5F5",
|
||||
"itemColorActiveHover": "#0051B1"
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.left-gz:hover {
|
||||
color: #0051b1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.my_html img {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user