【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
引言
我们有个产品需要个很漂亮的落地页，网上找了一圈想买个好看的落地页都买不到，于是乎卓伊凡决定做一个非常漂亮的落地页，记录过程给大家。
开源仓库：
演示地址：
实战内容
小圈子增加一个关于我们，平台特色，创作者价值，变现方式，用户评价，常见问题，使用教程，隐私政策，服务条款请都分别建立页面，关于我们请完整的写一个关于小圈子APP的介绍， 另外底部联系方式
我们需要完善，这些页面，这些子页面 我们用pages 创建里面
src/pages
src\pages\TutorialsPage.vue
增加了8个文件
xml
<template>
<div class="tutorials-page">
<!-- 导航栏 -->
<header class="header">
<div class="container flex justify-between items-center py-4">
<div class="logo">
<img src="../assets/logo.png" alt="小圈子" class="h-10">
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-secondary hover:text-primary transition-fast">首页</a>
<a href="#tutorials" class="text-primary font-semibold">使用教程</a>
</nav>
<button class="btn btn-primary">立即下载</button>
</div>
</header>
<!-- 使用教程内容 -->
<section class="tutorials-content py-16">
<div class="container">
<h1 class="text-3xl md:text-4xl font-bold text-center mb-6">使用教程</h1>
<p class="text-center text-gray-600 max-w-2xl mx-auto mb-16">
详细了解小圈子的各项功能和使用方法，让您快速上手
</p>
<!-- 教程分类 -->
<div class="tutorial-categories flex flex-wrap justify-center gap-4 mb-12">
<button class="category-btn active px-6 py-2 rounded-full bg-orange text-white">全部教程</button>
<button class="category-btn px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">新手入门</button>
<button class="category-btn px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">内容创作</button>
<button class="category-btn px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">粉丝管理</button>
<button class="category-btn px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">变现技巧</button>
</div>
<!-- 教程列表 -->
<div class="tutorials-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 教程1 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/1/400/200" alt="注册与登录" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">5:30</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-orange bg-orange/10 px-2 py-1 rounded mb-3 inline-block">新手入门</div>
<h3 class="text-xl font-semibold mb-3">如何注册和登录小圈子账号</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
本教程将指导您完成小圈子账号的注册和登录过程，包括手机注册、第三方账号登录等方式。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2024-01-15</span>
<span class="text-gray-500 text-sm">阅读次数：2.3万</span>
</div>
</div>
</div>
<!-- 教程2 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/96/400/200" alt="成为创作者" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">8:45</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-blue bg-blue/10 px-2 py-1 rounded mb-3 inline-block">创作者指南</div>
<h3 class="text-xl font-semibold mb-3">如何申请成为创作者</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
详细介绍创作者认证的申请流程、所需材料和审核标准，帮助您快速成为小圈子认证创作者。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2024-01-10</span>
<span class="text-gray-500 text-sm">阅读次数：1.8万</span>
</div>
</div>
</div>
<!-- 教程3 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/26/400/200" alt="发布文章" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">12:10</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-green bg-green/10 px-2 py-1 rounded mb-3 inline-block">内容创作</div>
<h3 class="text-xl font-semibold mb-3">如何发布高质量文章</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
从标题设计、内容排版到图片选择，全方位教您如何创作和发布吸引人的优质文章内容。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2024-01-05</span>
<span class="text-gray-500 text-sm">阅读次数：3.5万</span>
</div>
</div>
</div>
<!-- 教程4 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/20/400/200" alt="会员设置" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">10:20</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-purple bg-purple/10 px-2 py-1 rounded mb-3 inline-block">变现技巧</div>
<h3 class="text-xl font-semibold mb-3">如何设置会员订阅</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
详解会员体系的设置方法，包括会员等级、订阅价格、专属权益等，帮助您建立稳定收入来源。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2023-12-28</span>
<span class="text-gray-500 text-sm">阅读次数：2.7万</span>
</div>
</div>
</div>
<!-- 教程5 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/36/400/200" alt="直播教程" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">15:40</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-pink bg-pink/10 px-2 py-1 rounded mb-3 inline-block">内容创作</div>
<h3 class="text-xl font-semibold mb-3">直播功能使用指南</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
从直播前准备到直播中互动，再到直播后复盘，全面讲解如何开展一场成功的直播活动。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2023-12-20</span>
<span class="text-gray-500 text-sm">阅读次数：4.2万</span>
</div>
</div>
</div>
<!-- 教程6 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/42/400/200" alt="数据分析" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">9:35</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-red bg-red/10 px-2 py-1 rounded mb-3 inline-block">运营技巧</div>
<h3 class="text-xl font-semibold mb-3">如何分析内容数据</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
教您如何查看和理解内容数据分析，通过数据优化创作方向，提高内容质量和粉丝互动。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2023-12-15</span>
<span class="text-gray-500 text-sm">阅读次数：1.9万</span>
</div>
</div>
</div>
<!-- 教程7 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/58/400/200" alt="粉丝互动" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">7:50</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-yellow bg-yellow/10 px-2 py-1 rounded mb-3 inline-block">粉丝管理</div>
<h3 class="text-xl font-semibold mb-3">有效提升粉丝互动率</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
分享提升粉丝互动的实用技巧，包括互动话题选择、回复策略、活动策划等，增强粉丝黏性。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2023-12-10</span>
<span class="text-gray-500 text-sm">阅读次数：2.6万</span>
</div>
</div>
</div>
<!-- 教程8 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/65/400/200" alt="数字商品" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">11:15</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-indigo bg-indigo/10 px-2 py-1 rounded mb-3 inline-block">变现技巧</div>
<h3 class="text-xl font-semibold mb-3">数字商品上架与销售</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
详细讲解如何创建、定价和销售数字商品，包括电子书、课程、模板等，实现被动收入。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2023-12-05</span>
<span class="text-gray-500 text-sm">阅读次数：2.1万</span>
</div>
</div>
</div>
<!-- 教程9 -->
<div class="tutorial-card bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="tutorial-thumbnail relative">
<img src="https://picsum.photos/id/76/400/200" alt="提现教程" class="w-full h-48 object-cover">
<div class="tutorial-duration absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm">6:45</div>
</div>
<div class="tutorial-content p-6">
<div class="tutorial-category text-xs font-semibold text-teal bg-teal/10 px-2 py-1 rounded mb-3 inline-block">新手入门</div>
<h3 class="text-xl font-semibold mb-3">收益提现操作指南</h3>
<p class="text-gray-600 mb-4 line-clamp-2">
一步步教您如何查看收益明细、绑定提现账户、申请提现，以及提现到账时间等相关信息。
</p>
<div class="tutorial-meta flex justify-between items-center">
<span class="text-gray-500 text-sm">发布时间：2023-11-30</span>
<span class="text-gray-500 text-sm">阅读次数：3.8万</span>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination flex justify-center mt-12">
<button class="pagination-btn px-4 py-2 rounded bg-gray-200 text-gray-600 mr-2">上一页</button>
<button class="pagination-btn px-4 py-2 rounded bg-orange text-white mr-2">1</button>
<button class="pagination-btn px-4 py-2 rounded bg-gray-200 text-gray-600 mr-2">2</button>
<button class="pagination-btn px-4 py-2 rounded bg-gray-200 text-gray-600 mr-2">3</button>
<button class="pagination-btn px-4 py-2 rounded bg-gray-200 text-gray-600">下一页</button>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer bg-dark py-12">
<!-- 页脚内容与AboutPage相同 -->
</footer>
</div>
</template>
<script setup lang="ts">
// 使用教程页面逻辑
</script>src\pages\TestimonialsPage.vue
xml
<template>
<div class="testimonials-page">
<!-- 导航栏 -->
<header class="header">
<div class="container flex justify-between items-center py-4">
<div class="logo">
<img src="../assets/logo.png" alt="小圈子" class="h-10">
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-secondary hover:text-primary transition-fast">首页</a>
<a href="#about" class="text-secondary hover:text-primary transition-fast">关于我们</a>
<a href="#testimonials" class="text-primary font-semibold">用户评价</a>
</nav>
<button class="btn btn-primary">立即下载</button>
</div>
</header>
<!-- 用户评价内容 -->
<section class="testimonials-content py-16">
<div class="container">
<h1 class="text-3xl md:text-4xl font-bold text-center mb-6">用户怎么说</h1>
<p class="text-center text-gray-600 max-w-2xl mx-auto mb-16">
听听我们的用户分享他们在小圈子的使用体验和收获
</p>
<!-- 评价过滤 -->
<div class="filter-tabs flex flex-wrap justify-center gap-4 mb-12">
<button class="filter-tab active px-6 py-2 rounded-full bg-orange text-white">全部</button>
<button class="filter-tab px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">创作者</button>
<button class="filter-tab px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">粉丝</button>
<button class="filter-tab px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">品牌方</button>
</div>
<!-- 评价列表 -->
<div class="testimonials-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 评价1 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<p class="text-gray-600 mb-6">
"作为一名插画师，小圈子给了我展示才华的舞台，也让我的作品得到了应有的价值。现在我已经有了稳定的粉丝群体，月收入比以前提高了3倍多！"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">林小美</h4>
<p class="text-gray-500 text-sm">插画师 · 创作者</p>
</div>
</div>
</div>
<!-- 评价2 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p class="text-gray-600 mb-6">
"在小圈子，我找到了很多志同道合的朋友，也学到了丰富的专业知识。会员订阅功能让我能够持续获取优质内容，非常值得！"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/29/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">张明</h4>
<p class="text-gray-500 text-sm">设计师 · 粉丝</p>
</div>
</div>
</div>
<!-- 评价3 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<p class="text-gray-600 mb-6">
"我们品牌通过小圈子平台找到了非常匹配的创作者进行合作，效果远超预期。平台的数据分析工具也帮助我们精准定位目标受众。"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/42/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">李经理</h4>
<p class="text-gray-500 text-sm">市场总监 · 品牌方</p>
</div>
</div>
</div>
<!-- 评价4 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p class="text-gray-600 mb-6">
"作为一名教育工作者，我在小圈子开设了自己的课程。平台的教学工具非常易用，学生反馈也很好，现在已经有超过2000名学员了。"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">王教授</h4>
<p class="text-gray-500 text-sm">教师 · 创作者</p>
</div>
</div>
</div>
<!-- 评价5 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p class="text-gray-600 mb-6">
"小圈子的直播功能让我能够实时与粉丝互动，分享我的创作过程。粉丝的打赏和反馈给了我很大的动力，让我更有信心继续创作。"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/22/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">刘艺</h4>
<p class="text-gray-500 text-sm">音乐人 · 创作者</p>
</div>
</div>
</div>
<!-- 评价6 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<p class="text-gray-600 mb-6">
"在小圈子，我找到了很多实用的学习资源，也认识了行业内的佼佼者。这里的社区氛围很好，大家互相帮助，共同进步。"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/33/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">陈学生</h4>
<p class="text-gray-500 text-sm">大学生 · 粉丝</p>
</div>
</div>
</div>
<!-- 评价7 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p class="text-gray-600 mb-6">
"我们公司通过小圈子平台进行了多次品牌推广活动，效果非常好。平台上的创作者都很专业，合作过程也很顺利。"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/54/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">赵总监</h4>
<p class="text-gray-500 text-sm">品牌负责人 · 品牌方</p>
</div>
</div>
</div>
<!-- 评价8 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<p class="text-gray-600 mb-6">
"小圈子的数字商品销售功能让我能够轻松出售我的设计模板，一次创作多次收益，大大提高了我的工作效率和收入。"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/76/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">黄设计师</h4>
<p class="text-gray-500 text-sm">UI设计师 · 创作者</p>
</div>
</div>
</div>
<!-- 评价9 -->
<div class="testimonial-card bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105">
<div class="rating text-yellow-400 mb-4">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>
</div>
<p class="text-gray-600 mb-6">
"作为一名粉丝，我很喜欢小圈子的会员体系，可以获得独家内容和与创作者的专属互动机会，让我感到物超所值。"
</p>
<div class="user-info flex items-center">
<img src="https://picsum.photos/id/88/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">吴粉丝</h4>
<p class="text-gray-500 text-sm">摄影爱好者 · 粉丝</p>
</div>
</div>
</div>
</div>
<!-- 统计数据 -->
<div class="stats-section bg-gradient-to-r from-orange to-pink py-12 rounded-lg mt-16 text-white">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="stat-item">
<div class="stat-number text-3xl md:text-4xl font-bold mb-2">50万+</div>
<p class="text-white/90">注册用户</p>
</div>
<div class="stat-item">
<div class="stat-number text-3xl md:text-4xl font-bold mb-2">10万+</div>
<p class="text-white/90">创作者</p>
</div>
<div class="stat-item">
<div class="stat-number text-3xl md:text-4xl font-bold mb-2">98%</div>
<p class="text-white/90">用户满意度</p>
</div>
<div class="stat-item">
<div class="stat-number text-3xl md:text-4xl font-bold mb-2">200万+</div>
<p class="text-white/90">创作内容</p>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer bg-dark py-12">
<!-- 页脚内容与AboutPage相同 -->
</footer>
</div>
</template>
<script setup lang="ts">
// 用户评价页面逻辑
</script>src\pages\TermsPage.vue
xml
<template>
<div class="terms-page">
<!-- 导航栏 -->
<header class="header">
<div class="container flex justify-between items-center py-4">
<div class="logo">
<img src="../assets/logo.png" alt="小圈子" class="h-10">
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-secondary hover:text-primary transition-fast">首页</a>
<a href="#terms" class="text-primary font-semibold">服务条款</a>
</nav>
<button class="btn btn-primary">立即下载</button>
</div>
</header>
<!-- 服务条款内容 -->
<section class="terms-content py-12">
<div class="container max-w-4xl mx-auto">
<h1 class="text-3xl font-bold mb-8">服务条款</h1>
<p class="text-gray-600 mb-6">
欢迎使用小圈子服务！以下是小圈子服务的使用条款和条件，请您仔细阅读。
</p>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">1. 条款接受</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
通过访问或使用小圈子服务，您同意受本服务条款的约束。如果您不同意本条款，您不得访问或使用我们的服务。
</p>
<p>
我们保留随时修改本条款的权利。当我们对条款进行重大变更时，我们会通知您，并且您继续使用服务将视为接受新的条款。
</p>
</div>
</div>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">2. 服务描述</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
小圈子是一个内容创作与分享平台，致力于为创作者提供展示才华、分享知识、获取收益的机会，同时为用户提供优质的内容消费体验。
</p>
<p>
我们的服务包括但不限于：
</p>
<ul class="list-disc pl-6 space-y-2">
<li>账号注册与管理</li>
<li>内容发布与传播（文章、图片、视频、音频等）</li>
<li>社交互动功能（评论、点赞、关注等）</li>
<li>付费内容与会员订阅</li>
<li>数字商品销售</li>
<li>直播服务</li>
<li>收益结算与提现</li>
</ul>
<p>
我们保留随时修改、暂停或终止服务的权利，恕不另行通知。
</p>
</div>
</div>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">3. 用户注册与账号安全</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
<strong>3.1 注册条件</strong><br>
您必须年满18周岁才能注册和使用小圈子服务。如果您未满18周岁，必须获得父母或法定监护人的同意才能使用我们的服务。
</p>
<p>
<strong>3.2 账号信息</strong><br>
您注册时必须提供真实、准确、完整的信息，并在信息变更时及时更新。您应对账号下的所有活动负责。
</p>
<p>
<strong>3.3 账号安全</strong><br>
您应妥善保管账号和密码，不得与他人共享。如发现账号被非法使用，应立即通知我们。我们不对因您未能保管好账号和密码而导致的损失负责。
</p>
<p>
<strong>3.4 账号注销</strong><br>
您可以随时申请注销账号。账号注销后，相关信息将按照我们的隐私政策进行处理。
</p>
</div>
</div>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">4. 内容规则</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
<strong>4.1 内容所有权</strong><br>
您对您在小圈子发布的原创内容保留所有权，但您授予小圈子全球性的、非排他性的、免版税的许可，允许我们使用、复制、修改、分发、展示您的内容。
</p>
<p>
<strong>4.2 内容规范</strong><br>
您在小圈子发布的内容必须符合法律法规和公序良俗，不得包含以下内容：
</p>
<ul class="list-disc pl-6 space-y-2">
<li>违反法律法规的内容</li>
<li>色情、暴力、血腥的内容</li>
<li>歧视、侮辱、诽谤他人的内容</li>
<li>侵犯他人知识产权的内容</li>
<li>虚假、误导性信息</li>
<li>垃圾信息、广告信息</li>
<li>其他违反小圈子社区规范的内容</li>
</ul>
<p>
<strong>4.3 内容审核</strong><br>
我们有权对您发布的内容进行审核，并在发现违规内容时采取删除、屏蔽、暂停账号等措施，而无需事先通知您。
</p>
</div>
</div>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">5. 付费服务</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
<strong>5.1 服务费用</strong><br>
小圈子提供的部分服务可能需要支付费用。所有费用以人民币计价，您应按照我们公布的价格支付相关费用。
</p>
<p>
<strong>5.2 付费内容</strong><br>
付费内容购买后通常不予退款，除非符合我们的退款政策。付费内容仅限于个人使用，不得分享、复制或用于商业目的。
</p>
<p>
<strong>5.3 会员订阅</strong><br>
会员订阅服务采用自动续费模式，除非您主动取消。取消后，您仍可使用会员权益直至当前订阅周期结束。
</p>
<p>
<strong>5.4 创作者收益</strong><br>
创作者通过小圈子平台获得的收益，我们将按照约定的比例扣除平台服务费后支付给创作者。具体比例以平台公告为准。
</p>
</div>
</div>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">6. 使用限制</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
您不得：
</p>
<ul class="list-disc pl-6 space-y-2">
<li>未经授权访问或使用我们的服务器、系统或数据</li>
<li>使用自动化工具（如爬虫）大量获取数据</li>
<li>干扰或破坏服务的正常运行</li>
<li>尝试规避我们的安全措施</li>
<li>转售我们的服务</li>
<li>从事任何可能损害小圈子声誉或用户体验的活动</li>
</ul>
</div>
</div>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">7. 知识产权</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
小圈子的所有内容、功能和材料，包括但不限于文字、图像、音频、视频、软件、代码、标志等，均受著作权、商标权和其他知识产权法律的保护。
</p>
<p>
未经我们明确书面许可，您不得复制、修改、分发、出售或出租我们的任何内容或服务。
</p>
</div>
</div>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">8. 免责声明</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
<strong>8.1 服务可用性</strong><br>
我们尽力保证服务的连续性和可靠性，但不对服务的中断、延迟或错误承担责任。
</p>
<p>
<strong>8.2 内容责任</strong><br>
用户在小圈子发布的内容由用户自行负责，我们不对内容的真实性、准确性或合法性负责。
</p>
<p>
<strong>8.3 第三方链接</strong><br>
服务中可能包含指向第三方网站或服务的链接，我们不对这些第三方内容或服务负责。
</p>
<p>
<strong>8.4 有限责任</strong><br>
在法律允许的最大范围内，小圈子及其员工、董事、供应商等不对任何间接、附带、特殊或后果性损害承担责任。
</p>
</div>
</div>
<div class="terms-section mb-10">
<h2 class="text-xl font-semibold mb-4">9. 终止</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
我们有权在以下情况下终止或暂停您对服务的访问：
</p>
<ul class="list-disc pl-6 space-y-2">
<li>您违反本服务条款</li>
<li>您的账号被用于非法或未经授权的目的</li>
<li>法律要求我们这样做</li>
<li>我们认为这样做是必要的保护措施</li>
</ul>
<p>
服务终止后，您将失去访问账号和服务的权利。
</p>
</div>
</div>
<div class="terms-section">
<h2 class="text-xl font-semibold mb-4">10. 适用法律和争议解决</h2>
<div class="terms-content text-gray-600 space-y-4">
<p>
本服务条款受中华人民共和国法律管辖。您与小圈子之间的任何争议应首先通过友好协商解决；协商不成的，应提交至小圈子所在地有管辖权的人民法院诉讼解决。
</p>
<p>
如果您对本服务条款有任何疑问，请通过以下方式联系我们：
</p>
<p>
<strong>邮箱：</strong>422108995@qq.com<br>
<strong>公司：</strong>成都欣闪闪科技有限公司<br>
<strong>技术支持：</strong>优雅草科技
</p>
</div>
</div>
<div class="last-updated mt-10 text-gray-500 text-sm">
最后更新日期：2024年3月1日
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer bg-dark py-12">
<!-- 页脚内容与AboutPage相同 -->
</footer>
</div>
</template>
<script setup lang="ts">
// 服务条款页面逻辑
</script>其余文件就不一一列举，可以看gitee
对首页底部的链接 分别做跳转
xml
<!-- 页脚 -->
<footer class="footer bg-gray-900 text-white py-12">
<div class="container">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-xl font-bold text-orange mb-4">小圈子</h3>
<p class="text-gray-400">创作者专属平台，让创作更有价值</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">平台功能</h4>
<ul class="space-y-2">
<li><a href="/features" class="text-gray-400 hover:text-white transition-fast">平台特色</a></li>
<li><a href="/creators" class="text-gray-400 hover:text-white transition-fast">创作者价值</a></li>
<li><a href="/monetization" class="text-gray-400 hover:text-white transition-fast">变现方式</a></li>
<li><a href="/testimonials" class="text-gray-400 hover:text-white transition-fast">用户评价</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">帮助中心</h4>
<ul class="space-y-2">
<li><a href="/faq" class="text-gray-400 hover:text-white transition-fast">常见问题</a></li>
<li><a href="/tutorials" class="text-gray-400 hover:text-white transition-fast">使用教程</a></li>
<li><a href="/privacy" class="text-gray-400 hover:text-white transition-fast">隐私政策</a></li>
<li><a href="/terms" class="text-gray-400 hover:text-white transition-fast">服务条款</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">关于我们</h4>
<ul class="space-y-2">
<li><a href="/about" class="text-gray-400 hover:text-white transition-fast">关于小圈子</a></li>
<li><span class="text-gray-400">成都欣闪闪科技有限公司</span></li>
<li><span class="text-gray-400">技术支持：优雅草科技</span></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">联系我们</h4>
<ul class="space-y-2">
<li class="flex items-center text-gray-400">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
422108995@qq.com
</li>
<li class="flex items-center text-gray-400">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
中国（四川）自由贸易试验区成都市双流区西南航空港经济开发区工业集中区西航港大道中四段2号（大学生创业园）
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 text-center text-gray-500">
<p>© {{ new Date().getFullYear() }} 成都欣闪闪科技有限公司 小圈子 版权所有-技术支持：优雅草科技</p>
</div>
</div>
</footer>页脚的代码我们需要做好跳转，
可以正常跳转，不过内容我们改造下
比如关于我们等等，其次 我们需要在routes里面 也就是路由做好改动
main.ts文件中没有配置路由，这就是为什么点击链接后页面不会切换的原因。我需要检查是否安装了vue-router并配置路由。
修改routes
javascript
import { createRouter, createWebHistory } from 'vue-router'
import AboutPage from './pages/AboutPage.vue'
import FeaturesPage from './pages/FeaturesPage.vue'
import CreatorsPage from './pages/CreatorsPage.vue'
import MonetizationPage from './pages/MonetizationPage.vue'
import TestimonialsPage from './pages/TestimonialsPage.vue'
import FaqPage from './pages/FaqPage.vue'
import TutorialsPage from './pages/TutorialsPage.vue'
import PrivacyPolicyPage from './pages/PrivacyPolicyPage.vue'
import TermsPage from './pages/TermsPage.vue'
import App from './App.vue'
const routes = [
{
path: '/',
name: 'Home',
component: App
},
{
path: '/about',
name: 'About',
component: AboutPage
},
{
path: '/features',
name: 'Features',
component: FeaturesPage
},
{
path: '/creators',
name: 'Creators',
component: CreatorsPage
},
{
path: '/monetization',
name: 'Monetization',
component: MonetizationPage
},
{
path: '/testimonials',
name: 'Testimonials',
component: TestimonialsPage
},
{
path: '/faq',
name: 'FAQ',
component: FaqPage
},
{
path: '/tutorials',
name: 'Tutorials',
component: TutorialsPage
},
{
path: '/privacy',
name: 'PrivacyPolicy',
component: PrivacyPolicyPage
},
{
path: '/terms',
name: 'Terms',
component: TermsPage
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default routermain.ts 加入路由
javascript
import { createApp } from 'vue'
import './assets/css/main.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')现在跳转页正常了
现在我们把跳转页面 比如关于我们 调整下，因为应该把信息弄上去主要展示
不过我们本篇任务就已经完成了，接下来我们继续开发更多内容。