Commit 7280375ab2835e61221afae92aa5e42e9b7b02f5
Exists in
master
Merge branch 'master' into 'master'
Master See merge request !7
Showing
314 changed files
Show diff stats
Too many changes.
To preserve performance only 100 of 314 files displayed.
File mode changed
README.es.md
... | ... | @@ -0,0 +1,217 @@ |
1 | +<p align="center"> | |
2 | + <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg"> | |
3 | +</p> | |
4 | + | |
5 | +<p align="center"> | |
6 | + <a href="https://github.com/vuejs/vue"> | |
7 | + <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> | |
8 | + </a> | |
9 | + <a href="https://github.com/ElemeFE/element"> | |
10 | + <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui"> | |
11 | + </a> | |
12 | + <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow"> | |
13 | + <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Estado de Construcción"> | |
14 | + </a> | |
15 | + <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE"> | |
16 | + <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="Licencia"> | |
17 | + </a> | |
18 | + <a href="https://github.com/PanJiaChen/vue-element-admin/releases"> | |
19 | + <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="Liberación Github"> | |
20 | + </a> | |
21 | + <a href="https://gitter.im/vue-element-admin/discuss"> | |
22 | + <img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter"> | |
23 | + </a> | |
24 | + <a href="https://panjiachen.github.io/vue-element-admin-site/donate"> | |
25 | + <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="Donación"> | |
26 | + </a> | |
27 | +</p> | |
28 | + | |
29 | +Español | [English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | |
30 | + | |
31 | +## Introducción | |
32 | + | |
33 | +[vue-element-admin](https://panjiachen.github.io/vue-element-admin) es una interfáz de administración preparada para producción. Está basada en [vue](https://github.com/vuejs/vue) y usa [element-ui](https://github.com/ElemeFE/element) como conjunto de herramientas de interfáz de usuario. | |
34 | + | |
35 | +Vue Element Admin es una solución práctica basada en la nueva plataforma de desarrollo de vue, construida con soporte a i18 para el manejo de múltiples lenguajes, plantillas estándares para aplicaciones de negocio y un conjunto de asombrosas características. Esta herramienta ayuda a construir largas y complejas Aplicacones de una sola página (SPA). Creo que lo que necesites hacer, este proyecto te ayudará. | |
36 | + | |
37 | +- [Vista Prévia de la Aplicación](https://panjiachen.github.io/vue-element-admin) | |
38 | + | |
39 | +- [Documentación](https://panjiachen.github.io/vue-element-admin-site/) | |
40 | + | |
41 | +- [Canal de Gitter](https://gitter.im/vue-element-admin/discuss) | |
42 | + | |
43 | +- [Para Donaciones](https://panjiachen.github.io/vue-element-admin-site/donate/) | |
44 | + | |
45 | +- [Enlace de Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) | |
46 | + | |
47 | +- [Canal de Gitee](https://panjiachen.gitee.io/vue-element-admin/) | |
48 | + | |
49 | +- Plantilla base recomendada para usar: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) | |
50 | +- Aplicación de Escritorio: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) | |
51 | +- Plantilla de Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Créditos: [@Armour](https://github.com/Armour)) | |
52 | +- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) | |
53 | + | |
54 | +**Después de la versión `v4.1.0+`, la rama por defecto master no tendrá soporte para i18n. Por favor use [i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), los cambios serán incluidos en la rama master** | |
55 | + | |
56 | +**la versión actual es `v4.0+` construida con `vue-cli`. Si encuentra algún problema, por favor coloque un [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). Si desea usar la versión anterior, puede cambiar de rama a [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), no relacionado con `vue-cli`** | |
57 | + | |
58 | +**Este proyecto no está soportado para versiones muy viejas de navegadores (e.g. IE).** | |
59 | + | |
60 | +## Preparación | |
61 | + | |
62 | +Necesita instalar [node](https://nodejs.org/) y [git](https://git-scm.com/) localmente. El proyecto es basado en [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), toda la solicitud de datos simulada se realiza a través de [Mock.js](https://github.com/nuysoft/Mock). | |
63 | +Entendiendo y aprendiendo esto pudiera ayudarle con su proyecto. | |
64 | + | |
65 | + <p align="center"> | |
66 | + <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png"> | |
67 | +</p> | |
68 | + | |
69 | +## Patrocinantes | |
70 | + | |
71 | +Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace directo a tu sitio web. [[Se un Patrocinante]](https://www.patreon.com/panjiachen) | |
72 | + | |
73 | +<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Plantilla de Dashboard de administración hecha con Vue, React y Angular.</p> | |
74 | + | |
75 | +## Características | |
76 | + | |
77 | +``` | |
78 | +- Iniciar / Cerrar Sesión | |
79 | + | |
80 | +- Permisos de Authentication | |
81 | + - Página de Permisos | |
82 | + - Directivas de permisos | |
83 | + - Página de configuración de permisos | |
84 | + - Autenticación por dos pasos | |
85 | + | |
86 | +- Construcción Multi-entorno | |
87 | + - dev sit stage producción | |
88 | + | |
89 | +- Características Globales | |
90 | + - I18n | |
91 | + - Temas dinámicos | |
92 | + - Dynamic sidebar (soporte a rutas multi-nivel) | |
93 | + - Barra de rutas dinámica | |
94 | + - Tags-view (Tab page Support right-click operation) | |
95 | + - Svg Sprite | |
96 | + - Datos de simulación con Mock | |
97 | + - Pantalla completa | |
98 | + - Responsive Sidebar | |
99 | + | |
100 | +- Editor | |
101 | + - Editor de Texto Enriquecido | |
102 | + - Editor Markdown | |
103 | + - Editor JSON | |
104 | + | |
105 | +- Excel | |
106 | + - Exportación a Excel | |
107 | + - Carga de Excel | |
108 | + - Visualización de Excel | |
109 | + - Exportación como zip | |
110 | + | |
111 | +- Tabla | |
112 | + - Tabla Dinámica | |
113 | + - Tabla con Arrastrar y Soltar | |
114 | + - Tabla de edición en línea | |
115 | + | |
116 | +- Páginas de Error | |
117 | + - 401 | |
118 | + - 404 | |
119 | + | |
120 | +- Componentes | |
121 | + - Carga de Avatar | |
122 | + - Botón para subir al inicio | |
123 | + - Arrastrar y Soltar (Diaglogo) | |
124 | + - Arrastrar y Soltar (Seleccionar) | |
125 | + - Arrastrar y Soltar (Kanban) | |
126 | + - Arrastrar y Soltar (Lista) | |
127 | + - Panel de división | |
128 | + - Componente para soltar archivos | |
129 | + - Adhesión de objetos | |
130 | + - Contador hasta | |
131 | + | |
132 | +- Ejemplo Avanzado | |
133 | +- Registro de Errores | |
134 | +- Tablero de indicadores | |
135 | +- Página de Guías | |
136 | +- ECharts (Gráficos) | |
137 | +- Portapapeles | |
138 | +- Convertidor de Markdown a html | |
139 | +``` | |
140 | + | |
141 | +## Iniciando | |
142 | + | |
143 | +```bash | |
144 | +# clone el proyecto | |
145 | +git clone https://github.com/PanJiaChen/vue-element-admin.git | |
146 | + | |
147 | +# vaya al directorio clonado | |
148 | +cd vue-element-admin | |
149 | + | |
150 | +# instale las dependencias | |
151 | +npm install | |
152 | + | |
153 | +# corra el proyecto como desarrollador | |
154 | +npm run dev | |
155 | +``` | |
156 | + | |
157 | +Automáticamente se abrirá el siguiente enlace en su navegador http://localhost:9527 | |
158 | + | |
159 | +## Construcción | |
160 | + | |
161 | +```bash | |
162 | +# Construcción para entornos de prueba | |
163 | +npm run build:stage | |
164 | + | |
165 | +# Construcción para entornos de producción | |
166 | +npm run build:prod | |
167 | +``` | |
168 | + | |
169 | +## Avanzado | |
170 | + | |
171 | +```bash | |
172 | +# Vista previa con efectos de entorno | |
173 | +npm run preview | |
174 | + | |
175 | +# Vista previa con efectos + análisis de recursos estáticos | |
176 | +npm run preview -- --report | |
177 | + | |
178 | +# Chequeo de formato de código | |
179 | +npm run lint | |
180 | + | |
181 | +# Chequeo de formato de código y auto-corrección | |
182 | +npm run lint -- --fix | |
183 | +``` | |
184 | + | |
185 | +Vaya a [Documentación](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) para mayor información | |
186 | + | |
187 | +## Registro de Cambios | |
188 | + | |
189 | +Los cambios detallados por cada liberación se encuentran en [notas de liberación](https://github.com/PanJiaChen/vue-element-admin/releases). | |
190 | + | |
191 | +## Demostración en línea | |
192 | + | |
193 | +[Vista Prévia de la Aplicación](https://panjiachen.github.io/vue-element-admin) | |
194 | + | |
195 | +## Donación | |
196 | + | |
197 | +Si este proyecto es de mucha ayuda para ti, puedes comprarle al autor un vaso de jugo :tropical_drink: | |
198 | + | |
199 | + | |
200 | + | |
201 | +[dona por Paypal](https://www.paypal.me/panfree23) | |
202 | + | |
203 | +[Comprame un Café](https://www.buymeacoffee.com/Pan) | |
204 | + | |
205 | +## Navegadores Soportados | |
206 | + | |
207 | +Navegadores modernos e Internet Explorer 10+. | |
208 | + | |
209 | +| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari | | |
210 | +| --------- | --------- | --------- | --------- | | |
211 | +| IE10, IE11, Edge| últimas 2 versiones| últimas 2 versiones| últimas 2 versiones | |
212 | + | |
213 | +## Licencia | |
214 | + | |
215 | +[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) | |
216 | + | |
217 | +Copyright (c) 2017-presente PanJiaChen | ... | ... |
README.ja.md
... | ... | @@ -0,0 +1,213 @@ |
1 | +<p align="center"> | |
2 | + <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg"> | |
3 | +</p> | |
4 | + | |
5 | +<p align="center"> | |
6 | + <a href="https://github.com/vuejs/vue"> | |
7 | + <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> | |
8 | + </a> | |
9 | + <a href="https://github.com/ElemeFE/element"> | |
10 | + <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui"> | |
11 | + </a> | |
12 | + <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow"> | |
13 | + <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status"> | |
14 | + </a> | |
15 | + <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE"> | |
16 | + <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> | |
17 | + </a> | |
18 | + <a href="https://github.com/PanJiaChen/vue-element-admin/releases"> | |
19 | + <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release"> | |
20 | + </a> | |
21 | + <a href="https://gitter.im/vue-element-admin/discuss"> | |
22 | + <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter"> | |
23 | + </a> | |
24 | + <a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/donate"> | |
25 | + <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> | |
26 | + </a> | |
27 | +</p> | |
28 | + | |
29 | +日本語 | [English](./README.md) | [简体中文](./README.zh-CN.md) | [Spanish](./README.es.md) | |
30 | + | |
31 | +## 概要 | |
32 | + | |
33 | +[vue-element-admin](https://panjiachen.github.io/vue-element-admin) は管理画面のフロントエンドのインタフェース,[vue](https://github.com/vuejs/vue) と [element-ui](https://github.com/ElemeFE/element)を使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています、素早くビジネス用の管理画面の現型を構築に役立ちます。 | |
34 | + | |
35 | +- [デモページ](https://panjiachen.github.io/vue-element-admin) | |
36 | + | |
37 | +- [ドキュメント](https://panjiachen.github.io/vue-element-admin-site/) | |
38 | + | |
39 | +- [Gitter](https://gitter.im/vue-element-admin/discuss) | |
40 | + | |
41 | +- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate) | |
42 | + | |
43 | +- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) | |
44 | + | |
45 | +- おすすめシンプルテンプレート: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) | |
46 | +- デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) | |
47 | +- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour)) | |
48 | +- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) | |
49 | + | |
50 | +**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update** | |
51 | + | |
52 | +**現在のバージョン `v4.0+` は `vue-cli` で構築,バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。`vue-cli`に依存しないです。** | |
53 | + | |
54 | +**低いバージョンのブラウザはサーポートしないです(例えば ie),必要があれば polyfill を追加してください。 [詳細はこちら](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** | |
55 | + | |
56 | +## 前準備 | |
57 | + | |
58 | +ローカル環境に [node](http://nodejs.org/) と [git](https://git-scm.com/)をインストールが必要です。[ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)で開発しています。Requestは[Mock.js](https://github.com/nuysoft/Mock)のモックデータを使っています。 | |
59 | + | |
60 | +**バグ修正や新規機能追加のissue と pull requestは大歓迎です。** | |
61 | + | |
62 | + <p align="center"> | |
63 | + <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png"> | |
64 | +</p> | |
65 | + | |
66 | +## Sponsors | |
67 | + | |
68 | +Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen) | |
69 | + | |
70 | +<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p> | |
71 | + | |
72 | +## 機能一覧 | |
73 | + | |
74 | +``` | |
75 | +- ログイン / ログアウト | |
76 | + | |
77 | +- Auth認証 | |
78 | + - ページ権限 | |
79 | + - 権限パーミッション | |
80 | + - 権限設定 | |
81 | + - 外部IDでログイン | |
82 | + | |
83 | +- 複数環境デプロイ | |
84 | + - dev sit stage prod | |
85 | + | |
86 | +- 共通機能 | |
87 | + - 多言語切替 | |
88 | + - テーマ切替 | |
89 | + - サイトメニュー(ルートから生成) | |
90 | + - Breadcrumb Navigation | |
91 | + - Tag Navigation | |
92 | + - Svg Sprite Icon | |
93 | + - ローカル/バックエンド モック データ | |
94 | + - Screenfull | |
95 | + | |
96 | +- WYSIWYG | |
97 | + - TinyMCE | |
98 | + - Markdown | |
99 | + - JSON | |
100 | + | |
101 | +- Excel | |
102 | + - エクスポート | |
103 | + - インポート | |
104 | + - リード | |
105 | + - Zip | |
106 | + | |
107 | +- Table | |
108 | + - Dynamic Table | |
109 | + - Drag And Drop Table | |
110 | + - Inline Edit Table | |
111 | + | |
112 | +- Error Page | |
113 | + - 401 | |
114 | + - 404 | |
115 | + | |
116 | +- コンポーネント | |
117 | + - Avatar Upload | |
118 | + - Back To Top | |
119 | + - Drag Dialog | |
120 | + - Drag Select | |
121 | + - Drag Kanban | |
122 | + - Drag List | |
123 | + - SplitPane | |
124 | + - Dropzone | |
125 | + - Sticky | |
126 | + - CountTo | |
127 | + | |
128 | +- Advanced Example | |
129 | +- Error Log | |
130 | +- Dashboard | |
131 | +- Guide Page | |
132 | +- ECharts | |
133 | +- Clipboard | |
134 | +- Markdown to html | |
135 | +``` | |
136 | + | |
137 | +## Getting started | |
138 | + | |
139 | +```bash | |
140 | +# clone the project | |
141 | +git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git | |
142 | + | |
143 | +# enter the project directory | |
144 | +cd vue-element-admin | |
145 | + | |
146 | +# install dependency | |
147 | +npm install | |
148 | + | |
149 | +# develop | |
150 | +npm run dev | |
151 | +``` | |
152 | + | |
153 | +This will automatically open http://localhost:9527 | |
154 | + | |
155 | +## Build | |
156 | + | |
157 | +```bash | |
158 | +# build for test environment | |
159 | +npm run build:stage | |
160 | + | |
161 | +# build for production environment | |
162 | +npm run build:prod | |
163 | +``` | |
164 | + | |
165 | +## Advanced | |
166 | + | |
167 | +```bash | |
168 | +# preview the release environment effect | |
169 | +npm run preview | |
170 | + | |
171 | +# preview the release environment effect + static resource analysis | |
172 | +npm run preview -- --report | |
173 | + | |
174 | +# code format check | |
175 | +npm run lint | |
176 | + | |
177 | +# code format check and auto fix | |
178 | +npm run lint -- --fix | |
179 | +``` | |
180 | + | |
181 | +Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information | |
182 | + | |
183 | +## Changelog | |
184 | + | |
185 | +Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). | |
186 | + | |
187 | +## Online Demo | |
188 | + | |
189 | +[Preview](https://panjiachen.github.io/vue-element-admin) | |
190 | + | |
191 | +## Donate | |
192 | + | |
193 | +If you find this project useful, you can buy author a glass of juice :tropical_drink: | |
194 | + | |
195 | + | |
196 | + | |
197 | +[Paypal Me](https://www.paypal.me/panfree23) | |
198 | + | |
199 | +[Buy me a coffee](https://www.buymeacoffee.com/Pan) | |
200 | + | |
201 | +## Browsers support | |
202 | + | |
203 | +Modern browsers and Internet Explorer 10+. | |
204 | + | |
205 | +| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari | | |
206 | +| --------- | --------- | --------- | --------- | | |
207 | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions | |
208 | + | |
209 | +## License | |
210 | + | |
211 | +[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) | |
212 | + | |
213 | +Copyright (c) 2017-present PanJiaChen | ... | ... |
README.md
1 | +<p align="center"> | |
2 | + <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg"> | |
3 | +</p> | |
1 | 4 | |
5 | +<p align="center"> | |
6 | + <a href="https://github.com/vuejs/vue"> | |
7 | + <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> | |
8 | + </a> | |
9 | + <a href="https://github.com/ElemeFE/element"> | |
10 | + <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui"> | |
11 | + </a> | |
12 | + <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow"> | |
13 | + <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status"> | |
14 | + </a> | |
15 | + <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE"> | |
16 | + <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> | |
17 | + </a> | |
18 | + <a href="https://github.com/PanJiaChen/vue-element-admin/releases"> | |
19 | + <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release"> | |
20 | + </a> | |
21 | + <a href="https://gitter.im/vue-element-admin/discuss"> | |
22 | + <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter"> | |
23 | + </a> | |
24 | + <a href="https://panjiachen.github.io/vue-element-admin-site/donate"> | |
25 | + <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> | |
26 | + </a> | |
27 | +</p> | |
2 | 28 | |
3 | -## Build Setup | |
29 | +English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Spanish](./README.es.md) | |
4 | 30 | |
31 | +## Introduction | |
32 | + | |
33 | +[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It is based on [vue](https://github.com/vuejs/vue) and uses the UI Toolkit [element-ui](https://github.com/ElemeFE/element). | |
34 | + | |
35 | +[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is based on the newest development stack of vue and it has a built-in i18n solution, typical templates for enterprise applications, and lots of awesome features. It helps you build large and complex Single-Page Applications. I believe whatever your needs are, this project will help you. | |
36 | + | |
37 | +- [Preview](https://panjiachen.github.io/vue-element-admin) | |
38 | + | |
39 | +- [Documentation](https://panjiachen.github.io/vue-element-admin-site/) | |
40 | + | |
41 | +- [Gitter](https://gitter.im/vue-element-admin/discuss) | |
42 | + | |
43 | +- [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/) | |
44 | + | |
45 | +- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) | |
46 | + | |
47 | +- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览 | |
48 | + | |
49 | +- Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) | |
50 | +- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) | |
51 | +- Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour)) | |
52 | +- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) | |
53 | + | |
54 | +**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update** | |
55 | + | |
56 | +**The current version is `v4.0+` build on `vue-cli`. If you find a problem, please put [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), it does not rely on `vue-cli`** | |
57 | + | |
58 | +**This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.** | |
59 | + | |
60 | +## Preparation | |
61 | + | |
62 | +You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock). | |
63 | +Understanding and learning this knowledge in advance will greatly help the use of this project. | |
64 | + | |
65 | + <p align="center"> | |
66 | + <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png"> | |
67 | +</p> | |
68 | + | |
69 | +## Sponsors | |
70 | + | |
71 | +Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen) | |
72 | + | |
73 | +<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p> | |
74 | + | |
75 | +## Features | |
76 | + | |
77 | +``` | |
78 | +- Login / Logout | |
79 | + | |
80 | +- Permission Authentication | |
81 | + - Page permission | |
82 | + - Directive permission | |
83 | + - Permission configuration page | |
84 | + - Two-step login | |
85 | + | |
86 | +- Multi-environment build | |
87 | + - dev sit stage prod | |
88 | + | |
89 | +- Global Features | |
90 | + - I18n | |
91 | + - Multiple dynamic themes | |
92 | + - Dynamic sidebar (supports multi-level routing) | |
93 | + - Dynamic breadcrumb | |
94 | + - Tags-view (Tab page Support right-click operation) | |
95 | + - Svg Sprite | |
96 | + - Mock data | |
97 | + - Screenfull | |
98 | + - Responsive Sidebar | |
99 | + | |
100 | +- Editor | |
101 | + - Rich Text Editor | |
102 | + - Markdown Editor | |
103 | + - JSON Editor | |
104 | + | |
105 | +- Excel | |
106 | + - Export Excel | |
107 | + - Upload Excel | |
108 | + - Visualization Excel | |
109 | + - Export zip | |
110 | + | |
111 | +- Table | |
112 | + - Dynamic Table | |
113 | + - Drag And Drop Table | |
114 | + - Inline Edit Table | |
115 | + | |
116 | +- Error Page | |
117 | + - 401 | |
118 | + - 404 | |
119 | + | |
120 | +- Components | |
121 | + - Avatar Upload | |
122 | + - Back To Top | |
123 | + - Drag Dialog | |
124 | + - Drag Select | |
125 | + - Drag Kanban | |
126 | + - Drag List | |
127 | + - SplitPane | |
128 | + - Dropzone | |
129 | + - Sticky | |
130 | + - CountTo | |
131 | + | |
132 | +- Advanced Example | |
133 | +- Error Log | |
134 | +- Dashboard | |
135 | +- Guide Page | |
136 | +- ECharts | |
137 | +- Clipboard | |
138 | +- Markdown to html | |
139 | +``` | |
140 | + | |
141 | +## Getting started | |
5 | 142 | |
6 | 143 | ```bash |
144 | +# clone the project | |
145 | +git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git | |
7 | 146 | |
8 | 147 | # enter the project directory |
9 | -cd gulu-admin | |
148 | +cd vue-element-admin | |
10 | 149 | |
11 | 150 | # install dependency |
12 | 151 | npm install |
... | ... | @@ -15,7 +154,7 @@ npm install |
15 | 154 | npm run dev |
16 | 155 | ``` |
17 | 156 | |
18 | -This will automatically open http://localhost:9528 | |
157 | +This will automatically open http://localhost:9527 | |
19 | 158 | |
20 | 159 | ## Build |
21 | 160 | |
... | ... | @@ -45,24 +184,34 @@ npm run lint -- --fix |
45 | 184 | |
46 | 185 | Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information |
47 | 186 | |
48 | -## Demo | |
187 | +## Changelog | |
49 | 188 | |
50 | - | |
189 | +Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). | |
51 | 190 | |
52 | -## Extra | |
191 | +## Online Demo | |
53 | 192 | |
54 | -If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control) | |
193 | +[Preview](https://panjiachen.github.io/vue-element-admin) | |
55 | 194 | |
56 | -For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour)) | |
195 | +## Donate | |
57 | 196 | |
58 | -## Related Project | |
197 | +If you find this project useful, you can buy author a glass of juice :tropical_drink: | |
59 | 198 | |
60 | -- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) | |
199 | + | |
61 | 200 | |
62 | -- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) | |
201 | +[Paypal Me](https://www.paypal.me/panfree23) | |
63 | 202 | |
64 | -- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) | |
203 | +[Buy me a coffee](https://www.buymeacoffee.com/Pan) | |
65 | 204 | |
66 | -- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) | |
205 | +## Browsers support | |
206 | + | |
207 | +Modern browsers and Internet Explorer 10+. | |
208 | + | |
209 | +| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari | | |
210 | +| --------- | --------- | --------- | --------- | | |
211 | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions | |
212 | + | |
213 | +## License | |
67 | 214 | |
215 | +[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) | |
68 | 216 | |
217 | +Copyright (c) 2017-present PanJiaChen | ... | ... |
README.zh-CN.md
... | ... | @@ -0,0 +1,236 @@ |
1 | +<p align="center"> | |
2 | + <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg"> | |
3 | +</p> | |
4 | + | |
5 | +<p align="center"> | |
6 | + <a href="https://github.com/vuejs/vue"> | |
7 | + <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> | |
8 | + </a> | |
9 | + <a href="https://github.com/ElemeFE/element"> | |
10 | + <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui"> | |
11 | + </a> | |
12 | + <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow"> | |
13 | + <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status"> | |
14 | + </a> | |
15 | + <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE"> | |
16 | + <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> | |
17 | + </a> | |
18 | + <a href="https://github.com/PanJiaChen/vue-element-admin/releases"> | |
19 | + <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release"> | |
20 | + </a> | |
21 | + <a href="https://gitter.im/vue-element-admin/discuss"> | |
22 | + <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter"> | |
23 | + </a> | |
24 | + <a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/donate"> | |
25 | + <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> | |
26 | + </a> | |
27 | +</p> | |
28 | + | |
29 | +简体中文 | [English](./README.md) | [日本語](./README.ja.md) | [Spanish](./README.es.md) | |
30 | + | |
31 | +## 简介 | |
32 | + | |
33 | +[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案,它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。 | |
34 | + | |
35 | +- [在线预览](https://panjiachen.github.io/vue-element-admin) | |
36 | + | |
37 | +- [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) | |
38 | + | |
39 | +- [Gitter 讨论组](https://gitter.im/vue-element-admin/discuss) | |
40 | + | |
41 | +- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate) | |
42 | + | |
43 | +- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) | |
44 | + | |
45 | +- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 在线预览(国内用户可访问该地址) | |
46 | + | |
47 | +- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 文档(方便没翻墙的用户查看) | |
48 | + | |
49 | +- 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) | |
50 | +- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) | |
51 | +- Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour)) | |
52 | +- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) | |
53 | + | |
54 | +**`v4.1.0+`版本之后默认 master 分支将不支持国际化,有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支,它会和 master 保持同步更新** | |
55 | + | |
56 | +**该项目不支持低版本浏览器(如 ie),有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** | |
57 | + | |
58 | +**目前版本为 `v4.0+` 基于 `vue-cli` 进行构建,若发现问题,欢迎提[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)。若你想使用旧版本,可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0),它不依赖 `vue-cli`** | |
59 | + | |
60 | +群主 **[圈子](https://jianshiapp.com/circles/1209)** 群主会经常分享一些技术相关的东西,或者加入 [qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602) 或者关注 [微博](https://weibo.com/u/3423485724?is_all=1) | |
61 | + | |
62 | +## 前序准备 | |
63 | + | |
64 | +你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element),所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。 | |
65 | + | |
66 | +同时配套了系列教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目 | |
67 | + | |
68 | +- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) | |
69 | +- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) | |
70 | +- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) | |
71 | +- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) | |
72 | +- [手摸手,带你用vue撸后台 系列五(v4.0新版本)](https://juejin.im/post/5c92ff94f265da6128275a85) | |
73 | +- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) | |
74 | +- [手摸手,带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) | |
75 | +- [手摸手,带你用合理的姿势使用 webpack4(上)](https://juejin.im/post/5b56909a518825195f499806) | |
76 | +- [手摸手,带你用合理的姿势使用 webpack4(下)](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc) | |
77 | + | |
78 | +**如有问题请先看上述使用文档和文章,若不能满足,欢迎 issue 和 pr** | |
79 | + | |
80 | + <p align="center"> | |
81 | + <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png"> | |
82 | +</p> | |
83 | + | |
84 | +## Sponsors | |
85 | + | |
86 | +Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen) | |
87 | + | |
88 | +<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p> | |
89 | + | |
90 | +## 功能 | |
91 | + | |
92 | +``` | |
93 | +- 登录 / 注销 | |
94 | + | |
95 | +- 权限验证 | |
96 | + - 页面权限 | |
97 | + - 指令权限 | |
98 | + - 权限配置 | |
99 | + - 二步登录 | |
100 | + | |
101 | +- 多环境发布 | |
102 | + - dev sit stage prod | |
103 | + | |
104 | +- 全局功能 | |
105 | + - 国际化多语言 | |
106 | + - 多种动态换肤 | |
107 | + - 动态侧边栏(支持多级路由嵌套) | |
108 | + - 动态面包屑 | |
109 | + - 快捷导航(标签页) | |
110 | + - Svg Sprite 图标 | |
111 | + - 本地/后端 mock 数据 | |
112 | + - Screenfull全屏 | |
113 | + - 自适应收缩侧边栏 | |
114 | + | |
115 | +- 编辑器 | |
116 | + - 富文本 | |
117 | + - Markdown | |
118 | + - JSON 等多格式 | |
119 | + | |
120 | +- Excel | |
121 | + - 导出excel | |
122 | + - 导入excel | |
123 | + - 前端可视化excel | |
124 | + - 导出zip | |
125 | + | |
126 | +- 表格 | |
127 | + - 动态表格 | |
128 | + - 拖拽表格 | |
129 | + - 内联编辑 | |
130 | + | |
131 | +- 错误页面 | |
132 | + - 401 | |
133 | + - 404 | |
134 | + | |
135 | +- 組件 | |
136 | + - 头像上传 | |
137 | + - 返回顶部 | |
138 | + - 拖拽Dialog | |
139 | + - 拖拽Select | |
140 | + - 拖拽看板 | |
141 | + - 列表拖拽 | |
142 | + - SplitPane | |
143 | + - Dropzone | |
144 | + - Sticky | |
145 | + - CountTo | |
146 | + | |
147 | +- 综合实例 | |
148 | +- 错误日志 | |
149 | +- Dashboard | |
150 | +- 引导页 | |
151 | +- ECharts 图表 | |
152 | +- Clipboard(剪贴复制) | |
153 | +- Markdown2html | |
154 | +``` | |
155 | + | |
156 | +## 开发 | |
157 | + | |
158 | +```bash | |
159 | +# 克隆项目 | |
160 | +git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git | |
161 | + | |
162 | +# 进入项目目录 | |
163 | +cd vue-element-admin | |
164 | + | |
165 | +# 安装依赖 | |
166 | +npm install | |
167 | + | |
168 | +# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 | |
169 | +npm install --registry=https://registry.npm.taobao.org | |
170 | + | |
171 | +# 启动服务 | |
172 | +npm run dev | |
173 | +``` | |
174 | + | |
175 | +浏览器访问 http://localhost:9527 | |
176 | + | |
177 | +## 发布 | |
178 | + | |
179 | +```bash | |
180 | +# 构建测试环境 | |
181 | +npm run build:stage | |
182 | + | |
183 | +# 构建生产环境 | |
184 | +npm run build:prod | |
185 | +``` | |
186 | + | |
187 | +## 其它 | |
188 | + | |
189 | +```bash | |
190 | +# 预览发布环境效果 | |
191 | +npm run preview | |
192 | + | |
193 | +# 预览发布环境效果 + 静态资源分析 | |
194 | +npm run preview -- --report | |
195 | + | |
196 | +# 代码格式检查 | |
197 | +npm run lint | |
198 | + | |
199 | +# 代码格式检查并自动修复 | |
200 | +npm run lint -- --fix | |
201 | +``` | |
202 | + | |
203 | +更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) | |
204 | + | |
205 | +## Changelog | |
206 | + | |
207 | +Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). | |
208 | + | |
209 | +## Online Demo | |
210 | + | |
211 | +[在线 Demo](https://panjiachen.github.io/vue-element-admin) | |
212 | + | |
213 | +## Donate | |
214 | + | |
215 | +如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励 :tropical_drink: | |
216 | + | |
217 | + | |
218 | +[更多捐赠方式](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate) | |
219 | + | |
220 | +[Paypal Me](https://www.paypal.me/panfree23) | |
221 | + | |
222 | +[Buy me a coffee](https://www.buymeacoffee.com/Pan) | |
223 | + | |
224 | +## Browsers support | |
225 | + | |
226 | +Modern browsers and Internet Explorer 10+. | |
227 | + | |
228 | +| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari | | |
229 | +| --------- | --------- | --------- | --------- | | |
230 | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions | |
231 | + | |
232 | +## License | |
233 | + | |
234 | +[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) | |
235 | + | |
236 | +Copyright (c) 2017-present PanJiaChen | ... | ... |
babel.config.js
1 | -// module.exports = { | |
2 | -// presets: [ | |
3 | -// '@vue/app' | |
4 | -// ] | |
5 | -// } | |
6 | - // "@babel/preset-env", | |
7 | - // { | |
8 | - // "modules": false | |
9 | - // }, | |
10 | 1 | module.exports = { |
11 | - "presets": [ | |
12 | - [ | |
13 | - '@vue/app', | |
14 | - // '@babel/preset-env', | |
15 | - { | |
16 | - // "modules": false, | |
17 | - // "targets": { // 配置代码的运行环境 | |
18 | - // "chrome": 64 | |
19 | - // }, | |
20 | - // "useBuiltIns": true // 开启对 babel-polyfill 的优化 | |
21 | - } | |
22 | - ] | |
23 | - ], | |
24 | - "plugins": [ | |
25 | - [ | |
26 | - "component", | |
27 | - { | |
28 | - "libraryName": "element-ui", | |
29 | - "styleLibraryName": "theme-chalk" | |
30 | - } | |
31 | - ] | |
2 | + presets: [ | |
3 | + '@vue/app' | |
32 | 4 | ] |
33 | 5 | } | ... | ... |
File mode changed
File mode changed
jsconfig.json
mock/article.js
... | ... | @@ -0,0 +1,116 @@ |
1 | +import Mock from 'mockjs' | |
2 | + | |
3 | +const List = [] | |
4 | +const count = 100 | |
5 | + | |
6 | +const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>' | |
7 | +const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3' | |
8 | + | |
9 | +for (let i = 0; i < count; i++) { | |
10 | + List.push(Mock.mock({ | |
11 | + id: '@increment', | |
12 | + timestamp: +Mock.Random.date('T'), | |
13 | + author: '@first', | |
14 | + reviewer: '@first', | |
15 | + title: '@title(5, 10)', | |
16 | + content_short: 'mock data', | |
17 | + content: baseContent, | |
18 | + forecast: '@float(0, 100, 2, 2)', | |
19 | + importance: '@integer(1, 3)', | |
20 | + 'type|1': ['CN', 'US', 'JP', 'EU'], | |
21 | + 'status|1': ['published', 'draft'], | |
22 | + display_time: '@datetime', | |
23 | + comment_disabled: true, | |
24 | + pageviews: '@integer(300, 5000)', | |
25 | + image_uri, | |
26 | + platforms: ['a-platform'] | |
27 | + })) | |
28 | +} | |
29 | + | |
30 | +export default [ | |
31 | + { | |
32 | + url: '/vue-element-admin/article/list', | |
33 | + type: 'get', | |
34 | + response: config => { | |
35 | + const { importance, type, title, page = 1, limit = 20, sort } = config.query | |
36 | + | |
37 | + let mockList = List.filter(item => { | |
38 | + if (importance && item.importance !== +importance) return false | |
39 | + if (type && item.type !== type) return false | |
40 | + if (title && item.title.indexOf(title) < 0) return false | |
41 | + return true | |
42 | + }) | |
43 | + | |
44 | + if (sort === '-id') { | |
45 | + mockList = mockList.reverse() | |
46 | + } | |
47 | + | |
48 | + const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1)) | |
49 | + | |
50 | + return { | |
51 | + code: 20000, | |
52 | + data: { | |
53 | + total: mockList.length, | |
54 | + items: pageList | |
55 | + } | |
56 | + } | |
57 | + } | |
58 | + }, | |
59 | + | |
60 | + { | |
61 | + url: '/vue-element-admin/article/detail', | |
62 | + type: 'get', | |
63 | + response: config => { | |
64 | + const { id } = config.query | |
65 | + for (const article of List) { | |
66 | + if (article.id === +id) { | |
67 | + return { | |
68 | + code: 20000, | |
69 | + data: article | |
70 | + } | |
71 | + } | |
72 | + } | |
73 | + } | |
74 | + }, | |
75 | + | |
76 | + { | |
77 | + url: '/vue-element-admin/article/pv', | |
78 | + type: 'get', | |
79 | + response: _ => { | |
80 | + return { | |
81 | + code: 20000, | |
82 | + data: { | |
83 | + pvData: [ | |
84 | + { key: 'PC', pv: 1024 }, | |
85 | + { key: 'mobile', pv: 1024 }, | |
86 | + { key: 'ios', pv: 1024 }, | |
87 | + { key: 'android', pv: 1024 } | |
88 | + ] | |
89 | + } | |
90 | + } | |
91 | + } | |
92 | + }, | |
93 | + | |
94 | + { | |
95 | + url: '/vue-element-admin/article/create', | |
96 | + type: 'post', | |
97 | + response: _ => { | |
98 | + return { | |
99 | + code: 20000, | |
100 | + data: 'success' | |
101 | + } | |
102 | + } | |
103 | + }, | |
104 | + | |
105 | + { | |
106 | + url: '/vue-element-admin/article/update', | |
107 | + type: 'post', | |
108 | + response: _ => { | |
109 | + return { | |
110 | + code: 20000, | |
111 | + data: 'success' | |
112 | + } | |
113 | + } | |
114 | + } | |
115 | +] | |
116 | + | ... | ... |
mock/index.js
1 | 1 | import Mock from 'mockjs' |
2 | -import { | |
3 | - param2Obj | |
4 | -} from '../src/utils' | |
2 | +import { param2Obj } from '../src/utils' | |
5 | 3 | |
6 | 4 | import user from './user' |
7 | -import table from './table' | |
5 | +import role from './role' | |
6 | +import article from './article' | |
7 | +import search from './remote-search' | |
8 | 8 | |
9 | 9 | const mocks = [ |
10 | 10 | ...user, |
11 | - ...table | |
11 | + ...role, | |
12 | + ...article, | |
13 | + ...search | |
12 | 14 | ] |
13 | 15 | |
14 | 16 | // for front mock |
... | ... | @@ -18,7 +20,7 @@ export function mockXHR() { |
18 | 20 | // mock patch |
19 | 21 | // https://github.com/nuysoft/Mock/issues/300 |
20 | 22 | Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send |
21 | - Mock.XHR.prototype.send = function () { | |
23 | + Mock.XHR.prototype.send = function() { | |
22 | 24 | if (this.custom.xhr) { |
23 | 25 | this.custom.xhr.withCredentials = this.withCredentials || false |
24 | 26 | |
... | ... | @@ -30,14 +32,10 @@ export function mockXHR() { |
30 | 32 | } |
31 | 33 | |
32 | 34 | function XHR2ExpressReqWrap(respond) { |
33 | - return function (options) { | |
35 | + return function(options) { | |
34 | 36 | let result = null |
35 | 37 | if (respond instanceof Function) { |
36 | - const { | |
37 | - body, | |
38 | - type, | |
39 | - url | |
40 | - } = options | |
38 | + const { body, type, url } = options | |
41 | 39 | // https://expressjs.com/en/4x/api.html#req |
42 | 40 | result = respond({ |
43 | 41 | method: type, | ... | ... |
mock/mock-server.js
mock/remote-search.js
... | ... | @@ -0,0 +1,51 @@ |
1 | +import Mock from 'mockjs' | |
2 | + | |
3 | +const NameList = [] | |
4 | +const count = 100 | |
5 | + | |
6 | +for (let i = 0; i < count; i++) { | |
7 | + NameList.push(Mock.mock({ | |
8 | + name: '@first' | |
9 | + })) | |
10 | +} | |
11 | +NameList.push({ name: 'mock-Pan' }) | |
12 | + | |
13 | +export default [ | |
14 | + // username search | |
15 | + { | |
16 | + url: '/vue-element-admin/search/user', | |
17 | + type: 'get', | |
18 | + response: config => { | |
19 | + const { name } = config.query | |
20 | + const mockNameList = NameList.filter(item => { | |
21 | + const lowerCaseName = item.name.toLowerCase() | |
22 | + return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0) | |
23 | + }) | |
24 | + return { | |
25 | + code: 20000, | |
26 | + data: { items: mockNameList } | |
27 | + } | |
28 | + } | |
29 | + }, | |
30 | + | |
31 | + // transaction list | |
32 | + { | |
33 | + url: '/vue-element-admin/transaction/list', | |
34 | + type: 'get', | |
35 | + response: _ => { | |
36 | + return { | |
37 | + code: 20000, | |
38 | + data: { | |
39 | + total: 20, | |
40 | + 'items|20': [{ | |
41 | + order_no: '@guid()', | |
42 | + timestamp: +Mock.Random.date('T'), | |
43 | + username: '@name()', | |
44 | + price: '@float(1000, 15000, 0, 2)', | |
45 | + 'status|1': ['success', 'pending'] | |
46 | + }] | |
47 | + } | |
48 | + } | |
49 | + } | |
50 | + } | |
51 | +] | ... | ... |
mock/role/index.js
... | ... | @@ -0,0 +1,98 @@ |
1 | +import Mock from 'mockjs' | |
2 | +import { deepClone } from '../../src/utils/index.js' | |
3 | +import { asyncRoutes, constantRoutes } from './routes.js' | |
4 | + | |
5 | +const routes = deepClone([...constantRoutes, ...asyncRoutes]) | |
6 | + | |
7 | +const roles = [ | |
8 | + { | |
9 | + key: 'admin', | |
10 | + name: 'admin', | |
11 | + description: 'Super Administrator. Have access to view all pages.', | |
12 | + routes: routes | |
13 | + }, | |
14 | + { | |
15 | + key: 'editor', | |
16 | + name: 'editor', | |
17 | + description: 'Normal Editor. Can see all pages except permission page', | |
18 | + routes: routes.filter(i => i.path !== '/permission')// just a mock | |
19 | + }, | |
20 | + { | |
21 | + key: 'visitor', | |
22 | + name: 'visitor', | |
23 | + description: 'Just a visitor. Can only see the home page and the document page', | |
24 | + routes: [{ | |
25 | + path: '', | |
26 | + redirect: 'dashboard', | |
27 | + children: [ | |
28 | + { | |
29 | + path: 'dashboard', | |
30 | + name: 'Dashboard', | |
31 | + meta: { title: 'dashboard', icon: 'dashboard' } | |
32 | + } | |
33 | + ] | |
34 | + }] | |
35 | + } | |
36 | +] | |
37 | + | |
38 | +export default [ | |
39 | + // mock get all routes form server | |
40 | + { | |
41 | + url: '/vue-element-admin/routes', | |
42 | + type: 'get', | |
43 | + response: _ => { | |
44 | + return { | |
45 | + code: 20000, | |
46 | + data: routes | |
47 | + } | |
48 | + } | |
49 | + }, | |
50 | + | |
51 | + // mock get all roles form server | |
52 | + { | |
53 | + url: '/vue-element-admin/roles', | |
54 | + type: 'get', | |
55 | + response: _ => { | |
56 | + return { | |
57 | + code: 20000, | |
58 | + data: roles | |
59 | + } | |
60 | + } | |
61 | + }, | |
62 | + | |
63 | + // add role | |
64 | + { | |
65 | + url: '/vue-element-admin/role', | |
66 | + type: 'post', | |
67 | + response: { | |
68 | + code: 20000, | |
69 | + data: { | |
70 | + key: Mock.mock('@integer(300, 5000)') | |
71 | + } | |
72 | + } | |
73 | + }, | |
74 | + | |
75 | + // update role | |
76 | + { | |
77 | + url: '/vue-element-admin/role/[A-Za-z0-9]', | |
78 | + type: 'put', | |
79 | + response: { | |
80 | + code: 20000, | |
81 | + data: { | |
82 | + status: 'success' | |
83 | + } | |
84 | + } | |
85 | + }, | |
86 | + | |
87 | + // delete role | |
88 | + { | |
89 | + url: '/vue-element-admin/role/[A-Za-z0-9]', | |
90 | + type: 'delete', | |
91 | + response: { | |
92 | + code: 20000, | |
93 | + data: { | |
94 | + status: 'success' | |
95 | + } | |
96 | + } | |
97 | + } | |
98 | +] | ... | ... |
mock/role/routes.js
... | ... | @@ -0,0 +1,525 @@ |
1 | +// Just a mock data | |
2 | + | |
3 | +export const constantRoutes = [ | |
4 | + { | |
5 | + path: '/redirect', | |
6 | + component: 'layout/Layout', | |
7 | + hidden: true, | |
8 | + children: [ | |
9 | + { | |
10 | + path: '/redirect/:path*', | |
11 | + component: 'views/redirect/index' | |
12 | + } | |
13 | + ] | |
14 | + }, | |
15 | + { | |
16 | + path: '/login', | |
17 | + component: 'views/login/index', | |
18 | + hidden: true | |
19 | + }, | |
20 | + { | |
21 | + path: '/auth-redirect', | |
22 | + component: 'views/login/auth-redirect', | |
23 | + hidden: true | |
24 | + }, | |
25 | + { | |
26 | + path: '/404', | |
27 | + component: 'views/error-page/404', | |
28 | + hidden: true | |
29 | + }, | |
30 | + { | |
31 | + path: '/401', | |
32 | + component: 'views/error-page/401', | |
33 | + hidden: true | |
34 | + }, | |
35 | + { | |
36 | + path: '', | |
37 | + component: 'layout/Layout', | |
38 | + redirect: 'dashboard', | |
39 | + children: [ | |
40 | + { | |
41 | + path: 'dashboard', | |
42 | + component: 'views/dashboard/index', | |
43 | + name: 'Dashboard', | |
44 | + meta: { title: 'dashboard', icon: 'dashboard', affix: true } | |
45 | + } | |
46 | + ] | |
47 | + }, | |
48 | + { | |
49 | + path: '/documentation', | |
50 | + component: 'layout/Layout', | |
51 | + children: [ | |
52 | + { | |
53 | + path: 'index', | |
54 | + component: 'views/documentation/index', | |
55 | + name: 'Documentation', | |
56 | + meta: { title: 'documentation', icon: 'documentation', affix: true } | |
57 | + } | |
58 | + ] | |
59 | + }, | |
60 | + { | |
61 | + path: '/guide', | |
62 | + component: 'layout/Layout', | |
63 | + redirect: '/guide/index', | |
64 | + children: [ | |
65 | + { | |
66 | + path: 'index', | |
67 | + component: 'views/guide/index', | |
68 | + name: 'Guide', | |
69 | + meta: { title: 'guide', icon: 'guide', noCache: true } | |
70 | + } | |
71 | + ] | |
72 | + } | |
73 | +] | |
74 | + | |
75 | +export const asyncRoutes = [ | |
76 | + { | |
77 | + path: '/permission', | |
78 | + component: 'layout/Layout', | |
79 | + redirect: '/permission/index', | |
80 | + alwaysShow: true, | |
81 | + meta: { | |
82 | + title: 'permission', | |
83 | + icon: 'lock', | |
84 | + roles: ['admin', 'editor'] | |
85 | + }, | |
86 | + children: [ | |
87 | + { | |
88 | + path: 'page', | |
89 | + component: 'views/permission/page', | |
90 | + name: 'PagePermission', | |
91 | + meta: { | |
92 | + title: 'pagePermission', | |
93 | + roles: ['admin'] | |
94 | + } | |
95 | + }, | |
96 | + { | |
97 | + path: 'directive', | |
98 | + component: 'views/permission/directive', | |
99 | + name: 'DirectivePermission', | |
100 | + meta: { | |
101 | + title: 'directivePermission' | |
102 | + } | |
103 | + }, | |
104 | + { | |
105 | + path: 'role', | |
106 | + component: 'views/permission/role', | |
107 | + name: 'RolePermission', | |
108 | + meta: { | |
109 | + title: 'rolePermission', | |
110 | + roles: ['admin'] | |
111 | + } | |
112 | + } | |
113 | + ] | |
114 | + }, | |
115 | + | |
116 | + { | |
117 | + path: '/icon', | |
118 | + component: 'layout/Layout', | |
119 | + children: [ | |
120 | + { | |
121 | + path: 'index', | |
122 | + component: 'views/icons/index', | |
123 | + name: 'Icons', | |
124 | + meta: { title: 'icons', icon: 'icon', noCache: true } | |
125 | + } | |
126 | + ] | |
127 | + }, | |
128 | + | |
129 | + { | |
130 | + path: '/components', | |
131 | + component: 'layout/Layout', | |
132 | + redirect: 'noRedirect', | |
133 | + name: 'ComponentDemo', | |
134 | + meta: { | |
135 | + title: 'components', | |
136 | + icon: 'component' | |
137 | + }, | |
138 | + children: [ | |
139 | + { | |
140 | + path: 'tinymce', | |
141 | + component: 'views/components-demo/tinymce', | |
142 | + name: 'TinymceDemo', | |
143 | + meta: { title: 'tinymce' } | |
144 | + }, | |
145 | + { | |
146 | + path: 'markdown', | |
147 | + component: 'views/components-demo/markdown', | |
148 | + name: 'MarkdownDemo', | |
149 | + meta: { title: 'markdown' } | |
150 | + }, | |
151 | + { | |
152 | + path: 'json-editor', | |
153 | + component: 'views/components-demo/json-editor', | |
154 | + name: 'JsonEditorDemo', | |
155 | + meta: { title: 'jsonEditor' } | |
156 | + }, | |
157 | + { | |
158 | + path: 'split-pane', | |
159 | + component: 'views/components-demo/split-pane', | |
160 | + name: 'SplitpaneDemo', | |
161 | + meta: { title: 'splitPane' } | |
162 | + }, | |
163 | + { | |
164 | + path: 'avatar-upload', | |
165 | + component: 'views/components-demo/avatar-upload', | |
166 | + name: 'AvatarUploadDemo', | |
167 | + meta: { title: 'avatarUpload' } | |
168 | + }, | |
169 | + { | |
170 | + path: 'dropzone', | |
171 | + component: 'views/components-demo/dropzone', | |
172 | + name: 'DropzoneDemo', | |
173 | + meta: { title: 'dropzone' } | |
174 | + }, | |
175 | + { | |
176 | + path: 'sticky', | |
177 | + component: 'views/components-demo/sticky', | |
178 | + name: 'StickyDemo', | |
179 | + meta: { title: 'sticky' } | |
180 | + }, | |
181 | + { | |
182 | + path: 'count-to', | |
183 | + component: 'views/components-demo/count-to', | |
184 | + name: 'CountToDemo', | |
185 | + meta: { title: 'countTo' } | |
186 | + }, | |
187 | + { | |
188 | + path: 'mixin', | |
189 | + component: 'views/components-demo/mixin', | |
190 | + name: 'ComponentMixinDemo', | |
191 | + meta: { title: 'componentMixin' } | |
192 | + }, | |
193 | + { | |
194 | + path: 'back-to-top', | |
195 | + component: 'views/components-demo/back-to-top', | |
196 | + name: 'BackToTopDemo', | |
197 | + meta: { title: 'backToTop' } | |
198 | + }, | |
199 | + { | |
200 | + path: 'drag-dialog', | |
201 | + component: 'views/components-demo/drag-dialog', | |
202 | + name: 'DragDialogDemo', | |
203 | + meta: { title: 'dragDialog' } | |
204 | + }, | |
205 | + { | |
206 | + path: 'drag-select', | |
207 | + component: 'views/components-demo/drag-select', | |
208 | + name: 'DragSelectDemo', | |
209 | + meta: { title: 'dragSelect' } | |
210 | + }, | |
211 | + { | |
212 | + path: 'dnd-list', | |
213 | + component: 'views/components-demo/dnd-list', | |
214 | + name: 'DndListDemo', | |
215 | + meta: { title: 'dndList' } | |
216 | + }, | |
217 | + { | |
218 | + path: 'drag-kanban', | |
219 | + component: 'views/components-demo/drag-kanban', | |
220 | + name: 'DragKanbanDemo', | |
221 | + meta: { title: 'dragKanban' } | |
222 | + } | |
223 | + ] | |
224 | + }, | |
225 | + { | |
226 | + path: '/charts', | |
227 | + component: 'layout/Layout', | |
228 | + redirect: 'noRedirect', | |
229 | + name: 'Charts', | |
230 | + meta: { | |
231 | + title: 'charts', | |
232 | + icon: 'chart' | |
233 | + }, | |
234 | + children: [ | |
235 | + { | |
236 | + path: 'keyboard', | |
237 | + component: 'views/charts/keyboard', | |
238 | + name: 'KeyboardChart', | |
239 | + meta: { title: 'keyboardChart', noCache: true } | |
240 | + }, | |
241 | + { | |
242 | + path: 'line', | |
243 | + component: 'views/charts/line', | |
244 | + name: 'LineChart', | |
245 | + meta: { title: 'lineChart', noCache: true } | |
246 | + }, | |
247 | + { | |
248 | + path: 'mixchart', | |
249 | + component: 'views/charts/mixChart', | |
250 | + name: 'MixChart', | |
251 | + meta: { title: 'mixChart', noCache: true } | |
252 | + } | |
253 | + ] | |
254 | + }, | |
255 | + { | |
256 | + path: '/nested', | |
257 | + component: 'layout/Layout', | |
258 | + redirect: '/nested/menu1/menu1-1', | |
259 | + name: 'Nested', | |
260 | + meta: { | |
261 | + title: 'nested', | |
262 | + icon: 'nested' | |
263 | + }, | |
264 | + children: [ | |
265 | + { | |
266 | + path: 'menu1', | |
267 | + component: 'views/nested/menu1/index', | |
268 | + name: 'Menu1', | |
269 | + meta: { title: 'menu1' }, | |
270 | + redirect: '/nested/menu1/menu1-1', | |
271 | + children: [ | |
272 | + { | |
273 | + path: 'menu1-1', | |
274 | + component: 'views/nested/menu1/menu1-1', | |
275 | + name: 'Menu1-1', | |
276 | + meta: { title: 'menu1-1' } | |
277 | + }, | |
278 | + { | |
279 | + path: 'menu1-2', | |
280 | + component: 'views/nested/menu1/menu1-2', | |
281 | + name: 'Menu1-2', | |
282 | + redirect: '/nested/menu1/menu1-2/menu1-2-1', | |
283 | + meta: { title: 'menu1-2' }, | |
284 | + children: [ | |
285 | + { | |
286 | + path: 'menu1-2-1', | |
287 | + component: 'views/nested/menu1/menu1-2/menu1-2-1', | |
288 | + name: 'Menu1-2-1', | |
289 | + meta: { title: 'menu1-2-1' } | |
290 | + }, | |
291 | + { | |
292 | + path: 'menu1-2-2', | |
293 | + component: 'views/nested/menu1/menu1-2/menu1-2-2', | |
294 | + name: 'Menu1-2-2', | |
295 | + meta: { title: 'menu1-2-2' } | |
296 | + } | |
297 | + ] | |
298 | + }, | |
299 | + { | |
300 | + path: 'menu1-3', | |
301 | + component: 'views/nested/menu1/menu1-3', | |
302 | + name: 'Menu1-3', | |
303 | + meta: { title: 'menu1-3' } | |
304 | + } | |
305 | + ] | |
306 | + }, | |
307 | + { | |
308 | + path: 'menu2', | |
309 | + name: 'Menu2', | |
310 | + component: 'views/nested/menu2/index', | |
311 | + meta: { title: 'menu2' } | |
312 | + } | |
313 | + ] | |
314 | + }, | |
315 | + | |
316 | + { | |
317 | + path: '/example', | |
318 | + component: 'layout/Layout', | |
319 | + redirect: '/example/list', | |
320 | + name: 'Example', | |
321 | + meta: { | |
322 | + title: 'example', | |
323 | + icon: 'example' | |
324 | + }, | |
325 | + children: [ | |
326 | + { | |
327 | + path: 'create', | |
328 | + component: 'views/example/create', | |
329 | + name: 'CreateArticle', | |
330 | + meta: { title: 'createArticle', icon: 'edit' } | |
331 | + }, | |
332 | + { | |
333 | + path: 'edit/:id(\\d+)', | |
334 | + component: 'views/example/edit', | |
335 | + name: 'EditArticle', | |
336 | + meta: { title: 'editArticle', noCache: true }, | |
337 | + hidden: true | |
338 | + }, | |
339 | + { | |
340 | + path: 'list', | |
341 | + component: 'views/example/list', | |
342 | + name: 'ArticleList', | |
343 | + meta: { title: 'articleList', icon: 'list' } | |
344 | + } | |
345 | + ] | |
346 | + }, | |
347 | + | |
348 | + { | |
349 | + path: '/tab', | |
350 | + component: 'layout/Layout', | |
351 | + children: [ | |
352 | + { | |
353 | + path: 'index', | |
354 | + component: 'views/tab/index', | |
355 | + name: 'Tab', | |
356 | + meta: { title: 'tab', icon: 'tab' } | |
357 | + } | |
358 | + ] | |
359 | + }, | |
360 | + | |
361 | + { | |
362 | + path: '/error', | |
363 | + component: 'layout/Layout', | |
364 | + redirect: 'noRedirect', | |
365 | + name: 'ErrorPages', | |
366 | + meta: { | |
367 | + title: 'errorPages', | |
368 | + icon: '404' | |
369 | + }, | |
370 | + children: [ | |
371 | + { | |
372 | + path: '401', | |
373 | + component: 'views/error-page/401', | |
374 | + name: 'Page401', | |
375 | + meta: { title: 'page401', noCache: true } | |
376 | + }, | |
377 | + { | |
378 | + path: '404', | |
379 | + component: 'views/error-page/404', | |
380 | + name: 'Page404', | |
381 | + meta: { title: 'page404', noCache: true } | |
382 | + } | |
383 | + ] | |
384 | + }, | |
385 | + | |
386 | + { | |
387 | + path: '/error-log', | |
388 | + component: 'layout/Layout', | |
389 | + redirect: 'noRedirect', | |
390 | + children: [ | |
391 | + { | |
392 | + path: 'log', | |
393 | + component: 'views/error-log/index', | |
394 | + name: 'ErrorLog', | |
395 | + meta: { title: 'errorLog', icon: 'bug' } | |
396 | + } | |
397 | + ] | |
398 | + }, | |
399 | + | |
400 | + { | |
401 | + path: '/excel', | |
402 | + component: 'layout/Layout', | |
403 | + redirect: '/excel/export-excel', | |
404 | + name: 'Excel', | |
405 | + meta: { | |
406 | + title: 'excel', | |
407 | + icon: 'excel' | |
408 | + }, | |
409 | + children: [ | |
410 | + { | |
411 | + path: 'export-excel', | |
412 | + component: 'views/excel/export-excel', | |
413 | + name: 'ExportExcel', | |
414 | + meta: { title: 'exportExcel' } | |
415 | + }, | |
416 | + { | |
417 | + path: 'export-selected-excel', | |
418 | + component: 'views/excel/select-excel', | |
419 | + name: 'SelectExcel', | |
420 | + meta: { title: 'selectExcel' } | |
421 | + }, | |
422 | + { | |
423 | + path: 'export-merge-header', | |
424 | + component: 'views/excel/merge-header', | |
425 | + name: 'MergeHeader', | |
426 | + meta: { title: 'mergeHeader' } | |
427 | + }, | |
428 | + { | |
429 | + path: 'upload-excel', | |
430 | + component: 'views/excel/upload-excel', | |
431 | + name: 'UploadExcel', | |
432 | + meta: { title: 'uploadExcel' } | |
433 | + } | |
434 | + ] | |
435 | + }, | |
436 | + | |
437 | + { | |
438 | + path: '/zip', | |
439 | + component: 'layout/Layout', | |
440 | + redirect: '/zip/download', | |
441 | + alwaysShow: true, | |
442 | + meta: { title: 'zip', icon: 'zip' }, | |
443 | + children: [ | |
444 | + { | |
445 | + path: 'download', | |
446 | + component: 'views/zip/index', | |
447 | + name: 'ExportZip', | |
448 | + meta: { title: 'exportZip' } | |
449 | + } | |
450 | + ] | |
451 | + }, | |
452 | + | |
453 | + { | |
454 | + path: '/pdf', | |
455 | + component: 'layout/Layout', | |
456 | + redirect: '/pdf/index', | |
457 | + children: [ | |
458 | + { | |
459 | + path: 'index', | |
460 | + component: 'views/pdf/index', | |
461 | + name: 'PDF', | |
462 | + meta: { title: 'pdf', icon: 'pdf' } | |
463 | + } | |
464 | + ] | |
465 | + }, | |
466 | + { | |
467 | + path: '/pdf/download', | |
468 | + component: 'views/pdf/download', | |
469 | + hidden: true | |
470 | + }, | |
471 | + | |
472 | + { | |
473 | + path: '/theme', | |
474 | + component: 'layout/Layout', | |
475 | + redirect: 'noRedirect', | |
476 | + children: [ | |
477 | + { | |
478 | + path: 'index', | |
479 | + component: 'views/theme/index', | |
480 | + name: 'Theme', | |
481 | + meta: { title: 'theme', icon: 'theme' } | |
482 | + } | |
483 | + ] | |
484 | + }, | |
485 | + | |
486 | + { | |
487 | + path: '/clipboard', | |
488 | + component: 'layout/Layout', | |
489 | + redirect: 'noRedirect', | |
490 | + children: [ | |
491 | + { | |
492 | + path: 'index', | |
493 | + component: 'views/clipboard/index', | |
494 | + name: 'ClipboardDemo', | |
495 | + meta: { title: 'clipboardDemo', icon: 'clipboard' } | |
496 | + } | |
497 | + ] | |
498 | + }, | |
499 | + | |
500 | + { | |
501 | + path: '/i18n', | |
502 | + component: 'layout/Layout', | |
503 | + children: [ | |
504 | + { | |
505 | + path: 'index', | |
506 | + component: 'views/i18n-demo/index', | |
507 | + name: 'I18n', | |
508 | + meta: { title: 'i18n', icon: 'international' } | |
509 | + } | |
510 | + ] | |
511 | + }, | |
512 | + | |
513 | + { | |
514 | + path: 'external-link', | |
515 | + component: 'layout/Layout', | |
516 | + children: [ | |
517 | + { | |
518 | + path: 'https://github.com/PanJiaChen/vue-element-admin', | |
519 | + meta: { title: 'externalLink', icon: 'link' } | |
520 | + } | |
521 | + ] | |
522 | + }, | |
523 | + | |
524 | + { path: '*', redirect: '/404', hidden: true } | |
525 | +] | ... | ... |
mock/user.js
1 | + | |
1 | 2 | const tokens = { |
2 | 3 | admin: { |
3 | 4 | token: 'admin-token' |
4 | 5 | }, |
5 | - assistant: { | |
6 | - token: 'assistant-token' | |
7 | - }, | |
8 | - runner: { | |
9 | - token: 'runner-token' | |
10 | - }, | |
11 | - shoper: { | |
12 | - token: 'shoper-token' | |
6 | + editor: { | |
7 | + token: 'editor-token' | |
13 | 8 | } |
14 | 9 | } |
15 | 10 | |
16 | 11 | const users = { |
17 | - 'admin-token': { //管理员 | |
12 | + 'admin-token': { | |
18 | 13 | roles: ['admin'], |
19 | 14 | introduction: 'I am a super administrator', |
20 | 15 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
21 | 16 | name: 'Super Admin' |
22 | 17 | }, |
23 | - 'assistant-token': { //管理员助理 | |
24 | - roles: ['assistant'], | |
25 | - introduction: 'I am a assistant of administrator', | |
26 | - avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', | |
27 | - name: 'assistant Admin' | |
28 | - }, | |
29 | - 'runner-token': { //运营人员 | |
30 | - roles: ['runner'], | |
31 | - introduction: 'I am an runner', | |
32 | - avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', | |
33 | - name: 'Normal runner' | |
34 | - }, | |
35 | - 'shoper-token': { //供应商 | |
36 | - roles: ['shoper'], | |
37 | - introduction: 'I am an shoper', | |
18 | + 'editor-token': { | |
19 | + roles: ['editor'], | |
20 | + introduction: 'I am an editor', | |
38 | 21 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
39 | - name: 'Normal shoper' | |
22 | + name: 'Normal Editor' | |
40 | 23 | } |
41 | 24 | } |
42 | 25 | |
43 | -export default [{ // user login | |
44 | - url: '/yp/user/login', | |
26 | +export default [ | |
27 | + // user login | |
28 | + { | |
29 | + url: '/vue-element-admin/user/login', | |
45 | 30 | type: 'post', |
46 | 31 | response: config => { |
47 | - console.log('config-----111--->', config.body); | |
48 | - const { | |
49 | - username, | |
50 | - password | |
51 | - } = config.body; | |
52 | - if (username == 'admin' && password == '111111') { | |
53 | - const token = tokens[username]; | |
54 | - if (!token) { | |
55 | - return { | |
56 | - code: 60204, | |
57 | - message: 'Account and password are incorrect.' | |
58 | - } | |
59 | - } else { | |
60 | - return { | |
61 | - code: 20000, | |
62 | - data: token | |
63 | - } | |
64 | - } | |
65 | - } else { | |
66 | - console.log('passwordpasswordpassword', username, password); | |
32 | + const { username } = config.body | |
33 | + const token = tokens[username] | |
34 | + | |
35 | + // mock error | |
36 | + if (!token) { | |
67 | 37 | return { |
68 | 38 | code: 60204, |
69 | - message: 'Account and password are incorrect///.' | |
39 | + message: 'Account and password are incorrect.' | |
70 | 40 | } |
71 | 41 | } |
42 | + | |
43 | + return { | |
44 | + code: 20000, | |
45 | + data: token | |
46 | + } | |
72 | 47 | } |
73 | 48 | }, |
74 | 49 | |
75 | 50 | // get user info |
76 | 51 | { |
77 | - url: '/yp/user/info\.*', | |
52 | + url: '/vue-element-admin/user/info\.*', | |
78 | 53 | type: 'get', |
79 | 54 | response: config => { |
80 | - const { | |
81 | - token | |
82 | - } = config.query | |
55 | + const { token } = config.query | |
83 | 56 | const info = users[token] |
84 | 57 | |
85 | 58 | // mock error |
... | ... | @@ -99,7 +72,7 @@ export default [{ // user login |
99 | 72 | |
100 | 73 | // user logout |
101 | 74 | { |
102 | - url: '/yp/user/logout', | |
75 | + url: '/vue-element-admin/user/logout', | |
103 | 76 | type: 'post', |
104 | 77 | response: _ => { |
105 | 78 | return { | ... | ... |
package.json
1 | 1 | { |
2 | - "name": "yp-plan", | |
2 | + "name": "vue-element-admin", | |
3 | 3 | "version": "4.2.1", |
4 | - "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint", | |
5 | - "author": "XYT==admin@xiuyetang.com", | |
4 | + "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features", | |
5 | + "author": "Pan <panfree23@gmail.com>", | |
6 | 6 | "license": "MIT", |
7 | 7 | "scripts": { |
8 | 8 | "dev": "vue-cli-service serve", |
... | ... | @@ -12,53 +12,96 @@ |
12 | 12 | "lint": "eslint --ext .js,.vue src", |
13 | 13 | "test:unit": "jest --clearCache && vue-cli-service test:unit", |
14 | 14 | "test:ci": "npm run lint && npm run test:unit", |
15 | - "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml" | |
15 | + "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", | |
16 | + "new": "plop" | |
17 | + }, | |
18 | + "husky": { | |
19 | + "hooks": { | |
20 | + "pre-commit": "lint-staged" | |
21 | + } | |
22 | + }, | |
23 | + "lint-staged": { | |
24 | + "src/**/*.{js,vue}": [ | |
25 | + "eslint --fix", | |
26 | + "git add" | |
27 | + ] | |
28 | + }, | |
29 | + "keywords": [ | |
30 | + "vue", | |
31 | + "admin", | |
32 | + "dashboard", | |
33 | + "element-ui", | |
34 | + "boilerplate", | |
35 | + "admin-template", | |
36 | + "management-system" | |
37 | + ], | |
38 | + "repository": { | |
39 | + "type": "git", | |
40 | + "url": "git+https://github.com/PanJiaChen/vue-element-admin.git" | |
41 | + }, | |
42 | + "bugs": { | |
43 | + "url": "https://github.com/PanJiaChen/vue-element-admin/issues" | |
16 | 44 | }, |
17 | 45 | "dependencies": { |
18 | 46 | "axios": "0.18.1", |
19 | - "babel-polyfill": "^6.26.0", | |
20 | - "echarts": "^4.7.0", | |
47 | + "clipboard": "2.0.4", | |
48 | + "codemirror": "5.45.0", | |
49 | + "driver.js": "0.9.5", | |
50 | + "dropzone": "5.5.1", | |
51 | + "echarts": "4.2.1", | |
21 | 52 | "element-ui": "2.13.0", |
53 | + "file-saver": "2.0.1", | |
54 | + "fuse.js": "3.4.4", | |
22 | 55 | "js-cookie": "2.2.0", |
56 | + "jsonlint": "1.6.3", | |
57 | + "jszip": "3.2.1", | |
23 | 58 | "normalize.css": "7.0.0", |
24 | 59 | "nprogress": "0.2.0", |
25 | 60 | "path-to-regexp": "2.4.0", |
26 | - "plop": "^2.6.0", | |
61 | + "pinyin": "2.9.0", | |
62 | + "screenfull": "4.2.0", | |
63 | + "showdown": "1.9.0", | |
64 | + "sortablejs": "1.8.4", | |
65 | + "tui-editor": "1.3.3", | |
27 | 66 | "vue": "2.6.10", |
28 | - "vue-router": "3.0.6", | |
29 | - "vuex": "3.1.0" | |
67 | + "vue-count-to": "1.0.13", | |
68 | + "vue-i18n": "7.3.2", | |
69 | + "vue-router": "3.0.2", | |
70 | + "vue-splitpane": "1.0.4", | |
71 | + "vuedraggable": "2.20.0", | |
72 | + "vuex": "3.1.0", | |
73 | + "xlsx": "0.14.1" | |
30 | 74 | }, |
31 | 75 | "devDependencies": { |
32 | 76 | "@babel/core": "7.0.0", |
33 | - "@babel/preset-env": "^7.9.6", | |
34 | 77 | "@babel/register": "7.0.0", |
35 | - "@vue/cli-plugin-babel": "3.6.0", | |
78 | + "@vue/cli-plugin-babel": "3.5.3", | |
36 | 79 | "@vue/cli-plugin-eslint": "^3.9.1", |
37 | - "@vue/cli-plugin-unit-jest": "3.6.3", | |
38 | - "@vue/cli-service": "3.6.0", | |
80 | + "@vue/cli-plugin-unit-jest": "3.5.3", | |
81 | + "@vue/cli-service": "3.5.3", | |
39 | 82 | "@vue/test-utils": "1.0.0-beta.29", |
40 | 83 | "autoprefixer": "^9.5.1", |
41 | - "babel-cli": "^6.26.0", | |
42 | 84 | "babel-core": "7.0.0-bridge.0", |
43 | 85 | "babel-eslint": "10.0.1", |
44 | 86 | "babel-jest": "23.6.0", |
45 | - "babel-plugin-component": "^1.1.1", | |
46 | - "babel-preset-env": "^1.7.0", | |
47 | 87 | "chalk": "2.4.2", |
88 | + "chokidar": "2.1.5", | |
48 | 89 | "connect": "3.6.6", |
49 | 90 | "eslint": "5.15.3", |
50 | 91 | "eslint-plugin-vue": "5.2.2", |
51 | 92 | "html-webpack-plugin": "3.2.0", |
93 | + "husky": "1.3.1", | |
94 | + "lint-staged": "8.1.5", | |
52 | 95 | "mockjs": "1.0.1-beta3", |
53 | 96 | "node-sass": "^4.9.0", |
97 | + "plop": "2.3.0", | |
54 | 98 | "runjs": "^4.3.2", |
55 | 99 | "sass-loader": "^7.1.0", |
56 | 100 | "script-ext-html-webpack-plugin": "2.1.3", |
57 | 101 | "script-loader": "0.7.2", |
58 | 102 | "serve-static": "^1.13.2", |
59 | 103 | "svg-sprite-loader": "4.1.3", |
60 | - "svgo": "1.2.2", | |
61 | - "vue-schart": "^2.0.0", | |
104 | + "svgo": "1.2.0", | |
62 | 105 | "vue-template-compiler": "2.6.10" |
63 | 106 | }, |
64 | 107 | "engines": { | ... | ... |
plop-templates/component/index.hbs
... | ... | @@ -0,0 +1,26 @@ |
1 | +{{#if template}} | |
2 | +<template> | |
3 | + <div /> | |
4 | +</template> | |
5 | +{{/if}} | |
6 | + | |
7 | +{{#if script}} | |
8 | +<script> | |
9 | +export default { | |
10 | + name: '{{ properCase name }}', | |
11 | + props: {}, | |
12 | + data() { | |
13 | + return {} | |
14 | + }, | |
15 | + created() {}, | |
16 | + mounted() {}, | |
17 | + methods: {} | |
18 | +} | |
19 | +</script> | |
20 | +{{/if}} | |
21 | + | |
22 | +{{#if style}} | |
23 | +<style lang="scss" scoped> | |
24 | + | |
25 | +</style> | |
26 | +{{/if}} | ... | ... |
plop-templates/component/prompt.js
... | ... | @@ -0,0 +1,55 @@ |
1 | +const { notEmpty } = require('../utils.js') | |
2 | + | |
3 | +module.exports = { | |
4 | + description: 'generate vue component', | |
5 | + prompts: [{ | |
6 | + type: 'input', | |
7 | + name: 'name', | |
8 | + message: 'component name please', | |
9 | + validate: notEmpty('name') | |
10 | + }, | |
11 | + { | |
12 | + type: 'checkbox', | |
13 | + name: 'blocks', | |
14 | + message: 'Blocks:', | |
15 | + choices: [{ | |
16 | + name: '<template>', | |
17 | + value: 'template', | |
18 | + checked: true | |
19 | + }, | |
20 | + { | |
21 | + name: '<script>', | |
22 | + value: 'script', | |
23 | + checked: true | |
24 | + }, | |
25 | + { | |
26 | + name: 'style', | |
27 | + value: 'style', | |
28 | + checked: true | |
29 | + } | |
30 | + ], | |
31 | + validate(value) { | |
32 | + if (value.indexOf('script') === -1 && value.indexOf('template') === -1) { | |
33 | + return 'Components require at least a <script> or <template> tag.' | |
34 | + } | |
35 | + return true | |
36 | + } | |
37 | + } | |
38 | + ], | |
39 | + actions: data => { | |
40 | + const name = '{{properCase name}}' | |
41 | + const actions = [{ | |
42 | + type: 'add', | |
43 | + path: `src/components/${name}/index.vue`, | |
44 | + templateFile: 'plop-templates/component/index.hbs', | |
45 | + data: { | |
46 | + name: name, | |
47 | + template: data.blocks.includes('template'), | |
48 | + script: data.blocks.includes('script'), | |
49 | + style: data.blocks.includes('style') | |
50 | + } | |
51 | + }] | |
52 | + | |
53 | + return actions | |
54 | + } | |
55 | +} | ... | ... |
plop-templates/store/index.hbs
plop-templates/store/prompt.js
... | ... | @@ -0,0 +1,62 @@ |
1 | +const { notEmpty } = require('../utils.js') | |
2 | + | |
3 | +module.exports = { | |
4 | + description: 'generate store', | |
5 | + prompts: [{ | |
6 | + type: 'input', | |
7 | + name: 'name', | |
8 | + message: 'store name please', | |
9 | + validate: notEmpty('name') | |
10 | + }, | |
11 | + { | |
12 | + type: 'checkbox', | |
13 | + name: 'blocks', | |
14 | + message: 'Blocks:', | |
15 | + choices: [{ | |
16 | + name: 'state', | |
17 | + value: 'state', | |
18 | + checked: true | |
19 | + }, | |
20 | + { | |
21 | + name: 'mutations', | |
22 | + value: 'mutations', | |
23 | + checked: true | |
24 | + }, | |
25 | + { | |
26 | + name: 'actions', | |
27 | + value: 'actions', | |
28 | + checked: true | |
29 | + } | |
30 | + ], | |
31 | + validate(value) { | |
32 | + if (!value.includes('state') || !value.includes('mutations')) { | |
33 | + return 'store require at least state and mutations' | |
34 | + } | |
35 | + return true | |
36 | + } | |
37 | + } | |
38 | + ], | |
39 | + actions(data) { | |
40 | + const name = '{{name}}' | |
41 | + const { blocks } = data | |
42 | + const options = ['state', 'mutations'] | |
43 | + const joinFlag = `, | |
44 | + ` | |
45 | + if (blocks.length === 3) { | |
46 | + options.push('actions') | |
47 | + } | |
48 | + | |
49 | + const actions = [{ | |
50 | + type: 'add', | |
51 | + path: `src/store/modules/${name}.js`, | |
52 | + templateFile: 'plop-templates/store/index.hbs', | |
53 | + data: { | |
54 | + options: options.join(joinFlag), | |
55 | + state: blocks.includes('state'), | |
56 | + mutations: blocks.includes('mutations'), | |
57 | + actions: blocks.includes('actions') | |
58 | + } | |
59 | + }] | |
60 | + return actions | |
61 | + } | |
62 | +} | ... | ... |
plop-templates/utils.js
plop-templates/view/index.hbs
... | ... | @@ -0,0 +1,26 @@ |
1 | +{{#if template}} | |
2 | +<template> | |
3 | + <div /> | |
4 | +</template> | |
5 | +{{/if}} | |
6 | + | |
7 | +{{#if script}} | |
8 | +<script> | |
9 | +export default { | |
10 | + name: '{{ properCase name }}', | |
11 | + props: {}, | |
12 | + data() { | |
13 | + return {} | |
14 | + }, | |
15 | + created() {}, | |
16 | + mounted() {}, | |
17 | + methods: {} | |
18 | +} | |
19 | +</script> | |
20 | +{{/if}} | |
21 | + | |
22 | +{{#if style}} | |
23 | +<style lang="scss" scoped> | |
24 | + | |
25 | +</style> | |
26 | +{{/if}} | ... | ... |
plop-templates/view/prompt.js
... | ... | @@ -0,0 +1,55 @@ |
1 | +const { notEmpty } = require('../utils.js') | |
2 | + | |
3 | +module.exports = { | |
4 | + description: 'generate a view', | |
5 | + prompts: [{ | |
6 | + type: 'input', | |
7 | + name: 'name', | |
8 | + message: 'view name please', | |
9 | + validate: notEmpty('name') | |
10 | + }, | |
11 | + { | |
12 | + type: 'checkbox', | |
13 | + name: 'blocks', | |
14 | + message: 'Blocks:', | |
15 | + choices: [{ | |
16 | + name: '<template>', | |
17 | + value: 'template', | |
18 | + checked: true | |
19 | + }, | |
20 | + { | |
21 | + name: '<script>', | |
22 | + value: 'script', | |
23 | + checked: true | |
24 | + }, | |
25 | + { | |
26 | + name: 'style', | |
27 | + value: 'style', | |
28 | + checked: true | |
29 | + } | |
30 | + ], | |
31 | + validate(value) { | |
32 | + if (value.indexOf('script') === -1 && value.indexOf('template') === -1) { | |
33 | + return 'View require at least a <script> or <template> tag.' | |
34 | + } | |
35 | + return true | |
36 | + } | |
37 | + } | |
38 | + ], | |
39 | + actions: data => { | |
40 | + const name = '{{name}}' | |
41 | + const actions = [{ | |
42 | + type: 'add', | |
43 | + path: `src/views/${name}/index.vue`, | |
44 | + templateFile: 'plop-templates/view/index.hbs', | |
45 | + data: { | |
46 | + name: name, | |
47 | + template: data.blocks.includes('template'), | |
48 | + script: data.blocks.includes('script'), | |
49 | + style: data.blocks.includes('style') | |
50 | + } | |
51 | + }] | |
52 | + | |
53 | + return actions | |
54 | + } | |
55 | +} | ... | ... |
plopfile.js
... | ... | @@ -0,0 +1,9 @@ |
1 | +const viewGenerator = require('./plop-templates/view/prompt') | |
2 | +const componentGenerator = require('./plop-templates/component/prompt') | |
3 | +const storeGenerator = require('./plop-templates/store/prompt.js') | |
4 | + | |
5 | +module.exports = function(plop) { | |
6 | + plop.setGenerator('view', viewGenerator) | |
7 | + plop.setGenerator('component', componentGenerator) | |
8 | + plop.setGenerator('store', storeGenerator) | |
9 | +} | ... | ... |
postcss.config.js
No preview for this file type
public/index.html
... | ... | @@ -3,14 +3,12 @@ |
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8"> |
5 | 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
6 | + <meta name="renderer" content="webkit"> | |
6 | 7 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
7 | 8 | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
8 | 9 | <title><%= webpackConfig.name %></title> |
9 | 10 | </head> |
10 | 11 | <body> |
11 | - <noscript> | |
12 | - <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |
13 | - </noscript> | |
14 | 12 | <div id="app"></div> |
15 | 13 | <!-- built files will be auto injected --> |
16 | 14 | </body> | ... | ... |
src/App.vue
... | ... | @@ -4,23 +4,8 @@ |
4 | 4 | </div> |
5 | 5 | </template> |
6 | 6 | |
7 | - | |
8 | 7 | <script> |
9 | 8 | export default { |
10 | - name: "App" | |
11 | -}; | |
12 | -</script> | |
13 | - | |
14 | - | |
15 | -<style> | |
16 | -@import "//at.alicdn.com/t/font_1075796_5kpx2vwkmq3.css"; | |
17 | - | |
18 | -[class^="el-icon-mo"], | |
19 | -[class^=" el-icon-mo"] { | |
20 | - font-family: "iconfont", serif !important; | |
21 | - font-size: 16px; | |
22 | - font-style: normal; | |
23 | - -webkit-font-smoothing: antialiased; | |
24 | - -moz-osx-font-smoothing: grayscale; | |
9 | + name: 'App' | |
25 | 10 | } |
26 | -</style> | |
27 | 11 | \ No newline at end of file |
12 | +</script> | ... | ... |
src/api/article.js
... | ... | @@ -0,0 +1,41 @@ |
1 | +import request from '@/utils/request' | |
2 | + | |
3 | +export function fetchList(query) { | |
4 | + return request({ | |
5 | + url: '/vue-element-admin/article/list', | |
6 | + method: 'get', | |
7 | + params: query | |
8 | + }) | |
9 | +} | |
10 | + | |
11 | +export function fetchArticle(id) { | |
12 | + return request({ | |
13 | + url: '/vue-element-admin/article/detail', | |
14 | + method: 'get', | |
15 | + params: { id } | |
16 | + }) | |
17 | +} | |
18 | + | |
19 | +export function fetchPv(pv) { | |
20 | + return request({ | |
21 | + url: '/vue-element-admin/article/pv', | |
22 | + method: 'get', | |
23 | + params: { pv } | |
24 | + }) | |
25 | +} | |
26 | + | |
27 | +export function createArticle(data) { | |
28 | + return request({ | |
29 | + url: '/vue-element-admin/article/create', | |
30 | + method: 'post', | |
31 | + data | |
32 | + }) | |
33 | +} | |
34 | + | |
35 | +export function updateArticle(data) { | |
36 | + return request({ | |
37 | + url: '/vue-element-admin/article/update', | |
38 | + method: 'post', | |
39 | + data | |
40 | + }) | |
41 | +} | ... | ... |
src/api/qiniu.js
src/api/remote-search.js
... | ... | @@ -0,0 +1,17 @@ |
1 | +import request from '@/utils/request' | |
2 | + | |
3 | +export function searchUser(name) { | |
4 | + return request({ | |
5 | + url: '/vue-element-admin/search/user', | |
6 | + method: 'get', | |
7 | + params: { name } | |
8 | + }) | |
9 | +} | |
10 | + | |
11 | +export function transactionList(query) { | |
12 | + return request({ | |
13 | + url: '/vue-element-admin/transaction/list', | |
14 | + method: 'get', | |
15 | + params: query | |
16 | + }) | |
17 | +} | ... | ... |
src/api/role.js
... | ... | @@ -0,0 +1,38 @@ |
1 | +import request from '@/utils/request' | |
2 | + | |
3 | +export function getRoutes() { | |
4 | + return request({ | |
5 | + url: '/vue-element-admin/routes', | |
6 | + method: 'get' | |
7 | + }) | |
8 | +} | |
9 | + | |
10 | +export function getRoles() { | |
11 | + return request({ | |
12 | + url: '/vue-element-admin/roles', | |
13 | + method: 'get' | |
14 | + }) | |
15 | +} | |
16 | + | |
17 | +export function addRole(data) { | |
18 | + return request({ | |
19 | + url: '/vue-element-admin/role', | |
20 | + method: 'post', | |
21 | + data | |
22 | + }) | |
23 | +} | |
24 | + | |
25 | +export function updateRole(id, data) { | |
26 | + return request({ | |
27 | + url: `/vue-element-admin/role/${id}`, | |
28 | + method: 'put', | |
29 | + data | |
30 | + }) | |
31 | +} | |
32 | + | |
33 | +export function deleteRole(id) { | |
34 | + return request({ | |
35 | + url: `/vue-element-admin/role/${id}`, | |
36 | + method: 'delete' | |
37 | + }) | |
38 | +} | ... | ... |
src/api/user.js
1 | 1 | import request from '@/utils/request' |
2 | -// var qs = require('Qs'); | |
3 | 2 | |
4 | 3 | export function login(data) { |
5 | - console.log('login.1111...', data) | |
6 | 4 | return request({ |
7 | - url: '/yp/user/login', | |
8 | - // url: '/yp.user.login.php', | |
5 | + url: '/vue-element-admin/user/login', | |
9 | 6 | method: 'post', |
10 | - // headers: { | |
11 | - // 'Content-type': 'application/x-www-form-urlencoded' | |
12 | - // }, | |
13 | - data, | |
14 | - // responseType: 'text/plain', | |
15 | - // onDownloadProgress: false, | |
16 | - // onUploadProgress: true, | |
17 | - // proxy: {} | |
18 | - }); | |
19 | -} | |
20 | - | |
21 | -export function getInfo(token) { | |
22 | - console.log('getInfo....', token) | |
23 | - return request({ | |
24 | - url: '/yp/user/info', | |
25 | - // url: '/yp.user.info.php', | |
26 | - method: 'get', | |
27 | - params: { | |
28 | - token | |
29 | - } | |
30 | - // , | |
31 | - // headers: { | |
32 | - // 'Content-type': 'application/x-www-form-urlencoded' | |
33 | - // }, | |
7 | + data | |
34 | 8 | }) |
35 | 9 | } |
36 | 10 | |
37 | -export function list(token) { | |
38 | - console.log('listUser....', token) | |
11 | +export function getInfo(token) { | |
39 | 12 | return request({ |
40 | - url: '/yp/user/list', | |
13 | + url: '/vue-element-admin/user/info', | |
41 | 14 | method: 'get', |
42 | - params: { | |
43 | - token | |
44 | - } | |
15 | + params: { token } | |
45 | 16 | }) |
46 | 17 | } |
47 | 18 | |
48 | -export function add(token) { | |
49 | - console.log('addUser....', token) | |
19 | +export function logout() { | |
50 | 20 | return request({ |
51 | - url: '/yp/user/add', | |
52 | - method: 'post', | |
53 | - params: { | |
54 | - token | |
55 | - } | |
56 | - }) | |
57 | -} | |
58 | - | |
59 | -export function modi(token) { | |
60 | - console.log('modiUser....', token) | |
61 | - return request({ | |
62 | - url: '/yp/user/modi', | |
63 | - method: 'post', | |
64 | - params: { | |
65 | - token | |
66 | - } | |
67 | - }) | |
68 | -} | |
69 | - | |
70 | -export function logout(token) { | |
71 | - console.log('logout....', token) | |
72 | - return request({ | |
73 | - url: '/yp/user/logout', | |
74 | - // url: '/yp.user.logout.php', | |
75 | - method: 'post', | |
21 | + url: '/vue-element-admin/user/logout', | |
22 | + method: 'post' | |
76 | 23 | }) |
77 | 24 | } | ... | ... |
src/assets/401_images/401.gif
160 KB
src/assets/custom-theme/fonts/element-icons.ttf
No preview for this file type
src/assets/custom-theme/fonts/element-icons.woff
No preview for this file type
src/assets/custom-theme/index.css
... | ... | @@ -0,0 +1 @@ |
1 | +@charset "UTF-8";.custom-theme .fade-in-linear-enter-active,.custom-theme .fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.custom-theme .fade-in-linear-enter,.custom-theme .fade-in-linear-leave,.custom-theme .fade-in-linear-leave-active{opacity:0}.custom-theme .el-fade-in-linear-enter-active,.custom-theme .el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.custom-theme .el-fade-in-linear-enter,.custom-theme .el-fade-in-linear-leave,.custom-theme .el-fade-in-linear-leave-active{opacity:0}.custom-theme .el-fade-in-enter-active,.custom-theme .el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-fade-in-enter,.custom-theme .el-fade-in-leave-active{opacity:0}.custom-theme .el-zoom-in-center-enter-active,.custom-theme .el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-zoom-in-center-enter,.custom-theme .el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.custom-theme .el-zoom-in-top-enter-active,.custom-theme .el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:center top;transform-origin:center top}.custom-theme .el-zoom-in-top-enter,.custom-theme .el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.custom-theme .el-zoom-in-bottom-enter-active,.custom-theme .el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:center bottom;transform-origin:center bottom}.custom-theme .el-zoom-in-bottom-enter,.custom-theme .el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.custom-theme .el-zoom-in-left-enter-active,.custom-theme .el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:top left;transform-origin:top left}.custom-theme .el-zoom-in-left-enter,.custom-theme .el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.custom-theme .collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.custom-theme .horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.custom-theme .el-list-enter-active,.custom-theme .el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.custom-theme .el-list-enter,.custom-theme .el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.custom-theme .el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}@font-face{font-family:element-icons;src:url(fonts/element-icons.woff?t=1508751886602) format("woff"),url(fonts/element-icons.ttf?t=1508751886602) format("truetype");font-weight:400;font-style:normal}.custom-theme [class*=" el-icon-"],.custom-theme [class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.custom-theme .el-icon-upload:before{content:"\e60d"}.custom-theme .el-icon-error:before{content:"\e62c"}.custom-theme .el-icon-success:before{content:"\e62d"}.custom-theme .el-icon-warning:before{content:"\e62e"}.custom-theme .el-icon-sort-down:before{content:"\e630"}.custom-theme .el-icon-sort-up:before{content:"\e631"}.custom-theme .el-icon-arrow-left:before{content:"\e600"}.custom-theme .el-icon-circle-plus:before{content:"\e601"}.custom-theme .el-icon-circle-plus-outline:before{content:"\e602"}.custom-theme .el-icon-arrow-down:before{content:"\e603"}.custom-theme .el-icon-arrow-right:before{content:"\e604"}.custom-theme .el-icon-arrow-up:before{content:"\e605"}.custom-theme .el-icon-back:before{content:"\e606"}.custom-theme .el-icon-circle-close:before{content:"\e607"}.custom-theme .el-icon-date:before{content:"\e608"}.custom-theme .el-icon-circle-close-outline:before{content:"\e609"}.custom-theme .el-icon-caret-left:before{content:"\e60a"}.custom-theme .el-icon-caret-bottom:before{content:"\e60b"}.custom-theme .el-icon-caret-top:before{content:"\e60c"}.custom-theme .el-icon-caret-right:before{content:"\e60e"}.custom-theme .el-icon-close:before{content:"\e60f"}.custom-theme .el-icon-d-arrow-left:before{content:"\e610"}.custom-theme .el-icon-check:before{content:"\e611"}.custom-theme .el-icon-delete:before{content:"\e612"}.custom-theme .el-icon-d-arrow-right:before{content:"\e613"}.custom-theme .el-icon-document:before{content:"\e614"}.custom-theme .el-icon-d-caret:before{content:"\e615"}.custom-theme .el-icon-edit-outline:before{content:"\e616"}.custom-theme .el-icon-download:before{content:"\e617"}.custom-theme .el-icon-goods:before{content:"\e618"}.custom-theme .el-icon-search:before{content:"\e619"}.custom-theme .el-icon-info:before{content:"\e61a"}.custom-theme .el-icon-message:before{content:"\e61b"}.custom-theme .el-icon-edit:before{content:"\e61c"}.custom-theme .el-icon-location:before{content:"\e61d"}.custom-theme .el-icon-loading:before{content:"\e61e"}.custom-theme .el-icon-location-outline:before{content:"\e61f"}.custom-theme .el-icon-menu:before{content:"\e620"}.custom-theme .el-icon-minus:before{content:"\e621"}.custom-theme .el-icon-bell:before{content:"\e622"}.custom-theme .el-icon-mobile-phone:before{content:"\e624"}.custom-theme .el-icon-news:before{content:"\e625"}.custom-theme .el-icon-more:before{content:"\e646"}.custom-theme .el-icon-more-outline:before{content:"\e626"}.custom-theme .el-icon-phone:before{content:"\e627"}.custom-theme .el-icon-phone-outline:before{content:"\e628"}.custom-theme .el-icon-picture:before{content:"\e629"}.custom-theme .el-icon-picture-outline:before{content:"\e62a"}.custom-theme .el-icon-plus:before{content:"\e62b"}.custom-theme .el-icon-printer:before{content:"\e62f"}.custom-theme .el-icon-rank:before{content:"\e632"}.custom-theme .el-icon-refresh:before{content:"\e633"}.custom-theme .el-icon-question:before{content:"\e634"}.custom-theme .el-icon-remove:before{content:"\e635"}.custom-theme .el-icon-share:before{content:"\e636"}.custom-theme .el-icon-star-on:before{content:"\e637"}.custom-theme .el-icon-setting:before{content:"\e638"}.custom-theme .el-icon-circle-check:before{content:"\e639"}.custom-theme .el-icon-service:before{content:"\e63a"}.custom-theme .el-icon-sold-out:before{content:"\e63b"}.custom-theme .el-icon-remove-outline:before{content:"\e63c"}.custom-theme .el-icon-star-off:before{content:"\e63d"}.custom-theme .el-icon-circle-check-outline:before{content:"\e63e"}.custom-theme .el-icon-tickets:before{content:"\e63f"}.custom-theme .el-icon-sort:before{content:"\e640"}.custom-theme .el-icon-zoom-in:before{content:"\e641"}.custom-theme .el-icon-time:before{content:"\e642"}.custom-theme .el-icon-view:before{content:"\e643"}.custom-theme .el-icon-upload2:before{content:"\e644"}.custom-theme .el-icon-zoom-out:before{content:"\e645"}.custom-theme .el-icon-loading{-webkit-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}.custom-theme .el-icon--right{margin-left:5px}.custom-theme .el-icon--left{margin-right:5px}@-webkit-keyframes rotating{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotating{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .el-select-dropdown{position:absolute;z-index:1001;border:solid 1px #dfe4ed;border-radius:4px;background-color:#fff;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0}.custom-theme .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#262729;background-color:#fff}.custom-theme .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#f5f7fa}.custom-theme .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{position:absolute;right:20px;font-family:element-icons;content:"\E611";font-size:12px;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.custom-theme .el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.custom-theme .el-select-dropdown .popper__arrow{-webkit-transform:translateX(-400%);transform:translateX(-400%)}.custom-theme .el-select-dropdown.is-arrow-fixed .popper__arrow{-webkit-transform:translateX(-200%);transform:translateX(-200%)}.custom-theme .el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.custom-theme .el-select-dropdown__wrap{max-height:274px}.custom-theme .el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-tag{background-color:rgba(38,39,41,.1);display:inline-block;padding:0 10px;height:32px;line-height:30px;font-size:12px;color:#262729;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid rgba(38,39,41,.2);white-space:nowrap}.custom-theme .el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-5px;color:#262729}.custom-theme .el-tag .el-icon-close::before{display:block}.custom-theme .el-tag .el-icon-close:hover{background-color:#262729;color:#fff}.custom-theme .el-tag--info{background-color:rgba(10,118,164,.1);border-color:rgba(10,118,164,.2);color:#0a76a4}.custom-theme .el-tag--info.is-hit{border-color:#0a76a4}.custom-theme .el-tag--info .el-tag__close{color:#0a76a4}.custom-theme .el-tag--info .el-tag__close:hover{background-color:#0a76a4;color:#fff}.custom-theme .el-tag--success{background-color:rgba(64,145,103,.1);border-color:rgba(64,145,103,.2);color:#409167}.custom-theme .el-tag--success.is-hit{border-color:#409167}.custom-theme .el-tag--success .el-tag__close{color:#409167}.custom-theme .el-tag--success .el-tag__close:hover{background-color:#409167;color:#fff}.custom-theme .el-tag--warning{background-color:rgba(157,164,8,.1);border-color:rgba(157,164,8,.2);color:#9da408}.custom-theme .el-tag--warning.is-hit{border-color:#9da408}.custom-theme .el-tag--warning .el-tag__close{color:#9da408}.custom-theme .el-tag--warning .el-tag__close:hover{background-color:#9da408;color:#fff}.custom-theme .el-tag--danger{background-color:rgba(179,69,14,.1);border-color:rgba(179,69,14,.2);color:#b3450e}.custom-theme .el-tag--danger.is-hit{border-color:#b3450e}.custom-theme .el-tag--danger .el-tag__close{color:#b3450e}.custom-theme .el-tag--danger .el-tag__close:hover{background-color:#b3450e;color:#fff}.custom-theme .el-tag--medium{height:28px;line-height:26px}.custom-theme .el-tag--medium .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--small{height:24px;padding:0 8px;line-height:22px}.custom-theme .el-tag--small .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--mini{height:20px;padding:0 5px;line-height:19px}.custom-theme .el-tag--mini .el-icon-close{margin-left:-3px;-webkit-transform:scale(.7);transform:scale(.7)}.custom-theme .el-select-dropdown__item{font-size:14px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#5a5e66;height:34px;line-height:34px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.custom-theme .el-select-dropdown__item.is-disabled{color:#b4bccc;cursor:not-allowed}.custom-theme .el-select-dropdown__item.is-disabled:hover{background-color:#fff}.custom-theme .el-select-dropdown__item.hover,.custom-theme .el-select-dropdown__item:hover{background-color:#f5f7fa}.custom-theme .el-select-dropdown__item.selected{color:#262729;font-weight:700}.custom-theme .el-select-dropdown__item span{line-height:34px!important}.custom-theme .el-select-group{margin:0;padding:0}.custom-theme .el-select-group__wrap{position:relative;list-style:none;margin:0;padding:0}.custom-theme .el-select-group__wrap:not(:last-of-type){padding-bottom:24px}.custom-theme .el-select-group__wrap:not(:last-of-type)::after{content:'';position:absolute;display:block;left:20px;right:20px;bottom:12px;height:1px;background:#dfe4ed}.custom-theme .el-select-group__title{padding-left:20px;font-size:12px;color:#0a76a4;line-height:30px}.custom-theme .el-select-group .el-select-dropdown__item{padding-left:20px}.custom-theme .el-scrollbar{overflow:hidden;position:relative}.custom-theme .el-scrollbar:active>.el-scrollbar__bar,.custom-theme .el-scrollbar:focus>.el-scrollbar__bar,.custom-theme .el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.custom-theme .el-scrollbar__wrap{overflow:scroll;height:100%}.custom-theme .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.custom-theme .el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(135,141,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.custom-theme .el-scrollbar__thumb:hover{background-color:rgba(135,141,153,.5)}.custom-theme .el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.custom-theme .el-scrollbar__bar.is-vertical{width:6px;top:2px}.custom-theme .el-scrollbar__bar.is-vertical>div{width:100%}.custom-theme .el-scrollbar__bar.is-horizontal{height:6px;left:2px}.custom-theme .el-scrollbar__bar.is-horizontal>div{height:100%}.custom-theme .el-select{display:inline-block;position:relative}.custom-theme .el-select:hover .el-input__inner{border-color:#b4bccc}.custom-theme .el-select .el-input__inner{cursor:pointer;padding-right:35px}.custom-theme .el-select .el-input__inner:focus{border-color:#262729}.custom-theme .el-select .el-input .el-select__caret{color:#b4bccc;font-size:14px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);line-height:16px;cursor:pointer}.custom-theme .el-select .el-input .el-select__caret.is-reverse{-webkit-transform:rotateZ(0);transform:rotateZ(0)}.custom-theme .el-select .el-input .el-select__caret.is-show-close{font-size:14px;text-align:center;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);border-radius:100%;color:#b4bccc;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-select .el-input .el-select__caret.is-show-close:hover{color:#878d99}.custom-theme .el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.custom-theme .el-select .el-input.is-disabled .el-input__inner:hover{border-color:#dfe4ed}.custom-theme .el-select>.el-input{display:block}.custom-theme .el-select__input{border:none;outline:0;padding:0;margin-left:15px;color:#666;font-size:14px;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:28px;background-color:transparent}.custom-theme .el-select__input.is-mini{height:14px}.custom-theme .el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#b4bccc;line-height:18px;font-size:14px}.custom-theme .el-select__close:hover{color:#878d99}.custom-theme .el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.custom-theme .el-select .el-tag__close{margin-top:-2px}.custom-theme .el-select .el-tag{-webkit-box-sizing:border-box;box-sizing:border-box;border-color:transparent;margin:3px 0 3px 6px;background-color:#f0f2f5}.custom-theme .el-select .el-tag__close.el-icon-close{background-color:#b4bccc;right:-7px;color:#fff}.custom-theme .el-select .el-tag__close.el-icon-close:hover{background-color:#878d99}.custom-theme .el-select .el-tag__close.el-icon-close::before{display:block;-webkit-transform:translate(0,.5px);transform:translate(0,.5px)}.custom-theme .el-select__tag{display:inline-block;height:24px;line-height:24px;font-size:14px;border-radius:4px;color:#fff;background-color:#262729}.custom-theme .el-select__tag .el-icon-close{font-size:14px}.custom-theme .el-pagination{white-space:nowrap;padding:2px 5px;color:#2d2f33;font-weight:700}.custom-theme .el-pagination::after,.custom-theme .el-pagination::before{display:table;content:""}.custom-theme .el-pagination::after{clear:both}.custom-theme .el-pagination button,.custom-theme .el-pagination span:not([class*=suffix]){display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;vertical-align:top;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-pagination .el-input__inner{text-align:center}.custom-theme .el-pagination .el-input__suffix{right:0;-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-pagination .el-select .el-input{width:100px;margin:0 5px}.custom-theme .el-pagination .el-select .el-input .el-input__inner{padding-right:25px;border-radius:3px;height:28px}.custom-theme .el-pagination button{border:none;padding:0 6px;background:0 0}.custom-theme .el-pagination button:focus{outline:0}.custom-theme .el-pagination button:hover{color:#262729}.custom-theme .el-pagination button.disabled{color:#b4bccc;background-color:#fff;cursor:not-allowed}.custom-theme .el-pagination .btn-next,.custom-theme .el-pagination .btn-prev{background:center center no-repeat;background-size:16px;background-color:#fff;cursor:pointer;margin:0;color:#2d2f33}.custom-theme .el-pagination .btn-next .el-icon,.custom-theme .el-pagination .btn-prev .el-icon{display:block;font-size:12px}.custom-theme .el-pagination .btn-prev{padding-right:12px}.custom-theme .el-pagination .btn-next{padding-left:12px}.custom-theme .el-pagination--small .btn-next,.custom-theme .el-pagination--small .btn-prev,.custom-theme .el-pagination--small .el-pager li,.custom-theme .el-pagination--small .el-pager li:last-child{border-color:transparent;font-size:12px;line-height:22px;height:22px;min-width:22px}.custom-theme .el-pagination--small .arrow.disabled{visibility:hidden}.custom-theme .el-pagination__sizes{margin:0 10px 0 0;font-weight:400;color:#5a5e66}.custom-theme .el-pagination__sizes .el-input .el-input__inner{font-size:13px;padding-left:8px}.custom-theme .el-pagination__sizes .el-input .el-input__inner:hover{border-color:#262729}.custom-theme .el-pagination__total{margin-right:10px;font-weight:400;color:#5a5e66}.custom-theme .el-pagination__jump{margin-left:24px;font-weight:400;color:#5a5e66}.custom-theme .el-pagination__jump .el-input__inner{padding:0 3px}.custom-theme .el-pagination__rightwrapper{float:right}.custom-theme .el-pagination__editor{line-height:18px;padding:0 2px;height:28px;text-align:center;margin:0 2px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px;-moz-appearance:textfield}.custom-theme .el-pagination__editor.el-input{width:50px}.custom-theme .el-pagination__editor.el-input .el-input__inner{height:28px}.custom-theme .el-pagination__editor .el-input__inner::-webkit-inner-spin-button,.custom-theme .el-pagination__editor .el-input__inner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.custom-theme .el-pager{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;display:inline-block;vertical-align:top;font-size:0;padding:0;margin:0}.custom-theme .el-pager .el-icon-more::before{vertical-align:-4px}.custom-theme .el-pager li{padding:0 4px;background:#fff;vertical-align:top;display:inline-block;font-size:13px;min-width:35.5px;height:28px;line-height:28px;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;margin:0}.custom-theme .el-pager li.btn-quicknext,.custom-theme .el-pager li.btn-quickprev{line-height:28px;color:#2d2f33}.custom-theme .el-pager li.btn-quickprev:hover{cursor:pointer}.custom-theme .el-pager li.btn-quicknext:hover{cursor:pointer}.custom-theme .el-pager li.active+li{border-left:0}.custom-theme .el-pager li:hover{color:#262729}.custom-theme .el-pager li.active{color:#262729;cursor:default}.custom-theme .v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.custom-theme .v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@-webkit-keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{100%{opacity:0}}@keyframes v-modal-out{100%{opacity:0}}.custom-theme .v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.custom-theme .el-dialog{position:relative;margin:0 auto 50px;background:#fff;border-radius:2px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3);-webkit-box-sizing:border-box;box-sizing:border-box;width:50%}.custom-theme .el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.custom-theme .el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.custom-theme .el-dialog__header{padding:15px;padding-bottom:10px}.custom-theme .el-dialog__headerbtn{position:absolute;top:15px;right:15px;padding:0;background:0 0;border:none;outline:0;cursor:pointer;font-size:16px}.custom-theme .el-dialog__headerbtn .el-dialog__close{color:#0a76a4}.custom-theme .el-dialog__headerbtn:focus .el-dialog__close,.custom-theme .el-dialog__headerbtn:hover .el-dialog__close{color:#262729}.custom-theme .el-dialog__title{line-height:24px;font-size:18px;color:#2d2f33}.custom-theme .el-dialog__body{padding:30px 20px;color:#5a5e66;line-height:24px;font-size:14px}.custom-theme .el-dialog__footer{padding:15px;padding-top:10px;text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-dialog--center{text-align:center}.custom-theme .el-dialog--center .el-dialog__header{padding-top:30px}.custom-theme .el-dialog--center .el-dialog__body{text-align:initial;padding:25px 27px 30px}.custom-theme .el-dialog--center .el-dialog__footer{text-align:inherit;padding-bottom:30px}.custom-theme .dialog-fade-enter-active{-webkit-animation:dialog-fade-in .3s;animation:dialog-fade-in .3s}.custom-theme .dialog-fade-leave-active{-webkit-animation:dialog-fade-out .3s;animation:dialog-fade-out .3s}@-webkit-keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-scrollbar{overflow:hidden;position:relative}.custom-theme .el-scrollbar:active>.el-scrollbar__bar,.custom-theme .el-scrollbar:focus>.el-scrollbar__bar,.custom-theme .el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.custom-theme .el-scrollbar__wrap{overflow:scroll;height:100%}.custom-theme .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.custom-theme .el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(135,141,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.custom-theme .el-scrollbar__thumb:hover{background-color:rgba(135,141,153,.5)}.custom-theme .el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.custom-theme .el-scrollbar__bar.is-vertical{width:6px;top:2px}.custom-theme .el-scrollbar__bar.is-vertical>div{width:100%}.custom-theme .el-scrollbar__bar.is-horizontal{height:6px;left:2px}.custom-theme .el-scrollbar__bar.is-horizontal>div{height:100%}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .el-autocomplete{position:relative;display:inline-block}.custom-theme .el-autocomplete-suggestion{margin:5px 0;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:4px}.custom-theme .el-autocomplete-suggestion.el-popper .popper__arrow{left:24px!important}.custom-theme .el-autocomplete-suggestion__wrap{max-height:280px;padding:10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;background-color:#fff;border:1px solid #dfe4ed;border-radius:4px}.custom-theme .el-autocomplete-suggestion__list{margin:0;padding:0}.custom-theme .el-autocomplete-suggestion li{padding:0 20px;margin:0;line-height:34px;cursor:pointer;color:#5a5e66;font-size:14px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-theme .el-autocomplete-suggestion li:hover{background-color:#f5f7fa}.custom-theme .el-autocomplete-suggestion li.highlighted{background-color:#f5f7fa}.custom-theme .el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #000}.custom-theme .el-autocomplete-suggestion li.divider:last-child{margin-bottom:-6px}.custom-theme .el-autocomplete-suggestion.is-loading li{text-align:center;height:100px;line-height:100px;font-size:20px;color:#999}.custom-theme .el-autocomplete-suggestion.is-loading li::after{display:inline-block;content:"";height:100%;vertical-align:middle}.custom-theme .el-autocomplete-suggestion.is-loading li:hover{background-color:#fff}.custom-theme .el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.custom-theme .el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #d8dce5;border-color:#d8dce5;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.custom-theme .el-button+.el-button{margin-left:10px}.custom-theme .el-button.is-round{padding:12px 20px}.custom-theme .el-button:focus,.custom-theme .el-button:hover{color:#262729;border-color:#bebebf;background-color:#e9e9ea}.custom-theme .el-button:active{color:#222325;border-color:#222325;outline:0}.custom-theme .el-button::-moz-focus-inner{border:0}.custom-theme .el-button [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-button.is-plain:focus,.custom-theme .el-button.is-plain:hover{background:#fff;border-color:#262729;color:#262729}.custom-theme .el-button.is-plain:active{background:#fff;border-color:#222325;color:#222325;outline:0}.custom-theme .el-button.is-active{color:#222325;border-color:#222325}.custom-theme .el-button.is-disabled,.custom-theme .el-button.is-disabled:focus,.custom-theme .el-button.is-disabled:hover{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5}.custom-theme .el-button.is-disabled.el-button--text{background-color:transparent}.custom-theme .el-button.is-disabled.is-plain,.custom-theme .el-button.is-disabled.is-plain:focus,.custom-theme .el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#e6ebf5;color:#b4bccc}.custom-theme .el-button.is-loading{position:relative;pointer-events:none}.custom-theme .el-button.is-loading:before{pointer-events:none;content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:rgba(255,255,255,.35)}.custom-theme .el-button.is-round{border-radius:20px;padding:12px 23px}.custom-theme .el-button--primary{color:#fff;background-color:#262729;border-color:#262729}.custom-theme .el-button--primary:focus,.custom-theme .el-button--primary:hover{background:#515254;border-color:#515254;color:#fff}.custom-theme .el-button--primary:active{background:#222325;border-color:#222325;color:#fff;outline:0}.custom-theme .el-button--primary.is-active{background:#222325;border-color:#222325;color:#fff}.custom-theme .el-button--primary.is-disabled,.custom-theme .el-button--primary.is-disabled:active,.custom-theme .el-button--primary.is-disabled:focus,.custom-theme .el-button--primary.is-disabled:hover{color:#fff;background-color:#939394;border-color:#939394}.custom-theme .el-button--primary.is-plain{color:#262729;background:#e9e9ea;border-color:#a8a9a9}.custom-theme .el-button--primary.is-plain:focus,.custom-theme .el-button--primary.is-plain:hover{background:#262729;border-color:#262729;color:#fff}.custom-theme .el-button--primary.is-plain:active{background:#222325;border-color:#222325;color:#fff;outline:0}.custom-theme .el-button--primary.is-plain.is-disabled,.custom-theme .el-button--primary.is-plain.is-disabled:active,.custom-theme .el-button--primary.is-plain.is-disabled:focus,.custom-theme .el-button--primary.is-plain.is-disabled:hover{color:#7d7d7f;background-color:#e9e9ea;border-color:#d4d4d4}.custom-theme .el-button--success{color:#fff;background-color:#409167;border-color:#409167}.custom-theme .el-button--success:focus,.custom-theme .el-button--success:hover{background:#66a785;border-color:#66a785;color:#fff}.custom-theme .el-button--success:active{background:#3a835d;border-color:#3a835d;color:#fff;outline:0}.custom-theme .el-button--success.is-active{background:#3a835d;border-color:#3a835d;color:#fff}.custom-theme .el-button--success.is-disabled,.custom-theme .el-button--success.is-disabled:active,.custom-theme .el-button--success.is-disabled:focus,.custom-theme .el-button--success.is-disabled:hover{color:#fff;background-color:#a0c8b3;border-color:#a0c8b3}.custom-theme .el-button--success.is-plain{color:#409167;background:#ecf4f0;border-color:#b3d3c2}.custom-theme .el-button--success.is-plain:focus,.custom-theme .el-button--success.is-plain:hover{background:#409167;border-color:#409167;color:#fff}.custom-theme .el-button--success.is-plain:active{background:#3a835d;border-color:#3a835d;color:#fff;outline:0}.custom-theme .el-button--success.is-plain.is-disabled,.custom-theme .el-button--success.is-plain.is-disabled:active,.custom-theme .el-button--success.is-plain.is-disabled:focus,.custom-theme .el-button--success.is-plain.is-disabled:hover{color:#8cbda4;background-color:#ecf4f0;border-color:#d9e9e1}.custom-theme .el-button--warning{color:#fff;background-color:#9da408;border-color:#9da408}.custom-theme .el-button--warning:focus,.custom-theme .el-button--warning:hover{background:#b1b639;border-color:#b1b639;color:#fff}.custom-theme .el-button--warning:active{background:#8d9407;border-color:#8d9407;color:#fff;outline:0}.custom-theme .el-button--warning.is-active{background:#8d9407;border-color:#8d9407;color:#fff}.custom-theme .el-button--warning.is-disabled,.custom-theme .el-button--warning.is-disabled:active,.custom-theme .el-button--warning.is-disabled:focus,.custom-theme .el-button--warning.is-disabled:hover{color:#fff;background-color:#ced284;border-color:#ced284}.custom-theme .el-button--warning.is-plain{color:#9da408;background:#f5f6e6;border-color:#d8db9c}.custom-theme .el-button--warning.is-plain:focus,.custom-theme .el-button--warning.is-plain:hover{background:#9da408;border-color:#9da408;color:#fff}.custom-theme .el-button--warning.is-plain:active{background:#8d9407;border-color:#8d9407;color:#fff;outline:0}.custom-theme .el-button--warning.is-plain.is-disabled,.custom-theme .el-button--warning.is-plain.is-disabled:active,.custom-theme .el-button--warning.is-plain.is-disabled:focus,.custom-theme .el-button--warning.is-plain.is-disabled:hover{color:#c4c86b;background-color:#f5f6e6;border-color:#ebedce}.custom-theme .el-button--danger{color:#fff;background-color:#b3450e;border-color:#b3450e}.custom-theme .el-button--danger:focus,.custom-theme .el-button--danger:hover{background:#c26a3e;border-color:#c26a3e;color:#fff}.custom-theme .el-button--danger:active{background:#a13e0d;border-color:#a13e0d;color:#fff;outline:0}.custom-theme .el-button--danger.is-active{background:#a13e0d;border-color:#a13e0d;color:#fff}.custom-theme .el-button--danger.is-disabled,.custom-theme .el-button--danger.is-disabled:active,.custom-theme .el-button--danger.is-disabled:focus,.custom-theme .el-button--danger.is-disabled:hover{color:#fff;background-color:#d9a287;border-color:#d9a287}.custom-theme .el-button--danger.is-plain{color:#b3450e;background:#f7ece7;border-color:#e1b59f}.custom-theme .el-button--danger.is-plain:focus,.custom-theme .el-button--danger.is-plain:hover{background:#b3450e;border-color:#b3450e;color:#fff}.custom-theme .el-button--danger.is-plain:active{background:#a13e0d;border-color:#a13e0d;color:#fff;outline:0}.custom-theme .el-button--danger.is-plain.is-disabled,.custom-theme .el-button--danger.is-plain.is-disabled:active,.custom-theme .el-button--danger.is-plain.is-disabled:focus,.custom-theme .el-button--danger.is-plain.is-disabled:hover{color:#d18f6e;background-color:#f7ece7;border-color:#f0dacf}.custom-theme .el-button--info{color:#fff;background-color:#0a76a4;border-color:#0a76a4}.custom-theme .el-button--info:focus,.custom-theme .el-button--info:hover{background:#3b91b6;border-color:#3b91b6;color:#fff}.custom-theme .el-button--info:active{background:#096a94;border-color:#096a94;color:#fff;outline:0}.custom-theme .el-button--info.is-active{background:#096a94;border-color:#096a94;color:#fff}.custom-theme .el-button--info.is-disabled,.custom-theme .el-button--info.is-disabled:active,.custom-theme .el-button--info.is-disabled:focus,.custom-theme .el-button--info.is-disabled:hover{color:#fff;background-color:#85bbd2;border-color:#85bbd2}.custom-theme .el-button--info.is-plain{color:#0a76a4;background:#e7f1f6;border-color:#9dc8db}.custom-theme .el-button--info.is-plain:focus,.custom-theme .el-button--info.is-plain:hover{background:#0a76a4;border-color:#0a76a4;color:#fff}.custom-theme .el-button--info.is-plain:active{background:#096a94;border-color:#096a94;color:#fff;outline:0}.custom-theme .el-button--info.is-plain.is-disabled,.custom-theme .el-button--info.is-plain.is-disabled:active,.custom-theme .el-button--info.is-plain.is-disabled:focus,.custom-theme .el-button--info.is-plain.is-disabled:hover{color:#6cadc8;background-color:#e7f1f6;border-color:#cee4ed}.custom-theme .el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.custom-theme .el-button--medium.is-round{padding:10px 20px}.custom-theme .el-button--small{padding:9px 15px;font-size:12px;border-radius:3px}.custom-theme .el-button--small.is-round{padding:9px 15px}.custom-theme .el-button--mini{padding:7px 15px;font-size:12px;border-radius:3px}.custom-theme .el-button--mini.is-round{padding:7px 15px}.custom-theme .el-button--text{border:none;color:#262729;background:0 0;padding-left:0;padding-right:0}.custom-theme .el-button--text:focus,.custom-theme .el-button--text:hover{color:#515254;border-color:transparent;background-color:transparent}.custom-theme .el-button--text:active{color:#222325;border-color:transparent;background-color:transparent}.custom-theme .el-button-group{display:inline-block;vertical-align:middle}.custom-theme .el-button-group::after,.custom-theme .el-button-group::before{display:table;content:""}.custom-theme .el-button-group::after{clear:both}.custom-theme .el-button-group .el-button{float:left;position:relative}.custom-theme .el-button-group .el-button+.el-button{margin-left:0}.custom-theme .el-button-group .el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-button-group .el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-button-group .el-button:not(:first-child):not(:last-child){border-radius:0}.custom-theme .el-button-group .el-button:not(:last-child){margin-right:-1px}.custom-theme .el-button-group .el-button:active,.custom-theme .el-button-group .el-button:focus,.custom-theme .el-button-group .el-button:hover{z-index:1}.custom-theme .el-button-group .el-button.is-active{z-index:1}.custom-theme .el-button-group .el-button--primary:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--primary:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .el-dropdown{display:inline-block;position:relative;color:#5a5e66;font-size:14px}.custom-theme .el-dropdown .el-button-group{display:block}.custom-theme .el-dropdown .el-button-group .el-button{float:none}.custom-theme .el-dropdown .el-dropdown__caret-button{padding-left:5px;padding-right:5px;position:relative;border-left:none}.custom-theme .el-dropdown .el-dropdown__caret-button::before{content:'';position:absolute;display:block;width:1px;top:5px;bottom:5px;left:0;background:rgba(255,255,255,.5)}.custom-theme .el-dropdown .el-dropdown__caret-button:hover::before{top:0;bottom:0}.custom-theme .el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.custom-theme .el-dropdown__icon{font-size:12px;margin:0 3px}.custom-theme .el-dropdown-menu{position:absolute;top:0;left:0;z-index:10;padding:10px 0;margin:5px 0;background-color:#fff;border:1px solid #e6ebf5;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.custom-theme .el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 20px;margin:0;font-size:14px;color:#5a5e66;cursor:pointer}.custom-theme .el-dropdown-menu__item:not(.is-disabled):hover{background-color:#e9e9ea;color:#515254}.custom-theme .el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #e6ebf5}.custom-theme .el-dropdown-menu__item--divided:before{content:'';height:6px;display:block;margin:0 -20px;background-color:#fff}.custom-theme .el-dropdown-menu__item.is-disabled{cursor:default;color:#bbb;pointer-events:none}.custom-theme .el-dropdown-menu--medium{padding:6px 0}.custom-theme .el-dropdown-menu--medium .el-dropdown-menu__item{line-height:30px;padding:0 17px;font-size:14px}.custom-theme .el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:6px}.custom-theme .el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:6px;margin:0 -17px}.custom-theme .el-dropdown-menu--small{padding:6px 0}.custom-theme .el-dropdown-menu--small .el-dropdown-menu__item{line-height:27px;padding:0 15px;font-size:13px}.custom-theme .el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:4px}.custom-theme .el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:4px;margin:0 -15px}.custom-theme .el-dropdown-menu--mini{padding:3px 0}.custom-theme .el-dropdown-menu--mini .el-dropdown-menu__item{line-height:24px;padding:0 10px;font-size:12px}.custom-theme .el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:3px}.custom-theme .el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:3px;margin:0 -10px}.custom-theme .el-menu{border-right:solid 1px #e6e6e6;list-style:none;position:relative;margin:0;padding-left:0;background-color:#fff}.custom-theme .el-menu::after,.custom-theme .el-menu::before{display:table;content:""}.custom-theme .el-menu::after{clear:both}.custom-theme .el-menu li{list-style:none}.custom-theme .el-menu--horizontal{border-right:none;border-bottom:solid 1px #e6e6e6}.custom-theme .el-menu--horizontal .el-menu-item{float:left;height:60px;line-height:60px;margin:0;cursor:pointer;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid transparent;color:#878d99}.custom-theme .el-menu--horizontal .el-menu-item a,.custom-theme .el-menu--horizontal .el-menu-item a:hover{color:inherit}.custom-theme .el-menu--horizontal .el-menu-item:focus,.custom-theme .el-menu--horizontal .el-menu-item:hover{background-color:#fff}.custom-theme .el-menu--horizontal .el-submenu{float:left;position:relative}.custom-theme .el-menu--horizontal .el-submenu:focus{outline:0}.custom-theme .el-menu--horizontal .el-submenu:focus>.el-submenu__title{color:#2d2f33}.custom-theme .el-menu--horizontal .el-submenu>.el-menu{position:absolute;top:65px;left:0;border:none;padding:5px 0;background-color:#fff;z-index:100;min-width:100%;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:2px}.custom-theme .el-menu--horizontal .el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:2px solid transparent;color:#878d99}.custom-theme .el-menu--horizontal .el-submenu .el-submenu__title:hover{background-color:#fff}.custom-theme .el-menu--horizontal .el-submenu .el-menu-item{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px}.custom-theme .el-menu--horizontal .el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:8px;margin-top:-3px}.custom-theme .el-menu--horizontal .el-menu-item:focus,.custom-theme .el-menu--horizontal .el-menu-item:hover,.custom-theme .el-menu--horizontal .el-submenu__title:hover{outline:0;color:#2d2f33}.custom-theme .el-menu--horizontal>.el-menu-item.is-active,.custom-theme .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{border-bottom:2px solid #262729;color:#2d2f33}.custom-theme .el-menu--collapse{width:64px}.custom-theme .el-menu--collapse>.el-menu-item [class^=el-icon-],.custom-theme .el-menu--collapse>.el-submenu>.el-submenu__title [class^=el-icon-]{margin:0;vertical-align:middle;width:24px;text-align:center}.custom-theme .el-menu--collapse>.el-menu-item .el-submenu__icon-arrow,.custom-theme .el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}.custom-theme .el-menu--collapse>.el-menu-item span,.custom-theme .el-menu--collapse>.el-submenu>.el-submenu__title span{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}.custom-theme .el-menu--collapse>.el-menu-item.is-active i{color:inherit}.custom-theme .el-menu--collapse .el-menu .el-submenu{min-width:200px}.custom-theme .el-menu--collapse .el-submenu{position:relative}.custom-theme .el-menu--collapse .el-submenu .el-menu{position:absolute;margin-left:5px;top:0;left:100%;z-index:10;border:1px solid #dfe4ed;border-radius:2px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.custom-theme .el-menu--collapse .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{-webkit-transform:none;transform:none}.custom-theme .el-menu-item{height:56px;line-height:56px;font-size:14px;color:#2d2f33;padding:0 20px;cursor:pointer;position:relative;-webkit-transition:border-color .3s,background-color .3s,color .3s;transition:border-color .3s,background-color .3s,color .3s;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap}.custom-theme .el-menu-item [class^=el-icon-]{margin-right:5px;width:24px;text-align:center;font-size:18px}.custom-theme .el-menu-item *{vertical-align:middle}.custom-theme .el-menu-item:first-child{margin-left:0}.custom-theme .el-menu-item:last-child{margin-right:0}.custom-theme .el-menu-item:focus,.custom-theme .el-menu-item:hover{outline:0;background-color:#e9e9ea}.custom-theme .el-menu-item i{color:#878d99}.custom-theme .el-menu-item.is-active{color:#262729}.custom-theme .el-menu-item.is-active i{color:inherit}.custom-theme .el-submenu__title{position:relative;height:56px;line-height:56px;font-size:14px;color:#2d2f33;padding:0 20px;cursor:pointer;position:relative;-webkit-transition:border-color .3s,background-color .3s,color .3s;transition:border-color .3s,background-color .3s,color .3s;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap}.custom-theme .el-submenu__title *{vertical-align:middle}.custom-theme .el-submenu__title i{color:#878d99}.custom-theme .el-submenu__title:hover{background-color:#e9e9ea}.custom-theme .el-submenu .el-menu{border:none}.custom-theme .el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.custom-theme .el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;font-size:12px}.custom-theme .el-submenu.is-active .el-submenu__title{border-bottom-color:#262729}.custom-theme .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}.custom-theme .el-submenu [class^=el-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center;font-size:18px}.custom-theme .el-menu-item-group>ul{padding:0}.custom-theme .el-menu-item-group__title{padding:7px 0 7px 20px;line-height:normal;font-size:12px;color:#878d99}.custom-theme .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow{-webkit-transition:.2s;transition:.2s;opacity:0}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-input-number{position:relative;display:inline-block;width:180px;line-height:38px}.custom-theme .el-input-number .el-input{display:block}.custom-theme .el-input-number .el-input__inner{-webkit-appearance:none;padding-left:50px;padding-right:50px;text-align:center}.custom-theme .el-input-number__decrease,.custom-theme .el-input-number__increase{position:absolute;z-index:1;top:1px;width:40px;height:auto;text-align:center;background:#f5f7fa;color:#5a5e66;cursor:pointer;font-size:13px}.custom-theme .el-input-number__decrease:hover,.custom-theme .el-input-number__increase:hover{color:#262729}.custom-theme .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.custom-theme .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#262729}.custom-theme .el-input-number__decrease.is-disabled,.custom-theme .el-input-number__increase.is-disabled{color:#b4bccc;cursor:not-allowed}.custom-theme .el-input-number__increase{right:1px;border-radius:0 4px 4px 0;border-left:1px solid #d8dce5}.custom-theme .el-input-number__decrease{left:1px;border-radius:4px 0 0 4px;border-right:1px solid #d8dce5}.custom-theme .el-input-number.is-disabled .el-input-number__decrease,.custom-theme .el-input-number.is-disabled .el-input-number__increase{border-color:#dfe4ed;color:#dfe4ed}.custom-theme .el-input-number.is-disabled .el-input-number__decrease:hover,.custom-theme .el-input-number.is-disabled .el-input-number__increase:hover{color:#dfe4ed;cursor:not-allowed}.custom-theme .el-input-number--medium{width:200px;line-height:34px}.custom-theme .el-input-number--medium .el-input-number__decrease,.custom-theme .el-input-number--medium .el-input-number__increase{width:36px;font-size:14px}.custom-theme .el-input-number--medium .el-input__inner{padding-left:43px;padding-right:43px}.custom-theme .el-input-number--small{width:130px;line-height:30px}.custom-theme .el-input-number--small .el-input-number__decrease,.custom-theme .el-input-number--small .el-input-number__increase{width:32px;font-size:13px}.custom-theme .el-input-number--small .el-input-number__decrease [class*=el-icon],.custom-theme .el-input-number--small .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.9);transform:scale(.9)}.custom-theme .el-input-number--small .el-input__inner{padding-left:39px;padding-right:39px}.custom-theme .el-input-number--mini{width:130px;line-height:26px}.custom-theme .el-input-number--mini .el-input-number__decrease,.custom-theme .el-input-number--mini .el-input-number__increase{width:28px;font-size:12px}.custom-theme .el-input-number--mini .el-input-number__decrease [class*=el-icon],.custom-theme .el-input-number--mini .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-input-number--mini .el-input__inner{padding-left:35px;padding-right:35px}.custom-theme .el-input-number.is-without-controls .el-input__inner{padding-left:15px;padding-right:15px}.custom-theme .el-input-number.is-controls-right .el-input__inner{padding-left:15px;padding-right:50px}.custom-theme .el-input-number.is-controls-right .el-input-number__decrease,.custom-theme .el-input-number.is-controls-right .el-input-number__increase{height:auto;line-height:19px}.custom-theme .el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon],.custom-theme .el-input-number.is-controls-right .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-input-number.is-controls-right .el-input-number__increase{border-radius:0 4px 0 0;border-bottom:1px solid #d8dce5}.custom-theme .el-input-number.is-controls-right .el-input-number__decrease{right:1px;bottom:1px;top:auto;left:auto;border-right:none;border-left:1px solid #d8dce5;border-radius:0 0 4px 0}.custom-theme .el-input-number.is-controls-right[class*=medium] [class*=decrease],.custom-theme .el-input-number.is-controls-right[class*=medium] [class*=increase]{line-height:17px}.custom-theme .el-input-number.is-controls-right[class*=small] [class*=decrease],.custom-theme .el-input-number.is-controls-right[class*=small] [class*=increase]{line-height:15px}.custom-theme .el-input-number.is-controls-right[class*=mini] [class*=decrease],.custom-theme .el-input-number.is-controls-right[class*=mini] [class*=increase]{line-height:13px}.custom-theme .el-radio{color:#5a5e66;font-weight:500;line-height:1;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;outline:0;font-size:14px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.custom-theme .el-radio.is-bordered{padding:10px 20px 10px 10px;border-radius:4px;border:1px solid #d8dce5}.custom-theme .el-radio.is-bordered.is-checked{border-color:#262729}.custom-theme .el-radio.is-bordered.is-disabled{cursor:not-allowed;border-color:#e6ebf5}.custom-theme .el-radio.is-bordered+.el-radio.is-bordered{margin-left:10px}.custom-theme .el-radio--medium.is-bordered{padding:8px 20px 8px 10px;border-radius:4px}.custom-theme .el-radio--medium.is-bordered .el-radio__label{font-size:14px}.custom-theme .el-radio--medium.is-bordered .el-radio__inner{height:14px;width:14px}.custom-theme .el-radio--small.is-bordered{padding:6px 15px 6px 10px;border-radius:3px}.custom-theme .el-radio--small.is-bordered .el-radio__label{font-size:12px}.custom-theme .el-radio--small.is-bordered .el-radio__inner{height:12px;width:12px}.custom-theme .el-radio--mini.is-bordered{padding:4px 15px 4px 10px;border-radius:3px}.custom-theme .el-radio--mini.is-bordered .el-radio__label{font-size:12px}.custom-theme .el-radio--mini.is-bordered .el-radio__inner{height:12px;width:12px}.custom-theme .el-radio+.el-radio{margin-left:30px}.custom-theme .el-radio__input{white-space:nowrap;cursor:pointer;outline:0;display:inline-block;line-height:1;position:relative;vertical-align:middle}.custom-theme .el-radio__input.is-disabled .el-radio__inner{background-color:#f5f7fa;border-color:#dfe4ed;cursor:not-allowed}.custom-theme .el-radio__input.is-disabled .el-radio__inner::after{cursor:not-allowed;background-color:#f5f7fa}.custom-theme .el-radio__input.is-disabled .el-radio__inner+.el-radio__label{cursor:not-allowed}.custom-theme .el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#f5f7fa;border-color:#dfe4ed}.custom-theme .el-radio__input.is-disabled.is-checked .el-radio__inner::after{background-color:#b4bccc}.custom-theme .el-radio__input.is-disabled+span.el-radio__label{color:#b4bccc;cursor:not-allowed}.custom-theme .el-radio__input.is-checked .el-radio__inner{border-color:#262729;background:#262729}.custom-theme .el-radio__input.is-checked .el-radio__inner::after{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.custom-theme .el-radio__input.is-checked+.el-radio__label{color:#262729}.custom-theme .el-radio__input.is-focus .el-radio__inner{border-color:#262729}.custom-theme .el-radio__inner{border:1px solid #d8dce5;border-radius:100%;width:14px;height:14px;background-color:#fff;position:relative;cursor:pointer;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-radio__inner:hover{border-color:#262729}.custom-theme .el-radio__inner::after{width:4px;height:4px;border-radius:100%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);-webkit-transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6);transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6);transition:transform .15s cubic-bezier(.71,-.46,.88,.6);transition:transform .15s cubic-bezier(.71,-.46,.88,.6),-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6)}.custom-theme .el-radio__original{opacity:0;outline:0;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.custom-theme .el-radio:focus:not(.is-focus):not(:active) .el-radio__inner{-webkit-box-shadow:0 0 2px 2px #262729;box-shadow:0 0 2px 2px #262729}.custom-theme .el-radio__label{font-size:14px;padding-left:10px}.custom-theme .el-radio-group{display:inline-block;line-height:1;vertical-align:middle;font-size:0}.custom-theme .el-radio-button{position:relative;display:inline-block;outline:0}.custom-theme .el-radio-button__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #d8dce5;font-weight:500;border-left:0;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;position:relative;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);padding:12px 20px;font-size:14px;border-radius:0}.custom-theme .el-radio-button__inner.is-round{padding:12px 20px}.custom-theme .el-radio-button__inner:hover{color:#262729}.custom-theme .el-radio-button__inner [class*=el-icon-]{line-height:.9}.custom-theme .el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-radio-button__orig-radio{opacity:0;outline:0;position:absolute;z-index:-1;left:-999px}.custom-theme .el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#262729;border-color:#262729;-webkit-box-shadow:-1px 0 0 0 #262729;box-shadow:-1px 0 0 0 #262729}.custom-theme .el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5;-webkit-box-shadow:none;box-shadow:none}.custom-theme .el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner{background-color:#edf2fc}.custom-theme .el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #d8dce5;border-radius:4px 0 0 4px;-webkit-box-shadow:none!important;box-shadow:none!important}.custom-theme .el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.custom-theme .el-radio-button:first-child:last-child .el-radio-button__inner{border-radius:4px}.custom-theme .el-radio-button--medium .el-radio-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.custom-theme .el-radio-button--medium .el-radio-button__inner.is-round{padding:10px 20px}.custom-theme .el-radio-button--small .el-radio-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.custom-theme .el-radio-button--small .el-radio-button__inner.is-round{padding:9px 15px}.custom-theme .el-radio-button--mini .el-radio-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.custom-theme .el-radio-button--mini .el-radio-button__inner.is-round{padding:7px 15px}.custom-theme .el-radio-button:focus:not(.is-focus):not(:active){-webkit-box-shadow:0 0 2px 2px #262729;box-shadow:0 0 2px 2px #262729}.custom-theme .el-checkbox{color:#5a5e66;font-weight:500;font-size:14px;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #d8dce5}.custom-theme .el-checkbox.is-bordered.is-checked{border-color:#262729}.custom-theme .el-checkbox.is-bordered.is-disabled{border-color:#e6ebf5;cursor:not-allowed}.custom-theme .el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label{line-height:17px;font-size:14px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner{height:14px;width:14px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small{padding:3px 15px 7px 10px;border-radius:3px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label{line-height:15px;font-size:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner{height:12px;width:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after{height:6px;width:2px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini{padding:1px 15px 5px 10px;border-radius:3px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label{line-height:12px;font-size:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner{height:12px;width:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after{height:6px;width:2px}.custom-theme .el-checkbox__input{white-space:nowrap;cursor:pointer;outline:0;display:inline-block;line-height:1;position:relative;vertical-align:middle}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5;cursor:not-allowed}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner::after{cursor:not-allowed;border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.custom-theme .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5}.custom-theme .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5}.custom-theme .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before{background-color:#b4bccc;border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled+span.el-checkbox__label{color:#b4bccc;cursor:not-allowed}.custom-theme .el-checkbox__input.is-checked .el-checkbox__inner{background-color:#262729;border-color:#262729}.custom-theme .el-checkbox__input.is-checked .el-checkbox__inner::after{-webkit-transform:rotate(45deg) scaleY(1);transform:rotate(45deg) scaleY(1)}.custom-theme .el-checkbox__input.is-checked+.el-checkbox__label{color:#262729}.custom-theme .el-checkbox__input.is-focus .el-checkbox__inner{border-color:#262729}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#262729;border-color:#262729}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{content:'';position:absolute;display:block;background-color:#fff;height:2px;-webkit-transform:scale(.5);transform:scale(.5);left:0;right:0;top:5px}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner::after{display:none}.custom-theme .el-checkbox__inner{display:inline-block;position:relative;border:1px solid #d8dce5;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;-webkit-transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.custom-theme .el-checkbox__inner:hover{border-color:#262729}.custom-theme .el-checkbox__inner::after{-webkit-box-sizing:content-box;box-sizing:content-box;content:"";border:1px solid #fff;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;-webkit-transform:rotate(45deg) scaleY(0);transform:rotate(45deg) scaleY(0);width:3px;-webkit-transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms,-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;-webkit-transform-origin:center;transform-origin:center}.custom-theme .el-checkbox__original{opacity:0;outline:0;position:absolute;margin:0;width:0;height:0;left:-999px}.custom-theme .el-checkbox__label{display:inline-block;padding-left:10px;line-height:19px;font-size:14px}.custom-theme .el-checkbox+.el-checkbox{margin-left:30px}.custom-theme .el-checkbox-button{position:relative;display:inline-block}.custom-theme .el-checkbox-button__inner{display:inline-block;line-height:1;font-weight:500;white-space:nowrap;vertical-align:middle;cursor:pointer;background:#fff;border:1px solid #d8dce5;border-left:0;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;position:relative;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:0}.custom-theme .el-checkbox-button__inner.is-round{padding:12px 20px}.custom-theme .el-checkbox-button__inner:hover{color:#262729}.custom-theme .el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.custom-theme .el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-checkbox-button__original{opacity:0;outline:0;position:absolute;margin:0;left:-999px}.custom-theme .el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#262729;border-color:#262729;-webkit-box-shadow:-1px 0 0 0 #7d7d7f;box-shadow:-1px 0 0 0 #7d7d7f}.custom-theme .el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5;-webkit-box-shadow:none;box-shadow:none}.custom-theme .el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #d8dce5;border-radius:4px 0 0 4px;-webkit-box-shadow:none!important;box-shadow:none!important}.custom-theme .el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#262729}.custom-theme .el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.custom-theme .el-checkbox-button--medium .el-checkbox-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.custom-theme .el-checkbox-button--medium .el-checkbox-button__inner.is-round{padding:10px 20px}.custom-theme .el-checkbox-button--small .el-checkbox-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.custom-theme .el-checkbox-button--small .el-checkbox-button__inner.is-round{padding:9px 15px}.custom-theme .el-checkbox-button--mini .el-checkbox-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.custom-theme .el-checkbox-button--mini .el-checkbox-button__inner.is-round{padding:7px 15px}.custom-theme .el-checkbox-group{font-size:0}.custom-theme .el-switch{display:inline-block;position:relative;font-size:14px;line-height:20px;height:20px;vertical-align:middle}.custom-theme .el-switch.is-disabled .el-switch__core,.custom-theme .el-switch.is-disabled .el-switch__label{cursor:not-allowed}.custom-theme .el-switch__label{-webkit-transition:.2s;transition:.2s;height:20px;display:inline-block;font-size:14px;font-weight:500;cursor:pointer;vertical-align:middle;color:#2d2f33}.custom-theme .el-switch__label.is-active{color:#262729}.custom-theme .el-switch__label--left{margin-right:10px}.custom-theme .el-switch__label--right{margin-left:10px}.custom-theme .el-switch__label *{line-height:1;font-size:14px;display:inline-block}.custom-theme .el-switch__input{position:absolute;width:0;height:0;opacity:0;margin:0}.custom-theme .el-switch__input:focus~.el-switch__core{outline:1px solid #262729}.custom-theme .el-switch__core{margin:0;display:inline-block;position:relative;width:40px;height:20px;border:1px solid #d8dce5;outline:0;border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#d8dce5;cursor:pointer;-webkit-transition:border-color .3s,background-color .3s;transition:border-color .3s,background-color .3s;vertical-align:middle}.custom-theme .el-switch__core .el-switch__button{position:absolute;top:1px;left:1px;border-radius:100%;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:16px;height:16px;background-color:#fff}.custom-theme .el-switch.is-checked .el-switch__core{border-color:#262729;background-color:#262729}.custom-theme .el-switch.is-disabled{opacity:.6}.custom-theme .el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.custom-theme .el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.custom-theme .el-switch .label-fade-enter,.custom-theme .el-switch .label-fade-leave-active{opacity:0}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .el-select-dropdown{position:absolute;z-index:1001;border:solid 1px #dfe4ed;border-radius:4px;background-color:#fff;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0}.custom-theme .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#262729;background-color:#fff}.custom-theme .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#f5f7fa}.custom-theme .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{position:absolute;right:20px;font-family:element-icons;content:"\E611";font-size:12px;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.custom-theme .el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.custom-theme .el-select-dropdown .popper__arrow{-webkit-transform:translateX(-400%);transform:translateX(-400%)}.custom-theme .el-select-dropdown.is-arrow-fixed .popper__arrow{-webkit-transform:translateX(-200%);transform:translateX(-200%)}.custom-theme .el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.custom-theme .el-select-dropdown__wrap{max-height:274px}.custom-theme .el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-tag{background-color:rgba(38,39,41,.1);display:inline-block;padding:0 10px;height:32px;line-height:30px;font-size:12px;color:#262729;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid rgba(38,39,41,.2);white-space:nowrap}.custom-theme .el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-5px;color:#262729}.custom-theme .el-tag .el-icon-close::before{display:block}.custom-theme .el-tag .el-icon-close:hover{background-color:#262729;color:#fff}.custom-theme .el-tag--info{background-color:rgba(10,118,164,.1);border-color:rgba(10,118,164,.2);color:#0a76a4}.custom-theme .el-tag--info.is-hit{border-color:#0a76a4}.custom-theme .el-tag--info .el-tag__close{color:#0a76a4}.custom-theme .el-tag--info .el-tag__close:hover{background-color:#0a76a4;color:#fff}.custom-theme .el-tag--success{background-color:rgba(64,145,103,.1);border-color:rgba(64,145,103,.2);color:#409167}.custom-theme .el-tag--success.is-hit{border-color:#409167}.custom-theme .el-tag--success .el-tag__close{color:#409167}.custom-theme .el-tag--success .el-tag__close:hover{background-color:#409167;color:#fff}.custom-theme .el-tag--warning{background-color:rgba(157,164,8,.1);border-color:rgba(157,164,8,.2);color:#9da408}.custom-theme .el-tag--warning.is-hit{border-color:#9da408}.custom-theme .el-tag--warning .el-tag__close{color:#9da408}.custom-theme .el-tag--warning .el-tag__close:hover{background-color:#9da408;color:#fff}.custom-theme .el-tag--danger{background-color:rgba(179,69,14,.1);border-color:rgba(179,69,14,.2);color:#b3450e}.custom-theme .el-tag--danger.is-hit{border-color:#b3450e}.custom-theme .el-tag--danger .el-tag__close{color:#b3450e}.custom-theme .el-tag--danger .el-tag__close:hover{background-color:#b3450e;color:#fff}.custom-theme .el-tag--medium{height:28px;line-height:26px}.custom-theme .el-tag--medium .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--small{height:24px;padding:0 8px;line-height:22px}.custom-theme .el-tag--small .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--mini{height:20px;padding:0 5px;line-height:19px}.custom-theme .el-tag--mini .el-icon-close{margin-left:-3px;-webkit-transform:scale(.7);transform:scale(.7)}.custom-theme .el-select-dropdown__item{font-size:14px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#5a5e66;height:34px;line-height:34px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.custom-theme .el-select-dropdown__item.is-disabled{color:#b4bccc;cursor:not-allowed}.custom-theme .el-select-dropdown__item.is-disabled:hover{background-color:#fff}.custom-theme .el-select-dropdown__item.hover,.custom-theme .el-select-dropdown__item:hover{background-color:#f5f7fa}.custom-theme .el-select-dropdown__item.selected{color:#262729;font-weight:700}.custom-theme .el-select-dropdown__item span{line-height:34px!important}.custom-theme .el-select-group{margin:0;padding:0}.custom-theme .el-select-group__wrap{position:relative;list-style:none;margin:0;padding:0}.custom-theme .el-select-group__wrap:not(:last-of-type){padding-bottom:24px}.custom-theme .el-select-group__wrap:not(:last-of-type)::after{content:'';position:absolute;display:block;left:20px;right:20px;bottom:12px;height:1px;background:#dfe4ed}.custom-theme .el-select-group__title{padding-left:20px;font-size:12px;color:#0a76a4;line-height:30px}.custom-theme .el-select-group .el-select-dropdown__item{padding-left:20px}.custom-theme .el-scrollbar{overflow:hidden;position:relative}.custom-theme .el-scrollbar:active>.el-scrollbar__bar,.custom-theme .el-scrollbar:focus>.el-scrollbar__bar,.custom-theme .el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.custom-theme .el-scrollbar__wrap{overflow:scroll;height:100%}.custom-theme .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.custom-theme .el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(135,141,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.custom-theme .el-scrollbar__thumb:hover{background-color:rgba(135,141,153,.5)}.custom-theme .el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.custom-theme .el-scrollbar__bar.is-vertical{width:6px;top:2px}.custom-theme .el-scrollbar__bar.is-vertical>div{width:100%}.custom-theme .el-scrollbar__bar.is-horizontal{height:6px;left:2px}.custom-theme .el-scrollbar__bar.is-horizontal>div{height:100%}.custom-theme .el-select{display:inline-block;position:relative}.custom-theme .el-select:hover .el-input__inner{border-color:#b4bccc}.custom-theme .el-select .el-input__inner{cursor:pointer;padding-right:35px}.custom-theme .el-select .el-input__inner:focus{border-color:#262729}.custom-theme .el-select .el-input .el-select__caret{color:#b4bccc;font-size:14px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);line-height:16px;cursor:pointer}.custom-theme .el-select .el-input .el-select__caret.is-reverse{-webkit-transform:rotateZ(0);transform:rotateZ(0)}.custom-theme .el-select .el-input .el-select__caret.is-show-close{font-size:14px;text-align:center;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);border-radius:100%;color:#b4bccc;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-select .el-input .el-select__caret.is-show-close:hover{color:#878d99}.custom-theme .el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.custom-theme .el-select .el-input.is-disabled .el-input__inner:hover{border-color:#dfe4ed}.custom-theme .el-select>.el-input{display:block}.custom-theme .el-select__input{border:none;outline:0;padding:0;margin-left:15px;color:#666;font-size:14px;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:28px;background-color:transparent}.custom-theme .el-select__input.is-mini{height:14px}.custom-theme .el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#b4bccc;line-height:18px;font-size:14px}.custom-theme .el-select__close:hover{color:#878d99}.custom-theme .el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.custom-theme .el-select .el-tag__close{margin-top:-2px}.custom-theme .el-select .el-tag{-webkit-box-sizing:border-box;box-sizing:border-box;border-color:transparent;margin:3px 0 3px 6px;background-color:#f0f2f5}.custom-theme .el-select .el-tag__close.el-icon-close{background-color:#b4bccc;right:-7px;color:#fff}.custom-theme .el-select .el-tag__close.el-icon-close:hover{background-color:#878d99}.custom-theme .el-select .el-tag__close.el-icon-close::before{display:block;-webkit-transform:translate(0,.5px);transform:translate(0,.5px)}.custom-theme .el-select__tag{display:inline-block;height:24px;line-height:24px;font-size:14px;border-radius:4px;color:#fff;background-color:#262729}.custom-theme .el-select__tag .el-icon-close{font-size:14px}.custom-theme .el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #d8dce5;border-color:#d8dce5;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.custom-theme .el-button+.el-button{margin-left:10px}.custom-theme .el-button.is-round{padding:12px 20px}.custom-theme .el-button:focus,.custom-theme .el-button:hover{color:#262729;border-color:#bebebf;background-color:#e9e9ea}.custom-theme .el-button:active{color:#222325;border-color:#222325;outline:0}.custom-theme .el-button::-moz-focus-inner{border:0}.custom-theme .el-button [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-button.is-plain:focus,.custom-theme .el-button.is-plain:hover{background:#fff;border-color:#262729;color:#262729}.custom-theme .el-button.is-plain:active{background:#fff;border-color:#222325;color:#222325;outline:0}.custom-theme .el-button.is-active{color:#222325;border-color:#222325}.custom-theme .el-button.is-disabled,.custom-theme .el-button.is-disabled:focus,.custom-theme .el-button.is-disabled:hover{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5}.custom-theme .el-button.is-disabled.el-button--text{background-color:transparent}.custom-theme .el-button.is-disabled.is-plain,.custom-theme .el-button.is-disabled.is-plain:focus,.custom-theme .el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#e6ebf5;color:#b4bccc}.custom-theme .el-button.is-loading{position:relative;pointer-events:none}.custom-theme .el-button.is-loading:before{pointer-events:none;content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:rgba(255,255,255,.35)}.custom-theme .el-button.is-round{border-radius:20px;padding:12px 23px}.custom-theme .el-button--primary{color:#fff;background-color:#262729;border-color:#262729}.custom-theme .el-button--primary:focus,.custom-theme .el-button--primary:hover{background:#515254;border-color:#515254;color:#fff}.custom-theme .el-button--primary:active{background:#222325;border-color:#222325;color:#fff;outline:0}.custom-theme .el-button--primary.is-active{background:#222325;border-color:#222325;color:#fff}.custom-theme .el-button--primary.is-disabled,.custom-theme .el-button--primary.is-disabled:active,.custom-theme .el-button--primary.is-disabled:focus,.custom-theme .el-button--primary.is-disabled:hover{color:#fff;background-color:#939394;border-color:#939394}.custom-theme .el-button--primary.is-plain{color:#262729;background:#e9e9ea;border-color:#a8a9a9}.custom-theme .el-button--primary.is-plain:focus,.custom-theme .el-button--primary.is-plain:hover{background:#262729;border-color:#262729;color:#fff}.custom-theme .el-button--primary.is-plain:active{background:#222325;border-color:#222325;color:#fff;outline:0}.custom-theme .el-button--primary.is-plain.is-disabled,.custom-theme .el-button--primary.is-plain.is-disabled:active,.custom-theme .el-button--primary.is-plain.is-disabled:focus,.custom-theme .el-button--primary.is-plain.is-disabled:hover{color:#7d7d7f;background-color:#e9e9ea;border-color:#d4d4d4}.custom-theme .el-button--success{color:#fff;background-color:#409167;border-color:#409167}.custom-theme .el-button--success:focus,.custom-theme .el-button--success:hover{background:#66a785;border-color:#66a785;color:#fff}.custom-theme .el-button--success:active{background:#3a835d;border-color:#3a835d;color:#fff;outline:0}.custom-theme .el-button--success.is-active{background:#3a835d;border-color:#3a835d;color:#fff}.custom-theme .el-button--success.is-disabled,.custom-theme .el-button--success.is-disabled:active,.custom-theme .el-button--success.is-disabled:focus,.custom-theme .el-button--success.is-disabled:hover{color:#fff;background-color:#a0c8b3;border-color:#a0c8b3}.custom-theme .el-button--success.is-plain{color:#409167;background:#ecf4f0;border-color:#b3d3c2}.custom-theme .el-button--success.is-plain:focus,.custom-theme .el-button--success.is-plain:hover{background:#409167;border-color:#409167;color:#fff}.custom-theme .el-button--success.is-plain:active{background:#3a835d;border-color:#3a835d;color:#fff;outline:0}.custom-theme .el-button--success.is-plain.is-disabled,.custom-theme .el-button--success.is-plain.is-disabled:active,.custom-theme .el-button--success.is-plain.is-disabled:focus,.custom-theme .el-button--success.is-plain.is-disabled:hover{color:#8cbda4;background-color:#ecf4f0;border-color:#d9e9e1}.custom-theme .el-button--warning{color:#fff;background-color:#9da408;border-color:#9da408}.custom-theme .el-button--warning:focus,.custom-theme .el-button--warning:hover{background:#b1b639;border-color:#b1b639;color:#fff}.custom-theme .el-button--warning:active{background:#8d9407;border-color:#8d9407;color:#fff;outline:0}.custom-theme .el-button--warning.is-active{background:#8d9407;border-color:#8d9407;color:#fff}.custom-theme .el-button--warning.is-disabled,.custom-theme .el-button--warning.is-disabled:active,.custom-theme .el-button--warning.is-disabled:focus,.custom-theme .el-button--warning.is-disabled:hover{color:#fff;background-color:#ced284;border-color:#ced284}.custom-theme .el-button--warning.is-plain{color:#9da408;background:#f5f6e6;border-color:#d8db9c}.custom-theme .el-button--warning.is-plain:focus,.custom-theme .el-button--warning.is-plain:hover{background:#9da408;border-color:#9da408;color:#fff}.custom-theme .el-button--warning.is-plain:active{background:#8d9407;border-color:#8d9407;color:#fff;outline:0}.custom-theme .el-button--warning.is-plain.is-disabled,.custom-theme .el-button--warning.is-plain.is-disabled:active,.custom-theme .el-button--warning.is-plain.is-disabled:focus,.custom-theme .el-button--warning.is-plain.is-disabled:hover{color:#c4c86b;background-color:#f5f6e6;border-color:#ebedce}.custom-theme .el-button--danger{color:#fff;background-color:#b3450e;border-color:#b3450e}.custom-theme .el-button--danger:focus,.custom-theme .el-button--danger:hover{background:#c26a3e;border-color:#c26a3e;color:#fff}.custom-theme .el-button--danger:active{background:#a13e0d;border-color:#a13e0d;color:#fff;outline:0}.custom-theme .el-button--danger.is-active{background:#a13e0d;border-color:#a13e0d;color:#fff}.custom-theme .el-button--danger.is-disabled,.custom-theme .el-button--danger.is-disabled:active,.custom-theme .el-button--danger.is-disabled:focus,.custom-theme .el-button--danger.is-disabled:hover{color:#fff;background-color:#d9a287;border-color:#d9a287}.custom-theme .el-button--danger.is-plain{color:#b3450e;background:#f7ece7;border-color:#e1b59f}.custom-theme .el-button--danger.is-plain:focus,.custom-theme .el-button--danger.is-plain:hover{background:#b3450e;border-color:#b3450e;color:#fff}.custom-theme .el-button--danger.is-plain:active{background:#a13e0d;border-color:#a13e0d;color:#fff;outline:0}.custom-theme .el-button--danger.is-plain.is-disabled,.custom-theme .el-button--danger.is-plain.is-disabled:active,.custom-theme .el-button--danger.is-plain.is-disabled:focus,.custom-theme .el-button--danger.is-plain.is-disabled:hover{color:#d18f6e;background-color:#f7ece7;border-color:#f0dacf}.custom-theme .el-button--info{color:#fff;background-color:#0a76a4;border-color:#0a76a4}.custom-theme .el-button--info:focus,.custom-theme .el-button--info:hover{background:#3b91b6;border-color:#3b91b6;color:#fff}.custom-theme .el-button--info:active{background:#096a94;border-color:#096a94;color:#fff;outline:0}.custom-theme .el-button--info.is-active{background:#096a94;border-color:#096a94;color:#fff}.custom-theme .el-button--info.is-disabled,.custom-theme .el-button--info.is-disabled:active,.custom-theme .el-button--info.is-disabled:focus,.custom-theme .el-button--info.is-disabled:hover{color:#fff;background-color:#85bbd2;border-color:#85bbd2}.custom-theme .el-button--info.is-plain{color:#0a76a4;background:#e7f1f6;border-color:#9dc8db}.custom-theme .el-button--info.is-plain:focus,.custom-theme .el-button--info.is-plain:hover{background:#0a76a4;border-color:#0a76a4;color:#fff}.custom-theme .el-button--info.is-plain:active{background:#096a94;border-color:#096a94;color:#fff;outline:0}.custom-theme .el-button--info.is-plain.is-disabled,.custom-theme .el-button--info.is-plain.is-disabled:active,.custom-theme .el-button--info.is-plain.is-disabled:focus,.custom-theme .el-button--info.is-plain.is-disabled:hover{color:#6cadc8;background-color:#e7f1f6;border-color:#cee4ed}.custom-theme .el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.custom-theme .el-button--medium.is-round{padding:10px 20px}.custom-theme .el-button--small{padding:9px 15px;font-size:12px;border-radius:3px}.custom-theme .el-button--small.is-round{padding:9px 15px}.custom-theme .el-button--mini{padding:7px 15px;font-size:12px;border-radius:3px}.custom-theme .el-button--mini.is-round{padding:7px 15px}.custom-theme .el-button--text{border:none;color:#262729;background:0 0;padding-left:0;padding-right:0}.custom-theme .el-button--text:focus,.custom-theme .el-button--text:hover{color:#515254;border-color:transparent;background-color:transparent}.custom-theme .el-button--text:active{color:#222325;border-color:transparent;background-color:transparent}.custom-theme .el-button-group{display:inline-block;vertical-align:middle}.custom-theme .el-button-group::after,.custom-theme .el-button-group::before{display:table;content:""}.custom-theme .el-button-group::after{clear:both}.custom-theme .el-button-group .el-button{float:left;position:relative}.custom-theme .el-button-group .el-button+.el-button{margin-left:0}.custom-theme .el-button-group .el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-button-group .el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-button-group .el-button:not(:first-child):not(:last-child){border-radius:0}.custom-theme .el-button-group .el-button:not(:last-child){margin-right:-1px}.custom-theme .el-button-group .el-button:active,.custom-theme .el-button-group .el-button:focus,.custom-theme .el-button-group .el-button:hover{z-index:1}.custom-theme .el-button-group .el-button.is-active{z-index:1}.custom-theme .el-button-group .el-button--primary:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--primary:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-checkbox{color:#5a5e66;font-weight:500;font-size:14px;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #d8dce5}.custom-theme .el-checkbox.is-bordered.is-checked{border-color:#262729}.custom-theme .el-checkbox.is-bordered.is-disabled{border-color:#e6ebf5;cursor:not-allowed}.custom-theme .el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label{line-height:17px;font-size:14px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner{height:14px;width:14px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small{padding:3px 15px 7px 10px;border-radius:3px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label{line-height:15px;font-size:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner{height:12px;width:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after{height:6px;width:2px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini{padding:1px 15px 5px 10px;border-radius:3px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label{line-height:12px;font-size:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner{height:12px;width:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after{height:6px;width:2px}.custom-theme .el-checkbox__input{white-space:nowrap;cursor:pointer;outline:0;display:inline-block;line-height:1;position:relative;vertical-align:middle}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5;cursor:not-allowed}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner::after{cursor:not-allowed;border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.custom-theme .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5}.custom-theme .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5}.custom-theme .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before{background-color:#b4bccc;border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled+span.el-checkbox__label{color:#b4bccc;cursor:not-allowed}.custom-theme .el-checkbox__input.is-checked .el-checkbox__inner{background-color:#262729;border-color:#262729}.custom-theme .el-checkbox__input.is-checked .el-checkbox__inner::after{-webkit-transform:rotate(45deg) scaleY(1);transform:rotate(45deg) scaleY(1)}.custom-theme .el-checkbox__input.is-checked+.el-checkbox__label{color:#262729}.custom-theme .el-checkbox__input.is-focus .el-checkbox__inner{border-color:#262729}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#262729;border-color:#262729}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{content:'';position:absolute;display:block;background-color:#fff;height:2px;-webkit-transform:scale(.5);transform:scale(.5);left:0;right:0;top:5px}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner::after{display:none}.custom-theme .el-checkbox__inner{display:inline-block;position:relative;border:1px solid #d8dce5;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;-webkit-transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.custom-theme .el-checkbox__inner:hover{border-color:#262729}.custom-theme .el-checkbox__inner::after{-webkit-box-sizing:content-box;box-sizing:content-box;content:"";border:1px solid #fff;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;-webkit-transform:rotate(45deg) scaleY(0);transform:rotate(45deg) scaleY(0);width:3px;-webkit-transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms,-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;-webkit-transform-origin:center;transform-origin:center}.custom-theme .el-checkbox__original{opacity:0;outline:0;position:absolute;margin:0;width:0;height:0;left:-999px}.custom-theme .el-checkbox__label{display:inline-block;padding-left:10px;line-height:19px;font-size:14px}.custom-theme .el-checkbox+.el-checkbox{margin-left:30px}.custom-theme .el-checkbox-button{position:relative;display:inline-block}.custom-theme .el-checkbox-button__inner{display:inline-block;line-height:1;font-weight:500;white-space:nowrap;vertical-align:middle;cursor:pointer;background:#fff;border:1px solid #d8dce5;border-left:0;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;position:relative;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:0}.custom-theme .el-checkbox-button__inner.is-round{padding:12px 20px}.custom-theme .el-checkbox-button__inner:hover{color:#262729}.custom-theme .el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.custom-theme .el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-checkbox-button__original{opacity:0;outline:0;position:absolute;margin:0;left:-999px}.custom-theme .el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#262729;border-color:#262729;-webkit-box-shadow:-1px 0 0 0 #7d7d7f;box-shadow:-1px 0 0 0 #7d7d7f}.custom-theme .el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5;-webkit-box-shadow:none;box-shadow:none}.custom-theme .el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #d8dce5;border-radius:4px 0 0 4px;-webkit-box-shadow:none!important;box-shadow:none!important}.custom-theme .el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#262729}.custom-theme .el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.custom-theme .el-checkbox-button--medium .el-checkbox-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.custom-theme .el-checkbox-button--medium .el-checkbox-button__inner.is-round{padding:10px 20px}.custom-theme .el-checkbox-button--small .el-checkbox-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.custom-theme .el-checkbox-button--small .el-checkbox-button__inner.is-round{padding:9px 15px}.custom-theme .el-checkbox-button--mini .el-checkbox-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.custom-theme .el-checkbox-button--mini .el-checkbox-button__inner.is-round{padding:7px 15px}.custom-theme .el-checkbox-group{font-size:0}.custom-theme .el-tag{background-color:rgba(38,39,41,.1);display:inline-block;padding:0 10px;height:32px;line-height:30px;font-size:12px;color:#262729;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid rgba(38,39,41,.2);white-space:nowrap}.custom-theme .el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-5px;color:#262729}.custom-theme .el-tag .el-icon-close::before{display:block}.custom-theme .el-tag .el-icon-close:hover{background-color:#262729;color:#fff}.custom-theme .el-tag--info{background-color:rgba(10,118,164,.1);border-color:rgba(10,118,164,.2);color:#0a76a4}.custom-theme .el-tag--info.is-hit{border-color:#0a76a4}.custom-theme .el-tag--info .el-tag__close{color:#0a76a4}.custom-theme .el-tag--info .el-tag__close:hover{background-color:#0a76a4;color:#fff}.custom-theme .el-tag--success{background-color:rgba(64,145,103,.1);border-color:rgba(64,145,103,.2);color:#409167}.custom-theme .el-tag--success.is-hit{border-color:#409167}.custom-theme .el-tag--success .el-tag__close{color:#409167}.custom-theme .el-tag--success .el-tag__close:hover{background-color:#409167;color:#fff}.custom-theme .el-tag--warning{background-color:rgba(157,164,8,.1);border-color:rgba(157,164,8,.2);color:#9da408}.custom-theme .el-tag--warning.is-hit{border-color:#9da408}.custom-theme .el-tag--warning .el-tag__close{color:#9da408}.custom-theme .el-tag--warning .el-tag__close:hover{background-color:#9da408;color:#fff}.custom-theme .el-tag--danger{background-color:rgba(179,69,14,.1);border-color:rgba(179,69,14,.2);color:#b3450e}.custom-theme .el-tag--danger.is-hit{border-color:#b3450e}.custom-theme .el-tag--danger .el-tag__close{color:#b3450e}.custom-theme .el-tag--danger .el-tag__close:hover{background-color:#b3450e;color:#fff}.custom-theme .el-tag--medium{height:28px;line-height:26px}.custom-theme .el-tag--medium .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--small{height:24px;padding:0 8px;line-height:22px}.custom-theme .el-tag--small .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--mini{height:20px;padding:0 5px;line-height:19px}.custom-theme .el-tag--mini .el-icon-close{margin-left:-3px;-webkit-transform:scale(.7);transform:scale(.7)}.custom-theme .el-table{position:relative;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;background-color:#fff;font-size:14px;color:#5a5e66}.custom-theme .el-table__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.custom-theme .el-table__empty-text{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:color(#262729 s(16%) l(44%))}.custom-theme .el-table__expand-column .cell{padding:0;text-align:center}.custom-theme .el-table__expand-icon{position:relative;cursor:pointer;color:#666;font-size:12px;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;height:20px}.custom-theme .el-table__expand-icon--expanded{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.custom-theme .el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.custom-theme .el-table__expanded-cell{background-color:#fff}.custom-theme .el-table__expanded-cell[class*=cell]{padding:20px 50px}.custom-theme .el-table__expanded-cell:hover{background-color:#f5f7fa!important}.custom-theme .el-table--fit{border-right:0;border-bottom:0}.custom-theme .el-table--fit td.gutter,.custom-theme .el-table--fit th.gutter{border-right-width:1px}.custom-theme .el-table thead{color:#878d99;font-weight:500}.custom-theme .el-table thead.is-group th{background:#f5f7fa}.custom-theme .el-table td,.custom-theme .el-table th{padding:12px 0;min-width:0;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative}.custom-theme .el-table td.is-center,.custom-theme .el-table th.is-center{text-align:center}.custom-theme .el-table td.is-left,.custom-theme .el-table th.is-left{text-align:left}.custom-theme .el-table td.is-right,.custom-theme .el-table th.is-right{text-align:right}.custom-theme .el-table td.gutter,.custom-theme .el-table th.gutter{width:15px;border-right-width:0;border-bottom-width:0;padding:0}.custom-theme .el-table td.is-hidden>*,.custom-theme .el-table th.is-hidden>*{visibility:hidden}.custom-theme .el-table--medium td,.custom-theme .el-table--medium th{padding:10px 0}.custom-theme .el-table--small{font-size:12px}.custom-theme .el-table--small td,.custom-theme .el-table--small th{padding:8px 0}.custom-theme .el-table--mini{font-size:12px}.custom-theme .el-table--mini td,.custom-theme .el-table--mini th{padding:6px 0}.custom-theme .el-table tr{background-color:#fff}.custom-theme .el-table tr input[type=checkbox]{margin:0}.custom-theme .el-table td,.custom-theme .el-table th.is-leaf{border-bottom:1px solid #e6ebf5}.custom-theme .el-table th.is-sortable{cursor:pointer}.custom-theme .el-table th{white-space:nowrap;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:left}.custom-theme .el-table th div{display:inline-block;padding-left:10px;padding-right:10px;line-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.custom-theme .el-table th>.cell{position:relative;word-wrap:normal;text-overflow:ellipsis;display:inline-block;vertical-align:middle;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-table th>.cell.highlight{color:#262729}.custom-theme .el-table th.required>div::before{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#ff4d51;margin-right:5px;vertical-align:middle}.custom-theme .el-table td div{-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-table td.gutter{width:0}.custom-theme .el-table .cell{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:23px;padding-left:10px;padding-right:10px}.custom-theme .el-table .cell.el-tooltip{white-space:nowrap;min-width:50px}.custom-theme .el-table td:first-child .cell,.custom-theme .el-table th:first-child .cell{padding-left:0}.custom-theme .el-table--border,.custom-theme .el-table--group{border:1px solid #e6ebf5}.custom-theme .el-table--border::after,.custom-theme .el-table--group::after,.custom-theme .el-table::before{content:'';position:absolute;background-color:#e6ebf5;z-index:1}.custom-theme .el-table--border::after,.custom-theme .el-table--group::after{top:0;right:0;width:1px;height:100%}.custom-theme .el-table::before{left:0;bottom:0;width:100%;height:1px}.custom-theme .el-table--border{border-right:none;border-bottom:none}.custom-theme .el-table--border td,.custom-theme .el-table--border th{border-right:1px solid #e6ebf5}.custom-theme .el-table--border td:first-child .cell,.custom-theme .el-table--border th:first-child .cell{padding-left:10px}.custom-theme .el-table--border .has-gutter td:nth-last-of-type(2),.custom-theme .el-table--border .has-gutter th:nth-last-of-type(2){border-right:none}.custom-theme .el-table--border th.gutter:last-of-type{border-bottom:1px solid #e6ebf5;border-bottom-width:1px}.custom-theme .el-table--border th{border-bottom:1px solid #e6ebf5}.custom-theme .el-table--hidden{visibility:hidden}.custom-theme .el-table__fixed,.custom-theme .el-table__fixed-right{position:absolute;top:0;left:0;overflow-x:hidden;-webkit-box-shadow:0 0 10px rgba(0,0,0,.12);box-shadow:0 0 10px rgba(0,0,0,.12)}.custom-theme .el-table__fixed-right::before,.custom-theme .el-table__fixed::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#e6ebf5;z-index:4}.custom-theme .el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#fff;border-bottom:1px solid #e6ebf5}.custom-theme .el-table__fixed-right{top:0;left:auto;right:0}.custom-theme .el-table__fixed-right .el-table__fixed-body-wrapper,.custom-theme .el-table__fixed-right .el-table__fixed-footer-wrapper,.custom-theme .el-table__fixed-right .el-table__fixed-header-wrapper{left:auto;right:0}.custom-theme .el-table__fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.custom-theme .el-table__fixed-footer-wrapper{position:absolute;left:0;bottom:0;z-index:3}.custom-theme .el-table__fixed-footer-wrapper tbody td{border-top:1px solid #e6ebf5;background-color:#f5f7fa;color:#5a5e66}.custom-theme .el-table__fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.custom-theme .el-table__body-wrapper,.custom-theme .el-table__footer-wrapper,.custom-theme .el-table__header-wrapper{width:100%}.custom-theme .el-table__footer-wrapper{margin-top:-1px}.custom-theme .el-table__footer-wrapper td{border-top:1px solid #e6ebf5}.custom-theme .el-table__body,.custom-theme .el-table__footer,.custom-theme .el-table__header{table-layout:fixed}.custom-theme .el-table__footer-wrapper,.custom-theme .el-table__header-wrapper{overflow:hidden}.custom-theme .el-table__footer-wrapper tbody td,.custom-theme .el-table__header-wrapper tbody td{background-color:#f5f7fa;color:#5a5e66}.custom-theme .el-table__body-wrapper{overflow:auto;position:relative}.custom-theme .el-table__body-wrapper.is-scroll-none~.el-table__fixed,.custom-theme .el-table__body-wrapper.is-scroll-none~.el-table__fixed-right{-webkit-box-shadow:none;box-shadow:none}.custom-theme .el-table__body-wrapper.is-scroll-left~.el-table__fixed{-webkit-box-shadow:none;box-shadow:none}.custom-theme .el-table__body-wrapper.is-scroll-right~.el-table__fixed-right{-webkit-box-shadow:none;box-shadow:none}.custom-theme .el-table__body-wrapper .el-table--border.is-scroll-right~.el-table__fixed-right{border-left:1px solid #e6ebf5}.custom-theme .el-table__body-wrapper .el-table--border.is-scroll-left~.el-table__fixed{border-right:1px solid #e6ebf5}.custom-theme .el-table .caret-wrapper{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:13px;width:24px;cursor:pointer;overflow:initial}.custom-theme .el-table .sort-caret{color:#0a76a4;width:14px;overflow:hidden;font-size:13px}.custom-theme .el-table .ascending .sort-caret.ascending{color:#262729}.custom-theme .el-table .descending .sort-caret.descending{color:#262729}.custom-theme .el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.custom-theme .el-table--striped .el-table__body tr.el-table__row--striped td{background:#fafafa}.custom-theme .el-table--striped .el-table__body tr.el-table__row--striped.current-row td{background-color:#e9e9ea}.custom-theme .el-table__body tr.hover-row.current-row>td,.custom-theme .el-table__body tr.hover-row.el-table__row--striped.current-row>td,.custom-theme .el-table__body tr.hover-row.el-table__row--striped>td,.custom-theme .el-table__body tr.hover-row>td{background-color:#e9e9ea}.custom-theme .el-table__body tr.current-row>td{background-color:#e9e9ea}.custom-theme .el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #e6ebf5;z-index:10}.custom-theme .el-table__column-filter-trigger{display:inline-block;line-height:34px;cursor:pointer}.custom-theme .el-table__column-filter-trigger i{color:#0a76a4;font-size:12px;-webkit-transform:scale(.75);transform:scale(.75)}.custom-theme .el-table--enable-row-transition .el-table__body td{-webkit-transition:background-color .25s ease;transition:background-color .25s ease}.custom-theme .el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#f5f7fa}.custom-theme .el-table--fluid-height .el-table__fixed,.custom-theme .el-table--fluid-height .el-table__fixed-right{bottom:0;overflow:hidden}.custom-theme .el-checkbox{color:#5a5e66;font-weight:500;font-size:14px;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #d8dce5}.custom-theme .el-checkbox.is-bordered.is-checked{border-color:#262729}.custom-theme .el-checkbox.is-bordered.is-disabled{border-color:#e6ebf5;cursor:not-allowed}.custom-theme .el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label{line-height:17px;font-size:14px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner{height:14px;width:14px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small{padding:3px 15px 7px 10px;border-radius:3px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label{line-height:15px;font-size:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner{height:12px;width:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after{height:6px;width:2px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini{padding:1px 15px 5px 10px;border-radius:3px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label{line-height:12px;font-size:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner{height:12px;width:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after{height:6px;width:2px}.custom-theme .el-checkbox__input{white-space:nowrap;cursor:pointer;outline:0;display:inline-block;line-height:1;position:relative;vertical-align:middle}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5;cursor:not-allowed}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner::after{cursor:not-allowed;border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.custom-theme .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5}.custom-theme .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5}.custom-theme .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before{background-color:#b4bccc;border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled+span.el-checkbox__label{color:#b4bccc;cursor:not-allowed}.custom-theme .el-checkbox__input.is-checked .el-checkbox__inner{background-color:#262729;border-color:#262729}.custom-theme .el-checkbox__input.is-checked .el-checkbox__inner::after{-webkit-transform:rotate(45deg) scaleY(1);transform:rotate(45deg) scaleY(1)}.custom-theme .el-checkbox__input.is-checked+.el-checkbox__label{color:#262729}.custom-theme .el-checkbox__input.is-focus .el-checkbox__inner{border-color:#262729}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#262729;border-color:#262729}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{content:'';position:absolute;display:block;background-color:#fff;height:2px;-webkit-transform:scale(.5);transform:scale(.5);left:0;right:0;top:5px}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner::after{display:none}.custom-theme .el-checkbox__inner{display:inline-block;position:relative;border:1px solid #d8dce5;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;-webkit-transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.custom-theme .el-checkbox__inner:hover{border-color:#262729}.custom-theme .el-checkbox__inner::after{-webkit-box-sizing:content-box;box-sizing:content-box;content:"";border:1px solid #fff;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;-webkit-transform:rotate(45deg) scaleY(0);transform:rotate(45deg) scaleY(0);width:3px;-webkit-transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms,-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;-webkit-transform-origin:center;transform-origin:center}.custom-theme .el-checkbox__original{opacity:0;outline:0;position:absolute;margin:0;width:0;height:0;left:-999px}.custom-theme .el-checkbox__label{display:inline-block;padding-left:10px;line-height:19px;font-size:14px}.custom-theme .el-checkbox+.el-checkbox{margin-left:30px}.custom-theme .el-checkbox-button{position:relative;display:inline-block}.custom-theme .el-checkbox-button__inner{display:inline-block;line-height:1;font-weight:500;white-space:nowrap;vertical-align:middle;cursor:pointer;background:#fff;border:1px solid #d8dce5;border-left:0;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;position:relative;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:0}.custom-theme .el-checkbox-button__inner.is-round{padding:12px 20px}.custom-theme .el-checkbox-button__inner:hover{color:#262729}.custom-theme .el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.custom-theme .el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-checkbox-button__original{opacity:0;outline:0;position:absolute;margin:0;left:-999px}.custom-theme .el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#262729;border-color:#262729;-webkit-box-shadow:-1px 0 0 0 #7d7d7f;box-shadow:-1px 0 0 0 #7d7d7f}.custom-theme .el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5;-webkit-box-shadow:none;box-shadow:none}.custom-theme .el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #d8dce5;border-radius:4px 0 0 4px;-webkit-box-shadow:none!important;box-shadow:none!important}.custom-theme .el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#262729}.custom-theme .el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.custom-theme .el-checkbox-button--medium .el-checkbox-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.custom-theme .el-checkbox-button--medium .el-checkbox-button__inner.is-round{padding:10px 20px}.custom-theme .el-checkbox-button--small .el-checkbox-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.custom-theme .el-checkbox-button--small .el-checkbox-button__inner.is-round{padding:9px 15px}.custom-theme .el-checkbox-button--mini .el-checkbox-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.custom-theme .el-checkbox-button--mini .el-checkbox-button__inner.is-round{padding:7px 15px}.custom-theme .el-checkbox-group{font-size:0}.custom-theme .el-tag{background-color:rgba(38,39,41,.1);display:inline-block;padding:0 10px;height:32px;line-height:30px;font-size:12px;color:#262729;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid rgba(38,39,41,.2);white-space:nowrap}.custom-theme .el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-5px;color:#262729}.custom-theme .el-tag .el-icon-close::before{display:block}.custom-theme .el-tag .el-icon-close:hover{background-color:#262729;color:#fff}.custom-theme .el-tag--info{background-color:rgba(10,118,164,.1);border-color:rgba(10,118,164,.2);color:#0a76a4}.custom-theme .el-tag--info.is-hit{border-color:#0a76a4}.custom-theme .el-tag--info .el-tag__close{color:#0a76a4}.custom-theme .el-tag--info .el-tag__close:hover{background-color:#0a76a4;color:#fff}.custom-theme .el-tag--success{background-color:rgba(64,145,103,.1);border-color:rgba(64,145,103,.2);color:#409167}.custom-theme .el-tag--success.is-hit{border-color:#409167}.custom-theme .el-tag--success .el-tag__close{color:#409167}.custom-theme .el-tag--success .el-tag__close:hover{background-color:#409167;color:#fff}.custom-theme .el-tag--warning{background-color:rgba(157,164,8,.1);border-color:rgba(157,164,8,.2);color:#9da408}.custom-theme .el-tag--warning.is-hit{border-color:#9da408}.custom-theme .el-tag--warning .el-tag__close{color:#9da408}.custom-theme .el-tag--warning .el-tag__close:hover{background-color:#9da408;color:#fff}.custom-theme .el-tag--danger{background-color:rgba(179,69,14,.1);border-color:rgba(179,69,14,.2);color:#b3450e}.custom-theme .el-tag--danger.is-hit{border-color:#b3450e}.custom-theme .el-tag--danger .el-tag__close{color:#b3450e}.custom-theme .el-tag--danger .el-tag__close:hover{background-color:#b3450e;color:#fff}.custom-theme .el-tag--medium{height:28px;line-height:26px}.custom-theme .el-tag--medium .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--small{height:24px;padding:0 8px;line-height:22px}.custom-theme .el-tag--small .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--mini{height:20px;padding:0 5px;line-height:19px}.custom-theme .el-tag--mini .el-icon-close{margin-left:-3px;-webkit-transform:scale(.7);transform:scale(.7)}.custom-theme .el-table-column--selection .cell{padding-left:14px;padding-right:14px}.custom-theme .el-table-filter{border:solid 1px #e6ebf5;border-radius:2px;background-color:#fff;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;margin:2px 0}.custom-theme .el-table-filter__list{padding:5px 0;margin:0;list-style:none;min-width:100px}.custom-theme .el-table-filter__list-item{line-height:36px;padding:0 10px;cursor:pointer;font-size:14px}.custom-theme .el-table-filter__list-item:hover{background-color:#e9e9ea;color:#515254}.custom-theme .el-table-filter__list-item.is-active{background-color:#262729;color:#fff}.custom-theme .el-table-filter__content{min-width:100px}.custom-theme .el-table-filter__bottom{border-top:1px solid #e6ebf5;padding:8px}.custom-theme .el-table-filter__bottom button{background:0 0;border:none;color:#5a5e66;cursor:pointer;font-size:13px;padding:0 3px}.custom-theme .el-table-filter__bottom button:hover{color:#262729}.custom-theme .el-table-filter__bottom button:focus{outline:0}.custom-theme .el-table-filter__bottom button.is-disabled{color:#b4bccc;cursor:not-allowed}.custom-theme .el-table-filter__checkbox-group{padding:10px}.custom-theme .el-table-filter__checkbox-group label.el-checkbox{display:block;margin-bottom:8px;margin-left:5px}.custom-theme .el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.custom-theme .el-date-table{font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-date-table.is-week-mode .el-date-table__row:hover div{background-color:#edf2fc}.custom-theme .el-date-table.is-week-mode .el-date-table__row:hover td.available:hover{color:#5a5e66}.custom-theme .el-date-table.is-week-mode .el-date-table__row:hover td:first-child div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.custom-theme .el-date-table.is-week-mode .el-date-table__row:hover td:last-child div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.custom-theme .el-date-table.is-week-mode .el-date-table__row.current div{background-color:#edf2fc}.custom-theme .el-date-table td{width:32px;height:30px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;cursor:pointer;position:relative}.custom-theme .el-date-table td div{height:30px;padding:3px 0;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-date-table td span{width:24px;height:24px;display:block;margin:0 auto;line-height:24px;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:50%}.custom-theme .el-date-table td.next-month,.custom-theme .el-date-table td.prev-month{color:#b4bccc}.custom-theme .el-date-table td.today{position:relative}.custom-theme .el-date-table td.today span{color:#262729}.custom-theme .el-date-table td.today.end-date span,.custom-theme .el-date-table td.today.start-date span{color:#fff}.custom-theme .el-date-table td.available:hover{color:#262729}.custom-theme .el-date-table td.in-range div{background-color:#edf2fc}.custom-theme .el-date-table td.in-range div:hover{background-color:#edf2fc}.custom-theme .el-date-table td.current:not(.disabled) span{color:#fff;background-color:#262729}.custom-theme .el-date-table td.end-date div,.custom-theme .el-date-table td.start-date div{color:#fff}.custom-theme .el-date-table td.end-date span,.custom-theme .el-date-table td.start-date span{background-color:#262729}.custom-theme .el-date-table td.start-date div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.custom-theme .el-date-table td.end-date div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.custom-theme .el-date-table td.disabled div{background-color:#f5f7fa;opacity:1;cursor:not-allowed;color:#b4bccc}.custom-theme .el-date-table td.week{font-size:80%;color:#5a5e66}.custom-theme .el-date-table th{padding:5px;color:#5a5e66;font-weight:400;border-bottom:solid 1px #e6ebf5}.custom-theme .el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.custom-theme .el-month-table td{text-align:center;padding:20px 3px;cursor:pointer}.custom-theme .el-month-table td.disabled .cell{background-color:#f5f7fa;cursor:not-allowed;color:#b4bccc}.custom-theme .el-month-table td.disabled .cell:hover{color:#b4bccc}.custom-theme .el-month-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#5a5e66;margin:0 auto}.custom-theme .el-month-table td .cell:hover{color:#262729}.custom-theme .el-month-table td.current:not(.disabled) .cell{color:#262729}.custom-theme .el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.custom-theme .el-year-table .el-icon{color:#2d2f33}.custom-theme .el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.custom-theme .el-year-table td.disabled .cell{background-color:#f5f7fa;cursor:not-allowed;color:#b4bccc}.custom-theme .el-year-table td.disabled .cell:hover{color:#b4bccc}.custom-theme .el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#5a5e66;margin:0 auto}.custom-theme .el-year-table td .cell:hover{color:#262729}.custom-theme .el-year-table td.current:not(.disabled) .cell{color:#262729}.custom-theme .el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33.3%}.custom-theme .el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){margin-left:1%}.custom-theme .el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.custom-theme .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.custom-theme .el-time-spinner__wrapper.is-arrow{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden}.custom-theme .el-time-spinner__wrapper.is-arrow .el-time-spinner__list{-webkit-transform:translateY(-32px);transform:translateY(-32px)}.custom-theme .el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active){background:#fff;cursor:default}.custom-theme .el-time-spinner__arrow{font-size:12px;color:#878d99;position:absolute;left:0;width:100%;z-index:1;text-align:center;height:30px;line-height:30px;cursor:pointer}.custom-theme .el-time-spinner__arrow:hover{color:#262729}.custom-theme .el-time-spinner__arrow.el-icon-arrow-up{top:10px}.custom-theme .el-time-spinner__arrow.el-icon-arrow-down{bottom:10px}.custom-theme .el-time-spinner__input.el-input{width:70%}.custom-theme .el-time-spinner__input.el-input .el-input__inner{padding:0;text-align:center}.custom-theme .el-time-spinner__list{padding:0;margin:0;list-style:none;text-align:center}.custom-theme .el-time-spinner__list::after,.custom-theme .el-time-spinner__list::before{content:'';display:block;width:100%;height:80px}.custom-theme .el-time-spinner__item{height:32px;line-height:32px;font-size:12px;color:#5a5e66}.custom-theme .el-time-spinner__item:hover:not(.disabled):not(.active){background:#f5f7fa;cursor:pointer}.custom-theme .el-time-spinner__item.active:not(.disabled){color:#2d2f33;font-weight:700}.custom-theme .el-time-spinner__item.disabled{color:#b4bccc;cursor:not-allowed}.custom-theme .fade-in-linear-enter-active,.custom-theme .fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.custom-theme .fade-in-linear-enter,.custom-theme .fade-in-linear-leave,.custom-theme .fade-in-linear-leave-active{opacity:0}.custom-theme .el-fade-in-linear-enter-active,.custom-theme .el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.custom-theme .el-fade-in-linear-enter,.custom-theme .el-fade-in-linear-leave,.custom-theme .el-fade-in-linear-leave-active{opacity:0}.custom-theme .el-fade-in-enter-active,.custom-theme .el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-fade-in-enter,.custom-theme .el-fade-in-leave-active{opacity:0}.custom-theme .el-zoom-in-center-enter-active,.custom-theme .el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-zoom-in-center-enter,.custom-theme .el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.custom-theme .el-zoom-in-top-enter-active,.custom-theme .el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:center top;transform-origin:center top}.custom-theme .el-zoom-in-top-enter,.custom-theme .el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.custom-theme .el-zoom-in-bottom-enter-active,.custom-theme .el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:center bottom;transform-origin:center bottom}.custom-theme .el-zoom-in-bottom-enter,.custom-theme .el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.custom-theme .el-zoom-in-left-enter-active,.custom-theme .el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:top left;transform-origin:top left}.custom-theme .el-zoom-in-left-enter,.custom-theme .el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.custom-theme .collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.custom-theme .horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.custom-theme .el-list-enter-active,.custom-theme .el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.custom-theme .el-list-enter,.custom-theme .el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.custom-theme .el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-date-editor{position:relative;display:inline-block;text-align:left}.custom-theme .el-date-editor.el-input,.custom-theme .el-date-editor.el-input__inner{width:220px}.custom-theme .el-date-editor--daterange.el-input,.custom-theme .el-date-editor--daterange.el-input__inner,.custom-theme .el-date-editor--timerange.el-input,.custom-theme .el-date-editor--timerange.el-input__inner{width:350px}.custom-theme .el-date-editor--datetimerange.el-input,.custom-theme .el-date-editor--datetimerange.el-input__inner{width:400px}.custom-theme .el-date-editor .el-range__icon{font-size:14px;margin-left:-5px;color:#b4bccc;float:left;line-height:32px}.custom-theme .el-date-editor .el-range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:0;display:inline-block;height:100%;margin:0;padding:0;width:39%;text-align:center;font-size:14px;color:#5a5e66}.custom-theme .el-date-editor .el-range-input::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input::placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-separator{display:inline-block;height:100%;padding:0 5px;margin:0;text-align:center;line-height:32px;font-size:14px;width:5%;color:#2d2f33}.custom-theme .el-date-editor .el-range__close-icon{font-size:14px;color:#b4bccc;width:25px;display:inline-block;float:right;line-height:32px}.custom-theme .el-range-editor.el-input__inner{padding:3px 10px}.custom-theme .el-range-editor.is-active{border-color:#262729}.custom-theme .el-range-editor.is-active:hover{border-color:#262729}.custom-theme .el-range-editor--medium.el-input__inner{height:36px}.custom-theme .el-range-editor--medium .el-range-separator{line-height:28px;font-size:14px}.custom-theme .el-range-editor--medium .el-range-input{font-size:14px}.custom-theme .el-range-editor--medium .el-range__close-icon,.custom-theme .el-range-editor--medium .el-range__icon{line-height:28px}.custom-theme .el-range-editor--small.el-input__inner{height:32px}.custom-theme .el-range-editor--small .el-range-separator{line-height:24px;font-size:13px}.custom-theme .el-range-editor--small .el-range-input{font-size:13px}.custom-theme .el-range-editor--small .el-range__close-icon,.custom-theme .el-range-editor--small .el-range__icon{line-height:24px}.custom-theme .el-range-editor--mini.el-input__inner{height:28px}.custom-theme .el-range-editor--mini .el-range-separator{line-height:20px;font-size:12px}.custom-theme .el-range-editor--mini .el-range-input{font-size:12px}.custom-theme .el-range-editor--mini .el-range__close-icon,.custom-theme .el-range-editor--mini .el-range__icon{line-height:20px}.custom-theme .el-range-editor.is-disabled{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-range-editor.is-disabled:focus,.custom-theme .el-range-editor.is-disabled:hover{border-color:#dfe4ed}.custom-theme .el-range-editor.is-disabled input{background-color:#f5f7fa;color:#b4bccc;cursor:not-allowed}.custom-theme .el-range-editor.is-disabled input::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input::placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled .el-range-separator{color:#b4bccc}.custom-theme .el-picker-panel{color:#5a5e66;border:1px solid #dfe4ed;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);background:#fff;border-radius:4px;line-height:30px;margin:5px 0}.custom-theme .el-picker-panel__body-wrapper::after,.custom-theme .el-picker-panel__body::after{content:"";display:table;clear:both}.custom-theme .el-picker-panel__content{position:relative;margin:15px}.custom-theme .el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative;font-size:0}.custom-theme .el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#5a5e66;padding-left:12px;text-align:left;outline:0;cursor:pointer}.custom-theme .el-picker-panel__shortcut:hover{color:#262729}.custom-theme .el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#262729}.custom-theme .el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:0;font-size:12px}.custom-theme .el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.custom-theme .el-picker-panel__icon-btn{font-size:12px;color:#2d2f33;border:0;background:0 0;cursor:pointer;outline:0;margin-top:8px}.custom-theme .el-picker-panel__icon-btn:hover{color:#262729}.custom-theme .el-picker-panel__icon-btn.is-disabled{color:#bbb}.custom-theme .el-picker-panel__icon-btn.is-disabled:hover{cursor:not-allowed}.custom-theme .el-picker-panel__link-btn{vertical-align:middle}.custom-theme .el-picker-panel .popper__arrow{-webkit-transform:translateX(-400%);transform:translateX(-400%)}.custom-theme .el-picker-panel [slot=sidebar],.custom-theme .el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:6px;background-color:#fff;overflow:auto}.custom-theme .el-picker-panel [slot=sidebar]+.el-picker-panel__body,.custom-theme .el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.custom-theme .el-date-picker{width:322px}.custom-theme .el-date-picker.has-sidebar.has-time{width:434px}.custom-theme .el-date-picker.has-sidebar{width:438px}.custom-theme .el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.custom-theme .el-date-picker .el-picker-panel__content{width:292px}.custom-theme .el-date-picker table{table-layout:fixed;width:100%}.custom-theme .el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.custom-theme .el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px 5px;display:table;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-date-picker__header{margin:12px;text-align:center}.custom-theme .el-date-picker__header--bordered{margin-bottom:0;padding-bottom:12px;border-bottom:solid 1px #e6ebf5}.custom-theme .el-date-picker__header--bordered+.el-picker-panel__content{margin-top:0}.custom-theme .el-date-picker__header-label{font-size:16px;font-weight:500;padding:0 5px;line-height:22px;text-align:center;cursor:pointer;color:#5a5e66}.custom-theme .el-date-picker__header-label:hover{color:#262729}.custom-theme .el-date-picker__header-label.active{color:#262729}.custom-theme .el-date-picker__prev-btn{float:left}.custom-theme .el-date-picker__next-btn{float:right}.custom-theme .el-date-picker__time-wrap{padding:10px;text-align:center}.custom-theme .el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.custom-theme .el-date-range-picker{width:646px}.custom-theme .el-date-range-picker.has-sidebar{width:756px}.custom-theme .el-date-range-picker table{table-layout:fixed;width:100%}.custom-theme .el-date-range-picker .el-picker-panel__body{min-width:513px}.custom-theme .el-date-range-picker .el-picker-panel__content{margin:0}.custom-theme .el-date-range-picker__header{position:relative;text-align:center;height:28px}.custom-theme .el-date-range-picker__header [class*=arrow-left]{float:left}.custom-theme .el-date-range-picker__header [class*=arrow-right]{float:right}.custom-theme .el-date-range-picker__header div{font-size:16px;font-weight:500;margin-right:50px}.custom-theme .el-date-range-picker__content{float:left;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:16px}.custom-theme .el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.custom-theme .el-date-range-picker__content.is-right .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.custom-theme .el-date-range-picker__editors-wrap{-webkit-box-sizing:border-box;box-sizing:border-box;display:table-cell}.custom-theme .el-date-range-picker__editors-wrap.is-right{text-align:right}.custom-theme .el-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px 5px;display:table;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-date-range-picker__time-header>.el-icon-arrow-right{font-size:20px;vertical-align:middle;display:table-cell;color:#2d2f33}.custom-theme .el-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.custom-theme .el-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#fff}.custom-theme .el-time-range-picker{width:354px;overflow:visible}.custom-theme .el-time-range-picker__content{position:relative;text-align:center;padding:10px}.custom-theme .el-time-range-picker__cell{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.custom-theme .el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px}.custom-theme .el-time-range-picker__body{border-radius:2px;border:1px solid #dfe4ed}.custom-theme .el-time-panel{margin:5px 0;border:solid 1px #dfe4ed;background-color:#fff;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-time-panel__content{font-size:0;position:relative;overflow:hidden}.custom-theme .el-time-panel__content::after,.custom-theme .el-time-panel__content::before{content:"";top:50%;position:absolute;margin-top:-15px;height:32px;z-index:-1;left:0;right:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:6px;text-align:left;border-top:1px solid #dfe4ed;border-bottom:1px solid #dfe4ed}.custom-theme .el-time-panel__content::after{left:50%;margin-left:12%;margin-right:12%}.custom-theme .el-time-panel__content::before{padding-left:50%;margin-right:12%;margin-left:12%}.custom-theme .el-time-panel__content.has-seconds::after{left:calc(100% / 3 * 2)}.custom-theme .el-time-panel__content.has-seconds::before{padding-left:calc(100% / 3)}.custom-theme .el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:0;font-size:12px;color:#2d2f33}.custom-theme .el-time-panel__btn.confirm{font-weight:800;color:#262729}.custom-theme .el-time-panel .popper__arrow{-webkit-transform:translateX(-400%);transform:translateX(-400%)}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-scrollbar{overflow:hidden;position:relative}.custom-theme .el-scrollbar:active>.el-scrollbar__bar,.custom-theme .el-scrollbar:focus>.el-scrollbar__bar,.custom-theme .el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.custom-theme .el-scrollbar__wrap{overflow:scroll;height:100%}.custom-theme .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.custom-theme .el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(135,141,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.custom-theme .el-scrollbar__thumb:hover{background-color:rgba(135,141,153,.5)}.custom-theme .el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.custom-theme .el-scrollbar__bar.is-vertical{width:6px;top:2px}.custom-theme .el-scrollbar__bar.is-vertical>div{width:100%}.custom-theme .el-scrollbar__bar.is-horizontal{height:6px;left:2px}.custom-theme .el-scrollbar__bar.is-horizontal>div{height:100%}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .fade-in-linear-enter-active,.custom-theme .fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.custom-theme .fade-in-linear-enter,.custom-theme .fade-in-linear-leave,.custom-theme .fade-in-linear-leave-active{opacity:0}.custom-theme .el-fade-in-linear-enter-active,.custom-theme .el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.custom-theme .el-fade-in-linear-enter,.custom-theme .el-fade-in-linear-leave,.custom-theme .el-fade-in-linear-leave-active{opacity:0}.custom-theme .el-fade-in-enter-active,.custom-theme .el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-fade-in-enter,.custom-theme .el-fade-in-leave-active{opacity:0}.custom-theme .el-zoom-in-center-enter-active,.custom-theme .el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-zoom-in-center-enter,.custom-theme .el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.custom-theme .el-zoom-in-top-enter-active,.custom-theme .el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:center top;transform-origin:center top}.custom-theme .el-zoom-in-top-enter,.custom-theme .el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.custom-theme .el-zoom-in-bottom-enter-active,.custom-theme .el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:center bottom;transform-origin:center bottom}.custom-theme .el-zoom-in-bottom-enter,.custom-theme .el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.custom-theme .el-zoom-in-left-enter-active,.custom-theme .el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:top left;transform-origin:top left}.custom-theme .el-zoom-in-left-enter,.custom-theme .el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.custom-theme .collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.custom-theme .horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.custom-theme .el-list-enter-active,.custom-theme .el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.custom-theme .el-list-enter,.custom-theme .el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.custom-theme .el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-date-editor{position:relative;display:inline-block;text-align:left}.custom-theme .el-date-editor.el-input,.custom-theme .el-date-editor.el-input__inner{width:220px}.custom-theme .el-date-editor--daterange.el-input,.custom-theme .el-date-editor--daterange.el-input__inner,.custom-theme .el-date-editor--timerange.el-input,.custom-theme .el-date-editor--timerange.el-input__inner{width:350px}.custom-theme .el-date-editor--datetimerange.el-input,.custom-theme .el-date-editor--datetimerange.el-input__inner{width:400px}.custom-theme .el-date-editor .el-range__icon{font-size:14px;margin-left:-5px;color:#b4bccc;float:left;line-height:32px}.custom-theme .el-date-editor .el-range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:0;display:inline-block;height:100%;margin:0;padding:0;width:39%;text-align:center;font-size:14px;color:#5a5e66}.custom-theme .el-date-editor .el-range-input::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input::placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-separator{display:inline-block;height:100%;padding:0 5px;margin:0;text-align:center;line-height:32px;font-size:14px;width:5%;color:#2d2f33}.custom-theme .el-date-editor .el-range__close-icon{font-size:14px;color:#b4bccc;width:25px;display:inline-block;float:right;line-height:32px}.custom-theme .el-range-editor.el-input__inner{padding:3px 10px}.custom-theme .el-range-editor.is-active{border-color:#262729}.custom-theme .el-range-editor.is-active:hover{border-color:#262729}.custom-theme .el-range-editor--medium.el-input__inner{height:36px}.custom-theme .el-range-editor--medium .el-range-separator{line-height:28px;font-size:14px}.custom-theme .el-range-editor--medium .el-range-input{font-size:14px}.custom-theme .el-range-editor--medium .el-range__close-icon,.custom-theme .el-range-editor--medium .el-range__icon{line-height:28px}.custom-theme .el-range-editor--small.el-input__inner{height:32px}.custom-theme .el-range-editor--small .el-range-separator{line-height:24px;font-size:13px}.custom-theme .el-range-editor--small .el-range-input{font-size:13px}.custom-theme .el-range-editor--small .el-range__close-icon,.custom-theme .el-range-editor--small .el-range__icon{line-height:24px}.custom-theme .el-range-editor--mini.el-input__inner{height:28px}.custom-theme .el-range-editor--mini .el-range-separator{line-height:20px;font-size:12px}.custom-theme .el-range-editor--mini .el-range-input{font-size:12px}.custom-theme .el-range-editor--mini .el-range__close-icon,.custom-theme .el-range-editor--mini .el-range__icon{line-height:20px}.custom-theme .el-range-editor.is-disabled{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-range-editor.is-disabled:focus,.custom-theme .el-range-editor.is-disabled:hover{border-color:#dfe4ed}.custom-theme .el-range-editor.is-disabled input{background-color:#f5f7fa;color:#b4bccc;cursor:not-allowed}.custom-theme .el-range-editor.is-disabled input::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input::placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled .el-range-separator{color:#b4bccc}.custom-theme .el-picker-panel{color:#5a5e66;border:1px solid #dfe4ed;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);background:#fff;border-radius:4px;line-height:30px;margin:5px 0}.custom-theme .el-picker-panel__body-wrapper::after,.custom-theme .el-picker-panel__body::after{content:"";display:table;clear:both}.custom-theme .el-picker-panel__content{position:relative;margin:15px}.custom-theme .el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative;font-size:0}.custom-theme .el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#5a5e66;padding-left:12px;text-align:left;outline:0;cursor:pointer}.custom-theme .el-picker-panel__shortcut:hover{color:#262729}.custom-theme .el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#262729}.custom-theme .el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:0;font-size:12px}.custom-theme .el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.custom-theme .el-picker-panel__icon-btn{font-size:12px;color:#2d2f33;border:0;background:0 0;cursor:pointer;outline:0;margin-top:8px}.custom-theme .el-picker-panel__icon-btn:hover{color:#262729}.custom-theme .el-picker-panel__icon-btn.is-disabled{color:#bbb}.custom-theme .el-picker-panel__icon-btn.is-disabled:hover{cursor:not-allowed}.custom-theme .el-picker-panel__link-btn{vertical-align:middle}.custom-theme .el-picker-panel .popper__arrow{-webkit-transform:translateX(-400%);transform:translateX(-400%)}.custom-theme .el-picker-panel [slot=sidebar],.custom-theme .el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:6px;background-color:#fff;overflow:auto}.custom-theme .el-picker-panel [slot=sidebar]+.el-picker-panel__body,.custom-theme .el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.custom-theme .el-date-picker{width:322px}.custom-theme .el-date-picker.has-sidebar.has-time{width:434px}.custom-theme .el-date-picker.has-sidebar{width:438px}.custom-theme .el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.custom-theme .el-date-picker .el-picker-panel__content{width:292px}.custom-theme .el-date-picker table{table-layout:fixed;width:100%}.custom-theme .el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.custom-theme .el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px 5px;display:table;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-date-picker__header{margin:12px;text-align:center}.custom-theme .el-date-picker__header--bordered{margin-bottom:0;padding-bottom:12px;border-bottom:solid 1px #e6ebf5}.custom-theme .el-date-picker__header--bordered+.el-picker-panel__content{margin-top:0}.custom-theme .el-date-picker__header-label{font-size:16px;font-weight:500;padding:0 5px;line-height:22px;text-align:center;cursor:pointer;color:#5a5e66}.custom-theme .el-date-picker__header-label:hover{color:#262729}.custom-theme .el-date-picker__header-label.active{color:#262729}.custom-theme .el-date-picker__prev-btn{float:left}.custom-theme .el-date-picker__next-btn{float:right}.custom-theme .el-date-picker__time-wrap{padding:10px;text-align:center}.custom-theme .el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.custom-theme .el-scrollbar{overflow:hidden;position:relative}.custom-theme .el-scrollbar:active>.el-scrollbar__bar,.custom-theme .el-scrollbar:focus>.el-scrollbar__bar,.custom-theme .el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.custom-theme .el-scrollbar__wrap{overflow:scroll;height:100%}.custom-theme .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.custom-theme .el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(135,141,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.custom-theme .el-scrollbar__thumb:hover{background-color:rgba(135,141,153,.5)}.custom-theme .el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.custom-theme .el-scrollbar__bar.is-vertical{width:6px;top:2px}.custom-theme .el-scrollbar__bar.is-vertical>div{width:100%}.custom-theme .el-scrollbar__bar.is-horizontal{height:6px;left:2px}.custom-theme .el-scrollbar__bar.is-horizontal>div{height:100%}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .time-select{margin:5px 0;min-width:0}.custom-theme .time-select .el-picker-panel__content{max-height:200px;margin:0}.custom-theme .time-select-item{padding:8px 10px;font-size:14px;line-height:20px}.custom-theme .time-select-item.selected:not(.disabled){color:#262729;font-weight:700}.custom-theme .time-select-item.disabled{color:#dfe4ed;cursor:not-allowed}.custom-theme .time-select-item:hover{background-color:#f5f7fa;font-weight:700;cursor:pointer}.custom-theme .fade-in-linear-enter-active,.custom-theme .fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.custom-theme .fade-in-linear-enter,.custom-theme .fade-in-linear-leave,.custom-theme .fade-in-linear-leave-active{opacity:0}.custom-theme .el-fade-in-linear-enter-active,.custom-theme .el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.custom-theme .el-fade-in-linear-enter,.custom-theme .el-fade-in-linear-leave,.custom-theme .el-fade-in-linear-leave-active{opacity:0}.custom-theme .el-fade-in-enter-active,.custom-theme .el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-fade-in-enter,.custom-theme .el-fade-in-leave-active{opacity:0}.custom-theme .el-zoom-in-center-enter-active,.custom-theme .el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-zoom-in-center-enter,.custom-theme .el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.custom-theme .el-zoom-in-top-enter-active,.custom-theme .el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:center top;transform-origin:center top}.custom-theme .el-zoom-in-top-enter,.custom-theme .el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.custom-theme .el-zoom-in-bottom-enter-active,.custom-theme .el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:center bottom;transform-origin:center bottom}.custom-theme .el-zoom-in-bottom-enter,.custom-theme .el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.custom-theme .el-zoom-in-left-enter-active,.custom-theme .el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;-webkit-transform-origin:top left;transform-origin:top left}.custom-theme .el-zoom-in-left-enter,.custom-theme .el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.custom-theme .collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.custom-theme .horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.custom-theme .el-list-enter-active,.custom-theme .el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.custom-theme .el-list-enter,.custom-theme .el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.custom-theme .el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}.custom-theme .el-date-editor{position:relative;display:inline-block;text-align:left}.custom-theme .el-date-editor.el-input,.custom-theme .el-date-editor.el-input__inner{width:220px}.custom-theme .el-date-editor--daterange.el-input,.custom-theme .el-date-editor--daterange.el-input__inner,.custom-theme .el-date-editor--timerange.el-input,.custom-theme .el-date-editor--timerange.el-input__inner{width:350px}.custom-theme .el-date-editor--datetimerange.el-input,.custom-theme .el-date-editor--datetimerange.el-input__inner{width:400px}.custom-theme .el-date-editor .el-range__icon{font-size:14px;margin-left:-5px;color:#b4bccc;float:left;line-height:32px}.custom-theme .el-date-editor .el-range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:0;display:inline-block;height:100%;margin:0;padding:0;width:39%;text-align:center;font-size:14px;color:#5a5e66}.custom-theme .el-date-editor .el-range-input::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-input::placeholder{color:#b4bccc}.custom-theme .el-date-editor .el-range-separator{display:inline-block;height:100%;padding:0 5px;margin:0;text-align:center;line-height:32px;font-size:14px;width:5%;color:#2d2f33}.custom-theme .el-date-editor .el-range__close-icon{font-size:14px;color:#b4bccc;width:25px;display:inline-block;float:right;line-height:32px}.custom-theme .el-range-editor.el-input__inner{padding:3px 10px}.custom-theme .el-range-editor.is-active{border-color:#262729}.custom-theme .el-range-editor.is-active:hover{border-color:#262729}.custom-theme .el-range-editor--medium.el-input__inner{height:36px}.custom-theme .el-range-editor--medium .el-range-separator{line-height:28px;font-size:14px}.custom-theme .el-range-editor--medium .el-range-input{font-size:14px}.custom-theme .el-range-editor--medium .el-range__close-icon,.custom-theme .el-range-editor--medium .el-range__icon{line-height:28px}.custom-theme .el-range-editor--small.el-input__inner{height:32px}.custom-theme .el-range-editor--small .el-range-separator{line-height:24px;font-size:13px}.custom-theme .el-range-editor--small .el-range-input{font-size:13px}.custom-theme .el-range-editor--small .el-range__close-icon,.custom-theme .el-range-editor--small .el-range__icon{line-height:24px}.custom-theme .el-range-editor--mini.el-input__inner{height:28px}.custom-theme .el-range-editor--mini .el-range-separator{line-height:20px;font-size:12px}.custom-theme .el-range-editor--mini .el-range-input{font-size:12px}.custom-theme .el-range-editor--mini .el-range__close-icon,.custom-theme .el-range-editor--mini .el-range__icon{line-height:20px}.custom-theme .el-range-editor.is-disabled{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-range-editor.is-disabled:focus,.custom-theme .el-range-editor.is-disabled:hover{border-color:#dfe4ed}.custom-theme .el-range-editor.is-disabled input{background-color:#f5f7fa;color:#b4bccc;cursor:not-allowed}.custom-theme .el-range-editor.is-disabled input::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled input::placeholder{color:#b4bccc}.custom-theme .el-range-editor.is-disabled .el-range-separator{color:#b4bccc}.custom-theme .el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33.3%}.custom-theme .el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){margin-left:1%}.custom-theme .el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.custom-theme .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.custom-theme .el-time-spinner__wrapper.is-arrow{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden}.custom-theme .el-time-spinner__wrapper.is-arrow .el-time-spinner__list{-webkit-transform:translateY(-32px);transform:translateY(-32px)}.custom-theme .el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active){background:#fff;cursor:default}.custom-theme .el-time-spinner__arrow{font-size:12px;color:#878d99;position:absolute;left:0;width:100%;z-index:1;text-align:center;height:30px;line-height:30px;cursor:pointer}.custom-theme .el-time-spinner__arrow:hover{color:#262729}.custom-theme .el-time-spinner__arrow.el-icon-arrow-up{top:10px}.custom-theme .el-time-spinner__arrow.el-icon-arrow-down{bottom:10px}.custom-theme .el-time-spinner__input.el-input{width:70%}.custom-theme .el-time-spinner__input.el-input .el-input__inner{padding:0;text-align:center}.custom-theme .el-time-spinner__list{padding:0;margin:0;list-style:none;text-align:center}.custom-theme .el-time-spinner__list::after,.custom-theme .el-time-spinner__list::before{content:'';display:block;width:100%;height:80px}.custom-theme .el-time-spinner__item{height:32px;line-height:32px;font-size:12px;color:#5a5e66}.custom-theme .el-time-spinner__item:hover:not(.disabled):not(.active){background:#f5f7fa;cursor:pointer}.custom-theme .el-time-spinner__item.active:not(.disabled){color:#2d2f33;font-weight:700}.custom-theme .el-time-spinner__item.disabled{color:#b4bccc;cursor:not-allowed}.custom-theme .el-time-panel{margin:5px 0;border:solid 1px #dfe4ed;background-color:#fff;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-time-panel__content{font-size:0;position:relative;overflow:hidden}.custom-theme .el-time-panel__content::after,.custom-theme .el-time-panel__content::before{content:"";top:50%;position:absolute;margin-top:-15px;height:32px;z-index:-1;left:0;right:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:6px;text-align:left;border-top:1px solid #dfe4ed;border-bottom:1px solid #dfe4ed}.custom-theme .el-time-panel__content::after{left:50%;margin-left:12%;margin-right:12%}.custom-theme .el-time-panel__content::before{padding-left:50%;margin-right:12%;margin-left:12%}.custom-theme .el-time-panel__content.has-seconds::after{left:calc(100% / 3 * 2)}.custom-theme .el-time-panel__content.has-seconds::before{padding-left:calc(100% / 3)}.custom-theme .el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:0;font-size:12px;color:#2d2f33}.custom-theme .el-time-panel__btn.confirm{font-weight:800;color:#262729}.custom-theme .el-time-panel .popper__arrow{-webkit-transform:translateX(-400%);transform:translateX(-400%)}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-scrollbar{overflow:hidden;position:relative}.custom-theme .el-scrollbar:active>.el-scrollbar__bar,.custom-theme .el-scrollbar:focus>.el-scrollbar__bar,.custom-theme .el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.custom-theme .el-scrollbar__wrap{overflow:scroll;height:100%}.custom-theme .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.custom-theme .el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(135,141,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.custom-theme .el-scrollbar__thumb:hover{background-color:rgba(135,141,153,.5)}.custom-theme .el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.custom-theme .el-scrollbar__bar.is-vertical{width:6px;top:2px}.custom-theme .el-scrollbar__bar.is-vertical>div{width:100%}.custom-theme .el-scrollbar__bar.is-horizontal{height:6px;left:2px}.custom-theme .el-scrollbar__bar.is-horizontal>div{height:100%}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .el-popover{position:absolute;background:#fff;min-width:150px;border-radius:4px;border:1px solid #e6ebf5;padding:12px;z-index:2000;color:#5a5e66;line-height:1.4;text-align:justify;word-break:break-all;font-size:14px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.custom-theme .el-popover--plain{padding:18px 20px}.custom-theme .el-popover__title{color:#2d2f33;font-size:16px;line-height:1;margin-bottom:12px}.custom-theme .el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2}.custom-theme .el-tooltip__popper .popper__arrow,.custom-theme .el-tooltip__popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-tooltip__popper .popper__arrow{border-width:6px}.custom-theme .el-tooltip__popper .popper__arrow::after{content:" ";border-width:5px}.custom-theme .el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#2d2f33;border-bottom-width:0}.custom-theme .el-tooltip__popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-5px;border-top-color:#2d2f33;border-bottom-width:0}.custom-theme .el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#2d2f33}.custom-theme .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#2d2f33}.custom-theme .el-tooltip__popper[x-placement^=right]{margin-left:12px}.custom-theme .el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#2d2f33;border-left-width:0}.custom-theme .el-tooltip__popper[x-placement^=right] .popper__arrow::after{bottom:-5px;left:1px;border-right-color:#2d2f33;border-left-width:0}.custom-theme .el-tooltip__popper[x-placement^=left]{margin-right:12px}.custom-theme .el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#2d2f33}.custom-theme .el-tooltip__popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#2d2f33}.custom-theme .el-tooltip__popper.is-dark{background:#2d2f33;color:#fff}.custom-theme .el-tooltip__popper.is-light{background:#fff;border:1px solid #2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after{border-top-color:#fff}.custom-theme .el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow::after{border-bottom-color:#fff}.custom-theme .el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=left] .popper__arrow::after{border-left-color:#fff}.custom-theme .el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=right] .popper__arrow::after{border-right-color:#fff}.custom-theme .v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.custom-theme .v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{100%{opacity:0}}.custom-theme .v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.custom-theme .el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #d8dce5;border-color:#d8dce5;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.custom-theme .el-button+.el-button{margin-left:10px}.custom-theme .el-button.is-round{padding:12px 20px}.custom-theme .el-button:focus,.custom-theme .el-button:hover{color:#262729;border-color:#bebebf;background-color:#e9e9ea}.custom-theme .el-button:active{color:#222325;border-color:#222325;outline:0}.custom-theme .el-button::-moz-focus-inner{border:0}.custom-theme .el-button [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-button.is-plain:focus,.custom-theme .el-button.is-plain:hover{background:#fff;border-color:#262729;color:#262729}.custom-theme .el-button.is-plain:active{background:#fff;border-color:#222325;color:#222325;outline:0}.custom-theme .el-button.is-active{color:#222325;border-color:#222325}.custom-theme .el-button.is-disabled,.custom-theme .el-button.is-disabled:focus,.custom-theme .el-button.is-disabled:hover{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5}.custom-theme .el-button.is-disabled.el-button--text{background-color:transparent}.custom-theme .el-button.is-disabled.is-plain,.custom-theme .el-button.is-disabled.is-plain:focus,.custom-theme .el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#e6ebf5;color:#b4bccc}.custom-theme .el-button.is-loading{position:relative;pointer-events:none}.custom-theme .el-button.is-loading:before{pointer-events:none;content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:rgba(255,255,255,.35)}.custom-theme .el-button.is-round{border-radius:20px;padding:12px 23px}.custom-theme .el-button--primary{color:#fff;background-color:#262729;border-color:#262729}.custom-theme .el-button--primary:focus,.custom-theme .el-button--primary:hover{background:#515254;border-color:#515254;color:#fff}.custom-theme .el-button--primary:active{background:#222325;border-color:#222325;color:#fff;outline:0}.custom-theme .el-button--primary.is-active{background:#222325;border-color:#222325;color:#fff}.custom-theme .el-button--primary.is-disabled,.custom-theme .el-button--primary.is-disabled:active,.custom-theme .el-button--primary.is-disabled:focus,.custom-theme .el-button--primary.is-disabled:hover{color:#fff;background-color:#939394;border-color:#939394}.custom-theme .el-button--primary.is-plain{color:#262729;background:#e9e9ea;border-color:#a8a9a9}.custom-theme .el-button--primary.is-plain:focus,.custom-theme .el-button--primary.is-plain:hover{background:#262729;border-color:#262729;color:#fff}.custom-theme .el-button--primary.is-plain:active{background:#222325;border-color:#222325;color:#fff;outline:0}.custom-theme .el-button--primary.is-plain.is-disabled,.custom-theme .el-button--primary.is-plain.is-disabled:active,.custom-theme .el-button--primary.is-plain.is-disabled:focus,.custom-theme .el-button--primary.is-plain.is-disabled:hover{color:#7d7d7f;background-color:#e9e9ea;border-color:#d4d4d4}.custom-theme .el-button--success{color:#fff;background-color:#409167;border-color:#409167}.custom-theme .el-button--success:focus,.custom-theme .el-button--success:hover{background:#66a785;border-color:#66a785;color:#fff}.custom-theme .el-button--success:active{background:#3a835d;border-color:#3a835d;color:#fff;outline:0}.custom-theme .el-button--success.is-active{background:#3a835d;border-color:#3a835d;color:#fff}.custom-theme .el-button--success.is-disabled,.custom-theme .el-button--success.is-disabled:active,.custom-theme .el-button--success.is-disabled:focus,.custom-theme .el-button--success.is-disabled:hover{color:#fff;background-color:#a0c8b3;border-color:#a0c8b3}.custom-theme .el-button--success.is-plain{color:#409167;background:#ecf4f0;border-color:#b3d3c2}.custom-theme .el-button--success.is-plain:focus,.custom-theme .el-button--success.is-plain:hover{background:#409167;border-color:#409167;color:#fff}.custom-theme .el-button--success.is-plain:active{background:#3a835d;border-color:#3a835d;color:#fff;outline:0}.custom-theme .el-button--success.is-plain.is-disabled,.custom-theme .el-button--success.is-plain.is-disabled:active,.custom-theme .el-button--success.is-plain.is-disabled:focus,.custom-theme .el-button--success.is-plain.is-disabled:hover{color:#8cbda4;background-color:#ecf4f0;border-color:#d9e9e1}.custom-theme .el-button--warning{color:#fff;background-color:#9da408;border-color:#9da408}.custom-theme .el-button--warning:focus,.custom-theme .el-button--warning:hover{background:#b1b639;border-color:#b1b639;color:#fff}.custom-theme .el-button--warning:active{background:#8d9407;border-color:#8d9407;color:#fff;outline:0}.custom-theme .el-button--warning.is-active{background:#8d9407;border-color:#8d9407;color:#fff}.custom-theme .el-button--warning.is-disabled,.custom-theme .el-button--warning.is-disabled:active,.custom-theme .el-button--warning.is-disabled:focus,.custom-theme .el-button--warning.is-disabled:hover{color:#fff;background-color:#ced284;border-color:#ced284}.custom-theme .el-button--warning.is-plain{color:#9da408;background:#f5f6e6;border-color:#d8db9c}.custom-theme .el-button--warning.is-plain:focus,.custom-theme .el-button--warning.is-plain:hover{background:#9da408;border-color:#9da408;color:#fff}.custom-theme .el-button--warning.is-plain:active{background:#8d9407;border-color:#8d9407;color:#fff;outline:0}.custom-theme .el-button--warning.is-plain.is-disabled,.custom-theme .el-button--warning.is-plain.is-disabled:active,.custom-theme .el-button--warning.is-plain.is-disabled:focus,.custom-theme .el-button--warning.is-plain.is-disabled:hover{color:#c4c86b;background-color:#f5f6e6;border-color:#ebedce}.custom-theme .el-button--danger{color:#fff;background-color:#b3450e;border-color:#b3450e}.custom-theme .el-button--danger:focus,.custom-theme .el-button--danger:hover{background:#c26a3e;border-color:#c26a3e;color:#fff}.custom-theme .el-button--danger:active{background:#a13e0d;border-color:#a13e0d;color:#fff;outline:0}.custom-theme .el-button--danger.is-active{background:#a13e0d;border-color:#a13e0d;color:#fff}.custom-theme .el-button--danger.is-disabled,.custom-theme .el-button--danger.is-disabled:active,.custom-theme .el-button--danger.is-disabled:focus,.custom-theme .el-button--danger.is-disabled:hover{color:#fff;background-color:#d9a287;border-color:#d9a287}.custom-theme .el-button--danger.is-plain{color:#b3450e;background:#f7ece7;border-color:#e1b59f}.custom-theme .el-button--danger.is-plain:focus,.custom-theme .el-button--danger.is-plain:hover{background:#b3450e;border-color:#b3450e;color:#fff}.custom-theme .el-button--danger.is-plain:active{background:#a13e0d;border-color:#a13e0d;color:#fff;outline:0}.custom-theme .el-button--danger.is-plain.is-disabled,.custom-theme .el-button--danger.is-plain.is-disabled:active,.custom-theme .el-button--danger.is-plain.is-disabled:focus,.custom-theme .el-button--danger.is-plain.is-disabled:hover{color:#d18f6e;background-color:#f7ece7;border-color:#f0dacf}.custom-theme .el-button--info{color:#fff;background-color:#0a76a4;border-color:#0a76a4}.custom-theme .el-button--info:focus,.custom-theme .el-button--info:hover{background:#3b91b6;border-color:#3b91b6;color:#fff}.custom-theme .el-button--info:active{background:#096a94;border-color:#096a94;color:#fff;outline:0}.custom-theme .el-button--info.is-active{background:#096a94;border-color:#096a94;color:#fff}.custom-theme .el-button--info.is-disabled,.custom-theme .el-button--info.is-disabled:active,.custom-theme .el-button--info.is-disabled:focus,.custom-theme .el-button--info.is-disabled:hover{color:#fff;background-color:#85bbd2;border-color:#85bbd2}.custom-theme .el-button--info.is-plain{color:#0a76a4;background:#e7f1f6;border-color:#9dc8db}.custom-theme .el-button--info.is-plain:focus,.custom-theme .el-button--info.is-plain:hover{background:#0a76a4;border-color:#0a76a4;color:#fff}.custom-theme .el-button--info.is-plain:active{background:#096a94;border-color:#096a94;color:#fff;outline:0}.custom-theme .el-button--info.is-plain.is-disabled,.custom-theme .el-button--info.is-plain.is-disabled:active,.custom-theme .el-button--info.is-plain.is-disabled:focus,.custom-theme .el-button--info.is-plain.is-disabled:hover{color:#6cadc8;background-color:#e7f1f6;border-color:#cee4ed}.custom-theme .el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.custom-theme .el-button--medium.is-round{padding:10px 20px}.custom-theme .el-button--small{padding:9px 15px;font-size:12px;border-radius:3px}.custom-theme .el-button--small.is-round{padding:9px 15px}.custom-theme .el-button--mini{padding:7px 15px;font-size:12px;border-radius:3px}.custom-theme .el-button--mini.is-round{padding:7px 15px}.custom-theme .el-button--text{border:none;color:#262729;background:0 0;padding-left:0;padding-right:0}.custom-theme .el-button--text:focus,.custom-theme .el-button--text:hover{color:#515254;border-color:transparent;background-color:transparent}.custom-theme .el-button--text:active{color:#222325;border-color:transparent;background-color:transparent}.custom-theme .el-button-group{display:inline-block;vertical-align:middle}.custom-theme .el-button-group::after,.custom-theme .el-button-group::before{display:table;content:""}.custom-theme .el-button-group::after{clear:both}.custom-theme .el-button-group .el-button{float:left;position:relative}.custom-theme .el-button-group .el-button+.el-button{margin-left:0}.custom-theme .el-button-group .el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-button-group .el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-button-group .el-button:not(:first-child):not(:last-child){border-radius:0}.custom-theme .el-button-group .el-button:not(:last-child){margin-right:-1px}.custom-theme .el-button-group .el-button:active,.custom-theme .el-button-group .el-button:focus,.custom-theme .el-button-group .el-button:hover{z-index:1}.custom-theme .el-button-group .el-button.is-active{z-index:1}.custom-theme .el-button-group .el-button--primary:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--primary:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-message-box{display:inline-block;width:420px;padding-bottom:10px;vertical-align:middle;background-color:#fff;border-radius:4px;border:1px solid #e6ebf5;font-size:18px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);text-align:left;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.custom-theme .el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.custom-theme .el-message-box__wrapper::after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.custom-theme .el-message-box__header{position:relative;padding:15px;padding-bottom:10px}.custom-theme .el-message-box__title{padding-left:0;margin-bottom:0;font-size:18px;line-height:1;color:#2d2f33}.custom-theme .el-message-box__headerbtn{position:absolute;top:15px;right:15px;padding:0;border:none;outline:0;background:0 0;font-size:16px;cursor:pointer}.custom-theme .el-message-box__headerbtn .el-message-box__close{color:#0a76a4}.custom-theme .el-message-box__headerbtn:focus .el-message-box__close,.custom-theme .el-message-box__headerbtn:hover .el-message-box__close{color:#262729}.custom-theme .el-message-box__content{position:relative;padding:10px 15px;color:#5a5e66;font-size:14px}.custom-theme .el-message-box__input{padding-top:15px}.custom-theme .el-message-box__input input.invalid{border-color:#b3450e}.custom-theme .el-message-box__input input.invalid:focus{border-color:#b3450e}.custom-theme .el-message-box__status{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:24px!important}.custom-theme .el-message-box__status::before{padding-left:1px}.custom-theme .el-message-box__status+.el-message-box__message{padding-left:36px;padding-right:12px}.custom-theme .el-message-box__status.el-icon-success{color:#409167}.custom-theme .el-message-box__status.el-icon-info{color:#0a76a4}.custom-theme .el-message-box__status.el-icon-warning{color:#9da408}.custom-theme .el-message-box__status.el-icon-error{color:#b3450e}.custom-theme .el-message-box__message{margin:0}.custom-theme .el-message-box__message p{margin:0;line-height:24px}.custom-theme .el-message-box__errormsg{color:#b3450e;font-size:12px;min-height:18px;margin-top:2px}.custom-theme .el-message-box__btns{padding:5px 15px 0;text-align:right}.custom-theme .el-message-box__btns button:nth-child(2){margin-left:10px}.custom-theme .el-message-box__btns-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.custom-theme .el-message-box--center{padding-bottom:30px}.custom-theme .el-message-box--center .el-message-box__header{padding-top:30px}.custom-theme .el-message-box--center .el-message-box__title{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.custom-theme .el-message-box--center .el-message-box__status{position:relative;top:auto;padding-right:5px;text-align:center;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.custom-theme .el-message-box--center .el-message-box__message{margin-left:0}.custom-theme .el-message-box--center .el-message-box__btns,.custom-theme .el-message-box--center .el-message-box__content{text-align:center}.custom-theme .el-message-box--center .el-message-box__content{padding-left:27px;padding-right:27px}.custom-theme .msgbox-fade-enter-active{-webkit-animation:msgbox-fade-in .3s;animation:msgbox-fade-in .3s}.custom-theme .msgbox-fade-leave-active{-webkit-animation:msgbox-fade-out .3s;animation:msgbox-fade-out .3s}@-webkit-keyframes msgbox-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes msgbox-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes msgbox-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes msgbox-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}.custom-theme .el-breadcrumb{font-size:14px;line-height:1}.custom-theme .el-breadcrumb::after,.custom-theme .el-breadcrumb::before{display:table;content:""}.custom-theme .el-breadcrumb::after{clear:both}.custom-theme .el-breadcrumb__separator{margin:0 9px;font-weight:700;color:#b4bccc}.custom-theme .el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.custom-theme .el-breadcrumb__item{float:left}.custom-theme .el-breadcrumb__inner,.custom-theme .el-breadcrumb__inner a{font-weight:700;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1);color:#2d2f33}.custom-theme .el-breadcrumb__inner a:hover,.custom-theme .el-breadcrumb__inner:hover{color:#262729;cursor:pointer}.custom-theme .el-breadcrumb__item:last-child .el-breadcrumb__inner,.custom-theme .el-breadcrumb__item:last-child .el-breadcrumb__inner a,.custom-theme .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,.custom-theme .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{font-weight:400;color:#5a5e66;cursor:text}.custom-theme .el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.custom-theme .el-form--label-left .el-form-item__label{text-align:left}.custom-theme .el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px 0}.custom-theme .el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}.custom-theme .el-form--inline .el-form-item__label{float:none;display:inline-block}.custom-theme .el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}.custom-theme .el-form--inline.el-form--label-top .el-form-item__content{display:block}.custom-theme .el-form-item{margin-bottom:22px}.custom-theme .el-form-item::after,.custom-theme .el-form-item::before{display:table;content:""}.custom-theme .el-form-item::after{clear:both}.custom-theme .el-form-item .el-form-item{margin-bottom:0}.custom-theme .el-form-item .el-input__validateIcon{display:none}.custom-theme .el-form-item--medium .el-form-item__label{line-height:36px}.custom-theme .el-form-item--medium .el-form-item__content{line-height:36px}.custom-theme .el-form-item--small .el-form-item__label{line-height:32px}.custom-theme .el-form-item--small .el-form-item__content{line-height:32px}.custom-theme .el-form-item--small.el-form-item{margin-bottom:18px}.custom-theme .el-form-item--small .el-form-item__error{padding-top:2px}.custom-theme .el-form-item--mini .el-form-item__label{line-height:28px}.custom-theme .el-form-item--mini .el-form-item__content{line-height:28px}.custom-theme .el-form-item--mini.el-form-item{margin-bottom:18px}.custom-theme .el-form-item--mini .el-form-item__error{padding-top:1px}.custom-theme .el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#5a5e66;line-height:40px;padding:0 12px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-form-item__content{line-height:40px;position:relative;font-size:14px}.custom-theme .el-form-item__content::after,.custom-theme .el-form-item__content::before{display:table;content:""}.custom-theme .el-form-item__content::after{clear:both}.custom-theme .el-form-item__error{color:#b3450e;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.custom-theme .el-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;margin-left:10px}.custom-theme .el-form-item.is-required .el-form-item__label:before{content:'*';color:#b3450e;margin-right:4px}.custom-theme .el-form-item.is-error .el-input__inner,.custom-theme .el-form-item.is-error .el-input__inner:focus,.custom-theme .el-form-item.is-error .el-textarea__inner,.custom-theme .el-form-item.is-error .el-textarea__inner:focus{border-color:#b3450e}.custom-theme .el-form-item.is-error .el-input-group__append .el-input__inner,.custom-theme .el-form-item.is-error .el-input-group__prepend .el-input__inner{border-color:transparent}.custom-theme .el-form-item.is-error .el-input__validateIcon{color:#b3450e}.custom-theme .el-form-item.is-success .el-input__inner,.custom-theme .el-form-item.is-success .el-input__inner:focus,.custom-theme .el-form-item.is-success .el-textarea__inner,.custom-theme .el-form-item.is-success .el-textarea__inner:focus{border-color:#409167}.custom-theme .el-form-item.is-success .el-input-group__append .el-input__inner,.custom-theme .el-form-item.is-success .el-input-group__prepend .el-input__inner{border-color:transparent}.custom-theme .el-form-item.is-success .el-input__validateIcon{color:#409167}.custom-theme .el-form-item--feedback .el-input__validateIcon{display:inline-block}.custom-theme .el-tabs__header{padding:0;position:relative;margin:0 0 15px}.custom-theme .el-tabs__active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#262729;z-index:1;-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.custom-theme .el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:18px;width:18px;line-height:18px;margin:12px 0 9px 10px;border-radius:3px;text-align:center;font-size:12px;color:#d3dce6;cursor:pointer;-webkit-transition:all .15s;transition:all .15s}.custom-theme .el-tabs__new-tab .el-icon-plus{-webkit-transform:scale(.8,.8);transform:scale(.8,.8)}.custom-theme .el-tabs__new-tab:hover{color:#262729}.custom-theme .el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.custom-theme .el-tabs__nav-wrap::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:#dfe4ed;z-index:1}.custom-theme .el-tabs__nav-wrap.is-scrollable{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-tabs__nav-scroll{overflow:hidden}.custom-theme .el-tabs__nav-next,.custom-theme .el-tabs__nav-prev{position:absolute;cursor:pointer;line-height:44px;font-size:12px;color:#878d99}.custom-theme .el-tabs__nav-next{right:0}.custom-theme .el-tabs__nav-prev{left:0}.custom-theme .el-tabs__nav{white-space:nowrap;position:relative;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;float:left;z-index:2}.custom-theme .el-tabs__item{padding:0 20px;height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:500;color:#2d2f33;position:relative}.custom-theme .el-tabs__item:focus,.custom-theme .el-tabs__item:focus:active{outline:0}.custom-theme .el-tabs__item .el-icon-close{border-radius:50%;text-align:center;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.custom-theme .el-tabs__item .el-icon-close:before{-webkit-transform:scale(.9);transform:scale(.9);display:inline-block}.custom-theme .el-tabs__item .el-icon-close:hover{background-color:#b4bccc;color:#fff}.custom-theme .el-tabs__item.is-active{color:#262729}.custom-theme .el-tabs__item:hover{color:#262729;cursor:pointer}.custom-theme .el-tabs__item.is-disabled{color:#b4bccc;cursor:default}.custom-theme .el-tabs__content{overflow:hidden;position:relative}.custom-theme .el-tabs--card>.el-tabs__header{border-bottom:1px solid #dfe4ed}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__nav-wrap::after{content:none}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__nav{border:1px solid #dfe4ed;border-bottom:none;border-radius:4px 4px 0 0}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__active-bar{display:none}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__item{border-bottom:1px solid transparent;border-left:1px solid #dfe4ed;-webkit-transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{border-left:none}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-left:13px;padding-right:13px}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border-bottom-color:#fff}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-left:20px;padding-right:20px}.custom-theme .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close{width:14px}.custom-theme .el-tabs--border-card{background:#fff;border:1px solid #d8dce5;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04);box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.custom-theme .el-tabs--border-card>.el-tabs__content{padding:15px}.custom-theme .el-tabs--border-card>.el-tabs__header{background-color:#f5f7fa;border-bottom:1px solid #dfe4ed;margin:0}.custom-theme .el-tabs--border-card>.el-tabs__header .el-tabs__nav-wrap::after{content:none}.custom-theme .el-tabs--border-card>.el-tabs__header .el-tabs__item{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;margin:-1px -1px 0;color:#878d99}.custom-theme .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{color:#262729;background-color:#fff;border-right-color:#d8dce5;border-left-color:#d8dce5}.custom-theme .el-tabs--border-card>.el-tabs__header .el-tabs__item:hover{color:#262729}.custom-theme .el-tabs--bottom:not(.el-tabs--border-card):not(.el-tabs--card) .el-tabs__item:nth-child(2),.custom-theme .el-tabs--top:not(.el-tabs--border-card):not(.el-tabs--card) .el-tabs__item:nth-child(2){padding-left:0}.custom-theme .el-tabs--bottom .el-tabs__header{margin-bottom:0;margin-top:10px}.custom-theme .el-tabs--bottom.el-tabs--border-card .el-tabs__header{border-bottom:0;border-top:1px solid #d8dce5}.custom-theme .el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap{margin-top:-1px;margin-bottom:0}.custom-theme .el-tabs--bottom.el-tabs--border-card .el-tabs__item{border:1px solid transparent;margin:0 -1px -1px -1px}.custom-theme .el-tabs--left,.custom-theme .el-tabs--right{overflow:hidden}.custom-theme .el-tabs--left .el-tabs__header,.custom-theme .el-tabs--left .el-tabs__nav-scroll,.custom-theme .el-tabs--left .el-tabs__nav-wrap,.custom-theme .el-tabs--right .el-tabs__header,.custom-theme .el-tabs--right .el-tabs__nav-scroll,.custom-theme .el-tabs--right .el-tabs__nav-wrap{height:100%}.custom-theme .el-tabs--left .el-tabs__active-bar,.custom-theme .el-tabs--right .el-tabs__active-bar{top:0;bottom:auto;width:2px;height:auto}.custom-theme .el-tabs--left .el-tabs__nav-wrap,.custom-theme .el-tabs--right .el-tabs__nav-wrap{margin-bottom:0}.custom-theme .el-tabs--left .el-tabs__nav-wrap.is-scrollable,.custom-theme .el-tabs--right .el-tabs__nav-wrap.is-scrollable{padding:30px 0}.custom-theme .el-tabs--left .el-tabs__nav-wrap::after,.custom-theme .el-tabs--right .el-tabs__nav-wrap::after{height:100%;width:2px;bottom:auto;top:0}.custom-theme .el-tabs--left .el-tabs__nav,.custom-theme .el-tabs--right .el-tabs__nav{float:none}.custom-theme .el-tabs--left .el-tabs__item,.custom-theme .el-tabs--right .el-tabs__item{display:block}.custom-theme .el-tabs--left .el-tabs__nav-next,.custom-theme .el-tabs--left .el-tabs__nav-prev,.custom-theme .el-tabs--right .el-tabs__nav-next,.custom-theme .el-tabs--right .el-tabs__nav-prev{height:30px;line-height:30px;width:100%;text-align:center;cursor:pointer}.custom-theme .el-tabs--left .el-tabs__nav-next i,.custom-theme .el-tabs--left .el-tabs__nav-prev i,.custom-theme .el-tabs--right .el-tabs__nav-next i,.custom-theme .el-tabs--right .el-tabs__nav-prev i{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.custom-theme .el-tabs--left .el-tabs__nav-prev,.custom-theme .el-tabs--right .el-tabs__nav-prev{left:auto;top:0}.custom-theme .el-tabs--left .el-tabs__nav-next,.custom-theme .el-tabs--right .el-tabs__nav-next{right:auto;bottom:0}.custom-theme .el-tabs--left .el-tabs__header{float:left;margin-bottom:0;margin-right:10px}.custom-theme .el-tabs--left .el-tabs__nav-wrap{margin-right:-1px}.custom-theme .el-tabs--left .el-tabs__nav-wrap::after{left:auto;right:0}.custom-theme .el-tabs--left .el-tabs__active-bar{right:0;left:auto}.custom-theme .el-tabs--left .el-tabs__item{text-align:right}.custom-theme .el-tabs--left.el-tabs--card .el-tabs__active-bar{display:none}.custom-theme .el-tabs--left.el-tabs--card .el-tabs__item{border-left:none;border-right:1px solid #dfe4ed;border-bottom:none;border-top:1px solid #dfe4ed}.custom-theme .el-tabs--left.el-tabs--card .el-tabs__item:first-child{border-right:1px solid #dfe4ed;border-top:none}.custom-theme .el-tabs--left.el-tabs--card .el-tabs__item.is-active{border:1px solid #dfe4ed;border-right-color:#fff;border-left:none;border-bottom:none}.custom-theme .el-tabs--left.el-tabs--card .el-tabs__item.is-active:first-child{border-top:none}.custom-theme .el-tabs--left.el-tabs--card .el-tabs__item.is-active:last-child{border-bottom:none}.custom-theme .el-tabs--left.el-tabs--card .el-tabs__nav{border-radius:4px 0 0 4px;border-bottom:1px solid #dfe4ed;border-right:none}.custom-theme .el-tabs--left.el-tabs--card .el-tabs__new-tab{float:none}.custom-theme .el-tabs--left.el-tabs--border-card .el-tabs__header{border-right:1px solid #dfe4ed}.custom-theme .el-tabs--left.el-tabs--border-card .el-tabs__item{border:1px solid transparent;margin:-1px 0 -1px -1px}.custom-theme .el-tabs--left.el-tabs--border-card .el-tabs__item.is-active{border-color:transparent;border-top-color:#d1dbe5;border-bottom-color:#d1dbe5}.custom-theme .el-tabs--right .el-tabs__header{float:right;margin-bottom:0;margin-left:10px}.custom-theme .el-tabs--right .el-tabs__nav-wrap{margin-left:-1px}.custom-theme .el-tabs--right .el-tabs__nav-wrap::after{left:0;right:auto}.custom-theme .el-tabs--right .el-tabs__active-bar{left:0}.custom-theme .el-tabs--right.el-tabs--card .el-tabs__active-bar{display:none}.custom-theme .el-tabs--right.el-tabs--card .el-tabs__item{border-bottom:none;border-top:1px solid #dfe4ed}.custom-theme .el-tabs--right.el-tabs--card .el-tabs__item:first-child{border-left:1px solid #dfe4ed;border-top:none}.custom-theme .el-tabs--right.el-tabs--card .el-tabs__item.is-active{border:1px solid #dfe4ed;border-left-color:#fff;border-right:none;border-bottom:none}.custom-theme .el-tabs--right.el-tabs--card .el-tabs__item.is-active:first-child{border-top:none}.custom-theme .el-tabs--right.el-tabs--card .el-tabs__item.is-active:last-child{border-bottom:none}.custom-theme .el-tabs--right.el-tabs--card .el-tabs__nav{border-radius:0 4px 4px 0;border-bottom:1px solid #dfe4ed;border-left:none}.custom-theme .el-tabs--right.el-tabs--border-card .el-tabs__header{border-left:1px solid #dfe4ed}.custom-theme .el-tabs--right.el-tabs--border-card .el-tabs__item{border:1px solid transparent;margin:-1px -1px -1px 0}.custom-theme .el-tabs--right.el-tabs--border-card .el-tabs__item.is-active{border-color:transparent;border-top-color:#d1dbe5;border-bottom-color:#d1dbe5}.custom-theme .slideInLeft-transition,.custom-theme .slideInRight-transition{display:inline-block}.custom-theme .slideInRight-enter{-webkit-animation:slideInRight-enter .3s;animation:slideInRight-enter .3s}.custom-theme .slideInRight-leave{position:absolute;left:0;right:0;-webkit-animation:slideInRight-leave .3s;animation:slideInRight-leave .3s}.custom-theme .slideInLeft-enter{-webkit-animation:slideInLeft-enter .3s;animation:slideInLeft-enter .3s}.custom-theme .slideInLeft-leave{position:absolute;left:0;right:0;-webkit-animation:slideInLeft-leave .3s;animation:slideInLeft-leave .3s}@-webkit-keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}}@keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}}@-webkit-keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}@keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}.custom-theme .el-tag{background-color:rgba(38,39,41,.1);display:inline-block;padding:0 10px;height:32px;line-height:30px;font-size:12px;color:#262729;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid rgba(38,39,41,.2);white-space:nowrap}.custom-theme .el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-5px;color:#262729}.custom-theme .el-tag .el-icon-close::before{display:block}.custom-theme .el-tag .el-icon-close:hover{background-color:#262729;color:#fff}.custom-theme .el-tag--info{background-color:rgba(10,118,164,.1);border-color:rgba(10,118,164,.2);color:#0a76a4}.custom-theme .el-tag--info.is-hit{border-color:#0a76a4}.custom-theme .el-tag--info .el-tag__close{color:#0a76a4}.custom-theme .el-tag--info .el-tag__close:hover{background-color:#0a76a4;color:#fff}.custom-theme .el-tag--success{background-color:rgba(64,145,103,.1);border-color:rgba(64,145,103,.2);color:#409167}.custom-theme .el-tag--success.is-hit{border-color:#409167}.custom-theme .el-tag--success .el-tag__close{color:#409167}.custom-theme .el-tag--success .el-tag__close:hover{background-color:#409167;color:#fff}.custom-theme .el-tag--warning{background-color:rgba(157,164,8,.1);border-color:rgba(157,164,8,.2);color:#9da408}.custom-theme .el-tag--warning.is-hit{border-color:#9da408}.custom-theme .el-tag--warning .el-tag__close{color:#9da408}.custom-theme .el-tag--warning .el-tag__close:hover{background-color:#9da408;color:#fff}.custom-theme .el-tag--danger{background-color:rgba(179,69,14,.1);border-color:rgba(179,69,14,.2);color:#b3450e}.custom-theme .el-tag--danger.is-hit{border-color:#b3450e}.custom-theme .el-tag--danger .el-tag__close{color:#b3450e}.custom-theme .el-tag--danger .el-tag__close:hover{background-color:#b3450e;color:#fff}.custom-theme .el-tag--medium{height:28px;line-height:26px}.custom-theme .el-tag--medium .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--small{height:24px;padding:0 8px;line-height:22px}.custom-theme .el-tag--small .el-icon-close{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-tag--mini{height:20px;padding:0 5px;line-height:19px}.custom-theme .el-tag--mini .el-icon-close{margin-left:-3px;-webkit-transform:scale(.7);transform:scale(.7)}.custom-theme .el-tree{cursor:default;background:#fff;color:#5a5e66}.custom-theme .el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.custom-theme .el-tree__empty-text{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#623615}.custom-theme .el-tree-node{white-space:nowrap}.custom-theme .el-tree-node__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:26px;cursor:pointer}.custom-theme .el-tree-node__content>.el-tree-node__expand-icon{padding:6px}.custom-theme .el-tree-node__content>.el-checkbox{margin-right:8px}.custom-theme .el-tree-node__content:hover{background-color:#f5f7fa}.custom-theme .el-tree-node__expand-icon{cursor:pointer;color:#b4bccc;font-size:12px;-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.custom-theme .el-tree-node__expand-icon.expanded{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.custom-theme .el-tree-node__expand-icon.is-leaf{color:transparent;cursor:default}.custom-theme .el-tree-node__label{font-size:14px}.custom-theme .el-tree-node__loading-icon{margin-right:8px;font-size:14px;color:#b4bccc}.custom-theme .el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.custom-theme .el-tree-node.is-expanded>.el-tree-node__children{display:block}.custom-theme .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#eee}.custom-theme .el-alert{width:100%;padding:8px 16px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;opacity:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s;transition:opacity .2s}.custom-theme .el-alert.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.custom-theme .el-alert--success{background-color:#ecf4f0;color:#409167}.custom-theme .el-alert--success .el-alert__description{color:#409167}.custom-theme .el-alert--info{background-color:#e7f1f6;color:#0a76a4}.custom-theme .el-alert--info .el-alert__description{color:#0a76a4}.custom-theme .el-alert--warning{background-color:#f5f6e6;color:#9da408}.custom-theme .el-alert--warning .el-alert__description{color:#9da408}.custom-theme .el-alert--error{background-color:#f7ece7;color:#b3450e}.custom-theme .el-alert--error .el-alert__description{color:#b3450e}.custom-theme .el-alert__content{display:table-cell;padding:0 8px}.custom-theme .el-alert__icon{font-size:16px;width:16px}.custom-theme .el-alert__icon.is-big{font-size:28px;width:28px}.custom-theme .el-alert__title{font-size:13px;line-height:18px}.custom-theme .el-alert__title.is-bold{font-weight:700}.custom-theme .el-alert .el-alert__description{font-size:12px;margin:5px 0 0 0}.custom-theme .el-alert__closebtn{font-size:12px;color:#b4bccc;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.custom-theme .el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.custom-theme .el-alert-fade-enter,.custom-theme .el-alert-fade-leave-active{opacity:0}.custom-theme .el-notification{display:-webkit-box;display:-ms-flexbox;display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #e6ebf5;position:fixed;background-color:#fff;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;overflow:hidden}.custom-theme .el-notification.right{right:16px}.custom-theme .el-notification.left{left:16px}.custom-theme .el-notification__group{margin-left:13px}.custom-theme .el-notification__title{font-weight:700;font-size:16px;color:#2d2f33;margin:0}.custom-theme .el-notification__content{font-size:14px;line-height:21px;margin:6px 0 0 0;color:#5a5e66;text-align:justify}.custom-theme .el-notification__content p{margin:0}.custom-theme .el-notification__icon{height:24px;width:24px;font-size:24px;-webkit-transform:translateY(4px);transform:translateY(4px)}.custom-theme .el-notification__closeBtn{position:absolute;top:15px;right:15px;cursor:pointer;color:#878d99;font-size:16px}.custom-theme .el-notification__closeBtn:hover{color:#5a5e66}.custom-theme .el-notification .el-icon-success{color:#409167}.custom-theme .el-notification .el-icon-error{color:#b3450e}.custom-theme .el-notification .el-icon-info{color:#0a76a4}.custom-theme .el-notification .el-icon-warning{color:#9da408}.custom-theme .el-notification-fade-enter.right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.custom-theme .el-notification-fade-enter.left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.custom-theme .el-notification-fade-leave-active{opacity:0}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-input-number{position:relative;display:inline-block;width:180px;line-height:38px}.custom-theme .el-input-number .el-input{display:block}.custom-theme .el-input-number .el-input__inner{-webkit-appearance:none;padding-left:50px;padding-right:50px;text-align:center}.custom-theme .el-input-number__decrease,.custom-theme .el-input-number__increase{position:absolute;z-index:1;top:1px;width:40px;height:auto;text-align:center;background:#f5f7fa;color:#5a5e66;cursor:pointer;font-size:13px}.custom-theme .el-input-number__decrease:hover,.custom-theme .el-input-number__increase:hover{color:#262729}.custom-theme .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.custom-theme .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#262729}.custom-theme .el-input-number__decrease.is-disabled,.custom-theme .el-input-number__increase.is-disabled{color:#b4bccc;cursor:not-allowed}.custom-theme .el-input-number__increase{right:1px;border-radius:0 4px 4px 0;border-left:1px solid #d8dce5}.custom-theme .el-input-number__decrease{left:1px;border-radius:4px 0 0 4px;border-right:1px solid #d8dce5}.custom-theme .el-input-number.is-disabled .el-input-number__decrease,.custom-theme .el-input-number.is-disabled .el-input-number__increase{border-color:#dfe4ed;color:#dfe4ed}.custom-theme .el-input-number.is-disabled .el-input-number__decrease:hover,.custom-theme .el-input-number.is-disabled .el-input-number__increase:hover{color:#dfe4ed;cursor:not-allowed}.custom-theme .el-input-number--medium{width:200px;line-height:34px}.custom-theme .el-input-number--medium .el-input-number__decrease,.custom-theme .el-input-number--medium .el-input-number__increase{width:36px;font-size:14px}.custom-theme .el-input-number--medium .el-input__inner{padding-left:43px;padding-right:43px}.custom-theme .el-input-number--small{width:130px;line-height:30px}.custom-theme .el-input-number--small .el-input-number__decrease,.custom-theme .el-input-number--small .el-input-number__increase{width:32px;font-size:13px}.custom-theme .el-input-number--small .el-input-number__decrease [class*=el-icon],.custom-theme .el-input-number--small .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.9);transform:scale(.9)}.custom-theme .el-input-number--small .el-input__inner{padding-left:39px;padding-right:39px}.custom-theme .el-input-number--mini{width:130px;line-height:26px}.custom-theme .el-input-number--mini .el-input-number__decrease,.custom-theme .el-input-number--mini .el-input-number__increase{width:28px;font-size:12px}.custom-theme .el-input-number--mini .el-input-number__decrease [class*=el-icon],.custom-theme .el-input-number--mini .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-input-number--mini .el-input__inner{padding-left:35px;padding-right:35px}.custom-theme .el-input-number.is-without-controls .el-input__inner{padding-left:15px;padding-right:15px}.custom-theme .el-input-number.is-controls-right .el-input__inner{padding-left:15px;padding-right:50px}.custom-theme .el-input-number.is-controls-right .el-input-number__decrease,.custom-theme .el-input-number.is-controls-right .el-input-number__increase{height:auto;line-height:19px}.custom-theme .el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon],.custom-theme .el-input-number.is-controls-right .el-input-number__increase [class*=el-icon]{-webkit-transform:scale(.8);transform:scale(.8)}.custom-theme .el-input-number.is-controls-right .el-input-number__increase{border-radius:0 4px 0 0;border-bottom:1px solid #d8dce5}.custom-theme .el-input-number.is-controls-right .el-input-number__decrease{right:1px;bottom:1px;top:auto;left:auto;border-right:none;border-left:1px solid #d8dce5;border-radius:0 0 4px 0}.custom-theme .el-input-number.is-controls-right[class*=medium] [class*=decrease],.custom-theme .el-input-number.is-controls-right[class*=medium] [class*=increase]{line-height:17px}.custom-theme .el-input-number.is-controls-right[class*=small] [class*=decrease],.custom-theme .el-input-number.is-controls-right[class*=small] [class*=increase]{line-height:15px}.custom-theme .el-input-number.is-controls-right[class*=mini] [class*=decrease],.custom-theme .el-input-number.is-controls-right[class*=mini] [class*=increase]{line-height:13px}.custom-theme .el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2}.custom-theme .el-tooltip__popper .popper__arrow,.custom-theme .el-tooltip__popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-tooltip__popper .popper__arrow{border-width:6px}.custom-theme .el-tooltip__popper .popper__arrow::after{content:" ";border-width:5px}.custom-theme .el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#2d2f33;border-bottom-width:0}.custom-theme .el-tooltip__popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-5px;border-top-color:#2d2f33;border-bottom-width:0}.custom-theme .el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#2d2f33}.custom-theme .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#2d2f33}.custom-theme .el-tooltip__popper[x-placement^=right]{margin-left:12px}.custom-theme .el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#2d2f33;border-left-width:0}.custom-theme .el-tooltip__popper[x-placement^=right] .popper__arrow::after{bottom:-5px;left:1px;border-right-color:#2d2f33;border-left-width:0}.custom-theme .el-tooltip__popper[x-placement^=left]{margin-right:12px}.custom-theme .el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#2d2f33}.custom-theme .el-tooltip__popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#2d2f33}.custom-theme .el-tooltip__popper.is-dark{background:#2d2f33;color:#fff}.custom-theme .el-tooltip__popper.is-light{background:#fff;border:1px solid #2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after{border-top-color:#fff}.custom-theme .el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow::after{border-bottom-color:#fff}.custom-theme .el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=left] .popper__arrow::after{border-left-color:#fff}.custom-theme .el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#2d2f33}.custom-theme .el-tooltip__popper.is-light[x-placement^=right] .popper__arrow::after{border-right-color:#fff}.custom-theme .el-slider::after,.custom-theme .el-slider::before{display:table;content:""}.custom-theme .el-slider::after{clear:both}.custom-theme .el-slider__runway{width:100%;height:6px;margin:16px 0;background-color:#dfe4ed;border-radius:3px;position:relative;cursor:pointer;vertical-align:middle}.custom-theme .el-slider__runway.show-input{margin-right:160px;width:auto}.custom-theme .el-slider__runway.disabled{cursor:default}.custom-theme .el-slider__runway.disabled .el-slider__bar{background-color:#b4bccc}.custom-theme .el-slider__runway.disabled .el-slider__button{border-color:#b4bccc}.custom-theme .el-slider__runway.disabled .el-slider__button-wrapper.hover,.custom-theme .el-slider__runway.disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.custom-theme .el-slider__runway.disabled .el-slider__button-wrapper.dragging{cursor:not-allowed}.custom-theme .el-slider__runway.disabled .el-slider__button.dragging,.custom-theme .el-slider__runway.disabled .el-slider__button.hover,.custom-theme .el-slider__runway.disabled .el-slider__button:hover{-webkit-transform:scale(1);transform:scale(1)}.custom-theme .el-slider__runway.disabled .el-slider__button.hover,.custom-theme .el-slider__runway.disabled .el-slider__button:hover{cursor:not-allowed}.custom-theme .el-slider__runway.disabled .el-slider__button.dragging{cursor:not-allowed}.custom-theme .el-slider__input{float:right;margin-top:3px}.custom-theme .el-slider__bar{height:6px;background-color:#262729;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.custom-theme .el-slider__button-wrapper{height:36px;width:36px;position:absolute;z-index:1001;top:-15px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-slider__button-wrapper::after{display:inline-block;content:"";height:100%;vertical-align:middle}.custom-theme .el-slider__button-wrapper .el-tooltip{vertical-align:middle;display:inline-block}.custom-theme .el-slider__button-wrapper.hover,.custom-theme .el-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.custom-theme .el-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.custom-theme .el-slider__button{width:16px;height:16px;border:solid 2px #262729;background-color:#fff;border-radius:50%;-webkit-transition:.2s;transition:.2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-slider__button.dragging,.custom-theme .el-slider__button.hover,.custom-theme .el-slider__button:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.custom-theme .el-slider__button.hover,.custom-theme .el-slider__button:hover{cursor:-webkit-grab;cursor:grab}.custom-theme .el-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.custom-theme .el-slider__stop{position:absolute;height:6px;width:6px;border-radius:100%;background-color:#fff;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.custom-theme .el-slider.is-vertical{position:relative}.custom-theme .el-slider.is-vertical .el-slider__runway{width:4px;height:100%;margin:0 16px}.custom-theme .el-slider.is-vertical .el-slider__bar{width:4px;height:auto;border-radius:0 0 3px 3px}.custom-theme .el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-15px;-webkit-transform:translateY(50%);transform:translateY(50%)}.custom-theme .el-slider.is-vertical .el-slider__stop{-webkit-transform:translateY(50%);transform:translateY(50%)}.custom-theme .el-slider.is-vertical.el-slider--with-input{padding-bottom:58px}.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input{overflow:visible;float:none;position:absolute;bottom:22px;width:36px;margin-top:15px}.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner{text-align:center;padding-left:5px;padding-right:5px}.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease,.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{top:32px;margin-top:-1px;border:1px solid #d8dce5;line-height:20px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease{width:18px;right:18px;border-bottom-left-radius:4px}.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{width:19px;border-bottom-right-radius:4px}.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase~.el-input .el-input__inner{border-bottom-left-radius:0;border-bottom-right-radius:0}.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease,.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase{border-color:#b4bccc}.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease,.custom-theme .el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase{border-color:#262729}.custom-theme .el-loading-parent--relative{position:relative!important}.custom-theme .el-loading-parent--hidden{overflow:hidden!important}.custom-theme .el-loading-mask{position:absolute;z-index:10000;background-color:rgba(255,255,255,.9);margin:0;top:0;right:0;bottom:0;left:0;-webkit-transition:opacity .3s;transition:opacity .3s}.custom-theme .el-loading-mask.is-fullscreen{position:fixed}.custom-theme .el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.custom-theme .el-loading-mask.is-fullscreen .el-loading-spinner .circular{height:50px;width:50px}.custom-theme .el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.custom-theme .el-loading-spinner .el-loading-text{color:#262729;margin:3px 0;font-size:14px}.custom-theme .el-loading-spinner .circular{height:42px;width:42px;-webkit-animation:loading-rotate 2s linear infinite;animation:loading-rotate 2s linear infinite}.custom-theme .el-loading-spinner .path{-webkit-animation:loading-dash 1.5s ease-in-out infinite;animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#262729;stroke-linecap:round}.custom-theme .el-loading-spinner i{color:#262729}.custom-theme .el-loading-fade-enter,.custom-theme .el-loading-fade-leave-active{opacity:0}@-webkit-keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.custom-theme .el-row{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-row::after,.custom-theme .el-row::before{display:table;content:""}.custom-theme .el-row::after{clear:both}.custom-theme .el-row--flex{display:-webkit-box;display:-ms-flexbox;display:flex}.custom-theme .el-row--flex:after,.custom-theme .el-row--flex:before{display:none}.custom-theme .el-row--flex.is-justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.custom-theme .el-row--flex.is-justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.custom-theme .el-row--flex.is-justify-space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.custom-theme .el-row--flex.is-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.custom-theme .el-row--flex.is-align-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.custom-theme .el-row--flex.is-align-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.custom-theme [class*=el-col-]{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-col-0{display:none}.custom-theme .el-col-1{width:4.16667%}.custom-theme .el-col-offset-1{margin-left:4.16667%}.custom-theme .el-col-pull-1{position:relative;right:4.16667%}.custom-theme .el-col-push-1{position:relative;left:4.16667%}.custom-theme .el-col-2{width:8.33333%}.custom-theme .el-col-offset-2{margin-left:8.33333%}.custom-theme .el-col-pull-2{position:relative;right:8.33333%}.custom-theme .el-col-push-2{position:relative;left:8.33333%}.custom-theme .el-col-3{width:12.5%}.custom-theme .el-col-offset-3{margin-left:12.5%}.custom-theme .el-col-pull-3{position:relative;right:12.5%}.custom-theme .el-col-push-3{position:relative;left:12.5%}.custom-theme .el-col-4{width:16.66667%}.custom-theme .el-col-offset-4{margin-left:16.66667%}.custom-theme .el-col-pull-4{position:relative;right:16.66667%}.custom-theme .el-col-push-4{position:relative;left:16.66667%}.custom-theme .el-col-5{width:20.83333%}.custom-theme .el-col-offset-5{margin-left:20.83333%}.custom-theme .el-col-pull-5{position:relative;right:20.83333%}.custom-theme .el-col-push-5{position:relative;left:20.83333%}.custom-theme .el-col-6{width:25%}.custom-theme .el-col-offset-6{margin-left:25%}.custom-theme .el-col-pull-6{position:relative;right:25%}.custom-theme .el-col-push-6{position:relative;left:25%}.custom-theme .el-col-7{width:29.16667%}.custom-theme .el-col-offset-7{margin-left:29.16667%}.custom-theme .el-col-pull-7{position:relative;right:29.16667%}.custom-theme .el-col-push-7{position:relative;left:29.16667%}.custom-theme .el-col-8{width:33.33333%}.custom-theme .el-col-offset-8{margin-left:33.33333%}.custom-theme .el-col-pull-8{position:relative;right:33.33333%}.custom-theme .el-col-push-8{position:relative;left:33.33333%}.custom-theme .el-col-9{width:37.5%}.custom-theme .el-col-offset-9{margin-left:37.5%}.custom-theme .el-col-pull-9{position:relative;right:37.5%}.custom-theme .el-col-push-9{position:relative;left:37.5%}.custom-theme .el-col-10{width:41.66667%}.custom-theme .el-col-offset-10{margin-left:41.66667%}.custom-theme .el-col-pull-10{position:relative;right:41.66667%}.custom-theme .el-col-push-10{position:relative;left:41.66667%}.custom-theme .el-col-11{width:45.83333%}.custom-theme .el-col-offset-11{margin-left:45.83333%}.custom-theme .el-col-pull-11{position:relative;right:45.83333%}.custom-theme .el-col-push-11{position:relative;left:45.83333%}.custom-theme .el-col-12{width:50%}.custom-theme .el-col-offset-12{margin-left:50%}.custom-theme .el-col-pull-12{position:relative;right:50%}.custom-theme .el-col-push-12{position:relative;left:50%}.custom-theme .el-col-13{width:54.16667%}.custom-theme .el-col-offset-13{margin-left:54.16667%}.custom-theme .el-col-pull-13{position:relative;right:54.16667%}.custom-theme .el-col-push-13{position:relative;left:54.16667%}.custom-theme .el-col-14{width:58.33333%}.custom-theme .el-col-offset-14{margin-left:58.33333%}.custom-theme .el-col-pull-14{position:relative;right:58.33333%}.custom-theme .el-col-push-14{position:relative;left:58.33333%}.custom-theme .el-col-15{width:62.5%}.custom-theme .el-col-offset-15{margin-left:62.5%}.custom-theme .el-col-pull-15{position:relative;right:62.5%}.custom-theme .el-col-push-15{position:relative;left:62.5%}.custom-theme .el-col-16{width:66.66667%}.custom-theme .el-col-offset-16{margin-left:66.66667%}.custom-theme .el-col-pull-16{position:relative;right:66.66667%}.custom-theme .el-col-push-16{position:relative;left:66.66667%}.custom-theme .el-col-17{width:70.83333%}.custom-theme .el-col-offset-17{margin-left:70.83333%}.custom-theme .el-col-pull-17{position:relative;right:70.83333%}.custom-theme .el-col-push-17{position:relative;left:70.83333%}.custom-theme .el-col-18{width:75%}.custom-theme .el-col-offset-18{margin-left:75%}.custom-theme .el-col-pull-18{position:relative;right:75%}.custom-theme .el-col-push-18{position:relative;left:75%}.custom-theme .el-col-19{width:79.16667%}.custom-theme .el-col-offset-19{margin-left:79.16667%}.custom-theme .el-col-pull-19{position:relative;right:79.16667%}.custom-theme .el-col-push-19{position:relative;left:79.16667%}.custom-theme .el-col-20{width:83.33333%}.custom-theme .el-col-offset-20{margin-left:83.33333%}.custom-theme .el-col-pull-20{position:relative;right:83.33333%}.custom-theme .el-col-push-20{position:relative;left:83.33333%}.custom-theme .el-col-21{width:87.5%}.custom-theme .el-col-offset-21{margin-left:87.5%}.custom-theme .el-col-pull-21{position:relative;right:87.5%}.custom-theme .el-col-push-21{position:relative;left:87.5%}.custom-theme .el-col-22{width:91.66667%}.custom-theme .el-col-offset-22{margin-left:91.66667%}.custom-theme .el-col-pull-22{position:relative;right:91.66667%}.custom-theme .el-col-push-22{position:relative;left:91.66667%}.custom-theme .el-col-23{width:95.83333%}.custom-theme .el-col-offset-23{margin-left:95.83333%}.custom-theme .el-col-pull-23{position:relative;right:95.83333%}.custom-theme .el-col-push-23{position:relative;left:95.83333%}.custom-theme .el-col-24{width:100%}.custom-theme .el-col-offset-24{margin-left:100%}.custom-theme .el-col-pull-24{position:relative;right:100%}.custom-theme .el-col-push-24{position:relative;left:100%}@media only screen and (max-width:768px){.custom-theme .el-col-xs-0{display:none}.custom-theme .el-col-xs-1{width:4.16667%}.custom-theme .el-col-xs-offset-1{margin-left:4.16667%}.custom-theme .el-col-xs-pull-1{position:relative;right:4.16667%}.custom-theme .el-col-xs-push-1{position:relative;left:4.16667%}.custom-theme .el-col-xs-2{width:8.33333%}.custom-theme .el-col-xs-offset-2{margin-left:8.33333%}.custom-theme .el-col-xs-pull-2{position:relative;right:8.33333%}.custom-theme .el-col-xs-push-2{position:relative;left:8.33333%}.custom-theme .el-col-xs-3{width:12.5%}.custom-theme .el-col-xs-offset-3{margin-left:12.5%}.custom-theme .el-col-xs-pull-3{position:relative;right:12.5%}.custom-theme .el-col-xs-push-3{position:relative;left:12.5%}.custom-theme .el-col-xs-4{width:16.66667%}.custom-theme .el-col-xs-offset-4{margin-left:16.66667%}.custom-theme .el-col-xs-pull-4{position:relative;right:16.66667%}.custom-theme .el-col-xs-push-4{position:relative;left:16.66667%}.custom-theme .el-col-xs-5{width:20.83333%}.custom-theme .el-col-xs-offset-5{margin-left:20.83333%}.custom-theme .el-col-xs-pull-5{position:relative;right:20.83333%}.custom-theme .el-col-xs-push-5{position:relative;left:20.83333%}.custom-theme .el-col-xs-6{width:25%}.custom-theme .el-col-xs-offset-6{margin-left:25%}.custom-theme .el-col-xs-pull-6{position:relative;right:25%}.custom-theme .el-col-xs-push-6{position:relative;left:25%}.custom-theme .el-col-xs-7{width:29.16667%}.custom-theme .el-col-xs-offset-7{margin-left:29.16667%}.custom-theme .el-col-xs-pull-7{position:relative;right:29.16667%}.custom-theme .el-col-xs-push-7{position:relative;left:29.16667%}.custom-theme .el-col-xs-8{width:33.33333%}.custom-theme .el-col-xs-offset-8{margin-left:33.33333%}.custom-theme .el-col-xs-pull-8{position:relative;right:33.33333%}.custom-theme .el-col-xs-push-8{position:relative;left:33.33333%}.custom-theme .el-col-xs-9{width:37.5%}.custom-theme .el-col-xs-offset-9{margin-left:37.5%}.custom-theme .el-col-xs-pull-9{position:relative;right:37.5%}.custom-theme .el-col-xs-push-9{position:relative;left:37.5%}.custom-theme .el-col-xs-10{width:41.66667%}.custom-theme .el-col-xs-offset-10{margin-left:41.66667%}.custom-theme .el-col-xs-pull-10{position:relative;right:41.66667%}.custom-theme .el-col-xs-push-10{position:relative;left:41.66667%}.custom-theme .el-col-xs-11{width:45.83333%}.custom-theme .el-col-xs-offset-11{margin-left:45.83333%}.custom-theme .el-col-xs-pull-11{position:relative;right:45.83333%}.custom-theme .el-col-xs-push-11{position:relative;left:45.83333%}.custom-theme .el-col-xs-12{width:50%}.custom-theme .el-col-xs-offset-12{margin-left:50%}.custom-theme .el-col-xs-pull-12{position:relative;right:50%}.custom-theme .el-col-xs-push-12{position:relative;left:50%}.custom-theme .el-col-xs-13{width:54.16667%}.custom-theme .el-col-xs-offset-13{margin-left:54.16667%}.custom-theme .el-col-xs-pull-13{position:relative;right:54.16667%}.custom-theme .el-col-xs-push-13{position:relative;left:54.16667%}.custom-theme .el-col-xs-14{width:58.33333%}.custom-theme .el-col-xs-offset-14{margin-left:58.33333%}.custom-theme .el-col-xs-pull-14{position:relative;right:58.33333%}.custom-theme .el-col-xs-push-14{position:relative;left:58.33333%}.custom-theme .el-col-xs-15{width:62.5%}.custom-theme .el-col-xs-offset-15{margin-left:62.5%}.custom-theme .el-col-xs-pull-15{position:relative;right:62.5%}.custom-theme .el-col-xs-push-15{position:relative;left:62.5%}.custom-theme .el-col-xs-16{width:66.66667%}.custom-theme .el-col-xs-offset-16{margin-left:66.66667%}.custom-theme .el-col-xs-pull-16{position:relative;right:66.66667%}.custom-theme .el-col-xs-push-16{position:relative;left:66.66667%}.custom-theme .el-col-xs-17{width:70.83333%}.custom-theme .el-col-xs-offset-17{margin-left:70.83333%}.custom-theme .el-col-xs-pull-17{position:relative;right:70.83333%}.custom-theme .el-col-xs-push-17{position:relative;left:70.83333%}.custom-theme .el-col-xs-18{width:75%}.custom-theme .el-col-xs-offset-18{margin-left:75%}.custom-theme .el-col-xs-pull-18{position:relative;right:75%}.custom-theme .el-col-xs-push-18{position:relative;left:75%}.custom-theme .el-col-xs-19{width:79.16667%}.custom-theme .el-col-xs-offset-19{margin-left:79.16667%}.custom-theme .el-col-xs-pull-19{position:relative;right:79.16667%}.custom-theme .el-col-xs-push-19{position:relative;left:79.16667%}.custom-theme .el-col-xs-20{width:83.33333%}.custom-theme .el-col-xs-offset-20{margin-left:83.33333%}.custom-theme .el-col-xs-pull-20{position:relative;right:83.33333%}.custom-theme .el-col-xs-push-20{position:relative;left:83.33333%}.custom-theme .el-col-xs-21{width:87.5%}.custom-theme .el-col-xs-offset-21{margin-left:87.5%}.custom-theme .el-col-xs-pull-21{position:relative;right:87.5%}.custom-theme .el-col-xs-push-21{position:relative;left:87.5%}.custom-theme .el-col-xs-22{width:91.66667%}.custom-theme .el-col-xs-offset-22{margin-left:91.66667%}.custom-theme .el-col-xs-pull-22{position:relative;right:91.66667%}.custom-theme .el-col-xs-push-22{position:relative;left:91.66667%}.custom-theme .el-col-xs-23{width:95.83333%}.custom-theme .el-col-xs-offset-23{margin-left:95.83333%}.custom-theme .el-col-xs-pull-23{position:relative;right:95.83333%}.custom-theme .el-col-xs-push-23{position:relative;left:95.83333%}.custom-theme .el-col-xs-24{width:100%}.custom-theme .el-col-xs-offset-24{margin-left:100%}.custom-theme .el-col-xs-pull-24{position:relative;right:100%}.custom-theme .el-col-xs-push-24{position:relative;left:100%}}@media only screen and (min-width:768px){.custom-theme .el-col-sm-0{display:none}.custom-theme .el-col-sm-1{width:4.16667%}.custom-theme .el-col-sm-offset-1{margin-left:4.16667%}.custom-theme .el-col-sm-pull-1{position:relative;right:4.16667%}.custom-theme .el-col-sm-push-1{position:relative;left:4.16667%}.custom-theme .el-col-sm-2{width:8.33333%}.custom-theme .el-col-sm-offset-2{margin-left:8.33333%}.custom-theme .el-col-sm-pull-2{position:relative;right:8.33333%}.custom-theme .el-col-sm-push-2{position:relative;left:8.33333%}.custom-theme .el-col-sm-3{width:12.5%}.custom-theme .el-col-sm-offset-3{margin-left:12.5%}.custom-theme .el-col-sm-pull-3{position:relative;right:12.5%}.custom-theme .el-col-sm-push-3{position:relative;left:12.5%}.custom-theme .el-col-sm-4{width:16.66667%}.custom-theme .el-col-sm-offset-4{margin-left:16.66667%}.custom-theme .el-col-sm-pull-4{position:relative;right:16.66667%}.custom-theme .el-col-sm-push-4{position:relative;left:16.66667%}.custom-theme .el-col-sm-5{width:20.83333%}.custom-theme .el-col-sm-offset-5{margin-left:20.83333%}.custom-theme .el-col-sm-pull-5{position:relative;right:20.83333%}.custom-theme .el-col-sm-push-5{position:relative;left:20.83333%}.custom-theme .el-col-sm-6{width:25%}.custom-theme .el-col-sm-offset-6{margin-left:25%}.custom-theme .el-col-sm-pull-6{position:relative;right:25%}.custom-theme .el-col-sm-push-6{position:relative;left:25%}.custom-theme .el-col-sm-7{width:29.16667%}.custom-theme .el-col-sm-offset-7{margin-left:29.16667%}.custom-theme .el-col-sm-pull-7{position:relative;right:29.16667%}.custom-theme .el-col-sm-push-7{position:relative;left:29.16667%}.custom-theme .el-col-sm-8{width:33.33333%}.custom-theme .el-col-sm-offset-8{margin-left:33.33333%}.custom-theme .el-col-sm-pull-8{position:relative;right:33.33333%}.custom-theme .el-col-sm-push-8{position:relative;left:33.33333%}.custom-theme .el-col-sm-9{width:37.5%}.custom-theme .el-col-sm-offset-9{margin-left:37.5%}.custom-theme .el-col-sm-pull-9{position:relative;right:37.5%}.custom-theme .el-col-sm-push-9{position:relative;left:37.5%}.custom-theme .el-col-sm-10{width:41.66667%}.custom-theme .el-col-sm-offset-10{margin-left:41.66667%}.custom-theme .el-col-sm-pull-10{position:relative;right:41.66667%}.custom-theme .el-col-sm-push-10{position:relative;left:41.66667%}.custom-theme .el-col-sm-11{width:45.83333%}.custom-theme .el-col-sm-offset-11{margin-left:45.83333%}.custom-theme .el-col-sm-pull-11{position:relative;right:45.83333%}.custom-theme .el-col-sm-push-11{position:relative;left:45.83333%}.custom-theme .el-col-sm-12{width:50%}.custom-theme .el-col-sm-offset-12{margin-left:50%}.custom-theme .el-col-sm-pull-12{position:relative;right:50%}.custom-theme .el-col-sm-push-12{position:relative;left:50%}.custom-theme .el-col-sm-13{width:54.16667%}.custom-theme .el-col-sm-offset-13{margin-left:54.16667%}.custom-theme .el-col-sm-pull-13{position:relative;right:54.16667%}.custom-theme .el-col-sm-push-13{position:relative;left:54.16667%}.custom-theme .el-col-sm-14{width:58.33333%}.custom-theme .el-col-sm-offset-14{margin-left:58.33333%}.custom-theme .el-col-sm-pull-14{position:relative;right:58.33333%}.custom-theme .el-col-sm-push-14{position:relative;left:58.33333%}.custom-theme .el-col-sm-15{width:62.5%}.custom-theme .el-col-sm-offset-15{margin-left:62.5%}.custom-theme .el-col-sm-pull-15{position:relative;right:62.5%}.custom-theme .el-col-sm-push-15{position:relative;left:62.5%}.custom-theme .el-col-sm-16{width:66.66667%}.custom-theme .el-col-sm-offset-16{margin-left:66.66667%}.custom-theme .el-col-sm-pull-16{position:relative;right:66.66667%}.custom-theme .el-col-sm-push-16{position:relative;left:66.66667%}.custom-theme .el-col-sm-17{width:70.83333%}.custom-theme .el-col-sm-offset-17{margin-left:70.83333%}.custom-theme .el-col-sm-pull-17{position:relative;right:70.83333%}.custom-theme .el-col-sm-push-17{position:relative;left:70.83333%}.custom-theme .el-col-sm-18{width:75%}.custom-theme .el-col-sm-offset-18{margin-left:75%}.custom-theme .el-col-sm-pull-18{position:relative;right:75%}.custom-theme .el-col-sm-push-18{position:relative;left:75%}.custom-theme .el-col-sm-19{width:79.16667%}.custom-theme .el-col-sm-offset-19{margin-left:79.16667%}.custom-theme .el-col-sm-pull-19{position:relative;right:79.16667%}.custom-theme .el-col-sm-push-19{position:relative;left:79.16667%}.custom-theme .el-col-sm-20{width:83.33333%}.custom-theme .el-col-sm-offset-20{margin-left:83.33333%}.custom-theme .el-col-sm-pull-20{position:relative;right:83.33333%}.custom-theme .el-col-sm-push-20{position:relative;left:83.33333%}.custom-theme .el-col-sm-21{width:87.5%}.custom-theme .el-col-sm-offset-21{margin-left:87.5%}.custom-theme .el-col-sm-pull-21{position:relative;right:87.5%}.custom-theme .el-col-sm-push-21{position:relative;left:87.5%}.custom-theme .el-col-sm-22{width:91.66667%}.custom-theme .el-col-sm-offset-22{margin-left:91.66667%}.custom-theme .el-col-sm-pull-22{position:relative;right:91.66667%}.custom-theme .el-col-sm-push-22{position:relative;left:91.66667%}.custom-theme .el-col-sm-23{width:95.83333%}.custom-theme .el-col-sm-offset-23{margin-left:95.83333%}.custom-theme .el-col-sm-pull-23{position:relative;right:95.83333%}.custom-theme .el-col-sm-push-23{position:relative;left:95.83333%}.custom-theme .el-col-sm-24{width:100%}.custom-theme .el-col-sm-offset-24{margin-left:100%}.custom-theme .el-col-sm-pull-24{position:relative;right:100%}.custom-theme .el-col-sm-push-24{position:relative;left:100%}}@media only screen and (min-width:992px){.custom-theme .el-col-md-0{display:none}.custom-theme .el-col-md-1{width:4.16667%}.custom-theme .el-col-md-offset-1{margin-left:4.16667%}.custom-theme .el-col-md-pull-1{position:relative;right:4.16667%}.custom-theme .el-col-md-push-1{position:relative;left:4.16667%}.custom-theme .el-col-md-2{width:8.33333%}.custom-theme .el-col-md-offset-2{margin-left:8.33333%}.custom-theme .el-col-md-pull-2{position:relative;right:8.33333%}.custom-theme .el-col-md-push-2{position:relative;left:8.33333%}.custom-theme .el-col-md-3{width:12.5%}.custom-theme .el-col-md-offset-3{margin-left:12.5%}.custom-theme .el-col-md-pull-3{position:relative;right:12.5%}.custom-theme .el-col-md-push-3{position:relative;left:12.5%}.custom-theme .el-col-md-4{width:16.66667%}.custom-theme .el-col-md-offset-4{margin-left:16.66667%}.custom-theme .el-col-md-pull-4{position:relative;right:16.66667%}.custom-theme .el-col-md-push-4{position:relative;left:16.66667%}.custom-theme .el-col-md-5{width:20.83333%}.custom-theme .el-col-md-offset-5{margin-left:20.83333%}.custom-theme .el-col-md-pull-5{position:relative;right:20.83333%}.custom-theme .el-col-md-push-5{position:relative;left:20.83333%}.custom-theme .el-col-md-6{width:25%}.custom-theme .el-col-md-offset-6{margin-left:25%}.custom-theme .el-col-md-pull-6{position:relative;right:25%}.custom-theme .el-col-md-push-6{position:relative;left:25%}.custom-theme .el-col-md-7{width:29.16667%}.custom-theme .el-col-md-offset-7{margin-left:29.16667%}.custom-theme .el-col-md-pull-7{position:relative;right:29.16667%}.custom-theme .el-col-md-push-7{position:relative;left:29.16667%}.custom-theme .el-col-md-8{width:33.33333%}.custom-theme .el-col-md-offset-8{margin-left:33.33333%}.custom-theme .el-col-md-pull-8{position:relative;right:33.33333%}.custom-theme .el-col-md-push-8{position:relative;left:33.33333%}.custom-theme .el-col-md-9{width:37.5%}.custom-theme .el-col-md-offset-9{margin-left:37.5%}.custom-theme .el-col-md-pull-9{position:relative;right:37.5%}.custom-theme .el-col-md-push-9{position:relative;left:37.5%}.custom-theme .el-col-md-10{width:41.66667%}.custom-theme .el-col-md-offset-10{margin-left:41.66667%}.custom-theme .el-col-md-pull-10{position:relative;right:41.66667%}.custom-theme .el-col-md-push-10{position:relative;left:41.66667%}.custom-theme .el-col-md-11{width:45.83333%}.custom-theme .el-col-md-offset-11{margin-left:45.83333%}.custom-theme .el-col-md-pull-11{position:relative;right:45.83333%}.custom-theme .el-col-md-push-11{position:relative;left:45.83333%}.custom-theme .el-col-md-12{width:50%}.custom-theme .el-col-md-offset-12{margin-left:50%}.custom-theme .el-col-md-pull-12{position:relative;right:50%}.custom-theme .el-col-md-push-12{position:relative;left:50%}.custom-theme .el-col-md-13{width:54.16667%}.custom-theme .el-col-md-offset-13{margin-left:54.16667%}.custom-theme .el-col-md-pull-13{position:relative;right:54.16667%}.custom-theme .el-col-md-push-13{position:relative;left:54.16667%}.custom-theme .el-col-md-14{width:58.33333%}.custom-theme .el-col-md-offset-14{margin-left:58.33333%}.custom-theme .el-col-md-pull-14{position:relative;right:58.33333%}.custom-theme .el-col-md-push-14{position:relative;left:58.33333%}.custom-theme .el-col-md-15{width:62.5%}.custom-theme .el-col-md-offset-15{margin-left:62.5%}.custom-theme .el-col-md-pull-15{position:relative;right:62.5%}.custom-theme .el-col-md-push-15{position:relative;left:62.5%}.custom-theme .el-col-md-16{width:66.66667%}.custom-theme .el-col-md-offset-16{margin-left:66.66667%}.custom-theme .el-col-md-pull-16{position:relative;right:66.66667%}.custom-theme .el-col-md-push-16{position:relative;left:66.66667%}.custom-theme .el-col-md-17{width:70.83333%}.custom-theme .el-col-md-offset-17{margin-left:70.83333%}.custom-theme .el-col-md-pull-17{position:relative;right:70.83333%}.custom-theme .el-col-md-push-17{position:relative;left:70.83333%}.custom-theme .el-col-md-18{width:75%}.custom-theme .el-col-md-offset-18{margin-left:75%}.custom-theme .el-col-md-pull-18{position:relative;right:75%}.custom-theme .el-col-md-push-18{position:relative;left:75%}.custom-theme .el-col-md-19{width:79.16667%}.custom-theme .el-col-md-offset-19{margin-left:79.16667%}.custom-theme .el-col-md-pull-19{position:relative;right:79.16667%}.custom-theme .el-col-md-push-19{position:relative;left:79.16667%}.custom-theme .el-col-md-20{width:83.33333%}.custom-theme .el-col-md-offset-20{margin-left:83.33333%}.custom-theme .el-col-md-pull-20{position:relative;right:83.33333%}.custom-theme .el-col-md-push-20{position:relative;left:83.33333%}.custom-theme .el-col-md-21{width:87.5%}.custom-theme .el-col-md-offset-21{margin-left:87.5%}.custom-theme .el-col-md-pull-21{position:relative;right:87.5%}.custom-theme .el-col-md-push-21{position:relative;left:87.5%}.custom-theme .el-col-md-22{width:91.66667%}.custom-theme .el-col-md-offset-22{margin-left:91.66667%}.custom-theme .el-col-md-pull-22{position:relative;right:91.66667%}.custom-theme .el-col-md-push-22{position:relative;left:91.66667%}.custom-theme .el-col-md-23{width:95.83333%}.custom-theme .el-col-md-offset-23{margin-left:95.83333%}.custom-theme .el-col-md-pull-23{position:relative;right:95.83333%}.custom-theme .el-col-md-push-23{position:relative;left:95.83333%}.custom-theme .el-col-md-24{width:100%}.custom-theme .el-col-md-offset-24{margin-left:100%}.custom-theme .el-col-md-pull-24{position:relative;right:100%}.custom-theme .el-col-md-push-24{position:relative;left:100%}}@media only screen and (min-width:1200px){.custom-theme .el-col-lg-0{display:none}.custom-theme .el-col-lg-1{width:4.16667%}.custom-theme .el-col-lg-offset-1{margin-left:4.16667%}.custom-theme .el-col-lg-pull-1{position:relative;right:4.16667%}.custom-theme .el-col-lg-push-1{position:relative;left:4.16667%}.custom-theme .el-col-lg-2{width:8.33333%}.custom-theme .el-col-lg-offset-2{margin-left:8.33333%}.custom-theme .el-col-lg-pull-2{position:relative;right:8.33333%}.custom-theme .el-col-lg-push-2{position:relative;left:8.33333%}.custom-theme .el-col-lg-3{width:12.5%}.custom-theme .el-col-lg-offset-3{margin-left:12.5%}.custom-theme .el-col-lg-pull-3{position:relative;right:12.5%}.custom-theme .el-col-lg-push-3{position:relative;left:12.5%}.custom-theme .el-col-lg-4{width:16.66667%}.custom-theme .el-col-lg-offset-4{margin-left:16.66667%}.custom-theme .el-col-lg-pull-4{position:relative;right:16.66667%}.custom-theme .el-col-lg-push-4{position:relative;left:16.66667%}.custom-theme .el-col-lg-5{width:20.83333%}.custom-theme .el-col-lg-offset-5{margin-left:20.83333%}.custom-theme .el-col-lg-pull-5{position:relative;right:20.83333%}.custom-theme .el-col-lg-push-5{position:relative;left:20.83333%}.custom-theme .el-col-lg-6{width:25%}.custom-theme .el-col-lg-offset-6{margin-left:25%}.custom-theme .el-col-lg-pull-6{position:relative;right:25%}.custom-theme .el-col-lg-push-6{position:relative;left:25%}.custom-theme .el-col-lg-7{width:29.16667%}.custom-theme .el-col-lg-offset-7{margin-left:29.16667%}.custom-theme .el-col-lg-pull-7{position:relative;right:29.16667%}.custom-theme .el-col-lg-push-7{position:relative;left:29.16667%}.custom-theme .el-col-lg-8{width:33.33333%}.custom-theme .el-col-lg-offset-8{margin-left:33.33333%}.custom-theme .el-col-lg-pull-8{position:relative;right:33.33333%}.custom-theme .el-col-lg-push-8{position:relative;left:33.33333%}.custom-theme .el-col-lg-9{width:37.5%}.custom-theme .el-col-lg-offset-9{margin-left:37.5%}.custom-theme .el-col-lg-pull-9{position:relative;right:37.5%}.custom-theme .el-col-lg-push-9{position:relative;left:37.5%}.custom-theme .el-col-lg-10{width:41.66667%}.custom-theme .el-col-lg-offset-10{margin-left:41.66667%}.custom-theme .el-col-lg-pull-10{position:relative;right:41.66667%}.custom-theme .el-col-lg-push-10{position:relative;left:41.66667%}.custom-theme .el-col-lg-11{width:45.83333%}.custom-theme .el-col-lg-offset-11{margin-left:45.83333%}.custom-theme .el-col-lg-pull-11{position:relative;right:45.83333%}.custom-theme .el-col-lg-push-11{position:relative;left:45.83333%}.custom-theme .el-col-lg-12{width:50%}.custom-theme .el-col-lg-offset-12{margin-left:50%}.custom-theme .el-col-lg-pull-12{position:relative;right:50%}.custom-theme .el-col-lg-push-12{position:relative;left:50%}.custom-theme .el-col-lg-13{width:54.16667%}.custom-theme .el-col-lg-offset-13{margin-left:54.16667%}.custom-theme .el-col-lg-pull-13{position:relative;right:54.16667%}.custom-theme .el-col-lg-push-13{position:relative;left:54.16667%}.custom-theme .el-col-lg-14{width:58.33333%}.custom-theme .el-col-lg-offset-14{margin-left:58.33333%}.custom-theme .el-col-lg-pull-14{position:relative;right:58.33333%}.custom-theme .el-col-lg-push-14{position:relative;left:58.33333%}.custom-theme .el-col-lg-15{width:62.5%}.custom-theme .el-col-lg-offset-15{margin-left:62.5%}.custom-theme .el-col-lg-pull-15{position:relative;right:62.5%}.custom-theme .el-col-lg-push-15{position:relative;left:62.5%}.custom-theme .el-col-lg-16{width:66.66667%}.custom-theme .el-col-lg-offset-16{margin-left:66.66667%}.custom-theme .el-col-lg-pull-16{position:relative;right:66.66667%}.custom-theme .el-col-lg-push-16{position:relative;left:66.66667%}.custom-theme .el-col-lg-17{width:70.83333%}.custom-theme .el-col-lg-offset-17{margin-left:70.83333%}.custom-theme .el-col-lg-pull-17{position:relative;right:70.83333%}.custom-theme .el-col-lg-push-17{position:relative;left:70.83333%}.custom-theme .el-col-lg-18{width:75%}.custom-theme .el-col-lg-offset-18{margin-left:75%}.custom-theme .el-col-lg-pull-18{position:relative;right:75%}.custom-theme .el-col-lg-push-18{position:relative;left:75%}.custom-theme .el-col-lg-19{width:79.16667%}.custom-theme .el-col-lg-offset-19{margin-left:79.16667%}.custom-theme .el-col-lg-pull-19{position:relative;right:79.16667%}.custom-theme .el-col-lg-push-19{position:relative;left:79.16667%}.custom-theme .el-col-lg-20{width:83.33333%}.custom-theme .el-col-lg-offset-20{margin-left:83.33333%}.custom-theme .el-col-lg-pull-20{position:relative;right:83.33333%}.custom-theme .el-col-lg-push-20{position:relative;left:83.33333%}.custom-theme .el-col-lg-21{width:87.5%}.custom-theme .el-col-lg-offset-21{margin-left:87.5%}.custom-theme .el-col-lg-pull-21{position:relative;right:87.5%}.custom-theme .el-col-lg-push-21{position:relative;left:87.5%}.custom-theme .el-col-lg-22{width:91.66667%}.custom-theme .el-col-lg-offset-22{margin-left:91.66667%}.custom-theme .el-col-lg-pull-22{position:relative;right:91.66667%}.custom-theme .el-col-lg-push-22{position:relative;left:91.66667%}.custom-theme .el-col-lg-23{width:95.83333%}.custom-theme .el-col-lg-offset-23{margin-left:95.83333%}.custom-theme .el-col-lg-pull-23{position:relative;right:95.83333%}.custom-theme .el-col-lg-push-23{position:relative;left:95.83333%}.custom-theme .el-col-lg-24{width:100%}.custom-theme .el-col-lg-offset-24{margin-left:100%}.custom-theme .el-col-lg-pull-24{position:relative;right:100%}.custom-theme .el-col-lg-push-24{position:relative;left:100%}}@media only screen and (min-width:1920px){.custom-theme .el-col-xl-0{display:none}.custom-theme .el-col-xl-1{width:4.16667%}.custom-theme .el-col-xl-offset-1{margin-left:4.16667%}.custom-theme .el-col-xl-pull-1{position:relative;right:4.16667%}.custom-theme .el-col-xl-push-1{position:relative;left:4.16667%}.custom-theme .el-col-xl-2{width:8.33333%}.custom-theme .el-col-xl-offset-2{margin-left:8.33333%}.custom-theme .el-col-xl-pull-2{position:relative;right:8.33333%}.custom-theme .el-col-xl-push-2{position:relative;left:8.33333%}.custom-theme .el-col-xl-3{width:12.5%}.custom-theme .el-col-xl-offset-3{margin-left:12.5%}.custom-theme .el-col-xl-pull-3{position:relative;right:12.5%}.custom-theme .el-col-xl-push-3{position:relative;left:12.5%}.custom-theme .el-col-xl-4{width:16.66667%}.custom-theme .el-col-xl-offset-4{margin-left:16.66667%}.custom-theme .el-col-xl-pull-4{position:relative;right:16.66667%}.custom-theme .el-col-xl-push-4{position:relative;left:16.66667%}.custom-theme .el-col-xl-5{width:20.83333%}.custom-theme .el-col-xl-offset-5{margin-left:20.83333%}.custom-theme .el-col-xl-pull-5{position:relative;right:20.83333%}.custom-theme .el-col-xl-push-5{position:relative;left:20.83333%}.custom-theme .el-col-xl-6{width:25%}.custom-theme .el-col-xl-offset-6{margin-left:25%}.custom-theme .el-col-xl-pull-6{position:relative;right:25%}.custom-theme .el-col-xl-push-6{position:relative;left:25%}.custom-theme .el-col-xl-7{width:29.16667%}.custom-theme .el-col-xl-offset-7{margin-left:29.16667%}.custom-theme .el-col-xl-pull-7{position:relative;right:29.16667%}.custom-theme .el-col-xl-push-7{position:relative;left:29.16667%}.custom-theme .el-col-xl-8{width:33.33333%}.custom-theme .el-col-xl-offset-8{margin-left:33.33333%}.custom-theme .el-col-xl-pull-8{position:relative;right:33.33333%}.custom-theme .el-col-xl-push-8{position:relative;left:33.33333%}.custom-theme .el-col-xl-9{width:37.5%}.custom-theme .el-col-xl-offset-9{margin-left:37.5%}.custom-theme .el-col-xl-pull-9{position:relative;right:37.5%}.custom-theme .el-col-xl-push-9{position:relative;left:37.5%}.custom-theme .el-col-xl-10{width:41.66667%}.custom-theme .el-col-xl-offset-10{margin-left:41.66667%}.custom-theme .el-col-xl-pull-10{position:relative;right:41.66667%}.custom-theme .el-col-xl-push-10{position:relative;left:41.66667%}.custom-theme .el-col-xl-11{width:45.83333%}.custom-theme .el-col-xl-offset-11{margin-left:45.83333%}.custom-theme .el-col-xl-pull-11{position:relative;right:45.83333%}.custom-theme .el-col-xl-push-11{position:relative;left:45.83333%}.custom-theme .el-col-xl-12{width:50%}.custom-theme .el-col-xl-offset-12{margin-left:50%}.custom-theme .el-col-xl-pull-12{position:relative;right:50%}.custom-theme .el-col-xl-push-12{position:relative;left:50%}.custom-theme .el-col-xl-13{width:54.16667%}.custom-theme .el-col-xl-offset-13{margin-left:54.16667%}.custom-theme .el-col-xl-pull-13{position:relative;right:54.16667%}.custom-theme .el-col-xl-push-13{position:relative;left:54.16667%}.custom-theme .el-col-xl-14{width:58.33333%}.custom-theme .el-col-xl-offset-14{margin-left:58.33333%}.custom-theme .el-col-xl-pull-14{position:relative;right:58.33333%}.custom-theme .el-col-xl-push-14{position:relative;left:58.33333%}.custom-theme .el-col-xl-15{width:62.5%}.custom-theme .el-col-xl-offset-15{margin-left:62.5%}.custom-theme .el-col-xl-pull-15{position:relative;right:62.5%}.custom-theme .el-col-xl-push-15{position:relative;left:62.5%}.custom-theme .el-col-xl-16{width:66.66667%}.custom-theme .el-col-xl-offset-16{margin-left:66.66667%}.custom-theme .el-col-xl-pull-16{position:relative;right:66.66667%}.custom-theme .el-col-xl-push-16{position:relative;left:66.66667%}.custom-theme .el-col-xl-17{width:70.83333%}.custom-theme .el-col-xl-offset-17{margin-left:70.83333%}.custom-theme .el-col-xl-pull-17{position:relative;right:70.83333%}.custom-theme .el-col-xl-push-17{position:relative;left:70.83333%}.custom-theme .el-col-xl-18{width:75%}.custom-theme .el-col-xl-offset-18{margin-left:75%}.custom-theme .el-col-xl-pull-18{position:relative;right:75%}.custom-theme .el-col-xl-push-18{position:relative;left:75%}.custom-theme .el-col-xl-19{width:79.16667%}.custom-theme .el-col-xl-offset-19{margin-left:79.16667%}.custom-theme .el-col-xl-pull-19{position:relative;right:79.16667%}.custom-theme .el-col-xl-push-19{position:relative;left:79.16667%}.custom-theme .el-col-xl-20{width:83.33333%}.custom-theme .el-col-xl-offset-20{margin-left:83.33333%}.custom-theme .el-col-xl-pull-20{position:relative;right:83.33333%}.custom-theme .el-col-xl-push-20{position:relative;left:83.33333%}.custom-theme .el-col-xl-21{width:87.5%}.custom-theme .el-col-xl-offset-21{margin-left:87.5%}.custom-theme .el-col-xl-pull-21{position:relative;right:87.5%}.custom-theme .el-col-xl-push-21{position:relative;left:87.5%}.custom-theme .el-col-xl-22{width:91.66667%}.custom-theme .el-col-xl-offset-22{margin-left:91.66667%}.custom-theme .el-col-xl-pull-22{position:relative;right:91.66667%}.custom-theme .el-col-xl-push-22{position:relative;left:91.66667%}.custom-theme .el-col-xl-23{width:95.83333%}.custom-theme .el-col-xl-offset-23{margin-left:95.83333%}.custom-theme .el-col-xl-pull-23{position:relative;right:95.83333%}.custom-theme .el-col-xl-push-23{position:relative;left:95.83333%}.custom-theme .el-col-xl-24{width:100%}.custom-theme .el-col-xl-offset-24{margin-left:100%}.custom-theme .el-col-xl-pull-24{position:relative;right:100%}.custom-theme .el-col-xl-push-24{position:relative;left:100%}}.custom-theme .el-progress{position:relative;line-height:1}.custom-theme .el-progress__text{font-size:14px;color:#5a5e66;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.custom-theme .el-progress__text i{vertical-align:middle;display:block}.custom-theme .el-progress--circle{display:inline-block}.custom-theme .el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.custom-theme .el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.custom-theme .el-progress--without-text .el-progress__text{display:none}.custom-theme .el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.custom-theme .el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.custom-theme .el-progress.is-success .el-progress-bar__inner{background-color:#409167}.custom-theme .el-progress.is-success .el-progress__text{color:#409167}.custom-theme .el-progress.is-exception .el-progress-bar__inner{background-color:#b3450e}.custom-theme .el-progress.is-exception .el-progress__text{color:#b3450e}.custom-theme .el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-progress-bar__outer{height:6px;border-radius:100px;background-color:#e6ebf5;overflow:hidden;position:relative;vertical-align:middle}.custom-theme .el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#262729;text-align:right;border-radius:100px;line-height:1;white-space:nowrap}.custom-theme .el-progress-bar__inner::after{display:inline-block;content:"";height:100%;vertical-align:middle}.custom-theme .el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}.custom-theme .el-upload{display:inline-block;text-align:center;cursor:pointer}.custom-theme .el-upload__input{display:none}.custom-theme .el-upload__tip{font-size:12px;color:#5a5e66;margin-top:7px}.custom-theme .el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0}.custom-theme .el-upload--picture-card{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;-webkit-box-sizing:border-box;box-sizing:border-box;width:148px;height:148px;cursor:pointer;line-height:146px;vertical-align:top}.custom-theme .el-upload--picture-card i{font-size:28px;color:#8c939d}.custom-theme .el-upload--picture-card:hover{border-color:#262729;color:#262729}.custom-theme .el-upload-dragger{background-color:#fff;border:1px dashed #d9d9d9;border-radius:6px;-webkit-box-sizing:border-box;box-sizing:border-box;width:360px;height:180px;text-align:center;cursor:pointer;position:relative;overflow:hidden}.custom-theme .el-upload-dragger .el-icon-upload{font-size:67px;color:#b4bccc;margin:40px 0 16px;line-height:50px}.custom-theme .el-upload-dragger+.el-upload__tip{text-align:center}.custom-theme .el-upload-dragger~.el-upload__files{border-top:1px solid #d8dce5;margin-top:7px;padding-top:5px}.custom-theme .el-upload-dragger .el-upload__text{color:#5a5e66;font-size:14px;text-align:center}.custom-theme .el-upload-dragger .el-upload__text em{color:#262729;font-style:normal}.custom-theme .el-upload-dragger:hover{border-color:#262729}.custom-theme .el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #262729}.custom-theme .el-upload-list{margin:0;padding:0;list-style:none}.custom-theme .el-upload-list__item{-webkit-transition:all .5s cubic-bezier(.55,0,.1,1);transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#5a5e66;line-height:1.8;margin-top:5px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;width:100%}.custom-theme .el-upload-list__item .el-progress{position:absolute;top:20px;width:100%}.custom-theme .el-upload-list__item .el-progress__text{position:absolute;right:0;top:-13px}.custom-theme .el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.custom-theme .el-upload-list__item:first-child{margin-top:10px}.custom-theme .el-upload-list__item .el-icon-upload-success{color:#409167}.custom-theme .el-upload-list__item .el-icon-close{display:none;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.75;color:#5a5e66}.custom-theme .el-upload-list__item .el-icon-close:hover{opacity:1}.custom-theme .el-upload-list__item .el-icon-close-tip{display:none;position:absolute;top:5px;right:0;cursor:pointer;opacity:1;color:#262729;-webkit-transform:translate(15%,0);transform:translate(15%,0)}.custom-theme .el-upload-list__item:hover{background-color:#f5f7fa}.custom-theme .el-upload-list__item:hover .el-icon-close{display:inline-block}.custom-theme .el-upload-list__item:hover .el-progress__text{display:none}.custom-theme .el-upload-list__item.is-success .el-upload-list__item-status-label{display:block}.custom-theme .el-upload-list__item.is-success .el-upload-list__item-name:focus,.custom-theme .el-upload-list__item.is-success .el-upload-list__item-name:hover{color:#262729;cursor:pointer}.custom-theme .el-upload-list__item.is-success:focus .el-icon-close-tip{display:inline-block}.custom-theme .el-upload-list__item.is-success:active,.custom-theme .el-upload-list__item.is-success:focus:not(.focusing){outline-width:0}.custom-theme .el-upload-list__item.is-success:active .el-icon-close-tip,.custom-theme .el-upload-list__item.is-success:focus:not(.focusing) .el-icon-close-tip{display:none}.custom-theme .el-upload-list__item.is-success:focus .el-upload-list__item-status-label,.custom-theme .el-upload-list__item.is-success:hover .el-upload-list__item-status-label{display:none}.custom-theme .el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label{display:block}.custom-theme .el-upload-list__item-name{color:#5a5e66;display:block;margin-right:40px;overflow:hidden;padding-left:4px;text-overflow:ellipsis;-webkit-transition:color .3s;transition:color .3s;white-space:nowrap}.custom-theme .el-upload-list__item-name [class^=el-icon]{height:100%;margin-right:7px;color:#878d99;line-height:inherit}.custom-theme .el-upload-list__item-status-label{position:absolute;right:5px;top:0;line-height:inherit;display:none}.custom-theme .el-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:12px;color:#5a5e66;display:none}.custom-theme .el-upload-list__item-delete:hover{color:#262729}.custom-theme .el-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.custom-theme .el-upload-list--picture-card .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;-webkit-box-sizing:border-box;box-sizing:border-box;width:148px;height:148px;margin:0 8px 8px 0;display:inline-block}.custom-theme .el-upload-list--picture-card .el-upload-list__item .el-icon-check,.custom-theme .el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check{color:#fff}.custom-theme .el-upload-list--picture-card .el-upload-list__item .el-icon-close{display:none}.custom-theme .el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:none}.custom-theme .el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text{display:block}.custom-theme .el-upload-list--picture-card .el-upload-list__item-name{display:none}.custom-theme .el-upload-list--picture-card .el-upload-list__item-thumbnail{width:100%;height:100%}.custom-theme .el-upload-list--picture-card .el-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 1pc 1px rgba(0,0,0,.2);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.custom-theme .el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.custom-theme .el-upload-list--picture-card .el-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;color:#fff;opacity:0;font-size:20px;background-color:rgba(0,0,0,.5);-webkit-transition:opacity .3s;transition:opacity .3s}.custom-theme .el-upload-list--picture-card .el-upload-list__item-actions::after{display:inline-block;content:"";height:100%;vertical-align:middle}.custom-theme .el-upload-list--picture-card .el-upload-list__item-actions span{display:none;cursor:pointer}.custom-theme .el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:15px}.custom-theme .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{position:static;font-size:inherit;color:inherit}.custom-theme .el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.custom-theme .el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-block}.custom-theme .el-upload-list--picture-card .el-progress{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);bottom:auto;width:126px}.custom-theme .el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.custom-theme .el-upload-list--picture .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:10px;padding:10px 10px 10px 90px;height:92px}.custom-theme .el-upload-list--picture .el-upload-list__item .el-icon-check,.custom-theme .el-upload-list--picture .el-upload-list__item .el-icon-circle-check{color:#fff}.custom-theme .el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{background:0 0;-webkit-box-shadow:none;box-shadow:none;top:-2px;right:-12px}.custom-theme .el-upload-list--picture .el-upload-list__item:hover .el-progress__text{display:block}.custom-theme .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{line-height:70px;margin-top:0}.custom-theme .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.custom-theme .el-upload-list--picture .el-upload-list__item-thumbnail{vertical-align:middle;display:inline-block;width:70px;height:70px;float:left;position:relative;z-index:1;margin-left:-80px}.custom-theme .el-upload-list--picture .el-upload-list__item-name{display:block;margin-top:20px}.custom-theme .el-upload-list--picture .el-upload-list__item-name i{font-size:70px;line-height:1;position:absolute;left:9px;top:10px}.custom-theme .el-upload-list--picture .el-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc}.custom-theme .el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.custom-theme .el-upload-list--picture .el-progress{position:relative;top:-7px}.custom-theme .el-upload-cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.custom-theme .el-upload-cover::after{display:inline-block;content:"";height:100%;vertical-align:middle}.custom-theme .el-upload-cover img{display:block;width:100%;height:100%}.custom-theme .el-upload-cover__label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 1pc 1px rgba(0,0,0,.2);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.custom-theme .el-upload-cover__label i{font-size:12px;margin-top:11px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);color:#fff}.custom-theme .el-upload-cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.custom-theme .el-upload-cover__progress+.el-upload__inner{opacity:0}.custom-theme .el-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.custom-theme .el-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.custom-theme .el-upload-cover__interact .btn{display:inline-block;color:#fff;font-size:14px;cursor:pointer;vertical-align:middle;-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;margin-top:60px}.custom-theme .el-upload-cover__interact .btn i{margin-top:0}.custom-theme .el-upload-cover__interact .btn span{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.custom-theme .el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.custom-theme .el-upload-cover__interact .btn:hover{-webkit-transform:translateY(-13px);transform:translateY(-13px)}.custom-theme .el-upload-cover__interact .btn:hover span{opacity:1}.custom-theme .el-upload-cover__interact .btn i{color:#fff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.custom-theme .el-upload-cover__title{position:absolute;bottom:0;left:0;background-color:#fff;height:36px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#2d2f33}.custom-theme .el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.custom-theme .el-progress{position:relative;line-height:1}.custom-theme .el-progress__text{font-size:14px;color:#5a5e66;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.custom-theme .el-progress__text i{vertical-align:middle;display:block}.custom-theme .el-progress--circle{display:inline-block}.custom-theme .el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.custom-theme .el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.custom-theme .el-progress--without-text .el-progress__text{display:none}.custom-theme .el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.custom-theme .el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.custom-theme .el-progress.is-success .el-progress-bar__inner{background-color:#409167}.custom-theme .el-progress.is-success .el-progress__text{color:#409167}.custom-theme .el-progress.is-exception .el-progress-bar__inner{background-color:#b3450e}.custom-theme .el-progress.is-exception .el-progress__text{color:#b3450e}.custom-theme .el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-progress-bar__outer{height:6px;border-radius:100px;background-color:#e6ebf5;overflow:hidden;position:relative;vertical-align:middle}.custom-theme .el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#262729;text-align:right;border-radius:100px;line-height:1;white-space:nowrap}.custom-theme .el-progress-bar__inner::after{display:inline-block;content:"";height:100%;vertical-align:middle}.custom-theme .el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}.custom-theme .el-time-spinner{width:100%;white-space:nowrap}.custom-theme .el-spinner{display:inline-block;vertical-align:middle}.custom-theme .el-spinner-inner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;width:50px;height:50px}.custom-theme .el-spinner-inner .path{stroke:#ececec;stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.custom-theme .el-message{min-width:380px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border-width:1px;border-style:solid;border-color:#e6ebf5;position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#edf2fc;-webkit-transition:opacity .3s,-webkit-transform .4s;transition:opacity .3s,-webkit-transform .4s;transition:opacity .3s,transform .4s;transition:opacity .3s,transform .4s,-webkit-transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.custom-theme .el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.custom-theme .el-message p{margin:0}.custom-theme .el-message--info .el-message__content{color:#0a76a4}.custom-theme .el-message--success{background-color:#ecf4f0;border-color:#d9e9e1}.custom-theme .el-message--success .el-message__content{color:#409167}.custom-theme .el-message--warning{background-color:#f5f6e6;border-color:#ebedce}.custom-theme .el-message--warning .el-message__content{color:#9da408}.custom-theme .el-message--error{background-color:#f7ece7;border-color:#f0dacf}.custom-theme .el-message--error .el-message__content{color:#b3450e}.custom-theme .el-message__icon{margin-right:10px}.custom-theme .el-message__content{padding:0;font-size:14px;line-height:1}.custom-theme .el-message__content:focus{outline-width:0}.custom-theme .el-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#b4bccc;font-size:16px}.custom-theme .el-message__closeBtn:focus{outline-width:0}.custom-theme .el-message__closeBtn:hover{color:#878d99}.custom-theme .el-message .el-icon-success{color:#409167}.custom-theme .el-message .el-icon-error{color:#b3450e}.custom-theme .el-message .el-icon-info{color:#0a76a4}.custom-theme .el-message .el-icon-warning{color:#9da408}.custom-theme .el-message-fade-enter,.custom-theme .el-message-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.custom-theme .el-badge{position:relative;vertical-align:middle;display:inline-block}.custom-theme .el-badge__content{background-color:#b3450e;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff}.custom-theme .el-badge__content.is-fixed{position:absolute;top:0;right:10px;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.custom-theme .el-badge__content.is-fixed.is-dot{right:5px}.custom-theme .el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.custom-theme .el-card{border-radius:4px;border:1px solid #e6ebf5;background-color:#fff;overflow:hidden;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);color:#2d2f33}.custom-theme .el-card__header{padding:18px 20px;border-bottom:1px solid #e6ebf5;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-card__body{padding:20px}.custom-theme .el-rate{height:20px;line-height:1}.custom-theme .el-rate:active,.custom-theme .el-rate:focus{outline-width:0}.custom-theme .el-rate__item{display:inline-block;position:relative;font-size:0;vertical-align:middle}.custom-theme .el-rate__icon{position:relative;display:inline-block;font-size:18px;margin-right:6px;color:#b4bccc;-webkit-transition:.3s;transition:.3s}.custom-theme .el-rate__icon.hover{-webkit-transform:scale(1.15);transform:scale(1.15)}.custom-theme .el-rate__icon .path2{position:absolute;left:0;top:0}.custom-theme .el-rate__decimal{position:absolute;top:0;left:0;display:inline-block;overflow:hidden}.custom-theme .el-rate__text{font-size:14px;vertical-align:middle}.custom-theme .el-steps{display:-webkit-box;display:-ms-flexbox;display:flex}.custom-theme .el-steps--simple{padding:13px 8%;border-radius:4px;background:#f5f7fa}.custom-theme .el-steps--horizontal{white-space:nowrap}.custom-theme .el-steps--vertical{height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}.custom-theme .el-step{position:relative;-ms-flex-negative:1;flex-shrink:1}.custom-theme .el-step:last-of-type .el-step__line{display:none}.custom-theme .el-step:last-of-type.is-flex{-ms-flex-preferred-size:auto!important;flex-basis:auto!important;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.custom-theme .el-step:last-of-type .el-step__description,.custom-theme .el-step:last-of-type .el-step__main{padding-right:0}.custom-theme .el-step__head{position:relative;width:100%}.custom-theme .el-step__head.is-process{color:#2d2f33;border-color:#2d2f33}.custom-theme .el-step__head.is-wait{color:#b4bccc;border-color:#b4bccc}.custom-theme .el-step__head.is-success{color:#409167;border-color:#409167}.custom-theme .el-step__head.is-error{color:#b3450e;border-color:#b3450e}.custom-theme .el-step__head.is-finish{color:#262729;border-color:#262729}.custom-theme .el-step__icon{position:relative;z-index:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:24px;height:24px;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-transition:.15s ease-out;transition:.15s ease-out}.custom-theme .el-step__icon.is-text{border-radius:50%;border:2px solid;border-color:inherit}.custom-theme .el-step__icon.is-icon{width:40px}.custom-theme .el-step__icon-inner{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;font-weight:700;line-height:1;color:inherit}.custom-theme .el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:25px;font-weight:400}.custom-theme .el-step__icon-inner.is-status{-webkit-transform:translateY(1px);transform:translateY(1px)}.custom-theme .el-step__line{position:absolute;border-color:inherit;background-color:#b4bccc}.custom-theme .el-step__line-inner{display:block;border-width:1px;border-style:solid;border-color:inherit;-webkit-transition:.15s ease-out;transition:.15s ease-out;-webkit-box-sizing:border-box;box-sizing:border-box;width:0;height:0}.custom-theme .el-step__main{white-space:normal;text-align:left}.custom-theme .el-step__title{font-size:16px;line-height:38px}.custom-theme .el-step__title.is-process{font-weight:700;color:#2d2f33}.custom-theme .el-step__title.is-wait{color:#b4bccc}.custom-theme .el-step__title.is-success{color:#409167}.custom-theme .el-step__title.is-error{color:#b3450e}.custom-theme .el-step__title.is-finish{color:#262729}.custom-theme .el-step__description{padding-right:10%;margin-top:-5px;font-size:12px;line-height:20px;font-weight:400}.custom-theme .el-step__description.is-process{color:#2d2f33}.custom-theme .el-step__description.is-wait{color:#b4bccc}.custom-theme .el-step__description.is-success{color:#409167}.custom-theme .el-step__description.is-error{color:#b3450e}.custom-theme .el-step__description.is-finish{color:#262729}.custom-theme .el-step.is-horizontal{display:inline-block}.custom-theme .el-step.is-horizontal .el-step__line{height:2px;top:11px;left:0;right:0}.custom-theme .el-step.is-vertical{display:-webkit-box;display:-ms-flexbox;display:flex}.custom-theme .el-step.is-vertical .el-step__head{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;width:24px}.custom-theme .el-step.is-vertical .el-step__main{padding-left:10px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.custom-theme .el-step.is-vertical .el-step__title{line-height:24px;padding-bottom:8px}.custom-theme .el-step.is-vertical .el-step__line{width:2px;top:0;bottom:0;left:11px}.custom-theme .el-step.is-vertical .el-step__icon.is-icon{width:24px}.custom-theme .el-step.is-center .el-step__head{text-align:center}.custom-theme .el-step.is-center .el-step__main{text-align:center}.custom-theme .el-step.is-center .el-step__description{padding-left:20%;padding-right:20%}.custom-theme .el-step.is-center .el-step__line{left:50%;right:-50%}.custom-theme .el-step.is-simple{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.custom-theme .el-step.is-simple .el-step__head{width:auto;font-size:0;padding-right:10px}.custom-theme .el-step.is-simple .el-step__icon{background:0 0;width:16px;height:16px;font-size:12px}.custom-theme .el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status){font-size:18px}.custom-theme .el-step.is-simple .el-step__icon-inner.is-status{-webkit-transform:scale(.8) translateY(1px);transform:scale(.8) translateY(1px)}.custom-theme .el-step.is-simple .el-step__main{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.custom-theme .el-step.is-simple .el-step__title{font-size:16px;line-height:20px}.custom-theme .el-step.is-simple:not(:last-of-type) .el-step__title{max-width:50%;word-break:break-all}.custom-theme .el-step.is-simple .el-step__arrow{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.custom-theme .el-step.is-simple .el-step__arrow::after,.custom-theme .el-step.is-simple .el-step__arrow::before{content:'';display:inline-block;position:absolute;height:15px;width:1px;background:#b4bccc}.custom-theme .el-step.is-simple .el-step__arrow::before{-webkit-transform:rotate(-45deg) translateY(-4px);transform:rotate(-45deg) translateY(-4px);-webkit-transform-origin:0 0;transform-origin:0 0}.custom-theme .el-step.is-simple .el-step__arrow::after{-webkit-transform:rotate(45deg) translateY(4px);transform:rotate(45deg) translateY(4px);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.custom-theme .el-step.is-simple:last-of-type .el-step__arrow{display:none}.custom-theme .el-carousel{overflow-x:hidden;position:relative}.custom-theme .el-carousel__container{position:relative;height:300px}.custom-theme .el-carousel__arrow{border:none;outline:0;padding:0;margin:0;height:36px;width:36px;cursor:pointer;-webkit-transition:.3s;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#fff;position:absolute;top:50%;z-index:10;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-align:center;font-size:12px}.custom-theme .el-carousel__arrow--left{left:16px}.custom-theme .el-carousel__arrow--right{right:16px}.custom-theme .el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.custom-theme .el-carousel__arrow i{cursor:pointer}.custom-theme .el-carousel__indicators{position:absolute;list-style:none;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:0;padding:0;z-index:2}.custom-theme .el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;-webkit-transform:none;transform:none}.custom-theme .el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.custom-theme .el-carousel__indicators--outside button{background-color:#b4bccc;opacity:.24}.custom-theme .el-carousel__indicators--labels{left:0;right:0;-webkit-transform:none;transform:none;text-align:center}.custom-theme .el-carousel__indicators--labels .el-carousel__button{height:auto;width:auto;padding:2px 18px;font-size:12px}.custom-theme .el-carousel__indicators--labels .el-carousel__indicator{padding:6px 4px}.custom-theme .el-carousel__indicator{display:inline-block;background-color:transparent;padding:12px 4px;cursor:pointer}.custom-theme .el-carousel__indicator:hover button{opacity:.72}.custom-theme .el-carousel__indicator.is-active button{opacity:1}.custom-theme .el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#fff;border:none;outline:0;padding:0;margin:0;cursor:pointer;-webkit-transition:.3s;transition:.3s}.custom-theme .carousel-arrow-left-enter,.custom-theme .carousel-arrow-left-leave-active{-webkit-transform:translateY(-50%) translateX(-10px);transform:translateY(-50%) translateX(-10px);opacity:0}.custom-theme .carousel-arrow-right-enter,.custom-theme .carousel-arrow-right-leave-active{-webkit-transform:translateY(-50%) translateX(10px);transform:translateY(-50%) translateX(10px);opacity:0}.custom-theme .el-scrollbar{overflow:hidden;position:relative}.custom-theme .el-scrollbar:active>.el-scrollbar__bar,.custom-theme .el-scrollbar:focus>.el-scrollbar__bar,.custom-theme .el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.custom-theme .el-scrollbar__wrap{overflow:scroll;height:100%}.custom-theme .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.custom-theme .el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(135,141,153,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.custom-theme .el-scrollbar__thumb:hover{background-color:rgba(135,141,153,.5)}.custom-theme .el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.custom-theme .el-scrollbar__bar.is-vertical{width:6px;top:2px}.custom-theme .el-scrollbar__bar.is-vertical>div{width:100%}.custom-theme .el-scrollbar__bar.is-horizontal{height:6px;left:2px}.custom-theme .el-scrollbar__bar.is-horizontal>div{height:100%}.custom-theme .el-carousel__item{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;z-index:0}.custom-theme .el-carousel__item.is-active{z-index:2}.custom-theme .el-carousel__item.is-animating{-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.custom-theme .el-carousel__item--card{width:50%;-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.custom-theme .el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.custom-theme .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.custom-theme .el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.custom-theme .el-carousel__item--card.is-active{z-index:2}.custom-theme .el-carousel__mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.24;-webkit-transition:.2s;transition:.2s}.custom-theme .el-collapse{border-top:1px solid #e6ebf5;border-bottom:1px solid #e6ebf5}.custom-theme .el-collapse-item__header{height:48px;line-height:48px;background-color:#fff;color:#2d2f33;cursor:pointer;border-bottom:1px solid #e6ebf5;font-size:13px;font-weight:500;-webkit-transition:border-bottom-color .3s;transition:border-bottom-color .3s}.custom-theme .el-collapse-item__header:active,.custom-theme .el-collapse-item__header:focus:not(.focusing){outline-width:0}.custom-theme .el-collapse-item__arrow{margin-right:8px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;float:right;line-height:48px;font-weight:300}.custom-theme .el-collapse-item__wrap{will-change:height;background-color:#fff;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid #e6ebf5}.custom-theme .el-collapse-item__content{padding-bottom:25px;font-size:13px;color:#2d2f33;line-height:1.769230769230769}.custom-theme .el-collapse-item.is-active .el-collapse-item__header{border-bottom-color:transparent}.custom-theme .el-collapse-item.is-active .el-collapse-item__header .el-collapse-item__arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.custom-theme .el-collapse-item:last-child{margin-bottom:-1px}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-popper .popper__arrow,.custom-theme .el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.custom-theme .el-popper .popper__arrow{border-width:6px;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.custom-theme .el-popper .popper__arrow::after{content:" ";border-width:6px}.custom-theme .el-popper[x-placement^=top]{margin-bottom:12px}.custom-theme .el-popper[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#e6ebf5;border-bottom-width:0}.custom-theme .el-popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.custom-theme .el-popper[x-placement^=bottom]{margin-top:12px}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e6ebf5}.custom-theme .el-popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.custom-theme .el-popper[x-placement^=right]{margin-left:12px}.custom-theme .el-popper[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#e6ebf5;border-left-width:0}.custom-theme .el-popper[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.custom-theme .el-popper[x-placement^=left]{margin-right:12px}.custom-theme .el-popper[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#e6ebf5}.custom-theme .el-popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.custom-theme .el-cascader{display:inline-block;position:relative;font-size:14px;line-height:40px}.custom-theme .el-cascader .el-input,.custom-theme .el-cascader .el-input__inner{cursor:pointer}.custom-theme .el-cascader .el-input__icon{-webkit-transition:none;transition:none}.custom-theme .el-cascader .el-icon-arrow-down{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;font-size:14px}.custom-theme .el-cascader .el-icon-arrow-down.is-reverse{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}.custom-theme .el-cascader .el-icon-circle-close{z-index:2;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-cascader .el-icon-circle-close:hover{color:#878d99}.custom-theme .el-cascader__clearIcon{z-index:2;position:relative}.custom-theme .el-cascader__label{position:absolute;left:0;top:0;height:100%;padding:0 25px 0 15px;color:#5a5e66;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;text-align:left;font-size:inherit}.custom-theme .el-cascader__label span{color:#000}.custom-theme .el-cascader--medium{font-size:14px;line-height:36px}.custom-theme .el-cascader--small{font-size:13px;line-height:32px}.custom-theme .el-cascader--mini{font-size:12px;line-height:28px}.custom-theme .el-cascader.is-disabled .el-cascader__label{z-index:2;color:#b4bccc}.custom-theme .el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:solid 1px #dfe4ed;border-radius:2px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.custom-theme .el-cascader-menus .popper__arrow{-webkit-transform:translateX(-400%);transform:translateX(-400%)}.custom-theme .el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:solid 1px #dfe4ed;background-color:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:6px 0;min-width:160px}.custom-theme .el-cascader-menu:last-child{border-right:0}.custom-theme .el-cascader-menu__item{font-size:14px;padding:8px 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#5a5e66;height:34px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.custom-theme .el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\e604";font-size:14px;color:#bfcbd9;position:absolute;right:15px}.custom-theme .el-cascader-menu__item.is-disabled{color:#b4bccc;background-color:#fff;cursor:not-allowed}.custom-theme .el-cascader-menu__item.is-disabled:hover{background-color:#fff}.custom-theme .el-cascader-menu__item.is-active{color:#262729}.custom-theme .el-cascader-menu__item:hover{background-color:#f5f7fa}.custom-theme .el-cascader-menu__item.selected{color:#fff;background-color:#f5f7fa}.custom-theme .el-cascader-menu__item__keyword{font-weight:700}.custom-theme .el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.custom-theme .el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.custom-theme .el-color-hue-slider{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.custom-theme .el-color-hue-slider__bar{position:relative;background:-webkit-gradient(linear,left top,right top,from(red),color-stop(17%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(83%,#f0f),to(red));background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);height:100%}.custom-theme .el-color-hue-slider__thumb{position:absolute;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.custom-theme .el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.custom-theme .el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:-webkit-gradient(linear,left top,left bottom,from(red),color-stop(17%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(83%,#f0f),to(red));background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.custom-theme .el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.custom-theme .el-color-svpanel{position:relative;width:280px;height:180px}.custom-theme .el-color-svpanel__black,.custom-theme .el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.custom-theme .el-color-svpanel__white{background:-webkit-gradient(linear,left top,right top,from(#fff),to(rgba(255,255,255,0)));background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.custom-theme .el-color-svpanel__black{background:-webkit-gradient(linear,left bottom,left top,from(#000),to(transparent));background:linear-gradient(to top,#000,transparent)}.custom-theme .el-color-svpanel__cursor{position:absolute}.custom-theme .el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;-webkit-box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}.custom-theme .el-color-alpha-slider{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.custom-theme .el-color-alpha-slider__bar{position:relative;background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(white));background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%);height:100%}.custom-theme .el-color-alpha-slider__thumb{position:absolute;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.custom-theme .el-color-alpha-slider.is-vertical{width:20px;height:180px}.custom-theme .el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(white));background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%)}.custom-theme .el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.custom-theme .el-color-dropdown{width:300px}.custom-theme .el-color-dropdown__main-wrapper{margin-bottom:6px}.custom-theme .el-color-dropdown__main-wrapper::after{content:"";display:table;clear:both}.custom-theme .el-color-dropdown__btns{margin-top:6px;text-align:right}.custom-theme .el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.custom-theme .el-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:0;font-size:12px}.custom-theme .el-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.custom-theme .el-color-dropdown__btn:hover{color:#262729;border-color:#262729}.custom-theme .el-color-dropdown__link-btn{cursor:pointer;color:#262729;text-decoration:none;padding:15px;font-size:12px}.custom-theme .el-color-dropdown__link-btn:hover{color:tint(#262729,20%)}.custom-theme .el-color-picker{display:inline-block;position:relative;line-height:normal;height:40px}.custom-theme .el-color-picker.is-disabled .el-color-picker__trigger{cursor:not-allowed}.custom-theme .el-color-picker--medium{height:36px}.custom-theme .el-color-picker--medium .el-color-picker__trigger{height:36px;width:36px}.custom-theme .el-color-picker--medium .el-color-picker__mask{height:34px;width:34px}.custom-theme .el-color-picker--small{height:32px}.custom-theme .el-color-picker--small .el-color-picker__trigger{height:32px;width:32px}.custom-theme .el-color-picker--small .el-color-picker__mask{height:30px;width:30px}.custom-theme .el-color-picker--small .el-color-picker__empty,.custom-theme .el-color-picker--small .el-color-picker__icon{-webkit-transform:translate3d(-50%,-50%,0) scale(.8);transform:translate3d(-50%,-50%,0) scale(.8)}.custom-theme .el-color-picker--mini{height:28px}.custom-theme .el-color-picker--mini .el-color-picker__trigger{height:28px;width:28px}.custom-theme .el-color-picker--mini .el-color-picker__mask{height:26px;width:26px}.custom-theme .el-color-picker--mini .el-color-picker__empty,.custom-theme .el-color-picker--mini .el-color-picker__icon{-webkit-transform:translate3d(-50%,-50%,0) scale(.8);transform:translate3d(-50%,-50%,0) scale(.8)}.custom-theme .el-color-picker__mask{height:38px;width:38px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:rgba(255,255,255,.7)}.custom-theme .el-color-picker__trigger{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;height:40px;width:40px;padding:4px;border:1px solid #e6e6e6;border-radius:4px;font-size:0;position:relative;cursor:pointer}.custom-theme .el-color-picker__color{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #999;border-radius:2px;width:100%;height:100%;text-align:center}.custom-theme .el-color-picker__color.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.custom-theme .el-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.custom-theme .el-color-picker__empty{font-size:12px;color:#999;position:absolute;top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.custom-theme .el-color-picker__icon{display:inline-block;position:absolute;width:100%;top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);color:#fff;text-align:center;font-size:12px}.custom-theme .el-color-picker__panel{position:absolute;z-index:10;padding:6px;background-color:#fff;border:1px solid #e6ebf5;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.custom-theme .el-input{position:relative;font-size:14px;display:inline-block;width:100%}.custom-theme .el-input::-webkit-scrollbar{z-index:11;width:6px}.custom-theme .el-input::-webkit-scrollbar:horizontal{height:6px}.custom-theme .el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.custom-theme .el-input::-webkit-scrollbar-corner{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track{background:#fff}.custom-theme .el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.custom-theme .el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #d8dce5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#5a5e66;display:inline-block;font-size:inherit;height:40px;line-height:1;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.custom-theme .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input__inner:hover{border-color:#b4bccc}.custom-theme .el-input__inner:focus{outline:0;border-color:#262729}.custom-theme .el-input__suffix{position:absolute;height:100%;right:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.custom-theme .el-input__suffix-inner{pointer-events:all}.custom-theme .el-input__prefix{position:absolute;height:100%;left:5px;top:0;text-align:center;color:#b4bccc;-webkit-transition:all .3s;transition:all .3s}.custom-theme .el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.custom-theme .el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.custom-theme .el-input__validateIcon{pointer-events:none}.custom-theme .el-input.is-active .el-input__inner{outline:0;border-color:#262729}.custom-theme .el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__inner::placeholder{color:#b4bccc}.custom-theme .el-input.is-disabled .el-input__icon{cursor:not-allowed}.custom-theme .el-input--suffix .el-input__inner{padding-right:30px}.custom-theme .el-input--prefix .el-input__inner{padding-left:30px}.custom-theme .el-input--medium{font-size:14px}.custom-theme .el-input--medium .el-input__inner{height:36px}.custom-theme .el-input--medium .el-input__icon{line-height:36px}.custom-theme .el-input--small{font-size:13px}.custom-theme .el-input--small .el-input__inner{height:32px}.custom-theme .el-input--small .el-input__icon{line-height:32px}.custom-theme .el-input--mini{font-size:12px}.custom-theme .el-input--mini .el-input__inner{height:28px}.custom-theme .el-input--mini .el-input__icon{line-height:28px}.custom-theme .el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.custom-theme .el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.custom-theme .el-input-group__append,.custom-theme .el-input-group__prepend{background-color:#f5f7fa;color:#0a76a4;vertical-align:middle;display:table-cell;position:relative;border:1px solid #d8dce5;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.custom-theme .el-input-group__append:focus,.custom-theme .el-input-group__prepend:focus{outline:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-select,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-select{display:inline-block;margin:-20px}.custom-theme .el-input-group__append button.el-button,.custom-theme .el-input-group__append div.el-select .el-input__inner,.custom-theme .el-input-group__append div.el-select:hover .el-input__inner,.custom-theme .el-input-group__prepend button.el-button,.custom-theme .el-input-group__prepend div.el-select .el-input__inner,.custom-theme .el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.custom-theme .el-input-group__append .el-button,.custom-theme .el-input-group__append .el-input,.custom-theme .el-input-group__prepend .el-button,.custom-theme .el-input-group__prepend .el-input{font-size:inherit}.custom-theme .el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-input-group__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--prepend .el-input__inner{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-textarea{display:inline-block;width:100%;vertical-align:bottom}.custom-theme .el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;color:#5a5e66;background-color:#fff;background-image:none;border:1px solid #d8dce5;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.custom-theme .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-textarea__inner:hover{border-color:#b4bccc}.custom-theme .el-textarea__inner:focus{outline:0;border-color:#262729}.custom-theme .el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#dfe4ed;color:#b4bccc;cursor:not-allowed}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#b4bccc}.custom-theme .el-textarea.is-disabled .el-textarea__inner::placeholder{color:#b4bccc}.custom-theme .el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #d8dce5;border-color:#d8dce5;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.custom-theme .el-button+.el-button{margin-left:10px}.custom-theme .el-button.is-round{padding:12px 20px}.custom-theme .el-button:focus,.custom-theme .el-button:hover{color:#262729;border-color:#bebebf;background-color:#e9e9ea}.custom-theme .el-button:active{color:#222325;border-color:#222325;outline:0}.custom-theme .el-button::-moz-focus-inner{border:0}.custom-theme .el-button [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-button.is-plain:focus,.custom-theme .el-button.is-plain:hover{background:#fff;border-color:#262729;color:#262729}.custom-theme .el-button.is-plain:active{background:#fff;border-color:#222325;color:#222325;outline:0}.custom-theme .el-button.is-active{color:#222325;border-color:#222325}.custom-theme .el-button.is-disabled,.custom-theme .el-button.is-disabled:focus,.custom-theme .el-button.is-disabled:hover{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5}.custom-theme .el-button.is-disabled.el-button--text{background-color:transparent}.custom-theme .el-button.is-disabled.is-plain,.custom-theme .el-button.is-disabled.is-plain:focus,.custom-theme .el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#e6ebf5;color:#b4bccc}.custom-theme .el-button.is-loading{position:relative;pointer-events:none}.custom-theme .el-button.is-loading:before{pointer-events:none;content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:rgba(255,255,255,.35)}.custom-theme .el-button.is-round{border-radius:20px;padding:12px 23px}.custom-theme .el-button--primary{color:#fff;background-color:#262729;border-color:#262729}.custom-theme .el-button--primary:focus,.custom-theme .el-button--primary:hover{background:#515254;border-color:#515254;color:#fff}.custom-theme .el-button--primary:active{background:#222325;border-color:#222325;color:#fff;outline:0}.custom-theme .el-button--primary.is-active{background:#222325;border-color:#222325;color:#fff}.custom-theme .el-button--primary.is-disabled,.custom-theme .el-button--primary.is-disabled:active,.custom-theme .el-button--primary.is-disabled:focus,.custom-theme .el-button--primary.is-disabled:hover{color:#fff;background-color:#939394;border-color:#939394}.custom-theme .el-button--primary.is-plain{color:#262729;background:#e9e9ea;border-color:#a8a9a9}.custom-theme .el-button--primary.is-plain:focus,.custom-theme .el-button--primary.is-plain:hover{background:#262729;border-color:#262729;color:#fff}.custom-theme .el-button--primary.is-plain:active{background:#222325;border-color:#222325;color:#fff;outline:0}.custom-theme .el-button--primary.is-plain.is-disabled,.custom-theme .el-button--primary.is-plain.is-disabled:active,.custom-theme .el-button--primary.is-plain.is-disabled:focus,.custom-theme .el-button--primary.is-plain.is-disabled:hover{color:#7d7d7f;background-color:#e9e9ea;border-color:#d4d4d4}.custom-theme .el-button--success{color:#fff;background-color:#409167;border-color:#409167}.custom-theme .el-button--success:focus,.custom-theme .el-button--success:hover{background:#66a785;border-color:#66a785;color:#fff}.custom-theme .el-button--success:active{background:#3a835d;border-color:#3a835d;color:#fff;outline:0}.custom-theme .el-button--success.is-active{background:#3a835d;border-color:#3a835d;color:#fff}.custom-theme .el-button--success.is-disabled,.custom-theme .el-button--success.is-disabled:active,.custom-theme .el-button--success.is-disabled:focus,.custom-theme .el-button--success.is-disabled:hover{color:#fff;background-color:#a0c8b3;border-color:#a0c8b3}.custom-theme .el-button--success.is-plain{color:#409167;background:#ecf4f0;border-color:#b3d3c2}.custom-theme .el-button--success.is-plain:focus,.custom-theme .el-button--success.is-plain:hover{background:#409167;border-color:#409167;color:#fff}.custom-theme .el-button--success.is-plain:active{background:#3a835d;border-color:#3a835d;color:#fff;outline:0}.custom-theme .el-button--success.is-plain.is-disabled,.custom-theme .el-button--success.is-plain.is-disabled:active,.custom-theme .el-button--success.is-plain.is-disabled:focus,.custom-theme .el-button--success.is-plain.is-disabled:hover{color:#8cbda4;background-color:#ecf4f0;border-color:#d9e9e1}.custom-theme .el-button--warning{color:#fff;background-color:#9da408;border-color:#9da408}.custom-theme .el-button--warning:focus,.custom-theme .el-button--warning:hover{background:#b1b639;border-color:#b1b639;color:#fff}.custom-theme .el-button--warning:active{background:#8d9407;border-color:#8d9407;color:#fff;outline:0}.custom-theme .el-button--warning.is-active{background:#8d9407;border-color:#8d9407;color:#fff}.custom-theme .el-button--warning.is-disabled,.custom-theme .el-button--warning.is-disabled:active,.custom-theme .el-button--warning.is-disabled:focus,.custom-theme .el-button--warning.is-disabled:hover{color:#fff;background-color:#ced284;border-color:#ced284}.custom-theme .el-button--warning.is-plain{color:#9da408;background:#f5f6e6;border-color:#d8db9c}.custom-theme .el-button--warning.is-plain:focus,.custom-theme .el-button--warning.is-plain:hover{background:#9da408;border-color:#9da408;color:#fff}.custom-theme .el-button--warning.is-plain:active{background:#8d9407;border-color:#8d9407;color:#fff;outline:0}.custom-theme .el-button--warning.is-plain.is-disabled,.custom-theme .el-button--warning.is-plain.is-disabled:active,.custom-theme .el-button--warning.is-plain.is-disabled:focus,.custom-theme .el-button--warning.is-plain.is-disabled:hover{color:#c4c86b;background-color:#f5f6e6;border-color:#ebedce}.custom-theme .el-button--danger{color:#fff;background-color:#b3450e;border-color:#b3450e}.custom-theme .el-button--danger:focus,.custom-theme .el-button--danger:hover{background:#c26a3e;border-color:#c26a3e;color:#fff}.custom-theme .el-button--danger:active{background:#a13e0d;border-color:#a13e0d;color:#fff;outline:0}.custom-theme .el-button--danger.is-active{background:#a13e0d;border-color:#a13e0d;color:#fff}.custom-theme .el-button--danger.is-disabled,.custom-theme .el-button--danger.is-disabled:active,.custom-theme .el-button--danger.is-disabled:focus,.custom-theme .el-button--danger.is-disabled:hover{color:#fff;background-color:#d9a287;border-color:#d9a287}.custom-theme .el-button--danger.is-plain{color:#b3450e;background:#f7ece7;border-color:#e1b59f}.custom-theme .el-button--danger.is-plain:focus,.custom-theme .el-button--danger.is-plain:hover{background:#b3450e;border-color:#b3450e;color:#fff}.custom-theme .el-button--danger.is-plain:active{background:#a13e0d;border-color:#a13e0d;color:#fff;outline:0}.custom-theme .el-button--danger.is-plain.is-disabled,.custom-theme .el-button--danger.is-plain.is-disabled:active,.custom-theme .el-button--danger.is-plain.is-disabled:focus,.custom-theme .el-button--danger.is-plain.is-disabled:hover{color:#d18f6e;background-color:#f7ece7;border-color:#f0dacf}.custom-theme .el-button--info{color:#fff;background-color:#0a76a4;border-color:#0a76a4}.custom-theme .el-button--info:focus,.custom-theme .el-button--info:hover{background:#3b91b6;border-color:#3b91b6;color:#fff}.custom-theme .el-button--info:active{background:#096a94;border-color:#096a94;color:#fff;outline:0}.custom-theme .el-button--info.is-active{background:#096a94;border-color:#096a94;color:#fff}.custom-theme .el-button--info.is-disabled,.custom-theme .el-button--info.is-disabled:active,.custom-theme .el-button--info.is-disabled:focus,.custom-theme .el-button--info.is-disabled:hover{color:#fff;background-color:#85bbd2;border-color:#85bbd2}.custom-theme .el-button--info.is-plain{color:#0a76a4;background:#e7f1f6;border-color:#9dc8db}.custom-theme .el-button--info.is-plain:focus,.custom-theme .el-button--info.is-plain:hover{background:#0a76a4;border-color:#0a76a4;color:#fff}.custom-theme .el-button--info.is-plain:active{background:#096a94;border-color:#096a94;color:#fff;outline:0}.custom-theme .el-button--info.is-plain.is-disabled,.custom-theme .el-button--info.is-plain.is-disabled:active,.custom-theme .el-button--info.is-plain.is-disabled:focus,.custom-theme .el-button--info.is-plain.is-disabled:hover{color:#6cadc8;background-color:#e7f1f6;border-color:#cee4ed}.custom-theme .el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.custom-theme .el-button--medium.is-round{padding:10px 20px}.custom-theme .el-button--small{padding:9px 15px;font-size:12px;border-radius:3px}.custom-theme .el-button--small.is-round{padding:9px 15px}.custom-theme .el-button--mini{padding:7px 15px;font-size:12px;border-radius:3px}.custom-theme .el-button--mini.is-round{padding:7px 15px}.custom-theme .el-button--text{border:none;color:#262729;background:0 0;padding-left:0;padding-right:0}.custom-theme .el-button--text:focus,.custom-theme .el-button--text:hover{color:#515254;border-color:transparent;background-color:transparent}.custom-theme .el-button--text:active{color:#222325;border-color:transparent;background-color:transparent}.custom-theme .el-button-group{display:inline-block;vertical-align:middle}.custom-theme .el-button-group::after,.custom-theme .el-button-group::before{display:table;content:""}.custom-theme .el-button-group::after{clear:both}.custom-theme .el-button-group .el-button{float:left;position:relative}.custom-theme .el-button-group .el-button+.el-button{margin-left:0}.custom-theme .el-button-group .el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.custom-theme .el-button-group .el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.custom-theme .el-button-group .el-button:not(:first-child):not(:last-child){border-radius:0}.custom-theme .el-button-group .el-button:not(:last-child){margin-right:-1px}.custom-theme .el-button-group .el-button:active,.custom-theme .el-button-group .el-button:focus,.custom-theme .el-button-group .el-button:hover{z-index:1}.custom-theme .el-button-group .el-button.is-active{z-index:1}.custom-theme .el-button-group .el-button--primary:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--primary:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:first-child{border-right-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:last-child{border-left-color:rgba(255,255,255,.5)}.custom-theme .el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.custom-theme .el-checkbox{color:#5a5e66;font-weight:500;font-size:14px;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.custom-theme .el-checkbox.is-bordered{padding:9px 20px 9px 10px;border-radius:4px;border:1px solid #d8dce5}.custom-theme .el-checkbox.is-bordered.is-checked{border-color:#262729}.custom-theme .el-checkbox.is-bordered.is-disabled{border-color:#e6ebf5;cursor:not-allowed}.custom-theme .el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:10px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium{padding:7px 20px 7px 10px;border-radius:4px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label{line-height:17px;font-size:14px}.custom-theme .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner{height:14px;width:14px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small{padding:3px 15px 7px 10px;border-radius:3px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label{line-height:15px;font-size:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner{height:12px;width:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after{height:6px;width:2px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini{padding:1px 15px 5px 10px;border-radius:3px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label{line-height:12px;font-size:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner{height:12px;width:12px}.custom-theme .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after{height:6px;width:2px}.custom-theme .el-checkbox__input{white-space:nowrap;cursor:pointer;outline:0;display:inline-block;line-height:1;position:relative;vertical-align:middle}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5;cursor:not-allowed}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner::after{cursor:not-allowed;border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.custom-theme .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5}.custom-theme .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#edf2fc;border-color:#d8dce5}.custom-theme .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before{background-color:#b4bccc;border-color:#b4bccc}.custom-theme .el-checkbox__input.is-disabled+span.el-checkbox__label{color:#b4bccc;cursor:not-allowed}.custom-theme .el-checkbox__input.is-checked .el-checkbox__inner{background-color:#262729;border-color:#262729}.custom-theme .el-checkbox__input.is-checked .el-checkbox__inner::after{-webkit-transform:rotate(45deg) scaleY(1);transform:rotate(45deg) scaleY(1)}.custom-theme .el-checkbox__input.is-checked+.el-checkbox__label{color:#262729}.custom-theme .el-checkbox__input.is-focus .el-checkbox__inner{border-color:#262729}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#262729;border-color:#262729}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{content:'';position:absolute;display:block;background-color:#fff;height:2px;-webkit-transform:scale(.5);transform:scale(.5);left:0;right:0;top:5px}.custom-theme .el-checkbox__input.is-indeterminate .el-checkbox__inner::after{display:none}.custom-theme .el-checkbox__inner{display:inline-block;position:relative;border:1px solid #d8dce5;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;-webkit-transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.custom-theme .el-checkbox__inner:hover{border-color:#262729}.custom-theme .el-checkbox__inner::after{-webkit-box-sizing:content-box;box-sizing:content-box;content:"";border:1px solid #fff;border-left:0;border-top:0;height:7px;left:4px;position:absolute;top:1px;-webkit-transform:rotate(45deg) scaleY(0);transform:rotate(45deg) scaleY(0);width:3px;-webkit-transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms,-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6) 50ms;-webkit-transform-origin:center;transform-origin:center}.custom-theme .el-checkbox__original{opacity:0;outline:0;position:absolute;margin:0;width:0;height:0;left:-999px}.custom-theme .el-checkbox__label{display:inline-block;padding-left:10px;line-height:19px;font-size:14px}.custom-theme .el-checkbox+.el-checkbox{margin-left:30px}.custom-theme .el-checkbox-button{position:relative;display:inline-block}.custom-theme .el-checkbox-button__inner{display:inline-block;line-height:1;font-weight:500;white-space:nowrap;vertical-align:middle;cursor:pointer;background:#fff;border:1px solid #d8dce5;border-left:0;color:#5a5e66;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;margin:0;position:relative;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:0}.custom-theme .el-checkbox-button__inner.is-round{padding:12px 20px}.custom-theme .el-checkbox-button__inner:hover{color:#262729}.custom-theme .el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.custom-theme .el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.custom-theme .el-checkbox-button__original{opacity:0;outline:0;position:absolute;margin:0;left:-999px}.custom-theme .el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#262729;border-color:#262729;-webkit-box-shadow:-1px 0 0 0 #7d7d7f;box-shadow:-1px 0 0 0 #7d7d7f}.custom-theme .el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#b4bccc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#e6ebf5;-webkit-box-shadow:none;box-shadow:none}.custom-theme .el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #d8dce5;border-radius:4px 0 0 4px;-webkit-box-shadow:none!important;box-shadow:none!important}.custom-theme .el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#262729}.custom-theme .el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.custom-theme .el-checkbox-button--medium .el-checkbox-button__inner{padding:10px 20px;font-size:14px;border-radius:0}.custom-theme .el-checkbox-button--medium .el-checkbox-button__inner.is-round{padding:10px 20px}.custom-theme .el-checkbox-button--small .el-checkbox-button__inner{padding:9px 15px;font-size:12px;border-radius:0}.custom-theme .el-checkbox-button--small .el-checkbox-button__inner.is-round{padding:9px 15px}.custom-theme .el-checkbox-button--mini .el-checkbox-button__inner{padding:7px 15px;font-size:12px;border-radius:0}.custom-theme .el-checkbox-button--mini .el-checkbox-button__inner.is-round{padding:7px 15px}.custom-theme .el-checkbox-group{font-size:0}.custom-theme .el-transfer{font-size:14px}.custom-theme .el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 30px}.custom-theme .el-transfer__button{display:block;margin:0 auto;padding:10px;border-radius:50%;color:#fff;background-color:#262729;font-size:0}.custom-theme .el-transfer__button.is-with-texts{border-radius:4px}.custom-theme .el-transfer__button.is-disabled{border:1px solid #d8dce5;background-color:#f5f7fa;color:#b4bccc}.custom-theme .el-transfer__button.is-disabled:hover{border:1px solid #d8dce5;background-color:#f5f7fa;color:#b4bccc}.custom-theme .el-transfer__button:first-child{margin-bottom:10px}.custom-theme .el-transfer__button:nth-child(2){margin:0}.custom-theme .el-transfer__button i,.custom-theme .el-transfer__button span{font-size:14px}.custom-theme .el-transfer__button [class*=el-icon-]+span{margin-left:0}.custom-theme .el-transfer-panel{border:1px solid #e6ebf5;border-radius:4px;overflow:hidden;background:#fff;display:inline-block;vertical-align:middle;width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}.custom-theme .el-transfer-panel__body{height:246px}.custom-theme .el-transfer-panel__body.is-with-footer{padding-bottom:40px}.custom-theme .el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-transfer-panel__list.is-filterable{height:194px;padding-top:0}.custom-theme .el-transfer-panel__item{height:30px;line-height:30px;padding-left:15px;display:block}.custom-theme .el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.custom-theme .el-transfer-panel__item.el-checkbox{color:#5a5e66}.custom-theme .el-transfer-panel__item:hover{color:#262729}.custom-theme .el-transfer-panel__item.el-checkbox .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:24px;line-height:30px}.custom-theme .el-transfer-panel__item .el-checkbox__input{position:absolute;top:8px}.custom-theme .el-transfer-panel__filter{text-align:center;margin:15px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:auto}.custom-theme .el-transfer-panel__filter .el-input__inner{height:32px;width:100%;font-size:12px;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:16px;padding-right:10px;padding-left:30px}.custom-theme .el-transfer-panel__filter .el-input__icon{margin-left:5px}.custom-theme .el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.custom-theme .el-transfer-panel .el-transfer-panel__header{height:40px;line-height:40px;background:#f5f7fa;margin:0;padding-left:15px;border-bottom:1px solid #e6ebf5;-webkit-box-sizing:border-box;box-sizing:border-box;color:#000}.custom-theme .el-transfer-panel .el-transfer-panel__header .el-checkbox{display:block;line-height:40px}.custom-theme .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{font-size:16px;color:#2d2f33;font-weight:400}.custom-theme .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span{position:absolute;right:15px;color:#878d99;font-size:12px;font-weight:400}.custom-theme .el-transfer-panel .el-transfer-panel__footer{height:40px;background:#fff;margin:0;padding:0;border-top:1px solid #e6ebf5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.custom-theme .el-transfer-panel .el-transfer-panel__footer::after{display:inline-block;content:"";height:100%;vertical-align:middle}.custom-theme .el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#5a5e66}.custom-theme .el-transfer-panel .el-transfer-panel__empty{margin:0;height:30px;line-height:30px;padding:6px 15px 0;color:#878d99}.custom-theme .el-transfer-panel .el-checkbox__label{padding-left:8px}.custom-theme .el-transfer-panel .el-checkbox__inner{height:14px;width:14px;border-radius:3px}.custom-theme .el-transfer-panel .el-checkbox__inner::after{height:6px;width:3px;left:4px}.custom-theme .el-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-container.is-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.custom-theme .el-header{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-aside{overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.custom-theme .el-main{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;padding:20px}.custom-theme .el-footer{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box} | |
0 | 2 | \ No newline at end of file | ... | ... |
src/common/Header.vue
... | ... | @@ -1,191 +0,0 @@ |
1 | -<template> | |
2 | - <div class="header"> | |
3 | - <!-- 折叠按钮 --> | |
4 | - <div class="collapse-btn" @click="collapseChage"> | |
5 | - <i v-if="!collapse" class="el-icon-s-fold"></i> | |
6 | - <i v-else class="el-icon-s-unfold"></i> | |
7 | - </div> | |
8 | - <div class="logo">后台管理系统</div> | |
9 | - <div class="header-right"> | |
10 | - <div class="header-user-con"> | |
11 | - <!-- 全屏显示 --> | |
12 | - <div class="btn-fullscreen" @click="handleFullScreen"> | |
13 | - <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"> | |
14 | - <i class="el-icon-rank"></i> | |
15 | - </el-tooltip> | |
16 | - </div> | |
17 | - <!-- 消息中心 --> | |
18 | - <div class="btn-bell"> | |
19 | - <el-tooltip | |
20 | - effect="dark" | |
21 | - :content="message?`有${message}条未读消息`:`消息中心`" | |
22 | - placement="bottom" | |
23 | - > | |
24 | - <router-link to="/tabs"> | |
25 | - <i class="el-icon-bell"></i> | |
26 | - </router-link> | |
27 | - </el-tooltip> | |
28 | - <span class="btn-bell-badge" v-if="message"></span> | |
29 | - </div> | |
30 | - <!-- 用户头像 --> | |
31 | - <div class="user-avator"> | |
32 | - <img src="../assets/img/img.jpg" /> | |
33 | - </div> | |
34 | - <!-- 用户名下拉菜单 --> | |
35 | - <el-dropdown class="user-name" trigger="click" @command="handleCommand"> | |
36 | - <span class="el-dropdown-link"> | |
37 | - {{username}} | |
38 | - <i class="el-icon-caret-bottom"></i> | |
39 | - </span> | |
40 | - <el-dropdown-menu slot="dropdown"> | |
41 | - <a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> | |
42 | - <el-dropdown-item>项目仓库</el-dropdown-item> | |
43 | - </a> | |
44 | - <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> | |
45 | - </el-dropdown-menu> | |
46 | - </el-dropdown> | |
47 | - </div> | |
48 | - </div> | |
49 | - </div> | |
50 | -</template> | |
51 | -<script> | |
52 | -import bus from './bus'; | |
53 | -export default { | |
54 | - data() { | |
55 | - return { | |
56 | - collapse: false, | |
57 | - fullscreen: false, | |
58 | - name: 'linxin', | |
59 | - message: 2 | |
60 | - }; | |
61 | - }, | |
62 | - computed: { | |
63 | - username() { | |
64 | - let username = localStorage.getItem('ms_username'); | |
65 | - return username ? username : this.name; | |
66 | - } | |
67 | - }, | |
68 | - methods: { | |
69 | - // 用户名下拉菜单选择事件 | |
70 | - handleCommand(command) { | |
71 | - if (command == 'loginout') { | |
72 | - localStorage.removeItem('ms_username'); | |
73 | - this.$router.push('/login'); | |
74 | - } | |
75 | - }, | |
76 | - // 侧边栏折叠 | |
77 | - collapseChage() { | |
78 | - this.collapse = !this.collapse; | |
79 | - bus.$emit('collapse', this.collapse); | |
80 | - }, | |
81 | - // 全屏事件 | |
82 | - handleFullScreen() { | |
83 | - let element = document.documentElement; | |
84 | - if (this.fullscreen) { | |
85 | - if (document.exitFullscreen) { | |
86 | - document.exitFullscreen(); | |
87 | - } else if (document.webkitCancelFullScreen) { | |
88 | - document.webkitCancelFullScreen(); | |
89 | - } else if (document.mozCancelFullScreen) { | |
90 | - document.mozCancelFullScreen(); | |
91 | - } else if (document.msExitFullscreen) { | |
92 | - document.msExitFullscreen(); | |
93 | - } | |
94 | - } else { | |
95 | - if (element.requestFullscreen) { | |
96 | - element.requestFullscreen(); | |
97 | - } else if (element.webkitRequestFullScreen) { | |
98 | - element.webkitRequestFullScreen(); | |
99 | - } else if (element.mozRequestFullScreen) { | |
100 | - element.mozRequestFullScreen(); | |
101 | - } else if (element.msRequestFullscreen) { | |
102 | - // IE11 | |
103 | - element.msRequestFullscreen(); | |
104 | - } | |
105 | - } | |
106 | - this.fullscreen = !this.fullscreen; | |
107 | - } | |
108 | - }, | |
109 | - mounted() { | |
110 | - if (document.body.clientWidth < 1500) { | |
111 | - this.collapseChage(); | |
112 | - } | |
113 | - } | |
114 | -}; | |
115 | -</script> | |
116 | -<style scoped> | |
117 | -.header { | |
118 | - position: relative; | |
119 | - box-sizing: border-box; | |
120 | - width: 100%; | |
121 | - height: 70px; | |
122 | - font-size: 22px; | |
123 | - color: #fff; | |
124 | -} | |
125 | -.collapse-btn { | |
126 | - float: left; | |
127 | - padding: 0 21px; | |
128 | - cursor: pointer; | |
129 | - line-height: 70px; | |
130 | -} | |
131 | -.header .logo { | |
132 | - float: left; | |
133 | - width: 250px; | |
134 | - line-height: 70px; | |
135 | -} | |
136 | -.header-right { | |
137 | - float: right; | |
138 | - padding-right: 50px; | |
139 | -} | |
140 | -.header-user-con { | |
141 | - display: flex; | |
142 | - height: 70px; | |
143 | - align-items: center; | |
144 | -} | |
145 | -.btn-fullscreen { | |
146 | - transform: rotate(45deg); | |
147 | - margin-right: 5px; | |
148 | - font-size: 24px; | |
149 | -} | |
150 | -.btn-bell, | |
151 | -.btn-fullscreen { | |
152 | - position: relative; | |
153 | - width: 30px; | |
154 | - height: 30px; | |
155 | - text-align: center; | |
156 | - border-radius: 15px; | |
157 | - cursor: pointer; | |
158 | -} | |
159 | -.btn-bell-badge { | |
160 | - position: absolute; | |
161 | - right: 0; | |
162 | - top: -2px; | |
163 | - width: 8px; | |
164 | - height: 8px; | |
165 | - border-radius: 4px; | |
166 | - background: #f56c6c; | |
167 | - color: #fff; | |
168 | -} | |
169 | -.btn-bell .el-icon-bell { | |
170 | - color: #fff; | |
171 | -} | |
172 | -.user-name { | |
173 | - margin-left: 10px; | |
174 | -} | |
175 | -.user-avator { | |
176 | - margin-left: 20px; | |
177 | -} | |
178 | -.user-avator img { | |
179 | - display: block; | |
180 | - width: 40px; | |
181 | - height: 40px; | |
182 | - border-radius: 50%; | |
183 | -} | |
184 | -.el-dropdown-link { | |
185 | - color: #fff; | |
186 | - cursor: pointer; | |
187 | -} | |
188 | -.el-dropdown-menu__item { | |
189 | - text-align: center; | |
190 | -} | |
191 | -</style> | |
192 | 0 | \ No newline at end of file |
src/common/Home.vue
... | ... | @@ -1,50 +0,0 @@ |
1 | -<template> | |
2 | - <div class="wrapper"> | |
3 | - <v-head></v-head> | |
4 | - <v-sidebar></v-sidebar> | |
5 | - <div class="content-box" :class="{'content-collapse':collapse}"> | |
6 | - <v-tags></v-tags> | |
7 | - <div class="content"> | |
8 | - <transition name="move" mode="out-in"> | |
9 | - <keep-alive :include="tagsList"> | |
10 | - <router-view></router-view> | |
11 | - </keep-alive> | |
12 | - </transition> | |
13 | - <el-backtop target=".content"></el-backtop> | |
14 | - </div> | |
15 | - </div> | |
16 | - </div> | |
17 | -</template> | |
18 | - | |
19 | -<script> | |
20 | -import vHead from './Header.vue'; | |
21 | -import vSidebar from './Sidebar.vue'; | |
22 | -import vTags from './Tags.vue'; | |
23 | -import bus from './bus'; | |
24 | -export default { | |
25 | - data() { | |
26 | - return { | |
27 | - tagsList: [], | |
28 | - collapse: false | |
29 | - }; | |
30 | - }, | |
31 | - components: { | |
32 | - vHead, | |
33 | - vSidebar, | |
34 | - vTags | |
35 | - }, | |
36 | - created() { | |
37 | - bus.$on('collapse-content', msg => { | |
38 | - this.collapse = msg; | |
39 | - }); | |
40 | - // 只有在标签页列表里的页面才使用keep-alive,即关闭标签之后就不保存到内存中了。 | |
41 | - bus.$on('tags', msg => { | |
42 | - let arr = []; | |
43 | - for (let i = 0, len = msg.length; i < len; i++) { | |
44 | - msg[i].name && arr.push(msg[i].name); | |
45 | - } | |
46 | - this.tagsList = arr; | |
47 | - }); | |
48 | - } | |
49 | -}; | |
50 | -</script> | |
51 | 0 | \ No newline at end of file |
src/common/Sidebar.vue
... | ... | @@ -1,189 +0,0 @@ |
1 | -<template> | |
2 | - <div class="sidebar"> | |
3 | - <el-menu | |
4 | - class="sidebar-el-menu" | |
5 | - :default-active="onRoutes" | |
6 | - :collapse="collapse" | |
7 | - background-color="#324157" | |
8 | - text-color="#bfcbd9" | |
9 | - active-text-color="#20a0ff" | |
10 | - unique-opened | |
11 | - router | |
12 | - > | |
13 | - <template v-for="item in items"> | |
14 | - <template v-if="item.subs"> | |
15 | - <el-submenu :index="item.index" :key="item.index"> | |
16 | - <template slot="title"> | |
17 | - <i :class="item.icon"></i> | |
18 | - <span slot="title">{{ item.title }}</span> | |
19 | - </template> | |
20 | - <template v-for="subItem in item.subs"> | |
21 | - <el-submenu | |
22 | - v-if="subItem.subs" | |
23 | - :index="subItem.index" | |
24 | - :key="subItem.index" | |
25 | - > | |
26 | - <template slot="title">{{ subItem.title }}</template> | |
27 | - <el-menu-item | |
28 | - v-for="(threeItem,i) in subItem.subs" | |
29 | - :key="i" | |
30 | - :index="threeItem.index" | |
31 | - >{{ threeItem.title }}</el-menu-item> | |
32 | - </el-submenu> | |
33 | - <el-menu-item | |
34 | - v-else | |
35 | - :index="subItem.index" | |
36 | - :key="subItem.index" | |
37 | - >{{ subItem.title }}</el-menu-item> | |
38 | - </template> | |
39 | - </el-submenu> | |
40 | - </template> | |
41 | - <template v-else> | |
42 | - <el-menu-item :index="item.index" :key="item.index"> | |
43 | - <i :class="item.icon"></i> | |
44 | - <span slot="title">{{ item.title }}</span> | |
45 | - </el-menu-item> | |
46 | - </template> | |
47 | - </template> | |
48 | - </el-menu> | |
49 | - </div> | |
50 | -</template> | |
51 | - | |
52 | -<script> | |
53 | -import bus from './bus'; | |
54 | -export default { | |
55 | - data() { | |
56 | - return { | |
57 | - collapse: false, | |
58 | - items: [ | |
59 | - { | |
60 | - icon: 'el-icon-lx-home', | |
61 | - index: 'dashboard', | |
62 | - title: '系统首页' | |
63 | - }, | |
64 | - { | |
65 | - icon: 'el-icon-lx-cascades', | |
66 | - index: 'table', | |
67 | - title: '基础表格' | |
68 | - }, | |
69 | - { | |
70 | - icon: 'el-icon-lx-copy', | |
71 | - index: 'tabs', | |
72 | - title: 'tab选项卡' | |
73 | - }, | |
74 | - { | |
75 | - icon: 'el-icon-lx-calendar', | |
76 | - index: '3', | |
77 | - title: '表单相关', | |
78 | - subs: [ | |
79 | - { | |
80 | - index: 'form', | |
81 | - title: '基本表单' | |
82 | - }, | |
83 | - { | |
84 | - index: '3-2', | |
85 | - title: '三级菜单', | |
86 | - subs: [ | |
87 | - { | |
88 | - index: 'editor', | |
89 | - title: '富文本编辑器' | |
90 | - }, | |
91 | - { | |
92 | - index: 'markdown', | |
93 | - title: 'markdown编辑器' | |
94 | - } | |
95 | - ] | |
96 | - }, | |
97 | - { | |
98 | - index: 'upload', | |
99 | - title: '文件上传' | |
100 | - } | |
101 | - ] | |
102 | - }, | |
103 | - { | |
104 | - icon: 'el-icon-lx-emoji', | |
105 | - index: 'icon', | |
106 | - title: '自定义图标' | |
107 | - }, | |
108 | - { | |
109 | - icon: 'el-icon-pie-chart', | |
110 | - index: 'charts', | |
111 | - title: 'schart图表' | |
112 | - }, | |
113 | - { | |
114 | - icon: 'el-icon-rank', | |
115 | - index: '6', | |
116 | - title: '拖拽组件', | |
117 | - subs: [ | |
118 | - { | |
119 | - index: 'drag', | |
120 | - title: '拖拽列表' | |
121 | - }, | |
122 | - { | |
123 | - index: 'dialog', | |
124 | - title: '拖拽弹框' | |
125 | - } | |
126 | - ] | |
127 | - }, | |
128 | - { | |
129 | - icon: 'el-icon-lx-global', | |
130 | - index: 'i18n', | |
131 | - title: '国际化功能' | |
132 | - }, | |
133 | - { | |
134 | - icon: 'el-icon-lx-warn', | |
135 | - index: '7', | |
136 | - title: '错误处理', | |
137 | - subs: [ | |
138 | - { | |
139 | - index: 'permission', | |
140 | - title: '权限测试' | |
141 | - }, | |
142 | - { | |
143 | - index: '404', | |
144 | - title: '404页面' | |
145 | - } | |
146 | - ] | |
147 | - }, | |
148 | - { | |
149 | - icon: 'el-icon-lx-redpacket_fill', | |
150 | - index: '/donate', | |
151 | - title: '支持作者' | |
152 | - } | |
153 | - ] | |
154 | - }; | |
155 | - }, | |
156 | - computed: { | |
157 | - onRoutes() { | |
158 | - return this.$route.path.replace('/', ''); | |
159 | - } | |
160 | - }, | |
161 | - created() { | |
162 | - // 通过 Event Bus 进行组件间通信,来折叠侧边栏 | |
163 | - bus.$on('collapse', msg => { | |
164 | - this.collapse = msg; | |
165 | - bus.$emit('collapse-content', msg); | |
166 | - }); | |
167 | - } | |
168 | -}; | |
169 | -</script> | |
170 | - | |
171 | -<style scoped> | |
172 | -.sidebar { | |
173 | - display: block; | |
174 | - position: absolute; | |
175 | - left: 0; | |
176 | - top: 70px; | |
177 | - bottom: 0; | |
178 | - overflow-y: scroll; | |
179 | -} | |
180 | -.sidebar::-webkit-scrollbar { | |
181 | - width: 0; | |
182 | -} | |
183 | -.sidebar-el-menu:not(.el-menu--collapse) { | |
184 | - width: 250px; | |
185 | -} | |
186 | -.sidebar > ul { | |
187 | - height: 100%; | |
188 | -} | |
189 | -</style> | |
190 | 0 | \ No newline at end of file |
src/common/Tags.vue
... | ... | @@ -1,177 +0,0 @@ |
1 | -<template> | |
2 | - <div class="tags" v-if="showTags"> | |
3 | - <ul> | |
4 | - <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> | |
5 | - <router-link :to="item.path" class="tags-li-title"> | |
6 | - {{item.title}} | |
7 | - </router-link> | |
8 | - <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> | |
9 | - </li> | |
10 | - </ul> | |
11 | - <div class="tags-close-box"> | |
12 | - <el-dropdown @command="handleTags"> | |
13 | - <el-button size="mini" type="primary"> | |
14 | - 标签选项<i class="el-icon-arrow-down el-icon--right"></i> | |
15 | - </el-button> | |
16 | - <el-dropdown-menu size="small" slot="dropdown"> | |
17 | - <el-dropdown-item command="other">关闭其他</el-dropdown-item> | |
18 | - <el-dropdown-item command="all">关闭所有</el-dropdown-item> | |
19 | - </el-dropdown-menu> | |
20 | - </el-dropdown> | |
21 | - </div> | |
22 | - </div> | |
23 | -</template> | |
24 | - | |
25 | -<script> | |
26 | - import bus from './bus'; | |
27 | - export default { | |
28 | - data() { | |
29 | - return { | |
30 | - tagsList: [] | |
31 | - } | |
32 | - }, | |
33 | - methods: { | |
34 | - isActive(path) { | |
35 | - return path === this.$route.fullPath; | |
36 | - }, | |
37 | - // 关闭单个标签 | |
38 | - closeTags(index) { | |
39 | - const delItem = this.tagsList.splice(index, 1)[0]; | |
40 | - const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]; | |
41 | - if (item) { | |
42 | - delItem.path === this.$route.fullPath && this.$router.push(item.path); | |
43 | - }else{ | |
44 | - this.$router.push('/'); | |
45 | - } | |
46 | - }, | |
47 | - // 关闭全部标签 | |
48 | - closeAll(){ | |
49 | - this.tagsList = []; | |
50 | - this.$router.push('/'); | |
51 | - }, | |
52 | - // 关闭其他标签 | |
53 | - closeOther(){ | |
54 | - const curItem = this.tagsList.filter(item => { | |
55 | - return item.path === this.$route.fullPath; | |
56 | - }) | |
57 | - this.tagsList = curItem; | |
58 | - }, | |
59 | - // 设置标签 | |
60 | - setTags(route){ | |
61 | - const isExist = this.tagsList.some(item => { | |
62 | - return item.path === route.fullPath; | |
63 | - }) | |
64 | - if(!isExist){ | |
65 | - if(this.tagsList.length >= 8){ | |
66 | - this.tagsList.shift(); | |
67 | - } | |
68 | - this.tagsList.push({ | |
69 | - title: route.meta.title, | |
70 | - path: route.fullPath, | |
71 | - name: route.matched[1].components.default.name | |
72 | - }) | |
73 | - } | |
74 | - bus.$emit('tags', this.tagsList); | |
75 | - }, | |
76 | - handleTags(command){ | |
77 | - command === 'other' ? this.closeOther() : this.closeAll(); | |
78 | - } | |
79 | - }, | |
80 | - computed: { | |
81 | - showTags() { | |
82 | - return this.tagsList.length > 0; | |
83 | - } | |
84 | - }, | |
85 | - watch:{ | |
86 | - $route(newValue, oldValue){ | |
87 | - this.setTags(newValue); | |
88 | - } | |
89 | - }, | |
90 | - created(){ | |
91 | - this.setTags(this.$route); | |
92 | - // 监听关闭当前页面的标签页 | |
93 | - bus.$on('close_current_tags', () => { | |
94 | - for (let i = 0, len = this.tagsList.length; i < len; i++) { | |
95 | - const item = this.tagsList[i]; | |
96 | - if(item.path === this.$route.fullPath){ | |
97 | - if(i < len - 1){ | |
98 | - this.$router.push(this.tagsList[i+1].path); | |
99 | - }else if(i > 0){ | |
100 | - this.$router.push(this.tagsList[i-1].path); | |
101 | - }else{ | |
102 | - this.$router.push('/'); | |
103 | - } | |
104 | - this.tagsList.splice(i, 1); | |
105 | - break; | |
106 | - } | |
107 | - } | |
108 | - }) | |
109 | - } | |
110 | - } | |
111 | -</script> | |
112 | - | |
113 | - | |
114 | -<style> | |
115 | - .tags { | |
116 | - position: relative; | |
117 | - height: 30px; | |
118 | - overflow: hidden; | |
119 | - background: #fff; | |
120 | - padding-right: 120px; | |
121 | - box-shadow: 0 5px 10px #ddd; | |
122 | - } | |
123 | - .tags ul { | |
124 | - box-sizing: border-box; | |
125 | - width: 100%; | |
126 | - height: 100%; | |
127 | - } | |
128 | - .tags-li { | |
129 | - float: left; | |
130 | - margin: 3px 5px 2px 3px; | |
131 | - border-radius: 3px; | |
132 | - font-size: 12px; | |
133 | - overflow: hidden; | |
134 | - cursor: pointer; | |
135 | - height: 23px; | |
136 | - line-height: 23px; | |
137 | - border: 1px solid #e9eaec; | |
138 | - background: #fff; | |
139 | - padding: 0 5px 0 12px; | |
140 | - vertical-align: middle; | |
141 | - color: #666; | |
142 | - -webkit-transition: all .3s ease-in; | |
143 | - -moz-transition: all .3s ease-in; | |
144 | - transition: all .3s ease-in; | |
145 | - } | |
146 | - .tags-li:not(.active):hover { | |
147 | - background: #f8f8f8; | |
148 | - } | |
149 | - .tags-li.active { | |
150 | - color: #fff; | |
151 | - } | |
152 | - .tags-li-title { | |
153 | - float: left; | |
154 | - max-width: 80px; | |
155 | - overflow: hidden; | |
156 | - white-space: nowrap; | |
157 | - text-overflow: ellipsis; | |
158 | - margin-right: 5px; | |
159 | - color: #666; | |
160 | - } | |
161 | - .tags-li.active .tags-li-title { | |
162 | - color: #fff; | |
163 | - } | |
164 | - .tags-close-box { | |
165 | - position: absolute; | |
166 | - right: 0; | |
167 | - top: 0; | |
168 | - box-sizing: border-box; | |
169 | - padding-top: 1px; | |
170 | - text-align: center; | |
171 | - width: 110px; | |
172 | - height: 30px; | |
173 | - background: #fff; | |
174 | - box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1); | |
175 | - z-index: 10; | |
176 | - } | |
177 | -</style> | |
178 | 0 | \ No newline at end of file |
src/common/bus.js
src/common/directives.js
... | ... | @@ -1,80 +0,0 @@ |
1 | -import Vue from 'vue'; | |
2 | - | |
3 | -// v-dialogDrag: 弹窗拖拽属性 | |
4 | -Vue.directive('dialogDrag', { | |
5 | - bind(el, binding, vnode, oldVnode) { | |
6 | - const dialogHeaderEl = el.querySelector('.el-dialog__header'); | |
7 | - const dragDom = el.querySelector('.el-dialog'); | |
8 | - | |
9 | - dialogHeaderEl.style.cssText += ';cursor:move;' | |
10 | - dragDom.style.cssText += ';top:0px;' | |
11 | - | |
12 | - // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); | |
13 | - const sty = (() => { | |
14 | - if (window.document.currentStyle) { | |
15 | - return (dom, attr) => dom.currentStyle[attr]; | |
16 | - } else { | |
17 | - return (dom, attr) => getComputedStyle(dom, false)[attr]; | |
18 | - } | |
19 | - })() | |
20 | - | |
21 | - dialogHeaderEl.onmousedown = (e) => { | |
22 | - // 鼠标按下,计算当前元素距离可视区的距离 | |
23 | - const disX = e.clientX - dialogHeaderEl.offsetLeft; | |
24 | - const disY = e.clientY - dialogHeaderEl.offsetTop; | |
25 | - | |
26 | - const screenWidth = document.body.clientWidth; // body当前宽度 | |
27 | - const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度,可某些环境下无法获取) | |
28 | - | |
29 | - const dragDomWidth = dragDom.offsetWidth; // 对话框宽度 | |
30 | - const dragDomheight = dragDom.offsetHeight; // 对话框高度 | |
31 | - | |
32 | - const minDragDomLeft = dragDom.offsetLeft; | |
33 | - const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; | |
34 | - | |
35 | - const minDragDomTop = dragDom.offsetTop; | |
36 | - const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; | |
37 | - | |
38 | - | |
39 | - // 获取到的值带px 正则匹配替换 | |
40 | - let styL = sty(dragDom, 'left'); | |
41 | - let styT = sty(dragDom, 'top'); | |
42 | - | |
43 | - // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px | |
44 | - if (styL.includes('%')) { | |
45 | - styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); | |
46 | - styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); | |
47 | - } else { | |
48 | - styL = +styL.replace(/\px/g, ''); | |
49 | - styT = +styT.replace(/\px/g, ''); | |
50 | - }; | |
51 | - | |
52 | - document.onmousemove = function (e) { | |
53 | - // 通过事件委托,计算移动的距离 | |
54 | - let left = e.clientX - disX; | |
55 | - let top = e.clientY - disY; | |
56 | - | |
57 | - // 边界处理 | |
58 | - if (-(left) > minDragDomLeft) { | |
59 | - left = -(minDragDomLeft); | |
60 | - } else if (left > maxDragDomLeft) { | |
61 | - left = maxDragDomLeft; | |
62 | - } | |
63 | - | |
64 | - if (-(top) > minDragDomTop) { | |
65 | - top = -(minDragDomTop); | |
66 | - } else if (top > maxDragDomTop) { | |
67 | - top = maxDragDomTop; | |
68 | - } | |
69 | - | |
70 | - // 移动当前元素 | |
71 | - dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; | |
72 | - }; | |
73 | - | |
74 | - document.onmouseup = function (e) { | |
75 | - document.onmousemove = null; | |
76 | - document.onmouseup = null; | |
77 | - }; | |
78 | - } | |
79 | - } | |
80 | -}) | |
81 | 0 | \ No newline at end of file |
src/common/i18n.js
... | ... | @@ -1,30 +0,0 @@ |
1 | -export const messages = { | |
2 | - 'zh': { | |
3 | - i18n: { | |
4 | - breadcrumb: '国际化产品', | |
5 | - tips: '通过切换语言按钮,来改变当前内容的语言。', | |
6 | - btn: '切换英文', | |
7 | - title1: '常用用法', | |
8 | - p1: '要是你把你的秘密告诉了风,那就别怪风把它带给树。', | |
9 | - p2: '没有什么比信念更能支撑我们度过艰难的时光了。', | |
10 | - p3: '只要能把自己的事做好,并让自己快乐,你就领先于大多数人了。', | |
11 | - title2: '组件插值', | |
12 | - info: 'Element组件需要国际化,请参考 {action}。', | |
13 | - value: '文档' | |
14 | - } | |
15 | - }, | |
16 | - 'en': { | |
17 | - i18n: { | |
18 | - breadcrumb: 'International Products', | |
19 | - tips: 'Click on the button to change the current language. ', | |
20 | - btn: 'Switch Chinese', | |
21 | - title1: 'Common usage', | |
22 | - p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", | |
23 | - p2: "Nothing can help us endure dark times better than our faith. ", | |
24 | - p3: "If you can do what you do best and be happy, you're further along in life than most people.", | |
25 | - title2: 'Component interpolation', | |
26 | - info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.', | |
27 | - value: 'documentation' | |
28 | - } | |
29 | - } | |
30 | -} | |
31 | 0 | \ No newline at end of file |
src/components/BackToTop/index.vue
... | ... | @@ -0,0 +1,111 @@ |
1 | +<template> | |
2 | + <transition :name="transitionName"> | |
3 | + <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"> | |
4 | + <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg> | |
5 | + </div> | |
6 | + </transition> | |
7 | +</template> | |
8 | + | |
9 | +<script> | |
10 | +export default { | |
11 | + name: 'BackToTop', | |
12 | + props: { | |
13 | + visibilityHeight: { | |
14 | + type: Number, | |
15 | + default: 400 | |
16 | + }, | |
17 | + backPosition: { | |
18 | + type: Number, | |
19 | + default: 0 | |
20 | + }, | |
21 | + customStyle: { | |
22 | + type: Object, | |
23 | + default: function() { | |
24 | + return { | |
25 | + right: '50px', | |
26 | + bottom: '50px', | |
27 | + width: '40px', | |
28 | + height: '40px', | |
29 | + 'border-radius': '4px', | |
30 | + 'line-height': '45px', | |
31 | + background: '#e7eaf1' | |
32 | + } | |
33 | + } | |
34 | + }, | |
35 | + transitionName: { | |
36 | + type: String, | |
37 | + default: 'fade' | |
38 | + } | |
39 | + }, | |
40 | + data() { | |
41 | + return { | |
42 | + visible: false, | |
43 | + interval: null, | |
44 | + isMoving: false | |
45 | + } | |
46 | + }, | |
47 | + mounted() { | |
48 | + window.addEventListener('scroll', this.handleScroll) | |
49 | + }, | |
50 | + beforeDestroy() { | |
51 | + window.removeEventListener('scroll', this.handleScroll) | |
52 | + if (this.interval) { | |
53 | + clearInterval(this.interval) | |
54 | + } | |
55 | + }, | |
56 | + methods: { | |
57 | + handleScroll() { | |
58 | + this.visible = window.pageYOffset > this.visibilityHeight | |
59 | + }, | |
60 | + backToTop() { | |
61 | + if (this.isMoving) return | |
62 | + const start = window.pageYOffset | |
63 | + let i = 0 | |
64 | + this.isMoving = true | |
65 | + this.interval = setInterval(() => { | |
66 | + const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500)) | |
67 | + if (next <= this.backPosition) { | |
68 | + window.scrollTo(0, this.backPosition) | |
69 | + clearInterval(this.interval) | |
70 | + this.isMoving = false | |
71 | + } else { | |
72 | + window.scrollTo(0, next) | |
73 | + } | |
74 | + i++ | |
75 | + }, 16.7) | |
76 | + }, | |
77 | + easeInOutQuad(t, b, c, d) { | |
78 | + if ((t /= d / 2) < 1) return c / 2 * t * t + b | |
79 | + return -c / 2 * (--t * (t - 2) - 1) + b | |
80 | + } | |
81 | + } | |
82 | +} | |
83 | +</script> | |
84 | + | |
85 | +<style scoped> | |
86 | +.back-to-ceiling { | |
87 | + position: fixed; | |
88 | + display: inline-block; | |
89 | + text-align: center; | |
90 | + cursor: pointer; | |
91 | +} | |
92 | + | |
93 | +.back-to-ceiling:hover { | |
94 | + background: #d5dbe7; | |
95 | +} | |
96 | + | |
97 | +.fade-enter-active, | |
98 | +.fade-leave-active { | |
99 | + transition: opacity .5s; | |
100 | +} | |
101 | + | |
102 | +.fade-enter, | |
103 | +.fade-leave-to { | |
104 | + opacity: 0 | |
105 | +} | |
106 | + | |
107 | +.back-to-ceiling .Icon { | |
108 | + fill: #9aaabf; | |
109 | + background: none; | |
110 | +} | |
111 | +</style> | ... | ... |
src/components/Breadcrumb/index.vue
... | ... | @@ -2,14 +2,17 @@ |
2 | 2 | <el-breadcrumb class="app-breadcrumb" separator="/"> |
3 | 3 | <transition-group name="breadcrumb"> |
4 | 4 | <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> |
5 | - <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> | |
6 | - <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | |
5 | + <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect"> | |
6 | + {{ generateTitle(item.meta.title) }} | |
7 | + </span> | |
8 | + <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a> | |
7 | 9 | </el-breadcrumb-item> |
8 | 10 | </transition-group> |
9 | 11 | </el-breadcrumb> |
10 | 12 | </template> |
11 | 13 | |
12 | 14 | <script> |
15 | +import { generateTitle } from '@/utils/i18n' | |
13 | 16 | import pathToRegexp from 'path-to-regexp' |
14 | 17 | |
15 | 18 | export default { |
... | ... | @@ -19,7 +22,11 @@ export default { |
19 | 22 | } |
20 | 23 | }, |
21 | 24 | watch: { |
22 | - $route() { | |
25 | + $route(route) { | |
26 | + // if you go to the redirect page, do not update the breadcrumbs | |
27 | + if (route.path.startsWith('/redirect/')) { | |
28 | + return | |
29 | + } | |
23 | 30 | this.getBreadcrumb() |
24 | 31 | } |
25 | 32 | }, |
... | ... | @@ -27,13 +34,14 @@ export default { |
27 | 34 | this.getBreadcrumb() |
28 | 35 | }, |
29 | 36 | methods: { |
37 | + generateTitle, | |
30 | 38 | getBreadcrumb() { |
31 | 39 | // only show routes with meta.title |
32 | 40 | let matched = this.$route.matched.filter(item => item.meta && item.meta.title) |
33 | 41 | const first = matched[0] |
34 | 42 | |
35 | 43 | if (!this.isDashboard(first)) { |
36 | - matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) | |
44 | + matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched) | |
37 | 45 | } |
38 | 46 | |
39 | 47 | this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) | ... | ... |
src/components/Charts/Keyboard.vue
... | ... | @@ -0,0 +1,155 @@ |
1 | +<template> | |
2 | + <div :id="id" :class="className" :style="{height:height,width:width}" /> | |
3 | +</template> | |
4 | + | |
5 | +<script> | |
6 | +import echarts from 'echarts' | |
7 | +import resize from './mixins/resize' | |
8 | + | |
9 | +export default { | |
10 | + mixins: [resize], | |
11 | + props: { | |
12 | + className: { | |
13 | + type: String, | |
14 | + default: 'chart' | |
15 | + }, | |
16 | + id: { | |
17 | + type: String, | |
18 | + default: 'chart' | |
19 | + }, | |
20 | + width: { | |
21 | + type: String, | |
22 | + default: '200px' | |
23 | + }, | |
24 | + height: { | |
25 | + type: String, | |
26 | + default: '200px' | |
27 | + } | |
28 | + }, | |
29 | + data() { | |
30 | + return { | |
31 | + chart: null | |
32 | + } | |
33 | + }, | |
34 | + mounted() { | |
35 | + this.initChart() | |
36 | + }, | |
37 | + beforeDestroy() { | |
38 | + if (!this.chart) { | |
39 | + return | |
40 | + } | |
41 | + this.chart.dispose() | |
42 | + this.chart = null | |
43 | + }, | |
44 | + methods: { | |
45 | + initChart() { | |
46 | + this.chart = echarts.init(document.getElementById(this.id)) | |
47 | + | |
48 | + const xAxisData = [] | |
49 | + const data = [] | |
50 | + const data2 = [] | |
51 | + for (let i = 0; i < 50; i++) { | |
52 | + xAxisData.push(i) | |
53 | + data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5) | |
54 | + data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3) | |
55 | + } | |
56 | + this.chart.setOption({ | |
57 | + backgroundColor: '#08263a', | |
58 | + grid: { | |
59 | + left: '5%', | |
60 | + right: '5%' | |
61 | + }, | |
62 | + xAxis: [{ | |
63 | + show: false, | |
64 | + data: xAxisData | |
65 | + }, { | |
66 | + show: false, | |
67 | + data: xAxisData | |
68 | + }], | |
69 | + visualMap: { | |
70 | + show: false, | |
71 | + min: 0, | |
72 | + max: 50, | |
73 | + dimension: 0, | |
74 | + inRange: { | |
75 | + color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'] | |
76 | + } | |
77 | + }, | |
78 | + yAxis: { | |
79 | + axisLine: { | |
80 | + show: false | |
81 | + }, | |
82 | + axisLabel: { | |
83 | + textStyle: { | |
84 | + color: '#4a657a' | |
85 | + } | |
86 | + }, | |
87 | + splitLine: { | |
88 | + show: true, | |
89 | + lineStyle: { | |
90 | + color: '#08263f' | |
91 | + } | |
92 | + }, | |
93 | + axisTick: { | |
94 | + show: false | |
95 | + } | |
96 | + }, | |
97 | + series: [{ | |
98 | + name: 'back', | |
99 | + type: 'bar', | |
100 | + data: data2, | |
101 | + z: 1, | |
102 | + itemStyle: { | |
103 | + normal: { | |
104 | + opacity: 0.4, | |
105 | + barBorderRadius: 5, | |
106 | + shadowBlur: 3, | |
107 | + shadowColor: '#111' | |
108 | + } | |
109 | + } | |
110 | + }, { | |
111 | + name: 'Simulate Shadow', | |
112 | + type: 'line', | |
113 | + data, | |
114 | + z: 2, | |
115 | + showSymbol: false, | |
116 | + animationDelay: 0, | |
117 | + animationEasing: 'linear', | |
118 | + animationDuration: 1200, | |
119 | + lineStyle: { | |
120 | + normal: { | |
121 | + color: 'transparent' | |
122 | + } | |
123 | + }, | |
124 | + areaStyle: { | |
125 | + normal: { | |
126 | + color: '#08263a', | |
127 | + shadowBlur: 50, | |
128 | + shadowColor: '#000' | |
129 | + } | |
130 | + } | |
131 | + }, { | |
132 | + name: 'front', | |
133 | + type: 'bar', | |
134 | + data, | |
135 | + xAxisIndex: 1, | |
136 | + z: 3, | |
137 | + itemStyle: { | |
138 | + normal: { | |
139 | + barBorderRadius: 5 | |
140 | + } | |
141 | + } | |
142 | + }], | |
143 | + animationEasing: 'elasticOut', | |
144 | + animationEasingUpdate: 'elasticOut', | |
145 | + animationDelay(idx) { | |
146 | + return idx * 20 | |
147 | + }, | |
148 | + animationDelayUpdate(idx) { | |
149 | + return idx * 20 | |
150 | + } | |
151 | + }) | |
152 | + } | |
153 | + } | |
154 | +} | |
155 | +</script> | ... | ... |
src/components/Charts/LineMarker.vue
... | ... | @@ -0,0 +1,227 @@ |
1 | +<template> | |
2 | + <div :id="id" :class="className" :style="{height:height,width:width}" /> | |
3 | +</template> | |
4 | + | |
5 | +<script> | |
6 | +import echarts from 'echarts' | |
7 | +import resize from './mixins/resize' | |
8 | + | |
9 | +export default { | |
10 | + mixins: [resize], | |
11 | + props: { | |
12 | + className: { | |
13 | + type: String, | |
14 | + default: 'chart' | |
15 | + }, | |
16 | + id: { | |
17 | + type: String, | |
18 | + default: 'chart' | |
19 | + }, | |
20 | + width: { | |
21 | + type: String, | |
22 | + default: '200px' | |
23 | + }, | |
24 | + height: { | |
25 | + type: String, | |
26 | + default: '200px' | |
27 | + } | |
28 | + }, | |
29 | + data() { | |
30 | + return { | |
31 | + chart: null | |
32 | + } | |
33 | + }, | |
34 | + mounted() { | |
35 | + this.initChart() | |
36 | + }, | |
37 | + beforeDestroy() { | |
38 | + if (!this.chart) { | |
39 | + return | |
40 | + } | |
41 | + this.chart.dispose() | |
42 | + this.chart = null | |
43 | + }, | |
44 | + methods: { | |
45 | + initChart() { | |
46 | + this.chart = echarts.init(document.getElementById(this.id)) | |
47 | + | |
48 | + this.chart.setOption({ | |
49 | + backgroundColor: '#394056', | |
50 | + title: { | |
51 | + top: 20, | |
52 | + text: 'Requests', | |
53 | + textStyle: { | |
54 | + fontWeight: 'normal', | |
55 | + fontSize: 16, | |
56 | + color: '#F1F1F3' | |
57 | + }, | |
58 | + left: '1%' | |
59 | + }, | |
60 | + tooltip: { | |
61 | + trigger: 'axis', | |
62 | + axisPointer: { | |
63 | + lineStyle: { | |
64 | + color: '#57617B' | |
65 | + } | |
66 | + } | |
67 | + }, | |
68 | + legend: { | |
69 | + top: 20, | |
70 | + icon: 'rect', | |
71 | + itemWidth: 14, | |
72 | + itemHeight: 5, | |
73 | + itemGap: 13, | |
74 | + data: ['CMCC', 'CTCC', 'CUCC'], | |
75 | + right: '4%', | |
76 | + textStyle: { | |
77 | + fontSize: 12, | |
78 | + color: '#F1F1F3' | |
79 | + } | |
80 | + }, | |
81 | + grid: { | |
82 | + top: 100, | |
83 | + left: '2%', | |
84 | + right: '2%', | |
85 | + bottom: '2%', | |
86 | + containLabel: true | |
87 | + }, | |
88 | + xAxis: [{ | |
89 | + type: 'category', | |
90 | + boundaryGap: false, | |
91 | + axisLine: { | |
92 | + lineStyle: { | |
93 | + color: '#57617B' | |
94 | + } | |
95 | + }, | |
96 | + data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55'] | |
97 | + }], | |
98 | + yAxis: [{ | |
99 | + type: 'value', | |
100 | + name: '(%)', | |
101 | + axisTick: { | |
102 | + show: false | |
103 | + }, | |
104 | + axisLine: { | |
105 | + lineStyle: { | |
106 | + color: '#57617B' | |
107 | + } | |
108 | + }, | |
109 | + axisLabel: { | |
110 | + margin: 10, | |
111 | + textStyle: { | |
112 | + fontSize: 14 | |
113 | + } | |
114 | + }, | |
115 | + splitLine: { | |
116 | + lineStyle: { | |
117 | + color: '#57617B' | |
118 | + } | |
119 | + } | |
120 | + }], | |
121 | + series: [{ | |
122 | + name: 'CMCC', | |
123 | + type: 'line', | |
124 | + smooth: true, | |
125 | + symbol: 'circle', | |
126 | + symbolSize: 5, | |
127 | + showSymbol: false, | |
128 | + lineStyle: { | |
129 | + normal: { | |
130 | + width: 1 | |
131 | + } | |
132 | + }, | |
133 | + areaStyle: { | |
134 | + normal: { | |
135 | + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |
136 | + offset: 0, | |
137 | + color: 'rgba(137, 189, 27, 0.3)' | |
138 | + }, { | |
139 | + offset: 0.8, | |
140 | + color: 'rgba(137, 189, 27, 0)' | |
141 | + }], false), | |
142 | + shadowColor: 'rgba(0, 0, 0, 0.1)', | |
143 | + shadowBlur: 10 | |
144 | + } | |
145 | + }, | |
146 | + itemStyle: { | |
147 | + normal: { | |
148 | + color: 'rgb(137,189,27)', | |
149 | + borderColor: 'rgba(137,189,2,0.27)', | |
150 | + borderWidth: 12 | |
151 | + | |
152 | + } | |
153 | + }, | |
154 | + data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122] | |
155 | + }, { | |
156 | + name: 'CTCC', | |
157 | + type: 'line', | |
158 | + smooth: true, | |
159 | + symbol: 'circle', | |
160 | + symbolSize: 5, | |
161 | + showSymbol: false, | |
162 | + lineStyle: { | |
163 | + normal: { | |
164 | + width: 1 | |
165 | + } | |
166 | + }, | |
167 | + areaStyle: { | |
168 | + normal: { | |
169 | + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |
170 | + offset: 0, | |
171 | + color: 'rgba(0, 136, 212, 0.3)' | |
172 | + }, { | |
173 | + offset: 0.8, | |
174 | + color: 'rgba(0, 136, 212, 0)' | |
175 | + }], false), | |
176 | + shadowColor: 'rgba(0, 0, 0, 0.1)', | |
177 | + shadowBlur: 10 | |
178 | + } | |
179 | + }, | |
180 | + itemStyle: { | |
181 | + normal: { | |
182 | + color: 'rgb(0,136,212)', | |
183 | + borderColor: 'rgba(0,136,212,0.2)', | |
184 | + borderWidth: 12 | |
185 | + | |
186 | + } | |
187 | + }, | |
188 | + data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150] | |
189 | + }, { | |
190 | + name: 'CUCC', | |
191 | + type: 'line', | |
192 | + smooth: true, | |
193 | + symbol: 'circle', | |
194 | + symbolSize: 5, | |
195 | + showSymbol: false, | |
196 | + lineStyle: { | |
197 | + normal: { | |
198 | + width: 1 | |
199 | + } | |
200 | + }, | |
201 | + areaStyle: { | |
202 | + normal: { | |
203 | + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |
204 | + offset: 0, | |
205 | + color: 'rgba(219, 50, 51, 0.3)' | |
206 | + }, { | |
207 | + offset: 0.8, | |
208 | + color: 'rgba(219, 50, 51, 0)' | |
209 | + }], false), | |
210 | + shadowColor: 'rgba(0, 0, 0, 0.1)', | |
211 | + shadowBlur: 10 | |
212 | + } | |
213 | + }, | |
214 | + itemStyle: { | |
215 | + normal: { | |
216 | + color: 'rgb(219,50,51)', | |
217 | + borderColor: 'rgba(219,50,51,0.2)', | |
218 | + borderWidth: 12 | |
219 | + } | |
220 | + }, | |
221 | + data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122] | |
222 | + }] | |
223 | + }) | |
224 | + } | |
225 | + } | |
226 | +} | |
227 | +</script> | ... | ... |
src/components/Charts/MixChart.vue
... | ... | @@ -0,0 +1,271 @@ |
1 | +<template> | |
2 | + <div :id="id" :class="className" :style="{height:height,width:width}" /> | |
3 | +</template> | |
4 | + | |
5 | +<script> | |
6 | +import echarts from 'echarts' | |
7 | +import resize from './mixins/resize' | |
8 | + | |
9 | +export default { | |
10 | + mixins: [resize], | |
11 | + props: { | |
12 | + className: { | |
13 | + type: String, | |
14 | + default: 'chart' | |
15 | + }, | |
16 | + id: { | |
17 | + type: String, | |
18 | + default: 'chart' | |
19 | + }, | |
20 | + width: { | |
21 | + type: String, | |
22 | + default: '200px' | |
23 | + }, | |
24 | + height: { | |
25 | + type: String, | |
26 | + default: '200px' | |
27 | + } | |
28 | + }, | |
29 | + data() { | |
30 | + return { | |
31 | + chart: null | |
32 | + } | |
33 | + }, | |
34 | + mounted() { | |
35 | + this.initChart() | |
36 | + }, | |
37 | + beforeDestroy() { | |
38 | + if (!this.chart) { | |
39 | + return | |
40 | + } | |
41 | + this.chart.dispose() | |
42 | + this.chart = null | |
43 | + }, | |
44 | + methods: { | |
45 | + initChart() { | |
46 | + this.chart = echarts.init(document.getElementById(this.id)) | |
47 | + const xData = (function() { | |
48 | + const data = [] | |
49 | + for (let i = 1; i < 13; i++) { | |
50 | + data.push(i + 'month') | |
51 | + } | |
52 | + return data | |
53 | + }()) | |
54 | + this.chart.setOption({ | |
55 | + backgroundColor: '#344b58', | |
56 | + title: { | |
57 | + text: 'statistics', | |
58 | + x: '20', | |
59 | + top: '20', | |
60 | + textStyle: { | |
61 | + color: '#fff', | |
62 | + fontSize: '22' | |
63 | + }, | |
64 | + subtextStyle: { | |
65 | + color: '#90979c', | |
66 | + fontSize: '16' | |
67 | + } | |
68 | + }, | |
69 | + tooltip: { | |
70 | + trigger: 'axis', | |
71 | + axisPointer: { | |
72 | + textStyle: { | |
73 | + color: '#fff' | |
74 | + } | |
75 | + } | |
76 | + }, | |
77 | + grid: { | |
78 | + left: '5%', | |
79 | + right: '5%', | |
80 | + borderWidth: 0, | |
81 | + top: 150, | |
82 | + bottom: 95, | |
83 | + textStyle: { | |
84 | + color: '#fff' | |
85 | + } | |
86 | + }, | |
87 | + legend: { | |
88 | + x: '5%', | |
89 | + top: '10%', | |
90 | + textStyle: { | |
91 | + color: '#90979c' | |
92 | + }, | |
93 | + data: ['female', 'male', 'average'] | |
94 | + }, | |
95 | + calculable: true, | |
96 | + xAxis: [{ | |
97 | + type: 'category', | |
98 | + axisLine: { | |
99 | + lineStyle: { | |
100 | + color: '#90979c' | |
101 | + } | |
102 | + }, | |
103 | + splitLine: { | |
104 | + show: false | |
105 | + }, | |
106 | + axisTick: { | |
107 | + show: false | |
108 | + }, | |
109 | + splitArea: { | |
110 | + show: false | |
111 | + }, | |
112 | + axisLabel: { | |
113 | + interval: 0 | |
114 | + | |
115 | + }, | |
116 | + data: xData | |
117 | + }], | |
118 | + yAxis: [{ | |
119 | + type: 'value', | |
120 | + splitLine: { | |
121 | + show: false | |
122 | + }, | |
123 | + axisLine: { | |
124 | + lineStyle: { | |
125 | + color: '#90979c' | |
126 | + } | |
127 | + }, | |
128 | + axisTick: { | |
129 | + show: false | |
130 | + }, | |
131 | + axisLabel: { | |
132 | + interval: 0 | |
133 | + }, | |
134 | + splitArea: { | |
135 | + show: false | |
136 | + } | |
137 | + }], | |
138 | + dataZoom: [{ | |
139 | + show: true, | |
140 | + height: 30, | |
141 | + xAxisIndex: [ | |
142 | + 0 | |
143 | + ], | |
144 | + bottom: 30, | |
145 | + start: 10, | |
146 | + end: 80, | |
147 | + handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', | |
148 | + handleSize: '110%', | |
149 | + handleStyle: { | |
150 | + color: '#d3dee5' | |
151 | + | |
152 | + }, | |
153 | + textStyle: { | |
154 | + color: '#fff' }, | |
155 | + borderColor: '#90979c' | |
156 | + | |
157 | + }, { | |
158 | + type: 'inside', | |
159 | + show: true, | |
160 | + height: 15, | |
161 | + start: 1, | |
162 | + end: 35 | |
163 | + }], | |
164 | + series: [{ | |
165 | + name: 'female', | |
166 | + type: 'bar', | |
167 | + stack: 'total', | |
168 | + barMaxWidth: 35, | |
169 | + barGap: '10%', | |
170 | + itemStyle: { | |
171 | + normal: { | |
172 | + color: 'rgba(255,144,128,1)', | |
173 | + label: { | |
174 | + show: true, | |
175 | + textStyle: { | |
176 | + color: '#fff' | |
177 | + }, | |
178 | + position: 'insideTop', | |
179 | + formatter(p) { | |
180 | + return p.value > 0 ? p.value : '' | |
181 | + } | |
182 | + } | |
183 | + } | |
184 | + }, | |
185 | + data: [ | |
186 | + 709, | |
187 | + 1917, | |
188 | + 2455, | |
189 | + 2610, | |
190 | + 1719, | |
191 | + 1433, | |
192 | + 1544, | |
193 | + 3285, | |
194 | + 5208, | |
195 | + 3372, | |
196 | + 2484, | |
197 | + 4078 | |
198 | + ] | |
199 | + }, | |
200 | + | |
201 | + { | |
202 | + name: 'male', | |
203 | + type: 'bar', | |
204 | + stack: 'total', | |
205 | + itemStyle: { | |
206 | + normal: { | |
207 | + color: 'rgba(0,191,183,1)', | |
208 | + barBorderRadius: 0, | |
209 | + label: { | |
210 | + show: true, | |
211 | + position: 'top', | |
212 | + formatter(p) { | |
213 | + return p.value > 0 ? p.value : '' | |
214 | + } | |
215 | + } | |
216 | + } | |
217 | + }, | |
218 | + data: [ | |
219 | + 327, | |
220 | + 1776, | |
221 | + 507, | |
222 | + 1200, | |
223 | + 800, | |
224 | + 482, | |
225 | + 204, | |
226 | + 1390, | |
227 | + 1001, | |
228 | + 951, | |
229 | + 381, | |
230 | + 220 | |
231 | + ] | |
232 | + }, { | |
233 | + name: 'average', | |
234 | + type: 'line', | |
235 | + stack: 'total', | |
236 | + symbolSize: 10, | |
237 | + symbol: 'circle', | |
238 | + itemStyle: { | |
239 | + normal: { | |
240 | + color: 'rgba(252,230,48,1)', | |
241 | + barBorderRadius: 0, | |
242 | + label: { | |
243 | + show: true, | |
244 | + position: 'top', | |
245 | + formatter(p) { | |
246 | + return p.value > 0 ? p.value : '' | |
247 | + } | |
248 | + } | |
249 | + } | |
250 | + }, | |
251 | + data: [ | |
252 | + 1036, | |
253 | + 3693, | |
254 | + 2962, | |
255 | + 3810, | |
256 | + 2519, | |
257 | + 1915, | |
258 | + 1748, | |
259 | + 4675, | |
260 | + 6209, | |
261 | + 4323, | |
262 | + 2865, | |
263 | + 4298 | |
264 | + ] | |
265 | + } | |
266 | + ] | |
267 | + }) | |
268 | + } | |
269 | + } | |
270 | +} | |
271 | +</script> | ... | ... |
src/components/Charts/mixins/resize.js
... | ... | @@ -0,0 +1,56 @@ |
1 | +import { debounce } from '@/utils' | |
2 | + | |
3 | +export default { | |
4 | + data() { | |
5 | + return { | |
6 | + $_sidebarElm: null, | |
7 | + $_resizeHandler: null | |
8 | + } | |
9 | + }, | |
10 | + mounted() { | |
11 | + this.initListener() | |
12 | + }, | |
13 | + activated() { | |
14 | + if (!this.$_resizeHandler) { | |
15 | + // avoid duplication init | |
16 | + this.initListener() | |
17 | + } | |
18 | + | |
19 | + // when keep-alive chart activated, auto resize | |
20 | + this.resize() | |
21 | + }, | |
22 | + beforeDestroy() { | |
23 | + this.destroyListener() | |
24 | + }, | |
25 | + deactivated() { | |
26 | + this.destroyListener() | |
27 | + }, | |
28 | + methods: { | |
29 | + // use $_ for mixins properties | |
30 | + // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential | |
31 | + $_sidebarResizeHandler(e) { | |
32 | + if (e.propertyName === 'width') { | |
33 | + this.$_resizeHandler() | |
34 | + } | |
35 | + }, | |
36 | + initListener() { | |
37 | + this.$_resizeHandler = debounce(() => { | |
38 | + this.resize() | |
39 | + }, 100) | |
40 | + window.addEventListener('resize', this.$_resizeHandler) | |
41 | + | |
42 | + this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] | |
43 | + this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) | |
44 | + }, | |
45 | + destroyListener() { | |
46 | + window.removeEventListener('resize', this.$_resizeHandler) | |
47 | + this.$_resizeHandler = null | |
48 | + | |
49 | + this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) | |
50 | + }, | |
51 | + resize() { | |
52 | + const { chart } = this | |
53 | + chart && chart.resize() | |
54 | + } | |
55 | + } | |
56 | +} | ... | ... |
src/components/DndList/index.vue
... | ... | @@ -0,0 +1,166 @@ |
1 | +<template> | |
2 | + <div class="dndList"> | |
3 | + <div :style="{width:width1}" class="dndList-list"> | |
4 | + <h3>{{ list1Title }}</h3> | |
5 | + <draggable :set-data="setData" :list="list1" group="article" class="dragArea"> | |
6 | + <div v-for="element in list1" :key="element.id" class="list-complete-item"> | |
7 | + <div class="list-complete-item-handle"> | |
8 | + {{ element.id }}[{{ element.author }}] {{ element.title }} | |
9 | + </div> | |
10 | + <div style="position:absolute;right:0px;"> | |
11 | + <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)"> | |
12 | + <i style="color:#ff4949" class="el-icon-delete" /> | |
13 | + </span> | |
14 | + </div> | |
15 | + </div> | |
16 | + </draggable> | |
17 | + </div> | |
18 | + <div :style="{width:width2}" class="dndList-list"> | |
19 | + <h3>{{ list2Title }}</h3> | |
20 | + <draggable :list="list2" group="article" class="dragArea"> | |
21 | + <div v-for="element in list2" :key="element.id" class="list-complete-item"> | |
22 | + <div class="list-complete-item-handle2" @click="pushEle(element)"> | |
23 | + {{ element.id }} [{{ element.author }}] {{ element.title }} | |
24 | + </div> | |
25 | + </div> | |
26 | + </draggable> | |
27 | + </div> | |
28 | + </div> | |
29 | +</template> | |
30 | + | |
31 | +<script> | |
32 | +import draggable from 'vuedraggable' | |
33 | + | |
34 | +export default { | |
35 | + name: 'DndList', | |
36 | + components: { draggable }, | |
37 | + props: { | |
38 | + list1: { | |
39 | + type: Array, | |
40 | + default() { | |
41 | + return [] | |
42 | + } | |
43 | + }, | |
44 | + list2: { | |
45 | + type: Array, | |
46 | + default() { | |
47 | + return [] | |
48 | + } | |
49 | + }, | |
50 | + list1Title: { | |
51 | + type: String, | |
52 | + default: 'list1' | |
53 | + }, | |
54 | + list2Title: { | |
55 | + type: String, | |
56 | + default: 'list2' | |
57 | + }, | |
58 | + width1: { | |
59 | + type: String, | |
60 | + default: '48%' | |
61 | + }, | |
62 | + width2: { | |
63 | + type: String, | |
64 | + default: '48%' | |
65 | + } | |
66 | + }, | |
67 | + methods: { | |
68 | + isNotInList1(v) { | |
69 | + return this.list1.every(k => v.id !== k.id) | |
70 | + }, | |
71 | + isNotInList2(v) { | |
72 | + return this.list2.every(k => v.id !== k.id) | |
73 | + }, | |
74 | + deleteEle(ele) { | |
75 | + for (const item of this.list1) { | |
76 | + if (item.id === ele.id) { | |
77 | + const index = this.list1.indexOf(item) | |
78 | + this.list1.splice(index, 1) | |
79 | + break | |
80 | + } | |
81 | + } | |
82 | + if (this.isNotInList2(ele)) { | |
83 | + this.list2.unshift(ele) | |
84 | + } | |
85 | + }, | |
86 | + pushEle(ele) { | |
87 | + for (const item of this.list2) { | |
88 | + if (item.id === ele.id) { | |
89 | + const index = this.list2.indexOf(item) | |
90 | + this.list2.splice(index, 1) | |
91 | + break | |
92 | + } | |
93 | + } | |
94 | + if (this.isNotInList1(ele)) { | |
95 | + this.list1.push(ele) | |
96 | + } | |
97 | + }, | |
98 | + setData(dataTransfer) { | |
99 | + // to avoid Firefox bug | |
100 | + // Detail see : https://github.com/RubaXa/Sortable/issues/1012 | |
101 | + dataTransfer.setData('Text', '') | |
102 | + } | |
103 | + } | |
104 | +} | |
105 | +</script> | |
106 | + | |
107 | +<style lang="scss" scoped> | |
108 | +.dndList { | |
109 | + background: #fff; | |
110 | + padding-bottom: 40px; | |
111 | + &:after { | |
112 | + content: ""; | |
113 | + display: table; | |
114 | + clear: both; | |
115 | + } | |
116 | + .dndList-list { | |
117 | + float: left; | |
118 | + padding-bottom: 30px; | |
119 | + &:first-of-type { | |
120 | + margin-right: 2%; | |
121 | + } | |
122 | + .dragArea { | |
123 | + margin-top: 15px; | |
124 | + min-height: 50px; | |
125 | + padding-bottom: 30px; | |
126 | + } | |
127 | + } | |
128 | +} | |
129 | + | |
130 | +.list-complete-item { | |
131 | + cursor: pointer; | |
132 | + position: relative; | |
133 | + font-size: 14px; | |
134 | + padding: 5px 12px; | |
135 | + margin-top: 4px; | |
136 | + border: 1px solid #bfcbd9; | |
137 | + transition: all 1s; | |
138 | +} | |
139 | + | |
140 | +.list-complete-item-handle { | |
141 | + overflow: hidden; | |
142 | + text-overflow: ellipsis; | |
143 | + white-space: nowrap; | |
144 | + margin-right: 50px; | |
145 | +} | |
146 | + | |
147 | +.list-complete-item-handle2 { | |
148 | + overflow: hidden; | |
149 | + text-overflow: ellipsis; | |
150 | + white-space: nowrap; | |
151 | + margin-right: 20px; | |
152 | +} | |
153 | + | |
154 | +.list-complete-item.sortable-chosen { | |
155 | + background: #4AB7BD; | |
156 | +} | |
157 | + | |
158 | +.list-complete-item.sortable-ghost { | |
159 | + background: #30B08F; | |
160 | +} | |
161 | + | |
162 | +.list-complete-enter, | |
163 | +.list-complete-leave-active { | |
164 | + opacity: 0; | |
165 | +} | |
166 | +</style> | ... | ... |
src/components/DragSelect/index.vue
... | ... | @@ -0,0 +1,61 @@ |
1 | +<template> | |
2 | + <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners"> | |
3 | + <slot /> | |
4 | + </el-select> | |
5 | +</template> | |
6 | + | |
7 | +<script> | |
8 | +import Sortable from 'sortablejs' | |
9 | + | |
10 | +export default { | |
11 | + name: 'DragSelect', | |
12 | + props: { | |
13 | + value: { | |
14 | + type: Array, | |
15 | + required: true | |
16 | + } | |
17 | + }, | |
18 | + computed: { | |
19 | + selectVal: { | |
20 | + get() { | |
21 | + return [...this.value] | |
22 | + }, | |
23 | + set(val) { | |
24 | + this.$emit('input', [...val]) | |
25 | + } | |
26 | + } | |
27 | + }, | |
28 | + mounted() { | |
29 | + this.setSort() | |
30 | + }, | |
31 | + methods: { | |
32 | + setSort() { | |
33 | + const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0] | |
34 | + this.sortable = Sortable.create(el, { | |
35 | + ghostClass: 'sortable-ghost', // Class name for the drop placeholder, | |
36 | + setData: function(dataTransfer) { | |
37 | + dataTransfer.setData('Text', '') | |
38 | + // to avoid Firefox bug | |
39 | + // Detail see : https://github.com/RubaXa/Sortable/issues/1012 | |
40 | + }, | |
41 | + onEnd: evt => { | |
42 | + const targetRow = this.value.splice(evt.oldIndex, 1)[0] | |
43 | + this.value.splice(evt.newIndex, 0, targetRow) | |
44 | + } | |
45 | + }) | |
46 | + } | |
47 | + } | |
48 | +} | |
49 | +</script> | |
50 | + | |
51 | +<style scoped> | |
52 | +.drag-select >>> .sortable-ghost { | |
53 | + opacity: .8; | |
54 | + color: #fff!important; | |
55 | + background: #42b983!important; | |
56 | +} | |
57 | + | |
58 | +.drag-select >>> .el-tag { | |
59 | + cursor: pointer; | |
60 | +} | |
61 | +</style> | ... | ... |
src/components/Dropzone/index.vue
... | ... | @@ -0,0 +1,297 @@ |
1 | +<template> | |
2 | + <div :id="id" :ref="id" :action="url" class="dropzone"> | |
3 | + <input type="file" name="file"> | |
4 | + </div> | |
5 | +</template> | |
6 | + | |
7 | +<script> | |
8 | +import Dropzone from 'dropzone' | |
9 | +import 'dropzone/dist/dropzone.css' | |
10 | +// import { getToken } from 'api/qiniu'; | |
11 | + | |
12 | +Dropzone.autoDiscover = false | |
13 | + | |
14 | +export default { | |
15 | + props: { | |
16 | + id: { | |
17 | + type: String, | |
18 | + required: true | |
19 | + }, | |
20 | + url: { | |
21 | + type: String, | |
22 | + required: true | |
23 | + }, | |
24 | + clickable: { | |
25 | + type: Boolean, | |
26 | + default: true | |
27 | + }, | |
28 | + defaultMsg: { | |
29 | + type: String, | |
30 | + default: '上传图片' | |
31 | + }, | |
32 | + acceptedFiles: { | |
33 | + type: String, | |
34 | + default: '' | |
35 | + }, | |
36 | + thumbnailHeight: { | |
37 | + type: Number, | |
38 | + default: 200 | |
39 | + }, | |
40 | + thumbnailWidth: { | |
41 | + type: Number, | |
42 | + default: 200 | |
43 | + }, | |
44 | + showRemoveLink: { | |
45 | + type: Boolean, | |
46 | + default: true | |
47 | + }, | |
48 | + maxFilesize: { | |
49 | + type: Number, | |
50 | + default: 2 | |
51 | + }, | |
52 | + maxFiles: { | |
53 | + type: Number, | |
54 | + default: 3 | |
55 | + }, | |
56 | + autoProcessQueue: { | |
57 | + type: Boolean, | |
58 | + default: true | |
59 | + }, | |
60 | + useCustomDropzoneOptions: { | |
61 | + type: Boolean, | |
62 | + default: false | |
63 | + }, | |
64 | + defaultImg: { | |
65 | + default: '', | |
66 | + type: [String, Array] | |
67 | + }, | |
68 | + couldPaste: { | |
69 | + type: Boolean, | |
70 | + default: false | |
71 | + } | |
72 | + }, | |
73 | + data() { | |
74 | + return { | |
75 | + dropzone: '', | |
76 | + initOnce: true | |
77 | + } | |
78 | + }, | |
79 | + watch: { | |
80 | + defaultImg(val) { | |
81 | + if (val.length === 0) { | |
82 | + this.initOnce = false | |
83 | + return | |
84 | + } | |
85 | + if (!this.initOnce) return | |
86 | + this.initImages(val) | |
87 | + this.initOnce = false | |
88 | + } | |
89 | + }, | |
90 | + mounted() { | |
91 | + const element = document.getElementById(this.id) | |
92 | + const vm = this | |
93 | + this.dropzone = new Dropzone(element, { | |
94 | + clickable: this.clickable, | |
95 | + thumbnailWidth: this.thumbnailWidth, | |
96 | + thumbnailHeight: this.thumbnailHeight, | |
97 | + maxFiles: this.maxFiles, | |
98 | + maxFilesize: this.maxFilesize, | |
99 | + dictRemoveFile: 'Remove', | |
100 | + addRemoveLinks: this.showRemoveLink, | |
101 | + acceptedFiles: this.acceptedFiles, | |
102 | + autoProcessQueue: this.autoProcessQueue, | |
103 | + dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload', | |
104 | + dictMaxFilesExceeded: '只能一个图', | |
105 | + previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div> <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark"> <i class="material-icons">done</i> </div> <div class="dz-error-mark"><i class="material-icons">error</i></div></div>', | |
106 | + init() { | |
107 | + const val = vm.defaultImg | |
108 | + if (!val) return | |
109 | + if (Array.isArray(val)) { | |
110 | + if (val.length === 0) return | |
111 | + val.map((v, i) => { | |
112 | + const mockFile = { name: 'name' + i, size: 12345, url: v } | |
113 | + this.options.addedfile.call(this, mockFile) | |
114 | + this.options.thumbnail.call(this, mockFile, v) | |
115 | + mockFile.previewElement.classList.add('dz-success') | |
116 | + mockFile.previewElement.classList.add('dz-complete') | |
117 | + vm.initOnce = false | |
118 | + return true | |
119 | + }) | |
120 | + } else { | |
121 | + const mockFile = { name: 'name', size: 12345, url: val } | |
122 | + this.options.addedfile.call(this, mockFile) | |
123 | + this.options.thumbnail.call(this, mockFile, val) | |
124 | + mockFile.previewElement.classList.add('dz-success') | |
125 | + mockFile.previewElement.classList.add('dz-complete') | |
126 | + vm.initOnce = false | |
127 | + } | |
128 | + }, | |
129 | + accept: (file, done) => { | |
130 | + /* 七牛*/ | |
131 | + // const token = this.$store.getters.token; | |
132 | + // getToken(token).then(response => { | |
133 | + // file.token = response.data.qiniu_token; | |
134 | + // file.key = response.data.qiniu_key; | |
135 | + // file.url = response.data.qiniu_url; | |
136 | + // done(); | |
137 | + // }) | |
138 | + done() | |
139 | + }, | |
140 | + sending: (file, xhr, formData) => { | |
141 | + // formData.append('token', file.token); | |
142 | + // formData.append('key', file.key); | |
143 | + vm.initOnce = false | |
144 | + } | |
145 | + }) | |
146 | + | |
147 | + if (this.couldPaste) { | |
148 | + document.addEventListener('paste', this.pasteImg) | |
149 | + } | |
150 | + | |
151 | + this.dropzone.on('success', file => { | |
152 | + vm.$emit('dropzone-success', file, vm.dropzone.element) | |
153 | + }) | |
154 | + this.dropzone.on('addedfile', file => { | |
155 | + vm.$emit('dropzone-fileAdded', file) | |
156 | + }) | |
157 | + this.dropzone.on('removedfile', file => { | |
158 | + vm.$emit('dropzone-removedFile', file) | |
159 | + }) | |
160 | + this.dropzone.on('error', (file, error, xhr) => { | |
161 | + vm.$emit('dropzone-error', file, error, xhr) | |
162 | + }) | |
163 | + this.dropzone.on('successmultiple', (file, error, xhr) => { | |
164 | + vm.$emit('dropzone-successmultiple', file, error, xhr) | |
165 | + }) | |
166 | + }, | |
167 | + destroyed() { | |
168 | + document.removeEventListener('paste', this.pasteImg) | |
169 | + this.dropzone.destroy() | |
170 | + }, | |
171 | + methods: { | |
172 | + removeAllFiles() { | |
173 | + this.dropzone.removeAllFiles(true) | |
174 | + }, | |
175 | + processQueue() { | |
176 | + this.dropzone.processQueue() | |
177 | + }, | |
178 | + pasteImg(event) { | |
179 | + const items = (event.clipboardData || event.originalEvent.clipboardData).items | |
180 | + if (items[0].kind === 'file') { | |
181 | + this.dropzone.addFile(items[0].getAsFile()) | |
182 | + } | |
183 | + }, | |
184 | + initImages(val) { | |
185 | + if (!val) return | |
186 | + if (Array.isArray(val)) { | |
187 | + val.map((v, i) => { | |
188 | + const mockFile = { name: 'name' + i, size: 12345, url: v } | |
189 | + this.dropzone.options.addedfile.call(this.dropzone, mockFile) | |
190 | + this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v) | |
191 | + mockFile.previewElement.classList.add('dz-success') | |
192 | + mockFile.previewElement.classList.add('dz-complete') | |
193 | + return true | |
194 | + }) | |
195 | + } else { | |
196 | + const mockFile = { name: 'name', size: 12345, url: val } | |
197 | + this.dropzone.options.addedfile.call(this.dropzone, mockFile) | |
198 | + this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val) | |
199 | + mockFile.previewElement.classList.add('dz-success') | |
200 | + mockFile.previewElement.classList.add('dz-complete') | |
201 | + } | |
202 | + } | |
203 | + | |
204 | + } | |
205 | +} | |
206 | +</script> | |
207 | + | |
208 | +<style scoped> | |
209 | + .dropzone { | |
210 | + border: 2px solid #E5E5E5; | |
211 | + font-family: 'Roboto', sans-serif; | |
212 | + color: #777; | |
213 | + transition: background-color .2s linear; | |
214 | + padding: 5px; | |
215 | + } | |
216 | + | |
217 | + .dropzone:hover { | |
218 | + background-color: #F6F6F6; | |
219 | + } | |
220 | + | |
221 | + i { | |
222 | + color: #CCC; | |
223 | + } | |
224 | + | |
225 | + .dropzone .dz-image img { | |
226 | + width: 100%; | |
227 | + height: 100%; | |
228 | + } | |
229 | + | |
230 | + .dropzone input[name='file'] { | |
231 | + display: none; | |
232 | + } | |
233 | + | |
234 | + .dropzone .dz-preview .dz-image { | |
235 | + border-radius: 0px; | |
236 | + } | |
237 | + | |
238 | + .dropzone .dz-preview:hover .dz-image img { | |
239 | + transform: none; | |
240 | + filter: none; | |
241 | + width: 100%; | |
242 | + height: 100%; | |
243 | + } | |
244 | + | |
245 | + .dropzone .dz-preview .dz-details { | |
246 | + bottom: 0px; | |
247 | + top: 0px; | |
248 | + color: white; | |
249 | + background-color: rgba(33, 150, 243, 0.8); | |
250 | + transition: opacity .2s linear; | |
251 | + text-align: left; | |
252 | + } | |
253 | + | |
254 | + .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { | |
255 | + background-color: transparent; | |
256 | + } | |
257 | + | |
258 | + .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { | |
259 | + border: none; | |
260 | + } | |
261 | + | |
262 | + .dropzone .dz-preview .dz-details .dz-filename:hover span { | |
263 | + background-color: transparent; | |
264 | + border: none; | |
265 | + } | |
266 | + | |
267 | + .dropzone .dz-preview .dz-remove { | |
268 | + position: absolute; | |
269 | + z-index: 30; | |
270 | + color: white; | |
271 | + margin-left: 15px; | |
272 | + padding: 10px; | |
273 | + top: inherit; | |
274 | + bottom: 15px; | |
275 | + border: 2px white solid; | |
276 | + text-decoration: none; | |
277 | + text-transform: uppercase; | |
278 | + font-size: 0.8rem; | |
279 | + font-weight: 800; | |
280 | + letter-spacing: 1.1px; | |
281 | + opacity: 0; | |
282 | + } | |
283 | + | |
284 | + .dropzone .dz-preview:hover .dz-remove { | |
285 | + opacity: 1; | |
286 | + } | |
287 | + | |
288 | + .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { | |
289 | + margin-left: -40px; | |
290 | + margin-top: -50px; | |
291 | + } | |
292 | + | |
293 | + .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i { | |
294 | + color: white; | |
295 | + font-size: 5rem; | |
296 | + } | |
297 | +</style> | ... | ... |
src/components/ErrorLog/index.vue
... | ... | @@ -0,0 +1,78 @@ |
1 | +<template> | |
2 | + <div v-if="errorLogs.length>0"> | |
3 | + <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true"> | |
4 | + <el-button style="padding: 8px 10px;" size="small" type="danger"> | |
5 | + <svg-icon icon-class="bug" /> | |
6 | + </el-button> | |
7 | + </el-badge> | |
8 | + | |
9 | + <el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body> | |
10 | + <div slot="title"> | |
11 | + <span style="padding-right: 10px;">Error Log</span> | |
12 | + <el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button> | |
13 | + </div> | |
14 | + <el-table :data="errorLogs" border> | |
15 | + <el-table-column label="Message"> | |
16 | + <template slot-scope="{row}"> | |
17 | + <div> | |
18 | + <span class="message-title">Msg:</span> | |
19 | + <el-tag type="danger"> | |
20 | + {{ row.err.message }} | |
21 | + </el-tag> | |
22 | + </div> | |
23 | + <br> | |
24 | + <div> | |
25 | + <span class="message-title" style="padding-right: 10px;">Info: </span> | |
26 | + <el-tag type="warning"> | |
27 | + {{ row.vm.$vnode.tag }} error in {{ row.info }} | |
28 | + </el-tag> | |
29 | + </div> | |
30 | + <br> | |
31 | + <div> | |
32 | + <span class="message-title" style="padding-right: 16px;">Url: </span> | |
33 | + <el-tag type="success"> | |
34 | + {{ row.url }} | |
35 | + </el-tag> | |
36 | + </div> | |
37 | + </template> | |
38 | + </el-table-column> | |
39 | + <el-table-column label="Stack"> | |
40 | + <template slot-scope="scope"> | |
41 | + {{ scope.row.err.stack }} | |
42 | + </template> | |
43 | + </el-table-column> | |
44 | + </el-table> | |
45 | + </el-dialog> | |
46 | + </div> | |
47 | +</template> | |
48 | + | |
49 | +<script> | |
50 | +export default { | |
51 | + name: 'ErrorLog', | |
52 | + data() { | |
53 | + return { | |
54 | + dialogTableVisible: false | |
55 | + } | |
56 | + }, | |
57 | + computed: { | |
58 | + errorLogs() { | |
59 | + return this.$store.getters.errorLogs | |
60 | + } | |
61 | + }, | |
62 | + methods: { | |
63 | + clearAll() { | |
64 | + this.dialogTableVisible = false | |
65 | + this.$store.dispatch('errorLog/clearErrorLog') | |
66 | + } | |
67 | + } | |
68 | +} | |
69 | +</script> | |
70 | + | |
71 | +<style scoped> | |
72 | +.message-title { | |
73 | + font-size: 16px; | |
74 | + color: #333; | |
75 | + font-weight: bold; | |
76 | + padding-right: 8px; | |
77 | +} | |
78 | +</style> | ... | ... |
src/components/GithubCorner/index.vue
... | ... | @@ -0,0 +1,54 @@ |
1 | +<template> | |
2 | + <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github"> | |
3 | + <svg | |
4 | + width="80" | |
5 | + height="80" | |
6 | + viewBox="0 0 250 250" | |
7 | + style="fill:#40c9c6; color:#fff;" | |
8 | + aria-hidden="true" | |
9 | + > | |
10 | + <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" /> | |
11 | + <path | |
12 | + d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" | |
13 | + fill="currentColor" | |
14 | + style="transform-origin: 130px 106px;" | |
15 | + class="octo-arm" | |
16 | + /> | |
17 | + <path | |
18 | + d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" | |
19 | + fill="currentColor" | |
20 | + class="octo-body" | |
21 | + /> | |
22 | + </svg> | |
23 | + </a> | |
24 | +</template> | |
25 | + | |
26 | +<style scoped> | |
27 | +.github-corner:hover .octo-arm { | |
28 | + animation: octocat-wave 560ms ease-in-out | |
29 | +} | |
30 | + | |
31 | +@keyframes octocat-wave { | |
32 | + 0%, | |
33 | + 100% { | |
34 | + transform: rotate(0) | |
35 | + } | |
36 | + 20%, | |
37 | + 60% { | |
38 | + transform: rotate(-25deg) | |
39 | + } | |
40 | + 40%, | |
41 | + 80% { | |
42 | + transform: rotate(10deg) | |
43 | + } | |
44 | +} | |
45 | + | |
46 | +@media (max-width:500px) { | |
47 | + .github-corner:hover .octo-arm { | |
48 | + animation: none | |
49 | + } | |
50 | + .github-corner .octo-arm { | |
51 | + animation: octocat-wave 560ms ease-in-out | |
52 | + } | |
53 | +} | |
54 | +</style> | ... | ... |
File mode changed
src/components/HeaderSearch/index.vue
... | ... | @@ -0,0 +1,207 @@ |
1 | +<template> | |
2 | + <div :class="{'show':show}" class="header-search"> | |
3 | + <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> | |
4 | + <el-select | |
5 | + ref="headerSearchSelect" | |
6 | + v-model="search" | |
7 | + :remote-method="querySearch" | |
8 | + filterable | |
9 | + default-first-option | |
10 | + remote | |
11 | + placeholder="Search" | |
12 | + class="header-search-select" | |
13 | + @change="change" | |
14 | + > | |
15 | + <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" /> | |
16 | + </el-select> | |
17 | + </div> | |
18 | +</template> | |
19 | + | |
20 | +<script> | |
21 | +// fuse is a lightweight fuzzy-search module | |
22 | +// make search results more in line with expectations | |
23 | +import Fuse from 'fuse.js' | |
24 | +import path from 'path' | |
25 | +import i18n from '@/lang' | |
26 | + | |
27 | +export default { | |
28 | + name: 'HeaderSearch', | |
29 | + data() { | |
30 | + return { | |
31 | + search: '', | |
32 | + options: [], | |
33 | + searchPool: [], | |
34 | + show: false, | |
35 | + fuse: undefined | |
36 | + } | |
37 | + }, | |
38 | + computed: { | |
39 | + routes() { | |
40 | + return this.$store.getters.permission_routes | |
41 | + }, | |
42 | + lang() { | |
43 | + return this.$store.getters.language | |
44 | + }, | |
45 | + supportPinyinSearch() { | |
46 | + return this.$store.state.settings.supportPinyinSearch | |
47 | + } | |
48 | + }, | |
49 | + watch: { | |
50 | + lang() { | |
51 | + this.searchPool = this.generateRoutes(this.routes) | |
52 | + }, | |
53 | + routes() { | |
54 | + this.searchPool = this.generateRoutes(this.routes) | |
55 | + }, | |
56 | + searchPool(list) { | |
57 | + // Support pinyin search | |
58 | + if (this.lang === 'zh' && this.supportPinyinSearch) { | |
59 | + this.addPinyinField(list) | |
60 | + } | |
61 | + this.initFuse(list) | |
62 | + }, | |
63 | + show(value) { | |
64 | + if (value) { | |
65 | + document.body.addEventListener('click', this.close) | |
66 | + } else { | |
67 | + document.body.removeEventListener('click', this.close) | |
68 | + } | |
69 | + } | |
70 | + }, | |
71 | + mounted() { | |
72 | + this.searchPool = this.generateRoutes(this.routes) | |
73 | + }, | |
74 | + methods: { | |
75 | + async addPinyinField(list) { | |
76 | + const { default: pinyin } = await import('pinyin') | |
77 | + if (Array.isArray(list)) { | |
78 | + list.forEach(element => { | |
79 | + const title = element.title | |
80 | + if (Array.isArray(title)) { | |
81 | + title.forEach(v => { | |
82 | + v = pinyin(v, { | |
83 | + style: pinyin.STYLE_NORMAL | |
84 | + }).join('') | |
85 | + element.pinyinTitle = v | |
86 | + }) | |
87 | + } | |
88 | + }) | |
89 | + return list | |
90 | + } | |
91 | + }, | |
92 | + click() { | |
93 | + this.show = !this.show | |
94 | + if (this.show) { | |
95 | + this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus() | |
96 | + } | |
97 | + }, | |
98 | + close() { | |
99 | + this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur() | |
100 | + this.options = [] | |
101 | + this.show = false | |
102 | + }, | |
103 | + change(val) { | |
104 | + this.$router.push(val.path) | |
105 | + this.search = '' | |
106 | + this.options = [] | |
107 | + this.$nextTick(() => { | |
108 | + this.show = false | |
109 | + }) | |
110 | + }, | |
111 | + initFuse(list) { | |
112 | + this.fuse = new Fuse(list, { | |
113 | + shouldSort: true, | |
114 | + threshold: 0.4, | |
115 | + location: 0, | |
116 | + distance: 100, | |
117 | + maxPatternLength: 32, | |
118 | + minMatchCharLength: 1, | |
119 | + keys: [{ | |
120 | + name: 'title', | |
121 | + weight: 0.7 | |
122 | + }, { | |
123 | + name: 'pinyinTitle', | |
124 | + weight: 0.3 | |
125 | + }, { | |
126 | + name: 'path', | |
127 | + weight: 0.3 | |
128 | + }] | |
129 | + }) | |
130 | + }, | |
131 | + // Filter out the routes that can be displayed in the sidebar | |
132 | + // And generate the internationalized title | |
133 | + generateRoutes(routes, basePath = '/', prefixTitle = []) { | |
134 | + let res = [] | |
135 | + for (const router of routes) { | |
136 | + // skip hidden router | |
137 | + if (router.hidden) { continue } | |
138 | + const data = { | |
139 | + path: path.resolve(basePath, router.path), | |
140 | + title: [...prefixTitle] | |
141 | + } | |
142 | + if (router.meta && router.meta.title) { | |
143 | + // generate internationalized title | |
144 | + const i18ntitle = i18n.t(`route.${router.meta.title}`) | |
145 | + data.title = [...data.title, i18ntitle] | |
146 | + if (router.redirect !== 'noRedirect') { | |
147 | + // only push the routes with title | |
148 | + // special case: need to exclude parent router without redirect | |
149 | + res.push(data) | |
150 | + } | |
151 | + } | |
152 | + // recursive child routes | |
153 | + if (router.children) { | |
154 | + const tempRoutes = this.generateRoutes(router.children, data.path, data.title) | |
155 | + if (tempRoutes.length >= 1) { | |
156 | + res = [...res, ...tempRoutes] | |
157 | + } | |
158 | + } | |
159 | + } | |
160 | + return res | |
161 | + }, | |
162 | + querySearch(query) { | |
163 | + if (query !== '') { | |
164 | + this.options = this.fuse.search(query) | |
165 | + } else { | |
166 | + this.options = [] | |
167 | + } | |
168 | + } | |
169 | + } | |
170 | +} | |
171 | +</script> | |
172 | + | |
173 | +<style lang="scss" scoped> | |
174 | +.header-search { | |
175 | + font-size: 0 !important; | |
176 | + .search-icon { | |
177 | + cursor: pointer; | |
178 | + font-size: 18px; | |
179 | + vertical-align: middle; | |
180 | + } | |
181 | + .header-search-select { | |
182 | + font-size: 18px; | |
183 | + transition: width 0.2s; | |
184 | + width: 0; | |
185 | + overflow: hidden; | |
186 | + background: transparent; | |
187 | + border-radius: 0; | |
188 | + display: inline-block; | |
189 | + vertical-align: middle; | |
190 | + /deep/ .el-input__inner { | |
191 | + border-radius: 0; | |
192 | + border: 0; | |
193 | + padding-left: 0; | |
194 | + padding-right: 0; | |
195 | + box-shadow: none !important; | |
196 | + border-bottom: 1px solid #d9d9d9; | |
197 | + vertical-align: middle; | |
198 | + } | |
199 | + } | |
200 | + &.show { | |
201 | + .header-search-select { | |
202 | + width: 210px; | |
203 | + margin-left: 10px; | |
204 | + } | |
205 | + } | |
206 | +} | |
207 | +</style> | ... | ... |
src/components/ImageCropper/index.vue
... | ... | @@ -0,0 +1,1778 @@ |
1 | +<template> | |
2 | + <div v-show="value" class="vue-image-crop-upload"> | |
3 | + <div class="vicp-wrap"> | |
4 | + <div class="vicp-close" @click="off"> | |
5 | + <i class="vicp-icon4" /> | |
6 | + </div> | |
7 | + | |
8 | + <div v-show="step == 1" class="vicp-step1"> | |
9 | + <div | |
10 | + class="vicp-drop-area" | |
11 | + @dragleave="preventDefault" | |
12 | + @dragover="preventDefault" | |
13 | + @dragenter="preventDefault" | |
14 | + @click="handleClick" | |
15 | + @drop="handleChange" | |
16 | + > | |
17 | + <i v-show="loading != 1" class="vicp-icon1"> | |
18 | + <i class="vicp-icon1-arrow" /> | |
19 | + <i class="vicp-icon1-body" /> | |
20 | + <i class="vicp-icon1-bottom" /> | |
21 | + </i> | |
22 | + <span v-show="loading !== 1" class="vicp-hint">{{ lang.hint }}</span> | |
23 | + <span v-show="!isSupported" class="vicp-no-supported-hint">{{ lang.noSupported }}</span> | |
24 | + <input v-show="false" v-if="step == 1" ref="fileinput" type="file" @change="handleChange"> | |
25 | + </div> | |
26 | + <div v-show="hasError" class="vicp-error"> | |
27 | + <i class="vicp-icon2" /> | |
28 | + {{ errorMsg }} | |
29 | + </div> | |
30 | + <div class="vicp-operate"> | |
31 | + <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a> | |
32 | + </div> | |
33 | + </div> | |
34 | + | |
35 | + <div v-if="step == 2" class="vicp-step2"> | |
36 | + <div class="vicp-crop"> | |
37 | + <div v-show="true" class="vicp-crop-left"> | |
38 | + <div class="vicp-img-container"> | |
39 | + <img | |
40 | + ref="img" | |
41 | + :src="sourceImgUrl" | |
42 | + :style="sourceImgStyle" | |
43 | + class="vicp-img" | |
44 | + draggable="false" | |
45 | + @drag="preventDefault" | |
46 | + @dragstart="preventDefault" | |
47 | + @dragend="preventDefault" | |
48 | + @dragleave="preventDefault" | |
49 | + @dragover="preventDefault" | |
50 | + @dragenter="preventDefault" | |
51 | + @drop="preventDefault" | |
52 | + @touchstart="imgStartMove" | |
53 | + @touchmove="imgMove" | |
54 | + @touchend="createImg" | |
55 | + @touchcancel="createImg" | |
56 | + @mousedown="imgStartMove" | |
57 | + @mousemove="imgMove" | |
58 | + @mouseup="createImg" | |
59 | + @mouseout="createImg" | |
60 | + > | |
61 | + <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1" /> | |
62 | + <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2" /> | |
63 | + </div> | |
64 | + | |
65 | + <div class="vicp-range"> | |
66 | + <input | |
67 | + :value="scale.range" | |
68 | + type="range" | |
69 | + step="1" | |
70 | + min="0" | |
71 | + max="100" | |
72 | + @input="zoomChange" | |
73 | + > | |
74 | + <i | |
75 | + class="vicp-icon5" | |
76 | + @mousedown="startZoomSub" | |
77 | + @mouseout="endZoomSub" | |
78 | + @mouseup="endZoomSub" | |
79 | + /> | |
80 | + <i | |
81 | + class="vicp-icon6" | |
82 | + @mousedown="startZoomAdd" | |
83 | + @mouseout="endZoomAdd" | |
84 | + @mouseup="endZoomAdd" | |
85 | + /> | |
86 | + </div> | |
87 | + | |
88 | + <div v-if="!noRotate" class="vicp-rotate"> | |
89 | + <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i> | |
90 | + <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i> | |
91 | + </div> | |
92 | + </div> | |
93 | + <div v-show="true" class="vicp-crop-right"> | |
94 | + <div class="vicp-preview"> | |
95 | + <div v-if="!noSquare" class="vicp-preview-item"> | |
96 | + <img :src="createImgUrl" :style="previewStyle"> | |
97 | + <span>{{ lang.preview }}</span> | |
98 | + </div> | |
99 | + <div v-if="!noCircle" class="vicp-preview-item vicp-preview-item-circle"> | |
100 | + <img :src="createImgUrl" :style="previewStyle"> | |
101 | + <span>{{ lang.preview }}</span> | |
102 | + </div> | |
103 | + </div> | |
104 | + </div> | |
105 | + </div> | |
106 | + <div class="vicp-operate"> | |
107 | + <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a> | |
108 | + <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a> | |
109 | + </div> | |
110 | + </div> | |
111 | + | |
112 | + <div v-if="step == 3" class="vicp-step3"> | |
113 | + <div class="vicp-upload"> | |
114 | + <span v-show="loading === 1" class="vicp-loading">{{ lang.loading }}</span> | |
115 | + <div class="vicp-progress-wrap"> | |
116 | + <span v-show="loading === 1" :style="progressStyle" class="vicp-progress" /> | |
117 | + </div> | |
118 | + <div v-show="hasError" class="vicp-error"> | |
119 | + <i class="vicp-icon2" /> | |
120 | + {{ errorMsg }} | |
121 | + </div> | |
122 | + <div v-show="loading === 2" class="vicp-success"> | |
123 | + <i class="vicp-icon3" /> | |
124 | + {{ lang.success }} | |
125 | + </div> | |
126 | + </div> | |
127 | + <div class="vicp-operate"> | |
128 | + <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a> | |
129 | + <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a> | |
130 | + </div> | |
131 | + </div> | |
132 | + <canvas v-show="false" ref="canvas" :width="width" :height="height" /> | |
133 | + </div> | |
134 | + </div> | |
135 | +</template> | |
136 | + | |
137 | +<script> | |
138 | +'use strict' | |
139 | +import request from '@/utils/request' | |
140 | +import language from './utils/language.js' | |
141 | +import mimes from './utils/mimes.js' | |
142 | +import data2blob from './utils/data2blob.js' | |
143 | +import effectRipple from './utils/effectRipple.js' | |
144 | +export default { | |
145 | + props: { | |
146 | + // 域,上传文件name,触发事件会带上(如果一个页面多个图片上传控件,可以做区分 | |
147 | + field: { | |
148 | + type: String, | |
149 | + default: 'avatar' | |
150 | + }, | |
151 | + // 原名key,类似于id,触发事件会带上(如果一个页面多个图片上传控件,可以做区分 | |
152 | + ki: { | |
153 | + type: Number, | |
154 | + default: 0 | |
155 | + }, | |
156 | + // 显示该控件与否 | |
157 | + value: { | |
158 | + type: Boolean, | |
159 | + default: true | |
160 | + }, | |
161 | + // 上传地址 | |
162 | + url: { | |
163 | + type: String, | |
164 | + default: '' | |
165 | + }, | |
166 | + // 其他要上传文件附带的数据,对象格式 | |
167 | + params: { | |
168 | + type: Object, | |
169 | + default: null | |
170 | + }, | |
171 | + // Add custom headers | |
172 | + headers: { | |
173 | + type: Object, | |
174 | + default: null | |
175 | + }, | |
176 | + // 剪裁图片的宽 | |
177 | + width: { | |
178 | + type: Number, | |
179 | + default: 200 | |
180 | + }, | |
181 | + // 剪裁图片的高 | |
182 | + height: { | |
183 | + type: Number, | |
184 | + default: 200 | |
185 | + }, | |
186 | + // 不显示旋转功能 | |
187 | + noRotate: { | |
188 | + type: Boolean, | |
189 | + default: true | |
190 | + }, | |
191 | + // 不预览圆形图片 | |
192 | + noCircle: { | |
193 | + type: Boolean, | |
194 | + default: false | |
195 | + }, | |
196 | + // 不预览方形图片 | |
197 | + noSquare: { | |
198 | + type: Boolean, | |
199 | + default: false | |
200 | + }, | |
201 | + // 单文件大小限制 | |
202 | + maxSize: { | |
203 | + type: Number, | |
204 | + default: 10240 | |
205 | + }, | |
206 | + // 语言类型 | |
207 | + langType: { | |
208 | + type: String, | |
209 | + default: 'zh' | |
210 | + }, | |
211 | + // 语言包 | |
212 | + langExt: { | |
213 | + type: Object, | |
214 | + default: null | |
215 | + }, | |
216 | + // 图片上传格式 | |
217 | + imgFormat: { | |
218 | + type: String, | |
219 | + default: 'png' | |
220 | + }, | |
221 | + // 是否支持跨域 | |
222 | + withCredentials: { | |
223 | + type: Boolean, | |
224 | + default: false | |
225 | + } | |
226 | + }, | |
227 | + data() { | |
228 | + const { imgFormat, langType, langExt, width, height } = this | |
229 | + let isSupported = true | |
230 | + const allowImgFormat = ['jpg', 'png'] | |
231 | + const tempImgFormat = | |
232 | + allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat | |
233 | + const lang = language[langType] ? language[langType] : language['en'] | |
234 | + const mime = mimes[tempImgFormat] | |
235 | + // 规范图片格式 | |
236 | + this.imgFormat = tempImgFormat | |
237 | + if (langExt) { | |
238 | + Object.assign(lang, langExt) | |
239 | + } | |
240 | + if (typeof FormData !== 'function') { | |
241 | + isSupported = false | |
242 | + } | |
243 | + return { | |
244 | + // 图片的mime | |
245 | + mime, | |
246 | + // 语言包 | |
247 | + lang, | |
248 | + // 浏览器是否支持该控件 | |
249 | + isSupported, | |
250 | + // 浏览器是否支持触屏事件 | |
251 | + isSupportTouch: document.hasOwnProperty('ontouchstart'), | |
252 | + // 步骤 | |
253 | + step: 1, // 1选择文件 2剪裁 3上传 | |
254 | + // 上传状态及进度 | |
255 | + loading: 0, // 0未开始 1正在 2成功 3错误 | |
256 | + progress: 0, | |
257 | + // 是否有错误及错误信息 | |
258 | + hasError: false, | |
259 | + errorMsg: '', | |
260 | + // 需求图宽高比 | |
261 | + ratio: width / height, | |
262 | + // 原图地址、生成图片地址 | |
263 | + sourceImg: null, | |
264 | + sourceImgUrl: '', | |
265 | + createImgUrl: '', | |
266 | + // 原图片拖动事件初始值 | |
267 | + sourceImgMouseDown: { | |
268 | + on: false, | |
269 | + mX: 0, // 鼠标按下的坐标 | |
270 | + mY: 0, | |
271 | + x: 0, // scale原图坐标 | |
272 | + y: 0 | |
273 | + }, | |
274 | + // 生成图片预览的容器大小 | |
275 | + previewContainer: { | |
276 | + width: 100, | |
277 | + height: 100 | |
278 | + }, | |
279 | + // 原图容器宽高 | |
280 | + sourceImgContainer: { | |
281 | + // sic | |
282 | + width: 240, | |
283 | + height: 184 // 如果生成图比例与此一致会出现bug,先改成特殊的格式吧,哈哈哈 | |
284 | + }, | |
285 | + // 原图展示属性 | |
286 | + scale: { | |
287 | + zoomAddOn: false, // 按钮缩放事件开启 | |
288 | + zoomSubOn: false, // 按钮缩放事件开启 | |
289 | + range: 1, // 最大100 | |
290 | + rotateLeft: false, // 按钮向左旋转事件开启 | |
291 | + rotateRight: false, // 按钮向右旋转事件开启 | |
292 | + degree: 0, // 旋转度数 | |
293 | + x: 0, | |
294 | + y: 0, | |
295 | + width: 0, | |
296 | + height: 0, | |
297 | + maxWidth: 0, | |
298 | + maxHeight: 0, | |
299 | + minWidth: 0, // 最宽 | |
300 | + minHeight: 0, | |
301 | + naturalWidth: 0, // 原宽 | |
302 | + naturalHeight: 0 | |
303 | + } | |
304 | + } | |
305 | + }, | |
306 | + computed: { | |
307 | + // 进度条样式 | |
308 | + progressStyle() { | |
309 | + const { progress } = this | |
310 | + return { | |
311 | + width: progress + '%' | |
312 | + } | |
313 | + }, | |
314 | + // 原图样式 | |
315 | + sourceImgStyle() { | |
316 | + const { scale, sourceImgMasking } = this | |
317 | + const top = scale.y + sourceImgMasking.y + 'px' | |
318 | + const left = scale.x + sourceImgMasking.x + 'px' | |
319 | + return { | |
320 | + top, | |
321 | + left, | |
322 | + width: scale.width + 'px', | |
323 | + height: scale.height + 'px', | |
324 | + transform: 'rotate(' + scale.degree + 'deg)', // 旋转时 左侧原始图旋转样式 | |
325 | + '-ms-transform': 'rotate(' + scale.degree + 'deg)', // 兼容IE9 | |
326 | + '-moz-transform': 'rotate(' + scale.degree + 'deg)', // 兼容FireFox | |
327 | + '-webkit-transform': 'rotate(' + scale.degree + 'deg)', // 兼容Safari 和 chrome | |
328 | + '-o-transform': 'rotate(' + scale.degree + 'deg)' // 兼容 Opera | |
329 | + } | |
330 | + }, | |
331 | + // 原图蒙版属性 | |
332 | + sourceImgMasking() { | |
333 | + const { width, height, ratio, sourceImgContainer } = this | |
334 | + const sic = sourceImgContainer | |
335 | + const sicRatio = sic.width / sic.height // 原图容器宽高比 | |
336 | + let x = 0 | |
337 | + let y = 0 | |
338 | + let w = sic.width | |
339 | + let h = sic.height | |
340 | + let scale = 1 | |
341 | + if (ratio < sicRatio) { | |
342 | + scale = sic.height / height | |
343 | + w = sic.height * ratio | |
344 | + x = (sic.width - w) / 2 | |
345 | + } | |
346 | + if (ratio > sicRatio) { | |
347 | + scale = sic.width / width | |
348 | + h = sic.width / ratio | |
349 | + y = (sic.height - h) / 2 | |
350 | + } | |
351 | + return { | |
352 | + scale, // 蒙版相对需求宽高的缩放 | |
353 | + x, | |
354 | + y, | |
355 | + width: w, | |
356 | + height: h | |
357 | + } | |
358 | + }, | |
359 | + // 原图遮罩样式 | |
360 | + sourceImgShadeStyle() { | |
361 | + const { sourceImgMasking, sourceImgContainer } = this | |
362 | + const sic = sourceImgContainer | |
363 | + const sim = sourceImgMasking | |
364 | + const w = | |
365 | + sim.width === sic.width ? sim.width : (sic.width - sim.width) / 2 | |
366 | + const h = | |
367 | + sim.height === sic.height ? sim.height : (sic.height - sim.height) / 2 | |
368 | + return { | |
369 | + width: w + 'px', | |
370 | + height: h + 'px' | |
371 | + } | |
372 | + }, | |
373 | + previewStyle() { | |
374 | + const { ratio, previewContainer } = this | |
375 | + const pc = previewContainer | |
376 | + let w = pc.width | |
377 | + let h = pc.height | |
378 | + const pcRatio = w / h | |
379 | + if (ratio < pcRatio) { | |
380 | + w = pc.height * ratio | |
381 | + } | |
382 | + if (ratio > pcRatio) { | |
383 | + h = pc.width / ratio | |
384 | + } | |
385 | + return { | |
386 | + width: w + 'px', | |
387 | + height: h + 'px' | |
388 | + } | |
389 | + } | |
390 | + }, | |
391 | + watch: { | |
392 | + value(newValue) { | |
393 | + if (newValue && this.loading !== 1) { | |
394 | + this.reset() | |
395 | + } | |
396 | + } | |
397 | + }, | |
398 | + created() { | |
399 | + // 绑定按键esc隐藏此插件事件 | |
400 | + document.addEventListener('keyup', this.closeHandler) | |
401 | + }, | |
402 | + destroyed() { | |
403 | + document.removeEventListener('keyup', this.closeHandler) | |
404 | + }, | |
405 | + methods: { | |
406 | + // 点击波纹效果 | |
407 | + ripple(e) { | |
408 | + effectRipple(e) | |
409 | + }, | |
410 | + // 关闭控件 | |
411 | + off() { | |
412 | + setTimeout(() => { | |
413 | + this.$emit('input', false) | |
414 | + this.$emit('close') | |
415 | + if (this.step === 3 && this.loading === 2) { | |
416 | + this.setStep(1) | |
417 | + } | |
418 | + }, 200) | |
419 | + }, | |
420 | + // 设置步骤 | |
421 | + setStep(no) { | |
422 | + // 延时是为了显示动画效果呢,哈哈哈 | |
423 | + setTimeout(() => { | |
424 | + this.step = no | |
425 | + }, 200) | |
426 | + }, | |
427 | + /* 图片选择区域函数绑定 | |
428 | + ---------------------------------------------------------------*/ | |
429 | + preventDefault(e) { | |
430 | + e.preventDefault() | |
431 | + return false | |
432 | + }, | |
433 | + handleClick(e) { | |
434 | + if (this.loading !== 1) { | |
435 | + if (e.target !== this.$refs.fileinput) { | |
436 | + e.preventDefault() | |
437 | + if (document.activeElement !== this.$refs) { | |
438 | + this.$refs.fileinput.click() | |
439 | + } | |
440 | + } | |
441 | + } | |
442 | + }, | |
443 | + handleChange(e) { | |
444 | + e.preventDefault() | |
445 | + if (this.loading !== 1) { | |
446 | + const files = e.target.files || e.dataTransfer.files | |
447 | + this.reset() | |
448 | + if (this.checkFile(files[0])) { | |
449 | + this.setSourceImg(files[0]) | |
450 | + } | |
451 | + } | |
452 | + }, | |
453 | + /* ---------------------------------------------------------------*/ | |
454 | + // 检测选择的文件是否合适 | |
455 | + checkFile(file) { | |
456 | + const { lang, maxSize } = this | |
457 | + // 仅限图片 | |
458 | + if (file.type.indexOf('image') === -1) { | |
459 | + this.hasError = true | |
460 | + this.errorMsg = lang.error.onlyImg | |
461 | + return false | |
462 | + } | |
463 | + // 超出大小 | |
464 | + if (file.size / 1024 > maxSize) { | |
465 | + this.hasError = true | |
466 | + this.errorMsg = lang.error.outOfSize + maxSize + 'kb' | |
467 | + return false | |
468 | + } | |
469 | + return true | |
470 | + }, | |
471 | + // 重置控件 | |
472 | + reset() { | |
473 | + this.loading = 0 | |
474 | + this.hasError = false | |
475 | + this.errorMsg = '' | |
476 | + this.progress = 0 | |
477 | + }, | |
478 | + // 设置图片源 | |
479 | + setSourceImg(file) { | |
480 | + const fr = new FileReader() | |
481 | + fr.onload = e => { | |
482 | + this.sourceImgUrl = fr.result | |
483 | + this.startCrop() | |
484 | + } | |
485 | + fr.readAsDataURL(file) | |
486 | + }, | |
487 | + // 剪裁前准备工作 | |
488 | + startCrop() { | |
489 | + const { | |
490 | + width, | |
491 | + height, | |
492 | + ratio, | |
493 | + scale, | |
494 | + sourceImgUrl, | |
495 | + sourceImgMasking, | |
496 | + lang | |
497 | + } = this | |
498 | + const sim = sourceImgMasking | |
499 | + const img = new Image() | |
500 | + img.src = sourceImgUrl | |
501 | + img.onload = () => { | |
502 | + const nWidth = img.naturalWidth | |
503 | + const nHeight = img.naturalHeight | |
504 | + const nRatio = nWidth / nHeight | |
505 | + let w = sim.width | |
506 | + let h = sim.height | |
507 | + let x = 0 | |
508 | + let y = 0 | |
509 | + // 图片像素不达标 | |
510 | + if (nWidth < width || nHeight < height) { | |
511 | + this.hasError = true | |
512 | + this.errorMsg = lang.error.lowestPx + width + '*' + height | |
513 | + return false | |
514 | + } | |
515 | + if (ratio > nRatio) { | |
516 | + h = w / nRatio | |
517 | + y = (sim.height - h) / 2 | |
518 | + } | |
519 | + if (ratio < nRatio) { | |
520 | + w = h * nRatio | |
521 | + x = (sim.width - w) / 2 | |
522 | + } | |
523 | + scale.range = 0 | |
524 | + scale.x = x | |
525 | + scale.y = y | |
526 | + scale.width = w | |
527 | + scale.height = h | |
528 | + scale.degree = 0 | |
529 | + scale.minWidth = w | |
530 | + scale.minHeight = h | |
531 | + scale.maxWidth = nWidth * sim.scale | |
532 | + scale.maxHeight = nHeight * sim.scale | |
533 | + scale.naturalWidth = nWidth | |
534 | + scale.naturalHeight = nHeight | |
535 | + this.sourceImg = img | |
536 | + this.createImg() | |
537 | + this.setStep(2) | |
538 | + } | |
539 | + }, | |
540 | + // 鼠标按下图片准备移动 | |
541 | + imgStartMove(e) { | |
542 | + e.preventDefault() | |
543 | + // 支持触摸事件,则鼠标事件无效 | |
544 | + if (this.isSupportTouch && !e.targetTouches) { | |
545 | + return false | |
546 | + } | |
547 | + const et = e.targetTouches ? e.targetTouches[0] : e | |
548 | + const { sourceImgMouseDown, scale } = this | |
549 | + const simd = sourceImgMouseDown | |
550 | + simd.mX = et.screenX | |
551 | + simd.mY = et.screenY | |
552 | + simd.x = scale.x | |
553 | + simd.y = scale.y | |
554 | + simd.on = true | |
555 | + }, | |
556 | + // 鼠标按下状态下移动,图片移动 | |
557 | + imgMove(e) { | |
558 | + e.preventDefault() | |
559 | + // 支持触摸事件,则鼠标事件无效 | |
560 | + if (this.isSupportTouch && !e.targetTouches) { | |
561 | + return false | |
562 | + } | |
563 | + const et = e.targetTouches ? e.targetTouches[0] : e | |
564 | + const { | |
565 | + sourceImgMouseDown: { on, mX, mY, x, y }, | |
566 | + scale, | |
567 | + sourceImgMasking | |
568 | + } = this | |
569 | + const sim = sourceImgMasking | |
570 | + const nX = et.screenX | |
571 | + const nY = et.screenY | |
572 | + const dX = nX - mX | |
573 | + const dY = nY - mY | |
574 | + let rX = x + dX | |
575 | + let rY = y + dY | |
576 | + if (!on) return | |
577 | + if (rX > 0) { | |
578 | + rX = 0 | |
579 | + } | |
580 | + if (rY > 0) { | |
581 | + rY = 0 | |
582 | + } | |
583 | + if (rX < sim.width - scale.width) { | |
584 | + rX = sim.width - scale.width | |
585 | + } | |
586 | + if (rY < sim.height - scale.height) { | |
587 | + rY = sim.height - scale.height | |
588 | + } | |
589 | + scale.x = rX | |
590 | + scale.y = rY | |
591 | + }, | |
592 | + // 按钮按下开始向右旋转 | |
593 | + startRotateRight(e) { | |
594 | + const { scale } = this | |
595 | + scale.rotateRight = true | |
596 | + const rotate = () => { | |
597 | + if (scale.rotateRight) { | |
598 | + const degree = ++scale.degree | |
599 | + this.createImg(degree) | |
600 | + setTimeout(function() { | |
601 | + rotate() | |
602 | + }, 60) | |
603 | + } | |
604 | + } | |
605 | + rotate() | |
606 | + }, | |
607 | + // 按钮按下开始向左旋转 | |
608 | + startRotateLeft(e) { | |
609 | + const { scale } = this | |
610 | + scale.rotateLeft = true | |
611 | + const rotate = () => { | |
612 | + if (scale.rotateLeft) { | |
613 | + const degree = --scale.degree | |
614 | + this.createImg(degree) | |
615 | + setTimeout(function() { | |
616 | + rotate() | |
617 | + }, 60) | |
618 | + } | |
619 | + } | |
620 | + rotate() | |
621 | + }, | |
622 | + // 停止旋转 | |
623 | + endRotate() { | |
624 | + const { scale } = this | |
625 | + scale.rotateLeft = false | |
626 | + scale.rotateRight = false | |
627 | + }, | |
628 | + // 按钮按下开始放大 | |
629 | + startZoomAdd(e) { | |
630 | + const { scale } = this | |
631 | + scale.zoomAddOn = true | |
632 | + const zoom = () => { | |
633 | + if (scale.zoomAddOn) { | |
634 | + const range = scale.range >= 100 ? 100 : ++scale.range | |
635 | + this.zoomImg(range) | |
636 | + setTimeout(function() { | |
637 | + zoom() | |
638 | + }, 60) | |
639 | + } | |
640 | + } | |
641 | + zoom() | |
642 | + }, | |
643 | + // 按钮松开或移开取消放大 | |
644 | + endZoomAdd(e) { | |
645 | + this.scale.zoomAddOn = false | |
646 | + }, | |
647 | + // 按钮按下开始缩小 | |
648 | + startZoomSub(e) { | |
649 | + const { scale } = this | |
650 | + scale.zoomSubOn = true | |
651 | + const zoom = () => { | |
652 | + if (scale.zoomSubOn) { | |
653 | + const range = scale.range <= 0 ? 0 : --scale.range | |
654 | + this.zoomImg(range) | |
655 | + setTimeout(function() { | |
656 | + zoom() | |
657 | + }, 60) | |
658 | + } | |
659 | + } | |
660 | + zoom() | |
661 | + }, | |
662 | + // 按钮松开或移开取消缩小 | |
663 | + endZoomSub(e) { | |
664 | + const { scale } = this | |
665 | + scale.zoomSubOn = false | |
666 | + }, | |
667 | + zoomChange(e) { | |
668 | + this.zoomImg(e.target.value) | |
669 | + }, | |
670 | + // 缩放原图 | |
671 | + zoomImg(newRange) { | |
672 | + const { sourceImgMasking, scale } = this | |
673 | + const { | |
674 | + maxWidth, | |
675 | + maxHeight, | |
676 | + minWidth, | |
677 | + minHeight, | |
678 | + width, | |
679 | + height, | |
680 | + x, | |
681 | + y | |
682 | + } = scale | |
683 | + const sim = sourceImgMasking | |
684 | + // 蒙版宽高 | |
685 | + const sWidth = sim.width | |
686 | + const sHeight = sim.height | |
687 | + // 新宽高 | |
688 | + const nWidth = minWidth + ((maxWidth - minWidth) * newRange) / 100 | |
689 | + const nHeight = minHeight + ((maxHeight - minHeight) * newRange) / 100 | |
690 | + // 新坐标(根据蒙版中心点缩放) | |
691 | + let nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x) | |
692 | + let nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y) | |
693 | + // 判断新坐标是否超过蒙版限制 | |
694 | + if (nX > 0) { | |
695 | + nX = 0 | |
696 | + } | |
697 | + if (nY > 0) { | |
698 | + nY = 0 | |
699 | + } | |
700 | + if (nX < sWidth - nWidth) { | |
701 | + nX = sWidth - nWidth | |
702 | + } | |
703 | + if (nY < sHeight - nHeight) { | |
704 | + nY = sHeight - nHeight | |
705 | + } | |
706 | + // 赋值处理 | |
707 | + scale.x = nX | |
708 | + scale.y = nY | |
709 | + scale.width = nWidth | |
710 | + scale.height = nHeight | |
711 | + scale.range = newRange | |
712 | + setTimeout(() => { | |
713 | + if (scale.range === newRange) { | |
714 | + this.createImg() | |
715 | + } | |
716 | + }, 300) | |
717 | + }, | |
718 | + // 生成需求图片 | |
719 | + createImg(e) { | |
720 | + const { | |
721 | + mime, | |
722 | + sourceImg, | |
723 | + scale: { x, y, width, height, degree }, | |
724 | + sourceImgMasking: { scale } | |
725 | + } = this | |
726 | + const canvas = this.$refs.canvas | |
727 | + const ctx = canvas.getContext('2d') | |
728 | + if (e) { | |
729 | + // 取消鼠标按下移动状态 | |
730 | + this.sourceImgMouseDown.on = false | |
731 | + } | |
732 | + canvas.width = this.width | |
733 | + canvas.height = this.height | |
734 | + ctx.clearRect(0, 0, this.width, this.height) | |
735 | + // 将透明区域设置为白色底边 | |
736 | + ctx.fillStyle = '#fff' | |
737 | + ctx.fillRect(0, 0, this.width, this.height) | |
738 | + ctx.translate(this.width * 0.5, this.height * 0.5) | |
739 | + ctx.rotate((Math.PI * degree) / 180) | |
740 | + ctx.translate(-this.width * 0.5, -this.height * 0.5) | |
741 | + ctx.drawImage( | |
742 | + sourceImg, | |
743 | + x / scale, | |
744 | + y / scale, | |
745 | + width / scale, | |
746 | + height / scale | |
747 | + ) | |
748 | + this.createImgUrl = canvas.toDataURL(mime) | |
749 | + }, | |
750 | + prepareUpload() { | |
751 | + const { url, createImgUrl, field, ki } = this | |
752 | + this.$emit('crop-success', createImgUrl, field, ki) | |
753 | + if (typeof url === 'string' && url) { | |
754 | + this.upload() | |
755 | + } else { | |
756 | + this.off() | |
757 | + } | |
758 | + }, | |
759 | + // 上传图片 | |
760 | + upload() { | |
761 | + const { | |
762 | + lang, | |
763 | + imgFormat, | |
764 | + mime, | |
765 | + url, | |
766 | + params, | |
767 | + field, | |
768 | + ki, | |
769 | + createImgUrl | |
770 | + } = this | |
771 | + const fmData = new FormData() | |
772 | + fmData.append( | |
773 | + field, | |
774 | + data2blob(createImgUrl, mime), | |
775 | + field + '.' + imgFormat | |
776 | + ) | |
777 | + // 添加其他参数 | |
778 | + if (typeof params === 'object' && params) { | |
779 | + Object.keys(params).forEach(k => { | |
780 | + fmData.append(k, params[k]) | |
781 | + }) | |
782 | + } | |
783 | + // 监听进度回调 | |
784 | + // const uploadProgress = (event) => { | |
785 | + // if (event.lengthComputable) { | |
786 | + // this.progress = 100 * Math.round(event.loaded) / event.total | |
787 | + // } | |
788 | + // } | |
789 | + // 上传文件 | |
790 | + this.reset() | |
791 | + this.loading = 1 | |
792 | + this.setStep(3) | |
793 | + request({ | |
794 | + url, | |
795 | + method: 'post', | |
796 | + data: fmData | |
797 | + }) | |
798 | + .then(resData => { | |
799 | + this.loading = 2 | |
800 | + this.$emit('crop-upload-success', resData.data) | |
801 | + }) | |
802 | + .catch(err => { | |
803 | + if (this.value) { | |
804 | + this.loading = 3 | |
805 | + this.hasError = true | |
806 | + this.errorMsg = lang.fail | |
807 | + this.$emit('crop-upload-fail', err, field, ki) | |
808 | + } | |
809 | + }) | |
810 | + }, | |
811 | + closeHandler(e) { | |
812 | + if (this.value && (e.key === 'Escape' || e.keyCode === 27)) { | |
813 | + this.off() | |
814 | + } | |
815 | + } | |
816 | + } | |
817 | +} | |
818 | +</script> | |
819 | + | |
820 | +<style lang="scss"> | |
821 | +@charset "UTF-8"; | |
822 | +@-webkit-keyframes vicp_progress { | |
823 | + 0% { | |
824 | + background-position-y: 0; | |
825 | + } | |
826 | + 100% { | |
827 | + background-position-y: 40px; | |
828 | + } | |
829 | +} | |
830 | +@keyframes vicp_progress { | |
831 | + 0% { | |
832 | + background-position-y: 0; | |
833 | + } | |
834 | + 100% { | |
835 | + background-position-y: 40px; | |
836 | + } | |
837 | +} | |
838 | +@-webkit-keyframes vicp { | |
839 | + 0% { | |
840 | + opacity: 0; | |
841 | + -webkit-transform: scale(0) translatey(-60px); | |
842 | + transform: scale(0) translatey(-60px); | |
843 | + } | |
844 | + 100% { | |
845 | + opacity: 1; | |
846 | + -webkit-transform: scale(1) translatey(0); | |
847 | + transform: scale(1) translatey(0); | |
848 | + } | |
849 | +} | |
850 | +@keyframes vicp { | |
851 | + 0% { | |
852 | + opacity: 0; | |
853 | + -webkit-transform: scale(0) translatey(-60px); | |
854 | + transform: scale(0) translatey(-60px); | |
855 | + } | |
856 | + 100% { | |
857 | + opacity: 1; | |
858 | + -webkit-transform: scale(1) translatey(0); | |
859 | + transform: scale(1) translatey(0); | |
860 | + } | |
861 | +} | |
862 | +.vue-image-crop-upload { | |
863 | + position: fixed; | |
864 | + display: block; | |
865 | + -webkit-box-sizing: border-box; | |
866 | + box-sizing: border-box; | |
867 | + z-index: 10000; | |
868 | + top: 0; | |
869 | + bottom: 0; | |
870 | + left: 0; | |
871 | + right: 0; | |
872 | + width: 100%; | |
873 | + height: 100%; | |
874 | + background-color: rgba(0, 0, 0, 0.65); | |
875 | + -webkit-tap-highlight-color: transparent; | |
876 | + -moz-tap-highlight-color: transparent; | |
877 | +} | |
878 | +.vue-image-crop-upload .vicp-wrap { | |
879 | + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); | |
880 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); | |
881 | + position: fixed; | |
882 | + display: block; | |
883 | + -webkit-box-sizing: border-box; | |
884 | + box-sizing: border-box; | |
885 | + z-index: 10000; | |
886 | + top: 0; | |
887 | + bottom: 0; | |
888 | + left: 0; | |
889 | + right: 0; | |
890 | + margin: auto; | |
891 | + width: 600px; | |
892 | + height: 330px; | |
893 | + padding: 25px; | |
894 | + background-color: #fff; | |
895 | + border-radius: 2px; | |
896 | + -webkit-animation: vicp 0.12s ease-in; | |
897 | + animation: vicp 0.12s ease-in; | |
898 | +} | |
899 | +.vue-image-crop-upload .vicp-wrap .vicp-close { | |
900 | + position: absolute; | |
901 | + right: -30px; | |
902 | + top: -30px; | |
903 | +} | |
904 | +.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 { | |
905 | + position: relative; | |
906 | + display: block; | |
907 | + width: 30px; | |
908 | + height: 30px; | |
909 | + cursor: pointer; | |
910 | + -webkit-transition: -webkit-transform 0.18s; | |
911 | + transition: -webkit-transform 0.18s; | |
912 | + transition: transform 0.18s; | |
913 | + transition: transform 0.18s, -webkit-transform 0.18s; | |
914 | + -webkit-transform: rotate(0); | |
915 | + -ms-transform: rotate(0); | |
916 | + transform: rotate(0); | |
917 | +} | |
918 | +.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, | |
919 | +.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before { | |
920 | + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); | |
921 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); | |
922 | + content: ""; | |
923 | + position: absolute; | |
924 | + top: 12px; | |
925 | + left: 4px; | |
926 | + width: 20px; | |
927 | + height: 3px; | |
928 | + -webkit-transform: rotate(45deg); | |
929 | + -ms-transform: rotate(45deg); | |
930 | + transform: rotate(45deg); | |
931 | + background-color: #fff; | |
932 | +} | |
933 | +.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after { | |
934 | + -webkit-transform: rotate(-45deg); | |
935 | + -ms-transform: rotate(-45deg); | |
936 | + transform: rotate(-45deg); | |
937 | +} | |
938 | +.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover { | |
939 | + -webkit-transform: rotate(90deg); | |
940 | + -ms-transform: rotate(90deg); | |
941 | + transform: rotate(90deg); | |
942 | +} | |
943 | +.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area { | |
944 | + position: relative; | |
945 | + -webkit-box-sizing: border-box; | |
946 | + box-sizing: border-box; | |
947 | + padding: 35px; | |
948 | + height: 170px; | |
949 | + background-color: rgba(0, 0, 0, 0.03); | |
950 | + text-align: center; | |
951 | + border: 1px dashed rgba(0, 0, 0, 0.08); | |
952 | + overflow: hidden; | |
953 | +} | |
954 | +.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 { | |
955 | + display: block; | |
956 | + margin: 0 auto 6px; | |
957 | + width: 42px; | |
958 | + height: 42px; | |
959 | + overflow: hidden; | |
960 | +} | |
961 | +.vue-image-crop-upload | |
962 | + .vicp-wrap | |
963 | + .vicp-step1 | |
964 | + .vicp-drop-area | |
965 | + .vicp-icon1 | |
966 | + .vicp-icon1-arrow { | |
967 | + display: block; | |
968 | + margin: 0 auto; | |
969 | + width: 0; | |
970 | + height: 0; | |
971 | + border-bottom: 14.7px solid rgba(0, 0, 0, 0.3); | |
972 | + border-left: 14.7px solid transparent; | |
973 | + border-right: 14.7px solid transparent; | |
974 | +} | |
975 | +.vue-image-crop-upload | |
976 | + .vicp-wrap | |
977 | + .vicp-step1 | |
978 | + .vicp-drop-area | |
979 | + .vicp-icon1 | |
980 | + .vicp-icon1-body { | |
981 | + display: block; | |
982 | + width: 12.6px; | |
983 | + height: 14.7px; | |
984 | + margin: 0 auto; | |
985 | + background-color: rgba(0, 0, 0, 0.3); | |
986 | +} | |
987 | +.vue-image-crop-upload | |
988 | + .vicp-wrap | |
989 | + .vicp-step1 | |
990 | + .vicp-drop-area | |
991 | + .vicp-icon1 | |
992 | + .vicp-icon1-bottom { | |
993 | + -webkit-box-sizing: border-box; | |
994 | + box-sizing: border-box; | |
995 | + display: block; | |
996 | + height: 12.6px; | |
997 | + border: 6px solid rgba(0, 0, 0, 0.3); | |
998 | + border-top: none; | |
999 | +} | |
1000 | +.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint { | |
1001 | + display: block; | |
1002 | + padding: 15px; | |
1003 | + font-size: 14px; | |
1004 | + color: #666; | |
1005 | + line-height: 30px; | |
1006 | +} | |
1007 | +.vue-image-crop-upload | |
1008 | + .vicp-wrap | |
1009 | + .vicp-step1 | |
1010 | + .vicp-drop-area | |
1011 | + .vicp-no-supported-hint { | |
1012 | + display: block; | |
1013 | + position: absolute; | |
1014 | + top: 0; | |
1015 | + left: 0; | |
1016 | + padding: 30px; | |
1017 | + width: 100%; | |
1018 | + height: 60px; | |
1019 | + line-height: 30px; | |
1020 | + background-color: #eee; | |
1021 | + text-align: center; | |
1022 | + color: #666; | |
1023 | + font-size: 14px; | |
1024 | +} | |
1025 | +.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover { | |
1026 | + cursor: pointer; | |
1027 | + border-color: rgba(0, 0, 0, 0.1); | |
1028 | + background-color: rgba(0, 0, 0, 0.05); | |
1029 | +} | |
1030 | +.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop { | |
1031 | + overflow: hidden; | |
1032 | +} | |
1033 | +.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left { | |
1034 | + float: left; | |
1035 | +} | |
1036 | +.vue-image-crop-upload | |
1037 | + .vicp-wrap | |
1038 | + .vicp-step2 | |
1039 | + .vicp-crop | |
1040 | + .vicp-crop-left | |
1041 | + .vicp-img-container { | |
1042 | + position: relative; | |
1043 | + display: block; | |
1044 | + width: 240px; | |
1045 | + height: 180px; | |
1046 | + background-color: #e5e5e0; | |
1047 | + overflow: hidden; | |
1048 | +} | |
1049 | +.vue-image-crop-upload | |
1050 | + .vicp-wrap | |
1051 | + .vicp-step2 | |
1052 | + .vicp-crop | |
1053 | + .vicp-crop-left | |
1054 | + .vicp-img-container | |
1055 | + .vicp-img { | |
1056 | + position: absolute; | |
1057 | + display: block; | |
1058 | + cursor: move; | |
1059 | + -webkit-user-select: none; | |
1060 | + -moz-user-select: none; | |
1061 | + -ms-user-select: none; | |
1062 | + user-select: none; | |
1063 | +} | |
1064 | +.vue-image-crop-upload | |
1065 | + .vicp-wrap | |
1066 | + .vicp-step2 | |
1067 | + .vicp-crop | |
1068 | + .vicp-crop-left | |
1069 | + .vicp-img-container | |
1070 | + .vicp-img-shade { | |
1071 | + -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); | |
1072 | + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); | |
1073 | + position: absolute; | |
1074 | + background-color: rgba(241, 242, 243, 0.8); | |
1075 | +} | |
1076 | +.vue-image-crop-upload | |
1077 | + .vicp-wrap | |
1078 | + .vicp-step2 | |
1079 | + .vicp-crop | |
1080 | + .vicp-crop-left | |
1081 | + .vicp-img-container | |
1082 | + .vicp-img-shade.vicp-img-shade-1 { | |
1083 | + top: 0; | |
1084 | + left: 0; | |
1085 | +} | |
1086 | +.vue-image-crop-upload | |
1087 | + .vicp-wrap | |
1088 | + .vicp-step2 | |
1089 | + .vicp-crop | |
1090 | + .vicp-crop-left | |
1091 | + .vicp-img-container | |
1092 | + .vicp-img-shade.vicp-img-shade-2 { | |
1093 | + bottom: 0; | |
1094 | + right: 0; | |
1095 | +} | |
1096 | +.vue-image-crop-upload | |
1097 | + .vicp-wrap | |
1098 | + .vicp-step2 | |
1099 | + .vicp-crop | |
1100 | + .vicp-crop-left | |
1101 | + .vicp-rotate { | |
1102 | + position: relative; | |
1103 | + width: 240px; | |
1104 | + height: 18px; | |
1105 | +} | |
1106 | +.vue-image-crop-upload | |
1107 | + .vicp-wrap | |
1108 | + .vicp-step2 | |
1109 | + .vicp-crop | |
1110 | + .vicp-crop-left | |
1111 | + .vicp-rotate | |
1112 | + i { | |
1113 | + display: block; | |
1114 | + width: 18px; | |
1115 | + height: 18px; | |
1116 | + border-radius: 100%; | |
1117 | + line-height: 18px; | |
1118 | + text-align: center; | |
1119 | + font-size: 12px; | |
1120 | + font-weight: bold; | |
1121 | + background-color: rgba(0, 0, 0, 0.08); | |
1122 | + color: #fff; | |
1123 | + overflow: hidden; | |
1124 | +} | |
1125 | +.vue-image-crop-upload | |
1126 | + .vicp-wrap | |
1127 | + .vicp-step2 | |
1128 | + .vicp-crop | |
1129 | + .vicp-crop-left | |
1130 | + .vicp-rotate | |
1131 | + i:hover { | |
1132 | + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
1133 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
1134 | + cursor: pointer; | |
1135 | + background-color: rgba(0, 0, 0, 0.14); | |
1136 | +} | |
1137 | +.vue-image-crop-upload | |
1138 | + .vicp-wrap | |
1139 | + .vicp-step2 | |
1140 | + .vicp-crop | |
1141 | + .vicp-crop-left | |
1142 | + .vicp-rotate | |
1143 | + i:first-child { | |
1144 | + float: left; | |
1145 | +} | |
1146 | +.vue-image-crop-upload | |
1147 | + .vicp-wrap | |
1148 | + .vicp-step2 | |
1149 | + .vicp-crop | |
1150 | + .vicp-crop-left | |
1151 | + .vicp-rotate | |
1152 | + i:last-child { | |
1153 | + float: right; | |
1154 | +} | |
1155 | +.vue-image-crop-upload | |
1156 | + .vicp-wrap | |
1157 | + .vicp-step2 | |
1158 | + .vicp-crop | |
1159 | + .vicp-crop-left | |
1160 | + .vicp-range { | |
1161 | + position: relative; | |
1162 | + margin: 30px 0 10px 0; | |
1163 | + width: 240px; | |
1164 | + height: 18px; | |
1165 | +} | |
1166 | +.vue-image-crop-upload | |
1167 | + .vicp-wrap | |
1168 | + .vicp-step2 | |
1169 | + .vicp-crop | |
1170 | + .vicp-crop-left | |
1171 | + .vicp-range | |
1172 | + .vicp-icon5, | |
1173 | +.vue-image-crop-upload | |
1174 | + .vicp-wrap | |
1175 | + .vicp-step2 | |
1176 | + .vicp-crop | |
1177 | + .vicp-crop-left | |
1178 | + .vicp-range | |
1179 | + .vicp-icon6 { | |
1180 | + position: absolute; | |
1181 | + top: 0; | |
1182 | + width: 18px; | |
1183 | + height: 18px; | |
1184 | + border-radius: 100%; | |
1185 | + background-color: rgba(0, 0, 0, 0.08); | |
1186 | +} | |
1187 | +.vue-image-crop-upload | |
1188 | + .vicp-wrap | |
1189 | + .vicp-step2 | |
1190 | + .vicp-crop | |
1191 | + .vicp-crop-left | |
1192 | + .vicp-range | |
1193 | + .vicp-icon5:hover, | |
1194 | +.vue-image-crop-upload | |
1195 | + .vicp-wrap | |
1196 | + .vicp-step2 | |
1197 | + .vicp-crop | |
1198 | + .vicp-crop-left | |
1199 | + .vicp-range | |
1200 | + .vicp-icon6:hover { | |
1201 | + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
1202 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
1203 | + cursor: pointer; | |
1204 | + background-color: rgba(0, 0, 0, 0.14); | |
1205 | +} | |
1206 | +.vue-image-crop-upload | |
1207 | + .vicp-wrap | |
1208 | + .vicp-step2 | |
1209 | + .vicp-crop | |
1210 | + .vicp-crop-left | |
1211 | + .vicp-range | |
1212 | + .vicp-icon5 { | |
1213 | + left: 0; | |
1214 | +} | |
1215 | +.vue-image-crop-upload | |
1216 | + .vicp-wrap | |
1217 | + .vicp-step2 | |
1218 | + .vicp-crop | |
1219 | + .vicp-crop-left | |
1220 | + .vicp-range | |
1221 | + .vicp-icon5::before { | |
1222 | + position: absolute; | |
1223 | + content: ""; | |
1224 | + display: block; | |
1225 | + left: 3px; | |
1226 | + top: 8px; | |
1227 | + width: 12px; | |
1228 | + height: 2px; | |
1229 | + background-color: #fff; | |
1230 | +} | |
1231 | +.vue-image-crop-upload | |
1232 | + .vicp-wrap | |
1233 | + .vicp-step2 | |
1234 | + .vicp-crop | |
1235 | + .vicp-crop-left | |
1236 | + .vicp-range | |
1237 | + .vicp-icon6 { | |
1238 | + right: 0; | |
1239 | +} | |
1240 | +.vue-image-crop-upload | |
1241 | + .vicp-wrap | |
1242 | + .vicp-step2 | |
1243 | + .vicp-crop | |
1244 | + .vicp-crop-left | |
1245 | + .vicp-range | |
1246 | + .vicp-icon6::before { | |
1247 | + position: absolute; | |
1248 | + content: ""; | |
1249 | + display: block; | |
1250 | + left: 3px; | |
1251 | + top: 8px; | |
1252 | + width: 12px; | |
1253 | + height: 2px; | |
1254 | + background-color: #fff; | |
1255 | +} | |
1256 | +.vue-image-crop-upload | |
1257 | + .vicp-wrap | |
1258 | + .vicp-step2 | |
1259 | + .vicp-crop | |
1260 | + .vicp-crop-left | |
1261 | + .vicp-range | |
1262 | + .vicp-icon6::after { | |
1263 | + position: absolute; | |
1264 | + content: ""; | |
1265 | + display: block; | |
1266 | + top: 3px; | |
1267 | + left: 8px; | |
1268 | + width: 2px; | |
1269 | + height: 12px; | |
1270 | + background-color: #fff; | |
1271 | +} | |
1272 | +.vue-image-crop-upload | |
1273 | + .vicp-wrap | |
1274 | + .vicp-step2 | |
1275 | + .vicp-crop | |
1276 | + .vicp-crop-left | |
1277 | + .vicp-range | |
1278 | + input[type="range"] { | |
1279 | + display: block; | |
1280 | + padding-top: 5px; | |
1281 | + margin: 0 auto; | |
1282 | + width: 180px; | |
1283 | + height: 8px; | |
1284 | + vertical-align: top; | |
1285 | + background: transparent; | |
1286 | + -webkit-appearance: none; | |
1287 | + -moz-appearance: none; | |
1288 | + appearance: none; | |
1289 | + cursor: pointer; | |
1290 | + /* 滑块 | |
1291 | + ---------------------------------------------------------------*/ | |
1292 | + /* 轨道 | |
1293 | + ---------------------------------------------------------------*/ | |
1294 | +} | |
1295 | +.vue-image-crop-upload | |
1296 | + .vicp-wrap | |
1297 | + .vicp-step2 | |
1298 | + .vicp-crop | |
1299 | + .vicp-crop-left | |
1300 | + .vicp-range | |
1301 | + input[type="range"]:focus { | |
1302 | + outline: none; | |
1303 | +} | |
1304 | +.vue-image-crop-upload | |
1305 | + .vicp-wrap | |
1306 | + .vicp-step2 | |
1307 | + .vicp-crop | |
1308 | + .vicp-crop-left | |
1309 | + .vicp-range | |
1310 | + input[type="range"]::-webkit-slider-thumb { | |
1311 | + -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); | |
1312 | + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); | |
1313 | + -webkit-appearance: none; | |
1314 | + appearance: none; | |
1315 | + margin-top: -3px; | |
1316 | + width: 12px; | |
1317 | + height: 12px; | |
1318 | + background-color: #61c091; | |
1319 | + border-radius: 100%; | |
1320 | + border: none; | |
1321 | + -webkit-transition: 0.2s; | |
1322 | + transition: 0.2s; | |
1323 | +} | |
1324 | +.vue-image-crop-upload | |
1325 | + .vicp-wrap | |
1326 | + .vicp-step2 | |
1327 | + .vicp-crop | |
1328 | + .vicp-crop-left | |
1329 | + .vicp-range | |
1330 | + input[type="range"]::-moz-range-thumb { | |
1331 | + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); | |
1332 | + -moz-appearance: none; | |
1333 | + appearance: none; | |
1334 | + width: 12px; | |
1335 | + height: 12px; | |
1336 | + background-color: #61c091; | |
1337 | + border-radius: 100%; | |
1338 | + border: none; | |
1339 | + -webkit-transition: 0.2s; | |
1340 | + transition: 0.2s; | |
1341 | +} | |
1342 | +.vue-image-crop-upload | |
1343 | + .vicp-wrap | |
1344 | + .vicp-step2 | |
1345 | + .vicp-crop | |
1346 | + .vicp-crop-left | |
1347 | + .vicp-range | |
1348 | + input[type="range"]::-ms-thumb { | |
1349 | + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); | |
1350 | + appearance: none; | |
1351 | + width: 12px; | |
1352 | + height: 12px; | |
1353 | + background-color: #61c091; | |
1354 | + border: none; | |
1355 | + border-radius: 100%; | |
1356 | + -webkit-transition: 0.2s; | |
1357 | + transition: 0.2s; | |
1358 | +} | |
1359 | +.vue-image-crop-upload | |
1360 | + .vicp-wrap | |
1361 | + .vicp-step2 | |
1362 | + .vicp-crop | |
1363 | + .vicp-crop-left | |
1364 | + .vicp-range | |
1365 | + input[type="range"]:active::-moz-range-thumb { | |
1366 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); | |
1367 | + width: 14px; | |
1368 | + height: 14px; | |
1369 | +} | |
1370 | +.vue-image-crop-upload | |
1371 | + .vicp-wrap | |
1372 | + .vicp-step2 | |
1373 | + .vicp-crop | |
1374 | + .vicp-crop-left | |
1375 | + .vicp-range | |
1376 | + input[type="range"]:active::-ms-thumb { | |
1377 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); | |
1378 | + width: 14px; | |
1379 | + height: 14px; | |
1380 | +} | |
1381 | +.vue-image-crop-upload | |
1382 | + .vicp-wrap | |
1383 | + .vicp-step2 | |
1384 | + .vicp-crop | |
1385 | + .vicp-crop-left | |
1386 | + .vicp-range | |
1387 | + input[type="range"]:active::-webkit-slider-thumb { | |
1388 | + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); | |
1389 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); | |
1390 | + margin-top: -4px; | |
1391 | + width: 14px; | |
1392 | + height: 14px; | |
1393 | +} | |
1394 | +.vue-image-crop-upload | |
1395 | + .vicp-wrap | |
1396 | + .vicp-step2 | |
1397 | + .vicp-crop | |
1398 | + .vicp-crop-left | |
1399 | + .vicp-range | |
1400 | + input[type="range"]::-webkit-slider-runnable-track { | |
1401 | + -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
1402 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
1403 | + width: 100%; | |
1404 | + height: 6px; | |
1405 | + cursor: pointer; | |
1406 | + border-radius: 2px; | |
1407 | + border: none; | |
1408 | + background-color: rgba(68, 170, 119, 0.3); | |
1409 | +} | |
1410 | +.vue-image-crop-upload | |
1411 | + .vicp-wrap | |
1412 | + .vicp-step2 | |
1413 | + .vicp-crop | |
1414 | + .vicp-crop-left | |
1415 | + .vicp-range | |
1416 | + input[type="range"]::-moz-range-track { | |
1417 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
1418 | + width: 100%; | |
1419 | + height: 6px; | |
1420 | + cursor: pointer; | |
1421 | + border-radius: 2px; | |
1422 | + border: none; | |
1423 | + background-color: rgba(68, 170, 119, 0.3); | |
1424 | +} | |
1425 | +.vue-image-crop-upload | |
1426 | + .vicp-wrap | |
1427 | + .vicp-step2 | |
1428 | + .vicp-crop | |
1429 | + .vicp-crop-left | |
1430 | + .vicp-range | |
1431 | + input[type="range"]::-ms-track { | |
1432 | + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
1433 | + width: 100%; | |
1434 | + cursor: pointer; | |
1435 | + background: transparent; | |
1436 | + border-color: transparent; | |
1437 | + color: transparent; | |
1438 | + height: 6px; | |
1439 | + border-radius: 2px; | |
1440 | + border: none; | |
1441 | +} | |
1442 | +.vue-image-crop-upload | |
1443 | + .vicp-wrap | |
1444 | + .vicp-step2 | |
1445 | + .vicp-crop | |
1446 | + .vicp-crop-left | |
1447 | + .vicp-range | |
1448 | + input[type="range"]::-ms-fill-lower { | |
1449 | + background-color: rgba(68, 170, 119, 0.3); | |
1450 | +} | |
1451 | +.vue-image-crop-upload | |
1452 | + .vicp-wrap | |
1453 | + .vicp-step2 | |
1454 | + .vicp-crop | |
1455 | + .vicp-crop-left | |
1456 | + .vicp-range | |
1457 | + input[type="range"]::-ms-fill-upper { | |
1458 | + background-color: rgba(68, 170, 119, 0.15); | |
1459 | +} | |
1460 | +.vue-image-crop-upload | |
1461 | + .vicp-wrap | |
1462 | + .vicp-step2 | |
1463 | + .vicp-crop | |
1464 | + .vicp-crop-left | |
1465 | + .vicp-range | |
1466 | + input[type="range"]:focus::-webkit-slider-runnable-track { | |
1467 | + background-color: rgba(68, 170, 119, 0.5); | |
1468 | +} | |
1469 | +.vue-image-crop-upload | |
1470 | + .vicp-wrap | |
1471 | + .vicp-step2 | |
1472 | + .vicp-crop | |
1473 | + .vicp-crop-left | |
1474 | + .vicp-range | |
1475 | + input[type="range"]:focus::-moz-range-track { | |
1476 | + background-color: rgba(68, 170, 119, 0.5); | |
1477 | +} | |
1478 | +.vue-image-crop-upload | |
1479 | + .vicp-wrap | |
1480 | + .vicp-step2 | |
1481 | + .vicp-crop | |
1482 | + .vicp-crop-left | |
1483 | + .vicp-range | |
1484 | + input[type="range"]:focus::-ms-fill-lower { | |
1485 | + background-color: rgba(68, 170, 119, 0.45); | |
1486 | +} | |
1487 | +.vue-image-crop-upload | |
1488 | + .vicp-wrap | |
1489 | + .vicp-step2 | |
1490 | + .vicp-crop | |
1491 | + .vicp-crop-left | |
1492 | + .vicp-range | |
1493 | + input[type="range"]:focus::-ms-fill-upper { | |
1494 | + background-color: rgba(68, 170, 119, 0.25); | |
1495 | +} | |
1496 | +.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right { | |
1497 | + float: right; | |
1498 | +} | |
1499 | +.vue-image-crop-upload | |
1500 | + .vicp-wrap | |
1501 | + .vicp-step2 | |
1502 | + .vicp-crop | |
1503 | + .vicp-crop-right | |
1504 | + .vicp-preview { | |
1505 | + height: 150px; | |
1506 | + overflow: hidden; | |
1507 | +} | |
1508 | +.vue-image-crop-upload | |
1509 | + .vicp-wrap | |
1510 | + .vicp-step2 | |
1511 | + .vicp-crop | |
1512 | + .vicp-crop-right | |
1513 | + .vicp-preview | |
1514 | + .vicp-preview-item { | |
1515 | + position: relative; | |
1516 | + padding: 5px; | |
1517 | + width: 100px; | |
1518 | + height: 100px; | |
1519 | + float: left; | |
1520 | + margin-right: 16px; | |
1521 | +} | |
1522 | +.vue-image-crop-upload | |
1523 | + .vicp-wrap | |
1524 | + .vicp-step2 | |
1525 | + .vicp-crop | |
1526 | + .vicp-crop-right | |
1527 | + .vicp-preview | |
1528 | + .vicp-preview-item | |
1529 | + span { | |
1530 | + position: absolute; | |
1531 | + bottom: -30px; | |
1532 | + width: 100%; | |
1533 | + font-size: 14px; | |
1534 | + color: #bbb; | |
1535 | + display: block; | |
1536 | + text-align: center; | |
1537 | +} | |
1538 | +.vue-image-crop-upload | |
1539 | + .vicp-wrap | |
1540 | + .vicp-step2 | |
1541 | + .vicp-crop | |
1542 | + .vicp-crop-right | |
1543 | + .vicp-preview | |
1544 | + .vicp-preview-item | |
1545 | + img { | |
1546 | + position: absolute; | |
1547 | + display: block; | |
1548 | + top: 0; | |
1549 | + bottom: 0; | |
1550 | + left: 0; | |
1551 | + right: 0; | |
1552 | + margin: auto; | |
1553 | + padding: 3px; | |
1554 | + background-color: #fff; | |
1555 | + border: 1px solid rgba(0, 0, 0, 0.15); | |
1556 | + overflow: hidden; | |
1557 | + -webkit-user-select: none; | |
1558 | + -moz-user-select: none; | |
1559 | + -ms-user-select: none; | |
1560 | + user-select: none; | |
1561 | +} | |
1562 | +.vue-image-crop-upload | |
1563 | + .vicp-wrap | |
1564 | + .vicp-step2 | |
1565 | + .vicp-crop | |
1566 | + .vicp-crop-right | |
1567 | + .vicp-preview | |
1568 | + .vicp-preview-item.vicp-preview-item-circle { | |
1569 | + margin-right: 0; | |
1570 | +} | |
1571 | +.vue-image-crop-upload | |
1572 | + .vicp-wrap | |
1573 | + .vicp-step2 | |
1574 | + .vicp-crop | |
1575 | + .vicp-crop-right | |
1576 | + .vicp-preview | |
1577 | + .vicp-preview-item.vicp-preview-item-circle | |
1578 | + img { | |
1579 | + border-radius: 100%; | |
1580 | +} | |
1581 | +.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload { | |
1582 | + position: relative; | |
1583 | + -webkit-box-sizing: border-box; | |
1584 | + box-sizing: border-box; | |
1585 | + padding: 35px; | |
1586 | + height: 170px; | |
1587 | + background-color: rgba(0, 0, 0, 0.03); | |
1588 | + text-align: center; | |
1589 | + border: 1px dashed #ddd; | |
1590 | +} | |
1591 | +.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading { | |
1592 | + display: block; | |
1593 | + padding: 15px; | |
1594 | + font-size: 16px; | |
1595 | + color: #999; | |
1596 | + line-height: 30px; | |
1597 | +} | |
1598 | +.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap { | |
1599 | + margin-top: 12px; | |
1600 | + background-color: rgba(0, 0, 0, 0.08); | |
1601 | + border-radius: 3px; | |
1602 | +} | |
1603 | +.vue-image-crop-upload | |
1604 | + .vicp-wrap | |
1605 | + .vicp-step3 | |
1606 | + .vicp-upload | |
1607 | + .vicp-progress-wrap | |
1608 | + .vicp-progress { | |
1609 | + position: relative; | |
1610 | + display: block; | |
1611 | + height: 5px; | |
1612 | + border-radius: 3px; | |
1613 | + background-color: #4a7; | |
1614 | + -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3); | |
1615 | + box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3); | |
1616 | + -webkit-transition: width 0.15s linear; | |
1617 | + transition: width 0.15s linear; | |
1618 | + background-image: -webkit-linear-gradient( | |
1619 | + 135deg, | |
1620 | + rgba(255, 255, 255, 0.2) 25%, | |
1621 | + transparent 25%, | |
1622 | + transparent 50%, | |
1623 | + rgba(255, 255, 255, 0.2) 50%, | |
1624 | + rgba(255, 255, 255, 0.2) 75%, | |
1625 | + transparent 75%, | |
1626 | + transparent | |
1627 | + ); | |
1628 | + background-image: linear-gradient( | |
1629 | + -45deg, | |
1630 | + rgba(255, 255, 255, 0.2) 25%, | |
1631 | + transparent 25%, | |
1632 | + transparent 50%, | |
1633 | + rgba(255, 255, 255, 0.2) 50%, | |
1634 | + rgba(255, 255, 255, 0.2) 75%, | |
1635 | + transparent 75%, | |
1636 | + transparent | |
1637 | + ); | |
1638 | + background-size: 40px 40px; | |
1639 | + -webkit-animation: vicp_progress 0.5s linear infinite; | |
1640 | + animation: vicp_progress 0.5s linear infinite; | |
1641 | +} | |
1642 | +.vue-image-crop-upload | |
1643 | + .vicp-wrap | |
1644 | + .vicp-step3 | |
1645 | + .vicp-upload | |
1646 | + .vicp-progress-wrap | |
1647 | + .vicp-progress::after { | |
1648 | + content: ""; | |
1649 | + position: absolute; | |
1650 | + display: block; | |
1651 | + top: -3px; | |
1652 | + right: -3px; | |
1653 | + width: 9px; | |
1654 | + height: 9px; | |
1655 | + border: 1px solid rgba(245, 246, 247, 0.7); | |
1656 | + -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7); | |
1657 | + box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7); | |
1658 | + border-radius: 100%; | |
1659 | + background-color: #4a7; | |
1660 | +} | |
1661 | +.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error, | |
1662 | +.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success { | |
1663 | + height: 100px; | |
1664 | + line-height: 100px; | |
1665 | +} | |
1666 | +.vue-image-crop-upload .vicp-wrap .vicp-operate { | |
1667 | + position: absolute; | |
1668 | + right: 20px; | |
1669 | + bottom: 20px; | |
1670 | +} | |
1671 | +.vue-image-crop-upload .vicp-wrap .vicp-operate a { | |
1672 | + position: relative; | |
1673 | + float: left; | |
1674 | + display: block; | |
1675 | + margin-left: 10px; | |
1676 | + width: 100px; | |
1677 | + height: 36px; | |
1678 | + line-height: 36px; | |
1679 | + text-align: center; | |
1680 | + cursor: pointer; | |
1681 | + font-size: 14px; | |
1682 | + color: #4a7; | |
1683 | + border-radius: 2px; | |
1684 | + overflow: hidden; | |
1685 | + -webkit-user-select: none; | |
1686 | + -moz-user-select: none; | |
1687 | + -ms-user-select: none; | |
1688 | + user-select: none; | |
1689 | +} | |
1690 | +.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover { | |
1691 | + background-color: rgba(0, 0, 0, 0.03); | |
1692 | +} | |
1693 | +.vue-image-crop-upload .vicp-wrap .vicp-error, | |
1694 | +.vue-image-crop-upload .vicp-wrap .vicp-success { | |
1695 | + display: block; | |
1696 | + font-size: 14px; | |
1697 | + line-height: 24px; | |
1698 | + height: 24px; | |
1699 | + color: #d10; | |
1700 | + text-align: center; | |
1701 | + vertical-align: top; | |
1702 | +} | |
1703 | +.vue-image-crop-upload .vicp-wrap .vicp-success { | |
1704 | + color: #4a7; | |
1705 | +} | |
1706 | +.vue-image-crop-upload .vicp-wrap .vicp-icon3 { | |
1707 | + position: relative; | |
1708 | + display: inline-block; | |
1709 | + width: 20px; | |
1710 | + height: 20px; | |
1711 | + top: 4px; | |
1712 | +} | |
1713 | +.vue-image-crop-upload .vicp-wrap .vicp-icon3::after { | |
1714 | + position: absolute; | |
1715 | + top: 3px; | |
1716 | + left: 6px; | |
1717 | + width: 6px; | |
1718 | + height: 10px; | |
1719 | + border-width: 0 2px 2px 0; | |
1720 | + border-color: #4a7; | |
1721 | + border-style: solid; | |
1722 | + -webkit-transform: rotate(45deg); | |
1723 | + -ms-transform: rotate(45deg); | |
1724 | + transform: rotate(45deg); | |
1725 | + content: ""; | |
1726 | +} | |
1727 | +.vue-image-crop-upload .vicp-wrap .vicp-icon2 { | |
1728 | + position: relative; | |
1729 | + display: inline-block; | |
1730 | + width: 20px; | |
1731 | + height: 20px; | |
1732 | + top: 4px; | |
1733 | +} | |
1734 | +.vue-image-crop-upload .vicp-wrap .vicp-icon2::after, | |
1735 | +.vue-image-crop-upload .vicp-wrap .vicp-icon2::before { | |
1736 | + content: ""; | |
1737 | + position: absolute; | |
1738 | + top: 9px; | |
1739 | + left: 4px; | |
1740 | + width: 13px; | |
1741 | + height: 2px; | |
1742 | + background-color: #d10; | |
1743 | + -webkit-transform: rotate(45deg); | |
1744 | + -ms-transform: rotate(45deg); | |
1745 | + transform: rotate(45deg); | |
1746 | +} | |
1747 | +.vue-image-crop-upload .vicp-wrap .vicp-icon2::after { | |
1748 | + -webkit-transform: rotate(-45deg); | |
1749 | + -ms-transform: rotate(-45deg); | |
1750 | + transform: rotate(-45deg); | |
1751 | +} | |
1752 | +.e-ripple { | |
1753 | + position: absolute; | |
1754 | + border-radius: 100%; | |
1755 | + background-color: rgba(0, 0, 0, 0.15); | |
1756 | + background-clip: padding-box; | |
1757 | + pointer-events: none; | |
1758 | + -webkit-user-select: none; | |
1759 | + -moz-user-select: none; | |
1760 | + -ms-user-select: none; | |
1761 | + user-select: none; | |
1762 | + -webkit-transform: scale(0); | |
1763 | + -ms-transform: scale(0); | |
1764 | + transform: scale(0); | |
1765 | + opacity: 1; | |
1766 | +} | |
1767 | +.e-ripple.z-active { | |
1768 | + opacity: 0; | |
1769 | + -webkit-transform: scale(2); | |
1770 | + -ms-transform: scale(2); | |
1771 | + transform: scale(2); | |
1772 | + -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; | |
1773 | + transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; | |
1774 | + transition: opacity 1.2s ease-out, transform 0.6s ease-out; | |
1775 | + transition: opacity 1.2s ease-out, transform 0.6s ease-out, | |
1776 | + -webkit-transform 0.6s ease-out; | |
1777 | +} | |
1778 | +</style> | ... | ... |
src/components/ImageCropper/utils/data2blob.js
... | ... | @@ -0,0 +1,19 @@ |
1 | +/** | |
2 | + * database64文件格式转换为2进制 | |
3 | + * | |
4 | + * @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了 | |
5 | + * @param {[String]} mime [description] | |
6 | + * @return {[blob]} [description] | |
7 | + */ | |
8 | +export default function(data, mime) { | |
9 | + data = data.split(',')[1] | |
10 | + data = window.atob(data) | |
11 | + var ia = new Uint8Array(data.length) | |
12 | + for (var i = 0; i < data.length; i++) { | |
13 | + ia[i] = data.charCodeAt(i) | |
14 | + } | |
15 | + // canvas.toDataURL 返回的默认格式就是 image/png | |
16 | + return new Blob([ia], { | |
17 | + type: mime | |
18 | + }) | |
19 | +} | ... | ... |
src/components/ImageCropper/utils/effectRipple.js
... | ... | @@ -0,0 +1,39 @@ |
1 | +/** | |
2 | + * 点击波纹效果 | |
3 | + * | |
4 | + * @param {[event]} e [description] | |
5 | + * @param {[Object]} arg_opts [description] | |
6 | + * @return {[bollean]} [description] | |
7 | + */ | |
8 | +export default function(e, arg_opts) { | |
9 | + var opts = Object.assign({ | |
10 | + ele: e.target, // 波纹作用元素 | |
11 | + type: 'hit', // hit点击位置扩散center中心点扩展 | |
12 | + bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 | |
13 | + }, arg_opts) | |
14 | + var target = opts.ele | |
15 | + if (target) { | |
16 | + var rect = target.getBoundingClientRect() | |
17 | + var ripple = target.querySelector('.e-ripple') | |
18 | + if (!ripple) { | |
19 | + ripple = document.createElement('span') | |
20 | + ripple.className = 'e-ripple' | |
21 | + ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px' | |
22 | + target.appendChild(ripple) | |
23 | + } else { | |
24 | + ripple.className = 'e-ripple' | |
25 | + } | |
26 | + switch (opts.type) { | |
27 | + case 'center': | |
28 | + ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px' | |
29 | + ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px' | |
30 | + break | |
31 | + default: | |
32 | + ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px' | |
33 | + ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px' | |
34 | + } | |
35 | + ripple.style.backgroundColor = opts.bgc | |
36 | + ripple.className = 'e-ripple z-active' | |
37 | + return false | |
38 | + } | |
39 | +} | ... | ... |
src/components/ImageCropper/utils/language.js
... | ... | @@ -0,0 +1,232 @@ |
1 | +export default { | |
2 | + zh: { | |
3 | + hint: '点击,或拖动图片至此处', | |
4 | + loading: '正在上传……', | |
5 | + noSupported: '浏览器不支持该功能,请使用IE10以上或其他现在浏览器!', | |
6 | + success: '上传成功', | |
7 | + fail: '图片上传失败', | |
8 | + preview: '头像预览', | |
9 | + btn: { | |
10 | + off: '取消', | |
11 | + close: '关闭', | |
12 | + back: '上一步', | |
13 | + save: '保存' | |
14 | + }, | |
15 | + error: { | |
16 | + onlyImg: '仅限图片格式', | |
17 | + outOfSize: '单文件大小不能超过 ', | |
18 | + lowestPx: '图片最低像素为(宽*高):' | |
19 | + } | |
20 | + }, | |
21 | + 'zh-tw': { | |
22 | + hint: '點擊,或拖動圖片至此處', | |
23 | + loading: '正在上傳……', | |
24 | + noSupported: '瀏覽器不支持該功能,請使用IE10以上或其他現代瀏覽器!', | |
25 | + success: '上傳成功', | |
26 | + fail: '圖片上傳失敗', | |
27 | + preview: '頭像預覽', | |
28 | + btn: { | |
29 | + off: '取消', | |
30 | + close: '關閉', | |
31 | + back: '上一步', | |
32 | + save: '保存' | |
33 | + }, | |
34 | + error: { | |
35 | + onlyImg: '僅限圖片格式', | |
36 | + outOfSize: '單文件大小不能超過 ', | |
37 | + lowestPx: '圖片最低像素為(寬*高):' | |
38 | + } | |
39 | + }, | |
40 | + en: { | |
41 | + hint: 'Click or drag the file here to upload', | |
42 | + loading: 'Uploading…', | |
43 | + noSupported: 'Browser is not supported, please use IE10+ or other browsers', | |
44 | + success: 'Upload success', | |
45 | + fail: 'Upload failed', | |
46 | + preview: 'Preview', | |
47 | + btn: { | |
48 | + off: 'Cancel', | |
49 | + close: 'Close', | |
50 | + back: 'Back', | |
51 | + save: 'Save' | |
52 | + }, | |
53 | + error: { | |
54 | + onlyImg: 'Image only', | |
55 | + outOfSize: 'Image exceeds size limit: ', | |
56 | + lowestPx: 'Image\'s size is too low. Expected at least: ' | |
57 | + } | |
58 | + }, | |
59 | + ro: { | |
60 | + hint: 'Atinge sau trage fișierul aici', | |
61 | + loading: 'Se încarcă', | |
62 | + noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.', | |
63 | + success: 'S-a încărcat cu succes', | |
64 | + fail: 'A apărut o problemă la încărcare', | |
65 | + preview: 'Previzualizează', | |
66 | + | |
67 | + btn: { | |
68 | + off: 'Anulează', | |
69 | + close: 'Închide', | |
70 | + back: 'Înapoi', | |
71 | + save: 'Salvează' | |
72 | + }, | |
73 | + | |
74 | + error: { | |
75 | + onlyImg: 'Doar imagini', | |
76 | + outOfSize: 'Imaginea depășește limita de: ', | |
77 | + loewstPx: 'Imaginea este prea mică; Minim: ' | |
78 | + } | |
79 | + }, | |
80 | + ru: { | |
81 | + hint: 'Нажмите, или перетащите файл в это окно', | |
82 | + loading: 'Загружаю……', | |
83 | + noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры', | |
84 | + success: 'Загрузка выполнена успешно', | |
85 | + fail: 'Ошибка загрузки', | |
86 | + preview: 'Предпросмотр', | |
87 | + btn: { | |
88 | + off: 'Отменить', | |
89 | + close: 'Закрыть', | |
90 | + back: 'Назад', | |
91 | + save: 'Сохранить' | |
92 | + }, | |
93 | + error: { | |
94 | + onlyImg: 'Только изображения', | |
95 | + outOfSize: 'Изображение превышает предельный размер: ', | |
96 | + lowestPx: 'Минимальный размер изображения: ' | |
97 | + } | |
98 | + }, | |
99 | + 'pt-br': { | |
100 | + hint: 'Clique ou arraste o arquivo aqui para carregar', | |
101 | + loading: 'Carregando…', | |
102 | + noSupported: 'Browser não suportado, use o IE10+ ou outro browser', | |
103 | + success: 'Sucesso ao carregar imagem', | |
104 | + fail: 'Falha ao carregar imagem', | |
105 | + preview: 'Pré-visualizar', | |
106 | + btn: { | |
107 | + off: 'Cancelar', | |
108 | + close: 'Fechar', | |
109 | + back: 'Voltar', | |
110 | + save: 'Salvar' | |
111 | + }, | |
112 | + error: { | |
113 | + onlyImg: 'Apenas imagens', | |
114 | + outOfSize: 'A imagem excede o limite de tamanho: ', | |
115 | + lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: ' | |
116 | + } | |
117 | + }, | |
118 | + fr: { | |
119 | + hint: 'Cliquez ou glissez le fichier ici.', | |
120 | + loading: 'Téléchargement…', | |
121 | + noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.', | |
122 | + success: 'Téléchargement réussit', | |
123 | + fail: 'Téléchargement echoué', | |
124 | + preview: 'Aperçu', | |
125 | + btn: { | |
126 | + off: 'Annuler', | |
127 | + close: 'Fermer', | |
128 | + back: 'Retour', | |
129 | + save: 'Enregistrer' | |
130 | + }, | |
131 | + error: { | |
132 | + onlyImg: 'Image uniquement', | |
133 | + outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ', | |
134 | + lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: ' | |
135 | + } | |
136 | + }, | |
137 | + nl: { | |
138 | + hint: 'Klik hier of sleep een afbeelding in dit vlak', | |
139 | + loading: 'Uploaden…', | |
140 | + noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.', | |
141 | + success: 'Upload succesvol', | |
142 | + fail: 'Upload mislukt', | |
143 | + preview: 'Voorbeeld', | |
144 | + btn: { | |
145 | + off: 'Annuleren', | |
146 | + close: 'Sluiten', | |
147 | + back: 'Terug', | |
148 | + save: 'Opslaan' | |
149 | + }, | |
150 | + error: { | |
151 | + onlyImg: 'Alleen afbeeldingen', | |
152 | + outOfSize: 'De afbeelding is groter dan: ', | |
153 | + lowestPx: 'De afbeelding is te klein! Minimale afmetingen: ' | |
154 | + } | |
155 | + }, | |
156 | + tr: { | |
157 | + hint: 'Tıkla veya yüklemek istediğini buraya sürükle', | |
158 | + loading: 'Yükleniyor…', | |
159 | + noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın', | |
160 | + success: 'Yükleme başarılı', | |
161 | + fail: 'Yüklemede hata oluştu', | |
162 | + preview: 'Önizle', | |
163 | + btn: { | |
164 | + off: 'İptal', | |
165 | + close: 'Kapat', | |
166 | + back: 'Geri', | |
167 | + save: 'Kaydet' | |
168 | + }, | |
169 | + error: { | |
170 | + onlyImg: 'Sadece resim', | |
171 | + outOfSize: 'Resim yükleme limitini aşıyor: ', | |
172 | + lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: ' | |
173 | + } | |
174 | + }, | |
175 | + 'es-MX': { | |
176 | + hint: 'Selecciona o arrastra una imagen', | |
177 | + loading: 'Subiendo...', | |
178 | + noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes', | |
179 | + success: 'Subido exitosamente', | |
180 | + fail: 'Sucedió un error', | |
181 | + preview: 'Vista previa', | |
182 | + btn: { | |
183 | + off: 'Cancelar', | |
184 | + close: 'Cerrar', | |
185 | + back: 'Atras', | |
186 | + save: 'Guardar' | |
187 | + }, | |
188 | + error: { | |
189 | + onlyImg: 'Unicamente imagenes', | |
190 | + outOfSize: 'La imagen excede el tamaño maximo:', | |
191 | + lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:' | |
192 | + } | |
193 | + }, | |
194 | + de: { | |
195 | + hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen', | |
196 | + loading: 'Hochladen…', | |
197 | + noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser', | |
198 | + success: 'Upload erfolgreich', | |
199 | + fail: 'Upload fehlgeschlagen', | |
200 | + preview: 'Vorschau', | |
201 | + btn: { | |
202 | + off: 'Abbrechen', | |
203 | + close: 'Schließen', | |
204 | + back: 'Zurück', | |
205 | + save: 'Speichern' | |
206 | + }, | |
207 | + error: { | |
208 | + onlyImg: 'Nur Bilder', | |
209 | + outOfSize: 'Das Bild ist zu groß: ', | |
210 | + lowestPx: 'Das Bild ist zu klein. Mindestens: ' | |
211 | + } | |
212 | + }, | |
213 | + ja: { | |
214 | + hint: 'クリック・ドラッグしてファイルをアップロード', | |
215 | + loading: 'アップロード中...', | |
216 | + noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。', | |
217 | + success: 'アップロード成功', | |
218 | + fail: 'アップロード失敗', | |
219 | + preview: 'プレビュー', | |
220 | + btn: { | |
221 | + off: 'キャンセル', | |
222 | + close: '閉じる', | |
223 | + back: '戻る', | |
224 | + save: '保存' | |
225 | + }, | |
226 | + error: { | |
227 | + onlyImg: '画像のみ', | |
228 | + outOfSize: '画像サイズが上限を超えています。上限: ', | |
229 | + lowestPx: '画像が小さすぎます。最小サイズ: ' | |
230 | + } | |
231 | + } | |
232 | +} | ... | ... |
src/components/ImageCropper/utils/mimes.js
src/components/JsonEditor/index.vue
... | ... | @@ -0,0 +1,72 @@ |
1 | +<template> | |
2 | + <div class="json-editor"> | |
3 | + <textarea ref="textarea" /> | |
4 | + </div> | |
5 | +</template> | |
6 | + | |
7 | +<script> | |
8 | +import CodeMirror from 'codemirror' | |
9 | +import 'codemirror/addon/lint/lint.css' | |
10 | +import 'codemirror/lib/codemirror.css' | |
11 | +import 'codemirror/theme/rubyblue.css' | |
12 | +require('script-loader!jsonlint') | |
13 | +import 'codemirror/mode/javascript/javascript' | |
14 | +import 'codemirror/addon/lint/lint' | |
15 | +import 'codemirror/addon/lint/json-lint' | |
16 | + | |
17 | +export default { | |
18 | + name: 'JsonEditor', | |
19 | + /* eslint-disable vue/require-prop-types */ | |
20 | + props: ['value'], | |
21 | + data() { | |
22 | + return { | |
23 | + jsonEditor: false | |
24 | + } | |
25 | + }, | |
26 | + watch: { | |
27 | + value(value) { | |
28 | + const editorValue = this.jsonEditor.getValue() | |
29 | + if (value !== editorValue) { | |
30 | + this.jsonEditor.setValue(JSON.stringify(this.value, null, 2)) | |
31 | + } | |
32 | + } | |
33 | + }, | |
34 | + mounted() { | |
35 | + this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, { | |
36 | + lineNumbers: true, | |
37 | + mode: 'application/json', | |
38 | + gutters: ['CodeMirror-lint-markers'], | |
39 | + theme: 'rubyblue', | |
40 | + lint: true | |
41 | + }) | |
42 | + | |
43 | + this.jsonEditor.setValue(JSON.stringify(this.value, null, 2)) | |
44 | + this.jsonEditor.on('change', cm => { | |
45 | + this.$emit('changed', cm.getValue()) | |
46 | + this.$emit('input', cm.getValue()) | |
47 | + }) | |
48 | + }, | |
49 | + methods: { | |
50 | + getValue() { | |
51 | + return this.jsonEditor.getValue() | |
52 | + } | |
53 | + } | |
54 | +} | |
55 | +</script> | |
56 | + | |
57 | +<style scoped> | |
58 | +.json-editor{ | |
59 | + height: 100%; | |
60 | + position: relative; | |
61 | +} | |
62 | +.json-editor >>> .CodeMirror { | |
63 | + height: auto; | |
64 | + min-height: 300px; | |
65 | +} | |
66 | +.json-editor >>> .CodeMirror-scroll{ | |
67 | + min-height: 300px; | |
68 | +} | |
69 | +.json-editor >>> .cm-s-rubyblue span.cm-string { | |
70 | + color: #F08047; | |
71 | +} | |
72 | +</style> | ... | ... |
src/components/Kanban/index.vue
... | ... | @@ -0,0 +1,99 @@ |
1 | +<template> | |
2 | + <div class="board-column"> | |
3 | + <div class="board-column-header"> | |
4 | + {{ headerText }} | |
5 | + </div> | |
6 | + <draggable | |
7 | + :list="list" | |
8 | + v-bind="$attrs" | |
9 | + class="board-column-content" | |
10 | + :set-data="setData" | |
11 | + > | |
12 | + <div v-for="element in list" :key="element.id" class="board-item"> | |
13 | + {{ element.name }} {{ element.id }} | |
14 | + </div> | |
15 | + </draggable> | |
16 | + </div> | |
17 | +</template> | |
18 | + | |
19 | +<script> | |
20 | +import draggable from 'vuedraggable' | |
21 | + | |
22 | +export default { | |
23 | + name: 'DragKanbanDemo', | |
24 | + components: { | |
25 | + draggable | |
26 | + }, | |
27 | + props: { | |
28 | + headerText: { | |
29 | + type: String, | |
30 | + default: 'Header' | |
31 | + }, | |
32 | + options: { | |
33 | + type: Object, | |
34 | + default() { | |
35 | + return {} | |
36 | + } | |
37 | + }, | |
38 | + list: { | |
39 | + type: Array, | |
40 | + default() { | |
41 | + return [] | |
42 | + } | |
43 | + } | |
44 | + }, | |
45 | + methods: { | |
46 | + setData(dataTransfer) { | |
47 | + // to avoid Firefox bug | |
48 | + // Detail see : https://github.com/RubaXa/Sortable/issues/1012 | |
49 | + dataTransfer.setData('Text', '') | |
50 | + } | |
51 | + } | |
52 | +} | |
53 | +</script> | |
54 | +<style lang="scss" scoped> | |
55 | +.board-column { | |
56 | + min-width: 300px; | |
57 | + min-height: 100px; | |
58 | + height: auto; | |
59 | + overflow: hidden; | |
60 | + background: #f0f0f0; | |
61 | + border-radius: 3px; | |
62 | + | |
63 | + .board-column-header { | |
64 | + height: 50px; | |
65 | + line-height: 50px; | |
66 | + overflow: hidden; | |
67 | + padding: 0 20px; | |
68 | + text-align: center; | |
69 | + background: #333; | |
70 | + color: #fff; | |
71 | + border-radius: 3px 3px 0 0; | |
72 | + } | |
73 | + | |
74 | + .board-column-content { | |
75 | + height: auto; | |
76 | + overflow: hidden; | |
77 | + border: 10px solid transparent; | |
78 | + min-height: 60px; | |
79 | + display: flex; | |
80 | + justify-content: flex-start; | |
81 | + flex-direction: column; | |
82 | + align-items: center; | |
83 | + | |
84 | + .board-item { | |
85 | + cursor: pointer; | |
86 | + width: 100%; | |
87 | + height: 64px; | |
88 | + margin: 5px 0; | |
89 | + background-color: #fff; | |
90 | + text-align: left; | |
91 | + line-height: 54px; | |
92 | + padding: 5px 10px; | |
93 | + box-sizing: border-box; | |
94 | + box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2); | |
95 | + } | |
96 | + } | |
97 | +} | |
98 | +</style> | |
99 | + | ... | ... |
src/components/LangSelect/index.vue
... | ... | @@ -0,0 +1,41 @@ |
1 | +<template> | |
2 | + <el-dropdown trigger="click" class="international" @command="handleSetLanguage"> | |
3 | + <div> | |
4 | + <svg-icon class-name="international-icon" icon-class="language" /> | |
5 | + </div> | |
6 | + <el-dropdown-menu slot="dropdown"> | |
7 | + <el-dropdown-item :disabled="language==='zh'" command="zh"> | |
8 | + 中文 | |
9 | + </el-dropdown-item> | |
10 | + <el-dropdown-item :disabled="language==='en'" command="en"> | |
11 | + English | |
12 | + </el-dropdown-item> | |
13 | + <el-dropdown-item :disabled="language==='es'" command="es"> | |
14 | + Español | |
15 | + </el-dropdown-item> | |
16 | + <el-dropdown-item :disabled="language==='ja'" command="ja"> | |
17 | + 日本語 | |
18 | + </el-dropdown-item> | |
19 | + </el-dropdown-menu> | |
20 | + </el-dropdown> | |
21 | +</template> | |
22 | + | |
23 | +<script> | |
24 | +export default { | |
25 | + computed: { | |
26 | + language() { | |
27 | + return this.$store.getters.language | |
28 | + } | |
29 | + }, | |
30 | + methods: { | |
31 | + handleSetLanguage(lang) { | |
32 | + this.$i18n.locale = lang | |
33 | + this.$store.dispatch('app/setLanguage', lang) | |
34 | + this.$message({ | |
35 | + message: 'Switch Language Success', | |
36 | + type: 'success' | |
37 | + }) | |
38 | + } | |
39 | + } | |
40 | +} | |
41 | +</script> | ... | ... |
src/components/MDinput/index.vue
... | ... | @@ -0,0 +1,360 @@ |
1 | +<template> | |
2 | + <div :class="computedClasses" class="material-input__component"> | |
3 | + <div :class="{iconClass:icon}"> | |
4 | + <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" /> | |
5 | + <input | |
6 | + v-if="type === 'email'" | |
7 | + v-model="currentValue" | |
8 | + :name="name" | |
9 | + :placeholder="fillPlaceHolder" | |
10 | + :readonly="readonly" | |
11 | + :disabled="disabled" | |
12 | + :autocomplete="autoComplete" | |
13 | + :required="required" | |
14 | + type="email" | |
15 | + class="material-input" | |
16 | + @focus="handleMdFocus" | |
17 | + @blur="handleMdBlur" | |
18 | + @input="handleModelInput" | |
19 | + > | |
20 | + <input | |
21 | + v-if="type === 'url'" | |
22 | + v-model="currentValue" | |
23 | + :name="name" | |
24 | + :placeholder="fillPlaceHolder" | |
25 | + :readonly="readonly" | |
26 | + :disabled="disabled" | |
27 | + :autocomplete="autoComplete" | |
28 | + :required="required" | |
29 | + type="url" | |
30 | + class="material-input" | |
31 | + @focus="handleMdFocus" | |
32 | + @blur="handleMdBlur" | |
33 | + @input="handleModelInput" | |
34 | + > | |
35 | + <input | |
36 | + v-if="type === 'number'" | |
37 | + v-model="currentValue" | |
38 | + :name="name" | |
39 | + :placeholder="fillPlaceHolder" | |
40 | + :step="step" | |
41 | + :readonly="readonly" | |
42 | + :disabled="disabled" | |
43 | + :autocomplete="autoComplete" | |
44 | + :max="max" | |
45 | + :min="min" | |
46 | + :minlength="minlength" | |
47 | + :maxlength="maxlength" | |
48 | + :required="required" | |
49 | + type="number" | |
50 | + class="material-input" | |
51 | + @focus="handleMdFocus" | |
52 | + @blur="handleMdBlur" | |
53 | + @input="handleModelInput" | |
54 | + > | |
55 | + <input | |
56 | + v-if="type === 'password'" | |
57 | + v-model="currentValue" | |
58 | + :name="name" | |
59 | + :placeholder="fillPlaceHolder" | |
60 | + :readonly="readonly" | |
61 | + :disabled="disabled" | |
62 | + :autocomplete="autoComplete" | |
63 | + :max="max" | |
64 | + :min="min" | |
65 | + :required="required" | |
66 | + type="password" | |
67 | + class="material-input" | |
68 | + @focus="handleMdFocus" | |
69 | + @blur="handleMdBlur" | |
70 | + @input="handleModelInput" | |
71 | + > | |
72 | + <input | |
73 | + v-if="type === 'tel'" | |
74 | + v-model="currentValue" | |
75 | + :name="name" | |
76 | + :placeholder="fillPlaceHolder" | |
77 | + :readonly="readonly" | |
78 | + :disabled="disabled" | |
79 | + :autocomplete="autoComplete" | |
80 | + :required="required" | |
81 | + type="tel" | |
82 | + class="material-input" | |
83 | + @focus="handleMdFocus" | |
84 | + @blur="handleMdBlur" | |
85 | + @input="handleModelInput" | |
86 | + > | |
87 | + <input | |
88 | + v-if="type === 'text'" | |
89 | + v-model="currentValue" | |
90 | + :name="name" | |
91 | + :placeholder="fillPlaceHolder" | |
92 | + :readonly="readonly" | |
93 | + :disabled="disabled" | |
94 | + :autocomplete="autoComplete" | |
95 | + :minlength="minlength" | |
96 | + :maxlength="maxlength" | |
97 | + :required="required" | |
98 | + type="text" | |
99 | + class="material-input" | |
100 | + @focus="handleMdFocus" | |
101 | + @blur="handleMdBlur" | |
102 | + @input="handleModelInput" | |
103 | + > | |
104 | + <span class="material-input-bar" /> | |
105 | + <label class="material-label"> | |
106 | + <slot /> | |
107 | + </label> | |
108 | + </div> | |
109 | + </div> | |
110 | +</template> | |
111 | + | |
112 | +<script> | |
113 | +// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue | |
114 | + | |
115 | +export default { | |
116 | + name: 'MdInput', | |
117 | + props: { | |
118 | + /* eslint-disable */ | |
119 | + icon: String, | |
120 | + name: String, | |
121 | + type: { | |
122 | + type: String, | |
123 | + default: 'text' | |
124 | + }, | |
125 | + value: [String, Number], | |
126 | + placeholder: String, | |
127 | + readonly: Boolean, | |
128 | + disabled: Boolean, | |
129 | + min: String, | |
130 | + max: String, | |
131 | + step: String, | |
132 | + minlength: Number, | |
133 | + maxlength: Number, | |
134 | + required: { | |
135 | + type: Boolean, | |
136 | + default: true | |
137 | + }, | |
138 | + autoComplete: { | |
139 | + type: String, | |
140 | + default: 'off' | |
141 | + }, | |
142 | + validateEvent: { | |
143 | + type: Boolean, | |
144 | + default: true | |
145 | + } | |
146 | + }, | |
147 | + data() { | |
148 | + return { | |
149 | + currentValue: this.value, | |
150 | + focus: false, | |
151 | + fillPlaceHolder: null | |
152 | + } | |
153 | + }, | |
154 | + computed: { | |
155 | + computedClasses() { | |
156 | + return { | |
157 | + 'material--active': this.focus, | |
158 | + 'material--disabled': this.disabled, | |
159 | + 'material--raised': Boolean(this.focus || this.currentValue) // has value | |
160 | + } | |
161 | + } | |
162 | + }, | |
163 | + watch: { | |
164 | + value(newValue) { | |
165 | + this.currentValue = newValue | |
166 | + } | |
167 | + }, | |
168 | + methods: { | |
169 | + handleModelInput(event) { | |
170 | + const value = event.target.value | |
171 | + this.$emit('input', value) | |
172 | + if (this.$parent.$options.componentName === 'ElFormItem') { | |
173 | + if (this.validateEvent) { | |
174 | + this.$parent.$emit('el.form.change', [value]) | |
175 | + } | |
176 | + } | |
177 | + this.$emit('change', value) | |
178 | + }, | |
179 | + handleMdFocus(event) { | |
180 | + this.focus = true | |
181 | + this.$emit('focus', event) | |
182 | + if (this.placeholder && this.placeholder !== '') { | |
183 | + this.fillPlaceHolder = this.placeholder | |
184 | + } | |
185 | + }, | |
186 | + handleMdBlur(event) { | |
187 | + this.focus = false | |
188 | + this.$emit('blur', event) | |
189 | + this.fillPlaceHolder = null | |
190 | + if (this.$parent.$options.componentName === 'ElFormItem') { | |
191 | + if (this.validateEvent) { | |
192 | + this.$parent.$emit('el.form.blur', [this.currentValue]) | |
193 | + } | |
194 | + } | |
195 | + } | |
196 | + } | |
197 | +} | |
198 | +</script> | |
199 | + | |
200 | +<style lang="scss" scoped> | |
201 | + // Fonts: | |
202 | + $font-size-base: 16px; | |
203 | + $font-size-small: 18px; | |
204 | + $font-size-smallest: 12px; | |
205 | + $font-weight-normal: normal; | |
206 | + $font-weight-bold: bold; | |
207 | + $apixel: 1px; | |
208 | + // Utils | |
209 | + $spacer: 12px; | |
210 | + $transition: 0.2s ease all; | |
211 | + $index: 0px; | |
212 | + $index-has-icon: 30px; | |
213 | + // Theme: | |
214 | + $color-white: white; | |
215 | + $color-grey: #9E9E9E; | |
216 | + $color-grey-light: #E0E0E0; | |
217 | + $color-blue: #2196F3; | |
218 | + $color-red: #F44336; | |
219 | + $color-black: black; | |
220 | + // Base clases: | |
221 | + %base-bar-pseudo { | |
222 | + content: ''; | |
223 | + height: 1px; | |
224 | + width: 0; | |
225 | + bottom: 0; | |
226 | + position: absolute; | |
227 | + transition: $transition; | |
228 | + } | |
229 | + | |
230 | + // Mixins: | |
231 | + @mixin slided-top() { | |
232 | + top: - ($font-size-base + $spacer); | |
233 | + left: 0; | |
234 | + font-size: $font-size-base; | |
235 | + font-weight: $font-weight-bold; | |
236 | + } | |
237 | + | |
238 | + // Component: | |
239 | + .material-input__component { | |
240 | + margin-top: 36px; | |
241 | + position: relative; | |
242 | + * { | |
243 | + box-sizing: border-box; | |
244 | + } | |
245 | + .iconClass { | |
246 | + .material-input__icon { | |
247 | + position: absolute; | |
248 | + left: 0; | |
249 | + line-height: $font-size-base; | |
250 | + color: $color-blue; | |
251 | + top: $spacer; | |
252 | + width: $index-has-icon; | |
253 | + height: $font-size-base; | |
254 | + font-size: $font-size-base; | |
255 | + font-weight: $font-weight-normal; | |
256 | + pointer-events: none; | |
257 | + } | |
258 | + .material-label { | |
259 | + left: $index-has-icon; | |
260 | + } | |
261 | + .material-input { | |
262 | + text-indent: $index-has-icon; | |
263 | + } | |
264 | + } | |
265 | + .material-input { | |
266 | + font-size: $font-size-base; | |
267 | + padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2; | |
268 | + display: block; | |
269 | + width: 100%; | |
270 | + border: none; | |
271 | + line-height: 1; | |
272 | + border-radius: 0; | |
273 | + &:focus { | |
274 | + outline: none; | |
275 | + border: none; | |
276 | + border-bottom: 1px solid transparent; // fixes the height issue | |
277 | + } | |
278 | + } | |
279 | + .material-label { | |
280 | + font-weight: $font-weight-normal; | |
281 | + position: absolute; | |
282 | + pointer-events: none; | |
283 | + left: $index; | |
284 | + top: 0; | |
285 | + transition: $transition; | |
286 | + font-size: $font-size-small; | |
287 | + } | |
288 | + .material-input-bar { | |
289 | + position: relative; | |
290 | + display: block; | |
291 | + width: 100%; | |
292 | + &:before { | |
293 | + @extend %base-bar-pseudo; | |
294 | + left: 50%; | |
295 | + } | |
296 | + &:after { | |
297 | + @extend %base-bar-pseudo; | |
298 | + right: 50%; | |
299 | + } | |
300 | + } | |
301 | + // Disabled state: | |
302 | + &.material--disabled { | |
303 | + .material-input { | |
304 | + border-bottom-style: dashed; | |
305 | + } | |
306 | + } | |
307 | + // Raised state: | |
308 | + &.material--raised { | |
309 | + .material-label { | |
310 | + @include slided-top(); | |
311 | + } | |
312 | + } | |
313 | + // Active state: | |
314 | + &.material--active { | |
315 | + .material-input-bar { | |
316 | + &:before, | |
317 | + &:after { | |
318 | + width: 50%; | |
319 | + } | |
320 | + } | |
321 | + } | |
322 | + } | |
323 | + | |
324 | + .material-input__component { | |
325 | + background: $color-white; | |
326 | + .material-input { | |
327 | + background: none; | |
328 | + color: $color-black; | |
329 | + text-indent: $index; | |
330 | + border-bottom: 1px solid $color-grey-light; | |
331 | + } | |
332 | + .material-label { | |
333 | + color: $color-grey; | |
334 | + } | |
335 | + .material-input-bar { | |
336 | + &:before, | |
337 | + &:after { | |
338 | + background: $color-blue; | |
339 | + } | |
340 | + } | |
341 | + // Active state: | |
342 | + &.material--active { | |
343 | + .material-label { | |
344 | + color: $color-blue; | |
345 | + } | |
346 | + } | |
347 | + // Errors: | |
348 | + &.material--has-errors { | |
349 | + &.material--active .material-label { | |
350 | + color: $color-red; | |
351 | + } | |
352 | + .material-input-bar { | |
353 | + &:before, | |
354 | + &:after { | |
355 | + background: transparent; | |
356 | + } | |
357 | + } | |
358 | + } | |
359 | + } | |
360 | +</style> | ... | ... |
src/components/MarkdownEditor/default-options.js
... | ... | @@ -0,0 +1,31 @@ |
1 | +// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor | |
2 | +export default { | |
3 | + minHeight: '200px', | |
4 | + previewStyle: 'vertical', | |
5 | + useCommandShortcut: true, | |
6 | + useDefaultHTMLSanitizer: true, | |
7 | + usageStatistics: false, | |
8 | + hideModeSwitch: false, | |
9 | + toolbarItems: [ | |
10 | + 'heading', | |
11 | + 'bold', | |
12 | + 'italic', | |
13 | + 'strike', | |
14 | + 'divider', | |
15 | + 'hr', | |
16 | + 'quote', | |
17 | + 'divider', | |
18 | + 'ul', | |
19 | + 'ol', | |
20 | + 'task', | |
21 | + 'indent', | |
22 | + 'outdent', | |
23 | + 'divider', | |
24 | + 'table', | |
25 | + 'image', | |
26 | + 'link', | |
27 | + 'divider', | |
28 | + 'code', | |
29 | + 'codeblock' | |
30 | + ] | |
31 | +} | ... | ... |
src/components/MarkdownEditor/index.vue
... | ... | @@ -0,0 +1,118 @@ |
1 | +<template> | |
2 | + <div :id="id" /> | |
3 | +</template> | |
4 | + | |
5 | +<script> | |
6 | +// deps for editor | |
7 | +import 'codemirror/lib/codemirror.css' // codemirror | |
8 | +import 'tui-editor/dist/tui-editor.css' // editor ui | |
9 | +import 'tui-editor/dist/tui-editor-contents.css' // editor content | |
10 | + | |
11 | +import Editor from 'tui-editor' | |
12 | +import defaultOptions from './default-options' | |
13 | + | |
14 | +export default { | |
15 | + name: 'MarkdownEditor', | |
16 | + props: { | |
17 | + value: { | |
18 | + type: String, | |
19 | + default: '' | |
20 | + }, | |
21 | + id: { | |
22 | + type: String, | |
23 | + required: false, | |
24 | + default() { | |
25 | + return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '') | |
26 | + } | |
27 | + }, | |
28 | + options: { | |
29 | + type: Object, | |
30 | + default() { | |
31 | + return defaultOptions | |
32 | + } | |
33 | + }, | |
34 | + mode: { | |
35 | + type: String, | |
36 | + default: 'markdown' | |
37 | + }, | |
38 | + height: { | |
39 | + type: String, | |
40 | + required: false, | |
41 | + default: '300px' | |
42 | + }, | |
43 | + language: { | |
44 | + type: String, | |
45 | + required: false, | |
46 | + default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs | |
47 | + } | |
48 | + }, | |
49 | + data() { | |
50 | + return { | |
51 | + editor: null | |
52 | + } | |
53 | + }, | |
54 | + computed: { | |
55 | + editorOptions() { | |
56 | + const options = Object.assign({}, defaultOptions, this.options) | |
57 | + options.initialEditType = this.mode | |
58 | + options.height = this.height | |
59 | + options.language = this.language | |
60 | + return options | |
61 | + } | |
62 | + }, | |
63 | + watch: { | |
64 | + value(newValue, preValue) { | |
65 | + if (newValue !== preValue && newValue !== this.editor.getValue()) { | |
66 | + this.editor.setValue(newValue) | |
67 | + } | |
68 | + }, | |
69 | + language(val) { | |
70 | + this.destroyEditor() | |
71 | + this.initEditor() | |
72 | + }, | |
73 | + height(newValue) { | |
74 | + this.editor.height(newValue) | |
75 | + }, | |
76 | + mode(newValue) { | |
77 | + this.editor.changeMode(newValue) | |
78 | + } | |
79 | + }, | |
80 | + mounted() { | |
81 | + this.initEditor() | |
82 | + }, | |
83 | + destroyed() { | |
84 | + this.destroyEditor() | |
85 | + }, | |
86 | + methods: { | |
87 | + initEditor() { | |
88 | + this.editor = new Editor({ | |
89 | + el: document.getElementById(this.id), | |
90 | + ...this.editorOptions | |
91 | + }) | |
92 | + if (this.value) { | |
93 | + this.editor.setValue(this.value) | |
94 | + } | |
95 | + this.editor.on('change', () => { | |
96 | + this.$emit('input', this.editor.getValue()) | |
97 | + }) | |
98 | + }, | |
99 | + destroyEditor() { | |
100 | + if (!this.editor) return | |
101 | + this.editor.off('change') | |
102 | + this.editor.remove() | |
103 | + }, | |
104 | + setValue(value) { | |
105 | + this.editor.setValue(value) | |
106 | + }, | |
107 | + getValue() { | |
108 | + return this.editor.getValue() | |
109 | + }, | |
110 | + setHtml(value) { | |
111 | + this.editor.setHtml(value) | |
112 | + }, | |
113 | + getHtml() { | |
114 | + return this.editor.getHtml() | |
115 | + } | |
116 | + } | |
117 | +} | |
118 | +</script> | ... | ... |
src/components/Pagination/index.vue
... | ... | @@ -0,0 +1,101 @@ |
1 | +<template> | |
2 | + <div :class="{'hidden':hidden}" class="pagination-container"> | |
3 | + <el-pagination | |
4 | + :background="background" | |
5 | + :current-page.sync="currentPage" | |
6 | + :page-size.sync="pageSize" | |
7 | + :layout="layout" | |
8 | + :page-sizes="pageSizes" | |
9 | + :total="total" | |
10 | + v-bind="$attrs" | |
11 | + @size-change="handleSizeChange" | |
12 | + @current-change="handleCurrentChange" | |
13 | + /> | |
14 | + </div> | |
15 | +</template> | |
16 | + | |
17 | +<script> | |
18 | +import { scrollTo } from '@/utils/scroll-to' | |
19 | + | |
20 | +export default { | |
21 | + name: 'Pagination', | |
22 | + props: { | |
23 | + total: { | |
24 | + required: true, | |
25 | + type: Number | |
26 | + }, | |
27 | + page: { | |
28 | + type: Number, | |
29 | + default: 1 | |
30 | + }, | |
31 | + limit: { | |
32 | + type: Number, | |
33 | + default: 20 | |
34 | + }, | |
35 | + pageSizes: { | |
36 | + type: Array, | |
37 | + default() { | |
38 | + return [10, 20, 30, 50] | |
39 | + } | |
40 | + }, | |
41 | + layout: { | |
42 | + type: String, | |
43 | + default: 'total, sizes, prev, pager, next, jumper' | |
44 | + }, | |
45 | + background: { | |
46 | + type: Boolean, | |
47 | + default: true | |
48 | + }, | |
49 | + autoScroll: { | |
50 | + type: Boolean, | |
51 | + default: true | |
52 | + }, | |
53 | + hidden: { | |
54 | + type: Boolean, | |
55 | + default: false | |
56 | + } | |
57 | + }, | |
58 | + computed: { | |
59 | + currentPage: { | |
60 | + get() { | |
61 | + return this.page | |
62 | + }, | |
63 | + set(val) { | |
64 | + this.$emit('update:page', val) | |
65 | + } | |
66 | + }, | |
67 | + pageSize: { | |
68 | + get() { | |
69 | + return this.limit | |
70 | + }, | |
71 | + set(val) { | |
72 | + this.$emit('update:limit', val) | |
73 | + } | |
74 | + } | |
75 | + }, | |
76 | + methods: { | |
77 | + handleSizeChange(val) { | |
78 | + this.$emit('pagination', { page: this.currentPage, limit: val }) | |
79 | + if (this.autoScroll) { | |
80 | + scrollTo(0, 800) | |
81 | + } | |
82 | + }, | |
83 | + handleCurrentChange(val) { | |
84 | + this.$emit('pagination', { page: val, limit: this.pageSize }) | |
85 | + if (this.autoScroll) { | |
86 | + scrollTo(0, 800) | |
87 | + } | |
88 | + } | |
89 | + } | |
90 | +} | |
91 | +</script> | |
92 | + | |
93 | +<style scoped> | |
94 | +.pagination-container { | |
95 | + background: #fff; | |
96 | + padding: 32px 16px; | |
97 | +} | |
98 | +.pagination-container.hidden { | |
99 | + display: none; | |
100 | +} | |
101 | +</style> | ... | ... |
src/components/PanThumb/index.vue
... | ... | @@ -0,0 +1,142 @@ |
1 | +<template> | |
2 | + <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item"> | |
3 | + <div class="pan-info"> | |
4 | + <div class="pan-info-roles-container"> | |
5 | + <slot /> | |
6 | + </div> | |
7 | + </div> | |
8 | + <!-- eslint-disable-next-line --> | |
9 | + <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div> | |
10 | + </div> | |
11 | +</template> | |
12 | + | |
13 | +<script> | |
14 | +export default { | |
15 | + name: 'PanThumb', | |
16 | + props: { | |
17 | + image: { | |
18 | + type: String, | |
19 | + required: true | |
20 | + }, | |
21 | + zIndex: { | |
22 | + type: Number, | |
23 | + default: 1 | |
24 | + }, | |
25 | + width: { | |
26 | + type: String, | |
27 | + default: '150px' | |
28 | + }, | |
29 | + height: { | |
30 | + type: String, | |
31 | + default: '150px' | |
32 | + } | |
33 | + } | |
34 | +} | |
35 | +</script> | |
36 | + | |
37 | +<style scoped> | |
38 | +.pan-item { | |
39 | + width: 200px; | |
40 | + height: 200px; | |
41 | + border-radius: 50%; | |
42 | + display: inline-block; | |
43 | + position: relative; | |
44 | + cursor: default; | |
45 | + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); | |
46 | +} | |
47 | + | |
48 | +.pan-info-roles-container { | |
49 | + padding: 20px; | |
50 | + text-align: center; | |
51 | +} | |
52 | + | |
53 | +.pan-thumb { | |
54 | + width: 100%; | |
55 | + height: 100%; | |
56 | + background-position: center center; | |
57 | + background-size: cover; | |
58 | + border-radius: 50%; | |
59 | + overflow: hidden; | |
60 | + position: absolute; | |
61 | + transform-origin: 95% 40%; | |
62 | + transition: all 0.3s ease-in-out; | |
63 | +} | |
64 | + | |
65 | +/* .pan-thumb:after { | |
66 | + content: ''; | |
67 | + width: 8px; | |
68 | + height: 8px; | |
69 | + position: absolute; | |
70 | + border-radius: 50%; | |
71 | + top: 40%; | |
72 | + left: 95%; | |
73 | + margin: -4px 0 0 -4px; | |
74 | + background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%); | |
75 | + box-shadow: 0 0 1px rgba(255, 255, 255, 0.9); | |
76 | +} */ | |
77 | + | |
78 | +.pan-info { | |
79 | + position: absolute; | |
80 | + width: inherit; | |
81 | + height: inherit; | |
82 | + border-radius: 50%; | |
83 | + overflow: hidden; | |
84 | + box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05); | |
85 | +} | |
86 | + | |
87 | +.pan-info h3 { | |
88 | + color: #fff; | |
89 | + text-transform: uppercase; | |
90 | + position: relative; | |
91 | + letter-spacing: 2px; | |
92 | + font-size: 18px; | |
93 | + margin: 0 60px; | |
94 | + padding: 22px 0 0 0; | |
95 | + height: 85px; | |
96 | + font-family: 'Open Sans', Arial, sans-serif; | |
97 | + text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); | |
98 | +} | |
99 | + | |
100 | +.pan-info p { | |
101 | + color: #fff; | |
102 | + padding: 10px 5px; | |
103 | + font-style: italic; | |
104 | + margin: 0 30px; | |
105 | + font-size: 12px; | |
106 | + border-top: 1px solid rgba(255, 255, 255, 0.5); | |
107 | +} | |
108 | + | |
109 | +.pan-info p a { | |
110 | + display: block; | |
111 | + color: #333; | |
112 | + width: 80px; | |
113 | + height: 80px; | |
114 | + background: rgba(255, 255, 255, 0.3); | |
115 | + border-radius: 50%; | |
116 | + color: #fff; | |
117 | + font-style: normal; | |
118 | + font-weight: 700; | |
119 | + text-transform: uppercase; | |
120 | + font-size: 9px; | |
121 | + letter-spacing: 1px; | |
122 | + padding-top: 24px; | |
123 | + margin: 7px auto 0; | |
124 | + font-family: 'Open Sans', Arial, sans-serif; | |
125 | + opacity: 0; | |
126 | + transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; | |
127 | + transform: translateX(60px) rotate(90deg); | |
128 | +} | |
129 | + | |
130 | +.pan-info p a:hover { | |
131 | + background: rgba(255, 255, 255, 0.5); | |
132 | +} | |
133 | + | |
134 | +.pan-item:hover .pan-thumb { | |
135 | + transform: rotate(-110deg); | |
136 | +} | |
137 | + | |
138 | +.pan-item:hover .pan-info p a { | |
139 | + opacity: 1; | |
140 | + transform: translateX(0px) rotate(0deg); | |
141 | +} | |
142 | +</style> | ... | ... |
src/components/RightPanel/index.vue
... | ... | @@ -0,0 +1,145 @@ |
1 | +<template> | |
2 | + <div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> | |
3 | + <div class="rightPanel-background" /> | |
4 | + <div class="rightPanel"> | |
5 | + <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show"> | |
6 | + <i :class="show?'el-icon-close':'el-icon-setting'" /> | |
7 | + </div> | |
8 | + <div class="rightPanel-items"> | |
9 | + <slot /> | |
10 | + </div> | |
11 | + </div> | |
12 | + </div> | |
13 | +</template> | |
14 | + | |
15 | +<script> | |
16 | +import { addClass, removeClass } from '@/utils' | |
17 | + | |
18 | +export default { | |
19 | + name: 'RightPanel', | |
20 | + props: { | |
21 | + clickNotClose: { | |
22 | + default: false, | |
23 | + type: Boolean | |
24 | + }, | |
25 | + buttonTop: { | |
26 | + default: 250, | |
27 | + type: Number | |
28 | + } | |
29 | + }, | |
30 | + data() { | |
31 | + return { | |
32 | + show: false | |
33 | + } | |
34 | + }, | |
35 | + computed: { | |
36 | + theme() { | |
37 | + return this.$store.state.settings.theme | |
38 | + } | |
39 | + }, | |
40 | + watch: { | |
41 | + show(value) { | |
42 | + if (value && !this.clickNotClose) { | |
43 | + this.addEventClick() | |
44 | + } | |
45 | + if (value) { | |
46 | + addClass(document.body, 'showRightPanel') | |
47 | + } else { | |
48 | + removeClass(document.body, 'showRightPanel') | |
49 | + } | |
50 | + } | |
51 | + }, | |
52 | + mounted() { | |
53 | + this.insertToBody() | |
54 | + }, | |
55 | + beforeDestroy() { | |
56 | + const elx = this.$refs.rightPanel | |
57 | + elx.remove() | |
58 | + }, | |
59 | + methods: { | |
60 | + addEventClick() { | |
61 | + window.addEventListener('click', this.closeSidebar) | |
62 | + }, | |
63 | + closeSidebar(evt) { | |
64 | + const parent = evt.target.closest('.rightPanel') | |
65 | + if (!parent) { | |
66 | + this.show = false | |
67 | + window.removeEventListener('click', this.closeSidebar) | |
68 | + } | |
69 | + }, | |
70 | + insertToBody() { | |
71 | + const elx = this.$refs.rightPanel | |
72 | + const body = document.querySelector('body') | |
73 | + body.insertBefore(elx, body.firstChild) | |
74 | + } | |
75 | + } | |
76 | +} | |
77 | +</script> | |
78 | + | |
79 | +<style> | |
80 | +.showRightPanel { | |
81 | + overflow: hidden; | |
82 | + position: relative; | |
83 | + width: calc(100% - 15px); | |
84 | +} | |
85 | +</style> | |
86 | + | |
87 | +<style lang="scss" scoped> | |
88 | +.rightPanel-background { | |
89 | + position: fixed; | |
90 | + top: 0; | |
91 | + left: 0; | |
92 | + opacity: 0; | |
93 | + transition: opacity .3s cubic-bezier(.7, .3, .1, 1); | |
94 | + background: rgba(0, 0, 0, .2); | |
95 | + z-index: -1; | |
96 | +} | |
97 | + | |
98 | +.rightPanel { | |
99 | + width: 100%; | |
100 | + max-width: 260px; | |
101 | + height: 100vh; | |
102 | + position: fixed; | |
103 | + top: 0; | |
104 | + right: 0; | |
105 | + box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05); | |
106 | + transition: all .25s cubic-bezier(.7, .3, .1, 1); | |
107 | + transform: translate(100%); | |
108 | + background: #fff; | |
109 | + z-index: 40000; | |
110 | +} | |
111 | + | |
112 | +.show { | |
113 | + transition: all .3s cubic-bezier(.7, .3, .1, 1); | |
114 | + | |
115 | + .rightPanel-background { | |
116 | + z-index: 20000; | |
117 | + opacity: 1; | |
118 | + width: 100%; | |
119 | + height: 100%; | |
120 | + } | |
121 | + | |
122 | + .rightPanel { | |
123 | + transform: translate(0); | |
124 | + } | |
125 | +} | |
126 | + | |
127 | +.handle-button { | |
128 | + width: 48px; | |
129 | + height: 48px; | |
130 | + position: absolute; | |
131 | + left: -48px; | |
132 | + text-align: center; | |
133 | + font-size: 24px; | |
134 | + border-radius: 6px 0 0 6px !important; | |
135 | + z-index: 0; | |
136 | + pointer-events: auto; | |
137 | + cursor: pointer; | |
138 | + color: #fff; | |
139 | + line-height: 48px; | |
140 | + i { | |
141 | + font-size: 24px; | |
142 | + line-height: 48px; | |
143 | + } | |
144 | +} | |
145 | +</style> | ... | ... |
src/components/Screenfull/index.vue
... | ... | @@ -0,0 +1,60 @@ |
1 | +<template> | |
2 | + <div> | |
3 | + <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> | |
4 | + </div> | |
5 | +</template> | |
6 | + | |
7 | +<script> | |
8 | +import screenfull from 'screenfull' | |
9 | + | |
10 | +export default { | |
11 | + name: 'Screenfull', | |
12 | + data() { | |
13 | + return { | |
14 | + isFullscreen: false | |
15 | + } | |
16 | + }, | |
17 | + mounted() { | |
18 | + this.init() | |
19 | + }, | |
20 | + beforeDestroy() { | |
21 | + this.destroy() | |
22 | + }, | |
23 | + methods: { | |
24 | + click() { | |
25 | + if (!screenfull.enabled) { | |
26 | + this.$message({ | |
27 | + message: 'you browser can not work', | |
28 | + type: 'warning' | |
29 | + }) | |
30 | + return false | |
31 | + } | |
32 | + screenfull.toggle() | |
33 | + }, | |
34 | + change() { | |
35 | + this.isFullscreen = screenfull.isFullscreen | |
36 | + }, | |
37 | + init() { | |
38 | + if (screenfull.enabled) { | |
39 | + screenfull.on('change', this.change) | |
40 | + } | |
41 | + }, | |
42 | + destroy() { | |
43 | + if (screenfull.enabled) { | |
44 | + screenfull.off('change', this.change) | |
45 | + } | |
46 | + } | |
47 | + } | |
48 | +} | |
49 | +</script> | |
50 | + | |
51 | +<style scoped> | |
52 | +.screenfull-svg { | |
53 | + display: inline-block; | |
54 | + cursor: pointer; | |
55 | + fill: #5a5e66;; | |
56 | + width: 20px; | |
57 | + height: 20px; | |
58 | + vertical-align: 10px; | |
59 | +} | |
60 | +</style> | ... | ... |
src/components/Share/DropdownMenu.vue
... | ... | @@ -0,0 +1,103 @@ |
1 | +<template> | |
2 | + <div :class="{active:isActive}" class="share-dropdown-menu"> | |
3 | + <div class="share-dropdown-menu-wrapper"> | |
4 | + <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span> | |
5 | + <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item"> | |
6 | + <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a> | |
7 | + <span v-else>{{ item.title }}</span> | |
8 | + </div> | |
9 | + </div> | |
10 | + </div> | |
11 | +</template> | |
12 | + | |
13 | +<script> | |
14 | +export default { | |
15 | + props: { | |
16 | + items: { | |
17 | + type: Array, | |
18 | + default: function() { | |
19 | + return [] | |
20 | + } | |
21 | + }, | |
22 | + title: { | |
23 | + type: String, | |
24 | + default: 'vue' | |
25 | + } | |
26 | + }, | |
27 | + data() { | |
28 | + return { | |
29 | + isActive: false | |
30 | + } | |
31 | + }, | |
32 | + methods: { | |
33 | + clickTitle() { | |
34 | + this.isActive = !this.isActive | |
35 | + } | |
36 | + } | |
37 | +} | |
38 | +</script> | |
39 | + | |
40 | +<style lang="scss" > | |
41 | +$n: 9; //和items.length 相同 | |
42 | +$t: .1s; | |
43 | +.share-dropdown-menu { | |
44 | + width: 250px; | |
45 | + position: relative; | |
46 | + z-index: 1; | |
47 | + height: auto!important; | |
48 | + &-title { | |
49 | + width: 100%; | |
50 | + display: block; | |
51 | + cursor: pointer; | |
52 | + background: black; | |
53 | + color: white; | |
54 | + height: 60px; | |
55 | + line-height: 60px; | |
56 | + font-size: 20px; | |
57 | + text-align: center; | |
58 | + z-index: 2; | |
59 | + transform: translate3d(0,0,0); | |
60 | + } | |
61 | + &-wrapper { | |
62 | + position: relative; | |
63 | + } | |
64 | + &-item { | |
65 | + text-align: center; | |
66 | + position: absolute; | |
67 | + width: 100%; | |
68 | + background: #e0e0e0; | |
69 | + color: #000; | |
70 | + line-height: 60px; | |
71 | + height: 60px; | |
72 | + cursor: pointer; | |
73 | + font-size: 18px; | |
74 | + overflow: hidden; | |
75 | + opacity: 1; | |
76 | + transition: transform 0.28s ease; | |
77 | + &:hover { | |
78 | + background: black; | |
79 | + color: white; | |
80 | + } | |
81 | + @for $i from 1 through $n { | |
82 | + &:nth-of-type(#{$i}) { | |
83 | + z-index: -1; | |
84 | + transition-delay: $i*$t; | |
85 | + transform: translate3d(0, -60px, 0); | |
86 | + } | |
87 | + } | |
88 | + } | |
89 | + &.active { | |
90 | + .share-dropdown-menu-wrapper { | |
91 | + z-index: 1; | |
92 | + } | |
93 | + .share-dropdown-menu-item { | |
94 | + @for $i from 1 through $n { | |
95 | + &:nth-of-type(#{$i}) { | |
96 | + transition-delay: ($n - $i)*$t; | |
97 | + transform: translate3d(0, ($i - 1)*60px, 0); | |
98 | + } | |
99 | + } | |
100 | + } | |
101 | + } | |
102 | +} | |
103 | +</style> | ... | ... |
src/components/SizeSelect/index.vue
... | ... | @@ -0,0 +1,57 @@ |
1 | +<template> | |
2 | + <el-dropdown trigger="click" @command="handleSetSize"> | |
3 | + <div> | |
4 | + <svg-icon class-name="size-icon" icon-class="size" /> | |
5 | + </div> | |
6 | + <el-dropdown-menu slot="dropdown"> | |
7 | + <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value"> | |
8 | + {{ | |
9 | + item.label }} | |
10 | + </el-dropdown-item> | |
11 | + </el-dropdown-menu> | |
12 | + </el-dropdown> | |
13 | +</template> | |
14 | + | |
15 | +<script> | |
16 | +export default { | |
17 | + data() { | |
18 | + return { | |
19 | + sizeOptions: [ | |
20 | + { label: 'Default', value: 'default' }, | |
21 | + { label: 'Medium', value: 'medium' }, | |
22 | + { label: 'Small', value: 'small' }, | |
23 | + { label: 'Mini', value: 'mini' } | |
24 | + ] | |
25 | + } | |
26 | + }, | |
27 | + computed: { | |
28 | + size() { | |
29 | + return this.$store.getters.size | |
30 | + } | |
31 | + }, | |
32 | + methods: { | |
33 | + handleSetSize(size) { | |
34 | + this.$ELEMENT.size = size | |
35 | + this.$store.dispatch('app/setSize', size) | |
36 | + this.refreshView() | |
37 | + this.$message({ | |
38 | + message: 'Switch Size Success', | |
39 | + type: 'success' | |
40 | + }) | |
41 | + }, | |
42 | + refreshView() { | |
43 | + // In order to make the cached page re-rendered | |
44 | + this.$store.dispatch('tagsView/delAllCachedViews', this.$route) | |
45 | + | |
46 | + const { fullPath } = this.$route | |
47 | + | |
48 | + this.$nextTick(() => { | |
49 | + this.$router.replace({ | |
50 | + path: '/redirect' + fullPath | |
51 | + }) | |
52 | + }) | |
53 | + } | |
54 | + } | |
55 | + | |
56 | +} | |
57 | +</script> | ... | ... |
src/components/Sticky/index.vue
... | ... | @@ -0,0 +1,91 @@ |
1 | +<template> | |
2 | + <div :style="{height:height+'px',zIndex:zIndex}"> | |
3 | + <div | |
4 | + :class="className" | |
5 | + :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}" | |
6 | + > | |
7 | + <slot> | |
8 | + <div>sticky</div> | |
9 | + </slot> | |
10 | + </div> | |
11 | + </div> | |
12 | +</template> | |
13 | + | |
14 | +<script> | |
15 | +export default { | |
16 | + name: 'Sticky', | |
17 | + props: { | |
18 | + stickyTop: { | |
19 | + type: Number, | |
20 | + default: 0 | |
21 | + }, | |
22 | + zIndex: { | |
23 | + type: Number, | |
24 | + default: 1 | |
25 | + }, | |
26 | + className: { | |
27 | + type: String, | |
28 | + default: '' | |
29 | + } | |
30 | + }, | |
31 | + data() { | |
32 | + return { | |
33 | + active: false, | |
34 | + position: '', | |
35 | + width: undefined, | |
36 | + height: undefined, | |
37 | + isSticky: false | |
38 | + } | |
39 | + }, | |
40 | + mounted() { | |
41 | + this.height = this.$el.getBoundingClientRect().height | |
42 | + window.addEventListener('scroll', this.handleScroll) | |
43 | + window.addEventListener('resize', this.handleResize) | |
44 | + }, | |
45 | + activated() { | |
46 | + this.handleScroll() | |
47 | + }, | |
48 | + destroyed() { | |
49 | + window.removeEventListener('scroll', this.handleScroll) | |
50 | + window.removeEventListener('resize', this.handleResize) | |
51 | + }, | |
52 | + methods: { | |
53 | + sticky() { | |
54 | + if (this.active) { | |
55 | + return | |
56 | + } | |
57 | + this.position = 'fixed' | |
58 | + this.active = true | |
59 | + this.width = this.width + 'px' | |
60 | + this.isSticky = true | |
61 | + }, | |
62 | + handleReset() { | |
63 | + if (!this.active) { | |
64 | + return | |
65 | + } | |
66 | + this.reset() | |
67 | + }, | |
68 | + reset() { | |
69 | + this.position = '' | |
70 | + this.width = 'auto' | |
71 | + this.active = false | |
72 | + this.isSticky = false | |
73 | + }, | |
74 | + handleScroll() { | |
75 | + const width = this.$el.getBoundingClientRect().width | |
76 | + this.width = width || 'auto' | |
77 | + const offsetTop = this.$el.getBoundingClientRect().top | |
78 | + if (offsetTop < this.stickyTop) { | |
79 | + this.sticky() | |
80 | + return | |
81 | + } | |
82 | + this.handleReset() | |
83 | + }, | |
84 | + handleResize() { | |
85 | + if (this.isSticky) { | |
86 | + this.width = this.$el.getBoundingClientRect().width + 'px' | |
87 | + } | |
88 | + } | |
89 | + } | |
90 | +} | |
91 | +</script> | ... | ... |
File mode changed
src/components/TextHoverEffect/Mallki.vue
... | ... | @@ -0,0 +1,113 @@ |
1 | +<template> | |
2 | + <a :class="className" class="link--mallki" href="#"> | |
3 | + {{ text }} | |
4 | + <span :data-letters="text" /> | |
5 | + <span :data-letters="text" /> | |
6 | + </a> | |
7 | +</template> | |
8 | + | |
9 | +<script> | |
10 | +export default { | |
11 | + props: { | |
12 | + className: { | |
13 | + type: String, | |
14 | + default: '' | |
15 | + }, | |
16 | + text: { | |
17 | + type: String, | |
18 | + default: 'vue-element-admin' | |
19 | + } | |
20 | + } | |
21 | +} | |
22 | +</script> | |
23 | + | |
24 | +<style> | |
25 | +/* Mallki */ | |
26 | + | |
27 | +.link--mallki { | |
28 | + font-weight: 800; | |
29 | + color: #4dd9d5; | |
30 | + font-family: 'Dosis', sans-serif; | |
31 | + -webkit-transition: color 0.5s 0.25s; | |
32 | + transition: color 0.5s 0.25s; | |
33 | + overflow: hidden; | |
34 | + position: relative; | |
35 | + display: inline-block; | |
36 | + line-height: 1; | |
37 | + outline: none; | |
38 | + text-decoration: none; | |
39 | +} | |
40 | + | |
41 | +.link--mallki:hover { | |
42 | + -webkit-transition: none; | |
43 | + transition: none; | |
44 | + color: transparent; | |
45 | +} | |
46 | + | |
47 | +.link--mallki::before { | |
48 | + content: ''; | |
49 | + width: 100%; | |
50 | + height: 6px; | |
51 | + margin: -3px 0 0 0; | |
52 | + background: #3888fa; | |
53 | + position: absolute; | |
54 | + left: 0; | |
55 | + top: 50%; | |
56 | + -webkit-transform: translate3d(-100%, 0, 0); | |
57 | + transform: translate3d(-100%, 0, 0); | |
58 | + -webkit-transition: -webkit-transform 0.4s; | |
59 | + transition: transform 0.4s; | |
60 | + -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); | |
61 | + transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); | |
62 | +} | |
63 | + | |
64 | +.link--mallki:hover::before { | |
65 | + -webkit-transform: translate3d(100%, 0, 0); | |
66 | + transform: translate3d(100%, 0, 0); | |
67 | +} | |
68 | + | |
69 | +.link--mallki span { | |
70 | + position: absolute; | |
71 | + height: 50%; | |
72 | + width: 100%; | |
73 | + left: 0; | |
74 | + top: 0; | |
75 | + overflow: hidden; | |
76 | +} | |
77 | + | |
78 | +.link--mallki span::before { | |
79 | + content: attr(data-letters); | |
80 | + color: red; | |
81 | + position: absolute; | |
82 | + left: 0; | |
83 | + width: 100%; | |
84 | + color: #3888fa; | |
85 | + -webkit-transition: -webkit-transform 0.5s; | |
86 | + transition: transform 0.5s; | |
87 | +} | |
88 | + | |
89 | +.link--mallki span:nth-child(2) { | |
90 | + top: 50%; | |
91 | +} | |
92 | + | |
93 | +.link--mallki span:first-child::before { | |
94 | + top: 0; | |
95 | + -webkit-transform: translate3d(0, 100%, 0); | |
96 | + transform: translate3d(0, 100%, 0); | |
97 | +} | |
98 | + | |
99 | +.link--mallki span:nth-child(2)::before { | |
100 | + bottom: 0; | |
101 | + -webkit-transform: translate3d(0, -100%, 0); | |
102 | + transform: translate3d(0, -100%, 0); | |
103 | +} | |
104 | + | |
105 | +.link--mallki:hover span::before { | |
106 | + -webkit-transition-delay: 0.3s; | |
107 | + transition-delay: 0.3s; | |
108 | + -webkit-transform: translate3d(0, 0, 0); | |
109 | + transform: translate3d(0, 0, 0); | |
110 | + -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); | |
111 | + transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); | |
112 | +} | |
113 | +</style> | ... | ... |
src/components/ThemePicker/index.vue
... | ... | @@ -0,0 +1,175 @@ |
1 | +<template> | |
2 | + <el-color-picker | |
3 | + v-model="theme" | |
4 | + :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" | |
5 | + class="theme-picker" | |
6 | + popper-class="theme-picker-dropdown" | |
7 | + /> | |
8 | +</template> | |
9 | + | |
10 | +<script> | |
11 | +const version = require('element-ui/package.json').version // element-ui version from node_modules | |
12 | +const ORIGINAL_THEME = '#409EFF' // default color | |
13 | + | |
14 | +export default { | |
15 | + data() { | |
16 | + return { | |
17 | + chalk: '', // content of theme-chalk css | |
18 | + theme: '' | |
19 | + } | |
20 | + }, | |
21 | + computed: { | |
22 | + defaultTheme() { | |
23 | + return this.$store.state.settings.theme | |
24 | + } | |
25 | + }, | |
26 | + watch: { | |
27 | + defaultTheme: { | |
28 | + handler: function(val, oldVal) { | |
29 | + this.theme = val | |
30 | + }, | |
31 | + immediate: true | |
32 | + }, | |
33 | + async theme(val) { | |
34 | + const oldVal = this.chalk ? this.theme : ORIGINAL_THEME | |
35 | + if (typeof val !== 'string') return | |
36 | + const themeCluster = this.getThemeCluster(val.replace('#', '')) | |
37 | + const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) | |
38 | + console.log(themeCluster, originalCluster) | |
39 | + | |
40 | + const $message = this.$message({ | |
41 | + message: ' Compiling the theme', | |
42 | + customClass: 'theme-message', | |
43 | + type: 'success', | |
44 | + duration: 0, | |
45 | + iconClass: 'el-icon-loading' | |
46 | + }) | |
47 | + | |
48 | + const getHandler = (variable, id) => { | |
49 | + return () => { | |
50 | + const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) | |
51 | + const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) | |
52 | + | |
53 | + let styleTag = document.getElementById(id) | |
54 | + if (!styleTag) { | |
55 | + styleTag = document.createElement('style') | |
56 | + styleTag.setAttribute('id', id) | |
57 | + document.head.appendChild(styleTag) | |
58 | + } | |
59 | + styleTag.innerText = newStyle | |
60 | + } | |
61 | + } | |
62 | + | |
63 | + if (!this.chalk) { | |
64 | + const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` | |
65 | + await this.getCSSString(url, 'chalk') | |
66 | + } | |
67 | + | |
68 | + const chalkHandler = getHandler('chalk', 'chalk-style') | |
69 | + | |
70 | + chalkHandler() | |
71 | + | |
72 | + const styles = [].slice.call(document.querySelectorAll('style')) | |
73 | + .filter(style => { | |
74 | + const text = style.innerText | |
75 | + return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) | |
76 | + }) | |
77 | + styles.forEach(style => { | |
78 | + const { innerText } = style | |
79 | + if (typeof innerText !== 'string') return | |
80 | + style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) | |
81 | + }) | |
82 | + | |
83 | + this.$emit('change', val) | |
84 | + | |
85 | + $message.close() | |
86 | + } | |
87 | + }, | |
88 | + | |
89 | + methods: { | |
90 | + updateStyle(style, oldCluster, newCluster) { | |
91 | + let newStyle = style | |
92 | + oldCluster.forEach((color, index) => { | |
93 | + newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) | |
94 | + }) | |
95 | + return newStyle | |
96 | + }, | |
97 | + | |
98 | + getCSSString(url, variable) { | |
99 | + return new Promise(resolve => { | |
100 | + const xhr = new XMLHttpRequest() | |
101 | + xhr.onreadystatechange = () => { | |
102 | + if (xhr.readyState === 4 && xhr.status === 200) { | |
103 | + this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') | |
104 | + resolve() | |
105 | + } | |
106 | + } | |
107 | + xhr.open('GET', url) | |
108 | + xhr.send() | |
109 | + }) | |
110 | + }, | |
111 | + | |
112 | + getThemeCluster(theme) { | |
113 | + const tintColor = (color, tint) => { | |
114 | + let red = parseInt(color.slice(0, 2), 16) | |
115 | + let green = parseInt(color.slice(2, 4), 16) | |
116 | + let blue = parseInt(color.slice(4, 6), 16) | |
117 | + | |
118 | + if (tint === 0) { // when primary color is in its rgb space | |
119 | + return [red, green, blue].join(',') | |
120 | + } else { | |
121 | + red += Math.round(tint * (255 - red)) | |
122 | + green += Math.round(tint * (255 - green)) | |
123 | + blue += Math.round(tint * (255 - blue)) | |
124 | + | |
125 | + red = red.toString(16) | |
126 | + green = green.toString(16) | |
127 | + blue = blue.toString(16) | |
128 | + | |
129 | + return `#${red}${green}${blue}` | |
130 | + } | |
131 | + } | |
132 | + | |
133 | + const shadeColor = (color, shade) => { | |
134 | + let red = parseInt(color.slice(0, 2), 16) | |
135 | + let green = parseInt(color.slice(2, 4), 16) | |
136 | + let blue = parseInt(color.slice(4, 6), 16) | |
137 | + | |
138 | + red = Math.round((1 - shade) * red) | |
139 | + green = Math.round((1 - shade) * green) | |
140 | + blue = Math.round((1 - shade) * blue) | |
141 | + | |
142 | + red = red.toString(16) | |
143 | + green = green.toString(16) | |
144 | + blue = blue.toString(16) | |
145 | + | |
146 | + return `#${red}${green}${blue}` | |
147 | + } | |
148 | + | |
149 | + const clusters = [theme] | |
150 | + for (let i = 0; i <= 9; i++) { | |
151 | + clusters.push(tintColor(theme, Number((i / 10).toFixed(2)))) | |
152 | + } | |
153 | + clusters.push(shadeColor(theme, 0.1)) | |
154 | + return clusters | |
155 | + } | |
156 | + } | |
157 | +} | |
158 | +</script> | |
159 | + | |
160 | +<style> | |
161 | +.theme-message, | |
162 | +.theme-picker-dropdown { | |
163 | + z-index: 99999 !important; | |
164 | +} | |
165 | + | |
166 | +.theme-picker .el-color-picker__trigger { | |
167 | + height: 26px !important; | |
168 | + width: 26px !important; | |
169 | + padding: 2px; | |
170 | +} | |
171 | + | |
172 | +.theme-picker-dropdown .el-color-dropdown__link-btn { | |
173 | + display: none; | |
174 | +} | |
175 | +</style> | ... | ... |
src/components/Tinymce/components/EditorImage.vue
... | ... | @@ -0,0 +1,111 @@ |
1 | +<template> | |
2 | + <div class="upload-container"> | |
3 | + <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true"> | |
4 | + upload | |
5 | + </el-button> | |
6 | + <el-dialog :visible.sync="dialogVisible"> | |
7 | + <el-upload | |
8 | + :multiple="true" | |
9 | + :file-list="fileList" | |
10 | + :show-file-list="true" | |
11 | + :on-remove="handleRemove" | |
12 | + :on-success="handleSuccess" | |
13 | + :before-upload="beforeUpload" | |
14 | + class="editor-slide-upload" | |
15 | + action="https://httpbin.org/post" | |
16 | + list-type="picture-card" | |
17 | + > | |
18 | + <el-button size="small" type="primary"> | |
19 | + Click upload | |
20 | + </el-button> | |
21 | + </el-upload> | |
22 | + <el-button @click="dialogVisible = false"> | |
23 | + Cancel | |
24 | + </el-button> | |
25 | + <el-button type="primary" @click="handleSubmit"> | |
26 | + Confirm | |
27 | + </el-button> | |
28 | + </el-dialog> | |
29 | + </div> | |
30 | +</template> | |
31 | + | |
32 | +<script> | |
33 | +// import { getToken } from 'api/qiniu' | |
34 | + | |
35 | +export default { | |
36 | + name: 'EditorSlideUpload', | |
37 | + props: { | |
38 | + color: { | |
39 | + type: String, | |
40 | + default: '#1890ff' | |
41 | + } | |
42 | + }, | |
43 | + data() { | |
44 | + return { | |
45 | + dialogVisible: false, | |
46 | + listObj: {}, | |
47 | + fileList: [] | |
48 | + } | |
49 | + }, | |
50 | + methods: { | |
51 | + checkAllSuccess() { | |
52 | + return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess) | |
53 | + }, | |
54 | + handleSubmit() { | |
55 | + const arr = Object.keys(this.listObj).map(v => this.listObj[v]) | |
56 | + if (!this.checkAllSuccess()) { | |
57 | + this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!') | |
58 | + return | |
59 | + } | |
60 | + this.$emit('successCBK', arr) | |
61 | + this.listObj = {} | |
62 | + this.fileList = [] | |
63 | + this.dialogVisible = false | |
64 | + }, | |
65 | + handleSuccess(response, file) { | |
66 | + const uid = file.uid | |
67 | + const objKeyArr = Object.keys(this.listObj) | |
68 | + for (let i = 0, len = objKeyArr.length; i < len; i++) { | |
69 | + if (this.listObj[objKeyArr[i]].uid === uid) { | |
70 | + this.listObj[objKeyArr[i]].url = response.files.file | |
71 | + this.listObj[objKeyArr[i]].hasSuccess = true | |
72 | + return | |
73 | + } | |
74 | + } | |
75 | + }, | |
76 | + handleRemove(file) { | |
77 | + const uid = file.uid | |
78 | + const objKeyArr = Object.keys(this.listObj) | |
79 | + for (let i = 0, len = objKeyArr.length; i < len; i++) { | |
80 | + if (this.listObj[objKeyArr[i]].uid === uid) { | |
81 | + delete this.listObj[objKeyArr[i]] | |
82 | + return | |
83 | + } | |
84 | + } | |
85 | + }, | |
86 | + beforeUpload(file) { | |
87 | + const _self = this | |
88 | + const _URL = window.URL || window.webkitURL | |
89 | + const fileName = file.uid | |
90 | + this.listObj[fileName] = {} | |
91 | + return new Promise((resolve, reject) => { | |
92 | + const img = new Image() | |
93 | + img.src = _URL.createObjectURL(file) | |
94 | + img.onload = function() { | |
95 | + _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height } | |
96 | + } | |
97 | + resolve(true) | |
98 | + }) | |
99 | + } | |
100 | + } | |
101 | +} | |
102 | +</script> | |
103 | + | |
104 | +<style lang="scss" scoped> | |
105 | +.editor-slide-upload { | |
106 | + margin-bottom: 20px; | |
107 | + /deep/ .el-upload--picture-card { | |
108 | + width: 100%; | |
109 | + } | |
110 | +} | |
111 | +</style> | ... | ... |
src/components/Tinymce/dynamicLoadScript.js
... | ... | @@ -0,0 +1,59 @@ |
1 | +let callbacks = [] | |
2 | + | |
3 | +function loadedTinymce() { | |
4 | + // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144 | |
5 | + // check is successfully downloaded script | |
6 | + return window.tinymce | |
7 | +} | |
8 | + | |
9 | +const dynamicLoadScript = (src, callback) => { | |
10 | + const existingScript = document.getElementById(src) | |
11 | + const cb = callback || function() {} | |
12 | + | |
13 | + if (!existingScript) { | |
14 | + const script = document.createElement('script') | |
15 | + script.src = src // src url for the third-party library being loaded. | |
16 | + script.id = src | |
17 | + document.body.appendChild(script) | |
18 | + callbacks.push(cb) | |
19 | + const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd | |
20 | + onEnd(script) | |
21 | + } | |
22 | + | |
23 | + if (existingScript && cb) { | |
24 | + if (loadedTinymce()) { | |
25 | + cb(null, existingScript) | |
26 | + } else { | |
27 | + callbacks.push(cb) | |
28 | + } | |
29 | + } | |
30 | + | |
31 | + function stdOnEnd(script) { | |
32 | + script.onload = function() { | |
33 | + // this.onload = null here is necessary | |
34 | + // because even IE9 works not like others | |
35 | + this.onerror = this.onload = null | |
36 | + for (const cb of callbacks) { | |
37 | + cb(null, script) | |
38 | + } | |
39 | + callbacks = null | |
40 | + } | |
41 | + script.onerror = function() { | |
42 | + this.onerror = this.onload = null | |
43 | + cb(new Error('Failed to load ' + src), script) | |
44 | + } | |
45 | + } | |
46 | + | |
47 | + function ieOnEnd(script) { | |
48 | + script.onreadystatechange = function() { | |
49 | + if (this.readyState !== 'complete' && this.readyState !== 'loaded') return | |
50 | + this.onreadystatechange = null | |
51 | + for (const cb of callbacks) { | |
52 | + cb(null, script) // there is no way to catch loading errors in IE8 | |
53 | + } | |
54 | + callbacks = null | |
55 | + } | |
56 | + } | |
57 | +} | |
58 | + | |
59 | +export default dynamicLoadScript | ... | ... |
src/components/Tinymce/index.vue
... | ... | @@ -0,0 +1,244 @@ |
1 | +<template> | |
2 | + <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}"> | |
3 | + <textarea :id="tinymceId" class="tinymce-textarea" /> | |
4 | + <div class="editor-custom-btn-container"> | |
5 | + <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" /> | |
6 | + </div> | |
7 | + </div> | |
8 | +</template> | |
9 | + | |
10 | +<script> | |
11 | +/** | |
12 | + * docs: | |
13 | + * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce | |
14 | + */ | |
15 | +import editorImage from './components/EditorImage' | |
16 | +import plugins from './plugins' | |
17 | +import toolbar from './toolbar' | |
18 | +import load from './dynamicLoadScript' | |
19 | + | |
20 | +// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one | |
21 | +const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js' | |
22 | + | |
23 | +export default { | |
24 | + name: 'Tinymce', | |
25 | + components: { editorImage }, | |
26 | + props: { | |
27 | + id: { | |
28 | + type: String, | |
29 | + default: function() { | |
30 | + return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '') | |
31 | + } | |
32 | + }, | |
33 | + value: { | |
34 | + type: String, | |
35 | + default: '' | |
36 | + }, | |
37 | + toolbar: { | |
38 | + type: Array, | |
39 | + required: false, | |
40 | + default() { | |
41 | + return [] | |
42 | + } | |
43 | + }, | |
44 | + menubar: { | |
45 | + type: String, | |
46 | + default: 'file edit insert view format table' | |
47 | + }, | |
48 | + height: { | |
49 | + type: [Number, String], | |
50 | + required: false, | |
51 | + default: 360 | |
52 | + }, | |
53 | + width: { | |
54 | + type: [Number, String], | |
55 | + required: false, | |
56 | + default: 'auto' | |
57 | + } | |
58 | + }, | |
59 | + data() { | |
60 | + return { | |
61 | + hasChange: false, | |
62 | + hasInit: false, | |
63 | + tinymceId: this.id, | |
64 | + fullscreen: false, | |
65 | + languageTypeList: { | |
66 | + 'en': 'en', | |
67 | + 'zh': 'zh_CN', | |
68 | + 'es': 'es_MX', | |
69 | + 'ja': 'ja' | |
70 | + } | |
71 | + } | |
72 | + }, | |
73 | + computed: { | |
74 | + language() { | |
75 | + return this.languageTypeList[this.$store.getters.language] | |
76 | + }, | |
77 | + containerWidth() { | |
78 | + const width = this.width | |
79 | + if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'` | |
80 | + return `${width}px` | |
81 | + } | |
82 | + return width | |
83 | + } | |
84 | + }, | |
85 | + watch: { | |
86 | + value(val) { | |
87 | + if (!this.hasChange && this.hasInit) { | |
88 | + this.$nextTick(() => | |
89 | + window.tinymce.get(this.tinymceId).setContent(val || '')) | |
90 | + } | |
91 | + }, | |
92 | + language() { | |
93 | + this.destroyTinymce() | |
94 | + this.$nextTick(() => this.initTinymce()) | |
95 | + } | |
96 | + }, | |
97 | + mounted() { | |
98 | + this.init() | |
99 | + }, | |
100 | + activated() { | |
101 | + if (window.tinymce) { | |
102 | + this.initTinymce() | |
103 | + } | |
104 | + }, | |
105 | + deactivated() { | |
106 | + this.destroyTinymce() | |
107 | + }, | |
108 | + destroyed() { | |
109 | + this.destroyTinymce() | |
110 | + }, | |
111 | + methods: { | |
112 | + init() { | |
113 | + // dynamic load tinymce from cdn | |
114 | + load(tinymceCDN, (err) => { | |
115 | + if (err) { | |
116 | + this.$message.error(err.message) | |
117 | + return | |
118 | + } | |
119 | + this.initTinymce() | |
120 | + }) | |
121 | + }, | |
122 | + initTinymce() { | |
123 | + const _this = this | |
124 | + window.tinymce.init({ | |
125 | + language: this.language, | |
126 | + selector: `#${this.tinymceId}`, | |
127 | + height: this.height, | |
128 | + body_class: 'panel-body ', | |
129 | + object_resizing: false, | |
130 | + toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, | |
131 | + menubar: this.menubar, | |
132 | + plugins: plugins, | |
133 | + end_container_on_empty_block: true, | |
134 | + powerpaste_word_import: 'clean', | |
135 | + code_dialog_height: 450, | |
136 | + code_dialog_width: 1000, | |
137 | + advlist_bullet_styles: 'square', | |
138 | + advlist_number_styles: 'default', | |
139 | + imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'], | |
140 | + default_link_target: '_blank', | |
141 | + link_title: false, | |
142 | + nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin | |
143 | + init_instance_callback: editor => { | |
144 | + if (_this.value) { | |
145 | + editor.setContent(_this.value) | |
146 | + } | |
147 | + _this.hasInit = true | |
148 | + editor.on('NodeChange Change KeyUp SetContent', () => { | |
149 | + this.hasChange = true | |
150 | + this.$emit('input', editor.getContent()) | |
151 | + }) | |
152 | + }, | |
153 | + setup(editor) { | |
154 | + editor.on('FullscreenStateChanged', (e) => { | |
155 | + _this.fullscreen = e.state | |
156 | + }) | |
157 | + } | |
158 | + // 整合七牛上传 | |
159 | + // images_dataimg_filter(img) { | |
160 | + // setTimeout(() => { | |
161 | + // const $image = $(img); | |
162 | + // $image.removeAttr('width'); | |
163 | + // $image.removeAttr('height'); | |
164 | + // if ($image[0].height && $image[0].width) { | |
165 | + // $image.attr('data-wscntype', 'image'); | |
166 | + // $image.attr('data-wscnh', $image[0].height); | |
167 | + // $image.attr('data-wscnw', $image[0].width); | |
168 | + // $image.addClass('wscnph'); | |
169 | + // } | |
170 | + // }, 0); | |
171 | + // return img | |
172 | + // }, | |
173 | + // images_upload_handler(blobInfo, success, failure, progress) { | |
174 | + // progress(0); | |
175 | + // const token = _this.$store.getters.token; | |
176 | + // getToken(token).then(response => { | |
177 | + // const url = response.data.qiniu_url; | |
178 | + // const formData = new FormData(); | |
179 | + // formData.append('token', response.data.qiniu_token); | |
180 | + // formData.append('key', response.data.qiniu_key); | |
181 | + // formData.append('file', blobInfo.blob(), url); | |
182 | + // upload(formData).then(() => { | |
183 | + // success(url); | |
184 | + // progress(100); | |
185 | + // }) | |
186 | + // }).catch(err => { | |
187 | + // failure('出现未知问题,刷新页面,或者联系程序员') | |
188 | + // console.log(err); | |
189 | + // }); | |
190 | + // }, | |
191 | + }) | |
192 | + }, | |
193 | + destroyTinymce() { | |
194 | + const tinymce = window.tinymce.get(this.tinymceId) | |
195 | + if (this.fullscreen) { | |
196 | + tinymce.execCommand('mceFullScreen') | |
197 | + } | |
198 | + | |
199 | + if (tinymce) { | |
200 | + tinymce.destroy() | |
201 | + } | |
202 | + }, | |
203 | + setContent(value) { | |
204 | + window.tinymce.get(this.tinymceId).setContent(value) | |
205 | + }, | |
206 | + getContent() { | |
207 | + window.tinymce.get(this.tinymceId).getContent() | |
208 | + }, | |
209 | + imageSuccessCBK(arr) { | |
210 | + const _this = this | |
211 | + arr.forEach(v => { | |
212 | + window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`) | |
213 | + }) | |
214 | + } | |
215 | + } | |
216 | +} | |
217 | +</script> | |
218 | + | |
219 | +<style scoped> | |
220 | +.tinymce-container { | |
221 | + position: relative; | |
222 | + line-height: normal; | |
223 | +} | |
224 | +.tinymce-container>>>.mce-fullscreen { | |
225 | + z-index: 10000; | |
226 | +} | |
227 | +.tinymce-textarea { | |
228 | + visibility: hidden; | |
229 | + z-index: -1; | |
230 | +} | |
231 | +.editor-custom-btn-container { | |
232 | + position: absolute; | |
233 | + right: 4px; | |
234 | + top: 4px; | |
235 | + /*z-index: 2005;*/ | |
236 | +} | |
237 | +.fullscreen .editor-custom-btn-container { | |
238 | + z-index: 10000; | |
239 | + position: fixed; | |
240 | +} | |
241 | +.editor-upload-btn { | |
242 | + display: inline-block; | |
243 | +} | |
244 | +</style> | ... | ... |
src/components/Tinymce/plugins.js
... | ... | @@ -0,0 +1,7 @@ |
1 | +// Any plugins you want to use has to be imported | |
2 | +// Detail plugins list see https://www.tinymce.com/docs/plugins/ | |
3 | +// Custom builds see https://www.tinymce.com/download/custom-builds/ | |
4 | + | |
5 | +const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'] | |
6 | + | |
7 | +export default plugins | ... | ... |
src/components/Tinymce/toolbar.js
... | ... | @@ -0,0 +1,6 @@ |
1 | +// Here is a list of the toolbar | |
2 | +// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols | |
3 | + | |
4 | +const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'] | |
5 | + | |
6 | +export default toolbar | ... | ... |
src/components/Upload/SingleImage.vue
... | ... | @@ -0,0 +1,134 @@ |
1 | +<template> | |
2 | + <div class="upload-container"> | |
3 | + <el-upload | |
4 | + :data="dataObj" | |
5 | + :multiple="false" | |
6 | + :show-file-list="false" | |
7 | + :on-success="handleImageSuccess" | |
8 | + class="image-uploader" | |
9 | + drag | |
10 | + action="https://httpbin.org/post" | |
11 | + > | |
12 | + <i class="el-icon-upload" /> | |
13 | + <div class="el-upload__text"> | |
14 | + 将文件拖到此处,或<em>点击上传</em> | |
15 | + </div> | |
16 | + </el-upload> | |
17 | + <div class="image-preview"> | |
18 | + <div v-show="imageUrl.length>1" class="image-preview-wrapper"> | |
19 | + <img :src="imageUrl+'?imageView2/1/w/200/h/200'"> | |
20 | + <div class="image-preview-action"> | |
21 | + <i class="el-icon-delete" @click="rmImage" /> | |
22 | + </div> | |
23 | + </div> | |
24 | + </div> | |
25 | + </div> | |
26 | +</template> | |
27 | + | |
28 | +<script> | |
29 | +import { getToken } from '@/api/qiniu' | |
30 | + | |
31 | +export default { | |
32 | + name: 'SingleImageUpload', | |
33 | + props: { | |
34 | + value: { | |
35 | + type: String, | |
36 | + default: '' | |
37 | + } | |
38 | + }, | |
39 | + data() { | |
40 | + return { | |
41 | + tempUrl: '', | |
42 | + dataObj: { token: '', key: '' } | |
43 | + } | |
44 | + }, | |
45 | + computed: { | |
46 | + imageUrl() { | |
47 | + return this.value | |
48 | + } | |
49 | + }, | |
50 | + methods: { | |
51 | + rmImage() { | |
52 | + this.emitInput('') | |
53 | + }, | |
54 | + emitInput(val) { | |
55 | + this.$emit('input', val) | |
56 | + }, | |
57 | + handleImageSuccess() { | |
58 | + this.emitInput(this.tempUrl) | |
59 | + }, | |
60 | + beforeUpload() { | |
61 | + const _self = this | |
62 | + return new Promise((resolve, reject) => { | |
63 | + getToken().then(response => { | |
64 | + const key = response.data.qiniu_key | |
65 | + const token = response.data.qiniu_token | |
66 | + _self._data.dataObj.token = token | |
67 | + _self._data.dataObj.key = key | |
68 | + this.tempUrl = response.data.qiniu_url | |
69 | + resolve(true) | |
70 | + }).catch(err => { | |
71 | + console.log(err) | |
72 | + reject(false) | |
73 | + }) | |
74 | + }) | |
75 | + } | |
76 | + } | |
77 | +} | |
78 | +</script> | |
79 | + | |
80 | +<style lang="scss" scoped> | |
81 | + @import "~@/styles/mixin.scss"; | |
82 | + .upload-container { | |
83 | + width: 100%; | |
84 | + position: relative; | |
85 | + @include clearfix; | |
86 | + .image-uploader { | |
87 | + width: 60%; | |
88 | + float: left; | |
89 | + } | |
90 | + .image-preview { | |
91 | + width: 200px; | |
92 | + height: 200px; | |
93 | + position: relative; | |
94 | + border: 1px dashed #d9d9d9; | |
95 | + float: left; | |
96 | + margin-left: 50px; | |
97 | + .image-preview-wrapper { | |
98 | + position: relative; | |
99 | + width: 100%; | |
100 | + height: 100%; | |
101 | + img { | |
102 | + width: 100%; | |
103 | + height: 100%; | |
104 | + } | |
105 | + } | |
106 | + .image-preview-action { | |
107 | + position: absolute; | |
108 | + width: 100%; | |
109 | + height: 100%; | |
110 | + left: 0; | |
111 | + top: 0; | |
112 | + cursor: default; | |
113 | + text-align: center; | |
114 | + color: #fff; | |
115 | + opacity: 0; | |
116 | + font-size: 20px; | |
117 | + background-color: rgba(0, 0, 0, .5); | |
118 | + transition: opacity .3s; | |
119 | + cursor: pointer; | |
120 | + text-align: center; | |
121 | + line-height: 200px; | |
122 | + .el-icon-delete { | |
123 | + font-size: 36px; | |
124 | + } | |
125 | + } | |
126 | + &:hover { | |
127 | + .image-preview-action { | |
128 | + opacity: 1; | |
129 | + } | |
130 | + } | |
131 | + } | |
132 | + } | |
133 | + | |
134 | +</style> | ... | ... |
src/components/Upload/SingleImage2.vue
... | ... | @@ -0,0 +1,130 @@ |
1 | +<template> | |
2 | + <div class="singleImageUpload2 upload-container"> | |
3 | + <el-upload | |
4 | + :data="dataObj" | |
5 | + :multiple="false" | |
6 | + :show-file-list="false" | |
7 | + :on-success="handleImageSuccess" | |
8 | + class="image-uploader" | |
9 | + drag | |
10 | + action="https://httpbin.org/post" | |
11 | + > | |
12 | + <i class="el-icon-upload" /> | |
13 | + <div class="el-upload__text"> | |
14 | + Drag或<em>点击上传</em> | |
15 | + </div> | |
16 | + </el-upload> | |
17 | + <div v-show="imageUrl.length>0" class="image-preview"> | |
18 | + <div v-show="imageUrl.length>1" class="image-preview-wrapper"> | |
19 | + <img :src="imageUrl"> | |
20 | + <div class="image-preview-action"> | |
21 | + <i class="el-icon-delete" @click="rmImage" /> | |
22 | + </div> | |
23 | + </div> | |
24 | + </div> | |
25 | + </div> | |
26 | +</template> | |
27 | + | |
28 | +<script> | |
29 | +import { getToken } from '@/api/qiniu' | |
30 | + | |
31 | +export default { | |
32 | + name: 'SingleImageUpload2', | |
33 | + props: { | |
34 | + value: { | |
35 | + type: String, | |
36 | + default: '' | |
37 | + } | |
38 | + }, | |
39 | + data() { | |
40 | + return { | |
41 | + tempUrl: '', | |
42 | + dataObj: { token: '', key: '' } | |
43 | + } | |
44 | + }, | |
45 | + computed: { | |
46 | + imageUrl() { | |
47 | + return this.value | |
48 | + } | |
49 | + }, | |
50 | + methods: { | |
51 | + rmImage() { | |
52 | + this.emitInput('') | |
53 | + }, | |
54 | + emitInput(val) { | |
55 | + this.$emit('input', val) | |
56 | + }, | |
57 | + handleImageSuccess() { | |
58 | + this.emitInput(this.tempUrl) | |
59 | + }, | |
60 | + beforeUpload() { | |
61 | + const _self = this | |
62 | + return new Promise((resolve, reject) => { | |
63 | + getToken().then(response => { | |
64 | + const key = response.data.qiniu_key | |
65 | + const token = response.data.qiniu_token | |
66 | + _self._data.dataObj.token = token | |
67 | + _self._data.dataObj.key = key | |
68 | + this.tempUrl = response.data.qiniu_url | |
69 | + resolve(true) | |
70 | + }).catch(() => { | |
71 | + reject(false) | |
72 | + }) | |
73 | + }) | |
74 | + } | |
75 | + } | |
76 | +} | |
77 | +</script> | |
78 | + | |
79 | +<style lang="scss" scoped> | |
80 | +.upload-container { | |
81 | + width: 100%; | |
82 | + height: 100%; | |
83 | + position: relative; | |
84 | + .image-uploader { | |
85 | + height: 100%; | |
86 | + } | |
87 | + .image-preview { | |
88 | + width: 100%; | |
89 | + height: 100%; | |
90 | + position: absolute; | |
91 | + left: 0px; | |
92 | + top: 0px; | |
93 | + border: 1px dashed #d9d9d9; | |
94 | + .image-preview-wrapper { | |
95 | + position: relative; | |
96 | + width: 100%; | |
97 | + height: 100%; | |
98 | + img { | |
99 | + width: 100%; | |
100 | + height: 100%; | |
101 | + } | |
102 | + } | |
103 | + .image-preview-action { | |
104 | + position: absolute; | |
105 | + width: 100%; | |
106 | + height: 100%; | |
107 | + left: 0; | |
108 | + top: 0; | |
109 | + cursor: default; | |
110 | + text-align: center; | |
111 | + color: #fff; | |
112 | + opacity: 0; | |
113 | + font-size: 20px; | |
114 | + background-color: rgba(0, 0, 0, .5); | |
115 | + transition: opacity .3s; | |
116 | + cursor: pointer; | |
117 | + text-align: center; | |
118 | + line-height: 200px; | |
119 | + .el-icon-delete { | |
120 | + font-size: 36px; | |
121 | + } | |
122 | + } | |
123 | + &:hover { | |
124 | + .image-preview-action { | |
125 | + opacity: 1; | |
126 | + } | |
127 | + } | |
128 | + } | |
129 | +} | |
130 | +</style> | ... | ... |
src/components/Upload/SingleImage3.vue
... | ... | @@ -0,0 +1,157 @@ |
1 | +<template> | |
2 | + <div class="upload-container"> | |
3 | + <el-upload | |
4 | + :data="dataObj" | |
5 | + :multiple="false" | |
6 | + :show-file-list="false" | |
7 | + :on-success="handleImageSuccess" | |
8 | + class="image-uploader" | |
9 | + drag | |
10 | + action="https://httpbin.org/post" | |
11 | + > | |
12 | + <i class="el-icon-upload" /> | |
13 | + <div class="el-upload__text"> | |
14 | + 将文件拖到此处,或<em>点击上传</em> | |
15 | + </div> | |
16 | + </el-upload> | |
17 | + <div class="image-preview image-app-preview"> | |
18 | + <div v-show="imageUrl.length>1" class="image-preview-wrapper"> | |
19 | + <img :src="imageUrl"> | |
20 | + <div class="image-preview-action"> | |
21 | + <i class="el-icon-delete" @click="rmImage" /> | |
22 | + </div> | |
23 | + </div> | |
24 | + </div> | |
25 | + <div class="image-preview"> | |
26 | + <div v-show="imageUrl.length>1" class="image-preview-wrapper"> | |
27 | + <img :src="imageUrl"> | |
28 | + <div class="image-preview-action"> | |
29 | + <i class="el-icon-delete" @click="rmImage" /> | |
30 | + </div> | |
31 | + </div> | |
32 | + </div> | |
33 | + </div> | |
34 | +</template> | |
35 | + | |
36 | +<script> | |
37 | +import { getToken } from '@/api/qiniu' | |
38 | + | |
39 | +export default { | |
40 | + name: 'SingleImageUpload3', | |
41 | + props: { | |
42 | + value: { | |
43 | + type: String, | |
44 | + default: '' | |
45 | + } | |
46 | + }, | |
47 | + data() { | |
48 | + return { | |
49 | + tempUrl: '', | |
50 | + dataObj: { token: '', key: '' } | |
51 | + } | |
52 | + }, | |
53 | + computed: { | |
54 | + imageUrl() { | |
55 | + return this.value | |
56 | + } | |
57 | + }, | |
58 | + methods: { | |
59 | + rmImage() { | |
60 | + this.emitInput('') | |
61 | + }, | |
62 | + emitInput(val) { | |
63 | + this.$emit('input', val) | |
64 | + }, | |
65 | + handleImageSuccess(file) { | |
66 | + this.emitInput(file.files.file) | |
67 | + }, | |
68 | + beforeUpload() { | |
69 | + const _self = this | |
70 | + return new Promise((resolve, reject) => { | |
71 | + getToken().then(response => { | |
72 | + const key = response.data.qiniu_key | |
73 | + const token = response.data.qiniu_token | |
74 | + _self._data.dataObj.token = token | |
75 | + _self._data.dataObj.key = key | |
76 | + this.tempUrl = response.data.qiniu_url | |
77 | + resolve(true) | |
78 | + }).catch(err => { | |
79 | + console.log(err) | |
80 | + reject(false) | |
81 | + }) | |
82 | + }) | |
83 | + } | |
84 | + } | |
85 | +} | |
86 | +</script> | |
87 | + | |
88 | +<style lang="scss" scoped> | |
89 | +@import "~@/styles/mixin.scss"; | |
90 | +.upload-container { | |
91 | + width: 100%; | |
92 | + position: relative; | |
93 | + @include clearfix; | |
94 | + .image-uploader { | |
95 | + width: 35%; | |
96 | + float: left; | |
97 | + } | |
98 | + .image-preview { | |
99 | + width: 200px; | |
100 | + height: 200px; | |
101 | + position: relative; | |
102 | + border: 1px dashed #d9d9d9; | |
103 | + float: left; | |
104 | + margin-left: 50px; | |
105 | + .image-preview-wrapper { | |
106 | + position: relative; | |
107 | + width: 100%; | |
108 | + height: 100%; | |
109 | + img { | |
110 | + width: 100%; | |
111 | + height: 100%; | |
112 | + } | |
113 | + } | |
114 | + .image-preview-action { | |
115 | + position: absolute; | |
116 | + width: 100%; | |
117 | + height: 100%; | |
118 | + left: 0; | |
119 | + top: 0; | |
120 | + cursor: default; | |
121 | + text-align: center; | |
122 | + color: #fff; | |
123 | + opacity: 0; | |
124 | + font-size: 20px; | |
125 | + background-color: rgba(0, 0, 0, .5); | |
126 | + transition: opacity .3s; | |
127 | + cursor: pointer; | |
128 | + text-align: center; | |
129 | + line-height: 200px; | |
130 | + .el-icon-delete { | |
131 | + font-size: 36px; | |
132 | + } | |
133 | + } | |
134 | + &:hover { | |
135 | + .image-preview-action { | |
136 | + opacity: 1; | |
137 | + } | |
138 | + } | |
139 | + } | |
140 | + .image-app-preview { | |
141 | + width: 320px; | |
142 | + height: 180px; | |
143 | + position: relative; | |
144 | + border: 1px dashed #d9d9d9; | |
145 | + float: left; | |
146 | + margin-left: 50px; | |
147 | + .app-fake-conver { | |
148 | + height: 44px; | |
149 | + position: absolute; | |
150 | + width: 100%; // background: rgba(0, 0, 0, .1); | |
151 | + text-align: center; | |
152 | + line-height: 64px; | |
153 | + color: #fff; | |
154 | + } | |
155 | + } | |
156 | +} | |
157 | +</style> | ... | ... |
src/components/UploadExcel/index.vue
... | ... | @@ -0,0 +1,138 @@ |
1 | +<template> | |
2 | + <div> | |
3 | + <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> | |
4 | + <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> | |
5 | + Drop excel file here or | |
6 | + <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload"> | |
7 | + Browse | |
8 | + </el-button> | |
9 | + </div> | |
10 | + </div> | |
11 | +</template> | |
12 | + | |
13 | +<script> | |
14 | +import XLSX from 'xlsx' | |
15 | + | |
16 | +export default { | |
17 | + props: { | |
18 | + beforeUpload: Function, // eslint-disable-line | |
19 | + onSuccess: Function// eslint-disable-line | |
20 | + }, | |
21 | + data() { | |
22 | + return { | |
23 | + loading: false, | |
24 | + excelData: { | |
25 | + header: null, | |
26 | + results: null | |
27 | + } | |
28 | + } | |
29 | + }, | |
30 | + methods: { | |
31 | + generateData({ header, results }) { | |
32 | + this.excelData.header = header | |
33 | + this.excelData.results = results | |
34 | + this.onSuccess && this.onSuccess(this.excelData) | |
35 | + }, | |
36 | + handleDrop(e) { | |
37 | + e.stopPropagation() | |
38 | + e.preventDefault() | |
39 | + if (this.loading) return | |
40 | + const files = e.dataTransfer.files | |
41 | + if (files.length !== 1) { | |
42 | + this.$message.error('Only support uploading one file!') | |
43 | + return | |
44 | + } | |
45 | + const rawFile = files[0] // only use files[0] | |
46 | + | |
47 | + if (!this.isExcel(rawFile)) { | |
48 | + this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files') | |
49 | + return false | |
50 | + } | |
51 | + this.upload(rawFile) | |
52 | + e.stopPropagation() | |
53 | + e.preventDefault() | |
54 | + }, | |
55 | + handleDragover(e) { | |
56 | + e.stopPropagation() | |
57 | + e.preventDefault() | |
58 | + e.dataTransfer.dropEffect = 'copy' | |
59 | + }, | |
60 | + handleUpload() { | |
61 | + this.$refs['excel-upload-input'].click() | |
62 | + }, | |
63 | + handleClick(e) { | |
64 | + const files = e.target.files | |
65 | + const rawFile = files[0] // only use files[0] | |
66 | + if (!rawFile) return | |
67 | + this.upload(rawFile) | |
68 | + }, | |
69 | + upload(rawFile) { | |
70 | + this.$refs['excel-upload-input'].value = null // fix can't select the same excel | |
71 | + | |
72 | + if (!this.beforeUpload) { | |
73 | + this.readerData(rawFile) | |
74 | + return | |
75 | + } | |
76 | + const before = this.beforeUpload(rawFile) | |
77 | + if (before) { | |
78 | + this.readerData(rawFile) | |
79 | + } | |
80 | + }, | |
81 | + readerData(rawFile) { | |
82 | + this.loading = true | |
83 | + return new Promise((resolve, reject) => { | |
84 | + const reader = new FileReader() | |
85 | + reader.onload = e => { | |
86 | + const data = e.target.result | |
87 | + const workbook = XLSX.read(data, { type: 'array' }) | |
88 | + const firstSheetName = workbook.SheetNames[0] | |
89 | + const worksheet = workbook.Sheets[firstSheetName] | |
90 | + const header = this.getHeaderRow(worksheet) | |
91 | + const results = XLSX.utils.sheet_to_json(worksheet) | |
92 | + this.generateData({ header, results }) | |
93 | + this.loading = false | |
94 | + resolve() | |
95 | + } | |
96 | + reader.readAsArrayBuffer(rawFile) | |
97 | + }) | |
98 | + }, | |
99 | + getHeaderRow(sheet) { | |
100 | + const headers = [] | |
101 | + const range = XLSX.utils.decode_range(sheet['!ref']) | |
102 | + let C | |
103 | + const R = range.s.r | |
104 | + /* start in the first row */ | |
105 | + for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */ | |
106 | + const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] | |
107 | + /* find the cell in the first row */ | |
108 | + let hdr = 'UNKNOWN ' + C // <-- replace with your desired default | |
109 | + if (cell && cell.t) hdr = XLSX.utils.format_cell(cell) | |
110 | + headers.push(hdr) | |
111 | + } | |
112 | + return headers | |
113 | + }, | |
114 | + isExcel(file) { | |
115 | + return /\.(xlsx|xls|csv)$/.test(file.name) | |
116 | + } | |
117 | + } | |
118 | +} | |
119 | +</script> | |
120 | + | |
121 | +<style scoped> | |
122 | +.excel-upload-input{ | |
123 | + display: none; | |
124 | + z-index: -9999; | |
125 | +} | |
126 | +.drop{ | |
127 | + border: 2px dashed #bbb; | |
128 | + width: 600px; | |
129 | + height: 160px; | |
130 | + line-height: 160px; | |
131 | + margin: 0 auto; | |
132 | + font-size: 24px; | |
133 | + border-radius: 5px; | |
134 | + text-align: center; | |
135 | + color: #bbb; | |
136 | + position: relative; | |
137 | +} | |
138 | +</style> | ... | ... |
src/directive/clipboard/clipboard.js
... | ... | @@ -0,0 +1,49 @@ |
1 | +// Inspired by https://github.com/Inndy/vue-clipboard2 | |
2 | +const Clipboard = require('clipboard') | |
3 | +if (!Clipboard) { | |
4 | + throw new Error('you should npm install `clipboard` --save at first ') | |
5 | +} | |
6 | + | |
7 | +export default { | |
8 | + bind(el, binding) { | |
9 | + if (binding.arg === 'success') { | |
10 | + el._v_clipboard_success = binding.value | |
11 | + } else if (binding.arg === 'error') { | |
12 | + el._v_clipboard_error = binding.value | |
13 | + } else { | |
14 | + const clipboard = new Clipboard(el, { | |
15 | + text() { return binding.value }, | |
16 | + action() { return binding.arg === 'cut' ? 'cut' : 'copy' } | |
17 | + }) | |
18 | + clipboard.on('success', e => { | |
19 | + const callback = el._v_clipboard_success | |
20 | + callback && callback(e) // eslint-disable-line | |
21 | + }) | |
22 | + clipboard.on('error', e => { | |
23 | + const callback = el._v_clipboard_error | |
24 | + callback && callback(e) // eslint-disable-line | |
25 | + }) | |
26 | + el._v_clipboard = clipboard | |
27 | + } | |
28 | + }, | |
29 | + update(el, binding) { | |
30 | + if (binding.arg === 'success') { | |
31 | + el._v_clipboard_success = binding.value | |
32 | + } else if (binding.arg === 'error') { | |
33 | + el._v_clipboard_error = binding.value | |
34 | + } else { | |
35 | + el._v_clipboard.text = function() { return binding.value } | |
36 | + el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' } | |
37 | + } | |
38 | + }, | |
39 | + unbind(el, binding) { | |
40 | + if (binding.arg === 'success') { | |
41 | + delete el._v_clipboard_success | |
42 | + } else if (binding.arg === 'error') { | |
43 | + delete el._v_clipboard_error | |
44 | + } else { | |
45 | + el._v_clipboard.destroy() | |
46 | + delete el._v_clipboard | |
47 | + } | |
48 | + } | |
49 | +} | ... | ... |
src/directive/clipboard/index.js
... | ... | @@ -0,0 +1,13 @@ |
1 | +import Clipboard from './clipboard' | |
2 | + | |
3 | +const install = function(Vue) { | |
4 | + Vue.directive('Clipboard', Clipboard) | |
5 | +} | |
6 | + | |
7 | +if (window.Vue) { | |
8 | + window.clipboard = Clipboard | |
9 | + Vue.use(install); // eslint-disable-line | |
10 | +} | |
11 | + | |
12 | +Clipboard.install = install | |
13 | +export default Clipboard | ... | ... |
src/directive/el-drag-dialog/drag.js
... | ... | @@ -0,0 +1,77 @@ |
1 | +export default { | |
2 | + bind(el, binding, vnode) { | |
3 | + const dialogHeaderEl = el.querySelector('.el-dialog__header') | |
4 | + const dragDom = el.querySelector('.el-dialog') | |
5 | + dialogHeaderEl.style.cssText += ';cursor:move;' | |
6 | + dragDom.style.cssText += ';top:0px;' | |
7 | + | |
8 | + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); | |
9 | + const getStyle = (function() { | |
10 | + if (window.document.currentStyle) { | |
11 | + return (dom, attr) => dom.currentStyle[attr] | |
12 | + } else { | |
13 | + return (dom, attr) => getComputedStyle(dom, false)[attr] | |
14 | + } | |
15 | + })() | |
16 | + | |
17 | + dialogHeaderEl.onmousedown = (e) => { | |
18 | + // 鼠标按下,计算当前元素距离可视区的距离 | |
19 | + const disX = e.clientX - dialogHeaderEl.offsetLeft | |
20 | + const disY = e.clientY - dialogHeaderEl.offsetTop | |
21 | + | |
22 | + const dragDomWidth = dragDom.offsetWidth | |
23 | + const dragDomHeight = dragDom.offsetHeight | |
24 | + | |
25 | + const screenWidth = document.body.clientWidth | |
26 | + const screenHeight = document.body.clientHeight | |
27 | + | |
28 | + const minDragDomLeft = dragDom.offsetLeft | |
29 | + const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth | |
30 | + | |
31 | + const minDragDomTop = dragDom.offsetTop | |
32 | + const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight | |
33 | + | |
34 | + // 获取到的值带px 正则匹配替换 | |
35 | + let styL = getStyle(dragDom, 'left') | |
36 | + let styT = getStyle(dragDom, 'top') | |
37 | + | |
38 | + if (styL.includes('%')) { | |
39 | + styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) | |
40 | + styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) | |
41 | + } else { | |
42 | + styL = +styL.replace(/\px/g, '') | |
43 | + styT = +styT.replace(/\px/g, '') | |
44 | + } | |
45 | + | |
46 | + document.onmousemove = function(e) { | |
47 | + // 通过事件委托,计算移动的距离 | |
48 | + let left = e.clientX - disX | |
49 | + let top = e.clientY - disY | |
50 | + | |
51 | + // 边界处理 | |
52 | + if (-(left) > minDragDomLeft) { | |
53 | + left = -minDragDomLeft | |
54 | + } else if (left > maxDragDomLeft) { | |
55 | + left = maxDragDomLeft | |
56 | + } | |
57 | + | |
58 | + if (-(top) > minDragDomTop) { | |
59 | + top = -minDragDomTop | |
60 | + } else if (top > maxDragDomTop) { | |
61 | + top = maxDragDomTop | |
62 | + } | |
63 | + | |
64 | + // 移动当前元素 | |
65 | + dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` | |
66 | + | |
67 | + // emit onDrag event | |
68 | + vnode.child.$emit('dragDialog') | |
69 | + } | |
70 | + | |
71 | + document.onmouseup = function(e) { | |
72 | + document.onmousemove = null | |
73 | + document.onmouseup = null | |
74 | + } | |
75 | + } | |
76 | + } | |
77 | +} | ... | ... |
src/directive/el-drag-dialog/index.js
... | ... | @@ -0,0 +1,13 @@ |
1 | +import drag from './drag' | |
2 | + | |
3 | +const install = function(Vue) { | |
4 | + Vue.directive('el-drag-dialog', drag) | |
5 | +} | |
6 | + | |
7 | +if (window.Vue) { | |
8 | + window['el-drag-dialog'] = drag | |
9 | + Vue.use(install); // eslint-disable-line | |
10 | +} | |
11 | + | |
12 | +drag.install = install | |
13 | +export default drag | ... | ... |
src/directive/el-table/adaptive.js
... | ... | @@ -0,0 +1,41 @@ |
1 | +import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event' | |
2 | + | |
3 | +/** | |
4 | + * How to use | |
5 | + * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table> | |
6 | + * el-table height is must be set | |
7 | + * bottomOffset: 30(default) // The height of the table from the bottom of the page. | |
8 | + */ | |
9 | + | |
10 | +const doResize = (el, binding, vnode) => { | |
11 | + const { componentInstance: $table } = vnode | |
12 | + | |
13 | + const { value } = binding | |
14 | + | |
15 | + if (!$table.height) { | |
16 | + throw new Error(`el-$table must set the height. Such as height='100px'`) | |
17 | + } | |
18 | + const bottomOffset = (value && value.bottomOffset) || 30 | |
19 | + | |
20 | + if (!$table) return | |
21 | + | |
22 | + const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset | |
23 | + $table.layout.setHeight(height) | |
24 | + $table.doLayout() | |
25 | +} | |
26 | + | |
27 | +export default { | |
28 | + bind(el, binding, vnode) { | |
29 | + el.resizeListener = () => { | |
30 | + doResize(el, binding, vnode) | |
31 | + } | |
32 | + // parameter 1 is must be "Element" type | |
33 | + addResizeListener(window.document.body, el.resizeListener) | |
34 | + }, | |
35 | + inserted(el, binding, vnode) { | |
36 | + doResize(el, binding, vnode) | |
37 | + }, | |
38 | + unbind(el) { | |
39 | + removeResizeListener(window.document.body, el.resizeListener) | |
40 | + } | |
41 | +} | ... | ... |
src/directive/el-table/index.js
... | ... | @@ -0,0 +1,13 @@ |
1 | +import adaptive from './adaptive' | |
2 | + | |
3 | +const install = function(Vue) { | |
4 | + Vue.directive('el-height-adaptive-table', adaptive) | |
5 | +} | |
6 | + | |
7 | +if (window.Vue) { | |
8 | + window['el-height-adaptive-table'] = adaptive | |
9 | + Vue.use(install); // eslint-disable-line | |
10 | +} | |
11 | + | |
12 | +adaptive.install = install | |
13 | +export default adaptive | ... | ... |
src/directive/permission/index.js
... | ... | @@ -0,0 +1,13 @@ |
1 | +import permission from './permission' | |
2 | + | |
3 | +const install = function(Vue) { | |
4 | + Vue.directive('permission', permission) | |
5 | +} | |
6 | + | |
7 | +if (window.Vue) { | |
8 | + window['permission'] = permission | |
9 | + Vue.use(install); // eslint-disable-line | |
10 | +} | |
11 | + | |
12 | +permission.install = install | |
13 | +export default permission | ... | ... |
src/directive/permission/permission.js
... | ... | @@ -0,0 +1,22 @@ |
1 | +import store from '@/store' | |
2 | + | |
3 | +export default { | |
4 | + inserted(el, binding, vnode) { | |
5 | + const { value } = binding | |
6 | + const roles = store.getters && store.getters.roles | |
7 | + | |
8 | + if (value && value instanceof Array && value.length > 0) { | |
9 | + const permissionRoles = value | |
10 | + | |
11 | + const hasPermission = roles.some(role => { | |
12 | + return permissionRoles.includes(role) | |
13 | + }) | |
14 | + | |
15 | + if (!hasPermission) { | |
16 | + el.parentNode && el.parentNode.removeChild(el) | |
17 | + } | |
18 | + } else { | |
19 | + throw new Error(`need roles! Like v-permission="['admin','editor']"`) | |
20 | + } | |
21 | + } | |
22 | +} | ... | ... |
src/directive/sticky.js
... | ... | @@ -0,0 +1,91 @@ |
1 | +const vueSticky = {} | |
2 | +let listenAction | |
3 | +vueSticky.install = Vue => { | |
4 | + Vue.directive('sticky', { | |
5 | + inserted(el, binding) { | |
6 | + const params = binding.value || {} | |
7 | + const stickyTop = params.stickyTop || 0 | |
8 | + const zIndex = params.zIndex || 1000 | |
9 | + const elStyle = el.style | |
10 | + | |
11 | + elStyle.position = '-webkit-sticky' | |
12 | + elStyle.position = 'sticky' | |
13 | + // if the browser support css sticky(Currently Safari, Firefox and Chrome Canary) | |
14 | + // if (~elStyle.position.indexOf('sticky')) { | |
15 | + // elStyle.top = `${stickyTop}px`; | |
16 | + // elStyle.zIndex = zIndex; | |
17 | + // return | |
18 | + // } | |
19 | + const elHeight = el.getBoundingClientRect().height | |
20 | + const elWidth = el.getBoundingClientRect().width | |
21 | + elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}` | |
22 | + | |
23 | + const parentElm = el.parentNode || document.documentElement | |
24 | + const placeholder = document.createElement('div') | |
25 | + placeholder.style.display = 'none' | |
26 | + placeholder.style.width = `${elWidth}px` | |
27 | + placeholder.style.height = `${elHeight}px` | |
28 | + parentElm.insertBefore(placeholder, el) | |
29 | + | |
30 | + let active = false | |
31 | + | |
32 | + const getScroll = (target, top) => { | |
33 | + const prop = top ? 'pageYOffset' : 'pageXOffset' | |
34 | + const method = top ? 'scrollTop' : 'scrollLeft' | |
35 | + let ret = target[prop] | |
36 | + if (typeof ret !== 'number') { | |
37 | + ret = window.document.documentElement[method] | |
38 | + } | |
39 | + return ret | |
40 | + } | |
41 | + | |
42 | + const sticky = () => { | |
43 | + if (active) { | |
44 | + return | |
45 | + } | |
46 | + if (!elStyle.height) { | |
47 | + elStyle.height = `${el.offsetHeight}px` | |
48 | + } | |
49 | + | |
50 | + elStyle.position = 'fixed' | |
51 | + elStyle.width = `${elWidth}px` | |
52 | + placeholder.style.display = 'inline-block' | |
53 | + active = true | |
54 | + } | |
55 | + | |
56 | + const reset = () => { | |
57 | + if (!active) { | |
58 | + return | |
59 | + } | |
60 | + | |
61 | + elStyle.position = '' | |
62 | + placeholder.style.display = 'none' | |
63 | + active = false | |
64 | + } | |
65 | + | |
66 | + const check = () => { | |
67 | + const scrollTop = getScroll(window, true) | |
68 | + const offsetTop = el.getBoundingClientRect().top | |
69 | + if (offsetTop < stickyTop) { | |
70 | + sticky() | |
71 | + } else { | |
72 | + if (scrollTop < elHeight + stickyTop) { | |
73 | + reset() | |
74 | + } | |
75 | + } | |
76 | + } | |
77 | + listenAction = () => { | |
78 | + check() | |
79 | + } | |
80 | + | |
81 | + window.addEventListener('scroll', listenAction) | |
82 | + }, | |
83 | + | |
84 | + unbind() { | |
85 | + window.removeEventListener('scroll', listenAction) | |
86 | + } | |
87 | + }) | |
88 | +} | |
89 | + | |
90 | +export default vueSticky | |
91 | + | ... | ... |
src/directive/waves/index.js
... | ... | @@ -0,0 +1,13 @@ |
1 | +import waves from './waves' | |
2 | + | |
3 | +const install = function(Vue) { | |
4 | + Vue.directive('waves', waves) | |
5 | +} | |
6 | + | |
7 | +if (window.Vue) { | |
8 | + window.waves = waves | |
9 | + Vue.use(install); // eslint-disable-line | |
10 | +} | |
11 | + | |
12 | +waves.install = install | |
13 | +export default waves | ... | ... |