<template>
|
<div class="main_app">
|
<div class="main_header">
|
<div class="title">安泰智慧物流园区-绿色低碳运营</div>
|
<div class="time">
|
<span>{{date}}</span>
|
<span>{{week}}</span>
|
<span>{{time}}</span>
|
</div>
|
</div>
|
<div class="main_content">
|
<div class="left_box">
|
<div class="left_box_one"></div>
|
<div class="left_box_two"></div>
|
<div class="left_box_three"></div>
|
</div>
|
<div class="center_box">
|
<div class="center_box_one"></div>
|
<div class="center_box_two"></div>
|
</div>
|
<div class="right_box">
|
<div class="right_box_one"></div>
|
<div class="right_box_two"></div>
|
<div class="right_box_three"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import dayjs from 'dayjs'
|
|
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
|
const date = ref(dayjs().format('YYYY.MM.DD'))
|
const week = ref(weekMap[new Date().getDay()])
|
const time = ref(dayjs().format('HH:mm:ss'))
|
setInterval(() => {
|
date.value = dayjs().format('YYYY-MM-DD')
|
week.value = weekMap[new Date().getDay()]
|
time.value = dayjs().format('HH:mm:ss')
|
|
},1000)
|
|
</script>
|
|
<style lang="scss" scoped>
|
.main_app{
|
width: 100%;
|
min-height: 100vh;
|
background: #0b2539;
|
color: #FFFFFF;
|
}
|
.main_content{
|
display: flex;
|
.left_box{}
|
.center_box{}
|
.right_box{}
|
}
|
.main_header{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 71px;
|
border: 1px solid;
|
}
|
</style>
|
