72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
||
interface Widget {
|
||
icon: string[]
|
||
url: string
|
||
title: string
|
||
}
|
||
// Const welcomeWords = ['你好👋，很高兴认识你！']
|
||
|
||
const littleWidget: Widget[] = [
|
||
{
|
||
icon: ['fab', 'qq'],
|
||
url: 'tencent://message/?uin=1922471905&Site=&Menu=yes',
|
||
title: 'QQ',
|
||
},
|
||
{
|
||
icon: ['fab', 'github-alt'],
|
||
url: 'https://github.com/Aurora1949',
|
||
title: 'Github',
|
||
},
|
||
{
|
||
icon: ['fab', 'weibo'],
|
||
url: 'https://weibo.com/u/7923648952',
|
||
title: '微博',
|
||
},
|
||
{
|
||
icon: ['fab', 'steam-symbol'],
|
||
url: 'https://steamcommunity.com/id/cantyonion/',
|
||
title: 'Steam',
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container my-16 flex w-full">
|
||
<!-- 头像部分 -->
|
||
<div class="hidden h-32 w-32 overflow-hidden rounded-full bg-white hover:animate-pulse sm:block">
|
||
<img
|
||
alt=""
|
||
src="https://q.qlogo.cn/g?b=qq&nk=1922471905&s=640"
|
||
>
|
||
</div>
|
||
|
||
<!-- 文字部分 -->
|
||
<div class="container flex flex-1 flex-col justify-between px-4 sm:px-8">
|
||
<div class="text-4xl">
|
||
Jeffrey Hsu
|
||
</div>
|
||
<div class="text-2xl text-gray-400">
|
||
你好👋，很高兴认识你！
|
||
</div>
|
||
<!-- <vue-typed-js :strings="['First text', 'Second Text']"> -->
|
||
<!-- <h1 class="typing"></h1> -->
|
||
<!-- </vue-typed-js> -->
|
||
<div class="flex gap-4 text-xl">
|
||
<a
|
||
v-for="item in littleWidget"
|
||
:key="item.url"
|
||
:href="item.url"
|
||
:title="item.title"
|
||
class="flex h-10 w-10 items-center justify-center rounded-full bg-green-400 text-white transition-all hover:scale-125"
|
||
>
|
||
<font-awesome-icon :icon="item.icon" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|