93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
<template>
|
|
<div class="text-4xl text-white flex items-center justify-center relative">
|
|
<div
|
|
class="absolute left-36px text-15px font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] flex items-center"
|
|
>
|
|
{{ year }}年
|
|
<div class="flex flex-col justify-center -mt-2px ml-4px">
|
|
<caret-up-outlined
|
|
:style="{ fontSize: '10px', color: '#76E9F0' }"
|
|
class="h-6px cursor-pointer"
|
|
@click="onYearPlus"
|
|
/>
|
|
<caret-down-outlined
|
|
:style="{ fontSize: '10px', color: '#76E9F0' }"
|
|
class="h-6px cursor-pointer"
|
|
@click="onYearMinus"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-1099px h-43px relative">
|
|
<div class="absolute left-0 bottom-0 w-340px text-10px h-28px flex items-center justify-end">
|
|
{{ state.date }} {{ state.time }}
|
|
</div>
|
|
<div
|
|
class="absolute right-0 bottom-0 w-340px text-10px h-28px flex items-center justify-start"
|
|
>
|
|
<div>多云</div>
|
|
<div class="mx-20px">PM2.5</div>
|
|
<div class="flex items-center">
|
|
<span class="bg-[#00F500] w-2.2px h-2.2px inline-block rounded-full mr-4px"></span>
|
|
<span>良好</span>
|
|
</div>
|
|
</div>
|
|
<img class="w-full h-full" :src="headTitleImg" alt="" srcset="" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, computed } from 'vue'
|
|
import headTitleImg from '/@/assets/images/head-title.png'
|
|
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
|
|
|
|
import { useVisualizationStore } from '/@/store/modules/visualization'
|
|
|
|
const visualizationStore = useVisualizationStore()
|
|
|
|
const year = computed(() => visualizationStore.getYear)
|
|
|
|
const onYearPlus = () => {
|
|
visualizationStore.plus()
|
|
}
|
|
const onYearMinus = () => {
|
|
visualizationStore.minus()
|
|
}
|
|
|
|
const state = reactive({
|
|
date: '',
|
|
time: '',
|
|
week: '',
|
|
showIndex: 0,
|
|
})
|
|
// 获取时间接口
|
|
const getTime = async () => {
|
|
var myDate = new Date()
|
|
let month = (myDate.getMonth() + 1).toString().padStart(2, '0')
|
|
let day = myDate.getDate().toString().padStart(2, '0')
|
|
let hour = myDate.getHours().toString().padStart(2, '0')
|
|
let minutes = myDate.getMinutes().toString().padStart(2, '0')
|
|
let seconed = myDate.getSeconds().toString().padStart(2, '0')
|
|
state.date = myDate.getFullYear() + '-' + month + '-' + day
|
|
state.time = hour + ':' + minutes + ':' + seconed
|
|
}
|
|
|
|
setInterval(() => {
|
|
getTime()
|
|
}, 1000)
|
|
|
|
// 获取当前星期几
|
|
|
|
const getWeekDate = () => {
|
|
var now = new Date()
|
|
var day = now.getDay()
|
|
var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|
state.week = weeks[day]
|
|
}
|
|
setInterval(() => {
|
|
getWeekDate()
|
|
}, 1000 * 60 * 60 * 24)
|
|
</script>
|
|
|
|
<style scoped></style>
|