test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-29 18:57:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update upload

Browse Source
This commit is contained in:
baiyaaaaa 2016-08-21 15:12:56 +08:00
parent 16b58dc1ea
commit ac1bebf266
14 changed files with 3615 additions and 529 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3108
examples/assets/restaurants.json Normal file
View File

File diff suppressed because it is too large Load Diff

79
examples/docs/upload.md
View File

@ -31,21 +31,18 @@
}
</script>
## 基础使用
## Upload 上传
<div class="demo-box">
<el-upload action="http://element.alpha.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
通过点击或者拖拽上传文件
### 点击上传多个文件
::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
```html
<el-upload action="http://element.alpha.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
export default {
methods: {
@ -59,27 +56,23 @@
}
</script>
```
:::
## 拖拽文件上传
### 拖拽上传
<div class="demo-box">
<el-upload
action="http://element.alpha.elenet.me/upload"
type="drag"
:multiple="true"
:on-preview="handlePreview"
:on-remove="handleRemove">
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
可将文件拖入指定区域进行上传。
::: demo 将 `type` 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 `multiple` 属性来控制是否支持多选，`on-preview` 和 `on-remove` 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。
```html
<el-upload
action="http://element.alpha.elenet.me/upload"
type="drag"
:multiple="true"
:on-preview="handlePreview"
:on-remove="handleRemove">
:on-remove="handleRemove"
>
<i class="el-icon-cloud"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
@ -95,23 +88,13 @@
}
</script>
```
:::
## 图片缩略图模式
### 上传单个图片
上传文件类型限制为只能上传图片，并可展示本地缩略图，该模式暂不支持多选
<div class="demo-box">
<el-upload
action="http://element.alpha.elenet.me/upload"
type="drag"
:thumbnail-mode="true"
:on-preview="handlePreview"
:on-remove="handleRemove"
>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
专门针对图片类型文件的上传，上传后在原位置显示缩略图。
::: demo `thumbnail-mode` 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。
```html
<el-upload
action="http://element.alpha.elenet.me/upload"
@ -120,6 +103,8 @@
:on-preview="handlePreview"
:on-remove="handleRemove"
>
<i class="el-icon-cloud"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
@ -135,20 +120,22 @@
}
</script>
```
:::
### Upload Attribute
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| action | 必选参数, 上传的地址 | string | | |
| headers | 可选参数, 设置上传的请求头部 | object | | |
| multiple | 可选参数, 是否支持多选文件 | boolean | | |
| file | 可选参数, 上传的文件字段名 | string | | file |
| withCredentials | 支持发送 cooking 凭证信息 | boolean | | false |
| showUploadList | 是否显示已上传文件列表 | boolean | | true |
| action | 必选参数, 上传的地址 | string | - | — |
| headers | 可选参数, 设置上传的请求头部 | object | — | — |
| multiple | 可选参数, 是否支持多选文件 | boolean | — | — |
| file | 可选参数, 上传的文件字段名 | string | — | file |
| with-credentials | 支持发送 cooking 凭证信息 | boolean | — | false |
| show-uploadList | 是否显示已上传文件列表 | boolean | — | true |
| type | 上传控件类型 | string | select,drag | select |
| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string | | |
| onPreview | 可选参数, 点击已上传的文件链接时的钩子 | function(file) | | |
| onRemove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | | |
| beforeUpload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | | |
| thumbnailMode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | | false |
| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string | — | — |
| on-preview | 可选参数, 点击已上传的文件链接时的钩子 | function(file) | — | — |
| on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
| before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
| thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
| type | 上传控件类型 | string | select,drag | select |

2
examples/icon.json
View File

@ -1 +1 @@
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-off","star-on"]
["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","cloud","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload","view"]

BIN
packages/theme-default/src/fonts/element-icons.eot Normal file
View File

Binary file not shown.

184
packages/theme-default/src/fonts/element-icons.svg Executable file → Normal file
View File

