【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

2025-10-21 1206

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

引言

我们有个产品需要个很漂亮的落地页，网上找了一圈想买个好看的落地页都买不到，于是乎卓伊凡决定做一个非常漂亮的落地页，记录过程给大家。

开源仓库：

https://gitee.com/youyacao/xiaoquanzi-down

演示地址：

https://xqz.fan

实战内容

第5篇我们粗糙的落地页就完成了，但是我说了是粗糙，现在卓伊凡对首页进行改造

首先我们把使用教程改下，原先是文字，但是我们做了有视频因此修改

首先对平台特色完善

先对内容进行了完善，然后是对样式也进行了完善

然后我们对更新日志部分进行特殊调整

更新日志前缀符号优化总结

主要改进：

更大的前缀符号：

从 w-2 h-2 增加到 w-3 h-3，使符号更加显眼

双层设计：

外层：蓝色圆点 (bg-blue-500)
内层：白色小圆点 (bg-white)，形成更精致的视觉效果

更好的对齐：

调整了 mt-2 到 mt-1.5，使符号与文字更好地对齐
使用 flex items-center justify-center 确保内层圆点居中

增加间距：

从 space-y-3 增加到 space-y-4，让每行更新内容之间有更多空间

改善文字样式：

添加了 leading-relaxed 类，使文字行间距更舒适

视觉效果：

更精致：双层圆点设计比单层圆点更有层次感
更清晰：更大的符号更容易识别
更统一：所有更新条目都使用相同的符号样式
更易读：增加了行间距，文字更易阅读

<div class="update-log-section py-8">
            <div class="max-w-4xl mx-auto px-4">
              <div class="card bg-gradient-to-r from-blue-50 to-indigo-50 p-6 border border-blue-100">
                <div class="flex items-center justify-between mb-4">
                  <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
                      <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                      </svg>
                    </div>
                    <div>
                      <h3 class="text-xl font-bold text-gray-800">最新更新日志</h3>
                      <p class="text-sm text-gray-600">版本 v1.4.3 • 2025年10月19日</p>
                    </div>
                  </div>
                  <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                    最新版本
                  </div>
                </div>
                <div class="space-y-4">
                  <div class="flex items-start space-x-3">
                    <div class="w-4 h-4 bg-blue-500 rounded-full mt-1 flex-shrink-0 flex items-center justify-center">
                      <span class="text-white text-xs font-bold">•</span>
                    </div>
                    <p class="text-gray-700 leading-relaxed">由于微信支付故障，独立处理了支付宝支付，目前APP支付和H5支付均恢复正常。</p>
                  </div>
                  <div class="flex items-start space-x-3">
                    <div class="w-4 h-4 bg-blue-500 rounded-full mt-1 flex-shrink-0 flex items-center justify-center">
                      <span class="text-white text-xs font-bold">•</span>
                    </div>
                    <p class="text-gray-700 leading-relaxed">美化了个人中心的图标。</p>
                  </div>
                  <div class="flex items-start space-x-3">
                    <div class="w-4 h-4 bg-blue-500 rounded-full mt-1 flex-shrink-0 flex items-center justify-center">
                      <span class="text-white text-xs font-bold">•</span>
                    </div>
                    <p class="text-gray-700 leading-relaxed">处理了APP下载按钮在APP中无法打开的报错。</p>
                  </div>
                  <div class="flex items-start space-x-3">
                    <div class="w-4 h-4 bg-blue-500 rounded-full mt-1 flex-shrink-0 flex items-center justify-center">
                      <span class="text-white text-xs font-bold">•</span>
                    </div>
                    <p class="text-gray-700 leading-relaxed">预开发了图片放大和保存功能，目前经过反馈部分图片过大在APP部分机型无法正常显示。</p>
                  </div>
                </div>
                <div class="mt-4 pt-4 border-t border-blue-200">
                  <p class="text-sm text-gray-500">
                    <span class="font-medium">温馨提示：</span>如遇到任何问题，请及时联系我们的技术支持团队。
                  </p>
                </div>
              </div>
            </div>
          </div>

