杭州缥缈峰-IT工具导航

一个现代化的IT工具导航网站，具有流畅炫酷的动画效果和响应式设计。

🚀 特性

• ✨ 炫酷动画效果: 使用CSS动画和过渡效果，提供流畅的用户体验
• 🎨 现代化设计: 采用玻璃拟态设计风格，视觉效果出众
• 📱 响应式布局: 完美适配桌面端、平板和移动设备
• 🔧 组件化架构: 使用Vue 3 + TypeScript，代码结构清晰
• 🎯 Tailwind CSS: 使用Tailwind CSS v4进行样式开发
• ⚡ 高性能: 基于Vite构建，开发和构建速度极快

🛠️ 技术栈

• 前端框架: Vue 3 + TypeScript
• 构建工具: Vite
• 样式框架: Tailwind CSS v4
• 图标库: Lucide Vue Next
• 包管理器: pnpm
• 代码规范: ESLint + Prettier + Husky

📦 项目结构

src/
├── components/           # 组件目录
│   ├── AnimatedBackground.vue    # 动画背景组件
│   ├── NavigationCard.vue        # 导航卡片组件
│   ├── NavigationItem.vue        # 导航项组件
│   └── ui/              # UI组件库
│       ├── button.vue
│       ├── card.vue
│       └── loading-dots.vue
├── lib/                 # 工具函数
│   └── utils.ts
├── style.css           # 全局样式
└── App.vue             # 主应用组件

🎨 设计特色

动画效果

• 页面加载动画: 卡片依次滑入效果
• 悬停交互: 卡片悬停时的3D变换和阴影效果
• 背景动画: 浮动粒子和渐变背景动画
• 微交互: 按钮点击、图标旋转等细节动画

视觉设计

• 玻璃拟态: 半透明背景配合模糊效果
• 渐变色彩: 石色系渐变，营造温和的视觉体验
• 阴影层次: 多层阴影营造立体感
• 响应式网格: 自适应的卡片布局

🚀 快速开始

安装依赖

pnpm install

启动开发服务器

pnpm run dev

构建生产版本

pnpm run build

预览生产版本

pnpm run preview

📝 开发说明

添加新的导航项

在 src/App.vue 中的相应数组中添加新的导航项：

const newItems: NavigationItem[] = [
  {
    title: '工具名称',
    subtitle: '工具描述',
    url: 'https://example.com'
  }
]

自定义样式

项目使用Tailwind CSS v4，可以在 tailwind.config.js 中自定义主题：

theme: {
  extend: {
    colors: {
      // 自定义颜色
    },
    animation: {
      // 自定义动画
    }
  }
}

🎯 浏览器支持

• Chrome >= 88
• Firefox >= 78
• Safari >= 14
• Edge >= 88

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

© 2024 PMF TECHNOLOGY. All rights reserved.