340 lines
9.1 KiB
Vue
340 lines
9.1 KiB
Vue
<template>
|
||
<div class="home-page">
|
||
<header class="navbar">
|
||
<div class="container nav-inner">
|
||
<div class="logo">API计费系统</div>
|
||
<nav class="nav-buttons">
|
||
<button class="btn btn-outline" @click="goToLogin">登录</button>
|
||
<button class="btn btn-primary" @click="goToRegister">注册</button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<div class="container hero-inner">
|
||
<div class="hero-text">
|
||
<h1>用更少的成本，掌控更多的调用</h1>
|
||
<p class="lead">实时计费与可视化报表，清晰明了的 API 使用与费用管理，帮助你把注意力放回业务。</p>
|
||
|
||
<div class="cta-row">
|
||
<button class="btn btn-primary large" @click="goToRegister">立即开始 — 免费试用</button>
|
||
<button class="btn btn-ghost" @click="goToLogin">查看演示</button>
|
||
</div>
|
||
|
||
<ul class="kpis" aria-hidden="true">
|
||
<li><strong>100k+</strong><span>次/天 监控</span></li>
|
||
<li><strong>99.99%</strong><span>可用性 SLA</span></li>
|
||
<li><strong>企业级</strong><span>安全与权限</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="hero-visual" aria-hidden="true">
|
||
<!-- 简洁、安全、不透明的占位插画 -->
|
||
<svg viewBox="0 0 480 320" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
|
||
<rect x="0" y="0" width="480" height="320" rx="12" fill="#ffffff"/>
|
||
<g transform="translate(24,24)" fill="none" stroke="#e6f0ff" stroke-width="10" stroke-linecap="round">
|
||
<path d="M0 64h200" opacity="0.95"/>
|
||
<path d="M0 120h160" opacity="0.75"/>
|
||
<path d="M0 176h220" opacity="0.6"/>
|
||
</g>
|
||
<circle cx="380" cy="80" r="44" fill="#eef9ff"/>
|
||
<circle cx="340" cy="220" r="72" fill="#f7f0ff"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="plans">
|
||
<div class="container">
|
||
<h2>套餐介绍</h2>
|
||
<div class="plan-list">
|
||
<article class="plan">
|
||
<div class="plan-head">
|
||
<h3>基础版</h3>
|
||
<span class="tag">入门</span>
|
||
</div>
|
||
<p class="desc">适合个人开发者</p>
|
||
<ul class="features">
|
||
<li>1000 次/月</li>
|
||
<li>限速：10 次/分钟</li>
|
||
</ul>
|
||
<div class="price">免费</div>
|
||
<button class="btn btn-outline">开始使用</button>
|
||
</article>
|
||
|
||
<article class="plan featured">
|
||
<div class="plan-head">
|
||
<h3>专业版</h3>
|
||
<span class="tag pro">推荐</span>
|
||
</div>
|
||
<p class="desc">适合成长型团队</p>
|
||
<ul class="features">
|
||
<li>10 万次/月</li>
|
||
<li>限速：100 次/分钟</li>
|
||
<li>报表与告警</li>
|
||
</ul>
|
||
<div class="price">¥49 / 月</div>
|
||
<button class="btn btn-primary">选择专业版</button>
|
||
</article>
|
||
|
||
<article class="plan">
|
||
<div class="plan-head">
|
||
<h3>企业版</h3>
|
||
<span class="tag">商务</span>
|
||
</div>
|
||
<p class="desc">为大型团队与 SLA 定制</p>
|
||
<ul class="features">
|
||
<li>不限调用</li>
|
||
<li>专属支持 & SLA</li>
|
||
</ul>
|
||
<div class="price">¥199 / 月</div>
|
||
<button class="btn btn-outline">联系我们</button>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="about">
|
||
<div class="container">
|
||
<h2>关于我们</h2>
|
||
<p>我们是一支专注于 API 管理与计费的技术团队，提供高性能、低成本且可扩展的方案，帮助开发者聚焦产品价值。</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container foot-inner">
|
||
<div>© 2025 API计费系统</div>
|
||
<div class="foot-links">
|
||
<a href="#" @click.prevent>隐私</a>
|
||
<a href="#" @click.prevent>服务条款</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "HomeView",
|
||
methods: {
|
||
goToLogin() { this.$router.push("/auth/login"); },
|
||
goToRegister() { this.$router.push("/auth/register"); }
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 明确变量（局部使用） */
|
||
.home-page {
|
||
--bg: #f4f7fb;
|
||
--card: #ffffff;
|
||
--text: #0f1720;
|
||
--muted: #6b7280;
|
||
--primary: #0b75ff;
|
||
--primary-dark: #0857c6;
|
||
--shadow: rgba(15,23,32,0.06);
|
||
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: Inter, "Helvetica Neue", Arial, sans-serif;
|
||
min-height: 100vh;
|
||
-webkit-font-smoothing:antialiased;
|
||
-moz-osx-font-smoothing:grayscale;
|
||
}
|
||
|
||
/* container */
|
||
.container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* navbar */
|
||
.navbar {
|
||
position: relative;
|
||
z-index: 5;
|
||
border-bottom: 1px solid rgba(15,23,32,0.04);
|
||
background: transparent;
|
||
}
|
||
|
||
.nav-inner {
|
||
display:flex;
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.logo {
|
||
font-weight:700;
|
||
font-size:18px;
|
||
color:var(--text);
|
||
}
|
||
|
||
/* buttons */
|
||
.nav-buttons { display:flex; gap:12px; align-items:center; }
|
||
|
||
.btn {
|
||
padding: 8px 14px;
|
||
border-radius: 10px;
|
||
font-weight:600;
|
||
cursor:pointer;
|
||
border:none;
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:8px;
|
||
transition: transform .12s ease, box-shadow .12s ease;
|
||
color:var(--text);
|
||
background:transparent;
|
||
}
|
||
|
||
.btn:active { transform: translateY(1px); }
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(90deg,var(--primary),var(--primary-dark));
|
||
color:#fff;
|
||
box-shadow: 0 8px 20px rgba(11,117,255,0.12);
|
||
}
|
||
|
||
.btn-outline {
|
||
background: var(--card);
|
||
border: 1px solid rgba(15,23,32,0.06);
|
||
box-shadow: 0 8px 16px var(--shadow);
|
||
}
|
||
|
||
.btn-ghost {
|
||
background: transparent;
|
||
color: var(--primary-dark);
|
||
border: 1px dashed rgba(11,117,255,0.12);
|
||
}
|
||
|
||
/* hero */
|
||
.hero {
|
||
padding: 56px 0 40px;
|
||
}
|
||
|
||
.hero-inner {
|
||
display:flex;
|
||
gap:28px;
|
||
align-items:center;
|
||
}
|
||
|
||
.hero-text {
|
||
flex:1;
|
||
max-width:640px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size:34px;
|
||
margin:0 0 10px;
|
||
line-height:1.05;
|
||
color:var(--text);
|
||
/* 不使用大面积模糊阴影 */
|
||
text-shadow: none;
|
||
}
|
||
|
||
.lead { color:var(--muted); margin:0 0 18px; font-size:16px; }
|
||
|
||
.cta-row { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
|
||
|
||
.btn.large { padding:12px 20px; border-radius:12px; font-size:15px; }
|
||
|
||
/* KPI row */
|
||
.kpis { display:flex; gap:18px; margin-top:12px; list-style:none; padding:0; color:var(--muted); font-size:13px; }
|
||
.kpis li strong { display:block; color:var(--text); font-size:15px; }
|
||
|
||
/* hero-visual */
|
||
.hero-visual {
|
||
width:440px;
|
||
height:260px;
|
||
border-radius:12px;
|
||
background: var(--card);
|
||
box-shadow: 0 18px 40px rgba(15,23,32,0.06);
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
border:1px solid rgba(15,23,32,0.04);
|
||
}
|
||
|
||
/* plans */
|
||
.plans { padding:44px 0; }
|
||
|
||
.plans h2 {
|
||
text-align:center;
|
||
font-size:22px;
|
||
margin-bottom:24px;
|
||
color:var(--text);
|
||
}
|
||
|
||
.plan-list {
|
||
display:flex;
|
||
gap:18px;
|
||
justify-content:center;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
.plan {
|
||
width:300px;
|
||
background:var(--card);
|
||
border-radius:12px;
|
||
padding:18px;
|
||
box-shadow: 0 10px 30px var(--shadow);
|
||
border:1px solid rgba(15,23,32,0.03);
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:10px;
|
||
transition: transform .18s ease, box-shadow .18s ease;
|
||
}
|
||
|
||
.plan:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 20px 48px rgba(15,23,32,0.08);
|
||
}
|
||
|
||
.plan-head { display:flex; justify-content:space-between; align-items:center; }
|
||
|
||
.plan h3 { margin:0; font-size:18px; color:var(--text); }
|
||
|
||
.tag {
|
||
font-size:12px;
|
||
color:var(--muted);
|
||
background:#f7fafc;
|
||
padding:6px 8px;
|
||
border-radius:8px;
|
||
border:1px solid rgba(15,23,32,0.03);
|
||
}
|
||
|
||
.tag.pro {
|
||
background: linear-gradient(90deg, rgba(11,117,255,0.12), rgba(126,231,255,0.06));
|
||
color:var(--primary-dark);
|
||
font-weight:700;
|
||
}
|
||
|
||
.desc { color:var(--muted); margin:0; font-size:14px; }
|
||
.features { list-style:none; padding:0; margin:8px 0; color:var(--muted); font-size:14px; }
|
||
.price { font-weight:800; font-size:18px; color:var(--text); margin-top:auto; }
|
||
|
||
/* about & footer */
|
||
.about { padding:36px 0; text-align:center; color:var(--muted); }
|
||
.footer { padding:18px 0; border-top:1px solid rgba(15,23,32,0.04); color:var(--muted); }
|
||
|
||
.foot-inner { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:1100px; margin:0 auto; }
|
||
|
||
/* small screens */
|
||
@media (max-width:1000px) {
|
||
.hero-inner { flex-direction:column-reverse; align-items:flex-start; gap:18px; }
|
||
.hero-visual { width:100%; height:180px; border-radius:10px; }
|
||
.plan-list { gap:14px; }
|
||
}
|
||
|
||
@media (max-width:520px) {
|
||
.container { padding:0 14px; }
|
||
.hero h1 { font-size:22px; }
|
||
.cta-row { flex-direction:column; align-items:stretch; }
|
||
.btn.large { width:100%; }
|
||
.plan { width:100%; }
|
||
.foot-inner { flex-direction:column; text-align:center; gap:10px; }
|
||
}
|
||
</style>
|