From a213f6bfca8c129680c7e4ef53f3391d3347fc38 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期六, 28 十月 2023 18:17:21 +0800
Subject: [PATCH] feat: 添加当前日期时间展示组件
---
src/views/dashboard/components/TaskTabs.vue | 6 +++++-
src/views/dashboard/components/CurrentDateTime.vue | 21 +++++++++++++++++++++
src/views/dashboard/index.vue | 17 +++++++++++++++--
3 files changed, 41 insertions(+), 3 deletions(-)
diff --git a/src/views/dashboard/components/CurrentDateTime.vue b/src/views/dashboard/components/CurrentDateTime.vue
new file mode 100644
index 0000000..3097eab
--- /dev/null
+++ b/src/views/dashboard/components/CurrentDateTime.vue
@@ -0,0 +1,21 @@
+<template>
+ <div class="current-date-time">
+ {{ time }}
+ </div>
+</template>
+
+<script setup lang="ts">
+import { useDateFormat, useNow } from '@vueuse/core'
+
+const time = useDateFormat(useNow(), 'YYYY[骞碷 MM[鏈圿 DD[鏃 dddd HH:mm:ss', { locales: 'zh-cn' })
+</script>
+<style scoped lang="scss">
+$color: #30decd;
+
+.current-date-time {
+ width: 370px;
+ color: $color;
+ font-size: 24px;
+ font-weight: 600;
+}
+</style>
diff --git a/src/views/dashboard/components/TaskTabs.vue b/src/views/dashboard/components/TaskTabs.vue
index 4c848ab..d2e3311 100644
--- a/src/views/dashboard/components/TaskTabs.vue
+++ b/src/views/dashboard/components/TaskTabs.vue
@@ -15,10 +15,14 @@
import { useVModel } from '@vueuse/core'
const props = defineProps<{
+ /** tab 鍒楄〃*/
list: string[]
+ /** 褰撳墠閫変腑鐨� tab*/
modelValue?: string
}>()
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+ 'update:modelValue': [tabName: string]
+}>()
const data = useVModel(props, 'modelValue', emit)
function selectTab(tabName: string) {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index ea2a7f4..bea368b 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -10,7 +10,11 @@
<template #middleBlock2>涓荤湅鏉�</template>
<template #middleBlock3>浠诲姟璇︽儏</template>
<template #middleBlock4>浜哄憳淇℃伅</template>
- <template #rightBlock1>鏃堕棿</template>
+ <template #rightBlock1>
+ <div class="date-time">
+ <CurrentDateTime></CurrentDateTime>
+ </div>
+ </template>
<template #rightBlock2>鐘舵�侀潰鏉�</template>
<template #rightBlock3>鐭ヨ瘑搴�</template>
</DashboardLayout>
@@ -22,6 +26,7 @@
import type { Task } from '@/api/task'
import { chain } from 'lodash-es'
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
+import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
defineOptions({
name: 'DashboardView'
@@ -55,4 +60,12 @@
})
</script>
-<style scoped></style>
+<style scoped>
+.date-time {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 12px;
+}
+</style>
--
Gitblit v1.8.0