【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
原创
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
原创
卓伊凡
发布于 2025-10-15 00:48:32
发布于 2025-10-15 00:48:32
代码可运行
运行总次数：0
代码可运行
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
引言
我们有个产品需要个很漂亮的落地页，网上找了一圈想买个好看的落地页都买不到，于是乎卓伊凡决定做一个非常漂亮的落地页，记录过程给大家。
开源仓库：
https://gitee.com/youyacao/xiaoquanzi-down
实战内容
第一步我们做了一个粗略的首页，但是我们要建立各项目录和标准化页面才行
像目前现在这样是肯定不对的，而且页面也没有分开，样式文件全部在首页里面，肯定不对
其次我们在assets里面 放个logo
需要创建标准化的CSS样式文件，将通用样式从App.vue提取出来，并更新logo引用和排版。
建立 src/assets/css 目录 在里面存放 css
然后建立src/components/common
目录创建完成，现在创建通用的CSS文件，将变量、重置样式和通用类移到这个文件中。
base.css放入最基本的样式文件，就是基础默认的
src\assets\css\components.css 放入 目前首页 可能会通用的一些样式文件
main.css做引入文件
/ 导入所有CSS文件 / @import ‘./base.css’; @import ‘./components.css’;
app.vue 文件中开始移除移除内联样式并替换导航栏中的文字logo为图片logo。
<template>
<div id="app">
<!-- 导航栏 -->
<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="#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>这就是修改后的app.vue页面
整体看了下效果不错
logo位置还是不太协调，我决定在第三篇把logo图像拆分，文字独立写
本篇 提交了
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
