|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-gray-50">
|
|
|
+ <!-- Top Navigation -->
|
|
|
+ <header class="bg-white border-b">
|
|
|
+ <div class="flex items-center justify-between px-4 py-2">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <a href="#/" class="text-blue-600">
|
|
|
+ <div class="w-8 h-8">
|
|
|
+ <div class="w-full h-full" />
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ <span class="text-xl font-medium">ProductName</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <a href="#/about" class="text-gray-500">关于我们</a>
|
|
|
+ <a href="#/services" class="text-gray-500">服务</a>
|
|
|
+ <a href="#/contact" class="text-gray-500">联系我们</a>
|
|
|
+ <button class="px-3 py-1 text-white bg-blue-600 rounded-md">登录/注册</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- Carousel -->
|
|
|
+ <div class="relative">
|
|
|
+ <div class="carousel w-full h-96 overflow-hidden">
|
|
|
+ <div class="carousel-item relative w-full h-full">
|
|
|
+ <img src="@/assets/img/applied_view.png" alt="Image 1" class="w-full h-full object-cover" />
|
|
|
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
|
|
+ <div class="text-white text-center">
|
|
|
+ <h2 class="text-4xl font-bold">欢迎来到 ProductName</h2>
|
|
|
+ <p class="mt-2">我们提供卓越的服务和解决方案。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="carousel-item relative w-full h-full">
|
|
|
+ <img src="@/assets/img/KT_view.png" alt="Image 2" class="w-full h-full object-cover" />
|
|
|
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
|
|
+ <div class="text-white text-center">
|
|
|
+ <h2 class="text-4xl font-bold">我们的优势</h2>
|
|
|
+ <p class="mt-2">高效的团队，优质的服务。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="carousel-item relative w-full h-full">
|
|
|
+ <img src="@/assets/img/project_view.png" alt="Image 3" class="w-full h-full object-cover" />
|
|
|
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
|
|
+ <div class="text-white text-center">
|
|
|
+ <h2 class="text-4xl font-bold">我们的项目</h2>
|
|
|
+ <p class="mt-2">探索我们的最新项目。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white px-4 py-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg></button>
|
|
|
+ <button class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white px-4 py-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg></button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Featured Services -->
|
|
|
+ <div class="container mx-auto mt-12">
|
|
|
+ <h2 class="text-3xl font-bold text-center mb-6">我们的服务</h2>
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue-500" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V6a3 3 0 013-3h2a1 1 0 100-2h-2zm0 8a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2h2zm-2 4a1 1 0 100 2h2a1 1 0 100-2h-2z" /></svg>
|
|
|
+ </div>
|
|
|
+ <h3 class="text-xl font-medium mt-4">服务1</h3>
|
|
|
+ <p class="mt-2">服务1的简短介绍。</p>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue-500" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V6a3 3 0 013-3h2a1 1 0 100-2h-2zm0 8a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2h2zm-2 4a1 1 0 100 2h2a1 1 0 100-2h-2z" /></svg>
|
|
|
+ </div>
|
|
|
+ <h3 class="text-xl font-medium mt-4">服务2</h3>
|
|
|
+ <p class="mt-2">服务2的简短介绍。</p>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue-500" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V6a3 3 0 013-3h2a1 1 0 100-2h-2zm0 8a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2h2zm-2 4a1 1 0 100 2h2a1 1 0 100-2h-2z" /></svg>
|
|
|
+ </div>
|
|
|
+ <h3 class="text-xl font-medium mt-4">服务3</h3>
|
|
|
+ <p class="mt-2">服务3的简短介绍。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Recommended Content -->
|
|
|
+ <div class="container mx-auto mt-12">
|
|
|
+ <h2 class="text-3xl font-bold text-center mb-6">推荐内容</h2>
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <a href="#/content1" class="block">
|
|
|
+ <img src="@/assets/img/prompt_view.png" alt="Content 1" class="w-full h-48 object-cover" />
|
|
|
+ <h3 class="text-xl font-medium mt-4">内容1</h3>
|
|
|
+ <p class="mt-2">内容1的简短介绍。</p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <a href="#/content2" class="block">
|
|
|
+ <img src="@/assets/img/upload_view.png" alt="Content 2" class="w-full h-48 object-cover" />
|
|
|
+ <h3 class="text-xl font-medium mt-4">内容2</h3>
|
|
|
+ <p class="mt-2">内容2的简短介绍。</p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <a href="#/content3" class="block">
|
|
|
+ <img src="@/assets/img/applied_view.png" alt="Content 3" class="w-full h-48 object-cover" />
|
|
|
+ <h3 class="text-xl font-medium mt-4">内容3</h3>
|
|
|
+ <p class="mt-2">内容3的简短介绍。</p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer class="bg-gray-800 text-white py-6">
|
|
|
+ <div class="container mx-auto">
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
+ <div>
|
|
|
+ <h3 class="font-bold">关于我们</h3>
|
|
|
+ <p class="mt-2">我们是一家致力于提供优质服务的公司。</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="font-bold">快速链接</h3>
|
|
|
+ <ul class="mt-2">
|
|
|
+ <li><a href="#/about" class="hover:text-gray-400">关于我们</a></li>
|
|
|
+ <li><a href="#/services" class="hover:text-gray-400">服务</a></li>
|
|
|
+ <li><a href="#/contact" class="hover:text-gray-400">联系我们</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="font-bold">联系我们</h3>
|
|
|
+ <p class="mt-2">地址: 中国上海市XX路XX号</p>
|
|
|
+ <p>电话: +86 123 456 7890</p>
|
|
|
+ <p>邮箱: contact@example.com</p>
|
|
|
+ <div class="mt-2">
|
|
|
+ <a href="https://twitter.com" class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" /></svg></a>
|
|
|
+ <a href="https://facebook.com" class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" /></svg></a>
|
|
|
+ <a href="https://instagram.com"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" /><line x1="17.86" y1="6.16" x2="18" y2="6" /></svg></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-6 text-center">
|
|
|
+ <p>© {{ new Date().getFullYear() }} ProductName. All rights reserved.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+const carouselIndex = ref(0)
|
|
|
+
|
|
|
+const nextSlide = () => {
|
|
|
+ carouselIndex.value = (carouselIndex.value + 1) % 3
|
|
|
+}
|
|
|
+
|
|
|
+const prevSlide = () => {
|
|
|
+ carouselIndex.value = (carouselIndex.value - 1 + 3) % 3
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.carousel {
|
|
|
+ position: relative;
|
|
|
+ transition: transform 0.5s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-item {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.5s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-item:nth-child(1) {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+</style>
|
genlitex
