feat: 轮播图组件

src/pages/home/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <main class="home-page">
+    <HomeCarousel />
+
+    <section class="home-links" aria-label="Site pages">
+      <RouterLink
+        v-for="page in pageLinks"
+        :key="page.to"
+        class="home-link"
+        :to="page.to"
+      >
+        {{ page.label }}
+      </RouterLink>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import { RouterLink } from 'vue-router'
+import HomeCarousel from './components/Carousel.vue'
+
+const pageLinks = [
+  { label: 'About', to: '/about' },
+  { label: 'Products', to: '/products' },
+  { label: 'Contact', to: '/contact' },
+] as const
+
+useHead({
+  title: 'Home | Code Create',
+  meta: [
+    {
+      name: 'description',
+      content: 'Code Create home page rendered with Vite SSG.',
+    },
+  ],
+})
+</script>
+
+<style scoped>
+.home-page {
+  /* width: 100%; */
+  /* min-height: 100svh; */
+  /* background: #ffffff; */
+}
+
+.home-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  padding: 32px 20px 48px;
+}
+
+.home-link {
+  min-width: 112px;
+  padding: 10px 16px;
+  border: 1px solid #d9dde6;
+  border-radius: 6px;
+  color: #1d2430;
+  background: #ffffff;
+  font-size: 15px;
+  line-height: 1.2;
+  text-align: center;
+  text-decoration: none;
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    box-shadow 0.2s;
+}
+
+.home-link:hover,
+.home-link:focus-visible,
+.home-link.router-link-active {
+  border-color: #2f6df6;
+  color: #2f6df6;
+  box-shadow: 0 8px 24px rgba(36, 55, 92, 0.12);
+}
+
+.home-link:focus-visible {
+  outline: 2px solid #2f6df6;
+  outline-offset: 2px;
+}
+
+@media (max-width: 640px) {
+  .home-links {
+    padding: 24px 16px 40px;
+  }
+
+  .home-link {
+    flex: 1 1 calc(50% - 12px);
+  }
+}
+</style>