IntelliClass_FE/pages/index.vue

74 lines
2.0 KiB
Vue

<script lang="ts" setup>
definePageMeta({
layout: 'blank',
})
useHead({
title: 'AI 智慧课程平台',
})
</script>
<template>
<div
class="w-full h-full flex flex-col justify-center items-center relative bg-img"
>
<div class="absolute inset-16"></div>
<div class="flex flex-col items-center gap-16 pb-48">
<h1 class="text-4xl font-medium drop-shadow-xl text-ai-gradient">
AI 智慧课程平台
</h1>
<div class="flex gap-6">
<NuxtLink
to="/course"
target="_blank"
class="fn-block border-blue-300/80 from-blue-300/5 via-blue-300/40 to-blue-400/20"
>
<Icon
name="fluent-color:chat-multiple-24"
class="text-5xl"
/>
<h2 class="text-lg font-medium text-blue-500">AI 助教</h2>
</NuxtLink>
<NuxtLink
class="fn-block border-teal-300/80 from-teal-300/5 via-teal-300/40 to-teal-400/20"
>
<Icon
name="fluent-color:book-open-24"
class="text-5xl"
/>
<h2 class="text-lg font-medium text-teal-500">AI 助学</h2>
</NuxtLink>
<NuxtLink
class="fn-block border-violet-300/80 from-violet-300/5 via-violet-300/40 to-violet-400/20"
>
<Icon
name="fluent-color:star-settings-24"
class="text-5xl"
/>
<h2 class="text-lg font-medium text-violet-500">AI 助管</h2>
</NuxtLink>
</div>
</div>
</div>
</template>
<style scoped>
.text-ai-gradient {
background: linear-gradient(90deg, rgb(94, 222, 255), rgb(136, 99, 253));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bg-img {
background-image: url("/images/bg_home.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fn-block {
@apply flex flex-col items-center gap-4 rounded-lg border bg-gradient-to-b via-35% backdrop-blur px-16 py-4 select-none cursor-pointer;
}
</style>