# animart-petshop

宠物商店电商网站模板，适用于宠物店、宠物食品、宠物护理等电商场景。

## 技术栈

- Bootstrap 5 (响应式布局框架)
- jQuery (DOM 操作和插件)
- Slick Slider (轮播组件)
- WOW.js + Animate.css (滚动动画)
- IcoFont + FontAwesome (图标字体)
- Nice Select (下拉选择美化)
- Fancybox (图片灯箱)
- Mean Menu (移动端菜单)

## 快速开始

```bash
pnpm install
pnpm run dev
```

访问 http://localhost:3001 预览，修改文件后浏览器自动刷新。

## 目录结构

```text
turingflow-shop-001/
├── package.json              # 项目配置和启动脚本
├── html/                     # 静态网站根目录
│   ├── index.html            # 首页 (默认宠物店)
│   ├── index-2(pet_shop).html    # 首页变体: 宠物店2
│   ├── index-3(pet_care).html    # 首页变体: 宠物护理
│   ├── index-4(pet_care2).html   # 首页变体: 宠物护理2
│   ├── index-5(food_shop).html   # 首页变体: 食品店
│   ├── index-6(food_shop2).html  # 首页变体: 食品店2
│   ├── index-7(pet_acc).html     # 首页变体: 宠物配件
│   ├── index-8(pet_acc2).html    # 首页变体: 宠物配件2
│   ├── index-9(lookbook).html    # 首页变体: Lookbook
│   ├── index-10(minimal).html    # 首页变体: 极简风格
│   ├── index-11(box).html        # 首页变体: 盒子布局
│   ├── index-12(all_section).html # 首页变体: 全部区块
│   ├── shop.html             # 商品列表页 (网格)
│   ├── shop-list.html        # 商品列表页 (列表)
│   ├── product-details.html  # 商品详情页
│   ├── product-details-2~6.html  # 商品详情页变体
│   ├── cart.html             # 购物车页面
│   ├── checkout.html         # 结账页面
│   ├── wishlist.html         # 愿望清单
│   ├── compare.html          # 商品对比
│   ├── blog.html             # 博客列表
│   ├── blog-details.html     # 博客详情
│   ├── about.html            # 关于我们
│   ├── contact.html          # 联系我们
│   ├── faq.html              # 常见问题
│   ├── login.html            # 登录页面
│   ├── register.html         # 注册页面
│   ├── 404.html              # 404 错误页
│   ├── style.css             # 主样式文件 (3000+ 行)
│   ├── css/                  # CSS 依赖
│   │   ├── bootstrap.min.css     # Bootstrap 框架
│   │   ├── animate.css           # 动画样式
│   │   ├── icofont.css           # 图标字体
│   │   ├── responsive.css        # 响应式样式
│   │   ├── plugins.css           # 插件样式
│   │   ├── default.css           # 默认样式
│   │   ├── slick-slider.css      # 轮播样式
│   │   ├── nice-select.css       # 下拉框样式
│   │   ├── jquery.fancybox.css   # 灯箱样式
│   │   ├── jquery-ui.min.css     # jQuery UI
│   │   └── meanmenu.min.css      # 移动菜单样式
│   ├── js/                   # JavaScript 文件
│   │   ├── main.js               # 主逻辑 (插件初始化、交互)
│   │   ├── plugins.js            # 插件合集
│   │   ├── bootstrap.min.js      # Bootstrap JS
│   │   ├── wow.min.js            # 滚动动画
│   │   ├── jquery.scrollUp.js    # 回到顶部
│   │   ├── jquery.nice-select.min.js  # 下拉框
│   │   ├── jquery.meanmenu.min.js     # 移动菜单
│   │   ├── jquery-ui.min.js      # jQuery UI (价格滑块)
│   │   ├── popper.min.js         # Bootstrap 依赖
│   │   ├── ajax-mail.js          # 表单提交
│   │   └── vendor/               # 第三方库
│   ├── fonts/                # 字体文件
│   │   ├── icofont.*             # IcoFont 图标
│   │   ├── fontawesome-webfont.* # FontAwesome 图标
│   │   ├── Stroke-Gap-Icons.*    # Stroke 图标
│   │   └── georgia_italic-*      # Georgia 斜体字体
│   └── img/                  # 图片资源
│       ├── logo/                 # Logo 图片
│       ├── banner/               # 轮播横幅
│       ├── slider/               # 滑动图片
│       ├── products/             # 商品图片
│       ├── blog/                 # 博客图片
│       ├── icons/                # 图标图片
│       ├── brand/                # 品牌 Logo
│       ├── team/                 # 团队成员
│       ├── testmonial/           # 用户评价
│       ├── portfolio/            # 作品集
│       ├── bg/                   # 背景图片
│       └── favicon.png           # 网站图标
```

