60 lines
1.7 KiB
Vue
60 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
||
type 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> |