再把前缀小圆点的颜色改成黑色

效果 zer的一下就就出来了

对网址按钮进行细节优化

我想做的效果是默认是橙色，鼠标移动上去渐变为红色。

写法如下
class=”inline-flex items-center px-8 py-4 bg-orange-500 text-white font-semibold rounded-xl shadow-lg hover:bg-red-500 transition-all duration-300 transform hover:scale-105”

效果也是ok的了。

常见问题部分不好看，也是改

首页 (HomePage.vue) 修改：

常见问题部分：

FAQ卡片：bg-white rounded-xl shadow-sm → card bg-white
FAQ分类标签：添加了 card 类
无结果提示：bg-white rounded-xl shadow-sm → card bg-white
底部CTA按钮：添加了 card 类

联系我们部分：

所有联系卡片：contact-card bg-white rounded-xl shadow-md → card contact-card bg-white

其他页面修改：

FeaturesPage.vue：

所有特色卡片：feature-card bg-white rounded-lg shadow-lg → card feature-card bg-white

TutorialsPage.vue：

关注机制说明卡片：bg-white rounded-2xl shadow-lg → card bg-white
操作指南卡片：bg-white rounded-xl shadow-lg → card bg-white
注意事项卡片：bg-white rounded-lg → card bg-white

AboutPage.vue：

所有功能介绍卡片：bg-gray-50 rounded-lg shadow-sm → card bg-gray-50

CreatorsPage.vue：

所有成功案例卡片：story-card bg-white rounded-lg shadow-lg → card story-card bg-white

MonetizationPage.vue：

所有变现方式卡片：method-card bg-white rounded-lg shadow-lg → card method-card bg-white
收入分析卡片：revenue-analysis bg-white rounded-lg shadow-lg → card revenue-analysis bg-white

TestimonialsPage.vue：

所有评价卡片：testimonial-card bg-white rounded-lg shadow-lg → card testimonial-card bg-white

FaqPage.vue：

联系支持卡片：contact-support bg-gray-50 rounded-lg → card contact-support bg-gray-50

统一效果：

一致的圆角：所有卡片都使用 var(—radius-lg) 即 0.75rem 的圆角
统一的阴影：所有卡片都使用 var(—shadow-sm) 的阴影效果
一致的悬停效果：继承了 card:hover 的悬停动画效果
统一的过渡动画：继承了 card 的过渡效果
更好的视觉一致性：整个网站现在具有统一的卡片样式

logo的样式还是太丑。

加入样式

<div class="flex flex-col">
            <span class="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-500 via-red-500 to-pink-500 leading-none tracking-tight" style="font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">小圈子</span>
            <span class="text-sm font-semibold text-gray-600 group-hover:text-orange-500 transition-colors duration-300 tracking-wider" style="font-family: 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', monospace; letter-spacing: 0.1em;">xqz.fan</span>
          </div>

美观

下一步，我们继续，我发现个问题npm打包出来的文件，底部链接诸如隐私政策，平台特色，创作者平台等链接跳转会Nginx 404

通过顶部的菜单栏点开就不会404，顶部点开就直接能跳转，这是什么问题？

其实

这是一个典型的单页应用(SPA)路由配置问题。当通过底部链接访问时，Nginx会尝试在服务器上查找对应的物理文件，但实际上这些路由是由Vue Router在客户端处理的，所以会出现404错误。

问题分析：

底部链接使用了普通的 <a> 标签：底部链接使用的是 <a href="/path"> 而不是 Vue Router 的 <router-link>，这会导致浏览器直接向服务器请求这些路径，而不是通过 Vue Router 处理。
Nginx 配置问题：Nginx 没有配置 SPA 的 fallback 规则，当访问不存在的路径时返回 404 而不是 index.html。

解决方案：

1. 修复底部链接 - 将 `<a>` 标签改为 `<router-link>`

