1
This commit is contained in:
parent
7072f9bb69
commit
ff9c1accb3
@ -38,4 +38,11 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.txt-2 {
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box; /* 使用弹性盒子布局 */
|
||||||
|
-webkit-line-clamp: 2; /* 限制文本为两行 */
|
||||||
|
-webkit-box-orient: vertical; /* 设置子元素垂直堆叠 */
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -78,6 +78,12 @@ const router = createRouter({
|
|||||||
title: '洛阳百姓问政-问政热榜' //title配置
|
title: '洛阳百姓问政-问政热榜' //title配置
|
||||||
},
|
},
|
||||||
component: () => import("../view/hot/index.vue")
|
component: () => import("../view/hot/index.vue")
|
||||||
|
}, {
|
||||||
|
path: "/news_list",
|
||||||
|
meta: {
|
||||||
|
title: '洛阳百姓问政-新闻列表' //title配置
|
||||||
|
},
|
||||||
|
component: () => import("../view/home/news_list.vue")
|
||||||
}, {
|
}, {
|
||||||
path: "/admin",
|
path: "/admin",
|
||||||
meta: {
|
meta: {
|
||||||
|
|||||||
@ -16,63 +16,58 @@
|
|||||||
<div>
|
<div>
|
||||||
<div :style="{ fontSize: '23px', color: '#0051B1', cursor: 'pointer'}">最新问政</div>
|
<div :style="{ fontSize: '23px', color: '#0051B1', cursor: 'pointer'}">最新问政</div>
|
||||||
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 10px 0px;"></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;">
|
<div>
|
||||||
<n-carousel-item v-for="item in pageCount">
|
<div style="height: 150px">
|
||||||
<div style="">
|
<div style="display: flex;">
|
||||||
<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 style="width: 50%; cursor: pointer" @click="tn('/info?id=' + item.id)">
|
<div class="te" style="font-size: 18px; width: 80%;padding-top: 5px" @click="tn('/info?id=' + k.id)">
|
||||||
<n-flex justify="space-between" :size="[0, 0]" v-for="k in leftContent">
|
<n-ellipsis :line-clamp="1">
|
||||||
<div class="te" style="font-size: 18px; width: 80%;">
|
{{ k.politics_title }}
|
||||||
<n-ellipsis :line-clamp="1">
|
</n-ellipsis>
|
||||||
{{ 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>
|
||||||
<view style="height: 150px;background-color: #E7E7E7;width: 2px;margin: 0px 20px"></view>
|
<div style="font-size: 18px; width: 18%; text-align: right">
|
||||||
<!-- 右侧内容 -->
|
<n-ellipsis :line-clamp="1">
|
||||||
<div style="width: 50%; cursor: pointer" @click="tn('/info?id=' + item.id)">
|
{{ k.department_name }}
|
||||||
<n-flex justify="space-between" :size="[0, 0]" v-for="k in rightContent">
|
</n-ellipsis>
|
||||||
<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>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</n-carousel-item>
|
</div>
|
||||||
<!-- <template #dots="{ total, currentIndex, to }">-->
|
</div>
|
||||||
<!-- <ul class="custom-dots-yuan">-->
|
<div class="register-form " style="text-align: center;margin-top: 40px;">
|
||||||
<!-- <li-->
|
<n-flex justify="center">
|
||||||
<!-- v-for="index of total"-->
|
<n-pagination @update:page="newPageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="newPage"
|
||||||
<!-- :key="index"-->
|
:page-count="newPageCount"
|
||||||
<!-- :class="{ ['is-active-yuan']: currentIndex === index - 1 }"-->
|
size="medium"
|
||||||
<!-- @click="to(index - 1)"-->
|
:page-sizes="[{ label: '10条/页',value: 10}]">
|
||||||
<!-- />-->
|
</n-pagination>
|
||||||
<!-- </ul>-->
|
</n-flex>
|
||||||
<!-- </template>-->
|
</div>
|
||||||
</n-carousel>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 30px">
|
<div style="margin-top: 50px">
|
||||||
<n-flex justify="center" align="center" :size="[0,0]">
|
<n-flex justify="space-between" align="center" :size="[20,0]">
|
||||||
<div style="width: 40%">
|
<div style="width: 38%">
|
||||||
<n-flex justify="center" align="center" :size="[15,20]">
|
<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;"/>
|
<img src="@/assets/img/zu3.png" style="width: 280px;"/>
|
||||||
</div>
|
</div>
|
||||||
<div style="cursor: pointer;display: inline-block" @click="tn('/department')">
|
<div style="cursor: pointer;display: inline-block" @click="tn('/department')">
|
||||||
@ -86,66 +81,48 @@
|
|||||||
</div>
|
</div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
<div @click="tn('/admin')"
|
<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>
|
</div>
|
||||||
<div style="width: 60%;">
|
<div style="width: 58%;">
|
||||||
<n-flex justify="space-between" :size="[50,0]">
|
<n-flex justify="space-between" :size="[50,0]">
|
||||||
<div>
|
<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>
|
<span :style="{ fontSize: '23px', color: '#0051B1', cursor: 'pointer'}">最新回复</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span style="font-size:23px;color: #818181">涉及部门</span>
|
<span style="font-size:20px;color: #818181">涉及部门</span>
|
||||||
</div>
|
</div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 10px 0px;"></div>
|
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 10px 0px;"></div>
|
||||||
<n-carousel @update:currentIndex="pageNo" autoplay :interval="5000" style="height: 345px;">
|
<div style="">
|
||||||
<n-carousel-item v-for="item in pageCount">
|
<div style="height: 290px">
|
||||||
<div style="">
|
<div v-for="item in contentList" style="cursor: pointer" @click="tn('/info?id='+item.id)">
|
||||||
<div style="height: 290px">
|
<n-flex justify="space-between" :size="[0,0]">
|
||||||
<div v-for="item in contentList" style="cursor: pointer" @click="tn('/info?id='+item.id)">
|
<div class="te" style="font-size: 18px;width: 80%;">
|
||||||
<n-flex justify="space-between" :size="[0,0]">
|
<n-ellipsis :line-clamp="1">
|
||||||
<div class="te" style="font-size: 18px;width: 80%;">
|
{{ item.politics_title }}
|
||||||
<n-ellipsis :line-clamp="1">
|
</n-ellipsis>
|
||||||
{{ 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>
|
</div>
|
||||||
</div>
|
<div style="font-size: 18px;width: 15%;text-align: right">
|
||||||
<!-- <div class="register-form " style="text-align: center;margin-top: 1.25rem;">-->
|
<n-ellipsis :line-clamp="1">
|
||||||
<!-- <n-flex justify="center">-->
|
{{ item.department_name }}
|
||||||
<!-- <n-pagination @update:page="pageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="page"-->
|
</n-ellipsis>
|
||||||
<!-- :page-count="pageCount"-->
|
</div>
|
||||||
<!-- size="medium"-->
|
</n-flex>
|
||||||
<!-- :page-sizes="[{ label: '10条/页',value: 10}]">-->
|
|
||||||
<!-- </n-pagination>-->
|
|
||||||
<!-- </n-flex>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%;height: 1px;background-color: #E7E7E7;"></div>
|
</div>
|
||||||
</n-carousel-item>
|
<div style="width: 100%;height: 1px;background-color: #E7E7E7;"></div>
|
||||||
<template #dots="{ total, currentIndex, to }">
|
<div class="register-form " style="text-align: center;margin-top: 1.25rem;">
|
||||||
<ul class="custom-dots-yuan">
|
<n-flex justify="center">
|
||||||
<li
|
<n-pagination @update:page="pageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="page"
|
||||||
v-for="index of total"
|
:page-count="pageCount"
|
||||||
:key="index"
|
size="medium"
|
||||||
:class="{ ['is-active-yuan']: currentIndex === index - 1 }"
|
:page-sizes="[{ label: '10条/页',value: 10}]">
|
||||||
@click="to(index - 1)"
|
</n-pagination>
|
||||||
/>
|
</n-flex>
|
||||||
</ul>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</n-carousel>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
</div>
|
</div>
|
||||||
@ -160,8 +137,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 20px">
|
<div style="margin-top: 20px">
|
||||||
<n-flex align="center">
|
<n-flex justify="space-between" align="center">
|
||||||
<div style="width: 42.5%;position: relative">
|
<div style="width: 32%;position: relative">
|
||||||
<n-carousel draggable show-arrow :autoplay="true">
|
<n-carousel draggable show-arrow :autoplay="true">
|
||||||
<div v-for="item in 5" style="padding: 10px">
|
<div v-for="item in 5" style="padding: 10px">
|
||||||
<img style="border-radius: 10px;width: 100%"
|
<img style="border-radius: 10px;width: 100%"
|
||||||
@ -204,34 +181,123 @@
|
|||||||
</template>
|
</template>
|
||||||
</n-carousel>
|
</n-carousel>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 50%">
|
<div style="width: 65%">
|
||||||
<n-flex justify="space-between">
|
<n-flex justify="space-between">
|
||||||
<div v-for="(item, index) in groupList" @click="openGroup(item.id)"
|
<div class="act int">公示公告</div>
|
||||||
:class="{ 'int': true, 'act': item.id == groupIndex }" style="position: relative">
|
<div @click="tn('/news_list?type=4')" style="color: #818181;font-size: 18px;cursor: pointer">
|
||||||
<div>{{ item.name }}</div>
|
<span style="vertical-align: middle">更多</span>
|
||||||
<div v-if="item.id == groupIndex"
|
<svg style="width: 20px;height: 20px;color: #818181;vertical-align: middle"
|
||||||
style="margin: 0 auto;left: 0;right:0;width: 50px;height: 3px;background-color: #0051B1;position: absolute;bottom: -7px;border-radius: 10px"></div>
|
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>
|
</div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
<div style="width: 100%;background-color: #E7E7E7;height: 2px;opacity: 0.35;margin-top: 5px"></div>
|
<div style="width: 100%;background-color: #E7E7E7;height: 2px;opacity: 0.35;margin-top: 5px"></div>
|
||||||
<div style="height: 300px;padding-top: 10px">
|
<n-carousel draggable style="height: 360px" @update:currentIndex="groupNewsNext">
|
||||||
<div style="cursor: pointer;padding: 5px 0px;" v-for="(item,index) in groupNews"
|
<n-carousel-item v-for="k in groupNewsLastPage>6?6:groupNewsLastPage">
|
||||||
@click="tn('/news_info?id='+item.id)">
|
<div style="height: 360px;padding-top: 10px">
|
||||||
<n-flex justify="space-between">
|
<div style="cursor: pointer;padding: 5px 0px;" v-for="(item,index) in groupNews"
|
||||||
<div class="txt-1 xw_width" style="font-size: 17px;">
|
@click="tn('/news_info?id='+item.id)">
|
||||||
<text class="news_title" style="vertical-align: middle;margin-left: 5px">{{
|
<n-flex justify="space-between">
|
||||||
item.news_title
|
<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>
|
</text>
|
||||||
|
</div>
|
||||||
|
<div style="color: #818794;text-align: right">{{ item.showtime }}</div>
|
||||||
|
</n-flex>
|
||||||
</div>
|
</div>
|
||||||
<div style="color: #818794;text-align: right">{{ item.showtime }}</div>
|
<div style="width: 100%;background-color: #E7E7E7;height: 2px;opacity: 0.35;margin-top: 10px"></div>
|
||||||
</n-flex>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Footer/>
|
<Footer/>
|
||||||
@ -242,27 +308,40 @@ import Header from "@/components/Head.vue";
|
|||||||
import Footer from "@/components/Footer.vue";
|
import Footer from "@/components/Footer.vue";
|
||||||
import {PaginationProps, useMessage} from 'naive-ui'
|
import {PaginationProps, useMessage} from 'naive-ui'
|
||||||
import {getPolitics, getNewsbx, getNewsbxList} from "@/api/index";
|
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";
|
import {useRouter} from "vue-router";
|
||||||
|
|
||||||
const message = useMessage()
|
const message = useMessage()
|
||||||
const page = ref(1);
|
const page = ref(1);
|
||||||
const pageCount = ref(1);
|
const pageCount = ref(1);
|
||||||
|
const newPage = ref(1);
|
||||||
|
const newPageCount = ref(1);
|
||||||
const contentList = ref([]);
|
const contentList = ref([]);
|
||||||
const contnetKey = ref(0);
|
const newList = ref([]);
|
||||||
const groupList = ref([]);
|
|
||||||
const groupIndex = ref(0);
|
|
||||||
const groupNews = ref([]);
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getApiPolitics();
|
getApiPolitics();
|
||||||
getApiNewsbx();
|
getApiNewPolitics();
|
||||||
|
getApiNewsList();
|
||||||
|
getApiNewsListGz();
|
||||||
|
getApiNewsListHy();
|
||||||
})
|
})
|
||||||
const leftContent = computed(() => contentList.value.slice(0, 4));
|
const leftContent = computed(() => newList.value.slice(0, 4));
|
||||||
const rightContent = computed(() => contentList.value.slice(4, 8));
|
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 = () => {
|
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) {
|
if (res.code == 200) {
|
||||||
contentList.value = res.data.data;
|
contentList.value = res.data.data;
|
||||||
//pageCount.value = Math.ceil(res.count / 6);
|
//pageCount.value = Math.ceil(res.count / 6);
|
||||||
@ -272,43 +351,55 @@ const getApiPolitics = () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const getApiNewsbx = () => {
|
const groupNews = ref([]);
|
||||||
getNewsbx({'flag': 'index'}).then(res => {
|
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) {
|
if (res.code == 200) {
|
||||||
groupList.value = res.data;
|
groupNews.value = res.data.data;
|
||||||
groupIndex.value = res.data[0].id;
|
groupNewsLastPage.value = res.data.last_page;
|
||||||
getApiNewsList(res.data[0].id);
|
|
||||||
} else {
|
} else {
|
||||||
message.error(res.msg)
|
message.error(res.msg)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const getApiNewsList = (gory_id) => {
|
const groupNewsGz = ref([]);
|
||||||
getNewsbxList({'gory_id': gory_id, 'page': 1, 'pageSize': 7}).then(res => {
|
const getApiNewsListGz = () => {
|
||||||
|
getNewsbxList({'gory_id': 1, 'page': 1, 'pageSize': 8}).then(res => {
|
||||||
|
console.log(res);
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
groupNews.value = res.data;
|
groupNewsGz.value = res.data.data;
|
||||||
} else {
|
} else {
|
||||||
message.error(res.msg)
|
message.error(res.msg)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const openGroup = (index) => {
|
const groupNewsHy = ref([]);
|
||||||
groupIndex.value = index;
|
const getApiNewsListHy = () => {
|
||||||
getApiNewsList(index);
|
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) => {
|
const groupNewsNext = (d) => {
|
||||||
page.value = index + 1;
|
groupNewsPage.value = d + 1;
|
||||||
getApiPolitics();
|
getApiNewsList();
|
||||||
}
|
}
|
||||||
const pageCheck = (p) => {
|
const pageCheck = (p) => {
|
||||||
console.log(p);
|
console.log(p);
|
||||||
page.value = p;
|
page.value = p;
|
||||||
getApiPolitics();
|
getApiPolitics();
|
||||||
}
|
}
|
||||||
const contneSelect = (type) => {
|
const newPageCheck = (p) => {
|
||||||
contnetKey.value = type;
|
console.log(p);
|
||||||
page.value = 1;
|
newPage.value = p;
|
||||||
getApiPolitics();
|
getApiNewPolitics();
|
||||||
}
|
}
|
||||||
const chunk = (arr, size) => {
|
const chunk = (arr, size) => {
|
||||||
const firstChunkSize = Math.ceil(arr.length / 2);
|
const firstChunkSize = Math.ceil(arr.length / 2);
|
||||||
@ -447,7 +538,7 @@ const tn = (url) => {
|
|||||||
.custom-dots-yuan {
|
.custom-dots-yuan {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 0px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -475,6 +566,15 @@ const tn = (url) => {
|
|||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left-gz {
|
||||||
|
font-size: 16px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.left-gz:hover{
|
||||||
|
color: #0051B1;
|
||||||
|
}
|
||||||
|
|
||||||
/* 当屏幕宽度小于1366px时，设置宽度为50% */
|
/* 当屏幕宽度小于1366px时，设置宽度为50% */
|
||||||
@media (max-width: 1366px) {
|
@media (max-width: 1366px) {
|
||||||
.xw_width {
|
.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