commit b2fa2b90b85f14bc0b1477ee09d9b38352487e91
Author: 就眠仪式 <854085467@qq.com>
Date: Mon Sep 27 06:09:33 2021 +0800
[其他] 初始化项目结构
diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 00000000..b29aeba8
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..60e16ae9
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,26 @@
+module.exports = {
+ env: {
+ browser: true,
+ node: true,
+ },
+ parser: 'vue-eslint-parser',
+ parserOptions: {
+ parser: '@typescript-eslint/parser',
+ sourceType: 'module',
+ ecmaVersion: 10,
+ },
+ plugins: ['@typescript-eslint', 'prettier'],
+ extends: [
+ 'eslint:recommended',
+ 'plugin:vue/vue3-recommended',
+ 'plugin:@typescript-eslint/recommended',
+ ],
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+ quotes: ['error', 'single'],
+ semi: ['error', 'never'],
+ 'no-unused-vars': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
+ },
+}
diff --git a/.github/workflows/build docs.yml b/.github/workflows/build docs.yml
new file mode 100644
index 00000000..ca01066d
--- /dev/null
+++ b/.github/workflows/build docs.yml
@@ -0,0 +1,27 @@
+name: build docs
+
+on:
+ push:
+ branches: [ master ]
+
+jobs:
+ build-and-deploy:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v2.3.1
+ with:
+ persist-credentials: false
+
+ - name: Install and Build
+ run: |
+ npm install
+ npm run build:docs
+ - name: Deploy
+ uses: JamesIves/github-pages-deploy-action@3.6.2
+ with:
+ GITHUB_TOKEN: ${{ secrets.TOKEN }}
+ BRANCH: gh-pages
+ FOLDER: docs/dist
+ CLEAN: true
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 00000000..a5a3745a
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,20 @@
+name: test
+
+on:
+ pull_request:
+ branches: [ master ]
+
+jobs:
+ test:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v2.3.1
+ with:
+ persist-credentials: false
+
+ - name: Install and Test
+ run: |
+ npm install
+ npm run test
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..c89ed60e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,20 @@
+.DS_Store
+node_modules/
+dist/
+example/dist/
+lib/
+/types/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+package-lock.json
+
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/.helperrc.js b/.helperrc.js
new file mode 100644
index 00000000..54245a3f
--- /dev/null
+++ b/.helperrc.js
@@ -0,0 +1,53 @@
+const helper = require('components-helper')
+const { name, version } = require('./package.json')
+
+helper({
+ name,
+ version,
+ entry: 'docs/docs/en-US/components/*.md',
+ outDir: 'lib',
+ reComponentName,
+ reDocUrl,
+ reAttribute,
+ titleRegExp: '#+\\s+(.*)\n+>\\s*([^(#|\\n)]*)',
+ tableRegExp:
+ '#+\\s+(.*\\s*Props|.*\\s*Events|.*\\s*Slots|.*\\s*Directives)\\s*\\n+(\\|?.+\\|.+)\\n\\|?\\s*:?-+:?\\s*\\|.+((\\n\\|?.+\\|.+)+)',
+})
+
+function reComponentName(title) {
+ return 'ele-' + title.replace(/\B([A-Z])/g, '-$1').toLowerCase()
+}
+
+function reDocUrl(fileName, header) {
+ // TODO: `zh-CN` -> `en-US`
+ const docs = 'https://gitee.com/Jmysy/layui-vue'
+ const _header = header ? header.replace(/[ ]+/g, '-') : undefined
+ return docs + fileName + (_header ? '#' + header : '')
+}
+
+function reAttribute(value, key) {
+ if (key === 'Name' && /^(-|—)$/.test(value)) {
+ return 'default'
+ } else if (key === 'Name' && /v-model:(.+)/.test(value)) {
+ const _value = value.match(/v-model:(.+)/)
+ return _value ? _value[1] : undefined
+ } else if (key === 'Name' && /v-model/.test(value)) {
+ return 'model-value'
+ } else if (key === 'Name') {
+ return value.replace(/\B([A-Z])/g, '-$1').toLowerCase()
+ } else if (key === 'Type') {
+ return value
+ .replace(/\s*\/\s*/g, '|')
+ .replace(/\s*,\s*/g, '|')
+ .replace(/\(.*\)/g, '')
+ .toLowerCase()
+ } else if (value === '' || /^(-|—)$/.test(value)) {
+ return undefined
+ } else if (key === 'Options') {
+ return /\[.+\]\(.+\)/.test(value) || /^\*$/.test(value)
+ ? undefined
+ : value.replace(/`/g, '')
+ } else {
+ return value
+ }
+}
\ No newline at end of file
diff --git a/.lintstagedrc b/.lintstagedrc
new file mode 100644
index 00000000..9e87aea5
--- /dev/null
+++ b/.lintstagedrc
@@ -0,0 +1,4 @@
+{
+ "*.{ts,vue,js,tsx,jsx}": ["prettier --write --no-verify ", "eslint --fix"],
+ "*.{html,css,md,json}": "prettier --write",
+}
\ No newline at end of file
diff --git a/.postcssrc.json b/.postcssrc.json
new file mode 100644
index 00000000..67ab504b
--- /dev/null
+++ b/.postcssrc.json
@@ -0,0 +1,9 @@
+{
+ "map": false,
+ "plugins": {
+ "postcss-preset-env": {
+ "stage": 1
+ },
+ "autoprefixer": {}
+ }
+}
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..fd496a82
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+ "singleQuote": true,
+ "semi": false
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..5d5d01c2
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2019 Jmys
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..3032dd3d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,102 @@
+
+
+a component library for Vue 3 base on element-plus
+
+
+
+
+
+
+
+
+
+
+
+
+
+[开 发 文 档](https://jmysy.github.io/layui-vue) | [更 新 日 志](https://gitee.com/Jmysy/layui-vue/releases) | [常 见 问 题](https://gitee.com/Jmysy/layui-vue/issues)
+
+##### 📖 概述
+
+Element Enhance 是基于 Element Plus 而开发的模板组件,提供了更高级别的抽象支持,开箱即用,更加专注于页面。
+
+### Status: Beta
+
+This project is still under heavy development. Feel free to join us and make your first pull request.
+
+[![Edit layui-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/layui-vue-template-vh9bg?fontsize=14&hidenavigation=1&theme=dark)
+
+##### 📢 理念
+
+Element Plus 定义了基础的设计规范,对应也提供了大量的基础组件。但是对于中后台类应用,我们希望提供更高程度的抽象,提供更上层的设计规范,并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。
+
+列表页应该可以用 EleLayout + EleTable 完成,编辑页应该使用 EleLayout + EleForm 完成,详情页可以用 EleLayout + EleDescriptions 完成。 一个页面在开发工程中只需要关注几个重型组件,降低心智负担,专注于更核心的业务逻辑。
+
+##### ✒️ 特性
+
+该组件库的开发理念就是面向未来,如果查看源码你就会发现像是 vue 3 的 [script setup](https://github.com/vuejs/rfcs/pull/227.) 实验性功能、像是 CSSNext 的 [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)。在保证大部分浏览器的兼容性的情况下,会更多的使用新特性、新功能来开发
+
+##### 💡 计划
+
+- [x] PageContainer: 为了减少繁杂的面包屑配置和标题。
+- [ ] StatisticCard: 指标卡结合统计数值用于展示某主题的核心指标。
+- [ ] Search: 有些是时候表单要与别的组件组合使用,需要一些特殊形态的表单。
+
+##### ☁️ 入门
+
+让 Element Plus 更简单, 更通用, 更流行
+
+
+
+安装
+
+```
+npm install element-plus --save
+
+npm install layui-vue --save
+```
+
+引入
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementEnhance from 'layui-vue'
+import 'layui-vue/lib/style.css'
+import ElementPlus from 'element-plus'
+import 'element-plus/lib/theme-chalk/index.css'
+
+const app = createApp(App)
+
+app.use(ElementEnhance)
+app.use(ElementPlus)
+app.mount('#app')
+```
+
+使用
+
+```vue
+
+
+
+
+
+```
+
+效果
+
+![输入图片说明](https://images.gitee.com/uploads/images/2021/0530/172502_95f955fc_4835367.png '屏幕截图.png')
+
+##### 🔥 案例
+
+[Element Enhance Admin](https://gitee.com/Jmysy/layui-vue-admin) : 基于 Element Enhance 的 前端 Cli template
+
+##### 📈 趋势
+
+[![Giteye chart](https://chart.giteye.net/gitee/Jmysy/layui-vue/9X8CXNEY.png)](https://giteye.net/chart/9X8CXNEY)
+
+##### 🍚 贡献
+
+组件库还处于早期开发阶段,功能还需要完善。如果你希望参与贡献,欢迎 [Pull Request](https://github.com/Jmysy/layui-vue/pulls)。如果只是简单的文档相关的错误修正,你可以直接 PR,但如果是当前组件的 BUG 或者新功能、新组件等,最好优先提 [issues](https://github.com/Jmysy/layui-vue/issues)
+
+[![Giteye chart](https://chart.giteye.net/gitee/Jmysy/layui-vue/57W94KFG.png)](https://giteye.net/chart/57W94KFG)
diff --git a/docs/docs/en-US/components/button.md b/docs/docs/en-US/components/button.md
new file mode 100644
index 00000000..f48affb6
--- /dev/null
+++ b/docs/docs/en-US/components/button.md
@@ -0,0 +1,700 @@
+##### 基础
+
+::: demo 传入 columns 数据,自动生成表格
+
+
+
+
+
+
+
+:::
+
+##### 索引
+
+::: demo 通过配置 index 显示索引列,支持 columns 的参数
+
+
+
+
+
+
+
+:::
+
+##### 多选
+
+::: demo 通过配置 selection 显示多选框,支持 columns 的参数
+
+
+
+
+
+
+
+:::
+
+##### 展开
+
+::: demo 通过配置 expand 开启展开插槽,通过 #expand 插槽定制显示内容,支持 columns 的参数
+
+
+
+
+ {{ row }}
+
+
+
+
+
+
+:::
+
+##### 操作
+
+::: demo 通过配置 menu 开启按钮插槽,通过 #menu 插槽定制显示内容,支持 columns 的参数
+
+
+
+
+
+ 详情
+
+
+
+
+
+
+
+:::
+
+##### 插槽
+
+::: demo
+
+
+
+
+ {{ column.label }}
+
+
+
+ {{ row?.name }}
+
+
+
+
+ 详情
+
+
+
+
+
+
+
+:::
+
+##### 分页
+
+::: demo 当传入 total 数据时,将自动显示分页。可以通过 `v-model:current-page` 绑定当前页数、通过 `v-model:page-size` 绑定每页显示条目个数
+
+
+
+
+
+
+
+:::
+
+##### 多级
+
+::: demo 通过 columns 的 `children` 配置多级表头
+
+
+
+
+
+
+
+:::
+
+##### 配置
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| :---------------------- | :------------------------------------------------------------------ | :------------------------------------------------------ | :----------------------------- | :--------------------------------------------------- |
+| data | 显示的数据 | array | - | - |
+| columns | 自动生成表单的参数,参考下面 columns | array | - | - |
+| selection | 显示多选框,支持 columns 的配置 | boolean / object | - | false |
+| index | 显示索引,支持 columns 的配置 | boolean / object | - | false |
+| expand | 开启展开插槽,支持 columns 的配置 | boolean / object | - | false |
+| menu | 开启操作按钮插槽,支持 columns 的配置 | boolean / object | - | false |
+| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | boolean | - | false |
+| align | 对齐方式 | string | left / center / right | left |
+| header-align | 表头对齐方式 | string | left / center / right | 同 align |
+| total | 总条目数 | number | - | - |
+| current-page | 当前页数,可以通过 `v-model:current-page` 绑定值 | number | - | - |
+| page-size | 每页显示条目个数,可以通过 `v-model:page-size` 绑定值 | number | - | - |
+| pagination | pagination 的配置,同 el-pagination | object | - | [参考全局配置](../guide/index#全局配置) |
+| height | Table 的高度 | string / number | - | 自动高度 |
+| max-height | Table 的最大高度 | string / number | - | - |
+| stripe | 是否为斑马纹 table | boolean | - | false |
+| border | 是否带有纵向边框 | boolean | - | false |
+| size | Table 的尺寸 | string | medium / small / mini | - |
+| fit | 列的宽度是否自撑开 | boolean | - | true |
+| show-header | 是否显示表头 | boolean | - | true |
+| highlight-current-row | 是否要高亮当前行 | boolean | - | false |
+| current-row-key | 当前行的 key,只写属性 | string / number | - | - |
+| row-class-name | 为行增加 className | Function({row, rowIndex}) / string | - | - |
+| row-style | 为行增加 style | Function({row, rowIndex}) / object | - | - |
+| cell-class-name | 为单元格增加 className | Function({row, column, rowIndex, columnIndex}) / string | - | - |
+| cell-style | 为单元格增加 style | Function({row, column, rowIndex, columnIndex}) / object | - | - |
+| header-row-class-name | 为表头行增加 className | Function({row, rowIndex}) / string | - | - |
+| header-row-style | 为表头行增加 style | Function({row, rowIndex}) / object | - | - |
+| header-cell-class-name | 为表头单元格增加 className | Function({row, column, rowIndex, columnIndex}) / string | - | - |
+| header-cell-style | 为表头单元格增加 style | Function({row, column, rowIndex, columnIndex}) / object | - | - |
+| row-key | 行数据的 Key,使用 reserveSelection 功能时必填 | Function(row) / string | - | - |
+| empty-text | 空数据时显示的文本内容 | string | - | 暂无数据 |
+| default-expand-all | 是否默认展开所有行 | boolean | - | false |
+| expand-row-keys | Table 目前的展开行,与 row-key 配合使用 | array | - | - |
+| default-sort | 默认的排序列的 prop 和顺序 | Object | `order`: ascending, descending | ascending |
+| tooltip-effect | tooltip `effect` 属性 | String | dark / light | - |
+| show-summary | 是否在表尾显示合计行 | Boolean | - | false |
+| sum-text | 合计行第一列的文本 | String | - | 合计 |
+| summary-method | 自定义的合计计算方法 | Function({ columns, data }) | - | - |
+| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | - | - |
+| select-on-indeterminate | 当仅有部分行被选中时,点击表头的多选框时的行为,配合 selection 使用 | boolean | - | true |
+| indent | 展示树形数据时,树节点的缩进 | number | - | 16 |
+| lazy | 是否懒加载子节点数据 | boolean | - | - |
+| load | 加载子节点数据的函数,lazy 为 true 时生效 | Function(row, treeNode, resolve) | - | - |
+| tree-props | 渲染嵌套数据的配置选项 | Object | - | { hasChildren: 'hasChildren', children: 'children' } |
+
+##### 参数
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| :------------------ | :-------------------------------------------------------------------- | :-------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------- |
+| prop | 对应 data 的字段名 (**必填,需要是唯一值**) | string | - | - |
+| label | 显示的标题 | string | - | - |
+| slot | 是否开启自定义插槽功能 | boolean | - | false |
+| hide | 是否在表格中隐藏 | boolean | - | false |
+| children | 实现多级表头 | array | - | - |
+| columnKey | 当前项的 key,使用 filter-change 事件时需要 | string | - | - |
+| width | 对应列的宽度 | string | - | - |
+| minWidth | 对应列的最小宽度 | string | - | - |
+| fixed | 列是否固定,true 表示固定在左侧 | string / boolean | true / left / right | - |
+| renderHeader | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | - | - |
+| sortable | 对应列是否可以排序 | boolean / string | true / false / 'custom' | false |
+| sortMethod | 对数据进行排序的时候使用的方法 | Function(a, b) | - | - |
+| sortBy | 指定数据按照哪个属性进行排序 | string / array / Function(row, index) | - | - |
+| sortOrders | 数据在排序时所使用排序策略的轮转顺序 | array | `ascending` 表示升序,`descending` 表示降序,`null` 表示还原为原始顺序 | ['ascending', 'descending', null] |
+| resizable | 对应列是否可以通过拖动改变宽度,配合 border 使用 | boolean | - | true |
+| formatter | 用来格式化内容 | Function(row, column, cellValue, index) | - | - |
+| showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | Boolean | - | false |
+| align | 对齐方式 | string | left / center / right | left |
+| headerAlign | 表头对齐方式 | string | left / center / right | 同 align |
+| className | 列的 className | string | - | - |
+| labelClassName | 当前列标题的自定义类名 | string | - | - |
+| filters | 数据过滤的选项 | Array[{ text, value }] | - | - |
+| filterPlacement | 过滤弹出框的定位 | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | - |
+| filterMultiple | 数据过滤的选项是否多选 | boolean | - | true |
+| filterMethod | 数据过滤使用的方法 | Function(value, row, column) | - | - |
+| filteredValue | 选中的数据过滤项 | array | - | - |
+| index | 自定义索引,只能够在 index 中配置 | Function(index) / number | - | - |
+| selectable | 这一行的 CheckBox 是否可以勾选,只能够在 selection 中配置 | Function(row, index) | - | - |
+| reserveSelection | 是否保留之前选中的数据(需指定 `row-key`),只能够在 selection 中配置 | boolean | - | false |
+
+##### 事件
+
+| 事件名 | 说明 | 参数 |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
+| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
+| selection-change | 当选择项发生变化时会触发该事件 | selection |
+| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
+| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
+| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
+| cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
+| row-click | 当某一行被点击时会触发该事件 | row, column, event |
+| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, column, event |
+| row-dblclick | 当某一行被双击时会触发该事件 | row, column, event |
+| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
+| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
+| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
+| filter-change | 当表格的筛选条件发生变化的时候会触发该事件,参数的值是一个对象,对象的 key 是 column 的 columnKey,对应的 value 为用户选择的筛选条件的数组。 | filters |
+| current-change | 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
+| header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
+| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded) | row, (expandedRows \| expanded) |
+| size-change | pageSize 改变时会触发 | 每页条数 |
+| current-change | currentPage 改变时会触发 | 当前页 |
+| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
+| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
+
+##### 方法
+
+| 方法名 | 说明 | 参数 |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| clearSelection | 用于多选表格,清空用户的选择 | - |
+| toggleRowSelection | 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | row, selected |
+| toggleAllSelection | 用于多选表格,切换全选和全不选 | - |
+| toggleRowExpansion | 用于可展开表格与树形表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) | row, expanded |
+| setCurrentRow | 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。 | row |
+| clearSort | 用于清空排序条件,数据会恢复成未排序的状态 | - |
+| clearFilter | 不传入参数时用于清空所有过滤条件,数据会恢复成未过滤的状态,也可传入由 columnKey 组成的数组以清除指定列的过滤条件 | columnKey |
+| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法 | - |
+| sort | 手动对 Table 进行排序。参数`prop`属性指定排序列,`order`指定排序顺序。 | prop: string, order: string |
+
+::: tip 提示
+如果使用 `typescript` 可以从组件中导出 `ITableExpose` 提供更好的类型推导
+:::
+
+### 插槽
+
+| name | 说明 |
+| :------------ | :----------------------------------------------------------------------- |
+| - | 在右侧菜单前插入的任意内容 |
+| menu | 表格右侧自定义按钮,参数为 { size, row, column, $index } |
+| expand | 当 expand 为 true 时,配置展开显示的内容,参数为 { row, column, $index } |
+| append | 插入至表格最后一行之后的内容 |
+| [prop] | 当前这列的内容,参数为 { size, row, column, $index } |
+| [prop]-header | 当前这列表头的内容,参数为 { size, column, $index } |
+
+::: tip 提示
+[prop] 为 columns 中定义的 prop
+:::
diff --git a/docs/docs/en-US/guide/home.md b/docs/docs/en-US/guide/home.md
new file mode 100644
index 00000000..0a75d65a
--- /dev/null
+++ b/docs/docs/en-US/guide/home.md
@@ -0,0 +1 @@
+##### 介绍
diff --git a/docs/docs/en-US/guide/index.md b/docs/docs/en-US/guide/index.md
new file mode 100644
index 00000000..d89e87a8
--- /dev/null
+++ b/docs/docs/en-US/guide/index.md
@@ -0,0 +1,5 @@
+##### 安装
+
+```
+npm install layui-vue --save
+```
diff --git a/docs/docs/zh-CN/components/button.md b/docs/docs/zh-CN/components/button.md
new file mode 100644
index 00000000..11fb5515
--- /dev/null
+++ b/docs/docs/zh-CN/components/button.md
@@ -0,0 +1,32 @@
+##### 基础
+
+::: demo 传入 columns 数据,自动生成表格
+
+
+ 原始按钮
+ 默认按钮
+ 百搭按钮
+ 暖色按钮
+ 警告按钮
+ 禁用按钮
+
+
+
+
+:::
+
+#### 插槽
+
+| name | 说明 |
+| :------------ | :----------------------------------------------------------------------- |
+| type | 按钮类型 |
\ No newline at end of file
diff --git a/docs/docs/zh-CN/guide/home.md b/docs/docs/zh-CN/guide/home.md
new file mode 100644
index 00000000..0a75d65a
--- /dev/null
+++ b/docs/docs/zh-CN/guide/home.md
@@ -0,0 +1 @@
+##### 介绍
diff --git a/docs/docs/zh-CN/guide/index.md b/docs/docs/zh-CN/guide/index.md
new file mode 100644
index 00000000..d89e87a8
--- /dev/null
+++ b/docs/docs/zh-CN/guide/index.md
@@ -0,0 +1,5 @@
+##### 安装
+
+```
+npm install layui-vue --save
+```
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..a6b47b89
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/prerender.js b/docs/prerender.js
new file mode 100644
index 00000000..c3224d9e
--- /dev/null
+++ b/docs/prerender.js
@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs')
+const path = require('path')
+
+const toAbsolute = (p) => path.resolve(__dirname, p).replace(/\\/, '/')
+
+const manifest = require('./dist/static/ssr-manifest.json')
+const template = fs.readFileSync(toAbsolute('dist/static/index.html'), 'utf-8')
+const { render } = require('./dist/server/entry-server.js')
+
+const writeFileRecursive = function (path, buffer) {
+ const lastPath = path.substring(0, path.lastIndexOf('/'))
+
+ fs.mkdir(lastPath, { recursive: true }, () => {
+ fs.writeFileSync(path, buffer)
+ })
+}
+
+const fileDisplay = (file) => {
+ fs.readdirSync(toAbsolute(file)).forEach(async (filename) => {
+ const filedir = path.join(file, filename).replace(/\\/, '/')
+
+ if (fs.statSync(toAbsolute(filedir)).isDirectory()) {
+ fileDisplay(filedir)
+ } else {
+ const url = filedir
+ .replace(/^docs/, '')
+ .replace(/\.(vue|md)$/, '')
+ .replace(/index$/, '')
+ .replace(/\/([^/]*)$/, (item) =>
+ item.replace(/\B([A-Z])/g, '-$1').toLowerCase()
+ )
+ const [appHtml, preloadLinks] = await render(url, manifest)
+ const html = template
+ .replace('', preloadLinks)
+ .replace('', appHtml)
+
+ const filePath = `dist/static${url.replace(/\/$/, '/index')}.html`
+ writeFileRecursive(toAbsolute(filePath), html)
+ console.log('pre-rendered:', filePath)
+ }
+ })
+}
+
+fileDisplay('docs')
+
+fs.unlinkSync(toAbsolute('dist/static/ssr-manifest.json'))
diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
new file mode 100644
index 00000000..b2d22043
Binary files /dev/null and b/docs/public/favicon.ico differ
diff --git a/docs/src/App.vue b/docs/src/App.vue
new file mode 100644
index 00000000..98240aef
--- /dev/null
+++ b/docs/src/App.vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/docs/src/components/LayCode.vue b/docs/src/components/LayCode.vue
new file mode 100644
index 00000000..fbbe32e1
--- /dev/null
+++ b/docs/src/components/LayCode.vue
@@ -0,0 +1,152 @@
+
+
+
+
+
+
+
diff --git a/docs/src/entry-client.ts b/docs/src/entry-client.ts
new file mode 100644
index 00000000..d552319c
--- /dev/null
+++ b/docs/src/entry-client.ts
@@ -0,0 +1,7 @@
+import { createApp } from './main'
+
+const { app, router } = createApp()
+
+router.isReady().then(() => {
+ app.mount('#app')
+})
diff --git a/docs/src/entry-server.ts b/docs/src/entry-server.ts
new file mode 100644
index 00000000..f418790e
--- /dev/null
+++ b/docs/src/entry-server.ts
@@ -0,0 +1,51 @@
+import { createApp } from './main'
+import { renderToString } from '@vue/server-renderer'
+
+export async function render(url, manifest): Promise {
+ const { app, router } = createApp()
+
+ // set the router to the desired URL before rendering
+ router.push(url)
+ await router.isReady()
+
+ // passing SSR context object which will be available via useSSRContext()
+ // @vitejs/plugin-vue injects code into a component's setup() that registers
+ // itself on ctx.modules. After the render, ctx.modules would contain all the
+ // components that have been instantiated during this render call.
+ const ctx = {}
+ const html = await renderToString(app, ctx)
+
+ // the SSR manifest generated by Vite contains module -> chunk/asset mapping
+ // which we can then use to determine what files need to be preloaded for this
+ // request.
+ const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
+ return [html, preloadLinks]
+}
+
+function renderPreloadLinks(modules, manifest) {
+ let links = ''
+ const seen = new Set()
+ modules.forEach((id) => {
+ const files = manifest[id]
+ if (files) {
+ files.forEach((file) => {
+ if (!seen.has(file)) {
+ seen.add(file)
+ links += renderPreloadLink(file)
+ }
+ })
+ }
+ })
+ return links
+}
+
+function renderPreloadLink(file) {
+ if (file.endsWith('.js')) {
+ return ``
+ } else if (file.endsWith('.css')) {
+ return ``
+ } else {
+ // TODO
+ return ''
+ }
+}
diff --git a/docs/src/layouts/Layout.vue b/docs/src/layouts/Layout.vue
new file mode 100644
index 00000000..c0747059
--- /dev/null
+++ b/docs/src/layouts/Layout.vue
@@ -0,0 +1,25 @@
+
+
+
+ layui-logo
+
+
+ 布局
+ 按钮
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/src/main.ts b/docs/src/main.ts
new file mode 100644
index 00000000..3f943e0d
--- /dev/null
+++ b/docs/src/main.ts
@@ -0,0 +1,25 @@
+import Layout from './App.vue'
+import { App, createApp as _createApp, createSSRApp } from 'vue'
+import { createRouter } from './router/index'
+import { Router } from 'vue-router'
+import Layui from '/@src/index'
+import LayCode from './components/LayCode.vue'
+import './styles/index.css'
+
+export function createApp(): {
+ app: App
+ router: Router
+} {
+ const app =
+ import.meta.env.MODE === 'production'
+ ? createSSRApp(Layout)
+ : _createApp(Layout)
+ const router = createRouter()
+
+ app
+ .use(router)
+ .component('LayCode', LayCode)
+ .use(Layui)
+
+ return { app, router }
+}
diff --git a/docs/src/plugin/common-plugins.ts b/docs/src/plugin/common-plugins.ts
new file mode 100644
index 00000000..c940c96c
--- /dev/null
+++ b/docs/src/plugin/common-plugins.ts
@@ -0,0 +1,47 @@
+import vue from '@vitejs/plugin-vue'
+import Markdown from 'vite-plugin-md'
+import container from 'markdown-it-container'
+import highlight from './highlight'
+import snippet from './snippet'
+import demo from './demo'
+import createContainer from './create-container'
+import preWrapper from './pre-wrapper'
+import type Token from 'markdown-it/lib/token'
+
+const plugins = [
+ vue({
+ include: [/\.vue$/, /\.md$/],
+ }),
+ Markdown({
+ markdownItOptions: {
+ html: true,
+ linkify: true,
+ typographer: true,
+ highlight,
+ },
+ markdownItSetup(md) {
+ md.use(snippet)
+ .use(preWrapper)
+ .use(container, 'demo', demo)
+ .use(...createContainer('tip', 'TIP'))
+ .use(...createContainer('warning', 'WARNING'))
+ .use(...createContainer('danger', 'WARNING'))
+ .use(container, 'v-pre', {
+ render: (tokens: Token[], idx: number) =>
+ tokens[idx].nesting === 1 ? '\n' : '
\n',
+ })
+ .use(container, 'details', {
+ render: (tokens: Token[], idx: number) => {
+ const info = tokens[idx].info.trim().slice(7).trim() // 7 = 'details'.length
+ return tokens[idx].nesting === 1
+ ? `${
+ info ? `${info}
` : ''
+ }\n`
+ : ' '
+ },
+ })
+ },
+ }),
+]
+
+export default plugins
diff --git a/docs/src/plugin/create-container.ts b/docs/src/plugin/create-container.ts
new file mode 100644
index 00000000..8a403568
--- /dev/null
+++ b/docs/src/plugin/create-container.ts
@@ -0,0 +1,33 @@
+import container from 'markdown-it-container'
+import type Token from 'markdown-it/lib/token'
+
+type ContainerArgs = [
+ typeof container,
+ string,
+ {
+ render(tokens: Token[], idx: number): string
+ }
+]
+
+export default function createContainer(
+ klass: string,
+ defaultTitle: string
+): ContainerArgs {
+ return [
+ container,
+ klass,
+ {
+ render(tokens, idx) {
+ const token = tokens[idx]
+ const info = token.info.trim().slice(klass.length).trim()
+ if (token.nesting === 1) {
+ return `${
+ info || defaultTitle
+ }
\n`
+ } else {
+ return '
\n'
+ }
+ },
+ },
+ ]
+}
diff --git a/docs/src/plugin/demo.ts b/docs/src/plugin/demo.ts
new file mode 100644
index 00000000..588474c9
--- /dev/null
+++ b/docs/src/plugin/demo.ts
@@ -0,0 +1,146 @@
+import markdown from 'markdown-it'
+import highlight from './highlight'
+import type Token from 'markdown-it/lib/token'
+
+/**
+ * Combine the script content
+ * @param {string} script script string
+ */
+function assignScript(script: string) {
+ const dependencies = {} as Record
+ const attrs = {} as Record
+ const content = script
+ // import { ref } from 'vue' -> ''
+ .replace(/import\s?\{.*\}.*/g, (item) => {
+ const key = getInnerString(item.replace(/'/g, '"'), '"', '"')
+ const value = getInnerString(item.replace(/\s+/g, ''), '{', '}')
+ const list = value ? value.split(',') : []
+ if (key && dependencies[key]) {
+ dependencies[key] = dependencies[key].concat(list)
+ } else if (key) {
+ dependencies[key] = list
+ }
+ return ''
+ })
+ /**
+ * const -> let
+ *
+ * const a = -> let a =
+ * const a = -> a =
+ */
+ .replace(/(const|let|var)\s\w*\s?=/g, (item) => {
+ const attr = getInnerString(item, '\\s', '\\s?=')
+ if (attr && !(attr in attrs)) {
+ attrs[attr] = attr
+ return `let ${attr} =`
+ } else {
+ return attr + ' ='
+ }
+ })
+ // Remove extra line breaks
+ .replace(/\n+/gm, '\n')
+ // Combine the import
+ const reImport = Object.keys(dependencies).reduce((all, item) => {
+ const filterAttrs = [...new Set(dependencies[item])]
+ return all + `import {${filterAttrs + ','}} from '${item}';\n`
+ }, '')
+
+ return reImport + content
+}
+
+/**
+ * Extract part of the new string from the middle of the string
+ * @param {string} string string
+ * @param {string} prefix RegExp string
+ * @param {string} postfix RegExp string
+ * @param {string} type g | m | i
+ */
+function getInnerString(
+ string: string,
+ prefix: string,
+ postfix = '',
+ type: 'i' | 'g' | 'm' = 'i'
+): string | undefined {
+ const result = new RegExp(`${prefix}(.*)${postfix}`, type)
+ const match = string.match(result)
+ return match ? match[1].trim() : undefined
+}
+
+let script = '' // Record the `
+ }
+ }
+ }
+
+ return `
+
+ ${description ? `${descTemplate}` : ''}
+ ${highlight(str, 'vue')}
+ `
+ },
+}
diff --git a/docs/src/plugin/highlight.ts b/docs/src/plugin/highlight.ts
new file mode 100644
index 00000000..c16d210c
--- /dev/null
+++ b/docs/src/plugin/highlight.ts
@@ -0,0 +1,46 @@
+// copy from [vitepress](https://github.com/vuejs/vitepress)
+import prism from 'prismjs'
+import loadLanguages from 'prismjs/components/index'
+import escapeHtml from 'escape-html'
+
+// required to make embedded highlighting work...
+loadLanguages(['markup', 'css', 'javascript'])
+
+function wrap(code: string, lang: string): string {
+ if (lang === 'text') {
+ code = escapeHtml(code)
+ }
+ return `${code}
`
+}
+
+export default (str: string, lang: string): string => {
+ if (!lang) {
+ return wrap(str, 'text')
+ }
+ lang = lang.toLowerCase()
+ const rawLang = lang
+ if (lang === 'vue' || lang === 'html') {
+ lang = 'markup'
+ }
+ if (lang === 'md') {
+ lang = 'markdown'
+ }
+ if (lang === 'ts') {
+ lang = 'typescript'
+ }
+ if (lang === 'py') {
+ lang = 'python'
+ }
+ if (!prism.languages[lang]) {
+ try {
+ loadLanguages([lang])
+ } catch (e) {
+ console.warn(lang, e)
+ }
+ }
+ if (prism.languages[lang]) {
+ const code = prism.highlight(str, prism.languages[lang], lang)
+ return wrap(code, rawLang)
+ }
+ return wrap(str, 'text')
+}
diff --git a/docs/src/plugin/pre-wrapper.ts b/docs/src/plugin/pre-wrapper.ts
new file mode 100644
index 00000000..edef8176
--- /dev/null
+++ b/docs/src/plugin/pre-wrapper.ts
@@ -0,0 +1,11 @@
+import MarkdownIt from 'markdown-it'
+
+export default (md: MarkdownIt): void => {
+ const fence = md.renderer.rules.fence!
+ md.renderer.rules.fence = (...args) => {
+ const [tokens, idx] = args
+ const token = tokens[idx]
+ const rawCode = fence(...args)
+ return `${rawCode}
`
+ }
+}
diff --git a/docs/src/plugin/snippet.ts b/docs/src/plugin/snippet.ts
new file mode 100644
index 00000000..730a3686
--- /dev/null
+++ b/docs/src/plugin/snippet.ts
@@ -0,0 +1,49 @@
+// copy from [vitepress](https://github.com/vuejs/vitepress)
+import fs from 'fs'
+import MarkdownIt from 'markdown-it'
+import { RuleBlock } from 'markdown-it/lib/parser_block'
+
+export default (md: MarkdownIt): void => {
+ const parser: RuleBlock = (state, startLine, endLine, silent) => {
+ const CH = '<'.charCodeAt(0)
+ const pos = state.bMarks[startLine] + state.tShift[startLine]
+ const max = state.eMarks[startLine]
+
+ // if it's indented more than 3 spaces, it should be a code block
+ if (state.sCount[startLine] - state.blkIndent >= 4) {
+ return false
+ }
+
+ for (let i = 0; i < 3; ++i) {
+ const ch = state.src.charCodeAt(pos + i)
+ if (ch !== CH || pos + i >= max) return false
+ }
+
+ if (silent) {
+ return true
+ }
+
+ const start = pos + 3
+ const end = state.skipSpacesBack(max, pos)
+ const rawPath = state.src
+ .slice(start, end)
+ .trim()
+ .replace(/^@/, process.cwd())
+ const content = fs.existsSync(rawPath)
+ ? fs.readFileSync(rawPath).toString()
+ : 'Not found: ' + rawPath
+ const meta = rawPath.replace(rawPath, '')
+
+ state.line = startLine + 1
+
+ const token = state.push('fence', 'code', 0)
+ token.info = rawPath.split('.').pop() + meta
+ token.content = content
+ token.markup = '```'
+ token.map = [startLine, startLine + 1]
+
+ return true
+ }
+
+ md.block.ruler.before('fence', 'snippet', parser)
+}
diff --git a/docs/src/router/index.ts b/docs/src/router/index.ts
new file mode 100644
index 00000000..6074573e
--- /dev/null
+++ b/docs/src/router/index.ts
@@ -0,0 +1,20 @@
+import {
+ createMemoryHistory,
+ createRouter as _createRouter,
+ createWebHistory,
+ Router,
+} from 'vue-router'
+import zhCN from './zh-CN'
+import type { IRouteRecordRaw } from '/@src/index'
+
+const routes: IRouteRecordRaw[] = [...zhCN]
+
+export function createRouter(): Router {
+ const baseUrl = import.meta.env.BASE_URL
+ return _createRouter({
+ history: import.meta.env.SSR
+ ? createMemoryHistory(baseUrl)
+ : createWebHistory(baseUrl),
+ routes: routes
+ })
+}
\ No newline at end of file
diff --git a/docs/src/router/zh-CN.ts b/docs/src/router/zh-CN.ts
new file mode 100644
index 00000000..c7152e86
--- /dev/null
+++ b/docs/src/router/zh-CN.ts
@@ -0,0 +1,32 @@
+import BaseLayout from '../layouts/Layout.vue'
+
+const zhCN = [
+ {
+ path: '/',
+ redirect: '/zh-CN/guide/',
+ component: BaseLayout,
+ meta: { title: '指南', icon: 'el-icon-position' },
+ children: [
+ {
+ path: '/zh-CN/guide/',
+ component: () => import('../../docs/zh-CN/guide/home.md'),
+ meta: { title: '介绍' },
+ }
+ ],
+ },
+ {
+ path: '/zh-CN/components/',
+ redirect: '/zh-CN/components/button',
+ component: BaseLayout,
+ meta: { title: '组件', icon: 'el-icon-copy-document' },
+ children: [
+ {
+ path: '/zh-CN/components/button',
+ component: () => import('../../docs/zh-CN/components/button.md'),
+ meta: { title: '按钮' },
+ }
+ ],
+ },
+]
+
+export default zhCN
diff --git a/docs/src/styles/code.css b/docs/src/styles/code.css
new file mode 100644
index 00000000..447ae812
--- /dev/null
+++ b/docs/src/styles/code.css
@@ -0,0 +1,214 @@
+/* copy from [vitepress](https://github.com/vuejs/vitepress) */
+code {
+ margin: 0;
+ border-radius: 3px;
+ padding: 0.25rem 0.5rem;
+ font-family: var(--code-font-family);
+ font-size: 0.85em;
+ color: var(--c-text-light);
+ background-color: var(--code-inline-bg-color);
+}
+
+code .token.deleted {
+ color: #ec5975;
+}
+
+code .token.inserted {
+ color: var(--c-brand);
+}
+
+div[class*='language-'] {
+ position: relative;
+ margin: 1rem -1.5rem;
+ background-color: #fafafa;
+ overflow-x: auto;
+ border: 1px solid #eaeefb;
+}
+
+li > div[class*='language-'] {
+ border-radius: 6px 0 0 6px;
+ margin: 1rem -1.5rem 1rem -1.25rem;
+}
+
+@media (min-width: 420px) {
+ div[class*='language-'] {
+ margin: 1rem 0;
+ border-radius: 6px;
+ }
+
+ li > div[class*='language-'] {
+ margin: 1rem 0 1rem 0rem;
+ border-radius: 6px;
+ }
+}
+
+[class*='language-'] pre,
+[class*='language-'] code {
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+[class*='language-'] pre {
+ position: relative;
+ z-index: 1;
+ margin: 0;
+ padding: 1.25rem 1.5rem;
+ background: transparent;
+ overflow-x: auto;
+}
+
+[class*='language-'] pre p {
+ margin: auto !important;
+}
+
+[class*='language-'] code {
+ padding: 0;
+ line-height: var(--code-line-height);
+ font-size: var(--code-font-size);
+ color: #000;
+ background-color: #fafafa;
+}
+
+/* Line highlighting */
+
+.highlight-lines {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ padding: 1.25rem 0;
+ width: 100%;
+ line-height: var(--code-line-height);
+ font-family: var(--code-font-family);
+ font-size: var(--code-font-size);
+ user-select: none;
+ overflow: hidden;
+}
+
+.highlight-lines .highlighted {
+ background-color: rgba(0, 0, 0, 0.66);
+}
+
+/* Line numbers mode */
+
+div[class*='language-'].line-numbers-mode {
+ padding-left: 3.5rem;
+}
+
+.line-numbers-wrapper {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 3;
+ border-right: 1px solid rgba(0, 0, 0, 0.5);
+ padding: 1.25rem 0;
+ width: 3.5rem;
+ text-align: center;
+ line-height: var(--code-line-height);
+ font-family: var(--code-font-family);
+ font-size: var(--code-font-size);
+ color: #888;
+}
+
+/* Language marker */
+
+[class*='language-']:before {
+ position: absolute;
+ top: 0.6em;
+ right: 1em;
+ z-index: 2;
+ font-size: 0.8rem;
+ color: #888;
+}
+
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ *
+ * @author Rose Pritchard
+ */
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #999;
+}
+
+.token.punctuation {
+ color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+ color: #e2777a;
+}
+
+.token.function-name {
+ color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+ color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+ color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+ color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+ color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+ color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.token.inserted {
+ color: green;
+}
diff --git a/docs/src/styles/custom-blocks.css b/docs/src/styles/custom-blocks.css
new file mode 100644
index 00000000..5feed973
--- /dev/null
+++ b/docs/src/styles/custom-blocks.css
@@ -0,0 +1,71 @@
+.custom-block.tip,
+.custom-block.warning,
+.custom-block.danger {
+ margin: 1rem 0;
+ border-left: 0.3rem solid;
+ padding: 0.1rem 1.5rem;
+ overflow-x: auto;
+ border-radius: 4px;
+}
+
+.custom-block.tip {
+ background-color: #f3f5f7;
+ border-color: #409eff;
+}
+
+.custom-block.warning {
+ border-color: #e7c000;
+ color: #6b5900;
+ background-color: rgba(255, 229, 100, 0.3);
+}
+
+.custom-block.warning .custom-block-title {
+ color: #b29400;
+}
+
+.custom-block.warning a {
+ color: var(--c-text);
+}
+
+.custom-block.danger {
+ border-color: #c00;
+ color: #4d0000;
+ background-color: #ffe6e6;
+}
+
+.custom-block.danger .custom-block-title {
+ color: #900;
+}
+
+.custom-block.danger a {
+ color: var(--c-text);
+}
+
+.custom-block.details {
+ position: relative;
+ display: block;
+ border-radius: 2px;
+ margin: 1.6em 0;
+ padding: 1.6em;
+ background-color: #eee;
+}
+
+.custom-block.details h4 {
+ margin-top: 0;
+}
+
+.custom-block.details figure:last-child,
+.custom-block.details p:last-child {
+ margin-bottom: 0;
+ padding-bottom: 0;
+}
+
+.custom-block.details summary {
+ outline: none;
+ cursor: pointer;
+}
+
+.custom-block-title {
+ margin-bottom: -0.4rem;
+ font-weight: 600;
+}
diff --git a/docs/src/styles/index.css b/docs/src/styles/index.css
new file mode 100644
index 00000000..5221e9cf
--- /dev/null
+++ b/docs/src/styles/index.css
@@ -0,0 +1,4 @@
+@import './code.css';
+@import './custom-blocks.css';
+@import './markdown.css';
+@import './vars.css';
diff --git a/docs/src/styles/markdown.css b/docs/src/styles/markdown.css
new file mode 100644
index 00000000..7397fe02
--- /dev/null
+++ b/docs/src/styles/markdown.css
@@ -0,0 +1,220 @@
+html {
+ line-height: 1.4;
+ font-size: 16px;
+ -webkit-text-size-adjust: 100%;
+}
+
+h4 {
+ font-weight: 700 !important;
+ font-size: 16.8px !important;
+ margin-top: 20px !important;
+ margin-bottom: 20px !important;
+}
+
+h5 {
+ font-weight: 700;
+ font-size: 16.8px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ color: #303133;
+ line-height: 1.25;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b {
+ font-weight: 600;
+}
+
+h1:hover .header-anchor,
+h1:focus .header-anchor,
+h2:hover .header-anchor,
+h2:focus .header-anchor,
+h3:hover .header-anchor,
+h3:focus .header-anchor,
+h4:hover .header-anchor,
+h4:focus .header-anchor,
+h5:hover .header-anchor,
+h5:focus .header-anchor,
+h6:hover .header-anchor,
+h6:focus .header-anchor {
+ opacity: 1;
+}
+
+h1 {
+ margin-top: 1.5rem;
+ font-size: 1.9rem;
+}
+
+@media screen and (min-width: 420px) {
+ h1 {
+ font-size: 2.2rem;
+ }
+}
+
+h2 {
+ margin-top: 2.25rem;
+ margin-bottom: 1.25rem;
+ border-bottom: 1px solid var(--c-divider);
+ padding-bottom: 0.3rem;
+ line-height: 1.25;
+ font-size: 1.65rem;
+ /* overflow-x: auto; */
+}
+
+h2 + h3 {
+ margin-top: 1.5rem;
+}
+
+h3 {
+ margin-top: 2rem;
+ font-size: 1.35rem;
+}
+
+h4 {
+ font-size: 1.15rem;
+}
+
+h1 {
+ margin-top: 4px !important;
+ margin-bottom: 22px !important;
+ color: #000000d9 !important;
+ font-weight: 500 !important;
+ font-size: 20px !important;
+ font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
+ helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
+ segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
+ line-height: 38px;
+}
+
+h2 {
+ margin-top: 4px !important;
+ margin-bottom: 16px !important;
+ color: #000000d9 !important;
+ font-weight: 500 !important;
+ font-size: 16px !important;
+ border-bottom: 0px;
+ font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
+ helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
+ segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
+ line-height: 38px;
+}
+
+p,
+ol,
+ul {
+ margin: 1rem 0;
+ line-height: 1.7;
+}
+
+p {
+ color: #454d64 !important;
+ margin-top: 20px !important;
+ font-size: 14px !important;
+}
+
+a,
+area,
+button,
+[role='button'],
+input,
+label,
+select,
+summary,
+textarea {
+ touch-action: manipulation;
+}
+
+a {
+ text-decoration: none;
+ color: var(--c-brand);
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+a.header-anchor {
+ float: left;
+ margin-top: 0.125em;
+ margin-left: -0.87em;
+ padding-right: 0.23em;
+ font-size: 0.85em;
+ opacity: 0;
+}
+
+a.header-anchor:hover,
+a.header-anchor:focus {
+ text-decoration: none;
+}
+
+figure {
+ margin: 0;
+}
+
+img {
+ max-width: 100%;
+}
+
+ul,
+ol {
+ padding-left: 1.25em;
+}
+
+li > ul,
+li > ol {
+ margin: 0;
+}
+
+blockquote {
+ margin: 1rem 0;
+ border-left: 0.2rem solid #dfe2e5;
+ padding: 0.25rem 0 0.25rem 1rem;
+ font-size: 1rem;
+ color: #999;
+}
+
+blockquote > p {
+ margin: 0;
+}
+
+form {
+ margin: 0;
+}
+
+table {
+ width: 100%; /*表格宽度*/
+ border-collapse: collapse; /*使用单一线条的边框*/
+ empty-cells: show; /*单元格无内容依旧绘制边框*/
+}
+
+table th,
+table td {
+ font-size: 14px;
+ color: #606266;
+ height: 50px; /*统一每一行的默认高度*/
+ border-top: 1px solid whitesmoke; /*内部边框样式*/
+ padding: 0 10px; /*内边距*/
+}
+
+table tr:hover {
+ background: #efefef;
+}
+table th {
+ white-space: nowrap; /*表头内容强制在一行显示*/
+}
+table td {
+ white-space: nowrap;
+}
diff --git a/docs/src/styles/vars.css b/docs/src/styles/vars.css
new file mode 100644
index 00000000..701a36fd
--- /dev/null
+++ b/docs/src/styles/vars.css
@@ -0,0 +1,52 @@
+/* TODO: rebuild... copy from [vitepress](https://github.com/vuejs/vitepress) */
+:root {
+ --c-white: #ffffff;
+ --c-black: #000000;
+
+ --c-divider-light: rgba(60, 60, 67, 0.12);
+ --c-divider-dark: rgba(84, 84, 88, 0.48);
+
+ --c-text-light-1: #2c3e50;
+ --c-text-light-2: #476582;
+ --c-text-light-3: #90a4b7;
+
+ --c-brand: #409eff;
+ --c-brand-light: #4abf8a;
+
+ /**
+ * Typography
+ * --------------------------------------------------------------------- */
+
+ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+
+ /**
+ * Shadows
+ * --------------------------------------------------------------------- */
+
+ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+ --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+ --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+ --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+ --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+/** Fallback Styles */
+:root {
+ --c-divider: var(--c-divider-light);
+
+ --c-text: var(--c-text-light-1);
+ --c-text-light: var(--c-text-light-2);
+ --c-text-lighter: var(--c-text-light-3);
+
+ --c-bg: var(--c-white);
+
+ --code-line-height: 24px;
+ --code-font-family: var(--font-family-mono);
+ --code-font-size: 14px;
+ --code-inline-bg-color: rgba(27, 31, 35, 0.05);
+ --code-bg-color: #282c34;
+}
diff --git a/docs/src/tsconfig.json b/docs/src/tsconfig.json
new file mode 100644
index 00000000..f42260bf
--- /dev/null
+++ b/docs/src/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "../../tsconfig.json",
+ "include": [".", "../../shims-vue.d.ts"]
+}
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
new file mode 100644
index 00000000..bb79e7d7
--- /dev/null
+++ b/docs/vite.config.ts
@@ -0,0 +1,13 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import plugins from './src/plugin/common-plugins'
+
+export default defineConfig({
+ base: '/layui-vue/',
+ resolve: {
+ alias: {
+ '/@src': path.resolve(__dirname, '../src'),
+ },
+ },
+ plugins,
+})
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 00000000..eb9a2f41
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,27 @@
+module.exports = {
+ roots: ['/test'],
+ preset: 'ts-jest',
+ testEnvironment: 'jsdom',
+ moduleFileExtensions: ['ts', 'vue', 'js', 'jsx', 'tsx', 'json', 'node'],
+ transformIgnorePatterns: ['node_modules/(?!(@vue/shared|element-plus)/)'],
+ moduleNameMapper: { '\\.css$': '/test/__mocks__/css.ts' },
+ transform: {
+ '^.+\\.vue$': 'vue-jest',
+ '^.+\\.(t|j)sx?$': [
+ 'babel-jest',
+ {
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ targets: {
+ node: 'current',
+ },
+ },
+ ],
+ '@babel/preset-typescript',
+ ],
+ },
+ ],
+ },
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..e6a76176
--- /dev/null
+++ b/package.json
@@ -0,0 +1,98 @@
+{
+ "name": "layui-vue",
+ "version": "0.3.7",
+ "description": "a component library for Vue 3 base on layui-vue",
+ "main": "lib/layui-vue.umd.js",
+ "module": "lib/layui-vue.es.js",
+ "exports": {
+ ".": {
+ "import": "./lib/layui-vue.es.js",
+ "require": "./lib/layui-vue.umd.js"
+ },
+ "./lib/": "./lib/"
+ },
+ "types": "types/index.d.ts",
+ "style": "lib/style.css",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build --emptyOutDir && npm run build:helper && npm run build:types",
+ "build:types": "rimraf types && tsc -d",
+ "build:helper": "node .helperrc.js",
+ "build:docs": "vite build docs",
+ "test": "jest",
+ "lint": "eslint . --fix --ext .ts,.vue,.js --ignore-pattern \"/lib/\" --ignore-pattern \"/types/\"",
+ "prettier": "prettier --check --write --ignore-unknown \"{example,src,docs,test}/**\""
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://gitee.com/Jmysy/layui-vue"
+ },
+ "keywords": [
+ "layui-vue",
+ "layui",
+ "vue"
+ ],
+ "author": "<就眠仪式 jmys1992@gmail.com>",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://gitee.com/Jmysy/layui-vue/issues"
+ },
+ "homepage": "https://gitee.com/Jmysy/layui-vue/blob/master/README.md",
+ "peerDependencies": {
+ "vue": "^3.1.2",
+ "vue-router": "^4.0.10"
+ },
+ "dependencies": {
+ "vue": "^3.1.2",
+ "vue-router": "^4.0.10"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.14.0",
+ "@babel/preset-env": "^7.14.0",
+ "@babel/preset-typescript": "^7.13.0",
+ "@types/jest": "^26.0.23",
+ "@types/markdown-it": "^12.0.1",
+ "@types/markdown-it-container": "^2.0.3",
+ "@typescript-eslint/eslint-plugin": "^4.22.0",
+ "@typescript-eslint/parser": "^4.22.0",
+ "@vitejs/plugin-vue": "^1.2.2",
+ "@vue/compiler-sfc": "^3.1.2",
+ "@vue/server-renderer": "^3.1.1",
+ "@vue/test-utils": "^2.0.0-rc.6",
+ "babel-jest": "^26.6.3",
+ "components-helper": "^1.0.3",
+ "escape-html": "^1.0.3",
+ "eslint": "^7.25.0",
+ "eslint-plugin-prettier": "^3.4.0",
+ "eslint-plugin-vue": "^7.9.0",
+ "husky": "^4.3.6",
+ "jest": "^26.6.3",
+ "lint-staged": "^10.5.4",
+ "markdown-it-container": "^3.0.0",
+ "postcss": "^8.2.13",
+ "postcss-preset-env": "^6.7.0",
+ "prettier": "2.2.1",
+ "prismjs": "^1.23.0",
+ "rimraf": "^3.0.2",
+ "rollup-plugin-babel": "^4.4.0",
+ "ts-jest": "^26.5.5",
+ "typescript": "^4.2.4",
+ "vite": "2.3.7",
+ "vite-plugin-md": "^0.6.3",
+ "vue-jest": "^5.0.0-alpha.8"
+ },
+ "vetur": {
+ "tags": "lib/tags.json",
+ "attributes": "lib/attributes.json"
+ },
+ "web-types": "lib/web-types.json",
+ "files": [
+ "lib",
+ "types"
+ ],
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ }
+}
diff --git a/shims-vue.d.ts b/shims-vue.d.ts
new file mode 100644
index 00000000..94bb18ed
--- /dev/null
+++ b/shims-vue.d.ts
@@ -0,0 +1,25 @@
+declare module '*.vue' {
+ import { DefineComponent } from 'vue'
+ const comp: DefineComponent
+ export default comp
+}
+
+declare module '*.md' {
+ import { DefineComponent } from 'vue'
+ const comp: DefineComponent
+ export default comp
+}
+
+declare module 'prismjs'
+declare module 'prismjs/components/index'
+declare module 'escape-html'
+
+interface ImportMeta {
+ env: {
+ MODE: string
+ BASE_URL: string
+ PROD: boolean
+ DEV: boolean
+ SSR: boolean
+ }
+}
diff --git a/src/css/layui.css b/src/css/layui.css
new file mode 100644
index 00000000..a10e959e
--- /dev/null
+++ b/src/css/layui.css
@@ -0,0 +1,6593 @@
+.layui-inline,
+img {
+ display: inline-block;
+ vertical-align: middle
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 400
+}
+
+a,
+body {
+ color: #333
+}
+
+.layui-edge,
+.layui-header,
+.layui-inline,
+.layui-main {
+ position: relative
+}
+
+.layui-edge,
+hr {
+ height: 0;
+ overflow: hidden
+}
+
+.layui-layout-body,
+.layui-side,
+.layui-side-scroll {
+ overflow-x: hidden
+}
+
+.layui-edge,
+.layui-elip,
+hr {
+ overflow: hidden
+}
+
+.layui-btn,
+.layui-edge,
+.layui-inline,
+img {
+ vertical-align: middle
+}
+
+.layui-btn,
+.layui-disabled,
+.layui-icon,
+.layui-unselect {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none
+}
+
+.layui-elip,
+.layui-form-checkbox span,
+.layui-form-pane .layui-form-label {
+ text-overflow: ellipsis;
+ white-space: nowrap
+}
+
+blockquote,
+body,
+button,
+dd,
+div,
+dl,
+dt,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+li,
+ol,
+p,
+pre,
+td,
+textarea,
+th,
+ul {
+ margin: 0;
+ padding: 0;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+}
+
+a:active,
+a:hover {
+ outline: 0
+}
+
+img {
+ border: none
+}
+
+li {
+ list-style: none
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0
+}
+
+h4,
+h5,
+h6 {
+ font-size: 100%
+}
+
+button,
+input,
+optgroup,
+option,
+select,
+textarea {
+ font-family: inherit;
+ font-size: inherit;
+ font-style: inherit;
+ font-weight: inherit;
+ outline: 0
+}
+
+pre {
+ white-space: pre-wrap;
+ white-space: -moz-pre-wrap;
+ white-space: -pre-wrap;
+ white-space: -o-pre-wrap;
+ word-wrap: break-word
+}
+
+body {
+ line-height: 1.6;
+ color: rgba(0, 0, 0, .85);
+ font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif
+}
+
+hr {
+ line-height: 0;
+ margin: 10px 0;
+ padding: 0;
+ border: none !important;
+ border-bottom: 1px solid #eee !important;
+ clear: both;
+ background: 0 0
+}
+
+a {
+ text-decoration: none
+}
+
+a:hover {
+ color: #777
+}
+
+a cite {
+ font-style: normal;
+ *cursor: pointer
+}
+
+.layui-border-box,
+.layui-border-box * {
+ box-sizing: border-box
+}
+
+.layui-box,
+.layui-box * {
+ box-sizing: content-box
+}
+
+.layui-clear {
+ clear: both;
+ *zoom: 1
+}
+
+.layui-clear:after {
+ content: '\20';
+ clear: both;
+ *zoom: 1;
+ display: block;
+ height: 0
+}
+
+.layui-inline {
+ *display: inline;
+ *zoom: 1
+}
+
+.layui-btn,
+.layui-btn-group,
+.layui-edge {
+ display: inline-block
+}
+
+.layui-inline-container>.layui-inline {
+ margin-right: 10px;
+ margin-bottom: 10px
+}
+
+.layui-edge {
+ width: 0;
+ border-width: 6px;
+ border-style: dashed;
+ border-color: transparent
+}
+
+.layui-edge-top {
+ top: -4px;
+ border-bottom-color: #999;
+ border-bottom-style: solid
+}
+
+.layui-edge-right {
+ border-left-color: #999;
+ border-left-style: solid
+}
+
+.layui-edge-bottom {
+ top: 2px;
+ border-top-color: #999;
+ border-top-style: solid
+}
+
+.layui-edge-left {
+ border-right-color: #999;
+ border-right-style: solid
+}
+
+.layui-disabled,
+.layui-disabled:hover {
+ color: #d2d2d2 !important;
+ cursor: not-allowed !important
+}
+
+.layui-circle {
+ border-radius: 100%
+}
+
+.layui-show {
+ display: block !important
+}
+
+.layui-hide {
+ display: none !important
+}
+
+.layui-show-v {
+ visibility: visible !important
+}
+
+.layui-hide-v {
+ visibility: hidden !important
+}
+
+@font-face {
+ font-family: layui-icon;
+ src: url(../font/iconfont.eot?t=270);
+ src: url(../font/iconfont.eot?t=270#iefix) format('embedded-opentype'), url(../font/iconfont.woff2?t=270) format('woff2'), url(../font/iconfont.woff?t=270) format('woff'), url(../font/iconfont.ttf?t=270) format('truetype'), url(../font/iconfont.svg?t=270#layui-icon) format('svg')
+}
+
+.layui-icon {
+ font-family: layui-icon !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale
+}
+
+.layui-icon-eye:before {
+ content: "\e695"
+}
+
+.layui-icon-eye-invisible:before {
+ content: "\e696"
+}
+
+.layui-icon-backspace:before {
+ content: "\e694"
+}
+
+.layui-icon-help-circle:before {
+ content: "\e77c"
+}
+
+.layui-icon-tips-fill:before {
+ content: "\eb2e"
+}
+
+.layui-icon-test:before {
+ content: "\e692"
+}
+
+.layui-icon-clear:before {
+ content: "\e788"
+}
+
+.layui-icon-keyboard:before {
+ content: "\e693"
+}
+
+.layui-icon-heart-fill:before {
+ content: "\e68f"
+}
+
+.layui-icon-light:before {
+ content: "\e748"
+}
+
+.layui-icon-music:before {
+ content: "\e690"
+}
+
+.layui-icon-time:before {
+ content: "\e68d"
+}
+
+.layui-icon-ie:before {
+ content: "\e7bb"
+}
+
+.layui-icon-firefox:before {
+ content: "\e686"
+}
+
+.layui-icon-at:before {
+ content: "\e687"
+}
+
+.layui-icon-bluetooth:before {
+ content: "\e689"
+}
+
+.layui-icon-chrome:before {
+ content: "\e68a"
+}
+
+.layui-icon-edge:before {
+ content: "\e68b"
+}
+
+.layui-icon-heart:before {
+ content: "\e68c"
+}
+
+.layui-icon-key:before {
+ content: "\e683"
+}
+
+.layui-icon-android:before {
+ content: "\e684"
+}
+
+.layui-icon-mike:before {
+ content: "\e6dc"
+}
+
+.layui-icon-mute:before {
+ content: "\e685"
+}
+
+.layui-icon-gift:before {
+ content: "\e627"
+}
+
+.layui-icon-windows:before {
+ content: "\e67f"
+}
+
+.layui-icon-ios:before {
+ content: "\e680"
+}
+
+.layui-icon-logout:before {
+ content: "\e682"
+}
+
+.layui-icon-wifi:before {
+ content: "\e7e0"
+}
+
+.layui-icon-rss:before {
+ content: "\e808"
+}
+
+.layui-icon-email:before {
+ content: "\e618"
+}
+
+.layui-icon-reduce-circle:before {
+ content: "\e616"
+}
+
+.layui-icon-transfer:before {
+ content: "\e691"
+}
+
+.layui-icon-service:before {
+ content: "\e626"
+}
+
+.layui-icon-addition:before {
+ content: "\e624"
+}
+
+.layui-icon-subtraction:before {
+ content: "\e67e"
+}
+
+.layui-icon-slider:before {
+ content: "\e714"
+}
+
+.layui-icon-print:before {
+ content: "\e66d"
+}
+
+.layui-icon-export:before {
+ content: "\e67d"
+}
+
+.layui-icon-cols:before {
+ content: "\e610"
+}
+
+.layui-icon-screen-full:before {
+ content: "\e622"
+}
+
+.layui-icon-screen-restore:before {
+ content: "\e758"
+}
+
+.layui-icon-rate-half:before {
+ content: "\e6c9"
+}
+
+.layui-icon-rate-solid:before {
+ content: "\e67a"
+}
+
+.layui-icon-rate:before {
+ content: "\e67b"
+}
+
+.layui-icon-cellphone:before {
+ content: "\e678"
+}
+
+.layui-icon-vercode:before {
+ content: "\e679"
+}
+
+.layui-icon-login-weibo:before {
+ content: "\e675"
+}
+
+.layui-icon-login-qq:before {
+ content: "\e676"
+}
+
+.layui-icon-login-wechat:before {
+ content: "\e677"
+}
+
+.layui-icon-username:before {
+ content: "\e66f"
+}
+
+.layui-icon-password:before {
+ content: "\e673"
+}
+
+.layui-icon-refresh-3:before {
+ content: "\e9aa"
+}
+
+.layui-icon-auz:before {
+ content: "\e672"
+}
+
+.layui-icon-shrink-right:before {
+ content: "\e668"
+}
+
+.layui-icon-spread-left:before {
+ content: "\e66b"
+}
+
+.layui-icon-snowflake:before {
+ content: "\e6b1"
+}
+
+.layui-icon-tips:before {
+ content: "\e702"
+}
+
+.layui-icon-note:before {
+ content: "\e66e"
+}
+
+.layui-icon-senior:before {
+ content: "\e674"
+}
+
+.layui-icon-refresh-1:before {
+ content: "\e666"
+}
+
+.layui-icon-refresh:before {
+ content: "\e669"
+}
+
+.layui-icon-flag:before {
+ content: "\e66c"
+}
+
+.layui-icon-theme:before {
+ content: "\e66a"
+}
+
+.layui-icon-notice:before {
+ content: "\e667"
+}
+
+.layui-icon-console:before {
+ content: "\e665"
+}
+
+.layui-icon-website:before {
+ content: "\e7ae"
+}
+
+.layui-icon-face-surprised:before {
+ content: "\e664"
+}
+
+.layui-icon-set:before {
+ content: "\e716"
+}
+
+.layui-icon-template:before {
+ content: "\e663"
+}
+
+.layui-icon-app:before {
+ content: "\e653"
+}
+
+.layui-icon-template-1:before {
+ content: "\e656"
+}
+
+.layui-icon-home:before {
+ content: "\e68e"
+}
+
+.layui-icon-female:before {
+ content: "\e661"
+}
+
+.layui-icon-male:before {
+ content: "\e662"
+}
+
+.layui-icon-tread:before {
+ content: "\e6c5"
+}
+
+.layui-icon-praise:before {
+ content: "\e6c6"
+}
+
+.layui-icon-rmb:before {
+ content: "\e65e"
+}
+
+.layui-icon-more:before {
+ content: "\e65f"
+}
+
+.layui-icon-camera:before {
+ content: "\e660"
+}
+
+.layui-icon-cart-simple:before {
+ content: "\e698"
+}
+
+.layui-icon-face-cry:before {
+ content: "\e69c"
+}
+
+.layui-icon-face-smile:before {
+ content: "\e6af"
+}
+
+.layui-icon-survey:before {
+ content: "\e6b2"
+}
+
+.layui-icon-read:before {
+ content: "\e705"
+}
+
+.layui-icon-location:before {
+ content: "\e715"
+}
+
+.layui-icon-dollar:before {
+ content: "\e659"
+}
+
+.layui-icon-diamond:before {
+ content: "\e735"
+}
+
+.layui-icon-return:before {
+ content: "\e65c"
+}
+
+.layui-icon-camera-fill:before {
+ content: "\e65d"
+}
+
+.layui-icon-fire:before {
+ content: "\e756"
+}
+
+.layui-icon-more-vertical:before {
+ content: "\e671"
+}
+
+.layui-icon-cart:before {
+ content: "\e657"
+}
+
+.layui-icon-star-fill:before {
+ content: "\e658"
+}
+
+.layui-icon-prev:before {
+ content: "\e65a"
+}
+
+.layui-icon-next:before {
+ content: "\e65b"
+}
+
+.layui-icon-upload:before {
+ content: "\e67c"
+}
+
+.layui-icon-upload-drag:before {
+ content: "\e681"
+}
+
+.layui-icon-user:before {
+ content: "\e770"
+}
+
+.layui-icon-file-b:before {
+ content: "\e655"
+}
+
+.layui-icon-component:before {
+ content: "\e857"
+}
+
+.layui-icon-find-fill:before {
+ content: "\e670"
+}
+
+.layui-icon-loading:before {
+ content: "\e63d"
+}
+
+.layui-icon-loading-1:before {
+ content: "\e63e"
+}
+
+.layui-icon-add-1:before {
+ content: "\e654"
+}
+
+.layui-icon-pause:before {
+ content: "\e651"
+}
+
+.layui-icon-play:before {
+ content: "\e652"
+}
+
+.layui-icon-video:before {
+ content: "\e6ed"
+}
+
+.layui-icon-headset:before {
+ content: "\e6fc"
+}
+
+.layui-icon-voice:before {
+ content: "\e688"
+}
+
+.layui-icon-speaker:before {
+ content: "\e645"
+}
+
+.layui-icon-fonts-del:before {
+ content: "\e64f"
+}
+
+.layui-icon-fonts-html:before {
+ content: "\e64b"
+}
+
+.layui-icon-fonts-code:before {
+ content: "\e64e"
+}
+
+.layui-icon-fonts-strong:before {
+ content: "\e62b"
+}
+
+.layui-icon-unlink:before {
+ content: "\e64d"
+}
+
+.layui-icon-picture:before {
+ content: "\e64a"
+}
+
+.layui-icon-link:before {
+ content: "\e64c"
+}
+
+.layui-icon-face-smile-b:before {
+ content: "\e650"
+}
+
+.layui-icon-align-center:before {
+ content: "\e647"
+}
+
+.layui-icon-align-right:before {
+ content: "\e648"
+}
+
+.layui-icon-align-left:before {
+ content: "\e649"
+}
+
+.layui-icon-fonts-u:before {
+ content: "\e646"
+}
+
+.layui-icon-fonts-i:before {
+ content: "\e644"
+}
+
+.layui-icon-tabs:before {
+ content: "\e62a"
+}
+
+.layui-icon-circle:before {
+ content: "\e63f"
+}
+
+.layui-icon-radio:before {
+ content: "\e643"
+}
+
+.layui-icon-share:before {
+ content: "\e641"
+}
+
+.layui-icon-edit:before {
+ content: "\e642"
+}
+
+.layui-icon-delete:before {
+ content: "\e640"
+}
+
+.layui-icon-engine:before {
+ content: "\e628"
+}
+
+.layui-icon-chart-screen:before {
+ content: "\e629"
+}
+
+.layui-icon-chart:before {
+ content: "\e62c"
+}
+
+.layui-icon-table:before {
+ content: "\e62d"
+}
+
+.layui-icon-tree:before {
+ content: "\e62e"
+}
+
+.layui-icon-upload-circle:before {
+ content: "\e62f"
+}
+
+.layui-icon-templeate-1:before {
+ content: "\e630"
+}
+
+.layui-icon-util:before {
+ content: "\e631"
+}
+
+.layui-icon-layouts:before {
+ content: "\e632"
+}
+
+.layui-icon-prev-circle:before {
+ content: "\e633"
+}
+
+.layui-icon-carousel:before {
+ content: "\e634"
+}
+
+.layui-icon-code-circle:before {
+ content: "\e635"
+}
+
+.layui-icon-water:before {
+ content: "\e636"
+}
+
+.layui-icon-date:before {
+ content: "\e637"
+}
+
+.layui-icon-layer:before {
+ content: "\e638"
+}
+
+.layui-icon-fonts-clear:before {
+ content: "\e639"
+}
+
+.layui-icon-dialogue:before {
+ content: "\e63a"
+}
+
+.layui-icon-cellphone-fine:before {
+ content: "\e63b"
+}
+
+.layui-icon-form:before {
+ content: "\e63c"
+}
+
+.layui-icon-file:before {
+ content: "\e621"
+}
+
+.layui-icon-triangle-r:before {
+ content: "\e623"
+}
+
+.layui-icon-triangle-d:before {
+ content: "\e625"
+}
+
+.layui-icon-set-sm:before {
+ content: "\e620"
+}
+
+.layui-icon-add-circle:before {
+ content: "\e61f"
+}
+
+.layui-icon-layim-download:before {
+ content: "\e61e"
+}
+
+.layui-icon-layim-uploadfile:before {
+ content: "\e61d"
+}
+
+.layui-icon-404:before {
+ content: "\e61c"
+}
+
+.layui-icon-about:before {
+ content: "\e60b"
+}
+
+.layui-icon-layim-theme:before {
+ content: "\e61b"
+}
+
+.layui-icon-down:before {
+ content: "\e61a"
+}
+
+.layui-icon-up:before {
+ content: "\e619"
+}
+
+.layui-icon-circle-dot:before {
+ content: "\e617"
+}
+
+.layui-icon-set-fill:before {
+ content: "\e614"
+}
+
+.layui-icon-search:before {
+ content: "\e615"
+}
+
+.layui-icon-friends:before {
+ content: "\e612"
+}
+
+.layui-icon-group:before {
+ content: "\e613"
+}
+
+.layui-icon-reply-fill:before {
+ content: "\e611"
+}
+
+.layui-icon-menu-fill:before {
+ content: "\e60f"
+}
+
+.layui-icon-face-smile-fine:before {
+ content: "\e60c"
+}
+
+.layui-icon-picture-fine:before {
+ content: "\e60d"
+}
+
+.layui-icon-log:before {
+ content: "\e60e"
+}
+
+.layui-icon-list:before {
+ content: "\e60a"
+}
+
+.layui-icon-release:before {
+ content: "\e609"
+}
+
+.layui-icon-add-circle-fine:before {
+ content: "\e608"
+}
+
+.layui-icon-ok:before {
+ content: "\e605"
+}
+
+.layui-icon-help:before {
+ content: "\e607"
+}
+
+.layui-icon-chat:before {
+ content: "\e606"
+}
+
+.layui-icon-top:before {
+ content: "\e604"
+}
+
+.layui-icon-right:before {
+ content: "\e602"
+}
+
+.layui-icon-left:before {
+ content: "\e603"
+}
+
+.layui-icon-star:before {
+ content: "\e600"
+}
+
+.layui-icon-download-circle:before {
+ content: "\e601"
+}
+
+.layui-icon-close:before {
+ content: "\1006"
+}
+
+.layui-icon-close-fill:before {
+ content: "\1007"
+}
+
+.layui-icon-ok-circle:before {
+ content: "\1005"
+}
+
+.layui-main {
+ width: 1140px;
+ margin: 0 auto
+}
+
+.layui-header {
+ z-index: 1000;
+ height: 60px
+}
+
+.layui-header a:hover {
+ transition: all .5s;
+ -webkit-transition: all .5s
+}
+
+.layui-side {
+ position: fixed;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 999;
+ width: 200px
+}
+
+.layui-side-scroll {
+ position: relative;
+ width: 220px;
+ height: 100%
+}
+
+.layui-body {
+ position: relative;
+ left: 200px;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 900;
+ width: auto;
+ box-sizing: border-box
+}
+
+.layui-layout-admin .layui-header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: #23262E
+}
+
+.layui-layout-admin .layui-side {
+ top: 60px;
+ width: 200px;
+ overflow-x: hidden
+}
+
+.layui-layout-admin .layui-body {
+ position: absolute;
+ top: 60px;
+ padding-bottom: 44px
+}
+
+.layui-layout-admin .layui-main {
+ width: auto;
+ margin: 0 15px
+}
+
+.layui-layout-admin .layui-footer {
+ position: fixed;
+ left: 200px;
+ right: 0;
+ bottom: 0;
+ z-index: 990;
+ height: 44px;
+ line-height: 44px;
+ padding: 0 15px;
+ box-shadow: -1px 0 4px rgb(0 0 0 / 12%);
+ background-color: #FAFAFA
+}
+
+.layui-layout-admin .layui-logo {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 200px;
+ height: 100%;
+ line-height: 60px;
+ text-align: center;
+ color: #009688;
+ font-size: 16px;
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%)
+}
+
+.layui-layout-admin .layui-header .layui-nav {
+ background: 0 0
+}
+
+.layui-layout-left {
+ position: absolute !important;
+ left: 200px;
+ top: 0
+}
+
+.layui-layout-right {
+ position: absolute !important;
+ right: 0;
+ top: 0
+}
+
+.layui-container {
+ position: relative;
+ margin: 0 auto;
+ padding: 0 15px;
+ box-sizing: border-box
+}
+
+.layui-fluid {
+ position: relative;
+ margin: 0 auto;
+ padding: 0 15px
+}
+
+.layui-row:after,
+.layui-row:before {
+ content: "";
+ display: block;
+ clear: both
+}
+
+.layui-col-lg1,
+.layui-col-lg10,
+.layui-col-lg11,
+.layui-col-lg12,
+.layui-col-lg2,
+.layui-col-lg3,
+.layui-col-lg4,
+.layui-col-lg5,
+.layui-col-lg6,
+.layui-col-lg7,
+.layui-col-lg8,
+.layui-col-lg9,
+.layui-col-md1,
+.layui-col-md10,
+.layui-col-md11,
+.layui-col-md12,
+.layui-col-md2,
+.layui-col-md3,
+.layui-col-md4,
+.layui-col-md5,
+.layui-col-md6,
+.layui-col-md7,
+.layui-col-md8,
+.layui-col-md9,
+.layui-col-sm1,
+.layui-col-sm10,
+.layui-col-sm11,
+.layui-col-sm12,
+.layui-col-sm2,
+.layui-col-sm3,
+.layui-col-sm4,
+.layui-col-sm5,
+.layui-col-sm6,
+.layui-col-sm7,
+.layui-col-sm8,
+.layui-col-sm9,
+.layui-col-xs1,
+.layui-col-xs10,
+.layui-col-xs11,
+.layui-col-xs12,
+.layui-col-xs2,
+.layui-col-xs3,
+.layui-col-xs4,
+.layui-col-xs5,
+.layui-col-xs6,
+.layui-col-xs7,
+.layui-col-xs8,
+.layui-col-xs9 {
+ position: relative;
+ display: block;
+ box-sizing: border-box
+}
+
+.layui-col-xs1,
+.layui-col-xs10,
+.layui-col-xs11,
+.layui-col-xs12,
+.layui-col-xs2,
+.layui-col-xs3,
+.layui-col-xs4,
+.layui-col-xs5,
+.layui-col-xs6,
+.layui-col-xs7,
+.layui-col-xs8,
+.layui-col-xs9 {
+ float: left
+}
+
+.layui-col-xs1 {
+ width: 8.33333333%
+}
+
+.layui-col-xs2 {
+ width: 16.66666667%
+}
+
+.layui-col-xs3 {
+ width: 25%
+}
+
+.layui-col-xs4 {
+ width: 33.33333333%
+}
+
+.layui-col-xs5 {
+ width: 41.66666667%
+}
+
+.layui-col-xs6 {
+ width: 50%
+}
+
+.layui-col-xs7 {
+ width: 58.33333333%
+}
+
+.layui-col-xs8 {
+ width: 66.66666667%
+}
+
+.layui-col-xs9 {
+ width: 75%
+}
+
+.layui-col-xs10 {
+ width: 83.33333333%
+}
+
+.layui-col-xs11 {
+ width: 91.66666667%
+}
+
+.layui-col-xs12 {
+ width: 100%
+}
+
+.layui-col-xs-offset1 {
+ margin-left: 8.33333333%
+}
+
+.layui-col-xs-offset2 {
+ margin-left: 16.66666667%
+}
+
+.layui-col-xs-offset3 {
+ margin-left: 25%
+}
+
+.layui-col-xs-offset4 {
+ margin-left: 33.33333333%
+}
+
+.layui-col-xs-offset5 {
+ margin-left: 41.66666667%
+}
+
+.layui-col-xs-offset6 {
+ margin-left: 50%
+}
+
+.layui-col-xs-offset7 {
+ margin-left: 58.33333333%
+}
+
+.layui-col-xs-offset8 {
+ margin-left: 66.66666667%
+}
+
+.layui-col-xs-offset9 {
+ margin-left: 75%
+}
+
+.layui-col-xs-offset10 {
+ margin-left: 83.33333333%
+}
+
+.layui-col-xs-offset11 {
+ margin-left: 91.66666667%
+}
+
+.layui-col-xs-offset12 {
+ margin-left: 100%
+}
+
+@media screen and (max-width:768px) {
+ .layui-hide-xs {
+ display: none !important
+ }
+
+ .layui-show-xs-block {
+ display: block !important
+ }
+
+ .layui-show-xs-inline {
+ display: inline !important
+ }
+
+ .layui-show-xs-inline-block {
+ display: inline-block !important
+ }
+}
+
+@media screen and (min-width:768px) {
+ .layui-container {
+ width: 750px
+ }
+
+ .layui-hide-sm {
+ display: none !important
+ }
+
+ .layui-show-sm-block {
+ display: block !important
+ }
+
+ .layui-show-sm-inline {
+ display: inline !important
+ }
+
+ .layui-show-sm-inline-block {
+ display: inline-block !important
+ }
+
+ .layui-col-sm1,
+ .layui-col-sm10,
+ .layui-col-sm11,
+ .layui-col-sm12,
+ .layui-col-sm2,
+ .layui-col-sm3,
+ .layui-col-sm4,
+ .layui-col-sm5,
+ .layui-col-sm6,
+ .layui-col-sm7,
+ .layui-col-sm8,
+ .layui-col-sm9 {
+ float: left
+ }
+
+ .layui-col-sm1 {
+ width: 8.33333333%
+ }
+
+ .layui-col-sm2 {
+ width: 16.66666667%
+ }
+
+ .layui-col-sm3 {
+ width: 25%
+ }
+
+ .layui-col-sm4 {
+ width: 33.33333333%
+ }
+
+ .layui-col-sm5 {
+ width: 41.66666667%
+ }
+
+ .layui-col-sm6 {
+ width: 50%
+ }
+
+ .layui-col-sm7 {
+ width: 58.33333333%
+ }
+
+ .layui-col-sm8 {
+ width: 66.66666667%
+ }
+
+ .layui-col-sm9 {
+ width: 75%
+ }
+
+ .layui-col-sm10 {
+ width: 83.33333333%
+ }
+
+ .layui-col-sm11 {
+ width: 91.66666667%
+ }
+
+ .layui-col-sm12 {
+ width: 100%
+ }
+
+ .layui-col-sm-offset1 {
+ margin-left: 8.33333333%
+ }
+
+ .layui-col-sm-offset2 {
+ margin-left: 16.66666667%
+ }
+
+ .layui-col-sm-offset3 {
+ margin-left: 25%
+ }
+
+ .layui-col-sm-offset4 {
+ margin-left: 33.33333333%
+ }
+
+ .layui-col-sm-offset5 {
+ margin-left: 41.66666667%
+ }
+
+ .layui-col-sm-offset6 {
+ margin-left: 50%
+ }
+
+ .layui-col-sm-offset7 {
+ margin-left: 58.33333333%
+ }
+
+ .layui-col-sm-offset8 {
+ margin-left: 66.66666667%
+ }
+
+ .layui-col-sm-offset9 {
+ margin-left: 75%
+ }
+
+ .layui-col-sm-offset10 {
+ margin-left: 83.33333333%
+ }
+
+ .layui-col-sm-offset11 {
+ margin-left: 91.66666667%
+ }
+
+ .layui-col-sm-offset12 {
+ margin-left: 100%
+ }
+}
+
+@media screen and (min-width:992px) {
+ .layui-container {
+ width: 970px
+ }
+
+ .layui-hide-md {
+ display: none !important
+ }
+
+ .layui-show-md-block {
+ display: block !important
+ }
+
+ .layui-show-md-inline {
+ display: inline !important
+ }
+
+ .layui-show-md-inline-block {
+ display: inline-block !important
+ }
+
+ .layui-col-md1,
+ .layui-col-md10,
+ .layui-col-md11,
+ .layui-col-md12,
+ .layui-col-md2,
+ .layui-col-md3,
+ .layui-col-md4,
+ .layui-col-md5,
+ .layui-col-md6,
+ .layui-col-md7,
+ .layui-col-md8,
+ .layui-col-md9 {
+ float: left
+ }
+
+ .layui-col-md1 {
+ width: 8.33333333%
+ }
+
+ .layui-col-md2 {
+ width: 16.66666667%
+ }
+
+ .layui-col-md3 {
+ width: 25%
+ }
+
+ .layui-col-md4 {
+ width: 33.33333333%
+ }
+
+ .layui-col-md5 {
+ width: 41.66666667%
+ }
+
+ .layui-col-md6 {
+ width: 50%
+ }
+
+ .layui-col-md7 {
+ width: 58.33333333%
+ }
+
+ .layui-col-md8 {
+ width: 66.66666667%
+ }
+
+ .layui-col-md9 {
+ width: 75%
+ }
+
+ .layui-col-md10 {
+ width: 83.33333333%
+ }
+
+ .layui-col-md11 {
+ width: 91.66666667%
+ }
+
+ .layui-col-md12 {
+ width: 100%
+ }
+
+ .layui-col-md-offset1 {
+ margin-left: 8.33333333%
+ }
+
+ .layui-col-md-offset2 {
+ margin-left: 16.66666667%
+ }
+
+ .layui-col-md-offset3 {
+ margin-left: 25%
+ }
+
+ .layui-col-md-offset4 {
+ margin-left: 33.33333333%
+ }
+
+ .layui-col-md-offset5 {
+ margin-left: 41.66666667%
+ }
+
+ .layui-col-md-offset6 {
+ margin-left: 50%
+ }
+
+ .layui-col-md-offset7 {
+ margin-left: 58.33333333%
+ }
+
+ .layui-col-md-offset8 {
+ margin-left: 66.66666667%
+ }
+
+ .layui-col-md-offset9 {
+ margin-left: 75%
+ }
+
+ .layui-col-md-offset10 {
+ margin-left: 83.33333333%
+ }
+
+ .layui-col-md-offset11 {
+ margin-left: 91.66666667%
+ }
+
+ .layui-col-md-offset12 {
+ margin-left: 100%
+ }
+}
+
+@media screen and (min-width:1200px) {
+ .layui-container {
+ width: 1170px
+ }
+
+ .layui-hide-lg {
+ display: none !important
+ }
+
+ .layui-show-lg-block {
+ display: block !important
+ }
+
+ .layui-show-lg-inline {
+ display: inline !important
+ }
+
+ .layui-show-lg-inline-block {
+ display: inline-block !important
+ }
+
+ .layui-col-lg1,
+ .layui-col-lg10,
+ .layui-col-lg11,
+ .layui-col-lg12,
+ .layui-col-lg2,
+ .layui-col-lg3,
+ .layui-col-lg4,
+ .layui-col-lg5,
+ .layui-col-lg6,
+ .layui-col-lg7,
+ .layui-col-lg8,
+ .layui-col-lg9 {
+ float: left
+ }
+
+ .layui-col-lg1 {
+ width: 8.33333333%
+ }
+
+ .layui-col-lg2 {
+ width: 16.66666667%
+ }
+
+ .layui-col-lg3 {
+ width: 25%
+ }
+
+ .layui-col-lg4 {
+ width: 33.33333333%
+ }
+
+ .layui-col-lg5 {
+ width: 41.66666667%
+ }
+
+ .layui-col-lg6 {
+ width: 50%
+ }
+
+ .layui-col-lg7 {
+ width: 58.33333333%
+ }
+
+ .layui-col-lg8 {
+ width: 66.66666667%
+ }
+
+ .layui-col-lg9 {
+ width: 75%
+ }
+
+ .layui-col-lg10 {
+ width: 83.33333333%
+ }
+
+ .layui-col-lg11 {
+ width: 91.66666667%
+ }
+
+ .layui-col-lg12 {
+ width: 100%
+ }
+
+ .layui-col-lg-offset1 {
+ margin-left: 8.33333333%
+ }
+
+ .layui-col-lg-offset2 {
+ margin-left: 16.66666667%
+ }
+
+ .layui-col-lg-offset3 {
+ margin-left: 25%
+ }
+
+ .layui-col-lg-offset4 {
+ margin-left: 33.33333333%
+ }
+
+ .layui-col-lg-offset5 {
+ margin-left: 41.66666667%
+ }
+
+ .layui-col-lg-offset6 {
+ margin-left: 50%
+ }
+
+ .layui-col-lg-offset7 {
+ margin-left: 58.33333333%
+ }
+
+ .layui-col-lg-offset8 {
+ margin-left: 66.66666667%
+ }
+
+ .layui-col-lg-offset9 {
+ margin-left: 75%
+ }
+
+ .layui-col-lg-offset10 {
+ margin-left: 83.33333333%
+ }
+
+ .layui-col-lg-offset11 {
+ margin-left: 91.66666667%
+ }
+
+ .layui-col-lg-offset12 {
+ margin-left: 100%
+ }
+}
+
+.layui-col-space1 {
+ margin: -.5px
+}
+
+.layui-col-space1>* {
+ padding: .5px
+}
+
+.layui-col-space2 {
+ margin: -1px
+}
+
+.layui-col-space2>* {
+ padding: 1px
+}
+
+.layui-col-space4 {
+ margin: -2px
+}
+
+.layui-col-space4>* {
+ padding: 2px
+}
+
+.layui-col-space5 {
+ margin: -2.5px
+}
+
+.layui-col-space5>* {
+ padding: 2.5px
+}
+
+.layui-col-space6 {
+ margin: -3px
+}
+
+.layui-col-space6>* {
+ padding: 3px
+}
+
+.layui-col-space8 {
+ margin: -4px
+}
+
+.layui-col-space8>* {
+ padding: 4px
+}
+
+.layui-col-space10 {
+ margin: -5px
+}
+
+.layui-col-space10>* {
+ padding: 5px
+}
+
+.layui-col-space12 {
+ margin: -6px
+}
+
+.layui-col-space12>* {
+ padding: 6px
+}
+
+.layui-col-space14 {
+ margin: -7px
+}
+
+.layui-col-space14>* {
+ padding: 7px
+}
+
+.layui-col-space15 {
+ margin: -7.5px
+}
+
+.layui-col-space15>* {
+ padding: 7.5px
+}
+
+.layui-col-space16 {
+ margin: -8px
+}
+
+.layui-col-space16>* {
+ padding: 8px
+}
+
+.layui-col-space18 {
+ margin: -9px
+}
+
+.layui-col-space18>* {
+ padding: 9px
+}
+
+.layui-col-space20 {
+ margin: -10px
+}
+
+.layui-col-space20>* {
+ padding: 10px
+}
+
+.layui-col-space22 {
+ margin: -11px
+}
+
+.layui-col-space22>* {
+ padding: 11px
+}
+
+.layui-col-space24 {
+ margin: -12px
+}
+
+.layui-col-space24>* {
+ padding: 12px
+}
+
+.layui-col-space25 {
+ margin: -12.5px
+}
+
+.layui-col-space25>* {
+ padding: 12.5px
+}
+
+.layui-col-space26 {
+ margin: -13px
+}
+
+.layui-col-space26>* {
+ padding: 13px
+}
+
+.layui-col-space28 {
+ margin: -14px
+}
+
+.layui-col-space28>* {
+ padding: 14px
+}
+
+.layui-col-space30 {
+ margin: -15px
+}
+
+.layui-col-space30>* {
+ padding: 15px
+}
+
+.layui-btn,
+.layui-input,
+.layui-select,
+.layui-textarea,
+.layui-upload-button {
+ outline: 0;
+ -webkit-appearance: none;
+ transition: all .3s;
+ -webkit-transition: all .3s;
+ box-sizing: border-box
+}
+
+.layui-elem-quote {
+ margin-bottom: 10px;
+ padding: 15px;
+ line-height: 1.6;
+ border-left: 5px solid #5FB878;
+ border-radius: 0 2px 2px 0;
+ background-color: #FAFAFA
+}
+
+.layui-quote-nm {
+ border-style: solid;
+ border-width: 1px 1px 1px 5px;
+ background: 0 0
+}
+
+.layui-elem-field {
+ margin-bottom: 10px;
+ padding: 0;
+ border-width: 1px;
+ border-style: solid
+}
+
+.layui-elem-field legend {
+ margin-left: 20px;
+ padding: 0 10px;
+ font-size: 20px;
+ font-weight: 300
+}
+
+.layui-field-title {
+ margin: 10px 0 20px;
+ border-width: 1px 0 0
+}
+
+.layui-field-box {
+ padding: 15px
+}
+
+.layui-field-title .layui-field-box {
+ padding: 10px 0
+}
+
+.layui-progress {
+ position: relative;
+ height: 6px;
+ border-radius: 20px;
+ background-color: #eee
+}
+
+.layui-progress-bar {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 0;
+ max-width: 100%;
+ height: 6px;
+ border-radius: 20px;
+ text-align: right;
+ background-color: #5FB878;
+ transition: all .3s;
+ -webkit-transition: all .3s
+}
+
+.layui-progress-big,
+.layui-progress-big .layui-progress-bar {
+ height: 18px;
+ line-height: 18px
+}
+
+.layui-progress-text {
+ position: relative;
+ top: -20px;
+ line-height: 18px;
+ font-size: 12px;
+ color: #666
+}
+
+.layui-progress-big .layui-progress-text {
+ position: static;
+ padding: 0 10px;
+ color: #fff
+}
+
+.layui-collapse {
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 2px
+}
+
+.layui-colla-content,
+.layui-colla-item {
+ border-top-width: 1px;
+ border-top-style: solid
+}
+
+.layui-colla-item:first-child {
+ border-top: none
+}
+
+.layui-colla-title {
+ position: relative;
+ height: 42px;
+ line-height: 42px;
+ padding: 0 15px 0 35px;
+ color: #333;
+ background-color: #FAFAFA;
+ cursor: pointer;
+ font-size: 14px;
+ overflow: hidden
+}
+
+.layui-colla-content {
+ display: none;
+ padding: 10px 15px;
+ line-height: 1.6;
+ color: #666
+}
+
+.layui-colla-icon {
+ position: absolute;
+ left: 15px;
+ top: 0;
+ font-size: 14px
+}
+
+.layui-card-body,
+.layui-card-header,
+.layui-form-label,
+.layui-form-mid,
+.layui-input-block,
+.layui-input-inline,
+.layui-input-wrap,
+.layui-panel,
+.layui-textarea {
+ position: relative
+}
+
+.layui-card {
+ margin-bottom: 15px;
+ border-radius: 2px;
+ background-color: #fff;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
+}
+
+.layui-form-select dl,
+.layui-panel {
+ box-shadow: 1px 1px 4px rgb(0 0 0 / 8%)
+}
+
+.layui-card:last-child {
+ margin-bottom: 0
+}
+
+.layui-card-header {
+ height: 42px;
+ line-height: 42px;
+ padding: 0 15px;
+ border-bottom: 1px solid #f6f6f6;
+ color: #333;
+ border-radius: 2px 2px 0 0;
+ font-size: 14px
+}
+
+.layui-card-body {
+ padding: 10px 15px;
+ line-height: 24px
+}
+
+.layui-card-body[pad15] {
+ padding: 15px
+}
+
+.layui-card-body[pad20] {
+ padding: 20px
+}
+
+.layui-card-body .layui-table {
+ margin: 5px 0
+}
+
+.layui-card .layui-tab {
+ margin: 0
+}
+
+.layui-panel {
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 2px;
+ background-color: #fff;
+ color: #666
+}
+
+.layui-bg-black,
+.layui-bg-blue,
+.layui-bg-cyan,
+.layui-bg-green,
+.layui-bg-orange,
+.layui-bg-red {
+ color: #fff !important
+}
+
+.layui-panel-window {
+ position: relative;
+ padding: 15px;
+ border-radius: 0;
+ border-top: 5px solid #eee;
+ background-color: #fff
+}
+
+.layui-border,
+.layui-border-black,
+.layui-border-blue,
+.layui-border-cyan,
+.layui-border-green,
+.layui-border-orange,
+.layui-border-red {
+ border-width: 1px;
+ border-style: solid
+}
+
+.layui-auxiliar-moving {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ background: 0 0;
+ z-index: 9999999999
+}
+
+.layui-bg-red {
+ background-color: #FF5722 !important
+}
+
+.layui-bg-orange {
+ background-color: #FFB800 !important
+}
+
+.layui-bg-green {
+ background-color: #009688 !important
+}
+
+.layui-bg-cyan {
+ background-color: #2F4056 !important
+}
+
+.layui-bg-blue {
+ background-color: #1E9FFF !important
+}
+
+.layui-bg-black {
+ background-color: #393D49 !important
+}
+
+.layui-bg-gray {
+ background-color: #FAFAFA !important;
+ color: #666 !important
+}
+
+.layui-badge-rim,
+.layui-border,
+.layui-colla-content,
+.layui-colla-item,
+.layui-collapse,
+.layui-elem-field,
+.layui-form-pane .layui-form-item[pane],
+.layui-form-pane .layui-form-label,
+.layui-iconpicker,
+.layui-iconpicker-main,
+.layui-input,
+.layui-input-split,
+.layui-layedit,
+.layui-layedit-tool,
+.layui-panel,
+.layui-quote-nm,
+.layui-select,
+.layui-tab-bar,
+.layui-tab-card,
+.layui-tab-title,
+.layui-tab-title .layui-this:after,
+.layui-textarea {
+ border-color: #eee
+}
+
+.layui-border-red {
+ border-color: #FF5722 !important;
+ color: #FF5722 !important
+}
+
+.layui-border-orange {
+ border-color: #FFB800 !important;
+ color: #FFB800 !important
+}
+
+.layui-border-green {
+ border-color: #009688 !important;
+ color: #009688 !important
+}
+
+.layui-border-cyan {
+ border-color: #2F4056 !important;
+ color: #2F4056 !important
+}
+
+.layui-border-blue {
+ border-color: #1E9FFF !important;
+ color: #1E9FFF !important
+}
+
+.layui-border-black {
+ border-color: #393D49 !important;
+ color: #393D49 !important
+}
+
+.layui-timeline-item:before {
+ background-color: #eee
+}
+
+.layui-text {
+ line-height: 1.6;
+ font-size: 14px;
+ color: #666
+}
+
+.layui-text h1,
+.layui-text h2,
+.layui-text h3 {
+ font-weight: 500;
+ color: #333
+}
+
+.layui-text h1 {
+ font-size: 30px
+}
+
+.layui-text h2 {
+ font-size: 24px
+}
+
+.layui-text h3 {
+ font-size: 18px
+}
+
+.layui-text a:not(.layui-btn) {
+ color: #01AAED
+}
+
+.layui-text a:not(.layui-btn):hover {
+ text-decoration: underline
+}
+
+.layui-text ul {
+ padding: 5px 0 5px 15px
+}
+
+.layui-text ul li {
+ margin-top: 5px;
+ list-style-type: disc
+}
+
+.layui-text em,
+.layui-word-aux {
+ color: #999 !important;
+ padding-left: 5px !important;
+ padding-right: 5px !important
+}
+
+.layui-text p {
+ margin: 10px 0
+}
+
+.layui-text p:first-child {
+ margin-top: 0
+}
+
+.layui-font-12 {
+ font-size: 12px !important
+}
+
+.layui-font-14 {
+ font-size: 14px !important
+}
+
+.layui-font-16 {
+ font-size: 16px !important
+}
+
+.layui-font-18 {
+ font-size: 18px !important
+}
+
+.layui-font-20 {
+ font-size: 20px !important
+}
+
+.layui-font-22 {
+ font-size: 22px !important
+}
+
+.layui-font-24 {
+ font-size: 24px !important
+}
+
+.layui-font-26 {
+ font-size: 26px !important
+}
+
+.layui-font-28 {
+ font-size: 28px !important
+}
+
+.layui-font-30 {
+ font-size: 30px !important
+}
+
+.layui-font-red {
+ color: #FF5722 !important
+}
+
+.layui-font-orange {
+ color: #FFB800 !important
+}
+
+.layui-font-green {
+ color: #009688 !important
+}
+
+.layui-font-cyan {
+ color: #2F4056 !important
+}
+
+.layui-font-blue {
+ color: #01AAED !important
+}
+
+.layui-font-black {
+ color: #000 !important
+}
+
+.layui-font-gray {
+ color: #c2c2c2 !important
+}
+
+.layui-btn {
+ height: 38px;
+ line-height: 38px;
+ border: 1px solid transparent;
+ padding: 0 18px;
+ background-color: #009688;
+ color: #fff;
+ white-space: nowrap;
+ text-align: center;
+ font-size: 14px;
+ border-radius: 2px;
+ cursor: pointer
+}
+
+.layui-btn:hover {
+ opacity: .8;
+ filter: alpha(opacity=80);
+ color: #fff
+}
+
+.layui-btn:active {
+ opacity: 1;
+ filter: alpha(opacity=100)
+}
+
+.layui-btn+.layui-btn {
+ margin-left: 10px
+}
+
+.layui-btn-container {
+ font-size: 0
+}
+
+.layui-btn-container .layui-btn {
+ margin-right: 10px;
+ margin-bottom: 10px
+}
+
+.layui-btn-container .layui-btn+.layui-btn {
+ margin-left: 0
+}
+
+.layui-table .layui-btn-container .layui-btn {
+ margin-bottom: 9px
+}
+
+.layui-btn-radius {
+ border-radius: 100px
+}
+
+.layui-btn .layui-icon {
+ padding: 0 2px;
+ vertical-align: middle\9;
+ vertical-align: bottom
+}
+
+.layui-btn-primary {
+ border-color: #d2d2d2;
+ background: 0 0;
+ color: #666
+}
+
+.layui-btn-primary:hover {
+ border-color: #009688;
+ color: #333
+}
+
+.layui-btn-normal {
+ background-color: #1E9FFF
+}
+
+.layui-btn-warm {
+ background-color: #FFB800
+}
+
+.layui-btn-danger {
+ background-color: #FF5722
+}
+
+.layui-btn-checked {
+ background-color: #5FB878
+}
+
+.layui-btn-disabled,
+.layui-btn-disabled:active,
+.layui-btn-disabled:hover {
+ border-color: #eee !important;
+ background-color: #FBFBFB !important;
+ color: #d2d2d2 !important;
+ cursor: not-allowed !important;
+ opacity: 1
+}
+
+.layui-btn-lg {
+ height: 44px;
+ line-height: 44px;
+ padding: 0 25px;
+ font-size: 16px
+}
+
+.layui-btn-sm {
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ font-size: 12px
+}
+
+.layui-btn-xs {
+ height: 22px;
+ line-height: 22px;
+ padding: 0 5px;
+ font-size: 12px
+}
+
+.layui-btn-xs i {
+ font-size: 12px !important
+}
+
+.layui-btn-group {
+ vertical-align: middle;
+ font-size: 0
+}
+
+.layui-btn-group .layui-btn {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ border-left: 1px solid rgba(255, 255, 255, .5);
+ border-radius: 0
+}
+
+.layui-btn-group .layui-btn-primary {
+ border-left: none
+}
+
+.layui-btn-group .layui-btn-primary:hover {
+ border-color: #d2d2d2;
+ color: #009688
+}
+
+.layui-btn-group .layui-btn:first-child {
+ border-left: none;
+ border-radius: 2px 0 0 2px
+}
+
+.layui-btn-group .layui-btn-primary:first-child {
+ border-left: 1px solid #d2d2d2
+}
+
+.layui-btn-group .layui-btn:last-child {
+ border-radius: 0 2px 2px 0
+}
+
+.layui-btn-group .layui-btn+.layui-btn {
+ margin-left: 0
+}
+
+.layui-btn-group+.layui-btn-group {
+ margin-left: 10px
+}
+
+.layui-btn-fluid {
+ width: 100%
+}
+
+.layui-input,
+.layui-select,
+.layui-textarea {
+ height: 38px;
+ line-height: 1.3;
+ line-height: 38px\9;
+ border-width: 1px;
+ border-style: solid;
+ background-color: #fff;
+ color: rgba(0, 0, 0, .85);
+ border-radius: 2px
+}
+
+.layui-input::-webkit-input-placeholder,
+.layui-select::-webkit-input-placeholder,
+.layui-textarea::-webkit-input-placeholder {
+ line-height: 1.3
+}
+
+.layui-input,
+.layui-textarea {
+ display: block;
+ width: 100%;
+ padding-left: 10px
+}
+
+.layui-input:hover,
+.layui-textarea:hover {
+ border-color: #eee !important
+}
+
+.layui-input:focus,
+.layui-textarea:focus {
+ border-color: #d2d2d2 !important
+}
+
+.layui-textarea {
+ min-height: 100px;
+ height: auto;
+ line-height: 20px;
+ padding: 6px 10px;
+ resize: vertical
+}
+
+.layui-select {
+ padding: 0 10px
+}
+
+.layui-form input[type=checkbox],
+.layui-form input[type=radio],
+.layui-form select {
+ display: none
+}
+
+.layui-form [lay-ignore] {
+ display: initial
+}
+
+.layui-form-item {
+ margin-bottom: 15px;
+ clear: both;
+ *zoom: 1
+}
+
+.layui-form-item:after {
+ content: '\20';
+ clear: both;
+ *zoom: 1;
+ display: block;
+ height: 0
+}
+
+.layui-form-label {
+ float: left;
+ display: block;
+ padding: 9px 15px;
+ width: 80px;
+ font-weight: 400;
+ line-height: 20px;
+ text-align: right
+}
+
+.layui-form-label-col {
+ display: block;
+ float: none;
+ padding: 9px 0;
+ line-height: 20px;
+ text-align: left
+}
+
+.layui-form-item .layui-inline {
+ margin-bottom: 5px;
+ margin-right: 10px
+}
+
+.layui-input-block {
+ margin-left: 110px;
+ min-height: 36px
+}
+
+.layui-input-inline {
+ display: inline-block;
+ vertical-align: middle
+}
+
+.layui-form-item .layui-input-inline {
+ float: left;
+ width: 190px;
+ margin-right: 10px
+}
+
+.layui-form-text .layui-input-inline {
+ width: auto
+}
+
+.layui-form-mid {
+ float: left;
+ display: block;
+ padding: 9px 0 !important;
+ line-height: 20px;
+ margin-right: 10px
+}
+
+.layui-form-danger+.layui-form-select .layui-input,
+.layui-form-danger:focus {
+ border-color: #FF5722 !important
+}
+
+.layui-input-wrap {
+ height: 38px;
+ line-height: 38px
+}
+
+.layui-input-wrap .layui-input {
+ padding-right: 35px;
+ cursor: pointer
+}
+
+.layui-input-wrap .layui-input::-ms-clear,
+.layui-input-wrap .layui-input::-ms-reveal {
+ display: none
+}
+
+.layui-input-wrap-prefix .layui-input {
+ padding-left: 35px
+}
+
+.layui-input-prefix,
+.layui-input-split,
+.layui-input-suffix {
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding: 0 10px;
+ width: 35px;
+ height: 100%;
+ text-align: center;
+ transition: all .3s;
+ cursor: pointer;
+ pointer-events: none;
+ box-sizing: border-box
+}
+
+.layui-input-prefix {
+ left: 0;
+ border-radius: 2px 0 0 2px
+}
+
+.layui-input-suffix {
+ right: 0;
+ border-radius: 0 2px 2px 0
+}
+
+.layui-input-wrap .layui-input:focus+.layui-input-split {
+ border-color: #d2d2d2
+}
+
+.layui-input-prefix .layui-icon,
+.layui-input-split .layui-icon,
+.layui-input-suffix .layui-icon {
+ position: relative;
+ font-size: 16px;
+ color: rgba(0, 0, 0, .6);
+ transition: all .3s
+}
+
+.layui-input-wrap .layui-input-prefix.layui-input-split {
+ border-width: 0 1px 0 0
+}
+
+.layui-input-wrap-prefix .layui-form-select {
+ position: static
+}
+
+.layui-input-affix-event .layui-icon {
+ color: rgba(0, 0, 0, .8)
+}
+
+.layui-input-affix-event .layui-icon-clear {
+ color: rgba(0, 0, 0, .3)
+}
+
+.layui-input-affix-event .layui-icon:hover {
+ color: rgba(0, 0, 0, .6)
+}
+
+.layui-input-split {
+ border-width: 1px;
+ border-style: solid
+}
+
+.layui-input-affix-event {
+ pointer-events: auto
+}
+
+.layui-input-group {
+ position: relative;
+ display: inline-table;
+ cursor: pointer
+}
+
+.layui-input-group>* {
+ display: table-cell;
+ vertical-align: middle;
+ position: relative;
+ cursor: pointer
+}
+
+.layui-input-group .layui-input {
+ padding-right: 15px
+}
+
+.layui-input-group .layui-input-prefix {
+ width: auto;
+ border-right: 0
+}
+
+.layui-input-group .layui-input-suffix {
+ width: auto;
+ border-left: 0
+}
+
+.layui-form-select {
+ position: relative
+}
+
+.layui-form-select .layui-input {
+ padding-right: 30px;
+ cursor: pointer
+}
+
+.layui-form-select .layui-edge {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ margin-top: -3px;
+ cursor: pointer;
+ border-width: 6px;
+ border-top-color: #c2c2c2;
+ border-top-style: solid;
+ transition: all .3s;
+ -webkit-transition: all .3s
+}
+
+.layui-form-select dl {
+ display: none;
+ position: absolute;
+ left: 0;
+ top: 42px;
+ padding: 5px 0;
+ z-index: 899;
+ min-width: 100%;
+ border: 1px solid #eee;
+ max-height: 300px;
+ overflow-y: auto;
+ background-color: #fff;
+ border-radius: 2px;
+ box-sizing: border-box
+}
+
+.layui-form-select dl dd,
+.layui-form-select dl dt {
+ padding: 0 10px;
+ line-height: 36px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis
+}
+
+.layui-form-select dl dt {
+ font-size: 12px;
+ color: #999
+}
+
+.layui-form-select dl dd {
+ cursor: pointer
+}
+
+.layui-form-select dl dd:hover {
+ background-color: #F6F6F6;
+ -webkit-transition: .5s all;
+ transition: .5s all
+}
+
+.layui-form-select .layui-select-group dd {
+ padding-left: 20px
+}
+
+.layui-form-select dl dd.layui-select-tips {
+ padding-left: 10px !important;
+ color: #999
+}
+
+.layui-form-select dl dd.layui-this {
+ background-color: #F6F6F6;
+ color: #5FB878;
+ font-weight: 700
+}
+
+.layui-form-checkbox,
+.layui-form-select dl dd.layui-disabled {
+ background-color: #fff
+}
+
+.layui-form-selected dl {
+ display: block
+}
+
+.layui-form-checkbox,
+.layui-form-checkbox *,
+.layui-form-switch {
+ display: inline-block;
+ vertical-align: middle
+}
+
+.layui-form-selected .layui-edge {
+ margin-top: -9px;
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+ margin-top: -3px\9
+}
+
+:root .layui-form-selected .layui-edge {
+ margin-top: -9px\0/IE9
+}
+
+.layui-form-selectup dl {
+ top: auto;
+ bottom: 42px
+}
+
+.layui-select-none {
+ margin: 5px 0;
+ text-align: center;
+ color: #999
+}
+
+.layui-select-disabled .layui-disabled {
+ border-color: #eee !important
+}
+
+.layui-select-disabled .layui-edge {
+ border-top-color: #d2d2d2
+}
+
+.layui-form-checkbox {
+ position: relative;
+ height: 30px;
+ line-height: 30px;
+ margin-right: 10px;
+ padding-right: 30px;
+ cursor: pointer;
+ font-size: 0;
+ -webkit-transition: .1s linear;
+ transition: .1s linear;
+ box-sizing: border-box
+}
+
+.layui-form-checkbox span {
+ padding: 0 10px;
+ height: 100%;
+ font-size: 14px;
+ border-radius: 2px 0 0 2px;
+ background-color: #d2d2d2;
+ color: #fff;
+ overflow: hidden
+}
+
+.layui-form-checkbox:hover span {
+ background-color: #c2c2c2
+}
+
+.layui-form-checkbox i {
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ height: 28px;
+ border: 1px solid #d2d2d2;
+ border-left: none;
+ border-radius: 0 2px 2px 0;
+ color: #fff;
+ font-size: 20px;
+ text-align: center
+}
+
+.layui-form-checkbox:hover i {
+ border-color: #c2c2c2;
+ color: #c2c2c2
+}
+
+.layui-form-checked,
+.layui-form-checked:hover {
+ border-color: #5FB878
+}
+
+.layui-form-checked span,
+.layui-form-checked:hover span {
+ background-color: #5FB878
+}
+
+.layui-form-checked i,
+.layui-form-checked:hover i {
+ color: #5FB878
+}
+
+.layui-form-item .layui-form-checkbox {
+ margin-top: 4px
+}
+
+.layui-form-checkbox[lay-skin=primary] {
+ height: auto !important;
+ line-height: normal !important;
+ min-width: 18px;
+ min-height: 18px;
+ border: none !important;
+ margin-right: 0;
+ padding-left: 28px;
+ padding-right: 0;
+ background: 0 0
+}
+
+.layui-form-checkbox[lay-skin=primary] span {
+ padding-left: 0;
+ padding-right: 15px;
+ line-height: 18px;
+ background: 0 0;
+ color: #666
+}
+
+.layui-form-checkbox[lay-skin=primary] i {
+ right: auto;
+ left: 0;
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ border: 1px solid #d2d2d2;
+ font-size: 12px;
+ border-radius: 2px;
+ background-color: #fff;
+ -webkit-transition: .1s linear;
+ transition: .1s linear
+}
+
+.layui-form-checkbox[lay-skin=primary]:hover i {
+ border-color: #5FB878;
+ color: #fff
+}
+
+.layui-form-checked[lay-skin=primary] i {
+ border-color: #5FB878 !important;
+ background-color: #5FB878;
+ color: #fff
+}
+
+.layui-checkbox-disabled[lay-skin=primary] span {
+ background: 0 0 !important;
+ color: #c2c2c2 !important
+}
+
+.layui-checkbox-disabled[lay-skin=primary]:hover i {
+ border-color: #d2d2d2
+}
+
+.layui-form-item .layui-form-checkbox[lay-skin=primary] {
+ margin-top: 10px
+}
+
+.layui-form-switch {
+ position: relative;
+ height: 22px;
+ line-height: 22px;
+ min-width: 35px;
+ padding: 0 5px;
+ margin-top: 8px;
+ border: 1px solid #d2d2d2;
+ border-radius: 20px;
+ cursor: pointer;
+ background-color: #fff;
+ -webkit-transition: .1s linear;
+ transition: .1s linear
+}
+
+.layui-form-switch i {
+ position: absolute;
+ left: 5px;
+ top: 3px;
+ width: 16px;
+ height: 16px;
+ border-radius: 20px;
+ background-color: #d2d2d2;
+ -webkit-transition: .1s linear;
+ transition: .1s linear
+}
+
+.layui-form-switch em {
+ position: relative;
+ top: 0;
+ width: 25px;
+ margin-left: 21px;
+ padding: 0 !important;
+ text-align: center !important;
+ color: #999 !important;
+ font-style: normal !important;
+ font-size: 12px
+}
+
+.layui-form-onswitch {
+ border-color: #5FB878;
+ background-color: #5FB878
+}
+
+.layui-checkbox-disabled,
+.layui-checkbox-disabled i {
+ border-color: #eee !important
+}
+
+.layui-form-onswitch i {
+ left: 100%;
+ margin-left: -21px;
+ background-color: #fff
+}
+
+.layui-form-onswitch em {
+ margin-left: 5px;
+ margin-right: 21px;
+ color: #fff !important
+}
+
+.layui-checkbox-disabled span {
+ background-color: #eee !important
+}
+
+.layui-checkbox-disabled em {
+ color: #d2d2d2 !important
+}
+
+.layui-checkbox-disabled:hover i {
+ color: #fff !important
+}
+
+[lay-radio] {
+ display: none
+}
+
+.layui-form-radio,
+.layui-form-radio * {
+ display: inline-block;
+ vertical-align: middle
+}
+
+.layui-form-radio {
+ line-height: 28px;
+ margin: 6px 10px 0 0;
+ padding-right: 10px;
+ cursor: pointer;
+ font-size: 0
+}
+
+.layui-form-radio * {
+ font-size: 14px
+}
+
+.layui-form-radio>i {
+ margin-right: 8px;
+ font-size: 22px;
+ color: #c2c2c2
+}
+
+.layui-form-radio:hover *,
+.layui-form-radioed,
+.layui-form-radioed>i {
+ color: #5FB878
+}
+
+.layui-radio-disabled>i {
+ color: #eee !important
+}
+
+.layui-radio-disabled * {
+ color: #c2c2c2 !important
+}
+
+.layui-form-pane .layui-form-label {
+ width: 110px;
+ padding: 8px 15px;
+ height: 38px;
+ line-height: 20px;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 2px 0 0 2px;
+ text-align: center;
+ background-color: #FAFAFA;
+ overflow: hidden;
+ box-sizing: border-box
+}
+
+.layui-form-pane .layui-input-inline {
+ margin-left: -1px
+}
+
+.layui-form-pane .layui-input-block {
+ margin-left: 110px;
+ left: -1px
+}
+
+.layui-form-pane .layui-input {
+ border-radius: 0 2px 2px 0
+}
+
+.layui-form-pane .layui-form-text .layui-form-label {
+ float: none;
+ width: 100%;
+ border-radius: 2px;
+ box-sizing: border-box;
+ text-align: left
+}
+
+.layui-form-pane .layui-form-text .layui-input-inline {
+ display: block;
+ margin: 0;
+ top: -1px;
+ clear: both
+}
+
+.layui-form-pane .layui-form-text .layui-input-block {
+ margin: 0;
+ left: 0;
+ top: -1px
+}
+
+.layui-form-pane .layui-form-text .layui-textarea {
+ min-height: 100px;
+ border-radius: 0 0 2px 2px
+}
+
+.layui-form-pane .layui-form-checkbox {
+ margin: 4px 0 4px 10px
+}
+
+.layui-form-pane .layui-form-radio,
+.layui-form-pane .layui-form-switch {
+ margin-top: 6px;
+ margin-left: 10px
+}
+
+.layui-form-pane .layui-form-item[pane] {
+ position: relative;
+ border-width: 1px;
+ border-style: solid
+}
+
+.layui-form-pane .layui-form-item[pane] .layui-form-label {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ border-width: 0 1px 0 0
+}
+
+.layui-form-pane .layui-form-item[pane] .layui-input-inline {
+ margin-left: 110px
+}
+
+@media screen and (max-width:450px) {
+ .layui-form-item .layui-form-label {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap
+ }
+
+ .layui-form-item .layui-inline {
+ display: block;
+ margin-right: 0;
+ margin-bottom: 20px;
+ clear: both
+ }
+
+ .layui-form-item .layui-inline:after {
+ content: '\20';
+ clear: both;
+ display: block;
+ height: 0
+ }
+
+ .layui-form-item .layui-input-inline {
+ display: block;
+ float: none;
+ left: -3px;
+ width: auto !important;
+ margin: 0 0 10px 112px
+ }
+
+ .layui-form-item .layui-input-inline+.layui-form-mid {
+ margin-left: 110px;
+ top: -5px;
+ padding: 0
+ }
+
+ .layui-form-item .layui-form-checkbox {
+ margin-right: 5px;
+ margin-bottom: 5px
+ }
+}
+
+.layui-layedit {
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 2px
+}
+
+.layui-layedit-tool {
+ padding: 3px 5px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ font-size: 0
+}
+
+.layedit-tool-fixed {
+ position: fixed;
+ top: 0;
+ border-top: 1px solid #eee
+}
+
+.layui-layedit-tool .layedit-tool-mid,
+.layui-layedit-tool .layui-icon {
+ display: inline-block;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 14px
+}
+
+.layui-layedit-tool .layui-icon {
+ position: relative;
+ width: 32px;
+ height: 30px;
+ line-height: 30px;
+ margin: 3px 5px;
+ color: #777;
+ cursor: pointer;
+ border-radius: 2px
+}
+
+.layui-layedit-tool .layui-icon:hover {
+ color: #393D49
+}
+
+.layui-layedit-tool .layui-icon:active {
+ color: #000
+}
+
+.layui-layedit-tool .layedit-tool-active {
+ background-color: #eee;
+ color: #000
+}
+
+.layui-layedit-tool .layui-disabled,
+.layui-layedit-tool .layui-disabled:hover {
+ color: #d2d2d2;
+ cursor: not-allowed
+}
+
+.layui-layedit-tool .layedit-tool-mid {
+ width: 1px;
+ height: 18px;
+ margin: 0 10px;
+ background-color: #d2d2d2
+}
+
+.layedit-tool-html {
+ width: 50px !important;
+ font-size: 30px !important
+}
+
+.layedit-tool-b,
+.layedit-tool-code,
+.layedit-tool-help {
+ font-size: 16px !important
+}
+
+.layedit-tool-d,
+.layedit-tool-face,
+.layedit-tool-image,
+.layedit-tool-unlink {
+ font-size: 18px !important
+}
+
+.layedit-tool-image input {
+ position: absolute;
+ font-size: 0;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ opacity: .01;
+ filter: Alpha(opacity=1);
+ cursor: pointer
+}
+
+.layui-layedit-iframe iframe {
+ display: block;
+ width: 100%
+}
+
+#LAY_layedit_code {
+ overflow: hidden
+}
+
+.layui-laypage {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+ vertical-align: middle;
+ margin: 10px 0;
+ font-size: 0
+}
+
+.layui-laypage>a:first-child,
+.layui-laypage>a:first-child em {
+ border-radius: 2px 0 0 2px
+}
+
+.layui-laypage>a:last-child,
+.layui-laypage>a:last-child em {
+ border-radius: 0 2px 2px 0
+}
+
+.layui-laypage>:first-child {
+ margin-left: 0 !important
+}
+
+.layui-laypage>:last-child {
+ margin-right: 0 !important
+}
+
+.layui-laypage a,
+.layui-laypage button,
+.layui-laypage input,
+.layui-laypage select,
+.layui-laypage span {
+ border: 1px solid #eee
+}
+
+.layui-laypage a,
+.layui-laypage span {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+ vertical-align: middle;
+ padding: 0 15px;
+ height: 28px;
+ line-height: 28px;
+ margin: 0 -1px 5px 0;
+ background-color: #fff;
+ color: #333;
+ font-size: 12px
+}
+
+.layui-laypage a:hover {
+ color: #009688
+}
+
+.layui-laypage em {
+ font-style: normal
+}
+
+.layui-laypage .layui-laypage-spr {
+ color: #999;
+ font-weight: 700
+}
+
+.layui-laypage a {
+ text-decoration: none
+}
+
+.layui-laypage .layui-laypage-curr {
+ position: relative
+}
+
+.layui-laypage .layui-laypage-curr em {
+ position: relative;
+ color: #fff
+}
+
+.layui-laypage .layui-laypage-curr .layui-laypage-em {
+ position: absolute;
+ left: -1px;
+ top: -1px;
+ padding: 1px;
+ width: 100%;
+ height: 100%;
+ background-color: #009688
+}
+
+.layui-laypage-em {
+ border-radius: 2px
+}
+
+.layui-laypage-next em,
+.layui-laypage-prev em {
+ font-family: Sim sun;
+ font-size: 16px
+}
+
+.layui-laypage .layui-laypage-count,
+.layui-laypage .layui-laypage-limits,
+.layui-laypage .layui-laypage-refresh,
+.layui-laypage .layui-laypage-skip {
+ margin-left: 10px;
+ margin-right: 10px;
+ padding: 0;
+ border: none
+}
+
+.layui-laypage .layui-laypage-limits,
+.layui-laypage .layui-laypage-refresh {
+ vertical-align: top
+}
+
+.layui-laypage .layui-laypage-refresh i {
+ font-size: 18px;
+ cursor: pointer
+}
+
+.layui-laypage select {
+ height: 22px;
+ padding: 3px;
+ border-radius: 2px;
+ cursor: pointer
+}
+
+.layui-laypage .layui-laypage-skip {
+ height: 30px;
+ line-height: 30px;
+ color: #999
+}
+
+.layui-laypage button,
+.layui-laypage input {
+ height: 30px;
+ line-height: 30px;
+ border-radius: 2px;
+ vertical-align: top;
+ background-color: #fff;
+ box-sizing: border-box
+}
+
+.layui-laypage input {
+ display: inline-block;
+ width: 40px;
+ margin: 0 10px;
+ padding: 0 3px;
+ text-align: center
+}
+
+.layui-laypage input:focus,
+.layui-laypage select:focus {
+ border-color: #009688 !important
+}
+
+.layui-laypage button {
+ margin-left: 10px;
+ padding: 0 10px;
+ cursor: pointer
+}
+
+.layui-table,
+.layui-table-view {
+ margin: 10px 0
+}
+
+.layui-flow-more {
+ margin: 10px 0;
+ text-align: center;
+ color: #999;
+ font-size: 14px
+}
+
+.layui-flow-more a {
+ height: 32px;
+ line-height: 32px
+}
+
+.layui-flow-more a * {
+ display: inline-block;
+ vertical-align: top
+}
+
+.layui-flow-more a cite {
+ padding: 0 20px;
+ border-radius: 3px;
+ background-color: #eee;
+ color: #333;
+ font-style: normal
+}
+
+.layui-flow-more a cite:hover {
+ opacity: .8
+}
+
+.layui-flow-more a i {
+ font-size: 30px;
+ color: #737383
+}
+
+.layui-table {
+ width: 100%;
+ background-color: #fff;
+ color: #666
+}
+
+.layui-table tr {
+ transition: all .3s;
+ -webkit-transition: all .3s
+}
+
+.layui-table th {
+ text-align: left;
+ font-weight: 400
+}
+
+.layui-table tbody tr:hover,
+.layui-table thead tr,
+.layui-table-click,
+.layui-table-header,
+.layui-table-hover,
+.layui-table-mend,
+.layui-table-patch,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-total tr,
+.layui-table[lay-even] tr:nth-child(even) {
+ background-color: #FAFAFA
+}
+
+.layui-table td,
+.layui-table th,
+.layui-table-col-set,
+.layui-table-fixed-r,
+.layui-table-grid-down,
+.layui-table-header,
+.layui-table-page,
+.layui-table-tips-main,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-view,
+.layui-table[lay-skin=line],
+.layui-table[lay-skin=row] {
+ border-width: 1px;
+ border-style: solid;
+ border-color: #eee
+}
+
+.layui-table td,
+.layui-table th {
+ position: relative;
+ padding: 9px 15px;
+ min-height: 20px;
+ line-height: 20px;
+ font-size: 14px
+}
+
+.layui-table[lay-skin=line] td,
+.layui-table[lay-skin=line] th {
+ border-width: 0 0 1px
+}
+
+.layui-table[lay-skin=row] td,
+.layui-table[lay-skin=row] th {
+ border-width: 0 1px 0 0
+}
+
+.layui-table[lay-skin=nob] td,
+.layui-table[lay-skin=nob] th {
+ border: none
+}
+
+.layui-table img {
+ max-width: 100px
+}
+
+.layui-table[lay-size=lg] td,
+.layui-table[lay-size=lg] th {
+ padding: 15px 30px
+}
+
+.layui-table-view .layui-table[lay-size=lg] .layui-table-cell {
+ height: 40px;
+ line-height: 40px
+}
+
+.layui-table[lay-size=sm] td,
+.layui-table[lay-size=sm] th {
+ font-size: 12px;
+ padding: 5px 10px
+}
+
+.layui-table-view .layui-table[lay-size=sm] .layui-table-cell {
+ height: 20px;
+ line-height: 20px
+}
+
+.layui-table[lay-data] {
+ display: none
+}
+
+.layui-table-box {
+ position: relative;
+ overflow: hidden
+}
+
+.layui-table-view .layui-table {
+ position: relative;
+ width: auto;
+ margin: 0;
+ border-collapse: separate
+}
+
+.layui-table-view .layui-table[lay-skin=line] {
+ border-width: 0 1px 0 0
+}
+
+.layui-table-view .layui-table[lay-skin=row] {
+ border-width: 0 0 1px
+}
+
+.layui-table-view .layui-table td,
+.layui-table-view .layui-table th {
+ padding: 5px 0;
+ border-top: none;
+ border-left: none
+}
+
+.layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
+ cursor: pointer
+}
+
+.layui-table-view .layui-table td {
+ cursor: default
+}
+
+.layui-table-view .layui-table td[data-edit=text] {
+ cursor: text
+}
+
+.layui-table-view .layui-form-checkbox[lay-skin=primary] i {
+ width: 18px;
+ height: 18px
+}
+
+.layui-table-view .layui-form-radio {
+ line-height: 0;
+ padding: 0
+}
+
+.layui-table-view .layui-form-radio>i {
+ margin: 0;
+ font-size: 20px
+}
+
+.layui-table-init {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ z-index: 110
+}
+
+.layui-table-init .layui-icon {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin: -15px 0 0 -15px;
+ font-size: 30px;
+ color: #c2c2c2
+}
+
+.layui-table-header {
+ border-width: 0 0 1px;
+ overflow: hidden
+}
+
+.layui-table-header .layui-table {
+ margin-bottom: -1px
+}
+
+.layui-table-tool .layui-inline[lay-event] {
+ position: relative;
+ width: 26px;
+ height: 26px;
+ padding: 5px;
+ line-height: 16px;
+ margin-right: 10px;
+ text-align: center;
+ color: #333;
+ border: 1px solid #ccc;
+ cursor: pointer;
+ -webkit-transition: .5s all;
+ transition: .5s all
+}
+
+.layui-table-tool .layui-inline[lay-event]:hover {
+ border: 1px solid #999
+}
+
+.layui-table-tool-temp {
+ padding-right: 120px
+}
+
+.layui-table-tool-self {
+ position: absolute;
+ right: 17px;
+ top: 10px
+}
+
+.layui-table-tool .layui-table-tool-self .layui-inline[lay-event] {
+ margin: 0 0 0 10px
+}
+
+.layui-table-tool-panel {
+ position: absolute;
+ top: 29px;
+ left: -1px;
+ padding: 5px 0;
+ min-width: 150px;
+ min-height: 40px;
+ border: 1px solid #d2d2d2;
+ text-align: left;
+ overflow-y: auto;
+ background-color: #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
+}
+
+.layui-table-cell,
+.layui-table-tool-panel li {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap
+}
+
+.layui-table-tool-panel li {
+ padding: 0 10px;
+ line-height: 30px;
+ -webkit-transition: .5s all;
+ transition: .5s all
+}
+
+.layui-iconpicker-list li,
+.layui-keyboard-list li,
+.layui-menu li,
+.layui-menu-body-title a:hover,
+.layui-menu-body-title>.layui-icon:hover,
+.layui-nav .layui-nav-item a {
+ transition: all .3s
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] {
+ width: 100%;
+ padding-left: 28px
+}
+
+.layui-table-tool-panel li:hover {
+ background-color: #F6F6F6
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] i {
+ position: absolute;
+ left: 0;
+ top: 0
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] span {
+ padding: 0
+}
+
+.layui-table-tool .layui-table-tool-self .layui-table-tool-panel {
+ left: auto;
+ right: -1px
+}
+
+.layui-table-col-set {
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 20px;
+ height: 100%;
+ border-width: 0 0 0 1px;
+ background-color: #fff
+}
+
+.layui-table-sort {
+ width: 10px;
+ height: 20px;
+ margin-left: 5px;
+ cursor: pointer !important
+}
+
+.layui-table-sort .layui-edge {
+ position: absolute;
+ left: 5px;
+ border-width: 5px
+}
+
+.layui-table-sort .layui-table-sort-asc {
+ top: 3px;
+ border-top: none;
+ border-bottom-style: solid;
+ border-bottom-color: #b2b2b2
+}
+
+.layui-table-sort .layui-table-sort-asc:hover {
+ border-bottom-color: #666
+}
+
+.layui-table-sort .layui-table-sort-desc {
+ bottom: 5px;
+ border-bottom: none;
+ border-top-style: solid;
+ border-top-color: #b2b2b2
+}
+
+.layui-table-sort .layui-table-sort-desc:hover {
+ border-top-color: #666
+}
+
+.layui-table-sort[lay-sort=asc] .layui-table-sort-asc {
+ border-bottom-color: #000
+}
+
+.layui-table-sort[lay-sort=desc] .layui-table-sort-desc {
+ border-top-color: #000
+}
+
+.layui-table-cell {
+ height: 28px;
+ line-height: 28px;
+ padding: 0 15px;
+ position: relative;
+ box-sizing: border-box
+}
+
+.layui-table-cell .layui-form-checkbox[lay-skin=primary] {
+ top: -1px;
+ padding: 0
+}
+
+.layui-table-cell .layui-table-link {
+ color: #01AAED
+}
+
+.laytable-cell-checkbox,
+.laytable-cell-numbers,
+.laytable-cell-radio,
+.laytable-cell-space {
+ padding: 0;
+ text-align: center;
+ -webkit-box-pack: center
+}
+
+.layui-table-body {
+ position: relative;
+ overflow: auto;
+ margin-right: -1px;
+ margin-bottom: -1px
+}
+
+.layui-table-body .layui-none {
+ line-height: 26px;
+ padding: 30px 15px;
+ text-align: center;
+ color: #999
+}
+
+.layui-table-fixed {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 101
+}
+
+.layui-table-fixed .layui-table-body {
+ overflow: hidden
+}
+
+.layui-table-fixed-l {
+ box-shadow: 1px 0 8px rgba(0, 0, 0, .08)
+}
+
+.layui-table-fixed-r {
+ left: auto;
+ right: -1px;
+ border-width: 0 0 0 1px;
+ box-shadow: -1px 0 8px rgba(0, 0, 0, .08)
+}
+
+.layui-table-fixed-r .layui-table-header {
+ position: relative;
+ overflow: visible
+}
+
+.layui-table-mend {
+ position: absolute;
+ right: -49px;
+ top: 0;
+ height: 100%;
+ width: 50px
+}
+
+.layui-table-tool {
+ position: relative;
+ z-index: 890;
+ width: 100%;
+ min-height: 50px;
+ line-height: 30px;
+ padding: 10px 15px;
+ border-width: 0 0 1px;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 8%)
+}
+
+.layui-table-tool .layui-btn-container {
+ margin-bottom: -10px
+}
+
+.layui-table-page,
+.layui-table-total {
+ border-width: 1px 0 0;
+ margin-bottom: -1px;
+ overflow: hidden
+}
+
+.layui-table-page {
+ position: relative;
+ width: 100%;
+ padding: 7px 7px 0;
+ height: 41px;
+ font-size: 12px;
+ white-space: nowrap
+}
+
+.layui-table-page>div {
+ height: 26px
+}
+
+.layui-table-page .layui-laypage {
+ margin: 0
+}
+
+.layui-table-page .layui-laypage a,
+.layui-table-page .layui-laypage span {
+ height: 26px;
+ line-height: 26px;
+ margin-bottom: 10px;
+ border: none;
+ background: 0 0
+}
+
+.layui-table-page .layui-laypage a,
+.layui-table-page .layui-laypage span.layui-laypage-curr {
+ padding: 0 12px
+}
+
+.layui-table-page .layui-laypage span {
+ margin-left: 0;
+ padding: 0
+}
+
+.layui-table-page .layui-laypage .layui-laypage-prev {
+ margin-left: -7px !important
+}
+
+.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
+ left: 0;
+ top: 0;
+ padding: 0
+}
+
+.layui-table-page .layui-laypage button,
+.layui-table-page .layui-laypage input {
+ height: 26px;
+ line-height: 26px
+}
+
+.layui-table-page .layui-laypage input {
+ width: 40px
+}
+
+.layui-table-page .layui-laypage button {
+ padding: 0 10px
+}
+
+.layui-table-page select {
+ height: 18px
+}
+
+.layui-table-pagebar {
+ float: right;
+ line-height: 26px
+}
+
+.layui-table-view select[lay-ignore] {
+ display: inline-block
+}
+
+.layui-table-patch .layui-table-cell {
+ padding: 0;
+ width: 30px
+}
+
+.layui-table-edit {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ padding: 0 14px 1px;
+ border-radius: 0;
+ box-shadow: 1px 1px 20px rgba(0, 0, 0, .15)
+}
+
+.layui-table-edit:focus {
+ border-color: #5FB878 !important
+}
+
+select.layui-table-edit {
+ padding: 0 0 0 10px;
+ border-color: #d2d2d2
+}
+
+.layui-table-view .layui-form-checkbox,
+.layui-table-view .layui-form-radio,
+.layui-table-view .layui-form-switch {
+ top: 0;
+ margin: 0;
+ box-sizing: content-box
+}
+
+.layui-colorpicker-alpha-slider,
+.layui-colorpicker-side-slider,
+.layui-menu,
+.layui-menu *,
+.layui-nav {
+ box-sizing: border-box
+}
+
+.layui-table-view .layui-form-checkbox {
+ top: -1px;
+ height: 26px;
+ line-height: 26px
+}
+
+.layui-table-view .layui-form-checkbox i {
+ height: 26px
+}
+
+.layui-table-grid .layui-table-cell {
+ overflow: visible
+}
+
+.layui-table-grid-down {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 26px;
+ height: 100%;
+ padding: 5px 0;
+ border-width: 0 0 0 1px;
+ text-align: center;
+ background-color: #fff;
+ color: #999;
+ cursor: pointer
+}
+
+.layui-table-grid-down .layui-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -8px 0 0 -8px
+}
+
+.layui-table-grid-down:hover {
+ background-color: #fbfbfb
+}
+
+body .layui-table-tips .layui-layer-content {
+ background: 0 0;
+ padding: 0;
+ box-shadow: 0 1px 6px rgba(0, 0, 0, .12)
+}
+
+.layui-table-tips-main {
+ margin: -44px 0 0 -1px;
+ max-height: 150px;
+ padding: 8px 15px;
+ font-size: 14px;
+ overflow-y: scroll;
+ background-color: #fff;
+ color: #666
+}
+
+.layui-table-tips-c {
+ position: absolute;
+ right: -3px;
+ top: -13px;
+ width: 20px;
+ height: 20px;
+ padding: 3px;
+ cursor: pointer;
+ background-color: #666;
+ border-radius: 50%;
+ color: #fff
+}
+
+.layui-table-tips-c:hover {
+ background-color: #777
+}
+
+.layui-table-tips-c:before {
+ position: relative;
+ right: -2px
+}
+
+.layui-upload-file {
+ display: none !important;
+ opacity: .01;
+ filter: Alpha(opacity=1)
+}
+
+.layui-upload-drag,
+.layui-upload-form,
+.layui-upload-wrap {
+ display: inline-block
+}
+
+.layui-upload-list {
+ margin: 10px 0
+}
+
+.layui-upload-choose {
+ max-width: 200px;
+ padding: 0 10px;
+ color: #999;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap
+}
+
+.layui-upload-drag {
+ position: relative;
+ padding: 30px;
+ border: 1px dashed #e2e2e2;
+ background-color: #fff;
+ text-align: center;
+ cursor: pointer;
+ color: #999
+}
+
+.layui-upload-drag .layui-icon {
+ font-size: 50px;
+ color: #009688
+}
+
+.layui-upload-drag[lay-over] {
+ border-color: #009688
+}
+
+.layui-upload-iframe {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border: 0;
+ visibility: hidden
+}
+
+.layui-upload-wrap {
+ position: relative;
+ vertical-align: middle
+}
+
+.layui-upload-wrap .layui-upload-file {
+ display: block !important;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 10;
+ font-size: 100px;
+ width: 100%;
+ height: 100%;
+ opacity: .01;
+ filter: Alpha(opacity=1);
+ cursor: pointer
+}
+
+.layui-btn-container .layui-upload-choose {
+ padding-left: 0
+}
+
+.layui-menu {
+ position: relative;
+ margin: 5px 0;
+ background-color: #fff
+}
+
+.layui-menu li,
+.layui-menu-body-title a {
+ padding: 5px 15px
+}
+
+.layui-menu li {
+ position: relative;
+ margin: 1px 0;
+ width: calc(100% + 1px);
+ line-height: 26px;
+ color: rgba(0, 0, 0, .8);
+ font-size: 14px;
+ white-space: nowrap;
+ cursor: pointer
+}
+
+.layui-menu li:hover {
+ background-color: #F6F6F6
+}
+
+.layui-menu-item-parent:hover>.layui-menu-body-panel {
+ display: block;
+ animation-name: layui-fadein;
+ animation-duration: .3s;
+ animation-fill-mode: both;
+ animation-delay: .2s
+}
+
+.layui-menu-item-group .layui-menu-body-title,
+.layui-menu-item-parent .layui-menu-body-title {
+ padding-right: 25px
+}
+
+.layui-menu .layui-menu-item-divider:hover,
+.layui-menu .layui-menu-item-group:hover,
+.layui-menu .layui-menu-item-none:hover {
+ background: 0 0;
+ cursor: default
+}
+
+.layui-menu .layui-menu-item-group>ul {
+ margin: 5px 0 -5px
+}
+
+.layui-menu .layui-menu-item-group>.layui-menu-body-title {
+ color: rgba(0, 0, 0, .35);
+ user-select: none
+}
+
+.layui-menu .layui-menu-item-none {
+ color: rgba(0, 0, 0, .35);
+ cursor: default;
+ text-align: center
+}
+
+.layui-menu .layui-menu-item-divider {
+ margin: 5px 0;
+ padding: 0;
+ height: 0;
+ line-height: 0;
+ border-bottom: 1px solid #eee;
+ overflow: hidden
+}
+
+.layui-menu .layui-menu-item-down:hover,
+.layui-menu .layui-menu-item-up:hover {
+ cursor: pointer
+}
+
+.layui-menu .layui-menu-item-up>.layui-menu-body-title {
+ color: rgba(0, 0, 0, .8)
+}
+
+.layui-menu .layui-menu-item-up>ul {
+ visibility: hidden;
+ height: 0;
+ overflow: hidden
+}
+
+.layui-menu .layui-menu-item-down:hover>.layui-menu-body-title>.layui-icon,
+.layui-menu .layui-menu-item-up>.layui-menu-body-title:hover>.layui-icon {
+ color: rgba(0, 0, 0, 1)
+}
+
+.layui-menu .layui-menu-item-down>ul {
+ visibility: visible;
+ height: auto
+}
+
+.layui-breadcrumb,
+.layui-tree-btnGroup {
+ visibility: hidden
+}
+
+.layui-menu .layui-menu-item-checked,
+.layui-menu .layui-menu-item-checked2 {
+ background-color: #F6F6F6 !important;
+ color: #5FB878
+}
+
+.layui-menu .layui-menu-item-checked a,
+.layui-menu .layui-menu-item-checked2 a {
+ color: #5FB878
+}
+
+.layui-menu .layui-menu-item-checked:after {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 3px solid #5FB878;
+ content: ""
+}
+
+.layui-menu-body-title {
+ position: relative;
+ overflow: hidden;
+ text-overflow: ellipsis
+}
+
+.layui-menu-body-title a {
+ display: block;
+ margin: -5px -15px;
+ color: rgba(0, 0, 0, .8)
+}
+
+.layui-menu-body-title>.layui-icon {
+ position: absolute;
+ right: 0;
+ top: 0;
+ font-size: 14px
+}
+
+.layui-menu-body-title>.layui-icon-right {
+ right: -1px
+}
+
+.layui-menu-body-panel {
+ display: none;
+ position: absolute;
+ top: -7px;
+ left: 100%;
+ z-index: 1000;
+ margin-left: 13px;
+ padding: 5px 0
+}
+
+.layui-menu-body-panel:before {
+ content: "";
+ position: absolute;
+ width: 20px;
+ left: -16px;
+ top: 0;
+ bottom: 0
+}
+
+.layui-menu-body-panel-left {
+ left: auto;
+ right: 100%;
+ margin: 0 13px
+}
+
+.layui-menu-body-panel-left:before {
+ left: auto;
+ right: -16px
+}
+
+.layui-menu-lg li {
+ line-height: 32px
+}
+
+.layui-menu-lg .layui-menu-body-title a:hover,
+.layui-menu-lg li:hover {
+ background: 0 0;
+ color: #5FB878
+}
+
+.layui-menu-lg li .layui-menu-body-panel {
+ margin-left: 14px
+}
+
+.layui-menu-lg li .layui-menu-body-panel-left {
+ margin: 0 15px
+}
+
+.layui-dropdown {
+ position: absolute;
+ left: -999999px;
+ top: -999999px;
+ z-index: 66666666;
+ margin: 5px 0;
+ min-width: 100px
+}
+
+.layui-dropdown:before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 6px;
+ left: 0;
+ top: -6px
+}
+
+.layui-dropdown .layui-none {
+ line-height: 26px;
+ color: #999;
+ text-align: center
+}
+
+.layui-iconpicker {
+ position: relative;
+ height: 38px;
+ line-height: 38px;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 2px;
+ cursor: pointer
+}
+
+.layui-iconpicker .layui-inline {
+ height: 36px;
+ line-height: 36px;
+ vertical-align: top
+}
+
+.layui-iconpicker-title {
+ padding-left: 5px
+}
+
+.layui-iconpicker-main {
+ padding: 0 10px
+}
+
+.layui-iconpicker-main .layui-icon {
+ font-size: 20px
+}
+
+.layui-iconpicker-main .layui-inline {
+ vertical-align: top
+}
+
+.layui-iconpicker-split .layui-iconpicker-main {
+ padding: 0 15px;
+ border-right-width: 1px;
+ border-right-style: solid
+}
+
+.layui-iconpicker-suffix {
+ position: relative;
+ width: 35px;
+ text-align: center
+}
+
+.layui-iconpicker-suffix .layui-icon {
+ font-size: 14px;
+ color: rgba(0, 0, 0, .5);
+ transition: all .3s
+}
+
+.layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down {
+ transform: rotate(180deg)
+}
+
+.layui-iconpicker-none {
+ color: rgba(0, 0, 0, .5)
+}
+
+.layui-iconpicker-search {
+ padding: 10px;
+ box-shadow: 0 2px 8px #f0f1f2;
+ border-bottom: 1px solid whitesmoke;
+}
+
+.layui-iconpicker-list {
+ padding: 10px 10px 5px
+}
+
+.layui-iconpicker-list ul {
+ width: 262px;
+ margin-right: -6px
+}
+
+.layui-iconpicker-list li {
+ display: inline-block;
+ vertical-align: top;
+ width: 60px;
+ margin: 0 5px 5px 0;
+ padding: 5px;
+ border: 1px solid #eee;
+ border-radius: 2px;
+ cursor: pointer;
+ text-align: center
+}
+
+.layui-iconpicker-list li:hover {
+ background-color: #FAFAFA;
+ color: rgba(0, 0, 0, .5)
+}
+
+.layui-iconpicker-list li.layui-this {
+ border-color: #5FB878;
+ color: #5FB878
+}
+
+.layui-iconpicker-list li .layui-icon {
+ font-size: 20px
+}
+
+.layui-iconpicker-list li .layui-elip {
+ margin-top: 2px;
+ line-height: 20px;
+ font-size: 12px
+}
+
+.layui-iconpicker-list .layui-none {
+ margin: 30px 0 35px
+}
+
+.layui-iconpicker-scroll .layui-iconpicker-list {
+ max-height: 194px;
+ overflow: auto
+}
+
+.layui-iconpicker-page {
+ position: relative;
+ padding: 10px 10px 5px;
+ border-top: 1px solid #eee;
+ text-align: right
+}
+
+.layui-iconpicker-page .layui-laypage {
+ margin: 0
+}
+
+.layui-iconpicker-page .layui-laypage a,
+.layui-iconpicker-page .layui-laypage span {
+ padding: 0 10px;
+ color: #666
+}
+
+.layui-iconpicker-page .layui-laypage-count {
+ position: absolute;
+ left: 10px
+}
+
+.layui-iconpicker-page .layui-laypage-curr .layui-laypage-em {
+ background: 0 0
+}
+
+.layui-iconpicker-page .layui-laypage-curr em {
+ color: #666;
+ color: rgba(0, 0, 0, .6)
+}
+
+.layui-iconpicker-page .layui-laypage-first,
+.layui-iconpicker-page .layui-laypage-last,
+.layui-iconpicker-page .layui-laypage-spr {
+ display: none
+}
+
+.layui-keyboard-header {
+ height: 40px;
+ line-height: 40px;
+ padding: 0 60px;
+ text-align: center;
+ background-color: #fff;
+ box-shadow: 0 2px 8px #f0f1f2;
+ border-bottom: 1px solid whitesmoke;
+}
+
+.layui-keyboard-list {
+ padding: 10px 10px 5px;
+ text-align: center
+}
+
+.layui-keyboard-header button {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ height: 20px;
+ line-height: 20px;
+ border: none;
+ color: #009688
+}
+
+.layui-keyboard-header button:first-child {
+ left: 10px;
+ right: auto;
+ color: #999
+}
+
+.layui-keyboard-list ul {
+ margin-right: -5px
+}
+
+.layui-keyboard-list li {
+ display: inline-block;
+ vertical-align: top;
+ margin: 0 5px 5px 0;
+ padding: 5px;
+ width: 30px;
+ height: 36px;
+ line-height: 26px;
+ border: 1px solid #eee;
+ border-radius: 2px;
+ cursor: pointer;
+ text-align: center;
+ background-color: #fff
+}
+
+.layui-keyboard-list li:hover {
+ background-color: #FAFAFA;
+ color: rgba(0, 0, 0, .5)
+}
+
+.layui-keyboard-list li.layui-this {
+ border-color: #5FB878;
+ color: #5FB878
+}
+
+.layui-nav {
+ position: relative;
+ padding: 0 20px;
+ background-color: #393D49;
+ color: #fff;
+ border-radius: 2px;
+ font-size: 0
+}
+
+.layui-nav * {
+ font-size: 14px
+}
+
+.layui-nav .layui-nav-item {
+ position: relative;
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+ vertical-align: middle;
+ line-height: 60px
+}
+
+.layui-nav .layui-nav-item a {
+ display: block;
+ padding: 0 20px;
+ color: #fff;
+ color: rgba(255, 255, 255, .7);
+ -webkit-transition: all .3s
+}
+
+.layui-nav .layui-this:after,
+.layui-nav-bar {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 0;
+ height: 5px;
+ background-color: #5FB878;
+ transition: all .2s;
+ -webkit-transition: all .2s;
+ pointer-events: none
+}
+
+.layui-nav-bar {
+ z-index: 1000
+}
+
+.layui-nav[lay-bar=disabled] .layui-nav-bar {
+ display: none
+}
+
+.layui-nav .layui-nav-item a:hover,
+.layui-nav .layui-this a {
+ color: #fff
+}
+
+.layui-nav .layui-this:after {
+ top: auto;
+ bottom: 0;
+ width: 100%
+}
+
+.layui-nav-img {
+ width: 30px;
+ height: 30px;
+ margin-right: 5px;
+ border-radius: 50%
+}
+
+.layui-nav .layui-nav-more {
+ position: absolute;
+ top: 0;
+ right: 3px;
+ left: auto !important;
+ margin-top: 0;
+ font-size: 12.5px !important;
+ cursor: pointer;
+ transition: all .2s;
+ -webkit-transition: all .2s
+}
+
+.layui-nav .layui-nav-mored,
+.layui-nav-itemed>a .layui-nav-more {
+ transform: rotate(180deg)
+}
+
+.layui-nav-child {
+ display: none;
+ position: absolute;
+ left: 0;
+ top: 65px;
+ min-width: 100%;
+ line-height: 36px;
+ padding: 5px 0;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
+ border: 1px solid #eee;
+ background-color: #fff;
+ z-index: 100;
+ border-radius: 2px;
+ white-space: nowrap
+}
+
+.layui-nav .layui-nav-child a {
+ color: #666;
+ color: rgba(0, 0, 0, .8)
+}
+
+.layui-nav .layui-nav-child a:hover {
+ background-color: #F6F6F6;
+ color: rgba(0, 0, 0, .8)
+}
+
+.layui-nav-child dd {
+ margin: 1px 0;
+ position: relative
+}
+
+.layui-nav-child dd.layui-this {
+ background-color: #F6F6F6;
+ color: #000
+}
+
+.layui-nav-child dd.layui-this:after {
+ display: none
+}
+
+.layui-nav-child-r {
+ left: auto;
+ right: 0
+}
+
+.layui-nav-child-c {
+ text-align: center
+}
+
+.layui-nav-tree {
+ width: 200px;
+ padding: 0
+}
+
+.layui-nav-tree .layui-nav-item {
+ display: block;
+ width: 100%;
+ line-height: 40px
+}
+
+.layui-nav-tree .layui-nav-item a {
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap
+}
+
+.layui-nav-tree .layui-nav-item>a {
+ padding-top: 5px;
+ padding-bottom: 5px
+}
+
+.layui-nav-tree .layui-nav-more {
+ right: 15px
+}
+
+.layui-nav-tree .layui-nav-item>a .layui-nav-more {
+ padding: 5px 0
+}
+
+.layui-nav-tree .layui-nav-bar {
+ width: 5px;
+ height: 0;
+ background-color: #009688
+}
+
+.layui-side .layui-nav-tree .layui-nav-bar {
+ width: 2px
+}
+
+.layui-nav-tree .layui-nav-child dd.layui-this,
+.layui-nav-tree .layui-nav-child dd.layui-this a,
+.layui-nav-tree .layui-this,
+.layui-nav-tree .layui-this>a,
+.layui-nav-tree .layui-this>a:hover {
+ background-color: #009688;
+ color: #fff
+}
+
+.layui-nav-tree .layui-this:after {
+ display: none
+}
+
+.layui-nav-itemed>a,
+.layui-nav-tree .layui-nav-title a,
+.layui-nav-tree .layui-nav-title a:hover {
+ color: #fff !important
+}
+
+.layui-nav-tree .layui-nav-child {
+ position: relative;
+ z-index: 0;
+ top: 0;
+ border: none;
+ box-shadow: none
+}
+
+.layui-nav-tree .layui-nav-child dd {
+ margin: 0
+}
+
+.layui-nav-tree .layui-nav-child a {
+ color: #fff;
+ color: rgba(255, 255, 255, .7)
+}
+
+.layui-nav-tree .layui-nav-child,
+.layui-nav-tree .layui-nav-child a:hover {
+ background: 0 0;
+ color: #fff
+}
+
+.layui-nav-itemed>.layui-nav-child {
+ display: block;
+ background-color: rgba(0, 0, 0, .3) !important
+}
+
+.layui-nav-itemed>.layui-nav-child>.layui-this>.layui-nav-child {
+ display: block
+}
+
+.layui-nav-tree.layui-bg-gray a,
+.layui-nav.layui-bg-gray .layui-nav-item a {
+ color: #666 !important;
+ color: rgba(0, 0, 0, .8) !important
+}
+
+.layui-nav-tree.layui-bg-gray .layui-nav-itemed>.layui-nav-child {
+ background: 0 0 !important
+}
+
+.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,
+.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this a {
+ background: 0 0 !important;
+ color: #5FB878 !important;
+ font-weight: 700
+}
+
+.layui-nav.layui-bg-gray .layui-nav-bar {
+ background-color: #5FB878
+}
+
+.layui-nav-side {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ overflow-x: hidden;
+ z-index: 999
+}
+
+.layui-breadcrumb {
+ font-size: 0
+}
+
+.layui-breadcrumb>* {
+ font-size: 14px
+}
+
+.layui-breadcrumb a:hover {
+ color: #5FB878 !important
+}
+
+.layui-breadcrumb a cite {
+ color: #999;
+ font-style: normal
+}
+
+.layui-breadcrumb span[lay-separator] {
+ margin: 0 10px;
+ color: #ccc
+}
+
+.layui-tab {
+ margin: 10px 0;
+ text-align: left !important
+}
+
+.layui-tab[overflow]>.layui-tab-title {
+ overflow: hidden
+}
+
+.layui-tab-title {
+ position: relative;
+ left: 0;
+ height: 40px;
+ white-space: nowrap;
+ font-size: 0;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ transition: all .2s;
+ -webkit-transition: all .2s
+}
+
+.layui-tab-title li {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+ vertical-align: middle;
+ font-size: 14px;
+ transition: all .2s;
+ -webkit-transition: all .2s;
+ position: relative;
+ line-height: 40px;
+ min-width: 65px;
+ padding: 0 15px;
+ text-align: center;
+ cursor: pointer
+}
+
+.layui-tab-title li a {
+ display: block;
+ padding: 0 15px;
+ margin: 0 -15px
+}
+
+.layui-tab-title .layui-this {
+ color: #000
+}
+
+.layui-tab-title .layui-this:after {
+ position: absolute;
+ left: 0;
+ top: 0;
+ content: "";
+ width: 100%;
+ height: 41px;
+ border-width: 1px;
+ border-style: solid;
+ border-bottom-color: #fff;
+ border-radius: 2px 2px 0 0;
+ box-sizing: border-box;
+ pointer-events: none
+}
+
+.layui-tab-bar {
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 10;
+ width: 30px;
+ height: 39px;
+ line-height: 39px;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 2px;
+ text-align: center;
+ background-color: #fff;
+ cursor: pointer
+}
+
+.layui-tab-bar .layui-icon {
+ position: relative;
+ display: inline-block;
+ top: 3px;
+ transition: all .3s;
+ -webkit-transition: all .3s
+}
+
+.layui-tab-item {
+ display: none
+}
+
+.layui-tab-more {
+ padding-right: 30px;
+ height: auto !important;
+ white-space: normal !important
+}
+
+.layui-tab-more li.layui-this:after {
+ border-bottom-color: #eee;
+ border-radius: 2px
+}
+
+.layui-tab-more .layui-tab-bar .layui-icon {
+ top: -2px;
+ top: 3px\9;
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg)
+}
+
+:root .layui-tab-more .layui-tab-bar .layui-icon {
+ top: -2px\0/IE9
+}
+
+.layui-tab-content {
+ padding: 15px 0
+}
+
+.layui-tab-title li .layui-tab-close {
+ position: relative;
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ line-height: 20px;
+ margin-left: 8px;
+ top: 1px;
+ text-align: center;
+ font-size: 14px;
+ color: #c2c2c2;
+ transition: all .2s;
+ -webkit-transition: all .2s
+}
+
+.layui-tab-title li .layui-tab-close:hover {
+ border-radius: 2px;
+ background-color: #FF5722;
+ color: #fff
+}
+
+.layui-tab-brief>.layui-tab-title .layui-this {
+ color: #009688
+}
+
+.layui-tab-brief>.layui-tab-more li.layui-this:after,
+.layui-tab-brief>.layui-tab-title .layui-this:after {
+ border: none;
+ border-radius: 0;
+ border-bottom: 2px solid #5FB878
+}
+
+.layui-tab-brief[overflow]>.layui-tab-title .layui-this:after {
+ top: -1px
+}
+
+.layui-tab-card {
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 2px;
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
+}
+
+.layui-tab-card>.layui-tab-title {
+ background-color: #FAFAFA
+}
+
+.layui-tab-card>.layui-tab-title li {
+ margin-right: -1px;
+ margin-left: -1px
+}
+
+.layui-tab-card>.layui-tab-title .layui-this {
+ background-color: #fff
+}
+
+.layui-tab-card>.layui-tab-title .layui-this:after {
+ border-top: none;
+ border-width: 1px;
+ border-bottom-color: #fff
+}
+
+.layui-tab-card>.layui-tab-title .layui-tab-bar {
+ height: 40px;
+ line-height: 40px;
+ border-radius: 0;
+ border-top: none;
+ border-right: none
+}
+
+.layui-tab-card>.layui-tab-more .layui-this {
+ background: 0 0;
+ color: #5FB878
+}
+
+.layui-tab-card>.layui-tab-more .layui-this:after {
+ border: none
+}
+
+.layui-timeline {
+ padding-left: 5px
+}
+
+.layui-timeline-item {
+ position: relative;
+ padding-bottom: 20px
+}
+
+.layui-timeline-axis {
+ position: absolute;
+ left: -5px;
+ top: 0;
+ z-index: 10;
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ background-color: #fff;
+ color: #5FB878;
+ border-radius: 50%;
+ text-align: center;
+ cursor: pointer
+}
+
+.layui-timeline-axis:hover {
+ color: #FF5722
+}
+
+.layui-timeline-item:before {
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 0;
+ z-index: 0;
+ width: 1px;
+ height: 100%
+}
+
+.layui-timeline-item:first-child:before {
+ display: block
+}
+
+.layui-timeline-item:last-child:before {
+ display: none
+}
+
+.layui-timeline-content {
+ padding-left: 25px
+}
+
+.layui-timeline-title {
+ position: relative;
+ margin-bottom: 10px;
+ line-height: 22px
+}
+
+.layui-badge,
+.layui-badge-dot,
+.layui-badge-rim {
+ position: relative;
+ display: inline-block;
+ padding: 0 6px;
+ font-size: 12px;
+ text-align: center;
+ background-color: #FF5722;
+ color: #fff;
+ border-radius: 2px
+}
+
+.layui-badge {
+ height: 18px;
+ line-height: 18px
+}
+
+.layui-badge-dot {
+ width: 8px;
+ height: 8px;
+ padding: 0;
+ border-radius: 50%
+}
+
+.layui-badge-rim {
+ height: 18px;
+ line-height: 18px;
+ border-width: 1px;
+ border-style: solid;
+ background-color: #fff;
+ color: #666
+}
+
+.layui-btn .layui-badge,
+.layui-btn .layui-badge-dot {
+ margin-left: 5px
+}
+
+.layui-nav .layui-badge,
+.layui-nav .layui-badge-dot {
+ position: absolute;
+ top: 50%;
+ margin: -5px 6px 0
+}
+
+.layui-nav .layui-badge {
+ margin-top: -10px
+}
+
+.layui-tab-title .layui-badge,
+.layui-tab-title .layui-badge-dot {
+ left: 5px;
+ top: -2px
+}
+
+.layui-carousel {
+ position: relative;
+ left: 0;
+ top: 0;
+ background-color: #f8f8f8
+}
+
+.layui-carousel>[carousel-item] {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden
+}
+
+.layui-carousel>[carousel-item]:before {
+ position: absolute;
+ content: '\e63d';
+ left: 50%;
+ top: 50%;
+ width: 100px;
+ line-height: 20px;
+ margin: -10px 0 0 -50px;
+ text-align: center;
+ color: #c2c2c2;
+ font-family: layui-icon !important;
+ font-size: 30px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale
+}
+
+.layui-carousel>[carousel-item]>* {
+ display: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #f8f8f8;
+ transition-duration: .3s;
+ -webkit-transition-duration: .3s
+}
+
+.layui-carousel-updown>* {
+ -webkit-transition: .3s ease-in-out up;
+ transition: .3s ease-in-out up
+}
+
+.layui-carousel-arrow {
+ display: none\9;
+ opacity: 0;
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ margin-top: -18px;
+ width: 36px;
+ height: 36px;
+ line-height: 36px;
+ text-align: center;
+ font-size: 20px;
+ border: 0;
+ border-radius: 50%;
+ background-color: rgba(0, 0, 0, .2);
+ color: #fff;
+ -webkit-transition-duration: .3s;
+ transition-duration: .3s;
+ cursor: pointer
+}
+
+.layui-carousel-arrow[lay-type=add] {
+ left: auto !important;
+ right: 10px
+}
+
+.layui-carousel:hover .layui-carousel-arrow[lay-type=add],
+.layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] {
+ right: 20px
+}
+
+.layui-carousel[lay-arrow=always] .layui-carousel-arrow {
+ opacity: 1;
+ left: 20px
+}
+
+.layui-carousel[lay-arrow=none] .layui-carousel-arrow {
+ display: none
+}
+
+.layui-carousel-arrow:hover,
+.layui-carousel-ind ul:hover {
+ background-color: rgba(0, 0, 0, .35)
+}
+
+.layui-carousel:hover .layui-carousel-arrow {
+ display: block\9;
+ opacity: 1;
+ left: 20px
+}
+
+.layui-carousel-ind {
+ position: relative;
+ top: -35px;
+ width: 100%;
+ line-height: 0 !important;
+ text-align: center;
+ font-size: 0
+}
+
+.layui-carousel[lay-indicator=outside] {
+ margin-bottom: 30px
+}
+
+.layui-carousel[lay-indicator=outside] .layui-carousel-ind {
+ top: 10px
+}
+
+.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul {
+ background-color: rgba(0, 0, 0, .5)
+}
+
+.layui-carousel[lay-indicator=none] .layui-carousel-ind {
+ display: none
+}
+
+.layui-carousel-ind ul {
+ display: inline-block;
+ padding: 5px;
+ background-color: rgba(0, 0, 0, .2);
+ border-radius: 10px;
+ -webkit-transition-duration: .3s;
+ transition-duration: .3s
+}
+
+.layui-carousel-ind li {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 0 3px;
+ font-size: 14px;
+ background-color: #eee;
+ background-color: rgba(255, 255, 255, .5);
+ border-radius: 50%;
+ cursor: pointer;
+ -webkit-transition-duration: .3s;
+ transition-duration: .3s
+}
+
+.layui-carousel-ind li:hover {
+ background-color: rgba(255, 255, 255, .7)
+}
+
+.layui-carousel-ind li.layui-this {
+ background-color: #fff
+}
+
+.layui-carousel>[carousel-item]>.layui-carousel-next,
+.layui-carousel>[carousel-item]>.layui-carousel-prev,
+.layui-carousel>[carousel-item]>.layui-this {
+ display: block
+}
+
+.layui-carousel>[carousel-item]>.layui-this {
+ left: 0
+}
+
+.layui-carousel>[carousel-item]>.layui-carousel-prev {
+ left: -100%
+}
+
+.layui-carousel>[carousel-item]>.layui-carousel-next {
+ left: 100%
+}
+
+.layui-carousel>[carousel-item]>.layui-carousel-next.layui-carousel-left,
+.layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right {
+ left: 0
+}
+
+.layui-carousel>[carousel-item]>.layui-this.layui-carousel-left {
+ left: -100%
+}
+
+.layui-carousel>[carousel-item]>.layui-this.layui-carousel-right {
+ left: 100%
+}
+
+.layui-carousel[lay-anim=updown] .layui-carousel-arrow {
+ left: 50% !important;
+ top: 20px;
+ margin: 0 0 0 -18px
+}
+
+.layui-carousel[lay-anim=updown]>[carousel-item]>*,
+.layui-carousel[lay-anim=fade]>[carousel-item]>* {
+ left: 0 !important
+}
+
+.layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add] {
+ top: auto !important;
+ bottom: 20px
+}
+
+.layui-carousel[lay-anim=updown] .layui-carousel-ind {
+ position: absolute;
+ top: 50%;
+ right: 20px;
+ width: auto;
+ height: auto
+}
+
+.layui-carousel[lay-anim=updown] .layui-carousel-ind ul {
+ padding: 3px 5px
+}
+
+.layui-carousel[lay-anim=updown] .layui-carousel-ind li {
+ display: block;
+ margin: 6px 0
+}
+
+.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this {
+ top: 0
+}
+
+.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev {
+ top: -100%
+}
+
+.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next {
+ top: 100%
+}
+
+.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next.layui-carousel-left,
+.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev.layui-carousel-right {
+ top: 0
+}
+
+.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left {
+ top: -100%
+}
+
+.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right {
+ top: 100%
+}
+
+.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next,
+.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev {
+ opacity: 0
+}
+
+.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next.layui-carousel-left,
+.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev.layui-carousel-right {
+ opacity: 1
+}
+
+.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-left,
+.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-right {
+ opacity: 0
+}
+
+.layui-fixbar {
+ position: fixed;
+ right: 15px;
+ bottom: 15px;
+ z-index: 999999
+}
+
+.layui-fixbar li {
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ margin-bottom: 1px;
+ text-align: center;
+ cursor: pointer;
+ font-size: 30px;
+ background-color: #9F9F9F;
+ color: #fff;
+ border-radius: 2px;
+ opacity: .95
+}
+
+.layui-fixbar li:hover {
+ opacity: .85
+}
+
+.layui-fixbar li:active {
+ opacity: 1
+}
+
+.layui-fixbar .layui-fixbar-top {
+ display: none;
+ font-size: 40px
+}
+
+body .layui-util-face {
+ border: none;
+ background: 0 0
+}
+
+body .layui-util-face .layui-layer-content {
+ padding: 0;
+ background-color: #fff;
+ color: #666;
+ box-shadow: none
+}
+
+.layui-util-face .layui-layer-TipsG {
+ display: none
+}
+
+.layui-transfer-active,
+.layui-transfer-box {
+ display: inline-block;
+ vertical-align: middle
+}
+
+.layui-util-face ul {
+ position: relative;
+ width: 372px;
+ padding: 10px;
+ border: 1px solid #D9D9D9;
+ background-color: #fff;
+ box-shadow: 0 0 20px rgba(0, 0, 0, .2)
+}
+
+.layui-util-face ul li {
+ cursor: pointer;
+ float: left;
+ border: 1px solid #e8e8e8;
+ height: 22px;
+ width: 26px;
+ overflow: hidden;
+ margin: -1px 0 0 -1px;
+ padding: 4px 2px;
+ text-align: center
+}
+
+.layui-util-face ul li:hover {
+ position: relative;
+ z-index: 2;
+ border: 1px solid #eb7350;
+ background: #fff9ec
+}
+
+.layui-code {
+ position: relative;
+ margin: 10px 0;
+ padding: 15px;
+ line-height: 20px;
+ border: 1px solid #eee;
+ border-left-width: 6px;
+ background-color: #FAFAFA;
+ color: #333;
+ font-family: Courier New;
+ font-size: 12px
+}
+
+.layui-transfer-box,
+.layui-transfer-header,
+.layui-transfer-search {
+ border-width: 0;
+ border-style: solid;
+ border-color: #eee
+}
+
+.layui-transfer-box {
+ position: relative;
+ border-width: 1px;
+ width: 200px;
+ height: 360px;
+ border-radius: 2px;
+ background-color: #fff
+}
+
+.layui-transfer-box .layui-form-checkbox {
+ width: 100%;
+ margin: 0 !important
+}
+
+.layui-transfer-header {
+ height: 38px;
+ line-height: 38px;
+ padding: 0 10px;
+ border-bottom-width: 1px
+}
+
+.layui-transfer-search {
+ position: relative;
+ padding: 10px;
+ border-bottom-width: 1px
+}
+
+.layui-transfer-search .layui-input {
+ height: 32px;
+ padding-left: 30px;
+ font-size: 12px
+}
+
+.layui-transfer-search .layui-icon-search {
+ position: absolute;
+ left: 20px;
+ top: 50%;
+ margin-top: -8px;
+ color: #666
+}
+
+.layui-transfer-active {
+ margin: 0 15px
+}
+
+.layui-transfer-active .layui-btn {
+ display: block;
+ margin: 0;
+ padding: 0 15px;
+ background-color: #5FB878;
+ border-color: #5FB878;
+ color: #fff
+}
+
+.layui-transfer-active .layui-btn-disabled {
+ background-color: #FBFBFB;
+ border-color: #eee;
+ color: #d2d2d2
+}
+
+.layui-transfer-active .layui-btn:first-child {
+ margin-bottom: 15px
+}
+
+.layui-transfer-active .layui-btn .layui-icon {
+ margin: 0;
+ font-size: 14px !important
+}
+
+.layui-transfer-data {
+ padding: 5px 0;
+ overflow: auto
+}
+
+.layui-transfer-data li {
+ height: 32px;
+ line-height: 32px;
+ padding: 0 10px
+}
+
+.layui-transfer-data li:hover {
+ background-color: #F6F6F6;
+ transition: .5s all
+}
+
+.layui-transfer-data .layui-none {
+ padding: 15px 10px;
+ text-align: center;
+ color: #999
+}
+
+.layui-rate,
+.layui-rate * {
+ display: inline-block;
+ vertical-align: middle
+}
+
+.layui-rate {
+ padding: 10px 5px 10px 0;
+ font-size: 0
+}
+
+.layui-rate li i.layui-icon {
+ font-size: 20px;
+ color: #FFB800;
+ margin-right: 5px;
+ transition: all .3s;
+ -webkit-transition: all .3s
+}
+
+.layui-rate li i:hover {
+ cursor: pointer;
+ transform: scale(1.12);
+ -webkit-transform: scale(1.12)
+}
+
+.layui-rate[readonly] li i:hover {
+ cursor: default;
+ transform: scale(1)
+}
+
+.layui-colorpicker {
+ width: 26px;
+ height: 26px;
+ border: 1px solid #eee;
+ padding: 5px;
+ border-radius: 2px;
+ line-height: 24px;
+ display: inline-block;
+ cursor: pointer;
+ transition: all .3s;
+ -webkit-transition: all .3s
+}
+
+.layui-colorpicker:hover {
+ border-color: #d2d2d2
+}
+
+.layui-colorpicker.layui-colorpicker-lg {
+ width: 34px;
+ height: 34px;
+ line-height: 32px
+}
+
+.layui-colorpicker.layui-colorpicker-sm {
+ width: 24px;
+ height: 24px;
+ line-height: 22px
+}
+
+.layui-colorpicker.layui-colorpicker-xs {
+ width: 22px;
+ height: 22px;
+ line-height: 20px
+}
+
+.layui-colorpicker-trigger-bgcolor {
+ display: block;
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+ border-radius: 2px
+}
+
+.layui-colorpicker-trigger-span {
+ display: block;
+ height: 100%;
+ box-sizing: border-box;
+ border: 1px solid rgba(0, 0, 0, .15);
+ border-radius: 2px;
+ text-align: center
+}
+
+.layui-colorpicker-trigger-i {
+ display: inline-block;
+ color: #FFF;
+ font-size: 12px
+}
+
+.layui-colorpicker-trigger-i.layui-icon-close {
+ color: #999
+}
+
+.layui-colorpicker-main {
+ position: absolute;
+ left: -999999px;
+ top: -999999px;
+ z-index: 66666666;
+ width: 280px;
+ margin: 5px 0;
+ padding: 7px;
+ background: #FFF;
+ border: 1px solid #d2d2d2;
+ border-radius: 2px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
+}
+
+.layui-colorpicker-main-wrapper {
+ height: 180px;
+ position: relative
+}
+
+.layui-colorpicker-basis {
+ width: 260px;
+ height: 100%;
+ position: relative
+}
+
+.layui-colorpicker-basis-white {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: linear-gradient(90deg, #FFF, hsla(0, 0%, 100%, 0))
+}
+
+.layui-colorpicker-basis-black {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: linear-gradient(0deg, #000, transparent)
+}
+
+.layui-colorpicker-basis-cursor {
+ width: 10px;
+ height: 10px;
+ border: 1px solid #FFF;
+ border-radius: 50%;
+ position: absolute;
+ top: -3px;
+ right: -3px;
+ cursor: pointer
+}
+
+.layui-colorpicker-side {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 12px;
+ height: 100%;
+ background: linear-gradient(red, #FF0, #0F0, #0FF, #00F, #F0F, red)
+}
+
+.layui-colorpicker-side-slider {
+ width: 100%;
+ height: 5px;
+ box-shadow: 0 0 1px #888;
+ background: #FFF;
+ border-radius: 1px;
+ border: 1px solid #f0f0f0;
+ cursor: pointer;
+ position: absolute;
+ left: 0
+}
+
+.layui-colorpicker-main-alpha {
+ display: none;
+ height: 12px;
+ margin-top: 7px;
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
+}
+
+.layui-colorpicker-alpha-bgcolor {
+ height: 100%;
+ position: relative
+}
+
+.layui-colorpicker-alpha-slider {
+ width: 5px;
+ height: 100%;
+ box-shadow: 0 0 1px #888;
+ background: #FFF;
+ border-radius: 1px;
+ border: 1px solid #f0f0f0;
+ cursor: pointer;
+ position: absolute;
+ top: 0
+}
+
+.layui-colorpicker-main-pre {
+ padding-top: 7px;
+ font-size: 0
+}
+
+.layui-colorpicker-pre {
+ width: 20px;
+ height: 20px;
+ border-radius: 2px;
+ display: inline-block;
+ margin-left: 6px;
+ margin-bottom: 7px;
+ cursor: pointer
+}
+
+.layui-colorpicker-pre:nth-child(11n+1) {
+ margin-left: 0
+}
+
+.layui-colorpicker-pre-isalpha {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
+}
+
+.layui-colorpicker-pre.layui-this {
+ box-shadow: 0 0 3px 2px rgba(0, 0, 0, .15)
+}
+
+.layui-colorpicker-pre>div {
+ height: 100%;
+ border-radius: 2px
+}
+
+.layui-colorpicker-main-input {
+ text-align: right;
+ padding-top: 7px
+}
+
+.layui-colorpicker-main-input .layui-btn-container .layui-btn {
+ margin: 0 0 0 10px
+}
+
+.layui-colorpicker-main-input div.layui-inline {
+ float: left;
+ margin-right: 10px;
+ font-size: 14px
+}
+
+.layui-colorpicker-main-input input.layui-input {
+ width: 150px;
+ height: 30px;
+ color: #666
+}
+
+.layui-slider {
+ height: 4px;
+ background: #eee;
+ border-radius: 3px;
+ position: relative;
+ cursor: pointer
+}
+
+.layui-slider-bar {
+ border-radius: 3px;
+ position: absolute;
+ height: 100%
+}
+
+.layui-slider-step {
+ position: absolute;
+ top: 0;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: #FFF;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%)
+}
+
+.layui-slider-wrap {
+ width: 36px;
+ height: 36px;
+ position: absolute;
+ top: -16px;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ z-index: 10;
+ text-align: center
+}
+
+.layui-slider-wrap-btn {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: #FFF;
+ display: inline-block;
+ vertical-align: middle;
+ cursor: pointer;
+ transition: .3s
+}
+
+.layui-slider-wrap:after {
+ content: "";
+ height: 100%;
+ display: inline-block;
+ vertical-align: middle
+}
+
+.layui-slider-wrap-btn.layui-slider-hover,
+.layui-slider-wrap-btn:hover {
+ transform: scale(1.2)
+}
+
+.layui-slider-wrap-btn.layui-disabled:hover {
+ transform: scale(1) !important
+}
+
+.layui-slider-tips {
+ position: absolute;
+ top: -42px;
+ z-index: 66666666;
+ white-space: nowrap;
+ display: none;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ color: #FFF;
+ background: #000;
+ border-radius: 3px;
+ height: 25px;
+ line-height: 25px;
+ padding: 0 10px
+}
+
+.layui-slider-tips:after {
+ content: "";
+ position: absolute;
+ bottom: -12px;
+ left: 50%;
+ margin-left: -6px;
+ width: 0;
+ height: 0;
+ border-width: 6px;
+ border-style: solid;
+ border-color: #000 transparent transparent
+}
+
+.layui-slider-input {
+ width: 70px;
+ height: 32px;
+ border: 1px solid #eee;
+ border-radius: 3px;
+ font-size: 16px;
+ line-height: 32px;
+ position: absolute;
+ right: 0;
+ top: -14px
+}
+
+.layui-slider-input-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 20px;
+ height: 100%;
+ border-left: 1px solid #eee
+}
+
+.layui-slider-input-btn i {
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 20px;
+ height: 50%;
+ font-size: 12px;
+ line-height: 16px;
+ text-align: center;
+ color: #999
+}
+
+.layui-slider-input-btn i:first-child {
+ top: 0;
+ border-bottom: 1px solid #eee
+}
+
+.layui-slider-input-txt {
+ height: 100%;
+ font-size: 14px
+}
+
+.layui-slider-input-txt input {
+ height: 100%;
+ border: none
+}
+
+.layui-slider-input-btn i:hover {
+ color: #009688
+}
+
+.layui-slider-vertical {
+ width: 4px;
+ margin-left: 33px
+}
+
+.layui-slider-vertical .layui-slider-bar {
+ width: 4px
+}
+
+.layui-slider-vertical .layui-slider-step {
+ top: auto;
+ left: 0;
+ -webkit-transform: translateY(50%);
+ transform: translateY(50%)
+}
+
+.layui-slider-vertical .layui-slider-wrap {
+ top: auto;
+ left: -16px;
+ -webkit-transform: translateY(50%);
+ transform: translateY(50%)
+}
+
+.layui-slider-vertical .layui-slider-tips {
+ top: auto;
+ left: 2px
+}
+
+@media \0screen {
+ .layui-slider-wrap-btn {
+ margin-left: -20px
+ }
+
+ .layui-slider-vertical .layui-slider-wrap-btn {
+ margin-left: 0;
+ margin-bottom: -20px
+ }
+
+ .layui-slider-vertical .layui-slider-tips {
+ margin-left: -8px
+ }
+
+ .layui-slider>span {
+ margin-left: 8px
+ }
+}
+
+.layui-tree {
+ line-height: 22px
+}
+
+.layui-tree .layui-form-checkbox {
+ margin: 0 !important
+}
+
+.layui-tree-set {
+ width: 100%;
+ position: relative
+}
+
+.layui-tree-pack {
+ display: none;
+ padding-left: 20px;
+ position: relative
+}
+
+.layui-tree-iconClick,
+.layui-tree-main {
+ display: inline-block;
+ vertical-align: middle
+}
+
+.layui-tree-line .layui-tree-pack {
+ padding-left: 27px
+}
+
+.layui-tree-line .layui-tree-set .layui-tree-set:after {
+ content: "";
+ position: absolute;
+ top: 14px;
+ left: -9px;
+ width: 17px;
+ height: 0;
+ border-top: 1px dotted #c0c4cc
+}
+
+.layui-tree-entry {
+ position: relative;
+ padding: 3px 0;
+ height: 20px;
+ white-space: nowrap
+}
+
+.layui-tree-entry:hover {
+ background-color: #eee
+}
+
+.layui-tree-line .layui-tree-entry:hover {
+ background-color: rgba(0, 0, 0, 0)
+}
+
+.layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
+ color: #999;
+ text-decoration: underline;
+ transition: .3s
+}
+
+.layui-tree-main {
+ cursor: pointer;
+ padding-right: 10px
+}
+
+.layui-tree-line .layui-tree-set:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -9px;
+ width: 0;
+ height: 100%;
+ border-left: 1px dotted #c0c4cc
+}
+
+.layui-tree-line .layui-tree-set.layui-tree-setLineShort:before {
+ height: 13px
+}
+
+.layui-tree-line .layui-tree-set.layui-tree-setHide:before {
+ height: 0
+}
+
+.layui-tree-iconClick {
+ position: relative;
+ height: 20px;
+ line-height: 20px;
+ margin: 0 10px;
+ color: #c0c4cc
+}
+
+.layui-tree-icon {
+ height: 12px;
+ line-height: 12px;
+ width: 12px;
+ text-align: center;
+ border: 1px solid #c0c4cc
+}
+
+.layui-tree-iconClick .layui-icon {
+ font-size: 18px
+}
+
+.layui-tree-icon .layui-icon {
+ font-size: 12px;
+ color: #666
+}
+
+.layui-tree-iconArrow {
+ padding: 0 5px
+}
+
+.layui-tree-iconArrow:after {
+ content: "";
+ position: absolute;
+ left: 4px;
+ top: 3px;
+ z-index: 100;
+ width: 0;
+ height: 0;
+ border-width: 5px;
+ border-style: solid;
+ border-color: transparent transparent transparent #c0c4cc;
+ transition: .5s
+}
+
+.layui-tree-btnGroup,
+.layui-tree-editInput {
+ position: relative;
+ vertical-align: middle;
+ display: inline-block
+}
+
+.layui-tree-spread>.layui-tree-entry>.layui-tree-iconClick>.layui-tree-iconArrow:after {
+ transform: rotate(90deg) translate(3px, 4px)
+}
+
+.layui-tree-txt {
+ display: inline-block;
+ vertical-align: middle;
+ color: #555
+}
+
+.layui-tree-search {
+ margin-bottom: 15px;
+ color: #666
+}
+
+.layui-tree-btnGroup .layui-icon {
+ display: inline-block;
+ vertical-align: middle;
+ padding: 0 2px;
+ cursor: pointer
+}
+
+.layui-tree-btnGroup .layui-icon:hover {
+ color: #999;
+ transition: .3s
+}
+
+.layui-tree-entry:hover .layui-tree-btnGroup {
+ visibility: visible
+}
+
+.layui-tree-editInput {
+ height: 20px;
+ line-height: 20px;
+ padding: 0 3px;
+ border: none;
+ background-color: rgba(0, 0, 0, .05)
+}
+
+.layui-tree-emptyText {
+ text-align: center;
+ color: #999
+}
+
+.layui-anim {
+ -webkit-animation-duration: .3s;
+ -webkit-animation-fill-mode: both;
+ animation-duration: .3s;
+ animation-fill-mode: both
+}
+
+.layui-anim.layui-icon {
+ display: inline-block
+}
+
+.layui-anim-loop {
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite
+}
+
+.layui-trans,
+.layui-trans a {
+ transition: all .2s;
+ -webkit-transition: all .2s
+}
+
+@-webkit-keyframes layui-rotate {
+ from {
+ -webkit-transform: rotate(0)
+ }
+
+ to {
+ -webkit-transform: rotate(360deg)
+ }
+}
+
+@keyframes layui-rotate {
+ from {
+ transform: rotate(0)
+ }
+
+ to {
+ transform: rotate(360deg)
+ }
+}
+
+.layui-anim-rotate {
+ -webkit-animation-name: layui-rotate;
+ animation-name: layui-rotate;
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear
+}
+
+@-webkit-keyframes layui-up {
+ from {
+ -webkit-transform: translate3d(0, 100%, 0);
+ opacity: .3
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ opacity: 1
+ }
+}
+
+@keyframes layui-up {
+ from {
+ transform: translate3d(0, 100%, 0);
+ opacity: .3
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ opacity: 1
+ }
+}
+
+.layui-anim-up {
+ -webkit-animation-name: layui-up;
+ animation-name: layui-up
+}
+
+@-webkit-keyframes layui-upbit {
+ from {
+ -webkit-transform: translate3d(0, 15px, 0);
+ opacity: .3
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ opacity: 1
+ }
+}
+
+@keyframes layui-upbit {
+ from {
+ transform: translate3d(0, 15px, 0);
+ opacity: .3
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ opacity: 1
+ }
+}
+
+.layui-anim-upbit {
+ -webkit-animation-name: layui-upbit;
+ animation-name: layui-upbit
+}
+
+@keyframes layui-down {
+ 0% {
+ opacity: .3;
+ transform: translate3d(0, -100%, 0)
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate3d(0, 0, 0)
+ }
+}
+
+.layui-anim-down {
+ animation-name: layui-down
+}
+
+@keyframes layui-downbit {
+ 0% {
+ opacity: .3;
+ transform: translate3d(0, -5px, 0)
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate3d(0, 0, 0)
+ }
+}
+
+.layui-anim-downbit {
+ animation-name: layui-downbit
+}
+
+@-webkit-keyframes layui-scale {
+ 0% {
+ opacity: .3;
+ -webkit-transform: scale(.5)
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale(1)
+ }
+}
+
+@keyframes layui-scale {
+ 0% {
+ opacity: .3;
+ -ms-transform: scale(.5);
+ transform: scale(.5)
+ }
+
+ 100% {
+ opacity: 1;
+ -ms-transform: scale(1);
+ transform: scale(1)
+ }
+}
+
+.layui-anim-scale {
+ -webkit-animation-name: layui-scale;
+ animation-name: layui-scale
+}
+
+@-webkit-keyframes layui-scale-spring {
+ 0% {
+ opacity: .5;
+ -webkit-transform: scale(.5)
+ }
+
+ 80% {
+ opacity: .8;
+ -webkit-transform: scale(1.1)
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale(1)
+ }
+}
+
+@keyframes layui-scale-spring {
+ 0% {
+ opacity: .5;
+ transform: scale(.5)
+ }
+
+ 80% {
+ opacity: .8;
+ transform: scale(1.1)
+ }
+
+ 100% {
+ opacity: 1;
+ transform: scale(1)
+ }
+}
+
+.layui-anim-scaleSpring {
+ -webkit-animation-name: layui-scale-spring;
+ animation-name: layui-scale-spring
+}
+
+@keyframes layui-scalesmall {
+ 0% {
+ opacity: .3;
+ transform: scale(1.5)
+ }
+
+ 100% {
+ opacity: 1;
+ transform: scale(1)
+ }
+}
+
+.layui-anim-scalesmall {
+ animation-name: layui-scalesmall
+}
+
+@keyframes layui-scalesmall-spring {
+ 0% {
+ opacity: .3;
+ transform: scale(1.5)
+ }
+
+ 80% {
+ opacity: .8;
+ transform: scale(.9)
+ }
+
+ 100% {
+ opacity: 1;
+ transform: scale(1)
+ }
+}
+
+.layui-anim-scalesmall-spring {
+ animation-name: layui-scalesmall-spring
+}
+
+@-webkit-keyframes layui-fadein {
+ 0% {
+ opacity: 0
+ }
+
+ 100% {
+ opacity: 1
+ }
+}
+
+@keyframes layui-fadein {
+ 0% {
+ opacity: 0
+ }
+
+ 100% {
+ opacity: 1
+ }
+}
+
+.layui-anim-fadein {
+ -webkit-animation-name: layui-fadein;
+ animation-name: layui-fadein
+}
+
+@-webkit-keyframes layui-fadeout {
+ 0% {
+ opacity: 1
+ }
+
+ 100% {
+ opacity: 0
+ }
+}
+
+@keyframes layui-fadeout {
+ 0% {
+ opacity: 1
+ }
+
+ 100% {
+ opacity: 0
+ }
+}
+
+.layui-anim-fadeout {
+ -webkit-animation-name: layui-fadeout;
+ animation-name: layui-fadeout
+}
\ No newline at end of file
diff --git a/src/font/iconfont.eot b/src/font/iconfont.eot
new file mode 100644
index 00000000..7bc33745
Binary files /dev/null and b/src/font/iconfont.eot differ
diff --git a/src/font/iconfont.svg b/src/font/iconfont.svg
new file mode 100644
index 00000000..b64f7915
--- /dev/null
+++ b/src/font/iconfont.svg
@@ -0,0 +1,387 @@
+
+
+
diff --git a/src/font/iconfont.ttf b/src/font/iconfont.ttf
new file mode 100644
index 00000000..8661b19e
Binary files /dev/null and b/src/font/iconfont.ttf differ
diff --git a/src/font/iconfont.woff b/src/font/iconfont.woff
new file mode 100644
index 00000000..2e9cd2a6
Binary files /dev/null and b/src/font/iconfont.woff differ
diff --git a/src/font/iconfont.woff2 b/src/font/iconfont.woff2
new file mode 100644
index 00000000..4adc7ce4
Binary files /dev/null and b/src/font/iconfont.woff2 differ
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 00000000..f2a9afcd
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,50 @@
+import type { App } from 'vue'
+import type { IDefineComponent, InstallOptions } from './module/type/index'
+
+import "./css/layui.css";
+import LayRadio from './module/radio/index'
+import LayButton from './module/button/index'
+import LayIcon from './module/icon/index'
+import LayLayout from "./module/layout/index"
+import LaySide from "./module/side/index"
+import LayBody from "./module/body/index"
+import LayHeader from "./module/header/index"
+import LayFooter from "./module/footer/index"
+import LayLogo from "./module/logo/index"
+
+const components: Record = {
+ LayRadio,
+ LayButton,
+ LayIcon,
+ LayLayout,
+ LaySide,
+ LayHeader,
+ LayBody,
+ LayFooter,
+ LayLogo
+}
+
+const install = (app: App, options?: InstallOptions): void => {
+ const _options = options;
+ app.config.globalProperties.$PROOPTIONS = _options
+
+ for (const key in components) {
+ const item = components[key]
+ app.component(item.name || key, item)
+ }
+}
+
+export {
+ LayRadio,
+ LayIcon,
+ LayButton,
+ LayLayout,
+ LaySide,
+ LayHeader,
+ LayBody,
+ LayFooter,
+ LayLogo,
+ install,
+}
+
+export default { install }
diff --git a/src/module/body/index.ts b/src/module/body/index.ts
new file mode 100644
index 00000000..71e7fc3d
--- /dev/null
+++ b/src/module/body/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LayBody', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/body/index.vue b/src/module/body/index.vue
new file mode 100644
index 00000000..17d157d3
--- /dev/null
+++ b/src/module/body/index.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/src/module/button/index.ts b/src/module/button/index.ts
new file mode 100644
index 00000000..5a103a42
--- /dev/null
+++ b/src/module/button/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LayButton ', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/button/index.vue b/src/module/button/index.vue
new file mode 100644
index 00000000..ecbea342
--- /dev/null
+++ b/src/module/button/index.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
diff --git a/src/module/footer/index.ts b/src/module/footer/index.ts
new file mode 100644
index 00000000..24567c9e
--- /dev/null
+++ b/src/module/footer/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LayFooter', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/footer/index.vue b/src/module/footer/index.vue
new file mode 100644
index 00000000..2dfae169
--- /dev/null
+++ b/src/module/footer/index.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/src/module/header/index.ts b/src/module/header/index.ts
new file mode 100644
index 00000000..754facf7
--- /dev/null
+++ b/src/module/header/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LayHeader', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/header/index.vue b/src/module/header/index.vue
new file mode 100644
index 00000000..a2f1d6dd
--- /dev/null
+++ b/src/module/header/index.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/src/module/icon/index.ts b/src/module/icon/index.ts
new file mode 100644
index 00000000..b52d60e1
--- /dev/null
+++ b/src/module/icon/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LayIcon', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/icon/index.vue b/src/module/icon/index.vue
new file mode 100644
index 00000000..9eb717d7
--- /dev/null
+++ b/src/module/icon/index.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/src/module/layout/index.ts b/src/module/layout/index.ts
new file mode 100644
index 00000000..fd9067c0
--- /dev/null
+++ b/src/module/layout/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LayLayout', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/layout/index.vue b/src/module/layout/index.vue
new file mode 100644
index 00000000..6fc2fc73
--- /dev/null
+++ b/src/module/layout/index.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/src/module/logo/index.ts b/src/module/logo/index.ts
new file mode 100644
index 00000000..388106e5
--- /dev/null
+++ b/src/module/logo/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LayLogo', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/logo/index.vue b/src/module/logo/index.vue
new file mode 100644
index 00000000..b31d0143
--- /dev/null
+++ b/src/module/logo/index.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/src/module/radio/index.ts b/src/module/radio/index.ts
new file mode 100644
index 00000000..1164d0cb
--- /dev/null
+++ b/src/module/radio/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LayRadio ', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/radio/index.vue b/src/module/radio/index.vue
new file mode 100644
index 00000000..69e485a5
--- /dev/null
+++ b/src/module/radio/index.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/src/module/side/index.ts b/src/module/side/index.ts
new file mode 100644
index 00000000..0b0e25fc
--- /dev/null
+++ b/src/module/side/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+ app.component(Component.name || 'LaySide', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/side/index.vue b/src/module/side/index.vue
new file mode 100644
index 00000000..b2827ceb
--- /dev/null
+++ b/src/module/side/index.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/src/module/type/index.ts b/src/module/type/index.ts
new file mode 100644
index 00000000..545977d1
--- /dev/null
+++ b/src/module/type/index.ts
@@ -0,0 +1 @@
+export * from './public'
diff --git a/src/module/type/public.ts b/src/module/type/public.ts
new file mode 100644
index 00000000..fa0681fa
--- /dev/null
+++ b/src/module/type/public.ts
@@ -0,0 +1,17 @@
+import type { App, DefineComponent } from 'vue'
+export type StringObject = Record
+
+export type UnknownObject = Record
+
+export type UnknownFunction = (...arg: unknown[]) => unknown
+
+export type IDefineComponent = DefineComponent & {
+ install: (app: App, options?: InstallOptions) => void
+}
+
+export interface InstallOptions extends StringObject {
+ /** Pagination Attributes */
+ pagination?: null
+ /** Menu Attributes */
+ menu?: null
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..f09e7147
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "module": "esnext",
+ "target": "es2015",
+ "moduleResolution": "Node",
+ "strict": true,
+ "resolveJsonModule": true,
+ "declaration": true,
+ "emitDeclarationOnly": true,
+ "esModuleInterop": true,
+ "declarationDir": "types",
+ "lib": ["ESNext", "DOM"],
+ "paths": {
+ "/@src/*": ["./src/*"]
+ }
+ },
+ "include": ["src/**/*", "shims-vue.d.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..1b8eb1c3
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,44 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import babel from 'rollup-plugin-babel'
+import { name } from './package.json'
+import plugins from './docs/src/plugin/common-plugins'
+
+const camelize = (name: string) =>
+ name.replace(/(^|-)(\w)/g, (a, b, c) => c.toUpperCase())
+
+export default defineConfig({
+ root: path.resolve(__dirname, 'docs'),
+ resolve: {
+ alias: {
+ '/@src': path.resolve(__dirname, 'src'),
+ },
+ },
+ build: {
+ target: 'es2015',
+ outDir: path.resolve(__dirname, 'lib'),
+ lib: {
+ entry: path.resolve(__dirname, 'src/index.ts'),
+ name: camelize(name),
+ },
+ rollupOptions: {
+ output: {
+ exports: 'named',
+ globals: (id: string) => {
+ const name = id.replace(/^@/, '').split('/')[0]
+ return camelize(name)
+ },
+ },
+ external: (id: string) =>
+ /^(vue|@vue|element-plus|resize-observer-polyfill)/.test(id),
+ plugins: [
+ babel({
+ exclude: 'node_modules/**',
+ extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+ presets: ['@babel/preset-env', '@babel/preset-typescript'],
+ }),
+ ],
+ },
+ },
+ plugins,
+})