<template>
<!-- 首页 -->
<div class="homePage">
<!-- 顶部 -->
<div
id="oneMapHeader"
:class="[
'oneMapHeader',
'animate__animated',
showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
]"
>
<!-- 标题 -->
<div id="titleFont">延安市智慧城管</div>
<!-- 标题左侧展示组件 -->
<div class="Location">
<el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
><LocationFilled
/></el-icon>
延安
</div>
<div class="Timer">
<span class="date">{{ dates }}</span>
<span class="time">{{ times }}</span>
<span class="date week">{{ weeks }}</span>
</div>
<div class="Wather"></div>
<!-- 标题右侧功能组件 -->
<router-link to="/user/profile">
<div class="goHome header_icon"></div>
</router-link>
<div class="goClose_com header_icon" @click="logout()"></div>
</div>
<!-- 中间内容部分 -->
<div id="HomePageBody">
<!-- 菜单 -->
<div class="ZhuanTi ZhuanTi1" @click="ZhuanTIGO(1)">
<div class="ZhuanTiName">城市生命线</div>
</div>
<div class="ZhuanTi ZhuanTi2" @click="ZhuanTIGO(2)">
<div class="ZhuanTiName">海绵城市</div>
</div>
</div>
<!-- 底部菜单 -->
<div id="BottomMenuBox">
<Transition name="slide-fade">
<div v-show="AllData.BottmBackGroundShow" class="BottmBackGround"></div>
</Transition>
</div>
</div>
</template>
<script setup name="homePage">
import useUserStore from "@/store/modules/user";
const router = useRouter();
const userStore = useUserStore();
import { fullscreenToggel } from "@/utils/util";
// 时间以及天气
const timer = ref(null);
const dates = ref(null);
const weeks = ref(null);
const times = ref(null);
const AllData = reactive({
BottmBackGroundShow: false,
});
const showPanel2 = ref(true);
// 获取当前时间
const formatTime = () => {
let date = new Date();
let year = date.getFullYear(); // 年
let month = date.getMonth() + 1; // 月
let day = date.getDate(); // 日
let hour = date.getHours(); // 时
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
let minute = date.getMinutes(); // 分
minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
let second = date.getSeconds(); // 秒
second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
let weekAry = new Array(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
);
weeks.value = weekAry[date.getDay()];
dates.value = `${year}-${month}-${day}`;
times.value = `${hour}:${minute}:${second}`;
};
const currentTime = () => {
clearInterval(timer.value);
timer.value = setInterval(() => {
formatTime();
}, 500);
};
// 点击跳转专题图
const ZhuanTIGO = (num) => {
userStore.ZhuanTiType = num;
router.push({
path: "/oneMap",
name: "oneMap",
meta: { title: "一张图", icon: "dashboard", affix: true, noCache: true },
query: { type: "FullScreen" },
});
};
// 退出登录
const logout = () => {
userStore.logOut().then(() => {
location.href = "/";
});
};
onMounted(() => {
fullscreenToggel();
currentTime();
showPanel2.value = false;
AllData.BottmBackGroundShow = true;
});
</script>
<style scoped lang="scss">
.homePage {
width: 100%;
height: 100vh;
background: black;
position: relative;
background: url("@/assets/images/MenHU/bj_img@2x.png") no-repeat center;
background-size: cover;
// 顶部
#oneMapHeader {
width: 100%;
height: 100px;
background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
background-size: cover;
z-index: 100;
position: absolute;
top: 0;
left: 0;
#titleFont {
width: 634px;
height: 47px;
position: absolute;
left: 50%;
margin-left: -317px;
top: 20px;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 38px;
color: #ffffff;
line-height: 35px;
font-style: italic;
background: linear-gradient(0deg, aqua 0%, #ffffff 80%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
letter-spacing: 15px;
}
.Location {
position: absolute;
top: 15px;
left: 20px;
height: 15px;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 14px;
color: #ffffff;
line-height: 13px;
font-style: italic;
height: 18px;
line-height: 18px;
display: inline-block;
}
.Timer {
position: absolute;
top: 15px;
left: 90px;
height: 18px;
line-height: 18px;
.time {
display: inline-block;
width: auto;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 12px;
color: #ffffff;
height: 18px;
line-height: 18px;
font-style: italic;
margin: 0 10px;
}
.date {
display: inline-block;
width: auto;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 12px;
color: #ffffff;
height: 18px;
line-height: 18px;
font-style: italic;
}
}
.header_icon {
width: 22px;
height: 22px;
position: absolute;
top: 10px;
cursor: pointer;
}
.goHome {
background: url("@/assets/images/MenHU/sz.png") no-repeat center;
background-size: contain;
right: 100px;
}
.goClose_com {
background: url("@/assets/images/MenHU/tc.png") no-repeat center;
background-size: contain;
right: 50px;
}
}
// 底部
#BottomMenuBox {
position: absolute;
bottom: 0;
width: 952px;
height: 93px;
left: 50%;
margin-left: -476px;
z-index: 999;
.BottmBackGround {
position: absolute;
bottom: 0;
width: 952px;
height: 53px;
background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
background-size: cover;
}
}
// 中部内容
#HomePageBody {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.ZhuanTi {
width: 316px;
height: 378px;
cursor: pointer;
margin: 85px;
position: relative;
&:hover {
transform: scale(1.05);
box-shadow: 0px 0px 10px aqua;
}
.ZhuanTiName {
width: 100%;
height: 40px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 30px;
color: #ffffff;
text-align: center;
position: absolute;
left: 0;
bottom: 70px;
}
}
.ZhuanTi1 {
background: url("@/assets/images/MenHU/cssmx@2x.png") no-repeat center;
background-size: cover;
}
.ZhuanTi2 {
background: url("@/assets/images/MenHU/hmcs@2x.png") no-repeat center;
background-size: cover;
}
}
}
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateY(80px);
opacity: 0;
}
</style>