## 页面路由

| 路径 | 页面 | 说明 |
|------|------|------|
| `/` 或 `/index.html` | 首页 | 轮播 + 分类 + 商品 + 评价 + 博客 |
| `/shop.html` | 商品列表 | 网格布局，支持筛选和排序 |
| `/shop-list.html` | 商品列表 | 列表布局 |
| `/product-details.html` | 商品详情 | 图片画廊 + 规格 + 评论 + 相关商品 |
| `/cart.html` | 购物车 | 商品数量修改 + 优惠券 |
| `/checkout.html` | 结账 | 收货地址 + 支付方式 |
| `/wishlist.html` | 愿望清单 | 收藏商品列表 |
| `/compare.html` | 商品对比 | 多商品参数对比 |
| `/blog.html` | 博客列表 | 文章列表 + 侧边栏 |
| `/blog-details.html` | 博客详情 | 文章内容 + 评论 |
| `/about.html` | 关于我们 | 公司介绍 + 团队 |
| `/contact.html` | 联系我们 | 联系表单 + 地图 |
| `/faq.html` | 常见问题 | 折叠面板 FAQ |
| `/login.html` | 登录 | 登录表单 |
| `/register.html` | 注册 | 注册表单 |
| `/404.html` | 404 | 错误页面 |

## HTML 结构说明

每个页面遵循统一结构：

```html
<!doctype html>
<html>
<head>
    <!-- Meta 标签 -->
    <!-- CSS 引入顺序: icofont → animate → 插件 → bootstrap → default → plugins → style → responsive -->
</head>
<body>
    <div class="wrapper">
        <!-- 弹窗: .popup_wrapper (订阅弹窗) -->

        <!-- 头部: header.header-area -->
        <!--   Logo: .logo -->
        <!--   导航: .header-menu-list -->
        <!--   搜索/购物车: .header-right-element -->

        <!-- 主内容区域 -->
        <!--   轮播: .main-slider-active -->
        <!--   分类: .category-area -->
        <!--   商品: .product-area -->
        <!--   评价: .testmonial-area -->
        <!--   博客: .blog-area -->

        <!-- 页脚: footer.footer-area -->
        <!--   Logo + 简介 -->
        <!--   链接列表 -->
        <!--   联系信息 -->
        <!--   社交媒体 -->
    </div>

    <!-- JS 引入顺序: jQuery → plugins → bootstrap → popper → 各插件 → main.js -->
</body>
</html>
```

## 核心 CSS 类名

### 布局类
- `.wrapper` - 页面最外层容器
- `.container` / `.container-fluid` - Bootstrap 容器
- `.row` / `.col-*` - Bootstrap 栅格

### 头部类
- `.header-area` - 头部容器
- `.header-sticky` - 固定头部
- `.logo` - Logo 区域
- `.header-menu-list` - 导航菜单
- `.header-right-element` - 右侧工具栏
- `.mobile-menu` - 移动端菜单

### 商品类
- `.product-area` - 商品区域容器
- `.single-product` - 单个商品卡片
- `.product-img` - 商品图片
- `.product-content` - 商品信息
- `.item_price` - 价格
- `.item_add_cart` - 加入购物车按钮
- `.product-slider-active` - 商品轮播

### 轮播类
- `.main-slider-active` - 主轮播
- `.slick-prev` / `.slick-next` - 轮播箭头
- `.slick-dots` - 轮播指示点

### 按钮类
- `.btn` - 基础按钮
- `.add-btn` - 添加按钮
- `.view-all-btn` - 查看全部

### 表单类
- `.checkout-form` - 结账表单
- `.login-form` - 登录表单
- `.contact-form` - 联系表单

## 主题颜色 (style.css)

