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

+ + Vue Version + + + Vue Router Version + + + Element Plus Version + +

+ +[开 发 文 档](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 的参数 + + + + + +::: + +##### 操作 + +::: demo 通过配置 menu 开启按钮插槽,通过 #menu 插槽定制显示内容,支持 columns 的参数 + + + + + +::: + +##### 插槽 + +::: demo + + + + + +::: + +##### 分页 + +::: 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 @@ + + \ 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 ? `` : ''} + + ` + }, +} 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 @@ + + + + Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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, +})