yangyi-open-api-platform/ui/yangyi-open-api-platform-ui/src/components/HelloWorld.vue

<template>
  <div class="home-page">
    <!-- 导航栏 -->
    <el-header class="navbar">
      <div class="nav-container">
        <div class="nav-left">
          <div class="logo">
            <el-icon class="logo-icon"><Platform /></el-icon>
            <span class="logo-text">API开放平台</span>
          </div>
          <el-menu
              mode="horizontal"
              :default-active="activeNav"
              class="nav-menu"
              @select="handleNavSelect"
          >
            <el-menu-item index="home">首页</el-menu-item>
            <el-menu-item index="docs">文档中心</el-menu-item>
            <el-menu-item index="pricing">价格方案</el-menu-item>
            <el-menu-item index="support">技术支持</el-menu-item>
          </el-menu>
        </div>
        <div class="nav-right">
          <el-button type="primary" @click="handleLogin">立即登录</el-button>
          <el-button @click="handleRegister">免费注册</el-button>
        </div>
      </div>
    </el-header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 英雄区域 -->
      <section class="hero-section">
        <div class="hero-container">
          <div class="hero-content">
            <h1 class="hero-title">
              强大的API接口服务
              <br>
              <span class="highlight">赋能您的业务创新</span>
            </h1>
            <p class="hero-description">
              提供稳定、安全、高效的API接口服务，支持多种数据格式和认证方式，
              助力开发者快速构建应用程序
            </p>
            <div class="hero-actions">
              <el-button type="primary" size="large" @click="handleGetStarted">
                立即开始
                <el-icon><ArrowRight /></el-icon>
              </el-button>
              <el-button size="large" @click="handleViewDocs">
                查看文档
              </el-button>
            </div>
            <div class="hero-stats">
              <div class="stat-item">
                <div class="stat-number">500+</div>
                <div class="stat-label">可用接口</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">99.9%</div>
                <div class="stat-label">服务可用性</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">10,000+</div>
                <div class="stat-label">开发者用户</div>
              </div>
            </div>
          </div>
          <div class="hero-visual">
            <div class="api-visual">
              <div class="code-window">
                <div class="window-header">
                  <div class="window-dots">
                    <span class="dot red"></span>
                    <span class="dot yellow"></span>
                    <span class="dot green"></span>
                  </div>
                  <span class="window-title">api_example.js</span>
                </div>
                <div class="code-content">
                  <pre><code>// 调用用户信息接口
fetch('/api/v1/users/123', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-api-key',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));</code></pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 特性介绍 -->
      <section class="features-section">
        <div class="container">
          <div class="section-header">
            <h2>为什么选择我们的API平台</h2>
            <p>我们提供全方位的API服务解决方案</p>
          </div>
          <div class="features-grid">
            <el-card class="feature-card" shadow="hover">
              <div class="feature-icon">
                <el-icon><Lock /></el-icon>
              </div>
              <h3>安全可靠</h3>
              <p>多重安全认证机制，数据加密传输，保障您的数据安全</p>
            </el-card>
            <el-card class="feature-card" shadow="hover">
              <div class="feature-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <h3>高性能</h3>
              <p>分布式架构，负载均衡，确保API接口的高性能和稳定性</p>
            </el-card>
            <el-card class="feature-card" shadow="hover">
              <div class="feature-icon">
                <el-icon><Document /></el-icon>
              </div>
              <h3>完善文档</h3>
              <p>详细的API文档和示例代码，帮助您快速上手集成</p>
            </el-card>
            <el-card class="feature-card" shadow="hover">
              <div class="feature-icon">
                <el-icon><Headset /></el-icon>
              </div>
              <h3>专业支持</h3>
              <p>7x24小时技术支持，专业团队为您解决技术问题</p>
            </el-card>
          </div>
        </div>
      </section>

      <!-- API分类 -->
      <section class="categories-section">
        <div class="container">
          <div class="section-header">
            <h2>丰富的API接口</h2>
            <p>覆盖多个领域的API服务</p>
          </div>
          <div class="categories-grid">
            <div class="category-item">
              <div class="category-icon user">
                <el-icon><User /></el-icon>
              </div>
              <h4>用户管理</h4>
              <p>用户注册、登录、信息管理等接口</p>
            </div>
            <div class="category-item">
              <div class="category-icon data">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <h4>数据分析</h4>
              <p>数据统计、分析、可视化接口</p>
            </div>
            <div class="category-item">
              <div class="category-icon payment">
                <el-icon><Money /></el-icon>
              </div>
              <h4>支付服务</h4>
              <p>多种支付方式接入接口</p>
            </div>
            <div class="category-item">
              <div class="category-icon message">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <h4>消息推送</h4>
              <p>短信、邮件、推送通知接口</p>
            </div>
            <div class="category-item">
              <div class="category-icon storage">
                <el-icon><Folder /></el-icon>
              </div>
              <h4>文件存储</h4>
              <p>文件上传、下载、管理接口</p>
            </div>
            <div class="category-item">
              <div class="category-icon ai">
                <el-icon><Cpu /></el-icon>
              </div>
              <h4>人工智能</h4>
              <p>AI模型调用、图像识别接口</p>
            </div>
          </div>
        </div>
      </section>

      <!-- CTA区域 -->
      <section class="cta-section">
        <div class="container">
          <div class="cta-content">
            <h2>立即开始使用我们的API服务</h2>
            <p>注册即可获得免费额度，快速集成到您的应用中</p>
            <div class="cta-actions">
              <el-button type="primary" size="large" @click="handleRegister">
                免费注册
              </el-button>
              <el-button size="large" @click="handleContact">
                联系销售
              </el-button>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <div class="footer-logo">
              <el-icon><Platform /></el-icon>
              <span>API开放平台</span>
            </div>
            <p class="footer-description">
              专业的API接口服务平台，为开发者提供稳定可靠的接口服务
            </p>
          </div>
          <div class="footer-section">
            <h4>产品</h4>
            <ul>
              <li><a href="#">接口市场</a></li>
              <li><a href="#">价格方案</a></li>
              <li><a href="#">文档中心</a></li>
              <li><a href="#">状态监控</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>支持</h4>
            <ul>
              <li><a href="#">技术支持</a></li>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">开发者社区</a></li>
              <li><a href="#">服务条款</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>联系我们</h4>
            <ul>
              <li><a href="#">商务合作</a></li>
              <li><a href="#">意见反馈</a></li>
              <li><a href="#">加入我们</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2024 API开放平台. 保留所有权利.</p>
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Platform,
  ArrowRight,
  Lock,
  TrendCharts,
  Document,
  Headset,
  User,
  DataAnalysis,
  Money,
  ChatDotRound,
  Folder,
  Cpu
} from '@element-plus/icons-vue'

