97 lines
4.9 KiB
Vue
97 lines
4.9 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">
|
||
Prototype and simulate electronic circuits in your browser with our
|
||
modern, intuitive interface. Create, test, and share your FPGA
|
||
designs seamlessly.
|
||
</p>
|
||
<div class="flex flex-wrap 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">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2">
|
||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
|
||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
|
||
</svg>
|
||
进入工程界面
|
||
</router-link>
|
||
|
||
<router-link to="/login"
|
||
class="btn btn-secondary text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||
</svg>
|
||
登录
|
||
</router-link>
|
||
|
||
<router-link to="/user"
|
||
class="btn btn-accent text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="12" cy="7" r="4"></circle>
|
||
</svg>
|
||
用户中心
|
||
</router-link>
|
||
<router-link to="/test"
|
||
class="btn btn-info text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2">
|
||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
|
||
<polyline points="17 21 17 13 7 13 7 21"></polyline>
|
||
<polyline points="7 3 7 8 15 8"></polyline>
|
||
</svg>
|
||
测试功能
|
||
</router-link>
|
||
|
||
<router-link to="/admin"
|
||
class="btn btn-error text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2">
|
||
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z">
|
||
</path>
|
||
<circle cx="12" cy="12" r="3"></circle>
|
||
</svg>
|
||
管理控制台
|
||
</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">
|
||
<p class="text-sm">
|
||
<span class="font-semibold text-primary">提示：</span>
|
||
您可以在工程界面中创建、编辑和测试您的FPGA项目，使用我们简洁直观的界面轻松进行硬件设计。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import "@/router";
|
||
import TutorialCarousel from "@/components/TutorialCarousel.vue";
|
||
</script>
|
||
|
||
<style scoped lang="postcss">
|
||
@import "../assets/main.css";
|
||
</style>
|