【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
原创
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
原创
卓伊凡
发布于 2025-10-13 22:23:43
发布于 2025-10-13 22:23:43
【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，下一篇继续完善
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
