代码与页面示例
精选的页面结构和组件代码示例，帮助你快速理解和应用 HTMLPAGE 的各项功能。
📄 页面布局示例
落地页布局
经典的产品落地页结构，包含英雄区、特性展示、用户评价和行动号召。
<template>
<div class="landing-page">
<!-- 英雄区 -->
<section class="hero bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
<div class="container mx-auto px-4 text-center">
<h1 class="text-5xl font-bold mb-6">打造你的专业网页</h1>
<p class="text-xl mb-8">无需编程，AI 助力快速生成</p>
<button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition">
免费开始
</button>
</div>
</section>
<!-- 特性展示 -->
<section class="features py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">核心功能</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="feature-card p-6 rounded-lg shadow-md">
<div class="text-4xl mb-4">🤖</div>
<h3 class="text-xl font-semibold mb-2">AI 智能生成</h3>
<p class="text-gray-600">描述需求，AI 自动创建页面</p>
</div>
<!-- 更多特性卡片 -->
</div>
</div>
</section>
</div>
</template>
作品集布局
适合设计师、开发者展示作品的网格布局。
<template>
<div class="portfolio">
<section class="py-16">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold mb-12 text-center">我的作品集</h1>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="project in projects" :key="project.id"
class="project-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
<img :src="project.image" :alt="project.title" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">{{ project.title }}</h3>
<p class="text-gray-600">{{ project.description }}</p>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
🎨 组件示例
卡片组件
可复用的内容卡片组件。
<template>
<div class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img v-if="image" :src="image" :alt="title" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">{{ title }}</h3>
<p class="text-gray-600 mb-4">{{ description }}</p>
<slot name="actions">
<button class="text-blue-600 font-semibold hover:text-blue-700">了解更多 →</button>
</slot>
</div>
</div>
</template>
<script setup>
defineProps({
title: String,
description: String,
image: String
})
</script>
导航栏组件
响应式导航栏，支持移动端菜单。
<template>
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="text-2xl font-bold text-blue-600">LOGO</div>
<!-- 桌面菜单 -->
<ul class="hidden md:flex space-x-8">
<li><a href="#home" class="hover:text-blue-600 transition">首页</a></li>
<li><a href="#features" class="hover:text-blue-600 transition">功能</a></li>
<li><a href="#pricing" class="hover:text-blue-600 transition">价格</a></li>
<li><a href="#contact" class="hover:text-blue-600 transition">联系</a></li>
</ul>
<!-- 移动端菜单按钮 -->
<button @click="menuOpen = !menuOpen" class="md:hidden">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<!-- 移动端菜单 -->
<ul v-if="menuOpen" class="md:hidden pb-4 space-y-2">
<li><a href="#home" class="block py-2 hover:text-blue-600">首页</a></li>
<li><a href="#features" class="block py-2 hover:text-blue-600">功能</a></li>
<li><a href="#pricing" class="block py-2 hover:text-blue-600">价格</a></li>
<li><a href="#contact" class="block py-2 hover:text-blue-600">联系</a></li>
</ul>
</div>
</nav>
</template>
<script setup>
import { ref } from 'vue'
const menuOpen = ref(false)
</script>
表单组件
联系表单示例，包含验证。
<template>
<form @submit.prevent="handleSubmit" class="max-w-lg mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-6">联系我们</h2>
<div class="mb-4">
<label class="block text-gray-700 mb-2">姓名</label>
<input v-model="form.name" type="text" required
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">邮箱</label>
<input v-model="form.email" type="email" required
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2">留言</label>
<textarea v-model="form.message" rows="4" required
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<button type="submit"
class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
发送消息
</button>
</form>
</template>
<script setup>
import { reactive } from 'vue'
const form = reactive({
name: '',
email: '',
message: ''
})
const handleSubmit = () => {
console.log('提交表单:', form)
// 处理表单提交
}
</script>
🎯 实用代码片段
平滑滚动
// 平滑滚动到指定元素
const scrollToElement = (elementId) => {
const element = document.getElementById(elementId)
element?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
图片懒加载
<template>
<img :src="imageSrc"
:data-src="actualSrc"
class="lazy-image"
@load="onImageLoad">
</template>
<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
actualSrc: String,
placeholder: { type: String, default: '/placeholder.jpg' }
})
const imageSrc = ref(props.placeholder)
onMounted(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
imageSrc.value = props.actualSrc
observer.disconnect()
}
})
})
observer.observe(entry.target)
})
</script>
响应式网格
/* 自适应网格布局 */
.grid-auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
/* 响应式容器 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 768px) {
.container {
padding: 0 2rem;
}
}
📱 响应式设计示例
移动优先的按钮组
<template>
<div class="button-group flex flex-col md:flex-row gap-4 justify-center">
<button class="btn btn-primary">主要操作</button>
<button class="btn btn-secondary">次要操作</button>
</div>
</template>
<style scoped>
.btn {
@apply px-6 py-3 rounded-lg font-semibold transition-all;
}
.btn-primary {
@apply bg-blue-600 text-white hover:bg-blue-700 hover:shadow-lg;
}
.btn-secondary {
@apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}
</style>
相关资源
💡 提示: 如需更多帮助，请查看完整文档或联系我们的支持团队。