- <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>