345 lines
12 KiB
Markdown
345 lines
12 KiB
Markdown
# 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-*` 属性启用滚动动画
|