<template>
|
<div class="login">
|
<!-- <img class="pics1" src="src/assets/images/login-data.png">-->
|
<!-- <img class="pics2" src="src/assets/images/login-search.png">-->
|
<div class="main-content">
|
<div class="top">
|
<div class="top-cont">
|
<div class="logo blueFont">智慧安评</div>
|
<div class="time">
|
<div>
|
<span>{{state.date}}</span>
|
<span>{{state.weekDay}}</span>
|
</div>
|
<div>
|
{{state.dayTime}}好！
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="nav blueBg">
|
<div class="nav-cont">
|
<div :class="state.activeMenu == 1?'active': ''" @click="changeTab(1)">
|
<HomeFilled style="width: 1em; height: 1em; margin-right: 8px" />
|
<div>首页</div>
|
</div>
|
<div :class="state.activeMenu == 2?'active': ''" @click="changeTab(2)">
|
<Comment style="width: 1em; height: 1em; margin-right: 8px" />
|
<div>通知公告</div>
|
</div>
|
<div :class="state.activeMenu == 3?'active': ''" @click="changeTab(3)">
|
<BellFilled style="width: 1em; height: 1em; margin-right: 8px" />
|
<div>法律法规</div>
|
</div>
|
<div :class="state.activeMenu == 4?'active': ''" @click="changeTab(4)">
|
<List style="width: 1em; height: 1em; margin-right: 8px" />
|
<div>信息公示</div>
|
</div>
|
</div>
|
</div>
|
<div class="content">
|
<Home v-if="state.activeMenu==1" ref="homeRef" @toMore="changeTab"/>
|
<Notice v-if="state.activeMenu==2" ref="noticeRef"/>
|
<Laws v-if="state.activeMenu==3" ref="lawsRef"/>
|
<Publish v-if="state.activeMenu==4" ref="publishRef"/>
|
<Details ref="detailsRef"></Details>
|
</div>
|
</div>
|
<!-- 底部 -->
|
<div class="el-login-footer">
|
<span>Copyright © All Rights Reserved.</span>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import {onMounted, ref, reactive, watch, defineAsyncComponent, nextTick, onUnmounted} from "vue"
|
import useUserStore from '@/store/modules/user'
|
import Home from './components/home'
|
import Notice from './components/notice'
|
import Laws from './components/laws'
|
import Publish from './components/publish'
|
import Details from './components/details'
|
|
const route = useRoute()
|
const router = useRouter()
|
// 时间格式化
|
const timeForm = {
|
hour12: false,
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit',
|
second: '2-digit'
|
}
|
|
const homeRef = ref(null)
|
const noticeRef = ref(null)
|
const lawsRef = ref(null)
|
const publishRef = ref(null)
|
|
const state = reactive({
|
activeMenu: 1,
|
date: '',
|
weekDay: '',
|
dayTime: '',
|
checkDetails: false
|
})
|
|
// 当前时间
|
const getDateTime = () => {
|
const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
|
state.date = curTime.slice(0, 10);
|
let week = ['日', '一', '二', '三', '四', '五', '六'];
|
let day = new Date().getDay();
|
state.weekDay = '星期' + week[day];
|
let curHour = Number(curTime.slice(10, 13));
|
if (curHour >= 5 && curHour <= 10) {
|
state.dayTime = '上午';
|
}
|
if (curHour > 10 && curHour <= 12) {
|
state.dayTime = '中午';
|
}
|
if (curHour > 12 && curHour <= 18) {
|
state.dayTime = '下午';
|
}
|
if (curHour > 18 && curHour <= 22) {
|
state.dayTime = '晚上';
|
}
|
if (curHour > 22) {
|
state.dayTime = '午夜';
|
}
|
};
|
|
|
const redirect = ref(undefined);
|
|
onMounted(()=>{
|
getDateTime();
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
watch(route, (newRoute) => {
|
redirect.value = newRoute.query && newRoute.query.redirect;
|
}, { immediate: true });
|
|
const changeTab=(num)=>{
|
state.activeMenu = num
|
console.log(state.activeMenu)
|
// if(num == 1){
|
// homeRef.value.getNoticeList()
|
// homeRef.value.getLawsList()
|
// homeRef.value.getPubList()
|
// }
|
// if(num == 2){
|
// noticeRef.value.getData()
|
// }
|
// if(num == 3){
|
// lawsRef.value.getData()
|
// }
|
// if(num == 4){
|
// publishRef.value.getData()
|
// }
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
.login {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
height: 100%;
|
|
.main-content{
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
color: #333;
|
|
.top{
|
width: 100%;
|
background: rgba(249,250,251,1);
|
position: fixed;
|
top: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.top-cont{
|
width: 1200px;
|
height: 90px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin: 0 auto;
|
|
.logo{
|
font-size: 2rem;
|
font-weight: 800;
|
height: 90px;
|
line-height: 90px;
|
font-family: "PingFang SC";
|
}
|
|
.time{
|
font-size: 16px;
|
height: 90px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
span{
|
&:first-of-type{
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
}
|
|
|
.nav{
|
width: 100%;
|
height: 80px;
|
position: fixed;
|
top: 90px;
|
left: 0;
|
.nav-cont{
|
width: 1200px;
|
height: 80px;
|
margin: 0 auto;
|
display: flex;
|
align-items: center;
|
justify-content: left;
|
|
&>div{
|
height: 100%;
|
padding: 0 50px;
|
color: #ffffff;
|
background-color: #5175C0;
|
font-size: 20px;
|
text-decoration: none;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
|
&:hover{
|
background: #425f9f;
|
}
|
}
|
.active{
|
background: #425f9f;
|
}
|
}
|
}
|
}
|
}
|
.pics1{
|
position: absolute;
|
width: 500px;
|
bottom: 0;
|
right: 0;
|
opacity: 0.5;
|
}
|
.pics2{
|
position: absolute;
|
width: 500px;
|
top: 20px;
|
left: 20px;
|
opacity: 0.5;
|
}
|
|
.el-login-footer {
|
height: 60px;
|
line-height: 60px;
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
text-align: center;
|
color: #fff;
|
background: #5175C0;
|
font-family: "PingFang SC";
|
font-size: 12px;
|
letter-spacing: 1px;
|
}
|
</style>
|
