Salero v1.1 - 餐厅管理引导模板 preview 1

Salero v1.1 - 餐厅管理引导模板

bookmark

Salero 是一套基于 Bootstrap 5 的餐饮管理后台模板，包含完整的页面组件（如图表、邮箱、电商、聊天、仪表盘等），适合快速构建餐厅或外卖平台的管理系统。

HTML

项目简介

Salero 是一套基于 Bootstrap 5 的餐饮管理后台模板，包含完整的页面组件（如图表、邮箱、电商、聊天、仪表盘等），适合快速构建餐厅或外卖平台的管理系统。

技术栈

  • Bootstrap 5
  • jQuery
  • SCSS
  • Chart.js / Chartist.js / Flot / Morris（图表库）
  • Font Awesome / Material Design Icons / Line Awesome 等多套图标
  • AOS 动画、Animate.css、Perfect Scrollbar、MetisMenu 等 UI 组件

项目结构

text
saleroadmin-11/Salero-v1.1-30-June-2023/
├── doc/                          # 模板使用文档（含静态 HTML 演示）
│   ├── css/                      # Bootstrap 及样式文件
│   ├── js/                       # jQuery 及交互脚本
│   ├── fonts/                    # 图标字体文件
│   ├── images/                   # 文档配图
│   └── index.html                # 文档入口页
└── xhtml/                        # 正式模板文件
    ├── css/style.css             # 主样式（由 SCSS 编译）
    ├── js/                       # 页面脚本
    ├── icons/                    # 多套图标字体
    ├── vendor/                   # 第三方插件（图表、滚动条等）
    └── *.html                    # 页面（dashboard、表格、表单、电商等）

核心文件说明

  • xhtml/index.html — 主仪表盘入口，含顶部导航、侧边栏、图表区
  • xhtml/css/style.css — 编译后的全局样式，定义颜色、布局、渐变等主题变量
  • doc/index.html — 官方文档页面，含 Sass 编译说明及使用指南
  • doc/js/main.js — 文档页面的页面切换及侧边栏折叠逻辑
  • xhtml/js/layout-dark.js — 暗色主题切换脚本

快速开始

  1. 直接在浏览器打开 xhtml/index.html 即可预览完整后台界面
  2. 如需修改样式，进入 xhtml/scss/main.scss，使用 node-sass --watch scss/main.scss css/style.css 实时编译

使用建议

xhtml 目录下的 HTML 页面均为独立页面，可直接复制使用或作为 SPA 的路由页面；建议通过后端渲染或静态站点生成器（Next.js/Nuxt）接入真实数据接口。

help_outline

常见问题