+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
+
+> React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
+
+[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
+
+## 项目截图
+
+### 登录
+
+
+
+### 默认皮肤
+
+
+
+### 浅绿色皮肤
+
+
+
+## 赞赏
+
+请作者喝杯咖啡吧！(微信号：linxin_20)
+
+
+
+## 特别鸣谢
+
+- [实验楼](https://www.shiyanlou.com?source=vue-manage-system)
+
+## 前言
+
+该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
+
+## 功能
+
+- [x] Element UI
+- [x] 登录/注销
+- [x] Dashboard
+- [x] 表格
+- [x] Tab 选项卡
+- [x] 表单
+- [x] 图表 :bar_chart:
+- [x] 富文本编辑器
+- [x] markdown 编辑器
+- [x] 图片拖拽/裁剪上传
+- [x] 支持切换主题色 :sparkles:
+- [x] 列表拖拽排序
+- [x] 权限测试
+- [x] 404 / 403
+- [x] 三级菜单
+- [x] 自定义图标
+- [x] 可拖拽弹窗
+- [x] 国际化
+
+## 安装步骤
+
+```
+git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
+cd vue-manage-system // 进入模板目录
+npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn
+
+// 开启服务器，浏览器访问 http://localhost:8080
+npm run serve
+
+// 执行构建命令，生成的dist文件夹放在服务器下即可访问
+npm run build
+```
+
+## 组件使用说明与演示
+
+### vue-schart
+
+vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/)
+
+## Donation
+
+
+
+## Preface
+
+The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
+
+## Function
+
+- [x] Element-UI
+- [x] Login/Logout
+- [x] Dashboard
+- [x] Table
+- [x] Tabs
+- [x] From
+- [x] Chart :bar_chart:
+- [x] Editor
+- [x] Markdown
+- [x] Upload pictures by clipping or dragging
+- [x] Support manual switch themes :sparkles:
+- [x] List drag sort
+- [x] Permission
+- [x] 404 / 403
+- [x] Three level menu
+- [x] Custom icon
+
+## Installation steps
+
+ git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
+ cd vue-manage-system // Enter template directory
+ npm install // Installation dependency
+
+## Local development
+
+ // Open server and access http://localhost:8080 in browser
+ npm run serve
+
+## Constructing production
+
+ // Constructing project
+ npm run build
+
+## Component description and presentation
+
+### vue-schart
+
+Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
+
+```html
+
+ Unicode 是字体在网页端最原始的应用方式，特点是：
+++注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
+
Unicode 使用步骤如下：
+@font-face@font-face {
+ font-family: 'iconfont';
+ src: url('iconfont.eot');
+ src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+ url('iconfont.woff2') format('woff2'),
+ url('iconfont.woff') format('woff'),
+ url('iconfont.ttf') format('truetype'),
+ url('iconfont.svg#iconfont') format('svg');
+}
+.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+<span class="iconfont">3</span>
+
+ ++"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
+
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
+与 Unicode 使用方式相比，具有如下特点：
+使用步骤如下：
+<link rel="stylesheet" href="./iconfont.css">
+<span class="iconfont icon-xxx"></span>
+++" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
+
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
+font-size, color 来调整样式。使用步骤如下：
+<script src="./iconfont.js"></script>
+<style>
+.icon {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
+}
+</style>
+<svg class="icon" aria-hidden="true">
+ <use xlink:href="#icon-xxx"></use>
+</svg>
+
+ + + {{currentPage}} / {{pageCount}} + +
+
+ 
+ 上传封面
+只能上传jpg/png文件
+课程封面图将按2:1显示，最佳分辨率1400*700
+
上传资源 上传资源+ + {{currentPage}} / {{pageCount}} + +
+
+
+ 
+ 运营与管理
+电竞赛事运营与管理仿真实训系统
+
+ 编导
+电竞赛事编导仿真实训系统
+
+ 主持与解说
+电竞赛事主持与解说仿真实训系统
+
+ 数据分析
+电竞数据分析仿真实训系统
+
+ 品牌与运营
+电竞品牌运营与管理仿真实训系统
+{{$t('i18n.p1')}}
+{{$t('i18n.p2')}}
+{{$t('i18n.p3')}}
++ 直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标） +
++ + <i class="el-icon-lx-redpacket_fill"></i> +
++ + <i class="el-icon-lx-weibo"></i> +
++ + <i class="el-icon-lx-emojifill"></i> +
+
+ 
+ 上传头像
模板下载 上传文件 模板下载 上传文件code\uff1a
vid:
uuid:
requestId:
"+_.get("Play_DateTime")+"\uff1a
Unicode 是字体在网页端最原始的应用方式，特点是：
+++注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
+
Unicode 使用步骤如下：
+@font-face@font-face {
+ font-family: 'iconfont';
+ src: url('iconfont.eot');
+ src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+ url('iconfont.woff2') format('woff2'),
+ url('iconfont.woff') format('woff'),
+ url('iconfont.ttf') format('truetype'),
+ url('iconfont.svg#iconfont') format('svg');
+}
+.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+<span class="iconfont">3</span>
+
+ ++"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
+
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
+与 Unicode 使用方式相比，具有如下特点：
+使用步骤如下：
+<link rel="stylesheet" href="./iconfont.css">
+<span class="iconfont icon-xxx"></span>
+++" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
+
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
+font-size, color 来调整样式。使用步骤如下：
+<script src="./iconfont.js"></script>
+<style>
+.icon {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
+}
+</style>
+<svg class="icon" aria-hidden="true">
+ <use xlink:href="#icon-xxx"></use>
+</svg>
+