60 lines
1.9 KiB
HTML
60 lines
1.9 KiB
HTML
<!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>© 2024 公司名称 | 联系电话：123-4567-890 | 邮箱：info@example.com</p>
|
||
</footer>
|
||
<script setup>
|
||
// 响应式数据
|
||
features = [
|
||
{ title: '快速响应', description: '我们提供7x24小时的快速响应服务' },
|
||
{ title: '专业团队', description: '拥有经验丰富的专业团队' },
|
||
{ title: '优质服务', description: '致力于为客户提供最优质的服务体验' }
|
||
]
|
||
</script>
|
||
</html>
|