```css
/* 主色调 - 蓝色 */
--primary-color: #00adf6;

/* 文字颜色 */
--text-color: #666666;
--heading-color: #1b1b1c;

/* 背景色 */
--bg-white: #ffffff;
--bg-light: #f5f5f5;
```

修改主题色：在 `style.css` 中搜索 `#00adf6` 并替换。

## main.js 功能列表

| 功能 | 说明 |
|------|------|
| Newsletter Popup | 延迟显示订阅弹窗 |
| Mobile Menu | 移动端菜单 (meanmenu) |
| Cart Dropdown | 购物车下拉菜单 |
| Checkout Toggle | 结账页面折叠面板 |
| Main Slider | 首页主轮播 (slick) |
| Product Slider | 商品轮播 |
| Product Quickview | 商品快速预览 |
| Price Range Slider | 价格区间滑块 (jQuery UI) |
| Nice Select | 下拉框美化 |
| Quantity Buttons | 数量加减按钮 |
| WOW Animation | 滚动动画初始化 |
| Scroll Up | 回到顶部按钮 |
| Sticky Header | 滚动固定头部 |

## 常见修改任务

### 修改 Logo

编辑 `html/index.html` 中的 Logo 图片路径：

```html
<!-- 搜索 .logo 找到以下代码 -->
<div class="logo">
    <a href="index.html">
        <img src="img/logo/logo2.png" alt="logo-image">
    </a>
</div>
```

替换 `img/logo/logo2.png` 为新 Logo 路径。

### 修改导航菜单

编辑 `html/index.html` 中的菜单列表：

```html
<!-- 搜索 .header-menu-list 找到以下代码 -->
<ul class="header-menu-list">
    <li class="active">
        <a href="index.html">home</a>
        <ul class="common_ddown">
            <!-- 子菜单项 -->
        </ul>
    </li>
    <!-- 更多菜单项 -->
</ul>
```

### 修改轮播图

编辑 `html/index.html` 中的轮播区域：

```html
<!-- 搜索 .main-slider-active 找到以下代码 -->
<div class="main-slider-active">
    <div class="single-slide">
        <img src="img/slider/xxx.jpg" alt="">
        <!-- 轮播内容 -->
    </div>
</div>
```

### 修改商品卡片

搜索 `.single-product` 找到商品结构：

```html
<div class="single-product">
    <div class="product-img">
        <a href="product-details.html">
            <img src="img/products/xxx.jpg" alt="">
        </a>
        <!-- 操作按钮 -->
    </div>
    <div class="product-content">
        <a href="product-details.html">商品名称</a>
        <span class="item_price">$99.00</span>
    </div>
</div>
```

### 修改页脚信息

编辑 `html/index.html` 底部的 `footer.footer-area` 区域。

### 修改主题色

在 `html/style.css` 中搜索替换：
- `#00adf6` → 新的主色调

## 响应式断点

```css
/* 在 css/responsive.css 中定义 */
@media (max-width: 1199px) { /* 大屏幕 */ }
@media (max-width: 991px)  { /* 平板 - 显示移动菜单 */ }
@media (max-width: 767px)  { /* 手机横屏 */ }
@media (max-width: 575px)  { /* 手机竖屏 */ }
```

## 图片资源说明

| 目录 | 用途 | 建议尺寸 |
|------|------|----------|
| `img/logo/` | 网站 Logo | 200x50 px |
| `img/banner/` | 首页轮播大图 | 1920x800 px |
| `img/slider/` | 滑动区域图片 | 1200x600 px |
| `img/products/` | 商品图片 | 270x270 px |
| `img/blog/` | 博客封面 | 370x250 px |
| `img/icons/` | 小图标 | 64x64 px |
| `img/brand/` | 品牌 Logo | 150x80 px |
| `img/team/` | 团队头像 | 270x270 px |
| `img/bg/` | 背景图 | 1920x1080 px |

## 注意事项

1. **所有页面独立** - 每个 HTML 文件包含完整的头部和页脚，修改需同步多个文件
2. **无构建工具** - 纯静态文件，直接修改即时生效
3. **jQuery 依赖** - 交互功能依赖 jQuery，不要移除
4. **图标使用** - 使用 IcoFont 类名，如 `<i class="icofont-cart"></i>`
5. **动画效果** - 元素添加 `data-wow-*` 属性启用滚动动画