1122

cdTMP/src/views/dashboard/workplace/components/cpns/st-welcome.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="flex justify-between">
+        <div class="ma-content-block rounded-sm flex justify-between w-full p-3 bg-color">
+            <div class="pl-0 flex">
+                <a-avatar :size="75" class="hidden lg:inline-block">
+                    <img src="@/assets/avatar/zhu.jpg" />
+                </a-avatar>
+                <div class="pl-3 mt-2">
+                    <div class="content-block-title">{{ userStore.name }}，今天天气很好，欢迎回来！</div>
+                    <div class="leading-5 mt-2 flex items-center">
+                        <a-tag color="red" bordered class="mr-2">好用的测试工具集</a-tag>
+                        欢迎使用测试管理平台 ⭐长期更新。
+                    </div>
+                </div>
+            </div>
+            <div class="datetime ml-5 hidden md:block">
+                <h2 class="text-3xl text-center">{{ time }}</h2>
+                <p class="text-base">{{ day }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue"
+import { useUserStore } from "@/store"
+import dayjs from "dayjs"
+const userStore = useUserStore()
+const time = ref(null)
+const day = ref(null)
+const showTime = () => {
+    time.value = dayjs().format("HH:mm:ss")
+    day.value = dayjs().format("YYYY年MM月DD日")
+}
+onMounted(() => {
+    showTime()
+    setInterval(() => showTime(), 1000)
+})
+</script>
+
+<style lang="less" scoped>
+.datetime {
+    background: rgb(var(--primary-6));
+    color: #fff;
+    width: 160px;
+    text-align: center;
+    border-radius: 3px;
+    padding: 5px 10px;
+}
+.bg-color {
+    background: var(--color-bg-2);
+}
+</style>