<ul class="space-y-2">
              <li><router-link to="/features" class="text-gray-400 hover:text-white transition-fast">平台特色</router-link></li>
              <li><router-link to="/creators" class="text-gray-400 hover:text-white transition-fast">创作者价值</router-link></li>
              <li><router-link to="/monetization" class="text-gray-400 hover:text-white transition-fast">变现方式</router-link></li>
              <li><router-link to="/testimonials" class="text-gray-400 hover:text-white transition-fast">用户评价</router-link></li>
            </ul>

类似这样

2. 创建 Nginx 配置文件

现在我需要创建一个 Nginx 配置文件来解决 SPA 路由问题：

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名
    # 网站根目录
    root /var/www/html;  # 替换为你的网站根目录
    index index.html;
    # 启用 gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml+rss
        application/atom+xml
        image/svg+xml;
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }
    # SPA 路由处理 - 这是关键配置
    location / {
        try_files $uri $uri/ /index.html;
    }
    # 安全头设置
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    # 错误页面
    error_page 404 /index.html;
}

问题修复总结

问题原因分析：

前端问题：

底部链接使用了普通的 <a href="/path"> 标签
这会导致浏览器直接向服务器请求这些路径
服务器找不到对应的物理文件，返回 404

Nginx 配置问题：

缺少 SPA (单页应用) 的 fallback 配置
当访问不存在的路径时，Nginx 应该返回 index.html 让 Vue Router 处理

修复方案：

✅ 1. 前端修复（已完成）

将所有底部链接从 <a href="/path"> 改为 <router-link to="/path">
这样所有链接都会通过 Vue Router 在客户端处理

✅ 2. Nginx 配置修复

创建了 nginx.conf 配置文件
添加了关键的 SPA 路由处理规则：

location / {
    try_files $uri $uri/ /index.html;
}

✅ 3. 部署文档

创建了详细的 DEPLOYMENT.md 说明文档
包含了问题分析、解决方案和部署步骤

为什么顶部菜单正常？

顶部菜单使用的是 <router-link> 组件
Vue Router 在客户端处理路由，不会向服务器发送请求

部署步骤：

重新构建项目：npm run build
将 nginx.conf 配置应用到服务器
修改配置文件中的域名和路径
重新加载 Nginx 配置

现在底部链接应该可以正常工作了！

我们测试下，完美可用。

【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

引言

实战内容

更新日志前缀符号优化总结

主要改进：

视觉效果：

首页 (HomePage.vue) 修改：

其他页面修改：

FeaturesPage.vue：

TutorialsPage.vue：

AboutPage.vue：

CreatorsPage.vue：

MonetizationPage.vue：

TestimonialsPage.vue：

FaqPage.vue：

统一效果：

问题分析：

解决方案：

1. 修复底部链接 - 将 `<a>` 标签改为 `<router-link>`

2. 创建 Nginx 配置文件

问题修复总结

问题原因分析：

修复方案：

✅ 1. 前端修复（已完成）

✅ 2. Nginx 配置修复

✅ 3. 部署文档

为什么顶部菜单正常？

部署步骤：

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

引言

实战内容

更新日志前缀符号优化总结

主要改进：

视觉效果：

首页 (HomePage.vue) 修改：

其他页面修改：

FeaturesPage.vue：

TutorialsPage.vue：

AboutPage.vue：

CreatorsPage.vue：

MonetizationPage.vue：

TestimonialsPage.vue：

FaqPage.vue：

统一效果：

问题分析：

解决方案：

1. 修复底部链接 - 将 <a> 标签改为 <router-link>

2. 创建 Nginx 配置文件

问题修复总结

问题原因分析：

修复方案：

✅ 1. 前端修复（已完成）

✅ 2. Nginx 配置修复

✅ 3. 部署文档

为什么顶部菜单正常？

部署步骤：

热门文章

最新文章

相关课程

相关电子书

1. 修复底部链接 - 将 `<a>` 标签改为 `<router-link>`