购买服务器

购买雨云服务器

云服务器、网站搭建、游戏云、对象存储、裸金属物理机

一个简洁的个人主页🎉

📘 项目介绍

这是一个使用 Vue 3 和 Vite 构建的现代化个人主页模板，采用玻璃拟态（Glassmorphism）设计风格，界面清新、轻盈，同时具备星空背景动画与鼠标光标拖尾等细腻的视觉交互效果，适合用作个人展示、博客引导页或作品集合页

📥 克隆项目

git clone https://gitee.com/Misaka273/baimu-live.git

📦 安装依赖

npm install

🚀 启动开发服务器

npm run dev

🛠️ 构建项目

npm run build

✨ 项目特性

• 基于 Vue 3.5 + Vite 7 构建，启动与构建速度快
• 使用 Vue 3 Composition API 与 script setup 语法
• 玻璃拟态（Glassmorphism）UI 风格：毛玻璃卡片、柔和阴影、大圆角
• 梦幻渐变背景（蓝紫色调），营造轻盈通透的视觉体验
• Canvas 星空背景动画，页面更具层次感
• 鼠标移动星星拖尾特效，增强交互趣味性
• 响应式布局，适配桌面端与移动端
• 内容集中配置，修改方便

🗂️ 项目结构

baimu-live/
├── src/
│   ├── assets/                     # 静态资源目录
│   ├── components/
│   │   ├── Home/                   # 主页组件与样式
│   │   │   ├── HomePage.vue        # 主页主组件
│   │   │   ├── home-page.scss      # 主页样式
│   │   │   ├── home-content.ts     # 主页内容配置
│   │   │   ├── XfXx.ts             # 星空背景动画
│   │   │   ├── GlassCurveSvg.vue   # 右侧玻璃曲线装饰
│   │   │   └── CharacterSvg.vue
│   │   └── guangbiaoTX/            # 光标拖尾特效
│   │       ├── useGuangbiaoTX.ts
│   │       └── guangbiaoTX.scss
│   ├── App.vue                     # 应用入口组件
│   ├── main.js                     # 应用主文件
│   └── style.css                   # 全局样式与主题变量
├── index.html                      # 应用入口 HTML 文件
├── package.json                    # 项目依赖配置文件
├── vite.config.ts                  # Vite 配置文件
├── README.md                       # 中文说明文档
└── README.en.md                    # 英文说明文档

📂 项目文件说明

• 🏠 首页信息内容修改文件

src/components/Home/home-content.ts

在该文件中可以配置：

• 站点标题与图标
• 个人头像、昵称、简介与别名
• 订阅按钮文案
• 社交链接（首页、开源、纸鸢社、备案等）
• 右侧角色名称与展示文案
• 备案信息
• 开源仓库链接

🎨 自定义主题

主题色与基础样式变量位于 src/style.css 的 :root 中，修改以下 CSS 变量即可调整整体色调：

--bg-start: #f8faff;        /* 背景起始色 */
--bg-end: #edf3ff;          /* 背景结束色 */
--card-bg: rgba(255, 255, 255, 0.72);  /* 卡片背景色 */
--primary: #b6ceff;         /* 主题色 */
--primary-hover: #9ab5f0;   /* 主题悬停色 */
--text-dark: #3b4a6b;       /* 深色文字 */
--text-light: #7a8bb0;      /* 浅色文字 */
--radius: 36px;             /* 卡片圆角 */