<template>
|
<div class="container">
|
<div class="main-content">
|
<div class="list-container">
|
<div class="tit">
|
<div>
|
<Platform style="width: 1em; height: 1em;margin-right: 4px" />
|
通知公告
|
</div>
|
<el-button plain @click="toMore(2)">查看更多</el-button>
|
</div>
|
<div class="list">
|
<div v-for="item in state.noticeList">
|
<div><img src="src/assets/images/notice.png"></div>
|
<div>
|
<div>{{item.title}}</div>
|
<span>{{item.updateTime}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="list-container">
|
<div class="tit">
|
<div>
|
<Platform style="width: 1em; height: 1em;margin-right: 4px" />
|
法律法规
|
</div>
|
<el-button plain @click="toMore(3)">查看更多</el-button>
|
</div>
|
<div class="list">
|
<div v-for="item in state.lawsList">
|
<div><img src="src/assets/images/laws.png"></div>
|
<div>
|
<div>{{item.title}}</div>
|
<span>{{item.updateTime}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="list-container">
|
<div class="tit">
|
<div>
|
<Platform style="width: 1em; height: 1em;margin-right: 4px" />
|
机构公示
|
</div>
|
<el-button plain @click="toMore(4)">查看更多</el-button>
|
</div>
|
<div class="list">
|
<div v-for="item in state.pubList">
|
<div><img src="src/assets/images/section.png"></div>
|
<div>
|
<div>{{item.title}}</div>
|
<span>{{item.updateTime}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="login-container">
|
<!-- <div class="tit">-->
|
<!-- <div>-->
|
<!-- <Platform style="width: 1em; height: 1em;margin-right: 4px" />-->
|
<!-- 资料下载-->
|
<!-- </div>-->
|
<!-- <el-button plain>查看更多</el-button>-->
|
<!-- </div>-->
|
<!-- <div class="list">-->
|
<!-- <div v-for="item in state.newList">-->
|
<!-- <div><img src="src/assets/images/file.png"></div>-->
|
<!-- <div>-->
|
<!-- <div>{{item.title}}</div>-->
|
<!-- <span>{{item.date}}</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<login-form ref="loginRef"/>
|
</div>
|
</div>
|
<!-- <login-form ref="loginRef"/>-->
|
</div>
|
</template>
|
|
<script setup>
|
import {onMounted, ref, reactive, watch, onUnmounted, defineEmits, defineExpose} from "vue"
|
import { getNotice, getLaws, getPublish } from '@/api/home/homePage'
|
import useUserStore from '@/store/modules/user'
|
import LoginForm from './loginForm'
|
import {ElMessage} from "element-plus";
|
|
const route = useRoute()
|
const router = useRouter()
|
|
const state = reactive({
|
noticeList: [],
|
lawsList: [],
|
pubList: []
|
})
|
const emit = defineEmits(["toMore"])
|
const redirect = ref(undefined);
|
|
onMounted(()=>{
|
getNoticeList()
|
getLawsList()
|
getPubList()
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
watch(route, (newRoute) => {
|
redirect.value = newRoute.query && newRoute.query.redirect;
|
}, { immediate: true })
|
|
const toMore=(num)=>{
|
emit('toMore',num)
|
}
|
|
const getNoticeList = async ()=>{
|
const res = await getNotice({title: '', content: '', pageNum: 1, pageSize: 5})
|
if(res.code == 200){
|
state.noticeList = res.data.list
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const getLawsList = async ()=>{
|
const res = await getLaws({title: '', content: '', pageNum: 1, pageSize: 5})
|
if(res.code == 200){
|
state.lawsList = res.data.list
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const getPubList = async ()=>{
|
const res = await getPublish({title: '', content: '', pageNum: 1, pageSize: 5})
|
if(res.code == 200){
|
state.pubList = res.data.list
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
defineExpose({
|
getNoticeList,
|
getLawsList,
|
getPubList
|
})
|
|
</script>
|
|
<style lang='scss' scoped>
|
.container {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: 170px;
|
|
.main-content{
|
width: 1200px;
|
margin: 20px 0 80px;
|
display: grid;
|
grid-gap: 15px;
|
grid-template-columns: repeat(2, 1fr);
|
grid-template-rows: repeat(2, 350px);
|
grid-auto-flow: row;
|
justify-content: center;
|
color: #333;
|
|
.login-container{
|
border-radius: 4px;
|
box-shadow: 1px 1px 3px rgba(0,0,0,.04);
|
padding: 0 15px;
|
overflow: hidden;
|
background: url("../../assets/images/login-bg.jpg");
|
}
|
|
.list-container{
|
border-radius: 4px;
|
box-shadow: 1px 1px 3px rgba(0,0,0,.04);
|
padding: 0 15px;
|
overflow: hidden;
|
background: #fff url("../../assets/images/city-bg.png") no-repeat right bottom;
|
background-size: 40% auto;
|
|
.tit{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 0;
|
border-bottom: 1px solid #ebeef5;
|
&>div{
|
display: flex;
|
align-items: center;
|
font-size: 18px;
|
color: #425f9f;
|
font-weight: bolder;
|
}
|
}
|
.list{
|
width: 100%;
|
margin-top: 10px;
|
|
&>div{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
padding: 5px;
|
border-radius: 4px;
|
|
&>div:first-of-type{
|
width: 40px;
|
height: 40px;
|
border-radius: 4px;
|
background: #eaf1ff;
|
margin-right: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img{
|
width: 28px;
|
height: 28px;
|
}
|
}
|
&>div:last-of-type{
|
width: calc(100% - 50px);
|
font-size: 16px;
|
div{
|
width: 100%;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-family: "PingFang SC";
|
margin-bottom: 4px;
|
}
|
span{
|
color: #999;
|
}
|
}
|
&:hover{
|
background: #f5f5f5;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
