<script setup>
|
import { ref } from 'vue'
|
import dayjs from 'dayjs'
|
|
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
|
const datetime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
setInterval(() => {
|
datetime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
},1000)
|
|
</script>
|
<template>
|
<div class="main_app">
|
<div class="main_header">
|
<div class="datetime">{{ datetime }} {{ weekMap[new Date().getDay()] }}</div>
|
<div class="title">安泰物流智慧园区排队叫号</div>
|
<div class="datetime"></div>
|
</div>
|
<div class="main_content">
|
<div class="box in_box">
|
<div class="title">安泰物流入库月台</div>
|
<div class="line">
|
<div class="no item">序号</div>
|
<div class="item">车牌号</div>
|
<div class="item">状态</div>
|
<div class="item">停靠月台</div>
|
</div>
|
<div class="line" v-for="i in 6">
|
<div class="no item">1</div>
|
<div class="item">皖A12313</div>
|
<div class="item">叫号中</div>
|
<div class="item">8号月台</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.main_app{
|
color: #fff;
|
width: 100%;
|
min-height: 100vh;
|
background: #000000;
|
padding: 42px;
|
.main_content{
|
display: flex;
|
.box{
|
margin-right: 52px;
|
.title{
|
background-color: #36321d;
|
font-size: 26px;
|
}
|
.line{
|
display: flex;
|
}
|
}
|
}
|
.main_header{
|
display: flex;
|
align-items: center;
|
padding: 20px;
|
margin-bottom: 20px;
|
.datetime{
|
width: 350px;
|
font-size: 24px;
|
}
|
.title{
|
flex: 1;
|
font-size: 36px;
|
font-weight: 600;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
