代码与页面示例

精选的页面结构和组件代码示例，帮助你快速理解和应用 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>

相关资源

• 快速入门指南 - 学习如何使用这些示例
• 组件库文档 - 查看完整组件列表
• 模板市场 - 浏览更多完整模板
• 导出指南 - 了解如何导出代码

💡 提示: 如需更多帮助，请查看完整文档或联系我们的支持团队。