You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<template>
|
|
<div class="login-head">
|
|
<div class="head-title">
|
|
<image class="head-icon" src="/static/head-icon.png" />
|
|
<span>国家税务总局XX市XX税务局办税服务厅</span>
|
|
</div>
|
|
<div class="head-time">
|
|
<text class="dt-text">{{ currentDate }}</text>
|
|
<text class="dt-text">{{ currentDay }}</text>
|
|
<text class="dt-text">{{ currentTime }}</text>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
onUnmounted
|
|
} from 'vue'
|
|
|
|
const currentTime = ref('')
|
|
const currentDate = ref('')
|
|
const currentDay = ref('')
|
|
|
|
const updateDateTime = () => {
|
|
const now = new Date()
|
|
|
|
// 格式化时间 (HH:MM:SS)
|
|
const hours = String(now.getHours()).padStart(2, '0')
|
|
const minutes = String(now.getMinutes()).padStart(2, '0')
|
|
const seconds = String(now.getSeconds()).padStart(2, '0')
|
|
currentTime.value = `${hours}:${minutes}:${seconds}`
|
|
|
|
// 格式化日期 (YYYY-MM-DD)
|
|
const year = now.getFullYear()
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
currentDate.value = `${year}-${month}-${day}`
|
|
|
|
// 新增：获取星期
|
|
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|
currentDay.value = weekDays[now.getDay()]
|
|
};
|
|
|
|
let timer
|
|
|
|
onMounted(() => {
|
|
updateDateTime() // 立即执行一次
|
|
timer = setInterval(updateDateTime, 1000) // 每秒更新
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
clearInterval(timer)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.login-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: $statusbar-height;
|
|
|
|
.head-title {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 6vh;
|
|
|
|
.head-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 1vw;
|
|
}
|
|
|
|
span {
|
|
color: #fff;
|
|
font-size: 3vh;
|
|
font-weight: 800;
|
|
margin-left: 1vw;
|
|
}
|
|
}
|
|
|
|
.head-time {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 6vh;
|
|
|
|
.dt-text {
|
|
color: #fff;
|
|
font-size: 2vh;
|
|
margin-right: 1vw;
|
|
}
|
|
}
|
|
}
|
|
</style> |