75 lines
3.1 KiB
Vue
75 lines
3.1 KiB
Vue
<template>
|
||
<div class="bg-base-200 min-h-screen">
|
||
<main class="hero min-h-screen bg-base-200">
|
||
<div
|
||
class="hero-content flex-col xl:flex-row-reverse gap-8 xl:gap-12 py-10 px-4"
|
||
>
|
||
<!-- 例程轮播容器 -->
|
||
<div class="w-full flex justify-center" style="min-width: 650px">
|
||
<TutorialCarousel :autoRotationInterval="3000" />
|
||
</div>
|
||
<!-- 内容容器 -->
|
||
<div
|
||
class="content-container max-w-md lg:max-w-2xl transform transition-all duration-500 ease-in-out"
|
||
>
|
||
<h1 class="text-4xl md:text-5xl font-bold mb-3 relative group">
|
||
<span
|
||
class="relative z-10 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
|
||
>
|
||
Welcome to
|
||
</span>
|
||
<span class="text-base-content">FPGA Web Lab!</span>
|
||
<span
|
||
class="absolute bottom-0 left-0 w-0 h-1 bg-primary transition-all duration-500 ease-in-out group-hover:w-3/4"
|
||
></span>
|
||
</h1>
|
||
|
||
<p class="py-6 text-lg opacity-80 leading-relaxed">
|
||
在浏览器中进行FPGA原型设计和电路仿真，使用现代直观的界面。创建、测试和分享您的FPGA设计，体验从基础学习到高级项目的完整开发流程。
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 actions-container">
|
||
<router-link
|
||
to="/project"
|
||
class="btn btn-primary text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1 flex-1 sm:flex-none"
|
||
>
|
||
<BookOpen class="h-5 w-5 mr-2" />
|
||
进入工程界面
|
||
</router-link>
|
||
<router-link
|
||
to="/exam"
|
||
class="btn btn-secondary text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1 flex-1 sm:flex-none"
|
||
>
|
||
<GraduationCap class="h-5 w-5 mr-2" />
|
||
实验列表
|
||
</router-link>
|
||
</div>
|
||
<div
|
||
class="mt-8 p-4 bg-base-300 rounded-lg shadow-inner opacity-80 transition-all duration-300 hover:opacity-100 hover:shadow-md"
|
||
>
|
||
<div class="space-y-2">
|
||
<p class="text-sm">
|
||
<span class="font-semibold text-primary">工程界面：</span>
|
||
自由创建和编辑FPGA项目，使用可视化画布进行电路设计和仿真测试。
|
||
</p>
|
||
<p class="text-sm">
|
||
<span class="font-semibold text-secondary">实验列表：</span>
|
||
浏览结构化的学习实验，从基础概念到高级应用的系统性学习路径。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import "@/router";
|
||
import TutorialCarousel from "@/components/TutorialCarousel.vue";
|
||
import { BookOpen, GraduationCap } from "lucide-vue-next";
|
||
</script>
|
||
|
||
<style scoped lang="postcss">
|
||
@import "../assets/main.css";
|
||
</style>
|