Compare commits

..

No commits in common. "cd17d477ab2f04ec23f0a0e130c8427627dfe8d2" and "ac354c4e5d715b2e859837a114d1b61a62125525" have entirely different histories.

2 changed files with 7 additions and 169 deletions

View File

@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Login from '@/views/auth/Login.vue'
import Register from '@/views/auth/Register.vue'
import Notfound from '@/views/Notfound.vue'
Vue.use(VueRouter)
const routes = [
@ -80,11 +80,6 @@ const routes = [
}
},
]
},
{
path: '*',
name: 'NotFound',
component: Notfound
}
]

View File

@ -1,170 +1,13 @@
<template>
<div class="home-page">
<!-- 顶部导航栏 -->
<header class="navbar">
<div class="logo">API计费系统</div>
<nav class="nav-buttons">
<button @click="goToLogin">登录</button>
<button @click="goToRegister">注册</button>
</nav>
</header>
<!-- 主内容区 -->
<section class="hero">
<h1>轻松管理您的 API 使用和费用</h1>
<p>我们的系统让您以简单透明的方式追踪每一笔调用</p>
</section>
<!-- 套餐介绍 -->
<section class="plans">
<h2>套餐介绍</h2>
<div class="plan-list">
<div class="plan">
<h3>基础版</h3>
<p>适合初学者</p>
<ul>
<li>1000 /</li>
<li>限速10 /分钟</li>
<li>免费</li>
</ul>
</div>
<div class="plan">
<h3>专业版</h3>
<p>适合中小企业</p>
<ul>
<li>10 万次/</li>
<li>限速100 /分钟</li>
<li>¥49/</li>
</ul>
</div>
<div class="plan">
<h3>企业版</h3>
<p>无限使用</p>
<ul>
<li>不限调用</li>
<li>专属支持</li>
<li>¥199/</li>
</ul>
</div>
</div>
</section>
<!-- 关于我们 -->
<section class="about">
<h2>关于我们</h2>
<p>
我们是一支专注于API管理与计费的技术团队致力于提供高性能低成本的解决方案帮助开发者专注于业务本身
</p>
</section>
<!-- 页脚 -->
<footer class="footer">
<p>© 2025 API计费系统. 保留所有权利</p>
</footer>
<div class="home">
<h1>Home</h1>
<p>Home page content</p>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: "HomeView",
methods: {
goToLogin() {
this.$router.push("/auth/login");
},
goToRegister() {
this.$router.push("/auth/register");
}
}
};
name: 'HomeView'
}
</script>
<style scoped>
.home-page {
font-family: "Helvetica Neue", sans-serif;
color: #333;
line-height: 1.6;
}
.navbar {
display: flex;
justify-content: space-between;
padding: 20px 40px;
background: #2c3e50;
color: #fff;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.nav-buttons button {
margin-left: 10px;
padding: 8px 16px;
background: #3498db;
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
.nav-buttons button:hover {
background: #2980b9;
}
.hero {
text-align: center;
padding: 80px 20px;
background: #f4f6f8;
}
.hero h1 {
font-size: 36px;
margin-bottom: 20px;
}
.plans {
padding: 60px 20px;
background: #fff;
text-align: center;
}
.plan-list {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 30px;
}
.plan {
background: #ecf0f1;
padding: 20px;
border-radius: 12px;
width: 250px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.plan h3 {
margin-bottom: 10px;
}
.plan ul {
list-style: none;
padding: 0;
text-align: left;
}
.about {
padding: 60px 20px;
background: #f9f9f9;
text-align: center;
}
.footer {
text-align: center;
padding: 20px;
background: #2c3e50;
color: white;
}
</style>