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: 2px;
|
||
padding: 5px 10px;
|
||
}
|
||
.bg-color {
|
||
background: var(--color-bg-2);
|
||
}
|
||
</style>
|