对接台桌列表

src/views/table/components/countCard.vue

@@ -0,0 +1,97 @@
+<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: 82px;
+    letter-spacing: 10px;
+}
+
+.count_wrap {
+    padding: 0 20px;
+
+    .date_wrap {
+        padding: 40px 0;
+        border-bottom: 1px solid #ececec;
+
+        .date {
+            font-size: 26px;
+            padding-left: 6px;
+        }
+    }
+
+    .order_info {
+        padding: 40px 0;
+        display: flex;
+
+        .item {
+            flex: 1;
+
+            .num {
+                font-family: 'num';
+                font-size: 46px;
+                letter-spacing: 4px;
+                padding-top: 10px;
+            }
+        }
+    }
+}
+</style>