const router = useRouter()
const activeNav = ref('home')

// 导航菜单选择
const handleNavSelect = (index) => {
  activeNav.value = index
  // 这里可以添加页面内滚动或路由跳转逻辑
}

// 登录按钮点击
const handleLogin = () => {
  router.push('/login')
}

// 注册按钮点击
const handleRegister = () => {
  // 可以跳转到注册页面或打开注册模态框
  console.log('打开注册')
}

// 立即开始
const handleGetStarted = () => {
  handleRegister()
}

// 查看文档
const handleViewDocs = () => {
  // 跳转到文档页面
  console.log('查看文档')
}

// 联系销售
const handleContact = () => {
  // 打开联系表单
  console.log('联系销售')
}
</script>

<style scoped>
/* 修复全屏显示问题 */
.home-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  height: 64px;
  flex-shrink: 0; /* 防止导航栏被压缩 */
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #303133;
}

.logo-icon {
  font-size: 24px;
  color: #409EFF;
}

.nav-menu {
  border-bottom: none;
  background: transparent;
}

.nav-right {
  display: flex;
  gap: 12px;
}

.main-content {
  flex: 1; /* 使主内容区域占据剩余空间 */
  width: 100%;
}

/* 英雄区域 */
.hero-section {
  padding: 100px 0 80px;
  color: white;
  width: 100%;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}

.highlight {
  background: linear-gradient(45deg, #ffd700, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 32px;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.hero-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* API可视化 */
.api-visual {
  display: flex;
  justify-content: center;
}

.code-window {
  background: #1e1e1e;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
}

.window-header {
  background: #2d2d2d;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.window-dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27ca3f; }

.window-title {
  color: #ccc;
  font-size: 0.9rem;
}

.code-content {
  padding: 24px;
}

.code-content pre {
  margin: 0;
  color: #d4d4d4;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
}

/* 特性区域 */
.features-section {
  padding: 80px 0;
  background: white;
  width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #303133;
  margin-bottom: 16px;
}

.section-header p {
  font-size: 1.1rem;
  color: #606266;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  text-align: center;
  padding: 32px 24px;
  border: none;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #409EFF, #67C23A);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon .el-icon {
  font-size: 32px;
  color: white;
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #303133;
}

.feature-card p {
  color: #606266;
  line-height: 1.6;
}

/* 分类区域 */
.categories-section {
  padding: 80px 0;
  background: #f5f7fa;
  width: 100%;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

.category-item {
  text-align: center;
  padding: 32px 24px;
  background: white;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.category-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.category-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
}

.category-icon.user { background: #409EFF; }
.category-icon.data { background: #67C23A; }
.category-icon.payment { background: #E6A23C; }
.category-icon.message { background: #F56C6C; }
.category-icon.storage { background: #909399; }
.category-icon.ai { background: #8E44AD; }

.category-item h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #303133;
}

.category-item p {
  color: #606266;
  line-height: 1.5;
}

/* CTA区域 */
.cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  width: 100%;
}

.cta-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.cta-content p {
  font-size: 1.2rem;
  margin-bottom: 32px;
  opacity: 0.9;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* 页脚 */
.footer {
  background: #2c3e50;
  color: white;
  padding: 60px 0 20px;
  flex-shrink: 0; /* 防止页脚被压缩 */
  width: 100%;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-description {
  color: #bdc3c7;
  line-height: 1.6;
}

.footer-section h4 {
  margin-bottom: 20px;
  color: white;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section li {
  margin-bottom: 12px;
}

.footer-section a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: white;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #34495e;
  color: #bdc3c7;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .nav-menu {
    display: none;
  }

  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .features-grid,
  .categories-grid {
    grid-template-columns: 1fr;
  }
}

/* 确保所有元素宽度为100% */
.home-page > * {
  width: 100%;
}
</style>