157 lines
3.3 KiB
Vue
157 lines
3.3 KiB
Vue
<template>
|
|
<div class="header_top">
|
|
<div class="head_box">
|
|
<span class="head_title">实景三维电子沙盘系统</span>
|
|
<img width="100%" height="100%" src="../../../assets/images/new.png" alt="" />
|
|
</div>
|
|
<div class="dateTime">
|
|
<span>{{ date.hms }}</span>
|
|
<div class="ymd_week">
|
|
<span>{{ date.ymd }}</span>
|
|
<span>{{ t(`week.${date.week}`) }}</span>
|
|
</div>
|
|
<div class="weather">
|
|
<svg-icon name="weather" :size="40"></svg-icon>
|
|
</div>
|
|
</div>
|
|
<setTool ref="setToolRef"></setTool>
|
|
|
|
<!-- <headButton class="headButton"></headButton> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import setTool from './components/setTool/setTool.vue'
|
|
|
|
const { t } = useI18n()
|
|
const date = ref({
|
|
ymd: '',
|
|
hms: '',
|
|
week: 0
|
|
})
|
|
const setTime = () => {
|
|
let date1 = new Date()
|
|
let year: any = date1.getFullYear()
|
|
let month: any = date1.getMonth() + 1
|
|
let day: any = date1.getDate()
|
|
let hours: any = date1.getHours()
|
|
if (hours < 10) {
|
|
hours = '0' + hours
|
|
}
|
|
let minutes: any = date1.getMinutes()
|
|
if (minutes < 10) {
|
|
minutes = '0' + minutes
|
|
}
|
|
let seconds: any = date1.getSeconds()
|
|
if (seconds < 10) {
|
|
seconds = '0' + seconds
|
|
}
|
|
date.value.ymd = year + '-' + month + '-' + day
|
|
date.value.hms = hours + ':' + minutes + ':' + seconds
|
|
date.value.week = date1.getDay()
|
|
}
|
|
// 添加定时器，每秒更新一次时间
|
|
const timer = setInterval(setTime, 1000)
|
|
// 组件卸载时清除定时器
|
|
onUnmounted(() => {
|
|
clearInterval(timer)
|
|
})
|
|
|
|
// onMounted(() => {
|
|
// console.log($t('headerTitles.week'))
|
|
// })
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.header_top {
|
|
width: 100%;
|
|
//height: 120px;
|
|
height: 6.25vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 19;
|
|
|
|
.head_box {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 96px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 33, 36, 1) 0%,
|
|
rgba(0, 38, 41, 1) 25.47%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
box-shadow: 0px 0px 4px rgba(80, 227, 230, 0.2);
|
|
|
|
/** 文本1 */
|
|
.head_title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0px;
|
|
color: rgba(255, 255, 255, 1);
|
|
// box-shadow: 0px 0px 4px rgba(80, 227, 230, 0.2);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.dateTime {
|
|
position: absolute;
|
|
left: 20px;
|
|
//top: 15px;
|
|
top: 0.55vw;
|
|
height: 50px;
|
|
//border: 1px solid red;
|
|
//width: 200px;
|
|
// color: var(--svg-headColor3);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: 'alimamashuheiti';
|
|
|
|
& > span:first-child {
|
|
letter-spacing: 1px;
|
|
font-size: 2rem;
|
|
font-family: 'alimamashuheiti';
|
|
margin-right: 10px;
|
|
width: 140px;
|
|
}
|
|
|
|
.ymd_week {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
& > span:first-child {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
& > span:last-child {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
.weather {
|
|
margin-left: 15px;
|
|
svg {
|
|
fill: rgba(0, 255, 255, 1) !important;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.headButton {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
</style>
|