98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<template>
|
|
<div class="count_wrap">
|
|
<div class="date_wrap">
|
|
<div class="time">{{ nowTime }}</div>
|
|
<div class="date">
|
|
<span>{{ nowDate }}</span>
|
|
<span>{{ week }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="order_info">
|
|
<div class="item">
|
|
<div class="title">未结算订单</div>
|
|
<div class="num">0</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="title">未结算金额</div>
|
|
<div class="num">0.00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from 'dayjs'
|
|
import weekday from 'dayjs/plugin/weekday'
|
|
dayjs.extend(weekday)
|
|
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
const nowTime = ref(dayjs().format('HH:mm'))
|
|
const nowDate = ref(dayjs().format('M月D日 '))
|
|
const weekFormat = {
|
|
1: '星期一',
|
|
2: '星期二',
|
|
3: '星期三',
|
|
4: '星期四',
|
|
5: '星期五',
|
|
6: '星期六',
|
|
7: '星期天',
|
|
}
|
|
const week = ref(weekFormat[dayjs().weekday()])
|
|
|
|
const timer = ref(null)
|
|
function updateTime() {
|
|
timer.value = setInterval(() => {
|
|
nowTime.value = dayjs().format('HH:mm')
|
|
console.log('时间更新了')
|
|
}, 30000)
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateTime()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(timer.value)
|
|
timer.value = null
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.time {
|
|
font-family: 'num';
|
|
font-size: 42px;
|
|
letter-spacing: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.count_wrap {
|
|
padding: 0 var(--el-font-size-base);
|
|
|
|
.date_wrap {
|
|
padding: var(--el-font-size-base) 0;
|
|
border-bottom: 1px solid #ececec;
|
|
|
|
.date {
|
|
font-size: var(--el-font-size-base);
|
|
}
|
|
}
|
|
|
|
.order_info {
|
|
padding: var(--el-font-size-base) 0;
|
|
display: flex;
|
|
|
|
.item {
|
|
flex: 1;
|
|
|
|
.num {
|
|
font-family: 'num';
|
|
font-size: 26px;
|
|
letter-spacing: 4px;
|
|
padding-top: 10px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |