133 lines
3.5 KiB
Vue
133 lines
3.5 KiB
Vue
<template>
|
|
<div class="head-container">
|
|
<div class="home-head-box relative">
|
|
<div class="time absolute">
|
|
<div class="f20">{{ datatime }}</div>
|
|
<div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
|
|
</div>
|
|
<div class="title absolute" @click="goPath">{{ props.title }}</div>
|
|
|
|
<div class="title-tow" absolute>
|
|
<div class="back"><span class="ml40">林芝市</span></div>
|
|
</div>
|
|
<!-- <div class="wd absolute">
|
|
<el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
|
|
<span> 温度 1~7°C </span>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from "vue-router";
|
|
import { getRecentDay, timeValidate } from "@/utils/tools.js";
|
|
import { ref, onMounted, defineProps, onUnmounted } from "vue";
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "警保联动"
|
|
}
|
|
});
|
|
const datatime = ref(getRecentDay(0));
|
|
const minute = ref("00"); //分
|
|
const second = ref("00"); //秒
|
|
const hour = ref("00"); //时
|
|
const day = ref(0);
|
|
const timersfm = ref(null);
|
|
|
|
const router = useRouter();
|
|
|
|
onMounted(() => {
|
|
timersfm.value = setInterval(() => {
|
|
CurrentTime();
|
|
}, 1000);
|
|
});
|
|
// 获取时分秒
|
|
function CurrentTime() {
|
|
const date = new Date();
|
|
hour.value = date.getHours();
|
|
minute.value = date.getMinutes();
|
|
second.value = date.getSeconds();
|
|
day.value = day.value < 10 ? "0" + day.value : day.value;
|
|
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
|
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
|
second.value = second.value < 10 ? "0" + second.value : second.value;
|
|
}
|
|
|
|
function goPath() {
|
|
router.push("/editPassword");
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.head-container {
|
|
width: 100%;
|
|
height: 135px;
|
|
position: relative;
|
|
background: #263445;
|
|
z-index: 2;
|
|
}
|
|
.home-head-box {
|
|
width: 100%;
|
|
height: 138px;
|
|
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
|
z-index: 2;
|
|
.title {
|
|
font-size: 36px;
|
|
left: 50%;
|
|
top: 10px;
|
|
transform: translateX(-50%);
|
|
font-family: "YSBTH";
|
|
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.title-tow {
|
|
background: #fff;
|
|
position: absolute;
|
|
height: 70px;
|
|
width: 500px;
|
|
top: 50px;
|
|
left: calc(50% - 270px);
|
|
font-size: 36px;
|
|
font-family: "YSBTH";
|
|
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-align: center;
|
|
line-height: 100px;
|
|
.back {
|
|
background: url("~@/assets/images/bi/fbt.png") no-repeat center center;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.time {
|
|
font-family: "DigifaceWide";
|
|
color: #fff;
|
|
left: 25%;
|
|
top: 10px;
|
|
}
|
|
.wd {
|
|
right: 25%;
|
|
top: 12px;
|
|
font-size: 16px;
|
|
font-family: "DigifaceWide";
|
|
color: #fff;
|
|
}
|
|
.zbbb {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 22px;
|
|
font-size: 16px;
|
|
width: 162px;
|
|
height: 48px;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
font-size: 16px;
|
|
background: url("~@/assets/images/btnbb.png") no-repeat center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
</style>
|