ui

2025-04-23 11:21:08 +08:00
parent fc643727f3
commit 7a1aae1e2f
135 changed files with 221483 additions and 1 deletions
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+<head>
+  <title>欢迎来到我们的网站</title>
+</head>
+<style>
+  .hero {
+    background-color: #f8f9fa;
+    padding: 4rem 1rem;
+    text-align: center;
+  }
+  .feature-item {
+    border: 1px solid #ddd;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.25rem;
+  }
+</style>
+<body>
+  <!-- 导航栏 -->
+  <nav class="flex items-center justify-between p-4 bg-blue-700 text-white">
+    <div class="font-bold text-lg">公司名称</div>
+    <ul class="flex space-x-4">
+      <li><a href="#" class="hover:underline">首页</a></li>
+      <li><a href="#" class="hover:underline">产品</a></li>
+      <li><a href="#" class="hover:underline">关于我们</a></li>
+      <li><a href="#" class="hover:underline">联系我们</a></li>
+    </ul>
+  </nav>
+  <!-- 英雄区域 -->
+  <section class="hero">
+    <h1 class="text-4xl font-bold">欢迎来到我们的网站</h1>
+    <p class="mt-4 max-w-xl mx-auto text-gray-600">
+      这里是公司的简介和主要业务介绍文字。
+    </p>
+  </section>
+  <!-- 特色内容 -->
+  <section class="container mx-auto my-8">
+    <h2 class="text-2xl font-bold mb-4">我们的特色</h2>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="feature-item" v-for="(feature, index) in features" :key="index">
+        <h3 class="font-bold">{{ feature.title }}</h3>
+        <p>{{ feature.description }}</p>
+      </div>
+    </div>
+  </section>
+  <!-- 联系方式 -->
+  <footer class="bg-gray-800 text-white text-center py-4 mt-8">
+    <p>&copy; 2024 公司名称 | 联系电话：123-4567-890 | 邮箱：info@example.com</p>
+  </footer>
+<script setup>
+  // 响应式数据
+  features = [
+    { title: '快速响应', description: '我们提供7x24小时的快速响应服务' },
+    { title: '专业团队', description: '拥有经验丰富的专业团队' },
+    { title: '优质服务', description: '致力于为客户提供最优质的服务体验' }
+  ]
+</script>
+</html>