54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
|
<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>
|