first commit

README.md

@@ -0,0 +1,344 @@
+# 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-*` 属性启用滚动动画