@ -1,46 +1,146 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<metadata>
Created by FontForge 20120731 at Mon Aug 29 11:19:01 2016
By admin
</metadata>
<defs>
<font id="element-icons" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="share" d="M877.398 223.321c18.001-7.641 33.787-18.278 47.4-31.925 13.594-13.666 24.187-29.515 31.8-47.586 7.595-18.072 11.4-37.553 11.4-58.428 0-20.894-3.806-40.357-11.4-58.428-7.612-18.072-18.206-33.939-31.8-47.586-13.613-13.666-29.4-24.301-47.4-31.925-18.001-7.641-37.406-11.445-58.2-11.445-20.813 0-40.2 3.802-58.2 11.445-18.001 7.625-33.806 18.258-47.4 31.925-13.613 13.647-24.206 29.515-31.8 47.586-7.612 18.072-11.4 37.534-11.4 58.428v9.035c0 2.806 0.395 5.421 1.201 7.831 0 3.2 0.187 6.211 0.6 9.035 0.395 2.806 0.994 5.421 1.8 7.831l-364.799 213.233c-7.2-6.438-14.606-12.254-22.2-17.468-7.612-5.232-15.806-9.45-24.6-12.649-8.813-4.029-18.001-6.832-27.601-8.434-9.6-1.619-19.611-2.409-30.001-2.409-20.813 0-40.613 4.009-59.4 12.047-18.805 8.018-35.006 18.862-48.6 32.528-14.4 14.456-25.613 30.909-33.6 49.394-8.006 18.466-12 38.55-12 60.235 0 20.875 3.994 40.753 12 59.633 7.987 18.862 19.2 35.124 33.6 48.79 13.593 14.456 29.793 25.694 48.6 33.732 18.788 8.018 38.587 12.047 59.4 12.047 10.387 0 20.401-1.017 30.001-3.012 9.6-2.013 18.788-5.026 27.601-9.035 8.794-3.219 16.987-7.435 24.6-12.649 7.595-5.232 15-11.050 22.2-17.468l361.2 212.027c-0.806 2.409-1.406 5.215-1.8 8.434-0.412 3.2-1.013 6.025-1.8 8.434 0 3.2-0.206 6.419-0.6 9.638-0.412 3.2-0.6 6.419-0.6 9.638 0 20.875 3.994 40.753 12 59.633 7.987 18.862 19.2 35.124 33.6 48.79 13.594 13.647 29.793 24.696 48.6 33.129 18.788 8.434 38.587 12.649 59.4 12.649 20.794 0 40.593-4.216 59.4-12.649 18.788-8.434 34.987-19.482 48.6-33.129 14.4-13.666 25.594-29.93 33.6-48.79 7.987-18.879 12-38.758 12-59.633 0-21.685-4.013-41.977-12-60.837-8.006-18.879-19.2-35.144-33.6-48.79-13.613-13.666-29.813-24.507-48.6-32.528-18.805-8.038-38.606-12.047-59.4-12.047-10.406 0-20.401 0.79-30.001 2.409-9.6 1.6-18.805 4.406-27.601 8.434-8.813 3.2-17.006 7.416-24.6 12.649-7.612 5.215-15 11.030-22.2 17.468l-361.197-210.824c0.787-3.219 1.387-6.231 1.8-9.035 0.395-2.823 0.994-5.836 1.8-9.035 0-3.219 0.187-6.231 0.6-9.035 0.395-2.823 0.6-5.836 0.6-9.035 0-3.219-0.206-6.438-0.6-9.638-0.412-3.219-0.6-6.438-0.6-9.638-0.806-2.409-1.406-5.232-1.8-8.434-0.412-3.219-1.013-6.025-1.8-8.434l364.799-213.233c6.394 5.609 13.593 10.844 21.6 15.662 7.987 4.819 15.994 9.224 24 13.253 8.793 3.2 17.794 5.609 27 7.228 9.188 1.599 18.6 2.408 28.2 2.408 20.792-0.001 40.199-3.823 58.199-11.446z" />
<glyph unicode="&#xe901;" glyph-name="setting" d="M1020.132 517.658c-3.985 21.83-25.433 44.119-47.819 48.945l-16.643 3.791c-39.146 11.604-73.838 36.996-95.989 74.336-22.034 37.57-27.308 80.31-17.698 119.374v0l5.274 15.396c6.68 21.255-1.992 50.553-19.456 65.145 0 0-15.705 12.983-59.773 37.915-44.185 24.817-63.172 31.711-63.172 31.711-21.448 7.698-51.569 0.345-67.274-15.97l-11.603-12.179c-29.652-27.574-69.618-44.234-113.804-44.234s-84.503 16.889-114.155 44.579l-11.251 11.834c-15.471 16.315-45.709 23.553-67.274 15.97 0 0-19.221-6.894-63.407-31.711-44.185-25.162-59.656-38.145-59.656-38.145-17.463-14.362-26.136-43.43-19.456-64.915l4.805-15.511c9.376-39.179 4.454-81.689-17.698-119.259s-57.195-63.191-96.575-74.566l-16.057-3.562c-22.034-4.94-43.717-27-47.819-48.945 0 0-3.633-19.647-3.633-69.625s3.633-69.625 3.633-69.625c3.985-22.060 25.433-44.119 47.819-48.945l15.705-3.562c39.38-11.374 74.658-36.996 96.692-74.796 22.034-37.57 27.308-80.31 17.698-119.374v0l-4.571-15.166c-6.68-21.255 1.992-50.553 19.456-65.145 0 0 15.705-12.983 59.773-37.915 44.185-24.932 63.172-31.711 63.172-31.711 21.448-7.698 51.569-0.345 67.274 15.97l11.017 11.604c29.887 27.689 70.087 44.694 114.39 44.694s84.738-17.119 114.39-44.808v0l11.017-11.604c15.471-16.315 45.709-23.553 67.274-15.97 0 0 19.221 6.894 63.407 31.711 44.185 24.932 59.656 37.915 59.656 37.915 17.463 14.362 26.136 43.659 19.456 65.145l-4.805 15.74c-9.376 38.949-4.454 81.459 17.698 118.8 22.034 37.57 57.429 63.306 96.692 74.796v0l15.705 3.562c22.034 4.94 43.717 27 47.819 48.945 0 0 3.633 19.647 3.633 69.625-0.234 49.979-3.868 69.74-3.868 69.74v0 0 0zM512.176 247.888c-112.632 0-204.167 89.502-204.167 200.144 0 110.413 91.301 199.914 204.167 199.914 112.632 0 204.167-89.502 204.167-200.144-0.234-110.413-91.535-199.914-204.167-199.914v0 0 0z" />
<glyph unicode="&#xe902;" glyph-name="circle-cross" d="M512-64c-70.564 0-137.025 13.333-199.385 40s-116.718 63.179-163.077 109.538c-46.359 46.359-82.872 100.718-109.538 163.077s-40 128.82-40 199.385c0 70.564 13.333 137.025 40 199.385s63.179 116.718 109.538 163.077c46.359 46.359 100.718 82.872 163.077 109.539s128.82 40 199.385 40c70.564 0 137.025-13.333 199.385-40s116.718-63.179 163.077-109.539c46.359-46.359 82.872-100.718 109.539-163.077s40-128.82 40-199.385c0-70.564-13.333-137.025-40-199.385s-63.179-116.718-109.539-163.077c-46.359-46.359-100.718-82.872-163.077-109.538s-128.82-40-199.385-40v0zM747.077 596.923c4.923 4.923 7.385 10.872 7.385 17.846s-2.461 12.923-7.385 17.846l-52.923 51.692c-4.923 4.923-10.667 7.385-17.231 7.385s-12.308-2.462-17.231-7.385l-147.692-147.692-148.923 147.692c-4.923 4.923-10.667 7.385-17.231 7.385s-12.308-2.462-17.231-7.385l-52.923-51.692c-4.103-4.923-6.154-10.872-6.154-17.846s2.051-12.923 6.154-17.846l148.923-147.692-148.923-147.692c-4.103-4.923-6.154-10.872-6.154-17.846s2.051-12.923 6.154-17.846l52.923-51.692c4.923-4.923 10.667-7.385 17.231-7.385s12.308 2.462 17.231 7.385l148.923 147.692 147.692-147.692c4.923-4.923 10.667-7.385 17.231-7.385s12.308 2.462 17.231 7.385l52.923 51.692c4.923 4.923 7.385 10.872 7.385 17.846s-2.461 12.923-7.385 17.846l-148.923 147.692 148.923 147.692z" />
<glyph unicode="&#xe903;" glyph-name="warning" d="M512 960c-70.564 0-137.025-13.333-199.385-40s-116.718-63.179-163.077-109.539c-46.359-46.359-82.872-100.718-109.538-163.077s-40-128.82-40-199.385c0-70.564 13.333-137.025 40-199.385s63.179-116.718 109.538-163.077c46.359-46.359 100.718-82.872 163.077-109.538s128.82-40 199.385-40c70.564 0 137.025 13.333 199.385 40s116.718 63.179 163.077 109.538c46.359 46.359 82.872 100.718 109.539 163.077s40 128.82 40 199.385c0 70.564-13.333 137.025-40 199.385s-63.179 116.718-109.539 163.077c-46.359 46.359-100.718 82.872-163.077 109.539s-128.82 40-199.385 40v0zM512 157.538c-16.41 0-30.359 5.744-41.846 17.231s-17.231 25.436-17.231 41.846c0 16.41 5.744 30.359 17.231 41.846s25.436 17.231 41.846 17.231c16.41 0 30.359-5.744 41.846-17.231s17.231-25.436 17.231-41.846c0-16.41-5.744-30.359-17.231-41.846s-25.436-17.231-41.846-17.231v0zM571.077 413.538c0-16.41-5.744-30.359-17.231-41.846s-25.436-17.231-41.846-17.231c-16.41 0-30.359 5.744-41.846 17.231s-17.231 25.436-17.231 41.846v275.692c0 16.41 5.744 30.359 17.231 41.846s25.436 17.231 41.846 17.231c16.41 0 30.359-5.744 41.846-17.231s17.231-25.436 17.231-41.846v-275.692z" />
<glyph unicode="&#xe904;" glyph-name="information" d="M512-64c-70.564 0-137.025 13.333-199.385 40s-116.718 63.179-163.077 109.539c-46.359 46.359-82.872 100.718-109.538 163.077s-40 128.82-40 199.385c0 70.564 13.333 137.025 40 199.385s63.179 116.718 109.538 163.077c46.359 46.359 100.718 82.872 163.077 109.538s128.82 40 199.385 40c70.564 0 137.025-13.333 199.385-40s116.718-63.179 163.077-109.538c46.359-46.359 82.872-100.718 109.539-163.077s40-128.82 40-199.385c0-70.564-13.333-137.025-40-199.385s-63.179-116.718-109.539-163.077c-46.359-46.359-100.718-82.872-163.077-109.539s-128.82-40-199.385-40v0zM512 740.571c-20.318 0-37.587-7.111-51.809-21.333s-21.333-31.492-21.333-51.809c0-20.318 7.111-37.587 21.333-51.809s31.492-21.333 51.809-21.333c20.318 0 37.587 7.111 51.809 21.333s21.333 31.492 21.333 51.809c0 20.318-7.111 37.587-21.333 51.809s-31.492 21.333-51.809 21.333v0zM571.077 465.125c0 15.56-5.744 28.787-17.231 39.679s-25.436 16.338-41.846 16.338c-16.41 0-30.359-5.446-41.846-16.338s-17.231-24.119-17.231-39.679v-261.415c0-15.56 5.744-28.787 17.231-39.679s25.436-16.338 41.846-16.338c16.41 0 30.359 5.446 41.846 16.338s17.231 24.119 17.231 39.679v261.415z" />
<glyph unicode="&#xe905;" glyph-name="circle-check" d="M512 960c-70.564 0-137.025-13.333-199.385-40s-116.718-63.179-163.077-109.539c-46.359-46.359-82.872-100.718-109.538-163.077s-40-128.82-40-199.385c0-70.564 13.333-137.025 40-199.385s63.179-116.718 109.538-163.077c46.359-46.359 100.718-82.872 163.077-109.538s128.82-40 199.385-40c70.564 0 137.025 13.333 199.385 40s116.718 63.179 163.077 109.538c46.359 46.359 82.872 100.718 109.539 163.077s40 128.82 40 199.385c0 70.564-13.333 137.025-40 199.385s-63.179 116.718-109.539 163.077c-46.359 46.359-100.718 82.872-163.077 109.539s-128.82 40-199.385 40v0zM797.538 561.231l-372.923-372.923c-4.923-4.923-10.667-7.385-17.231-7.385s-12.308 2.461-17.231 7.385l-7.385 7.385-205.539 206.769c-4.923 4.923-7.385 10.667-7.385 17.231s2.462 12.308 7.385 17.231l50.461 50.462c4.923 4.923 10.667 7.385 17.231 7.385s12.308-2.462 17.231-7.385l145.231-146.461 305.231 305.231c4.923 4.923 10.667 7.384 17.231 7.384s12.308-2.461 17.231-7.384l50.461-50.462c4.923-4.923 7.385-10.667 7.385-17.231s-2.462-12.308-7.385-17.231v0z" />
<glyph unicode="&#xe906;" glyph-name="delete" d="M641.531 770.219v125.781c0 35.2-23.953 64-56.445 64h-136.469c-32.492 0-66.070-28.8-66.070-64v-125.781h-203.347c7.877 0-51.2-12.885-51.2-66.219 0-35.2 26.585-64 59.077-64h649.846c32.492 0 59.077 28.8 59.077 64 0 53.333-59.077 66.219-59.077 66.219h-195.392zM448 768v64c0 44.578 28.406 64 64 64 36.406 0 64-19.656 64-64v-64h-128zM320-64h384c70.4 0 128 57.6 128 128v512h-640v-512c0-70.4 57.6-128 128-128zM643.765 419.556c0 15.644 11.859 28.444 26.353 28.444s26.353-12.8 26.353-28.444v-341.333c0-15.644-11.859-28.444-26.353-28.444s-26.353 12.8-26.353 28.444v341.333zM485.647 419.556c0 15.644 11.859 28.444 26.353 28.444s26.353-12.8 26.353-28.444v-341.333c0-15.644-11.859-28.444-26.353-28.444s-26.353 12.8-26.353 28.444v341.333zM327.529 419.556c0 15.644 11.859 28.444 26.353 28.444s26.353-12.8 26.353-28.444v-341.333c0-15.644-11.859-28.444-26.353-28.444s-26.353 12.8-26.353 28.444v341.333z" />
<glyph unicode="&#xe907;" glyph-name="d-arrow-left" d="M5.61 424.22c-10.037 24.359-6.751 54.162 11.024 73.751l402.97 444.579c21.974 24.229 56.615 23.078 77.424-2.515 20.77-25.631 19.818-66.037-2.156-90.31l-361.568-398.974 360.142-404.895c21.757-24.487 22.415-64.894 1.427-90.31-10.733-13.033-25.076-19.545-39.425-19.545-13.686 0-27.376 5.958-37.998 17.881l-399.317 448.926c-0.768 0.889-1.059 2.126-1.827 3.059-0.586 0.645-1.203 1.111-1.787 1.794-3.104 3.788-4.747 8.428-6.863 12.774-0.583 1.32-1.533 2.424-2.044 3.787zM517.61 424.22c-10.037 24.359-6.751 54.162 11.024 73.751l402.97 444.579c21.974 24.229 56.615 23.078 77.424-2.515 20.77-25.631 19.818-66.037-2.156-90.31l-361.568-398.974 360.142-404.895c21.757-24.487 22.415-64.894 1.427-90.31-10.733-13.033-25.076-19.545-39.425-19.545-13.686 0-27.376 5.958-37.998 17.881l-399.317 448.926c-0.768 0.889-1.059 2.126-1.827 3.059-0.586 0.645-1.203 1.111-1.787 1.794-3.104 3.788-4.747 8.428-6.863 12.774-0.583 1.32-1.533 2.424-2.044 3.787z" />
<glyph unicode="&#xe908;" glyph-name="d-arrow-right" d="M1018.39 424.22c10.037 24.359 6.751 54.162-11.024 73.751l-402.97 444.579c-21.974 24.229-56.615 23.078-77.424-2.515-20.77-25.631-19.818-66.037 2.156-90.31l361.568-398.974-360.142-404.895c-21.757-24.487-22.415-64.894-1.427-90.31 10.733-13.033 25.076-19.545 39.425-19.545 13.686 0 27.376 5.958 37.998 17.881l399.317 448.926c0.768 0.889 1.059 2.126 1.827 3.059 0.586 0.645 1.203 1.111 1.787 1.794 3.104 3.788 4.747 8.428 6.863 12.774 0.583 1.32 1.533 2.424 2.044 3.787zM506.39 424.22c10.037 24.359 6.751 54.162-11.024 73.751l-402.97 444.579c-21.974 24.229-56.615 23.078-77.424-2.515-20.77-25.631-19.818-66.037 2.156-90.31l361.568-398.974-360.142-404.895c-21.757-24.487-22.415-64.894-1.427-90.31 10.733-13.033 25.076-19.545 39.425-19.545 13.686 0 27.376 5.958 37.998 17.881l399.317 448.926c0.768 0.889 1.059 2.126 1.827 3.059 0.586 0.645 1.203 1.111 1.787 1.794 3.104 3.788 4.747 8.428 6.863 12.774 0.583 1.32 1.533 2.424 2.044 3.787z" />
<glyph unicode="&#xe909;" glyph-name="picture" d="M146.714 874.667c-81.028 0-146.714-65.543-146.714-146.693v-559.947c0-81.016 65.614-146.693 146.714-146.693h730.572c81.028 0 146.714 65.543 146.714 146.693v559.947c0 81.016-65.614 146.693-146.714 146.693h-730.572zM743.124 494.961c0 0-11.661 22.216-52.655 22.216-46.512 0-60.496-21.529-60.496-21.529l-175.921-278.521c0 0-9.57-18.661-33.046-18.661-24.574 0-36.311 18.661-36.311 18.661l-92.512 108.458c0 0-23.705 32.196-54.506 32.196-30.678 0-56.159-35.626-56.159-35.626l-71.803-87.488v460.294c0 40.339 32.537 73.039 72.819 73.039h658.933c40.217 0 72.819-32.661 72.819-73.449v-424.329l-171.162 224.739zM475.429 554.688c0-58.942-49.109-106.688-109.697-106.688-60.586 0-109.732 47.784-109.732 106.688 0 58.863 49.147 106.646 109.732 106.646 60.587-0.036 109.697-47.782 109.697-106.646v0 0z" />
<glyph unicode="&#xe90a;" glyph-name="cloud" d="M565.493 64l213.97 0.114c135.74 4.060 244.537 115.924 244.537 253.326 0 139.971-112.904 253.44-252.179 253.44-2.596 0-5.182-0.039-7.759-0.118 0.078 2.59 0.117 5.189 0.117 7.798 0 139.971-112.904 253.44-252.179 253.44s-252.179-113.469-252.179-253.44c0-2.609 0.039-5.208 0.117-7.798-2.577 0.078-5.163 0.118-7.759 0.118-139.275 0-252.179-113.469-252.179-253.44 0-137.402 108.798-249.266 244.537-253.326v-0.114h229.254v171.675h-90.21c-25.518 0-34.812 17.285-20.819 38.607l140.064 213.426c8.986 13.693 24.345 14.152 33.632 0l140.064-213.426c13.938-21.238 4.672-38.607-20.819-38.607h-90.21v-171.675z" />
<glyph unicode="&#xe90b;" glyph-name="menu" d="M358.4 410.764h-244.364c-62.836 0-114.036-51.2-114.036-114.036v-244.364c0-65.164 51.2-116.364 114.036-116.364h244.364c62.836 0 114.036 51.2 114.036 114.036v244.364c2.327 65.164-48.873 116.364-114.036 116.364v0zM358.4 960h-244.364c-62.836 0-114.036-51.2-114.036-114.036v-244.364c0-62.836 51.2-114.036 114.036-114.036h244.364c62.836 0 114.036 51.2 114.036 114.036v244.364c2.327 62.836-48.873 114.036-114.036 114.036v0zM909.964 410.764h-244.364c-62.836 0-114.036-51.2-114.036-114.036v-244.364c0-62.836 51.2-114.036 114.036-114.036h244.364c62.836 0 114.036 51.2 114.036 114.036v242.036c0 65.164-51.2 116.364-114.036 116.364v0zM909.964 960h-244.364c-62.836 0-114.036-51.2-114.036-114.036v-244.364c0-62.836 51.2-114.036 114.036-114.036h244.364c62.836 0 114.036 51.2 114.036 114.036v244.364c0 62.836-51.2 114.036-114.036 114.036v0z" />
<glyph unicode="&#xe90c;" glyph-name="time" d="M512-64c-282.781 0-512 229.275-512 512.016s229.219 511.984 512 511.984c282.75 0 512-229.243 512-511.984s-229.25-512.016-512-512.016v0zM512 850.286c-222.175 0-402.286-180.104-402.286-402.271s180.11-402.301 402.286-402.301c222.175 0 402.286 180.134 402.286 402.301s-180.109 402.271-402.286 402.271v0zM512.815 380.429c-26.499 0-48 21.5-48 47.999v228.161c0 26.499 21.501 47.999 48 47.999s48-21.5 48-47.999v-180.163h160c26.499 0 48-21.5 48-47.999s-21.499-47.999-48-47.999h-208z" />
<glyph unicode="&#xe90d;" glyph-name="circle-close" d="M521.974 493.004l202.2 202.2c14.296 14.296 37.88 13.889 51.744 0.025 14.282-14.282 14.298-37.422-0.025-51.744l-202.2-202.2 202.2-202.2c14.296-14.296 13.889-37.88 0.025-51.744-14.282-14.282-37.422-14.298-51.744 0.025l-202.2 202.2-202.2-202.2c-14.296-14.296-37.88-13.889-51.744-0.025-14.282 14.282-14.298 37.422 0.025 51.744l202.2 202.2-202.2 202.2c-14.296 14.296-13.889 37.88-0.025 51.744 14.282 14.282 37.422 14.298 51.744-0.025l202.2-202.2zM512-64c282.77 0 512 229.23 512 512s-229.23 512-512 512c-282.77 0-512-229.23-512-512s229.23-512 512-512z" />
<glyph unicode="&#xe90e;" glyph-name="search" d="M591.269 337.673v0c99.974 99.974 99.974 262.064 0 362.039s-262.064 99.974-362.039 0c-99.974-99.974-99.974-262.064 0-362.039s262.064-99.974 362.039 0v0zM649.951 218.651c-150.771-120.755-371.467-111.251-511.231 28.513-149.961 149.961-149.961 393.097 0 543.058s393.097 149.961 543.058 0c129.223-129.223 147.093-327.631 53.611-475.99l202.266-202.266c25.307-25.307 25.735-65.909 0.567-91.076-24.994-24.994-65.050-25.46-91.076 0.567l-197.195 197.195z" />
<glyph unicode="&#xe90f;" glyph-name="arrow-down" d="M488.22 197.61c24.359-10.037 54.162-6.751 73.751 11.024l444.579 402.97c24.229 21.974 23.078 56.615-2.515 77.424-25.631 20.77-66.037 19.818-90.31-2.156l-398.974-361.568-404.895 360.142c-24.487 21.757-64.894 22.415-90.31 1.427-13.033-10.733-19.545-25.076-19.545-39.425 0-13.686 5.958-27.376 17.881-37.998l448.926-399.317c0.889-0.768 2.126-1.059 3.059-1.827 0.645-0.586 1.111-1.203 1.794-1.787 3.788-3.104 8.428-4.747 12.774-6.863 1.32-0.583 2.424-1.533 3.787-2.044z" />
<glyph unicode="&#xe910;" glyph-name="arrow-up" d="M535.78 698.39c-24.359 10.037-54.162 6.751-73.751-11.024l-444.579-402.97c-24.229-21.974-23.078-56.615 2.515-77.424 25.631-20.77 66.037-19.818 90.31 2.156l398.974 361.568 404.895-360.142c24.487-21.757 64.894-22.415 90.31-1.427 13.033 10.733 19.545 25.076 19.545 39.425 0 13.686-5.958 27.376-17.881 37.998l-448.926 399.317c-0.889 0.768-2.126 1.059-3.059 1.827-0.645 0.586-1.111 1.203-1.794 1.787-3.788 3.104-8.428 4.747-12.774 6.863-1.32 0.583-2.424 1.533-3.787 2.044z" />
<glyph unicode="&#xe911;" glyph-name="arrow-right" d="M762.39 424.22c10.037 24.359 6.751 54.162-11.024 73.751l-402.97 444.579c-21.974 24.229-56.615 23.078-77.424-2.515-20.77-25.631-19.818-66.037 2.156-90.31l361.568-398.974-360.142-404.895c-21.757-24.487-22.415-64.894-1.427-90.31 10.733-13.033 25.076-19.545 39.425-19.545 13.686 0 27.376 5.958 37.998 17.881l399.317 448.926c0.768 0.889 1.059 2.126 1.827 3.059 0.586 0.645 1.203 1.111 1.787 1.794 3.104 3.788 4.747 8.428 6.863 12.774 0.583 1.32 1.533 2.424 2.044 3.787z" />
<glyph unicode="&#xe912;" glyph-name="arrow-left" d="M261.61 424.22c-10.037 24.359-6.751 54.162 11.024 73.751l402.97 444.579c21.974 24.229 56.615 23.078 77.424-2.515 20.77-25.631 19.818-66.037-2.156-90.31l-361.568-398.974 360.142-404.895c21.757-24.487 22.415-64.894 1.427-90.31-10.733-13.033-25.076-19.545-39.425-19.545-13.686 0-27.376 5.958-37.998 17.881l-399.317 448.926c-0.768 0.889-1.059 2.126-1.827 3.059-0.586 0.645-1.203 1.111-1.787 1.794-3.104 3.788-4.747 8.428-6.863 12.774-0.583 1.32-1.533 2.424-2.044 3.787z" />
<glyph unicode="&#xe913;" glyph-name="close" d="M512 548.055l-391.169 391.169c-27.707 27.707-72.473 27.677-100.103 0.048-26.822-26.822-27.608-72.447 0.048-100.103l391.169-391.169-391.169-391.169c-27.708-27.707-27.677-72.474-0.048-100.103 26.821-26.822 72.447-27.608 100.103 0.048l391.169 391.169 391.169-391.169c27.707-27.707 72.473-27.677 100.103-0.048 26.822 26.822 27.608 72.447-0.048 100.103l-391.169 391.169 391.169 391.169c27.708 27.707 27.677 72.474 0.048 100.103-26.821 26.822-72.447 27.608-100.103-0.048l-391.169-391.169z" />
<glyph unicode="&#xe914;" glyph-name="document" d="M440.889 960l-355.556-365.714v-519.027c0-76.594 62.654-139.259 139.227-139.259h574.877c76.574 0 139.229 62.665 139.229 139.259v745.478c0 76.614-62.654 139.263-139.229 139.263h-358.549zM832 117.115c0-39.433-32.618-71.4-70.936-71.4h-498.127c-39.177 0-70.936 31.194-70.936 71.176v404.252h248.982c39.222 0 71.018 31.56 71.018 71.419v257.724h248.982c39.222 0 71.018-32.537 71.018-71.4v-661.771z" />
<glyph unicode="&#xe915;" glyph-name="d-caret" d="M440.191-34.583c34.080-32.082 89.298-32.115 123.414 0l301.306 283.64c68.598 64.576 47.744 116.924-45.528 116.924h-634.971c-93.742 0-113.844-52.613-45.528-116.924l301.306-283.64zM440.191 937.212c34.080 32.082 89.298 32.115 123.414 0l301.306-283.64c68.598-64.576 47.744-116.924-45.528-116.924h-634.971c-93.742 0-113.844 52.613-45.528 116.924l301.306 283.64z" />
<glyph unicode="&#xe916;" glyph-name="date" d="M713.143 846.222h-402.286v113.778h-150.857v-113.778h-50.441c-36.944 0-66.892-30.285-66.892-66.931v-776.361c0-36.965 29.122-66.931 66.005-66.931h806.656c36.454 0 66.005 30.285 66.005 66.931v776.361c0 36.965-29.608 66.931-66.892 66.931h-50.441v113.778h-150.857v-113.778zM160 45.714v572.952h704v-572.952h-704zM554.667 362.667v-256h256v256h-256z" />
<glyph unicode="&#xe917;" glyph-name="message" d="M896.005 874.667h-768.005c-50.498 0-128.001-42.181-128.001-93.344v-18.512c0 0 432.753-371.093 512-371.093 79.257 0 512 369.92 512 369.92v19.685c0 51.163-77.497 93.344-127.995 93.344v0zM0 613.104v-526.128c0 0 47.504-65.643 128.001-65.643h768.005c76.498 0 127.995 65.643 127.995 65.643v527.786c0 0-364.175-333.38-512-333.38-146.284 0-512 331.722-512 331.722v0z" />
<glyph unicode="&#xe918;" glyph-name="loading" d="M0 448c0-282.77 229.23-512 512-512s512 229.23 512 512c0 282.77-229.23 512-512 512-21.752 0-39.385-17.633-39.385-39.385s17.633-39.385 39.385-39.385c239.267 0 433.231-193.964 433.231-433.231s-193.964-433.231-433.231-433.231c-239.267 0-433.231 193.964-433.231 433.231 0 21.752-17.633 39.385-39.385 39.385s-39.385-17.633-39.385-39.385v0z" />
<glyph unicode="&#xe919;" glyph-name="more" d="M118.154 329.846c65.255 0 118.154 52.899 118.154 118.154s-52.899 118.154-118.154 118.154c-65.255 0-118.154-52.899-118.154-118.154s52.899-118.154 118.154-118.154zM512 329.846c65.255 0 118.154 52.899 118.154 118.154s-52.899 118.154-118.154 118.154c-65.255 0-118.154-52.899-118.154-118.154s52.899-118.154 118.154-118.154zM905.846 329.846c65.255 0 118.154 52.899 118.154 118.154s-52.899 118.154-118.154 118.154c-65.255 0-118.154-52.899-118.154-118.154s52.899-118.154 118.154-118.154z" />
<glyph unicode="&#xe91a;" glyph-name="plus" d="M438.857 521.143h-365.214c-40.733 0-73.644-32.747-73.644-73.143 0-40.677 32.971-73.143 73.644-73.143h365.214v-365.214c0-40.733 32.747-73.644 73.143-73.644 40.677 0 73.143 32.971 73.143 73.644v365.214h365.214c40.733 0 73.644 32.747 73.644 73.143 0 40.677-32.971 73.143-73.644 73.143h-365.214v365.214c0 40.733-32.747 73.644-73.143 73.644-40.677 0-73.143-32.971-73.143-73.644v-365.214z" />
<glyph unicode="&#xe91b;" glyph-name="caret-left" d="M293.836 356.5c-36.187 37.19-35.83 97.855 0 134.678l357.276 367.178c71.513 73.495 129.486 49.602 129.486-53.106v-762.822c0-102.825-58.060-126.512-129.486-53.106l-357.276 367.178z" />
<glyph unicode="&#xe91c;" glyph-name="caret-right" d="M753.591 356.5c36.187 37.19 35.83 97.855 0 134.678l-357.276 367.178c-71.513 73.495-129.486 49.602-129.486-53.106v-762.822c0-102.825 58.060-126.512 129.486-53.106l357.276 367.178z" />
<glyph unicode="&#xe91d;" glyph-name="caret-bottom" d="M409.826 240.51c37.19-36.187 97.855-35.83 134.678 0l367.178 357.276c73.495 71.513 49.602 129.486-53.106 129.486h-762.822c-102.825 0-126.512-58.060-53.106-129.486l367.178-357.276z" />
<glyph unicode="&#xe91e;" glyph-name="edit" d="M84.186 243.909l-84.186-307.909 306.998 85.375 484.852 484.209-225.523 219.804-482.141-481.48zM755.070 913.917l-120.787-120.643 226.275-219.096 117.282 117.171c61.546 61.477 61.546 161.098 0 222.569-61.532 61.443-161.309 61.443-222.77 0z" />
<glyph unicode="&#xe91f;" glyph-name="caret-top" d="M409.826 700.266c37.19 36.187 97.855 35.83 134.678 0l367.178-357.276c73.495-71.513 49.602-129.486-53.106-129.486h-762.822c-102.825 0-126.512 58.060-53.106 129.486l367.178 357.276z" />
<glyph unicode="&#xe920;" glyph-name="check" horiz-adv-x="1365" d="M569.942 138.091c-19.251 0-38.43 7.354-53.122 21.979l-300.554 300.519c-29.301 29.327-29.301 76.928 0 106.265 29.373 29.327 76.95 29.327 106.25 0l247.431-247.392 472.796 472.724c29.301 29.412 76.874 29.412 106.25 0 29.301-29.327 29.301-76.856 0-106.182l-525.913-525.94c-14.686-14.631-33.941-21.979-53.122-21.979v0z" />
<glyph unicode="&#xe921;" glyph-name="minus" d="M78.769 526.769h866.462c43.503 0 78.769-35.266 78.769-78.769s-35.266-78.769-78.769-78.769h-866.462c-43.503 0-78.769 35.266-78.769 78.769s35.266 78.769 78.769 78.769z" />
<glyph unicode="&#xe922;" glyph-name="star-off" horiz-adv-x="1084" d="M825.372 4.792c11.209-6.583 20.013-9.895 25.334-10.547-0.549 0.067-4.261-0.73-8.655-3.966-4.353-3.206-6.173-6.426-6.257-6.881 0.983 5.318 0.479 14.719-2.4 27.35l-51.746 227.064c-11.993 52.627 9.088 116.45 49.754 151.782l177.754 154.433c9.58 8.323 15.369 15.433 17.595 20.104-0.315-0.662-0.75-4.594 0.986-9.933 1.72-5.288 4.31-8.134 4.83-8.417-4.693 2.561-13.756 4.994-26.661 6.178l-236.495 21.693c-53.054 4.866-107.438 44.343-128.749 93.284l-93.089 213.779c-5.151 11.829-10.308 19.65-14.256 23.326 0.278-0.259 3.528-1.704 8.715-1.704s8.434 1.445 8.711 1.703c-3.948-3.677-9.105-11.497-14.256-23.325l-93.089-213.779c-21.436-49.228-75.606-88.41-128.749-93.284l-236.495-21.693c-13.088-1.2-22.296-3.654-27.077-6.242 0.519 0.281 3.16 3.163 4.921 8.563 1.781 5.463 1.327 9.479 1.001 10.157 2.276-4.739 8.173-11.955 17.906-20.411l177.754-154.433c40.823-35.468 61.701-99.357 49.754-151.782l-51.746-227.064c-2.867-12.582-3.359-21.928-2.374-27.194-0.091 0.485-1.923 3.707-6.257 6.883-4.342 3.182-7.986 3.963-8.497 3.9 5.298 0.647 14.039 3.93 25.15 10.455l203.441 119.468c46.392 27.243 113.588 27.139 159.802 0l203.441-119.468zM492.632 72.318l-203.441-119.468c-72.368-42.497-115.912-10.592-97.253 71.282l51.746 227.064c6.976 30.612-6.362 71.929-30.53 92.926l-177.754 154.433c-63.231 54.935-46.973 105.661 37.252 113.387l236.495 21.693c31.094 2.852 66.301 28.129 79.024 57.349l93.089 213.779c33.562 77.075 87.973 77.083 121.539 0l93.089-213.779c12.55-28.821 47.897-54.494 79.024-57.349l236.495-21.693c83.804-7.687 100.070-58.811 37.252-113.387l-177.754-154.433c-23.838-20.71-37.603-61.891-30.53-92.926l51.746-227.064c18.656-81.865-24.522-113.993-97.253-71.282l-203.441 119.468c-27.282 16.021-71.137 16.243-98.798 0z" />
<glyph unicode="&#xe923;" glyph-name="star-on" horiz-adv-x="1084" d="M591.429 72.318c-27.282 16.021-71.137 16.243-98.798 0l-203.441-119.468c-72.368-42.497-115.912-10.592-97.253 71.282l51.746 227.064c6.976 30.612-6.362 71.929-30.53 92.926l-177.754 154.433c-63.231 54.935-46.973 105.661 37.252 113.387l236.495 21.693c31.094 2.852 66.301 28.129 79.024 57.349l93.089 213.779c33.562 77.075 87.973 77.083 121.539 0l93.089-213.779c12.55-28.821 47.897-54.494 79.024-57.349l236.495-21.693c83.804-7.687 100.070-58.811 37.252-113.387l-177.754-154.433c-23.838-20.71-37.603-61.891-30.53-92.926l51.746-227.064c18.656-81.865-24.522-113.993-97.253-71.282l-203.441 119.468z" />
</font></defs></svg>
<font id="el-icon" horiz-adv-x="1024" >
<font-face
font-family="el-icon"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
panose-1="2 0 6 3 0 0 0 0 0 0"
ascent="896"
descent="-128"
x-height="792"
bbox="-0.0862045 -128.321 1171 896.053"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E626"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
<glyph glyph-name=".notdef" horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
<glyph glyph-name=".null" horiz-adv-x="0"
/>
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
/>
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="uniE600" unicode="&#xe600;"
d="M488 134q18 -8 39 -5t35 16l445 403q18 16 17 38.5t-20 38.5t-45.5 15t-44.5 -17l-399 -362l-405 360q-19 17 -45 17.5t-45 -15.5q-20 -16 -20 -40q0 -22 18 -38l449 -399h1l2 -2t2 -1q2 -2 12 -7l2 -2h2z" />
<glyph glyph-name="uniE601" unicode="&#xe601;"
d="M262 360q-8 18 -5 39t16 35l403 445q16 18 38.5 17t38.5 -20t15 -45.5t-17 -44.5l-362 -399l360 -405q17 -19 17.5 -45t-15.5 -45q-16 -20 -40 -20q-22 0 -38 18l-399 449v1l-2 2t-1 2q-2 2 -7 12l-2 2v2z" />
<glyph glyph-name="uniE602" unicode="&#xe602;"
d="M762 360q8 18 5 39t-16 35l-403 445q-16 18 -38.5 17t-38.5 -20t-15 -45.5t17 -44.5l362 -399l-360 -405q-17 -19 -17.5 -45t15.5 -45q16 -20 40 -20q22 0 38 18l399 449v1l2 2t1 2q2 2 7 12l2 2v2z" />
<glyph glyph-name="uniE603" unicode="&#xe603;"
d="M536 634q-18 8 -39 5t-35 -16l-445 -403q-18 -16 -17 -38.5t20 -38.5t45.5 -15t44.5 17l399 362l405 -360q19 -17 45 -17.5t45 15.5q20 16 20 40q0 22 -18 38l-449 399h-1l-2 2t-2 1q-2 2 -12 7l-2 2h-2z" />
<glyph glyph-name="uniE604" unicode="&#xe604;" horiz-adv-x="1025"
d="M410 177q28 -28 67.5 -27.5t67.5 27.5l367 357q55 53 39.5 91t-92.5 38h-763q-77 0 -92.5 -38t39.5 -91z" />
<glyph glyph-name="uniE605" unicode="&#xe605;"
d="M294 293q-27 27 -27 67t27 67l357 367q54 55 92 39.5t38 -92.5v-763q0 -77 -38 -92.5t-92 39.5l-357 367v1z" />
<glyph glyph-name="uniE606" unicode="&#xe606;"
d="M754 293q27 27 27 67t-27 67l-358 367q-53 55 -91 39.5t-38 -92.5v-763q0 -77 38 -92.5t91 39.5l358 367v1z" />
<glyph glyph-name="uniE607" unicode="&#xe607;" horiz-adv-x="1025"
d="M410 636q28 27 67.5 27t67.5 -27l367 -357q55 -54 39.5 -91.5t-92.5 -37.5h-763q-77 0 -92.5 37.5t39.5 91.5z" />
<glyph glyph-name="uniE608" unicode="&#xe608;" horiz-adv-x="1376"
d="M570 74q-31 0 -53 22l-301 301q-22 22 -22 53t22 53t53.5 22t53.5 -22l247 -248l473 473q22 22 53 22t53 -22t22 -53t-22 -53l-526 -526q-22 -22 -53 -22z" />
<glyph glyph-name="uniE609" unicode="&#xe609;"
d="M512 896q-106 0 -199.5 -40t-163 -109.5t-109.5 -163t-40 -199.5t40 -199.5t109.5 -163t163 -109.5t199.5 -40t199.5 40t163 109.5t109.5 163t40 199.5t-40 199.5t-109.5 163t-163 109.5t-199.5 40zM798 497l-373 -373q-8 -7 -17.5 -7t-17.5 7l-7 8l-206 206q-7 8 -7 18
t7 17l51 50q7 8 17 8t17 -8l145 -146l306 305q7 8 17 8t17 -8l50 -50q8 -8 8 -17.5t-8 -17.5h1z" />
<glyph glyph-name="uniE60A" unicode="&#xe60a;"
d="M522 429l202 202q11 11 26 11t26 -11q11 -10 11 -25.5t-11 -26.5l-202 -202l202 -202q11 -11 10.5 -26t-10.5 -26q-11 -10 -26 -10t-26 10l-202 203l-202 -203q-11 -10 -26.5 -10t-25.5 10q-11 11 -11 26t11 26l202 202l-202 202q-11 11 -10.5 26.5t10.5 25.5
q11 11 26 11t26 -11zM512 -128q139 0 257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5t-257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5z" />
<glyph glyph-name="uniE60B" unicode="&#xe60b;"
d="M512 -128q-106 0 -199.5 40t-163 109.5t-109.5 163t-40 199.5t40 199.5t109.5 163t163 109.5t199.5 40t199.5 -40t163 -109.5t109.5 -163t40 -199.5t-40 -199.5t-109.5 -163t-163 -109.5t-199.5 -40zM747 533q7 7 7 17.5t-7 18.5l-53 51q-7 8 -17 8t-17 -8l-148 -147
l-149 147q-7 8 -17 8t-17 -8l-53 -51q-6 -8 -6 -18.5t6 -17.5l149 -148l-149 -147q-6 -8 -6 -18.5t6 -17.5l53 -52q7 -7 17 -7t17 7l149 148l148 -148q7 -7 17 -7t17 7l53 52q7 7 7 17.5t-7 18.5l-149 147z" />
<glyph glyph-name="uniE60C" unicode="&#xe60c;"
d="M512 484l-391 391q-21 21 -50.5 21t-49.5 -21q-20 -20 -20.5 -49.5t20.5 -50.5l391 -391l-391 -391q-21 -21 -21 -50.5t21 -49.5q20 -21 49.5 -21t50.5 21l391 391l391 -391q21 -21 50.5 -21t49.5 21q21 20 21 49.5t-21 50.5l-391 391l391 391q21 21 21 50.5t-21 49.5
q-20 20 -49.5 20.5t-50.5 -20.5z" />
<glyph glyph-name="uniE60D" unicode="&#xe60d;"
d="M566 0h213q102 3 173.5 77t71.5 176q0 105 -74 179.5t-178 74.5h-8v8q0 105 -73.5 179t-178 74t-178.5 -74t-74 -179v-8h-8q-104 0 -178 -74.5t-74 -179.5q0 -102 71.5 -176t173.5 -77h229v172h-90q-20 0 -26 11t5 27l140 214q7 10 16.5 10t16.5 -10l141 -214
q10 -16 4 -27t-25 -11h-90v-172z" />
<glyph glyph-name="uniE60E" unicode="&#xe60e;" horiz-adv-x="1025"
d="M6 360q-8 18 -5 39t16 35l403 445q16 18 38.5 17t38.5 -20t15 -45.5t-17 -44.5l-362 -399l360 -405q17 -19 17.5 -45t-15.5 -45q-16 -20 -40 -20q-22 0 -38 18l-399 449v1l-2 2t-1 2q-2 2 -7 12l-2 2v2zM518 360q-8 18 -5 39t16 35l403 445q16 18 38.5 17t38.5 -20
t15 -45.5t-17 -44.5l-362 -399l360 -405q17 -19 17.5 -45t-15.5 -45q-16 -20 -40 -20q-22 0 -38 18l-399 449v1l-2 2t-1 2q-2 2 -7 12l-2 2v2z" />
<glyph glyph-name="uniE60F" unicode="&#xe60f;" horiz-adv-x="1025"
d="M1018 360q8 18 5.5 39t-16.5 35l-403 445q-16 18 -38.5 17t-38.5 -20t-15 -45.5t17 -44.5l362 -399l-360 -405q-17 -19 -17.5 -45t15.5 -45q16 -20 40 -20q22 0 38 18l399 449v1l2 2l2 2l6 12l2 2v2zM506 360q8 18 5.5 39t-16.5 35l-403 445q-16 18 -38.5 17t-38.5 -20
t-15 -45.5t17 -44.5l362 -399l-360 -405q-17 -19 -17.5 -45t15.5 -45q16 -20 40 -20q22 0 38 18l399 449v1l2 2t1 2q2 2 7 12l2 2v2z" />
<glyph glyph-name="uniE610" unicode="&#xe610;"
d="M440 -99q26 -24 62 -24t62 24l300 284q52 48 38.5 82t-83.5 34h-634q-70 0 -83.5 -34t37.5 -82zM440 872q26 24 62 24t62 -24l300 -283q52 -49 38.5 -83t-83.5 -34h-634q-70 0 -83.5 34t37.5 83z" />
<glyph glyph-name="uniE611" unicode="&#xe611;"
d="M713 782h-402v114h-151v-114h-50q-28 0 -47.5 -19.5t-19.5 -47.5v-776q0 -28 19 -47.5t47 -19.5h806q28 0 47 19.5t19 47.5v776q0 28 -19.5 47.5t-46.5 19.5h-51v114h-151v-114zM160 -18v573h704v-573h-704zM555 299v-256h256v256h-256z" />
<glyph glyph-name="uniE612" unicode="&#xe612;"
d="M642 706v126q0 27 -16.5 45.5t-40.5 18.5h-136q-25 0 -45.5 -19t-20.5 -45v-126h-204q0 -1 -2 -2q-49 -22 -49 -64q0 -26 17.5 -45t41.5 -19h650q24 0 41.5 19t17.5 45q0 24 -15 40.5t-29 21.5l-15 4h-195zM448 704v64q0 32 18 48t46 16q29 0 46.5 -16t17.5 -48v-64h-128
zM320 -128h384q53 0 90.5 37.5t37.5 90.5v512h-640v-512q0 -53 37.5 -90.5t90.5 -37.5zM644 356q0 11 7.5 19.5t18.5 8.5t19 -8.5t8 -19.5v-342q0 -12 -8 -20t-19 -8t-18.5 8t-7.5 20v342zM486 356q0 11 7.5 19.5t18.5 8.5t18.5 -8.5t7.5 -19.5v-342q0 -12 -7.5 -20
t-18.5 -8t-18.5 8t-7.5 20v342zM328 356q0 11 7.5 19.5t18.5 8.5t18.5 -8.5t7.5 -19.5v-342q0 -12 -7.5 -20t-18.5 -8t-18.5 8t-7.5 20v342z" />
<glyph glyph-name="uniE613" unicode="&#xe613;"
d="M441 896l-356 -366v-519q0 -57 41 -98t99 -41h574q58 0 99 41t41 98v746q0 57 -41 98t-99 41h-358zM832 53q0 -29 -21 -50t-50 -21h-498q-30 0 -50.5 20.5t-20.5 50.5v404h249q29 0 50 21t21 51v257h249q29 0 50 -21t21 -50v-662z" />
<glyph glyph-name="uniE614" unicode="&#xe614;"
d="M84 180l-84 -308l307 85l485 485l-226 219zM755 850l-121 -121l227 -219l117 117q46 46 46 111.5t-46 111.5t-111.5 46t-111.5 -46z" />
<glyph glyph-name="uniE615" unicode="&#xe615;"
d="M512 -128q-106 0 -199.5 40t-163 109.5t-109.5 163t-40 199.5t40 199.5t109.5 163t163 109.5t199.5 40t199.5 -40t163 -109.5t109.5 -163t40 -199.5t-40 -199.5t-109.5 -163t-163 -109.5t-199.5 -40zM512 677q-31 0 -52 -21.5t-21 -52t21.5 -52t52 -21.5t51.5 21.5t21 52
t-21.5 52t-51.5 21.5zM571 401q0 23 -17 39.5t-42 16.5t-42 -16.5t-17 -39.5v-261q0 -24 17 -40t42 -16t42 16t17 40v261z" />
<glyph glyph-name="uniE616" unicode="&#xe616;"
d="M0 384q0 -139 68.5 -257t186.5 -186.5t257 -68.5t257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5q-16 0 -27.5 -11.5t-11.5 -28t11.5 -28t27.5 -11.5q118 0 217.5 -58t157.5 -157.5t58 -217.5t-58 -217.5t-157.5 -157.5t-217.5 -58t-217.5 58
t-157.5 157.5t-58 217.5q0 16 -11.5 27.5t-28 11.5t-28 -11.5t-11.5 -27.5z" />
<glyph glyph-name="uniE617" unicode="&#xe617;"
d="M358 347h-244q-47 0 -80.5 -33.5t-33.5 -80.5v-245q0 -48 33.5 -82t80.5 -34h244q48 0 81 33.5t33 80.5v244q2 49 -31.5 83t-82.5 34zM358 896h-244q-47 0 -80.5 -33.5t-33.5 -80.5v-244q0 -48 33.5 -81t80.5 -33h244q48 0 81 33t33 81v244q2 47 -31.5 80.5t-82.5 33.5z
M910 347h-244q-48 0 -81 -33.5t-33 -80.5v-245q0 -47 33 -80.5t81 -33.5h244q47 0 80.5 33.5t33.5 80.5v242q0 49 -33.5 83t-80.5 34zM910 896h-244q-48 0 -81 -33.5t-33 -80.5v-244q0 -48 33 -81t81 -33h244q47 0 80.5 33t33.5 81v244q0 47 -33.5 80.5t-80.5 33.5z" />
<glyph glyph-name="uniE618" unicode="&#xe618;"
d="M896 811h-768q-41 0 -84.5 -29t-43.5 -65v-18q18 -15 47.5 -40t108.5 -89t143.5 -113t127.5 -89t85 -40t85 39.5t127.5 88.5t143.5 112.5t108.5 89t47.5 40.5v19q0 36 -43.5 65t-84.5 29v0zM0 549v-526q2 -3 5.5 -7.5t16 -15.5t26.5 -20t35.5 -16t44.5 -7h768
q21 0 42.5 7t36 16.5t26 19t17.5 16.5l6 7v528q-15 -14 -40.5 -36.5t-96 -80t-132.5 -101.5t-132 -80t-111 -36t-109 34.5t-135.5 83t-129 97.5t-100.5 83l-38 34v0z" />
<glyph glyph-name="uniE619" unicode="&#xe619;"
d="M79 463h866q33 0 56 -23t23 -56t-23 -56t-56 -23h-866q-33 0 -56 23t-23 56t23 56t56 23z" />
<glyph glyph-name="uniE61A" unicode="&#xe61a;"
d="M118 266q49 0 83.5 34.5t34.5 83.5t-34.5 83.5t-83.5 34.5t-83.5 -34.5t-34.5 -83.5t34.5 -83.5t83.5 -34.5zM512 266q49 0 83.5 34.5t34.5 83.5t-34.5 83.5t-83.5 34.5t-83.5 -34.5t-34.5 -83.5t34.5 -83.5t83.5 -34.5zM906 266q49 0 83.5 34.5t34.5 83.5t-34.5 83.5
t-83.5 34.5t-83.5 -34.5t-34.5 -83.5t34.5 -83.5t83.5 -34.5z" />
<glyph glyph-name="uniE61B" unicode="&#xe61b;"
d="M147 811q-61 0 -104 -43t-43 -104v-560q0 -61 43 -104t104 -43h730q61 0 104 43t43 104v560q0 61 -43 104t-104 43h-730zM743 431q-1 2 -4 6t-16.5 10t-32.5 6q-20 0 -35 -5.5t-20 -10.5l-5 -5l-176 -279q-10 -19 -33 -19q-11 0 -20 5t-13 9l-3 5l-93 109q-2 3 -7 8.5
t-19.5 14.5t-28 9t-27.5 -9t-21 -18l-7 -9l-72 -87v460q0 30 21 51.5t52 21.5h659q30 0 51 -21.5t21 -51.5v-425zM475 491q0 -45 -32 -76t-77.5 -31t-77.5 31.5t-32 75.5t32 75t77.5 31t77.5 -31t32 -75v0z" />
<glyph glyph-name="uniE61C" unicode="&#xe61c;"
d="M439 457h-365q-31 0 -52.5 -21.5t-21.5 -51.5t21.5 -51.5t52.5 -21.5h365v-365q0 -31 21.5 -52.5t51.5 -21.5t51.5 21.5t21.5 52.5v365h365q31 0 52.5 21.5t21.5 51.5t-21.5 51.5t-52.5 21.5h-365v365q0 31 -21.5 52.5t-51.5 21.5t-51.5 -21.5t-21.5 -52.5v-365z" />
<glyph glyph-name="uniE61D" unicode="&#xe61d;"
d="M591 274q75 75 75 181t-75 181t-181 75t-181 -75t-75 -181t75 -181t181 -75t181 75zM650 155q-75 -60 -167.5 -78t-184 9.5t-159.5 96.5q-74 74 -100 173t0 197.5t99.5 172.5t172.5 100t198 0t173 -100q96 -96 110 -230.5t-57 -245.5l203 -202q19 -19 19 -45.5t-19 -45.5
q-18 -19 -44.5 -19t-46.5 19z" />
<glyph glyph-name="uniE61E" unicode="&#xe61e;" horiz-adv-x="1025"
d="M1020 454q-3 16 -17 30.5t-31 18.5l-16 3q-63 19 -96 75t-18 119l5 15q5 16 -0.5 35.5t-18.5 30.5q-16 13 -60 38q-19 11 -35 18.5t-22 10.5l-6 2q-16 6 -35.5 1.5t-31.5 -17.5l-12 -12q-47 -44 -113.5 -44t-114.5 44l-11 12q-12 13 -31.5 17.5t-35.5 -1.5
q-20 -7 -64 -31q-19 -12 -34 -21.5t-20 -13.5l-5 -4q-13 -10 -19 -29t-1 -36l5 -15q15 -63 -18 -119q-33 -57 -96 -75l-16 -3q-17 -4 -31 -18.5t-17 -30.5q-4 -20 -4 -70q0 -22 1 -39.5t2 -23.5l1 -7q3 -16 17 -30.5t31 -18.5l15 -3q64 -19 97 -75t18 -119l-5 -15
q-5 -16 1 -35.5t19 -30.5q15 -13 59 -38q20 -11 36 -18.5t22 -10.5l6 -2q16 -6 35.5 -1.5t31.5 17.5l11 11q48 45 114 45q67 0 115 -45l11 -11q11 -13 31 -17.5t36 1.5q19 7 63 31q20 11 35 21t20 14l5 3q13 11 18.5 30t0.5 35l-4 16q-16 63 17 119t97 75l16 3q16 4 30 18.5
t18 30.5q3 20 3 70q0 22 -1 39.5t-2 23.5l-1 7v0v0zM512 184q-84 0 -144 58.5t-60 141.5t60 141.5t144.5 58.5t144 -58.5t59.5 -141.5t-59.5 -141.5t-144.5 -58.5v0z" />
<glyph glyph-name="uniE61F" unicode="&#xe61f;"
d="M877 159q27 -11 47.5 -31.5t32 -47.5t11.5 -58.5t-11.5 -58.5t-32 -47.5t-47.5 -32t-58 -11.5t-58 11.5t-47.5 32t-32 47.5t-11.5 58v9q0 5 2 8v9q1 5 2 8l-365 213q-11 -9 -22 -17t-25 -13q-13 -6 -27 -8q-14 -3 -30 -3q-31 0 -59.5 12.5t-48.5 32.5q-22 22 -34 49.5
t-12 60.5q0 31 12 59.5t34 48.5q20 22 48.5 34t59.5 12q15 0 30 -3q14 -3 27 -9q14 -5 25 -13t22 -17l361 212q-1 3 -1 8q-1 5 -2 9q0 5 -0.5 9.5t-0.5 9.5q0 31 12 59.5t33 48.5q21 21 49 33.5t59 12.5t59.5 -12.5t48.5 -33.5q22 -20 34 -48.5t12 -59.5q0 -33 -12 -61
t-34 -49q-20 -20 -48.5 -32t-59.5 -12q-15 0 -29.5 2t-27.5 9q-14 4 -25 12t-22 18l-361 -211q1 -5 1.5 -9.5t1.5 -8.5q0 -5 0.5 -9t0.5 -9t-0.5 -10t-0.5 -10q-1 -3 -2 -8q0 -4 -1 -8l364 -214q10 9 22 16t24 13q13 5 27 7q14 3 28 3q31 0 58 -12z" />
<glyph glyph-name="uniE620" unicode="&#xe620;" horiz-adv-x="1086"
d="M825 -58q15 -9 25 -10q-3 0 -9 -4t-6 -7q2 9 -2 27l-52 226q-9 40 5 82.5t45 68.5l176 154q14 12 18 20q-1 -3 1 -10t5 -8q-8 4 -27 6l-235 22q-40 3 -76 29.5t-52 62.5l-93 213q-7 17 -14 24q2 -2 9 -2t8 2q-7 -7 -14 -24l-93 -213q-16 -36 -52 -62.5t-76 -29.5
l-235 -22q-19 -2 -27 -6q3 1 5 8.5t1 9.5q4 -8 18 -20l177 -154q30 -26 44 -68.5t5 -82.5l-51 -226q-4 -18 -3 -27q0 3 -6 7t-8 4q9 1 25 10l202 119q35 21 80 21t79 -21zM493 10l-202 -119q-54 -32 -82.5 -11t-14.5 82l52 226q5 23 -4 50t-27 42l-177 154q-47 41 -36 74
t73 39l236 21q23 2 46 19t32 38l93 213q25 58 60.5 58t60.5 -58l93 -213q9 -21 32 -38t46 -19l236 -21q62 -6 73 -39t-36 -74l-177 -154q-18 -15 -27 -42t-4 -50l52 -226q14 -61 -14.5 -82t-82.5 11l-202 119q-21 12 -49.5 12t-49.5 -12z" />
<glyph glyph-name="uniE621" unicode="&#xe621;" horiz-adv-x="1086"
d="M592 10q-21 12 -49.5 12t-49.5 -12l-202 -119q-54 -32 -82.5 -11t-14.5 82l52 226q5 23 -4 50t-27 42l-177 154q-47 41 -36 74t73 39l236 21q23 2 46 19t32 38l93 213q25 58 60.5 58t60.5 -58l93 -213q9 -21 32 -38t46 -19l236 -21q62 -6 73 -39t-36 -74l-177 -154
q-18 -15 -27 -42t-4 -50l52 -226q14 -61 -14.5 -82t-82.5 11z" />
<glyph glyph-name="uniE622" unicode="&#xe622;"
d="M512 -128q-139 0 -257 68.5t-186.5 186.5t-68.5 257q0 104 40.5 199t109 163.5t163.5 109t199 40.5t199 -40.5t163.5 -109t109 -163.5t40.5 -199t-40.5 -199t-109 -163.5t-163.5 -109t-199 -40.5zM512 786q-109 0 -202 -53.5t-146.5 -146.5t-53.5 -202t53.5 -202
t146.5 -146.5t202 -53.5t202 53.5t146.5 146.5t53.5 202t-53.5 202t-146.5 146.5t-202 53.5zM513 316q-20 0 -34 14.5t-14 33.5v229q0 19 14 33.5t34 14.5t34 -14.5t14 -33.5v-181h160q20 0 34 -14t14 -33.5t-14 -34t-34 -14.5h-208z" />
<glyph glyph-name="uniE623" unicode="&#xe623;"
d="M512 896q-106 0 -199.5 -40t-163 -109.5t-109.5 -163t-40 -199.5t40 -199.5t109.5 -163t163 -109.5t199.5 -40t199.5 40t163 109.5t109.5 163t40 199.5t-40 199.5t-109.5 163t-163 109.5t-199.5 40zM512 94q-25 0 -42 17t-17 41.5t17 42t42 17.5t42 -17.5t17 -42
t-17 -41.5t-42 -17zM571 350q0 -25 -17 -42.5t-42 -17.5t-42 17.5t-17 42.5v275q0 25 17 42t42 17t42 -17t17 -42v-275z" />
<glyph glyph-name="uniE624" unicode="&#xe624;"
d="M382 491v-384q0 -10 -6 -16t-15 -6h-43q-10 0 -16 6t-6 16v384q0 9 6 15t16 6h43q9 0 15 -6t6 -15zM555 491v-384q0 -10 -6 -16t-15 -6h-44q-9 0 -15 6t-6 16v384q0 9 6 15t15 6h44q9 0 15 -6t6 -15zM728 491v-384q0 -10 -6 -16t-16 -6h-43q-9 0 -15 6t-6 16v384
q0 9 6 15t15 6h43q10 0 16 -6t6 -15zM815 8v632h-606v-632q0 -15 5 -27t10 -18t7 -6h562q2 0 7 6t10 18t5 27zM361 725h302l-32 78q-5 6 -12 8h-214q-6 -2 -11 -8zM987 704v-43q0 -9 -6 -15t-15 -6h-65v-632q0 -55 -31.5 -95.5t-76.5 -40.5h-562q-45 0 -76.5 39t-31.5 94
v635h-65q-9 0 -15 6t-6 15v43q0 9 6 15t15 6h209l47 112q10 24 36.5 41.5t53.5 17.5h216q27 0 53.5 -17.5t36.5 -41.5l47 -112h209q9 0 15 -6t6 -15z" />
<glyph glyph-name="uniE625" unicode="&#xe625;" horiz-adv-x="1103"
d="M1039 -128h-975q-27 0 -45.5 19t-18.5 45v320q0 27 18.5 45.5t45 18.5t45 -18.5t18.5 -45.5v-256h849v256q0 27 18.5 45.5t44.5 18.5t45 -18.5t19 -45.5v-320q0 -26 -18.5 -45t-45.5 -19zM742 555q-28 0 -47 21l-80 89v-388q0 -26 -18.5 -45t-45 -19t-45 19t-18.5 45v388
l-80 -89q-19 -21 -47 -21q-27 0 -45.5 18.5t-18.5 45.5q0 24 16 42l191 214q19 21 47.5 21t47.5 -21l191 -214q16 -18 16 -42q0 -27 -18.5 -45.5t-45.5 -18.5z" />
<glyph glyph-name="uniE626" unicode="&#xe626;"
d="M634 506h-146v147q0 20 -14.5 34t-34.5 14t-34.5 -14t-14.5 -34v-147h-146q-20 0 -34 -14t-14 -34.5t14 -34.5t34 -14h146v-147q0 -20 14.5 -34t34.5 -14t34.5 14t14.5 34v147h146q20 0 34.5 14t14.5 34.5t-14.5 34.5t-34.5 14zM1009 -41l-226 227q67 85 86.5 190.5
t-12 209t-109.5 181.5q-63 64 -145 96.5t-165 32.5t-165 -32.5t-145 -96t-95.5 -145.5t-32.5 -165t32.5 -165t95.5 -145q79 -78 182.5 -109.5t209.5 -11.5t191 87l226 -226q15 -15 36 -15t36 15t15 36t-15 36zM679 217q-65 -66 -153 -89t-176 0t-153.5 89t-88.5 153.5
t0 175.5t88.5 153.5t153.5 89t176 0t153.5 -89t88.5 -153.5t0 -175.5t-89 -153.5z" />
</font>
</defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
packages/theme-default/src/fonts/element-icons.ttf Executable file → Normal file
View File

