prototype_design/src/views/HomeView.vue

<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">
          <div class="text-blue-600">
            <div class="w-8 h-8">
              <div class="w-full h-full" />
            </div>
          </div>
          <span class="text-xl font-medium">ProductName</span>
        </div>

        <div class="flex-1 max-w-xl mx-4">
          <div class="relative">
            <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
            <input
                type="text"
                placeholder="搜索..."
                class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
        </div>

        <div class="flex items-center space-x-4">
          <a href="#/about" class="text-blue-600 hover:underline">关于我们</a>
          <a href="#/services" class="text-blue-600 hover:underline">服务</a>
          <a href="#/cases" class="text-blue-600 hover:underline">客户案例</a>
          <a href="#/contact" class="text-blue-600 hover:underline">联系我们</a>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">登录</button>
          <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300">注册</button>
        </div>
      </div>
    </header>

    <div class="flex">
      <!-- Sidebar -->
      <aside class="w-64 min-h-screen bg-white border-r">
        <nav class="p-4">
          <div class="mb-4 text-gray-500">菜单类别标题</div>
          <ul class="space-y-2">
            <li>
              <a href="#/" class="flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded-lg">
                <Home class="w-5 h-5 mr-3" />
                首页
              </a>
            </li>
            <li v-for="i in 8" :key="i">
              <a href="#" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
                <Box class="w-5 h-5 mr-3" />
                系统模块{{ i }}
              </a>
            </li>
          </ul>
        </nav>
      </aside>

      <!-- Main Content -->
      <main class="flex-1 p-6">
        <!-- Featured Section -->
        <section class="mb-6">
          <h2 class="text-2xl font-bold mb-4">特色区域</h2>
          <div class="grid grid-cols-2 gap-6">
            <div class="bg-white rounded-lg p-6 shadow-sm flex items-center space-x-4">
              <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-blue-50">
                <FileText class="text-blue-500" size={24} />
              </div>
              <div>
                <h3 class="text-lg font-medium">核心产品1</h3>
                <p class="text-gray-500">简短描述</p>
              </div>
            </div>
            <div class="bg-white rounded-lg p-6 shadow-sm flex items-center space-x-4">
              <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-yellow-50">
                <FileText class="text-yellow-500" size={24} />
              </div>
              <div>
                <h3 class="text-lg font-medium">核心产品2</h3>
                <p class="text-gray-500">简短描述</p>
              </div>
            </div>
          </div>
        </section>

        <!-- Products/Services Section -->
        <section class="mb-6">
          <h2 class="text-2xl font-bold mb-4">产品/服务展示区</h2>
          <div class="grid grid-cols-2 gap-6">
            <div class="bg-white rounded-lg p-6 shadow-sm flex items-center space-x-4">
              <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-green-50">
                <FileText class="text-green-500" size={24} />
              </div>
              <div>
                <h3 class="text-lg font-medium">服务1</h3>
                <p class="text-gray-500">简短描述</p>
              </div>
            </div>
            <div class="bg-white rounded-lg p-6 shadow-sm flex items-center space-x-4">
              <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-red-50">
                <FileText class="text-red-500" size={24} />
              </div>
              <div>
                <h3 class="text-lg font-medium">服务2</h3>
                <p class="text-gray-500">简短描述</p>
              </div>
            </div>
          </div>
        </section>

        <!-- Customer Reviews Section -->
        <section class="mb-6">
          <h2 class="text-2xl font-bold mb-4">客户评价区</h2>
          <div class="bg-white rounded-lg p-6 shadow-sm">
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
                <div>
                  <div class="text-gray-900">客户名1</div>
                  <p class="text-gray-500">正面评价</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
                <div>
                  <div class="text-gray-900">客户名2</div>
                  <p class="text-gray-500">正面评价</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Latest News/Blog Section -->
        <section class="mb-6">
          <h2 class="text-2xl font-bold mb-4">最新动态区</h2>
          <div class="bg-white rounded-lg p-6 shadow-sm">
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
                <div>
                  <div class="text-gray-900">新闻标题1</div>
                  <p class="text-gray-500">简短描述</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
                <div>
                  <div class="text-gray-900">新闻标题2</div>
                  <p class="text-gray-500">简短描述</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>

    <!-- Footer -->
    <footer class="bg-white border-t">
      <div class="flex items-center justify-between px-4 py-4">
        <div class="text-gray-500">
          <p>公司地址: 123 街道, 城市, 国家</p>
          <p>联系电话: +123456789</p>
          <p>Email: contact@example.com</p>
        </div>
        <div class="flex items-center space-x-4">
          <a href="https://facebook.com" class="text-gray-500 hover:underline">Facebook</a>
          <a href="https://twitter.com" class="text-gray-500 hover:underline">Twitter</a>
          <a href="https://instagram.com" class="text-gray-500 hover:underline">Instagram</a>
        </div>
        <div class="text-gray-500">
          &copy; 2025 ProductName. All rights reserved.
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {
  Search, Home, FileText, Box, MoreHorizontal
} from 'lucide-vue-next'
</script>