|
|
@@ -1,43 +1,762 @@
|
|
|
-<script setup>
|
|
|
-import { ref } from '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>
|
|
|
|
|
|
-defineProps({
|
|
|
- msg: String,
|
|
|
+ <!-- 主内容区域 -->
|
|
|
+ <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>
|
|
|
|
|
|
-const count = ref(0)
|
|
|
-</script>
|
|
|
+ <!-- 特性介绍 -->
|
|
|
+ <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>
|
|
|
|
|
|
-<template>
|
|
|
- <h1>{{ msg }}</h1>
|
|
|
-
|
|
|
- <div class="card">
|
|
|
- <button type="button" @click="count++">count is {{ count }}</button>
|
|
|
- <p>
|
|
|
- Edit
|
|
|
- <code>components/HelloWorld.vue</code> to test HMR
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ <!-- 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>
|
|
|
|
|
|
- <p>
|
|
|
- Check out
|
|
|
- <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
|
|
- >create-vue</a
|
|
|
- >, the official Vue + Vite starter
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Learn more about IDE Support for Vue in the
|
|
|
- <a
|
|
|
- href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
|
|
- target="_blank"
|
|
|
- >Vue Docs Scaling up Guide</a
|
|
|
- >.
|
|
|
- </p>
|
|
|
- <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
|
|
+ <!-- 页脚 -->
|
|
|
+ <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>© 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>
|
|
|
-.read-the-docs {
|
|
|
- color: #888;
|
|
|
+/* 修复全屏显示问题 */
|
|
|
+.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>
|
