【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
引言
我们有个产品需要个很漂亮的落地页，网上找了一圈想买个好看的落地页都买不到，于是乎卓伊凡决定做一个非常漂亮的落地页，记录过程给大家。
开源仓库：
https://gitee.com/youyacao/xiaoquanzi-down
实战内容
第一步肯定是建立仓库
clone 下来后开始建立首页，这是一个 基于优雅草 私鱼创作系统的一款 知识付费创作系统
<title>小圈子 - 创作者专属平台 | 内容创作变现、粉丝互动、原创支持</title> <meta name="keywords" content="小圈子,创作者平台,内容变现,原创支持,粉丝互动,小众内容,创作者经济,课程销售,数字作品" /> <meta name="description" content="小圈子是创作者和粉丝的专属平台，鼓励创作者建立沉浸创作环境，支持通过出售课程、小众文章、绘画、创意作品、软件、电子书、音乐、游戏创作及心理咨询等服务获得收入，打造稳定交流、鼓励原创、实现创收的平台。" />
标题关键词我们先做好，这样我们开始建立vue，我们需要以橙色风格来做这件事。
首先中断运行
npm create vite@latest . — —template vue
建立vue模板，
提示文档里面有内容，但是没有其实，所以我们选择
Remove existing files and continue
选择 框架 选择 vue
◆ Use rolldown-vite (Experimental)?:
│ ○ Yes
│ ● No
这个提示是 Vue.js 项目创建工具 在询问你是否要使用一个名为 rolldown-vite 的实验性打包工具。
详细解释：
什么是 rolldown-vite？
- rolldown 是一个用 Rust 编写的新一代 JavaScript 打包工具
- 由 Vue 和 Vite 团队 开发，旨在成为未来 Webpack 和 Rollup 的替代品
- 目前处于 实验阶段 (Experimental)
- 基于 Vite 构建，性能比传统工具更快
选项含义：
- ○ Yes - 选择使用 rolldown-vite（实验性版本）
- ● No - 选择不使用，继续使用稳定的 Vite 默认配置
建议选择：
对于大多数用户，推荐选择：
● No （不使用）
为什么选择 No？
- 稳定性：rolldown 还在实验阶段，可能存在未知问题
- 生产环境：不建议在生产项目中使用实验性工具
- 兼容性：某些插件可能还不完全支持
什么时候可以选择 Yes？
- 你想体验最新技术
- 用于测试或学习项目
- 愿意承担可能遇到问题的风险
创建命令示例：
# 使用稳定版本（推荐） npm create vue@latest # 然后选择 "No" for rolldown-vite # 或者直接跳过选择 npm create vue@latest -- --yes
选择 No 会让你继续使用经过充分测试的 Vite + Rollup 组合，这是目前最稳定可靠的选择。
这里提示 我们选择yes
因为我们 不怕使用新技术，毕竟这个只是个落地页，在2025年需要使用新技术
一顿输出完了以后初始框架建立好了
执行npm install 安装依赖，再执行 npm install vue-router@4 axios 安装
然后开始 写代码，首页代码初步开发如下：
index.html代码如下
<!-- * @Author: 卓伊凡 * @LastEditors: 卓伊凡 * @email: 422108995@qq.com * @github: https://github.com/youyacao * @gitee: https://gitee.com/youyacao/ * @Date: 2025-10-13 21:39:06 * @LastEditTime: 2025-10-13 22:09:24 * @motto: Still water runs deep * @Description: 优雅草科技卓伊凡-优雅草科技主程-兼技术总监-优雅草科技欢迎合作共赢，优雅草科技官网www.youyacao.com，感谢合作与支持，请仔细阅读优雅草科技的开源lisence文件，您可以百分百100%使用优雅草的开源产品，但是需要遵守相关规则，并且需要申明是使用了优雅草科技的产品 * @FilePath: \xiaoquanzi-down\index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>小圈子 - 创作者专属平台 | 内容创作变现、粉丝互动、原创支持</title> <meta name="keywords" content="小圈子,创作者平台,内容变现,原创支持,粉丝互动,小众内容,创作者经济,课程销售,数字作品" /> <meta name="description" content="小圈子是创作者和粉丝的专属平台，鼓励创作者建立沉浸创作环境，支持通过出售课程、小众文章、绘画、创意作品、软件、电子书、音乐、游戏创作及心理咨询等服务获得收入，打造稳定交流、鼓励原创、实现创收的平台。" /> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html>
vue 代码如下， app.vue
<template> <div id="app"> <!-- 导航栏 --> <header class="header"> <div class="container flex justify-between items-center py-4"> <div class="logo"> <h1 class="text-orange font-size-2xl font-bold">小圈子</h1> </div> <nav class="hidden md:flex space-x-8"> <a href="#features" class="text-secondary hover:text-primary transition-fast">平台特色</a> <a href="#creators" class="text-secondary hover:text-primary transition-fast">创作者价值</a> <a href="#monetization" class="text-secondary hover:text-primary transition-fast">变现方式</a> <a href="#testimonials" class="text-secondary hover:text-primary transition-fast">用户评价</a> <a href="#faq" class="text-secondary hover:text-primary transition-fast">常见问题</a> </nav> <button class="btn btn-primary">立即下载</button> </div> </header> <!-- 英雄区域 --> <section class="hero bg-orange-light py-16 md:py-24"> <div class="container flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-8 md:mb-0"> <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-4"> 创作者的专属平台 <span class="text-orange">内容变现</span>从未如此简单 </h1> <p class="text-lg text-secondary mb-8 max-w-lg"> 小圈子帮助创作者建立沉浸创作环境，通过出售课程、文章、创意作品等方式获得稳定收入，打造专属粉丝社区。 </p> <div class="flex flex-col sm:flex-row gap-4"> <button class="btn btn-primary btn-large animate-pulse"> <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> </svg> 立即下载 </button> <button class="btn btn-secondary btn-large"> <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> 观看演示 </button> </div> <div class="mt-6 flex items-center"> <div class="flex -space-x-2"> <img src="https://picsum.photos/id/1/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white"> <img src="https://picsum.photos/id/2/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white"> <img src="https://picsum.photos/id/3/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white"> <div class="w-8 h-8 rounded-full border-2 border-white bg-primary-light flex items-center justify-center text-white text-xs font-bold"> 5k+ </div> </div> <p class="ml-3 text-sm text-secondary">已有超过5000名创作者加入</p> </div> </div> <div class="md:w-1/2 flex justify-center"> <img src="https://picsum.photos/id/26/600/400" alt="小圈子APP展示" class="rounded-xl shadow-lg transform rotate-1 hover:rotate-0 transition-base max-w-full h-auto" > </div> </div> </section> <!-- 平台特色 --> <section id="features" class="features py-16"> <div class="container"> <div class="text-center mb-12"> <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">平台特色</h2> <p class="text-secondary max-w-2xl mx-auto">小圈子提供全方位的创作者支持，帮助你实现创意变现和粉丝沉淀</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="card flex flex-col items-center text-center p-6"> <div class="w-16 h-16 rounded-full bg-orange-light flex items-center justify-center mb-4"> <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path> </svg> </div> <h3 class="text-xl font-semibold mb-2">专属创作空间</h3> <p class="text-secondary">为创作者提供无干扰的创作环境，专注于内容生产和粉丝互动</p> </div> <div class="card flex flex-col items-center text-center p-6"> <div class="w-16 h-16 rounded-full bg-orange-light flex items-center justify-center mb-4"> <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path> </svg> </div> <h3 class="text-xl font-semibold mb-2">多元变现方式</h3> <p class="text-secondary">支持课程销售、会员订阅、数字作品、咨询服务等多种收入模式</p> </div> <div class="card flex flex-col items-center text-center p-6"> <div class="w-16 h-16 rounded-full bg-orange-light flex items-center justify-center mb-4"> <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path> </svg> </div> <h3 class="text-xl font-semibold mb-2">粉丝社区互动</h3> <p class="text-secondary">建立高质量粉丝社区，增强粉丝黏性，促进深度互动和内容传播</p> </div> <div class="card flex flex-col items-center text-center p-6"> <div class="w-16 h-16 rounded-full bg-orange-light flex items-center justify-center mb-4"> <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path> </svg> </div> <h3 class="text-xl font-semibold mb-2">数据分析支持</h3> <p class="text-secondary">提供详细的内容表现和粉丝行为数据分析，助力优化创作策略</p> </div> <div class="card flex flex-col items-center text-center p-6"> <div class="w-16 h-16 rounded-full bg-orange-light flex items-center justify-center mb-4"> <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path> </svg> </div> <h3 class="text-xl font-semibold mb-2">版权保护</h3> <p class="text-secondary">严格的内容版权保护机制，保障创作者的知识产权和收益权益</p> </div> <div class="card flex flex-col items-center text-center p-6"> <div class="w-16 h-16 rounded-full bg-orange-light flex items-center justify-center mb-4"> <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path> </svg> </div> <h3 class="text-xl font-semibold mb-2">创作者成长</h3> <p class="text-secondary">提供创作技能培训、行业资讯和经验分享，助力创作者持续成长</p> </div> </div> </div> </section> <!-- 创作者价值 --> <section id="creators" class="creators bg-orange-light py-16"> <div class="container"> <div class="flex flex-col md:flex-row items-center gap-12"> <div class="md:w-1/2"> <img src="https://picsum.photos/id/180/600/600" alt="创作者价值" class="rounded-xl shadow-lg max-w-full h-auto" > </div> <div class="md:w-1/2"> <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6">为创作者打造理想创作环境</h2> <div class="space-y-6"> <div class="flex gap-4"> <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center flex-shrink-0"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <div> <h3 class="text-xl font-semibold mb-1">专注创作，告别干扰</h3> <p class="text-secondary">简洁直观的界面设计，让你专注于内容创作本身，提高创作效率</p> </div> </div> <div class="flex gap-4"> <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center flex-shrink-0"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <div> <h3 class="text-xl font-semibold mb-1">直接触达粉丝</h3> <p class="text-secondary">无需平台算法推荐，直接与粉丝建立连接，形成稳定的创作生态</p> </div> </div> <div class="flex gap-4"> <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center flex-shrink-0"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <div> <h3 class="text-xl font-semibold mb-1">灵活的收入模式</h3> <p class="text-secondary">根据创作内容和粉丝群体特点，自由选择最适合的变现方式</p> </div> </div> <div class="flex gap-4"> <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center flex-shrink-0"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <div> <h3 class="text-xl font-semibold mb-1">创作支持与成长</h3> <p class="text-secondary">获取专业的创作指导、数据分析和行业资源，助力创作水平提升</p> </div> </div> </div> </div> </div> </div> </section> <!-- 变现方式 --> <section id="monetization" class="monetization py-16"> <div class="container"> <div class="text-center mb-12"> <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">多元变现方式</h2> <p class="text-secondary max-w-2xl mx-auto">无论你是内容创作者、艺术家还是专业人士，都能找到适合自己的变现路径</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="card"> <div class="h-40 overflow-hidden rounded-lg mb-4"> <img src="https://picsum.photos/id/20/400/300" alt="在线课程" class="w-full h-full object-cover hover:scale-110 transition-slow" > </div> <h3 class="text-xl font-semibold mb-2">在线课程</h3> <p class="text-secondary">录制专业课程，设定价格，让粉丝付费学习你的专业知识和技能</p> </div> <div class="card"> <div class="h-40 overflow-hidden rounded-lg mb-4"> <img src="https://picsum.photos/id/24/400/300" alt="会员订阅" class="w-full h-full object-cover hover:scale-110 transition-slow" > </div> <h3 class="text-xl font-semibold mb-2">会员订阅</h3> <p class="text-secondary">设置会员制，为付费会员提供独家内容、提前访问和专属服务</p> </div> <div class="card"> <div class="h-40 overflow-hidden rounded-lg mb-4"> <img src="https://picsum.photos/id/36/400/300" alt="数字作品" class="w-full h-full object-cover hover:scale-110 transition-slow" > </div> <h3 class="text-xl font-semibold mb-2">数字作品</h3> <p class="text-secondary">出售数字画作、设计稿、音乐作品、电子书等各类数字创意产品</p> </div> <div class="card"> <div class="h-40 overflow-hidden rounded-lg mb-4"> <img src="https://picsum.photos/id/42/400/300" alt="咨询服务" class="w-full h-full object-cover hover:scale-110 transition-slow" > </div> <h3 class="text-xl font-semibold mb-2">咨询服务</h3> <p class="text-secondary">提供一对一咨询、指导和建议，按次或套餐收费</p> </div> </div> </div> </section> <!-- 用户评价 --> <section id="testimonials" class="testimonials bg-orange-light py-16"> <div class="container"> <div class="text-center mb-12"> <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">创作者的声音</h2> <p class="text-secondary max-w-2xl mx-auto">看看已经加入小圈子的创作者们怎么说</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="card bg-white"> <div class="text-yellow-400 mb-4"> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> </div> <p class="text-secondary mb-6 italic">"加入小圈子后，我终于能够专注于创作本身，而不用担心变现问题。平台的多元变现方式让我的收入翻了三倍。"</p> <div class="flex items-center"> <img src="https://picsum.photos/id/64/60/60" alt="用户头像" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">林小美</h4> <p class="text-sm text-secondary">插画师 | 已加入1年</p> </div> </div> </div> <div class="card bg-white"> <div class="text-yellow-400 mb-4"> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> </div> <p class="text-secondary mb-6 italic">"小圈子的数据分析功能帮我精准了解粉丝需求，让我的创作更有针对性。现在我的会员订阅收入已经成为稳定的收入来源。"</p> <div class="flex items-center"> <img src="https://picsum.photos/id/91/60/60" alt="用户头像" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">王大锤</h4> <p class="text-sm text-secondary">摄影师 | 已加入8个月</p> </div> </div> </div> <div class="card bg-white"> <div class="text-yellow-400 mb-4"> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 inline-block" fill="none" stroke="currentColor" viewBox="0 0 20 20"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> </div> <p class="text-secondary mb-6 italic">"作为一名程序员，我在小圈子上分享技术课程和电子书，平台的用户质量非常高，粉丝互动也很积极，让我找到了志同道合的人。"</p> <div class="flex items-center"> <img src="https://picsum.photos/id/177/60/60" alt="用户头像" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">张小明</h4> <p class="text-sm text-secondary">程序员 | 已加入6个月</p> </div> </div> </div> </div> </div> </section> <!-- 常见问题 --> <section id="faq" class="faq py-16"> <div class="container"> <div class="text-center mb-12"> <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">常见问题</h2> <p class="text-secondary max-w-2xl mx-auto">了解小圈子平台的常见问题和解答</p> </div> <div class="max-w-3xl mx-auto space-y-6"> <div class="card" v-for="(faq, index) in faqs" :key="index"> <div class="flex justify-between items-start cursor-pointer" @click="toggleFaq(index)"> <h3 class="text-xl font-semibold">{{ faq.question }}</h3> <svg class="w-6 h-6 text-primary transition-transform" :class="{ 'transform rotate-180': activeFaq === index }" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </div> <div class="mt-4 text-secondary" v-if="activeFaq === index"> {{ faq.answer }} </div> </div> </div> </div> </section> <!-- 下载CTA --> <section class="cta bg-primary py-16"> <div class="container"> <div class="text-center text-white"> <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">立即加入小圈子</h2> <p class="text-white/80 max-w-2xl mx-auto mb-8">开始你的创作变现之旅，与志同道合的创作者和粉丝一起成长</p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="btn bg-white text-primary btn-large hover:bg-gray-100"> <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path> </svg> 下载iOS版 </button> <button class="btn bg-white text-primary btn-large hover:bg-gray-100"> <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path> </svg> 下载Android版 </button> </div> </div> </div> </section> <!-- 页脚 --> <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="#" class="text-gray-400 hover:text-white transition-fast">使用教程</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-fast">隐私政策</a></li> <li><a href="#" 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 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> contact@xiaoquanzi.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> 北京市朝阳区创意园B座 </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> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const activeFaq = ref(-1); const toggleFaq = (index: number) => { activeFaq.value = activeFaq.value === index ? -1 : index; }; const faqs = [ { question: '小圈子适合哪些类型的创作者？', answer: '小圈子适合各类内容创作者，包括但不限于：文章作者、插画师、摄影师、设计师、音乐人、教育工作者、程序员、心理咨询师等。只要你有专业知识或创意内容想要分享并变现，都可以加入小圈子。' }, { question: '如何在小圈子上获得收入？', answer: '小圈子提供多种变现方式：1) 出售在线课程；2) 设置会员订阅；3) 销售数字作品(如电子书、插画、音乐等)；4) 提供咨询服务；5) 接收粉丝打赏。创作者可以根据自己的内容类型和粉丝需求选择最适合的变现方式。' }, { question: '小圈子收取多少佣金？', answer: '小圈子采用阶梯式佣金模式：新创作者前3个月佣金为10%，之后根据创作者等级和收入规模，佣金比例在10%-20%之间浮动。我们致力于为创作者提供更公平的收入分配，让创作者获得更多收益。' }, { question: '如何吸引粉丝加入我的圈子？', answer: '小圈子提供多种粉丝运营工具：1) 内容预览功能，让潜在粉丝了解你的内容价值；2) 会员专属社群，增强粉丝黏性；3) 定期活动和直播，促进互动；4) 数据分析工具，帮助你了解粉丝需求，优化内容策略。' }, { question: '小圈子如何保护创作者的知识产权？', answer: '小圈子高度重视知识产权保护：1) 所有内容采用数字水印技术；2) 严格的内容访问控制机制；3) 支持DMCA投诉；4) 提供版权登记指引；5) 对侵权行为零容忍，发现即严肃处理。' } ]; </script> <style scoped> /* 额外的组件特定样式 */ .header { position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 100; box-shadow: var(--shadow-sm); } .space-x-8 > * + * { margin-left: 2rem; } .space-y-6 > * + * { margin-top: 1.5rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .gap-8 { gap: 2rem; } .gap-6 { gap: 1.5rem; } .gap-4 { gap: 1rem; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mr-2 { margin-right: 0.5rem; } .mr-4 { margin-right: 1rem; } .ml-3 { margin-left: 0.75rem; } .h-40 { height: 10rem; } .h-16 { height: 4rem; } .h-12 { height: 3rem; } .h-10 { height: 2.5rem; } .h-8 { height: 2rem; } .w-16 { width: 4rem; } .w-12 { width: 3rem; } .w-10 { width: 2.5rem; } .w-8 { width: 2rem; } .w-6 { width: 1.5rem; } .w-5 { width: 1.25rem; } .h-6 { height: 1.5rem; } .h-5 { height: 1.25rem; } /* 响应式断点样式 */ @media (max-width: 768px) { .hidden { display: none; } .md\:flex { display: flex; } .md\:grid-cols-3, .md\:grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .sm\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media (min-width: 768px) { .md\:hidden { display: none; } } @media (min-width: 640px) { .sm\:hidden { display: none; } } </style>
ok
目前这个版本看看效果 然后提交
我们执行npm run dev
初步样子有了 我先提交gitee，下一篇继续完善
