feat: home page optimize
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import DatePickerDisplayCard from "@/components/card/DatePickerDisplayCard.vue";
|
||||
import DevelopProgressCard from "@/components/card/DevelopProgressCard.vue";
|
||||
import NavBar from "@/components/menu/NavBar.vue";
|
||||
import { navigateTo } from "@/utils/navigator";
|
||||
|
||||
const progress = ref([
|
||||
{
|
||||
@@ -35,17 +37,46 @@ const progress = ref([
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<NavBar />
|
||||
<div class="w-full p-4 grid grid-cols-3 gap-4 justify-items-center">
|
||||
<DevelopProgressCard
|
||||
v-for="item in progress"
|
||||
:key="item.title"
|
||||
:completed="item.completed"
|
||||
:pending="item.pending"
|
||||
:title="item.title"
|
||||
:intro="item.intro"
|
||||
/>
|
||||
<div class="bg-base-200">
|
||||
<div class="h-screen flex flex-col">
|
||||
<NavBar class="fixed top-0 left-0 z-10" />
|
||||
<div class="hero flex-1">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-md">
|
||||
<h1 class="text-5xl font-bold">欢迎加入</h1>
|
||||
<p class="py-6">
|
||||
超现代化的 Vue3 Based 脚手架<br />
|
||||
赋予您高效的开发体验<br />
|
||||
使用 bun docs 命令启动 Hucky 的文档服务器
|
||||
</p>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="navigateTo('http://localhost:5174')"
|
||||
>
|
||||
查阅文档
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 min-h-screen">
|
||||
<h1 class="text-4xl font-bold mb-12 ml-10">脚手架开发进度</h1>
|
||||
<div class="w-full grid grid-cols-3 gap-4 justify-items-center">
|
||||
<DevelopProgressCard
|
||||
v-for="item in progress"
|
||||
:key="item.title"
|
||||
:completed="item.completed"
|
||||
:pending="item.pending"
|
||||
:title="item.title"
|
||||
:intro="item.intro"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 min-h-screen">
|
||||
<h1 class="text-4xl font-bold mb-12 ml-10">组件演示</h1>
|
||||
<div class="w-full grid grid-cols-3 gap-4 justify-items-center">
|
||||
<DatePickerDisplayCard />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user