Binary file not shown.

BIN
packages/theme-default/src/fonts/element-icons.woff Executable file → Normal file
View File

Binary file not shown.

155
packages/theme-default/src/icon.css
View File

@ -1,9 +1,9 @@
@font-face {
font-family: 'element-icons';
src:
url('fonts/element-icons.ttf?ld8k1a') format('truetype'),
url('fonts/element-icons.woff?ld8k1a') format('woff'),
url('fonts/element-icons.svg?ld8k1a#element-icons') format('svg');
src:url('fonts/element-icons.eot?t=1472440741'), /* IE9*/
url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
@ -25,114 +25,45 @@
-moz-osx-font-smoothing: grayscale;
}
.el-icon-search:before {
content: "\e90e";
}
.el-icon-share:before {
content: "\e900";
}
.el-icon-setting:before {
content: "\e901";
}
.el-icon-circle-cross:before {
content: "\e902";
}
.el-icon-warning:before {
content: "\e903";
}
.el-icon-information:before {
content: "\e904";
}
.el-icon-circle-check:before {
content: "\e905";
}
.el-icon-delete:before {
content: "\e906";
}
.el-icon-d-arrow-left:before {
content: "\e907";
}
.el-icon-d-arrow-right:before {
content: "\e908";
}
.el-icon-picture:before {
content: "\e909";
}
.el-icon-upload:before {
content: "\e90a";
}
.el-icon-menu:before {
content: "\e90b";
}
.el-icon-time:before {
content: "\e90c";
}
.el-icon-circle-close:before {
content: "\e90d";
}
.el-icon-arrow-down:before {
content: "\e90f";
}
.el-icon-arrow-up:before {
content: "\e910";
}
.el-icon-arrow-right:before {
content: "\e911";
}
.el-icon-arrow-left:before {
content: "\e912";
}
.el-icon-close:before {
content: "\e913";
}
.el-icon-document:before {
content: "\e914";
}
.el-icon-d-caret:before {
content: "\e915";
}
.el-icon-date:before {
content: "\e916";
}
.el-icon-message:before {
content: "\e917";
}
.el-icon-loading:before {
content: "\e918";
}
.el-icon-ellipsis:before {
content: "\e919";
}
.el-icon-plus:before {
content: "\e91a";
}
.el-icon-caret-left:before {
content: "\e91b";
}
.el-icon-caret-right:before {
content: "\e91c";
}
.el-icon-caret-bottom:before {
content: "\e91d";
}
.el-icon-edit:before {
content: "\e91e";
}
.el-icon-caret-top:before {
content: "\e91f";
}
.el-icon-check:before {
content: "\e920";
}
.el-icon-minus:before {
content: "\e921";
}
.el-icon-star-off:before {
content: "\e922";
}
.el-icon-star-on:before {
content: "\e923";
}
.el-icon-arrow-down:before { content: "\e600"; }
.el-icon-arrow-left:before { content: "\e601"; }
.el-icon-arrow-right:before { content: "\e602"; }
.el-icon-arrow-up:before { content: "\e603"; }
.el-icon-caret-bottom:before { content: "\e604"; }
.el-icon-caret-left:before { content: "\e605"; }
.el-icon-caret-right:before { content: "\e606"; }
.el-icon-caret-top:before { content: "\e607"; }
.el-icon-check:before { content: "\e608"; }
.el-icon-circle-check:before { content: "\e609"; }
.el-icon-circle-close:before { content: "\e60a"; }
.el-icon-circle-cross:before { content: "\e60b"; }
.el-icon-close:before { content: "\e60c"; }
.el-icon-cloud:before { content: "\e60d"; }
.el-icon-d-arrow-left:before { content: "\e60e"; }
.el-icon-d-arrow-right:before { content: "\e60f"; }
.el-icon-d-caret:before { content: "\e610"; }
.el-icon-date:before { content: "\e611"; }
.el-icon-delete:before { content: "\e612"; }
.el-icon-document:before { content: "\e613"; }
.el-icon-edit:before { content: "\e614"; }
.el-icon-information:before { content: "\e615"; }
.el-icon-loading:before { content: "\e616"; }
.el-icon-menu:before { content: "\e617"; }
.el-icon-message:before { content: "\e618"; }
.el-icon-minus:before { content: "\e619"; }
.el-icon-more:before { content: "\e61a"; }
.el-icon-picture:before { content: "\e61b"; }
.el-icon-plus:before { content: "\e61c"; }
.el-icon-search:before { content: "\e61d"; }
.el-icon-setting:before { content: "\e61e"; }
.el-icon-share:before { content: "\e61f"; }
.el-icon-star-off:before { content: "\e620"; }
.el-icon-star-on:before { content: "\e621"; }
.el-icon-time:before { content: "\e622"; }
.el-icon-warning:before { content: "\e623"; }
.el-icon-delete2:before { content: "\e624"; }
.el-icon-upload:before { content: "\e625"; }
.el-icon-view:before { content: "\e626"; }
.el-icon-loading {
animation: rotating 1s linear infinite;

34
packages/theme-default/src/upload.css
View File

@ -11,6 +11,16 @@
}
@e inner {
display: inline-block;
position: relative;
& iframe {
position: absolute;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
}
@e files {
margin: 0;
@ -103,7 +113,7 @@
display: block;
height: 100%;
}
& .el-icon-upload {
& .el-icon-cloud {
font-size: 67px;
color: #99a9bf;
margin: 40px 0 16px;
@ -119,16 +129,7 @@
border-top: 1px solid rgba(#c0ccda, .2);
}
@e progress {
position: absolute 0 60px 0 60px;
margin: auto;
& + .el-upload__inner {
opacity: 0;
}
}
@e uploaded-image {
@e cover {
position: absolute;
left: 0;
top: 0;
@ -144,6 +145,15 @@
height: auto;
}
@e progress {
position: absolute 0 60px 0 60px;
margin: auto;
& + .el-upload__inner {
opacity: 0;
}
}
@e interact {
position: absolute;
bottom: 0;
@ -230,7 +240,7 @@
}
}
&:not(.is-showImage):hover {
&:not(.is-showCover):hover {
border-color: var(--color-primary);
}

142
packages/upload/src/ajax-upload.vue
View File

@ -1,142 +0,0 @@
<template>
<div class="el-upload__inner"
@click="$els.input.click();"
@drop.prevent="onDrop"
@dragOver.prevent
>
<slot></slot>
<template v-if="$parent.type === 'drag'">
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
</template>
<input class="el-upload__input" type="file" v-el:input @change="handleChange" :multiple="multiple" :accept="accept">
</div>
</template>
<script>
import ajax from './ajax';
export default {
props: {
action: {
type: String,
required: true
},
name: {
type: String,
default: 'file'
},
withCredentials: true,
multiple: Boolean,
accept: String,
onStart: Function,
onProgress: Function,
onSuccess: Function,
onError: Function,
beforeUpload: Function
},
data() {
return {
};
},
computed: {
uploading: {
get() {
return this.$parent.uploading;
},
set(value) {
this.$parent.uploading = value;
}
},
mode() {
return this.$parent.mode;
}
},
methods: {
isImage(str) {
return str.indexOf('image') !== -1;
},
handleChange(ev) {
const files = ev.target.files;
if (this.uploading || !files) {
return;
}
this.$dispatch('filechange', files, this.$parent.uploadedFiles, ev);
this.uploading = true;
this.uploadFiles(files);
},
uploadFiles(files) {
let postFiles = Array.prototype.slice.call(files);
if (!this.multiple) {
postFiles = postFiles.slice(0, 1);
}
const len = postFiles.length;
if (len > 0) {
for (let i = 0; i < len; i++) {
const file = postFiles[i];
let isImage = this.isImage(file.type);
// file.uid = uid();
if (this.mode === 'image' && !isImage) {
continue;
}
this.upload(file);
}
this.onStart(postFiles);
}
},
upload(file) {
if (!this.beforeUpload) {
return this.post(file);
}
const before = this.beforeUpload(file);
if (before && before.then) {
before.then((processedFile) => {
if (Object.prototype.toString.call(processedFile) === '[object File]') {
this.post(processedFile);
} else {
this.post(file);
}
}, () => {
this.reset();
});
} else if (before !== false) {
this.post(file);
} else {
this.reset();
}
},
post(file) {
let formData = new FormData();
formData.append(this.name, file);
ajax(this.action, {
headers: this.headers,
withCredentials: this.withCredentials,
file: file,
filename: this.name,
onProgress: e => {
this.onProgress(e, file);
},
onSuccess: res => {
this.onSuccess(res, file);
},
onError: err => {
this.onError(err, file);
}
});
},
onDrop(e) {
const files = e.dataTransfer.files;
this.uploadFiles(files);
}
},
ready() {
}
};
</script>

48
packages/upload/src/cover.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="el-dragger__cover" @click.stop v-if="image">
<transition name="fade-in">
<el-progress
class="el-dragger__cover__progress"
v-if="image.status === 'loading'"
size="large"
:percentage="image.percentage"
:type="image.status === 'finished' ? 'green' : 'blue'">
</el-progress>
</transition>
<div v-if="image.status === 'finished'" @mouseenter="mouseover = true" @mouseleave="mouseover = false">
<img :src="image.url">
<transition name="fade-in">
<div v-show="mouseover" class="el-dragger__cover__interact">
<div class="el-draggeer__cover__btns">
<span class="btn" @click="$parent.$refs.input.click()"><i class="el-icon-upload"></i><span>继续上传</span></span>
<span class="btn" @click="onPreview(image)"><i class="el-icon-view"></i><span>查看图片</span></span>
<span class="btn" @click="onRemove(image)"><i class="el-icon-delete2"></i><span>删除</span></span>
</div>
</div>
</transition>
<transition name="md-fade-top">
<h4 v-show="mouseover" class="el-dragger__cover__title">{{image.name}}</h4>
</transition>
</div>
</div>
</template>
<script>
export default {
props: {
image: {},
onPreview: {
type: Function,
default: function() {}
},
onRemove: {
type: Function,
default: function() {}
}
},
data() {
return {
mouseover: false
};
}
};
</script>

309
packages/upload/src/iframe-upload.vue
View File

@ -1,138 +1,209 @@
<template>
<span class="el-upload__inner" :style="{ position: 'relative', zIndex: 0 }">
<iframe v-el:iframe @load="onLoad" v-bind:style="iframeStyle"></iframe>
<slot></slot>
</span>
</template>
<script>
import ajax from './ajax';
import ElProgress from 'packages/progress/index.js';
import Cover from './cover';
export default {
components: {
ElProgress
Cover
},
props: {
type: String,
data: {},
action: {
type: String,
required: true
},
name: {
type: String,
default: 'file'
},
withCredentials: Boolean,
multiple: Boolean,
accept: String,
onStart: Function,
onProgress: Function,
onSuccess: Function,
onError: Function,
beforeUpload: Function,
onPreview: {
type: Function,
default: function() {}
},
onRemove: {
type: Function,
default: function() {}
}
},
data() {
return {
uploading: false,
percentage: 0,
uploadedFiles: [],
filename: '',
success: false,
iframeStyle: {
position: 'absolute',
top: 0,
opacity: 0,
filter: 'alpha(opacity=0)',
left: 0,
zIndex: 9999
}
dragOver: false,
mouseover: false,
domain: '',
file: null,
disabled: false
};
},
methods: {
handleChange(ev) {
const files = ev.target.files;
if (this.uploading || !files) {
return;
}
this.uploading = true;
this.uploadFiles(files);
computed: {
lastestFile() {
var uploadedFiles = this.$parent.uploadedFiles;
return uploadedFiles[uploadedFiles.length - 1];
},
uploadFiles(files) {
let postFiles = Array.prototype.slice.call(files);
if (!this.multiple) {
postFiles = postFiles.slice(0, 1);
}
const len = postFiles.length;
if (len > 0) {
for (let i = 0; i < len; i++) {
const file = postFiles[i];
// file.uid = uid();
this.upload(file);
}
if (this.multiple) {
this.onStart(postFiles);
} else {
this.onStart(postFiles[0]);
}
}
showCover() {
var file = this.lastestFile;
return this.thumbnailMode && file && file.status !== 'fail';
},
upload(file) {
if (!this.beforeUpload) {
return this.post(file);
}
const before = this.beforeUpload(file);
if (before && before.then) {
before.then((processedFile) => {
if (Object.prototype.toString.call(processedFile) === '[object File]') {
this.post(processedFile);
} else {
this.post(file);
}
}, () => {
this.reset();
});
} else if (before !== false) {
this.post(file);
} else {
this.reset();
}
},
post(file) {
let formData = new FormData();
formData.append(this.name, file);
ajax(this.action, {
headers: this.headers,
withCredentials: this.withCredentials,
file: file,
filename: this.name,
onProgress: e => {
this.onProgress(e, file);
},
onSuccess: res => {
this.onSuccess(res, file);
},
onError: err => {
this.onError(err, file);
}
});
},
onLoad() {
},
onStart(files) {
this.filename = files.name;
},
onProgress(ev, file) {
console.log(ev.percent);
this.percentage = ev.percent;
},
onSuccess(res, file) {
setTimeout(() => {
this.uploadedFiles.push(file);
this.reset();
}, 1000);
console.log(res);
},
onError(err, file) {
this.reset();
console.log(err);
},
reset() {
this.uploading = false;
this.percent = 0;
this.filename = '';
thumbnailMode() {
return this.$parent.thumbnailMode;
}
},
ready() {
methods: {
resetIframe() {
const iframeNode = this.getIframeNode();
let win = iframeNode.contentWindow;
let doc = win.document;
doc.open('text/html', 'replace');
doc.write(this.getIframeHTML(this.domain));
doc.close();
},
getIframeHTML(domain) {
let domainScript = '';
if (domain) {
domainScript = `<script>document.domain="${domain}";<` + '/script>';
}
return `
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
${domainScript}
</head>
<body>
</body>
</html>
`;
},
isImage(str) {
return str.indexOf('image') !== -1;
},
handleClick() {
if (!this.disabled) {
this.$refs.input.click();
}
},
handleChange(ev) {
const files = ev.target.files;
this.file = files;
this.onStart(files);
const formNode = this.getFormNode();
const dataSpan = this.getFormDataNode();
let data = this.data;
if (typeof data === 'function') {
data = data(files);
}
const inputs = [];
for (const key in data) {
if (data.hasOwnProperty(key)) {
inputs.push(`<input name="${key}" value="${data[key]}"/>`);
}
}
dataSpan.innerHTML = inputs.join('');
formNode.submit();
dataSpan.innerHTML = '';
this.disabled = true;
},
onLoad() {
let response;
const eventFile = this.file;
if (!eventFile) { return; }
try {
const doc = this.getIframeDocument();
const script = doc.getElementsByTagName('script')[0];
if (script && script.parentNode === doc.body) {
doc.body.removeChild(script);
}
response = doc.body.innerHTML;
this.onSuccess(response, eventFile);
} catch (err) {
console.log(err);
console.warn(false, 'cross domain error for Upload');
this.onError(err, eventFile);
}
this.resetIframe();
this.disabled = false;
},
onDrop(e) {
e.preventDefault();
this.dragOver = false;
this.uploadFiles(e.dataTransfer.files);
},
handleDragover(e) {
e.preventDefault();
this.onDrop = true;
},
handleDragleave(e) {
e.preventDefault();
this.onDrop = false;
},
getIframeNode() {
return this.$refs.iframe;
},
getIframeDocument() {
return this.getIframeNode().contentDocument;
},
getFormNode() {
return this.$refs.form;
},
getFormDataNode() {
return this.$refs.data;
}
},
render(h) {
var cover = <cover image={this.lastestFile} onPreview={this.onPreview} onRemove={this.onRemove}></cover>;
var frameName = 'frame-' + Date.now();
return (
<div
class={{
'el-upload__inner': true,
'el-dragger': this.type === 'drag',
'is-dragOver': this.dragOver,
'is-showCover': this.showCover
}}
on-click={this.handleClick}
nativeOn-drop={this.onDrop}
nativeOn-dragover={this.handleDragover}
nativeOn-dragleave={this.handleDragleave}
>
<iframe
ref="iframe"
on-load={this.onLoad}
name={frameName}
>
</iframe>
<form ref="form" action={this.action} target={frameName} enctype="multipart/form-data" method="POST">
<input
class="el-upload__input"
type="file"
ref="input"
name="file"
on-change={this.handleChange}
multiple={this.multiple}
accept={this.accept}>
</input>
<input type="hidden" name="documentDomain" value={document.domain} />
<span ref="data"></span>
</form>
{!this.showCover ? this.$slots.default : cover}
</div>
);
}
};
</script>

35
packages/upload/src/index.vue
View File

@ -1,6 +1,7 @@
<script>
import UploadList from './upload-list';
import Upload from './upload';
import IframeUpload from './iframe-upload';
import ElProgress from 'packages/progress/index.js';
function noop() {
@ -9,13 +10,11 @@ function noop() {
export default {
name: 'el-upload',
// extends: typeof FormData !== 'undefined' ? ajaxUpload : iframeUpload,
// extends: iframeUpload,
components: {
ElProgress,
UploadList,
Upload
Upload,
IframeUpload
},
props: {
@ -108,12 +107,14 @@ export default {
onSuccess(res, file) {
var _file = this.getFile(file);
_file.status = 'finished';
_file.response = res;
if (_file) {
_file.status = 'finished';
_file.response = res;
setTimeout(() => {
_file.showProgress = false;
}, 1000);
setTimeout(() => {
_file.showProgress = false;
}, 1000);
}
},
onError(err, file) {
var _file = this.getFile(file);
@ -147,6 +148,7 @@ export default {
render(h) {
var uploadList;
if (this.showUploadList && !this.thumbnailMode) {
uploadList = (
<UploadList
@ -159,6 +161,7 @@ export default {
var props = {
props: {
type: this.type,
action: this.action,
multiple: this.multiple,
'before-upload': this.beforeUpload,
@ -174,26 +177,24 @@ export default {
}
};
var uploadComponent = typeof FormData === 'undefined'
? <upload {...props}>{this.$slots.default}</upload>
: <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
if (this.type === 'select') {
return (
<div class="el-upload">
{uploadList}
<upload {...props}>
{this.$slots.default}
</upload>
{uploadComponent}
{this.$slots.tip}
</div>
);
}
if (this.type === 'drag') {
props.props.type = 'drag';
return (
<div class="el-upload">
<upload {...props}>
{this.$slots.default}
</upload>
{uploadComponent}
{this.$slots.tip}
{uploadList}
</div>

48
packages/upload/src/upload.vue
View File

@ -3,55 +3,27 @@
:class="{
'el-dragger': type === 'drag',
'is-dragOver': dragOver,
'is-hover': mouseover,
'is-showImage': showThumbnail
'is-showCover': showCover
}"
@click="$refs.input.click()"
@drop.prevent="onDrop"
@dragover.prevent="dragOver = true"
@dragleave.prevent="dragOver = false"
@mouseenter="mouseover = true"
@mouseleave="mouseover = false"
>
<slot></slot>
<template v-if="type === 'drag' && !showThumbnail">
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
</template>
<template v-if="thumbnailMode">
<transition name="fade-in">
<el-progress
class="el-dragger__progress"
v-if="lastestFile.showProgress"
size="large"
:percentage="lastestFile.percentage"
:type="lastestFile.status === 'finished' ? 'green' : 'blue'">
</el-progress>
</transition>
<div class="el-dragger__uploaded-image" v-if="lastestFile.status === 'finished'" @click.stop>
<img :src="lastestFile.url">
<transition name="fade-in">
<div v-show="mouseover" class="el-dragger__uploaded-image__interact">
<div class="el-draggeer__uploaded-image__btns">
<span class="btn" @click="$refs.input.click()"><i class="el-icon-upload"></i><span>继续上传</span></span>
<span class="btn" @click="onPreview(lastestFile)"><i class="el-icon-search"></i><span>查看图片</span></span>
<span class="btn" @click="onRemove(lastestFile)"><i class="el-icon-delete"></i><span>删除</span></span>
</div>
</div>
</transition>
<transition name="md-fade-top">
<h4 v-show="mouseover" class="el-dragger__uploaded-image__title">{{lastestFile.name}}</h4>
</transition>
</div>
</template>
<slot v-if="!showCover"></slot>
<cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
<input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">
</div>
</template>
<script>
import ajax from './ajax';
import Cover from './cover';
export default {
components: {
Cover
},
props: {
type: String,
action: {
@ -90,11 +62,11 @@ export default {
computed: {
lastestFile() {
var uploadedFiles = this.$parent.uploadedFiles;
return uploadedFiles.length > 0 ? uploadedFiles[uploadedFiles.length - 1] : {};
return uploadedFiles[uploadedFiles.length - 1];
},
showThumbnail() {
showCover() {
var file = this.lastestFile;
return this.thumbnailMode && file.status && file.status !== 'fail';
return this.thumbnailMode && file && file.status !== 'fail';
},
thumbnailMode() {
return this.$parent.thumbnailMode;