1
This commit is contained in:
parent
b472618bd4
commit
a93b04715a
BIN
src/assets/img/bz2.png
Normal file
BIN
src/assets/img/bz2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 146 KiB |
@ -4,7 +4,7 @@
|
||||
<n-flex justify="space-between">
|
||||
<div>您好，欢迎来到洛阳百姓问政！</div>
|
||||
<div v-if="userPhone==''" style="cursor: pointer" @click="tn('/login')">
|
||||
请<span style="color:#7B83FF">「登录」</span>或<span style="color:#7B83FF">「注册」</span>
|
||||
请<span style="color:#0051B1">「登录」</span>或<span style="color:#0051B1">「注册」</span>
|
||||
</div>
|
||||
<div v-if="userPhone!=''" style="cursor: pointer" @click="tn('/login')">
|
||||
<span @click="tn('/user');">{{ userPhone }}</span><span @click="quit" style="color:#7B83FF;margin-left: 20px">退出</span>
|
||||
@ -34,49 +34,58 @@
|
||||
搜索
|
||||
</n-button>
|
||||
</div>
|
||||
<div>
|
||||
<n-button :theme-overrides="buttonThemeOverrides" :round="false" color="#0051B1" @click="tn('/question')">
|
||||
<img src="../assets/img/brush.png" style="width: 1.5625rem;height: 1.5625rem;">
|
||||
<span style="margin-left: 0.625rem;">我要投诉</span>
|
||||
</n-button>
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
<!-- <n-button :theme-overrides="buttonThemeOverrides" :round="false" color="#0051B1" @click="tn('/question')">-->
|
||||
<!-- <img src="../assets/img/brush.png" style="width: 1.5625rem;height: 1.5625rem;">-->
|
||||
<!-- <span style="margin-left: 0.625rem;">我要投诉</span>-->
|
||||
<!-- </n-button>-->
|
||||
<!-- </div>-->
|
||||
</n-flex>
|
||||
</n-input-group>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 5px 0px;">
|
||||
<n-flex justify="center" align="center" :size="[141,10]">
|
||||
<div class="left-line"></div>
|
||||
<n-flex justify="center" align="center" :size="[100,10]">
|
||||
<n-button @click="tn('/')" text :color="x=='/'?'#0051B1':'#000000'">
|
||||
<template #default>
|
||||
<span :style="`${x=='/'?'font-weight: 600':''};font-size: 1.25rem;`">首页</span>
|
||||
<div :style="`${x=='/'?'font-weight: 600':''};font-size: 1.25rem;position: relative`">
|
||||
<div>首页</div>
|
||||
<div v-if="x=='/'" style="width: 100%;height: 3px;background-color: #0051B1;position: absolute;bottom: -15px;border-radius: 10px"></div>
|
||||
</div>
|
||||
</template>
|
||||
</n-button>
|
||||
<div class="left-line"></div>
|
||||
<n-button text @click="tn('/department')" :color="x=='/department'?'#0051B1':'#000000'">
|
||||
<template #default>
|
||||
<span :style="`${x=='/department'?'font-weight: 600':''};font-size: 1.25rem;`">部门</span>
|
||||
<div :style="`${x=='/department'?'font-weight: 600':''};font-size: 1.25rem;`">
|
||||
<div>部门</div>
|
||||
<div v-if="x=='/department'" style="width: 100%;height: 3px;background-color: #0051B1;position: absolute;bottom: -7px;border-radius: 10px"></div>
|
||||
</div>
|
||||
</template>
|
||||
</n-button>
|
||||
<div class="left-line"></div>
|
||||
<n-button text @click="tn('/question')" :color="x=='/question'?'#0051B1':'#000000'">
|
||||
<template #default>
|
||||
<span style="font-size: 1.25rem;">提问</span>
|
||||
<div :style="`${x=='/question'?'font-weight: 600':''};font-size: 1.25rem;`">
|
||||
<div>提问</div>
|
||||
<div v-if="x=='/question'" style="width: 100%;height: 3px;background-color: #0051B1;position: absolute;bottom: -7px;border-radius: 10px"></div>
|
||||
</div>
|
||||
</template>
|
||||
</n-button>
|
||||
<div class="left-line"></div>
|
||||
<n-button text @click="tn('/live')" :color="x=='/live'?'#0051B1':'#000000'">
|
||||
<template #default>
|
||||
<span :style="`${x=='/live'?'font-weight: 600':''};font-size: 1.25rem;`">直播</span>
|
||||
<div :style="`${x=='/live'?'font-weight: 600':''};font-size: 1.25rem;`">
|
||||
<div>直播</div>
|
||||
<div v-if="x=='/live'" style="width: 100%;height: 3px;background-color: #0051B1;position: absolute;bottom: -7px;border-radius: 10px"></div>
|
||||
</div>
|
||||
</template>
|
||||
</n-button>
|
||||
<div class="left-line"></div>
|
||||
<n-button @click="tn('/user')" text :color="x=='/user'?'#0051B1':'#000000'">
|
||||
<template #default>
|
||||
<span :style="`${x=='/user'?'font-weight: 600':''};font-size: 1.25rem;`">我的</span>
|
||||
<div :style="`${x=='/user'?'font-weight: 600':''};font-size: 1.25rem;`">
|
||||
<div>我的</div>
|
||||
<div v-if="x=='/user'" style="width: 100%;height: 3px;background-color: #0051B1;position: absolute;bottom: -7px;border-radius: 10px"></div>
|
||||
</div>
|
||||
</template>
|
||||
</n-button>
|
||||
<div class="left-line"></div>
|
||||
</n-flex>
|
||||
</div>
|
||||
<div style="width: 100%;background-color: #7261D9;height: 0.05rem;opacity: 0.35;"></div>
|
||||
|
||||
@ -3,142 +3,72 @@
|
||||
<div>
|
||||
<div style="padding:20px 9rem ;">
|
||||
<div><img src="@/assets/img/b2.png" style="width: 100%;"/></div>
|
||||
<div
|
||||
style="text-align: center;position: relative;margin-top: 1.25rem;padding-top: 1.125rem;height: 3.75rem;">
|
||||
<img src="@/assets/img/bz1.png" style="width: 40%;"/>
|
||||
<div
|
||||
style="color: #0051B1;position: absolute;margin: 0 auto;left: 0;right: 0;top: 0;font-size: 2.5rem;letter-spacing: 5px;">
|
||||
<div style="text-align: center;">
|
||||
<div style="color: #0051B1;font-size: 2.5rem;">
|
||||
最新问政
|
||||
</div>
|
||||
<img src="@/assets/img/bz2.png" style="width: 200px;display: block; margin: 0 auto;"/>
|
||||
<div
|
||||
style="color: #0051B1;position: absolute;margin: 0 auto;left: 0;right: 0;bottom: 0;font-size: 0.875rem;letter-spacing: 0.0625rem;">
|
||||
style="color: #0051B1;font-size: 0.5rem;margin-top: 5px">
|
||||
ZUI XIN WEN ZHENG
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
<n-flex justify="center" :size="[50,0]">
|
||||
<div @click="contneSelect(0)" :style="{ fontSize: '1.25rem', color: contnetKey === 0 ? '#0051B1' : '#000000', cursor: 'pointer' }">最新问政</div>
|
||||
<div @click="contneSelect(1)" :style="{ fontSize: '1.25rem', color: contnetKey === 1 ? '#0051B1' : '#000000', cursor: 'pointer' }">最新回复</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
<n-flex justify="center" :size="[0,0]">
|
||||
<div style="width: 50%;">
|
||||
<n-table striped>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="100px">编号</th>
|
||||
<th>问政</th>
|
||||
<th>部门</th>
|
||||
<th>状态</th>
|
||||
<th>评论</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item,index) in contentList[0]">
|
||||
<td>
|
||||
<div style="color:#606060;">{{item.id}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="dian1" @click="tn('/info?id='+item.id)">
|
||||
{{item.politics_title}}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="color: #616161">{{item.department_name}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="color: #0051B1">
|
||||
<span v-if="item.acceptance_status==0">待处理</span>
|
||||
<span v-if="item.acceptance_status==1">已回复</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{item.comment_count}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
<div style="margin-top: 30px">
|
||||
<n-flex justify="center" align="center" :size="[0,0]">
|
||||
<div style="width: 40%">
|
||||
<n-flex justify="center" align="center" :size="[20,20]">
|
||||
<div style="cursor: pointer;display: inline-block" @click="tn('/question')">
|
||||
<img src="@/assets/img/zu1.png" style="width: 250px;"/>
|
||||
</div>
|
||||
<div style="cursor: pointer;display: inline-block" @click="tn('/department')">
|
||||
<img src="@/assets/img/zu2.png" style="width: 250px;"/>
|
||||
</div>
|
||||
<div style="cursor: pointer;display: inline-block" @click="tn('/department')">
|
||||
<img src="@/assets/img/zu3.png" style="width: 250px;"/>
|
||||
</div>
|
||||
<div style="cursor: pointer;display: inline-block" @click="tn('/hot')">
|
||||
<img src="@/assets/img/zu4.png" style="width: 250px;"/>
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
<div style="width: 50%;">
|
||||
<n-table striped>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="100px">编号</th>
|
||||
<th>问政</th>
|
||||
<th>部门</th>
|
||||
<th>状态</th>
|
||||
<th>评论</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item,index) in contentList[1]">
|
||||
<td>
|
||||
<div style="color:#606060;">{{item.id}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="dian1" @click="tn('/info?id='+item.id)">
|
||||
{{item.politics_title}}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="color: #616161">{{item.department_name}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="color: #0051B1">
|
||||
<span v-if="item.acceptance_status==0">待处理</span>
|
||||
<span v-if="item.acceptance_status==1">已回复</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{item.comment_count}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
</div>
|
||||
</n-flex>
|
||||
<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" show-quick-jumper show-size-picker
|
||||
:page-sizes="[{ label: '10条/页',value: 10}]">
|
||||
<template #goto>
|
||||
跳转
|
||||
</template>
|
||||
</n-pagination>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<n-flex justify="center" :size="[135,0]">
|
||||
<div style="cursor: pointer;position: relative;" @click="tn('/question')">
|
||||
<img src="@/assets/img/zu1.png" style="width: 300px;"/>
|
||||
<div
|
||||
style="position: absolute;right: 20px;font-size: 2.5rem;color: #ffffff;top: 13px;font-weight: 600;">
|
||||
我要投诉
|
||||
</div>
|
||||
</div>
|
||||
<div style="cursor: pointer;position: relative;" @click="tn('/department')">
|
||||
<img src="@/assets/img/zu2.png" style="width: 300px;"/>
|
||||
<div
|
||||
style="position: absolute;right: 20px;font-size: 2.5rem;color: #ffffff;top: 13px;font-weight: 600;">
|
||||
公共服务
|
||||
</div>
|
||||
</div>
|
||||
<div style="cursor: pointer;position: relative;" @click="tn('/department')">
|
||||
<img src="@/assets/img/zu3.png" style="width: 300px;"/>
|
||||
<div
|
||||
style="position: absolute;right: 20px;font-size: 2.5rem;color: #ffffff;top: 13px;font-weight: 600;">
|
||||
问政部门
|
||||
</div>
|
||||
</div>
|
||||
<div style="cursor: pointer;position: relative;" @click="tn('/hot')">
|
||||
<img src="@/assets/img/zu4.png" style="width: 300px;"/>
|
||||
<div
|
||||
style="position: absolute;right: 20px;font-size: 2.5rem;color: #ffffff;top: 13px;font-weight: 600;">
|
||||
问政热榜
|
||||
<div style="width: 60%;">
|
||||
<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 @click="contneSelect(1)"
|
||||
:style="{ fontSize: '1.25rem', color: contnetKey === 1 ? '#0051B1' : '#818181', cursor: 'pointer',marginLeft: '20px' }">最新回复</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size:1.25rem;color: #818181">涉及部门</span>
|
||||
</div>
|
||||
</n-flex>
|
||||
<div style="margin-top: 20px;">
|
||||
<div style="min-height: 210px">
|
||||
<div v-for="item in contentList">
|
||||
<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>
|
||||
</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>
|
||||
@ -168,15 +98,19 @@
|
||||
</div>
|
||||
<div style="width: 48%">
|
||||
<n-flex justify="space-between">
|
||||
<div v-for="(item, index) in groupList" @click="openGroup(item.id)" :class="{ 'int': true, 'act': item.id == groupIndex }">{{item.name}}</div>
|
||||
<div v-for="(item, index) in groupList" @click="openGroup(item.id)"
|
||||
:class="{ 'int': true, 'act': item.id == groupIndex }">{{ item.name }}
|
||||
</div>
|
||||
</n-flex>
|
||||
<div style="cursor: pointer;padding: 2.5px 0px;margin-top: 20px" v-for="(item,index) in groupNews" @click="tn('/news_info?id='+item.id)">
|
||||
<div style="cursor: pointer;padding: 2.5px 0px;margin-top: 20px" v-for="(item,index) in groupNews"
|
||||
@click="tn('/news_info?id='+item.id)">
|
||||
<n-flex justify="space-between">
|
||||
<div class="txt-1" style="font-size: 17px;width: 70%">
|
||||
<div style="background-color: #0051B1;width: 5px;height: 5px;border-radius: 50%;display: inline-block;vertical-align: middle"></div>
|
||||
<text class="news_title" style="vertical-align: middle;margin-left: 5px">{{item.news_title}}</text>
|
||||
<div
|
||||
style="background-color: #0051B1;width: 5px;height: 5px;border-radius: 50%;display: inline-block;vertical-align: middle"></div>
|
||||
<text class="news_title" style="vertical-align: middle;margin-left: 5px">{{ item.news_title }}</text>
|
||||
</div>
|
||||
<div style="color: #818794">{{item.showtime}}</div>
|
||||
<div style="color: #818794">{{ item.showtime }}</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
@ -191,65 +125,66 @@
|
||||
<script setup lang="ts">
|
||||
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 {PaginationProps, useMessage} from 'naive-ui'
|
||||
import {getPolitics, getNewsbx, getNewsbxList} from "@/api/index";
|
||||
import {ref, reactive, onMounted} from 'vue'
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const message = useMessage()
|
||||
const page = ref(1);
|
||||
const pageCount=ref(1);
|
||||
const contentList=ref([]);
|
||||
const contnetKey=ref(0);
|
||||
const groupList=ref([]);
|
||||
const groupIndex=ref(0);
|
||||
const groupNews=ref([]);
|
||||
const pageCount = ref(1);
|
||||
const contentList = ref([]);
|
||||
const contnetKey = ref(0);
|
||||
const groupList = ref([]);
|
||||
const groupIndex = ref(0);
|
||||
const groupNews = ref([]);
|
||||
const router = useRouter()
|
||||
onMounted(() => {
|
||||
getApiPolitics();
|
||||
getApiNewsbx();
|
||||
})
|
||||
const getApiPolitics = () => {
|
||||
getPolitics({'type':contnetKey.value,'page':page.value,'pageSize':10}).then(res => {
|
||||
if(res.code==200){
|
||||
contentList.value=chunk(res.data,2);
|
||||
pageCount.value=Math.ceil(res.count / 10);
|
||||
}else{
|
||||
getPolitics({'type': contnetKey.value, 'page': page.value, 'pageSize': 6}).then(res => {
|
||||
if (res.code == 200) {
|
||||
contentList.value = res.data
|
||||
pageCount.value = Math.ceil(res.count / 6);
|
||||
} else {
|
||||
message.error(res.msg)
|
||||
}
|
||||
});
|
||||
}
|
||||
const getApiNewsbx = () => {
|
||||
getNewsbx({'flag':'index'}).then(res => {
|
||||
if(res.code==200){
|
||||
groupList.value=res.data;
|
||||
groupIndex.value=res.data[0].id;
|
||||
getNewsbx({'flag': 'index'}).then(res => {
|
||||
if (res.code == 200) {
|
||||
groupList.value = res.data;
|
||||
groupIndex.value = res.data[0].id;
|
||||
getApiNewsList(res.data[0].id);
|
||||
}else{
|
||||
} else {
|
||||
message.error(res.msg)
|
||||
}
|
||||
});
|
||||
}
|
||||
const getApiNewsList = (gory_id) => {
|
||||
getNewsbxList({'gory_id':gory_id,'page':1,'pageSize':7}).then(res => {
|
||||
if(res.code==200){
|
||||
groupNews.value=res.data;
|
||||
}else{
|
||||
getNewsbxList({'gory_id': gory_id, 'page': 1, 'pageSize': 7}).then(res => {
|
||||
if (res.code == 200) {
|
||||
groupNews.value = res.data;
|
||||
} else {
|
||||
message.error(res.msg)
|
||||
}
|
||||
});
|
||||
}
|
||||
const openGroup = (index) => {
|
||||
groupIndex.value=index;
|
||||
groupIndex.value = index;
|
||||
getApiNewsList(index);
|
||||
}
|
||||
const pageCheck = (p) => {
|
||||
console.log(p);
|
||||
page.value=p;
|
||||
console.log(p);
|
||||
page.value = p;
|
||||
getApiPolitics();
|
||||
}
|
||||
const contneSelect = (type) => {
|
||||
contnetKey.value=type;
|
||||
page.value=1;
|
||||
contnetKey.value = type;
|
||||
page.value = 1;
|
||||
getApiPolitics();
|
||||
}
|
||||
const chunk = (arr, size) => {
|
||||
@ -287,14 +222,16 @@ const tn = (url) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.int{
|
||||
.int {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.act{
|
||||
|
||||
.act {
|
||||
color: #0051B1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
@ -319,7 +256,8 @@ const tn = (url) => {
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news_title:hover{
|
||||
|
||||
.news_title:hover {
|
||||
color: #0051B1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user