gitadmin/turingflow-shop-001

Template

Fork 0

Files

“dongming” ebae1aa7e3 first commit

2025-12-19 22:16:01 +08:00

12 KiB

Raw Permalink Blame History

animart-petshop

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

技术栈

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

快速开始

pnpm install
pnpm run dev

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

目录结构

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 结构说明

每个页面遵循统一结构：

<!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)

/* 主色调 - 蓝色 */
--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 图片路径：

<!-- 搜索 .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 中的菜单列表：

<!-- 搜索 .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 中的轮播区域：

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

修改商品卡片

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

<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/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

注意事项

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

12 KiB Raw Permalink Blame History Unescape Escape