├── readme.md ├── .browserslistrc ├── babel.config.js ├── public ├── favicon.ico └── index.html ├── tests └── unit │ ├── .eslintrc.js │ ├── Row.spec.js │ └── Col.spec.js ├── postcss.config.js ├── src ├── assets │ └── theme-chalk │ │ ├── aside.scss │ │ ├── fonts │ │ ├── element-icons.ttf │ │ └── element-icons.woff │ │ ├── mixins │ │ ├── config.scss │ │ ├── utils.scss │ │ └── mixins.scss │ │ ├── footer.scss │ │ ├── header.scss │ │ ├── index.scss │ │ ├── main.scss │ │ ├── container.scss │ │ ├── display.scss │ │ ├── row.scss │ │ ├── col.scss │ │ ├── common │ │ └── var.scss │ │ └── icon.scss ├── components │ └── element │ │ ├── col │ │ ├── index.js │ │ └── src │ │ │ └── Col.js │ │ ├── row │ │ ├── index.js │ │ └── src │ │ │ └── Row.js │ │ ├── icon │ │ ├── index.js │ │ └── src │ │ │ └── Icon.vue │ │ ├── main │ │ ├── index.js │ │ └── src │ │ │ └── Main.vue │ │ ├── aside │ │ ├── index.js │ │ └── src │ │ │ └── Aside.vue │ │ ├── footer │ │ ├── index.js │ │ └── src │ │ │ └── Footer.vue │ │ ├── header │ │ ├── index.js │ │ └── src │ │ │ └── Header.vue │ │ ├── container │ │ ├── index.js │ │ └── src │ │ │ └── Container.vue │ │ └── index.js ├── plugins │ └── element.js ├── main.js └── App.vue ├── .editorconfig ├── .gitignore ├── vue.config.js ├── .eslintrc.js ├── jest.config.js └── package.json /readme.md: -------------------------------------------------------------------------------- 1 | # 学习编写element组件 -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ElementUI/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/aside.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins.scss"; 2 | 3 | @include b(aside) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ElementUI/HEAD/src/assets/theme-chalk/fonts/element-icons.ttf -------------------------------------------------------------------------------- /src/assets/theme-chalk/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-ElementUI/HEAD/src/assets/theme-chalk/fonts/element-icons.woff -------------------------------------------------------------------------------- /src/assets/theme-chalk/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'el'; 2 | $element-separator: '__'; 3 | $modifier-separator: '--'; 4 | $state-prefix: 'is-'; 5 | -------------------------------------------------------------------------------- /src/components/element/col/index.js: -------------------------------------------------------------------------------- 1 | import Col from './src/Col'; 2 | 3 | Col.install = (Vue) => { 4 | Vue.component(Col.name, Col); 5 | }; 6 | 7 | export default Col; 8 | -------------------------------------------------------------------------------- /src/components/element/row/index.js: -------------------------------------------------------------------------------- 1 | import Row from './src/Row'; 2 | 3 | Row.install = (Vue) => { 4 | Vue.component(Row.name, Row); 5 | }; 6 | 7 | export default Row; 8 | -------------------------------------------------------------------------------- /src/components/element/icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './src/Icon.vue'; 2 | 3 | Icon.install = (Vue) => { 4 | Vue.component(Icon.name, Icon); 5 | }; 6 | 7 | export default Icon; 8 | -------------------------------------------------------------------------------- /src/components/element/main/index.js: -------------------------------------------------------------------------------- 1 | import Main from './src/Main.vue'; 2 | 3 | Main.install = (Vue) => { 4 | Vue.component(Main.name, Main); 5 | }; 6 | 7 | export default Main; 8 | -------------------------------------------------------------------------------- /src/components/element/aside/index.js: -------------------------------------------------------------------------------- 1 | import Aside from './src/Aside.vue'; 2 | 3 | Aside.install = (Vue) => { 4 | Vue.component(Aside.name, Aside); 5 | }; 6 | 7 | export default Aside; 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /src/components/element/footer/index.js: -------------------------------------------------------------------------------- 1 | import Footer from './src/Footer.vue'; 2 | 3 | Footer.install = (Vue) => { 4 | Vue.component(Footer.name, Footer); 5 | }; 6 | 7 | export default Footer; 8 | -------------------------------------------------------------------------------- /src/components/element/header/index.js: -------------------------------------------------------------------------------- 1 | import Header from './src/Header.vue'; 2 | 3 | Header.install = (Vue) => { 4 | Vue.component(Header.name, Header); 5 | }; 6 | 7 | export default Header; 8 | -------------------------------------------------------------------------------- /src/plugins/element.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Element from '@element'; 3 | import '@/assets/theme-chalk/index.scss'; 4 | import '@/assets/theme-chalk/display.scss'; 5 | 6 | Vue.use(Element); 7 | -------------------------------------------------------------------------------- /src/components/element/container/index.js: -------------------------------------------------------------------------------- 1 | import Container from './src/Container.vue'; 2 | 3 | Container.install = (Vue) => { 4 | Vue.component(Container.name, Container); 5 | }; 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/footer.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins.scss"; 2 | @import "./common/var.scss"; 3 | 4 | @include b(footer) { 5 | box-sizing: border-box; 6 | flex-shrink: 0; 7 | padding: $--footer-padding; 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/header.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins.scss"; 2 | @import "./common/var.scss"; 3 | 4 | @include b(header) { 5 | box-sizing: border-box; 6 | padding: $--header-padding; 7 | flex-shrink: 0; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/element/main/src/Main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import './plugins/element'; 4 | 5 | Vue.config.productionTip = false; 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | }).$mount('#app'); 10 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/index.scss: -------------------------------------------------------------------------------- 1 | @import "./row.scss"; 2 | @import "./col.scss"; 3 | @import "./container.scss"; 4 | @import "./main.scss"; 5 | @import "./header.scss"; 6 | @import "./footer.scss"; 7 | @import "./aside.scss"; 8 | @import "./icon.scss"; 9 | -------------------------------------------------------------------------------- /src/components/element/icon/src/Icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/main.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins.scss"; 2 | @import "./common/var.scss"; 3 | 4 | @include b(main) { 5 | box-sizing: border-box; 6 | display: block; 7 | overflow: hidden; 8 | padding: $--main-padding; 9 | flex: 1; 10 | } 11 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/container.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins.scss"; 2 | 3 | @include b(container) { 4 | box-sizing: border-box; 5 | display: flex; 6 | flex-direction: row; 7 | flex: 1; 8 | 9 | @include when(vertical) { 10 | flex-direction: column; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/mixins/utils.scss: -------------------------------------------------------------------------------- 1 | @mixin utils-clearfix { 2 | $selector: &; 3 | 4 | @at-root { 5 | #{$selector}::after, 6 | #{$selector}::before { 7 | display: block; 8 | content: ''; 9 | } 10 | 11 | #{$selector}::after { 12 | clear: both; 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/display.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins.scss"; 2 | 3 | .hidden { 4 | @each $break-points-name, $value in $--breakpoints-spec { 5 | &-#{$break-points-name} { 6 | @include res($break-points-name, $--breakpoints-spec) { 7 | display: none !important; 8 | } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/element/aside/src/Aside.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /src/components/element/footer/src/Footer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /src/components/element/header/src/Header.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | // const path = require('path'); 2 | 3 | module.exports = { 4 | // chainWebpack: (config) => { 5 | // config.resolve.alias.set('@element', path.resolve(__dirname, 'src/components/element')); 6 | // }, 7 | configureWebpack: { 8 | resolve: { 9 | alias: { 10 | '@element': '@/components/element', 11 | }, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/airbnb', 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint', 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | duyi-elementui 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'js', 4 | 'jsx', 5 | 'json', 6 | 'vue', 7 | ], 8 | transform: { 9 | '^.+\\.vue$': 'vue-jest', 10 | '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', 11 | '^.+\\.jsx?$': 'babel-jest', 12 | }, 13 | transformIgnorePatterns: [ 14 | '/node_modules/', 15 | ], 16 | moduleNameMapper: { 17 | '^@/(.*)$': '/src/$1', 18 | '^@element/(.*)$': '/src/components/element/$1', 19 | }, 20 | snapshotSerializers: [ 21 | 'jest-serializer-vue', 22 | ], 23 | testMatch: [ 24 | '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)', 25 | ], 26 | testURL: 'http://localhost/', 27 | watchPlugins: [ 28 | 'jest-watch-typeahead/filename', 29 | 'jest-watch-typeahead/testname', 30 | ], 31 | }; 32 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/row.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins.scss"; 2 | @import "./mixins/utils.scss"; 3 | 4 | @include b(row) { 5 | box-sizing: border-box; 6 | 7 | @include utils-clearfix; 8 | 9 | @include m(flex) { 10 | display: flex; 11 | 12 | &::after, 13 | &::before { 14 | display: none; 15 | } 16 | 17 | @include when(justify-end) { 18 | justify-content: flex-end; 19 | } 20 | 21 | @include when(justify-ecenter) { 22 | justify-content: center; 23 | } 24 | 25 | @include when(justify-space-between) { 26 | justify-content: space-between; 27 | } 28 | 29 | @include when(justify-space-around) { 30 | justify-content: space-around; 31 | } 32 | 33 | @include when(align-middle) { 34 | align-items: center; 35 | } 36 | 37 | @include when(align-bottom) { 38 | align-items: flex-end; 39 | } 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/element/container/src/Container.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | -------------------------------------------------------------------------------- /src/components/element/index.js: -------------------------------------------------------------------------------- 1 | import Row from '@element/row'; 2 | import Col from '@element/col'; 3 | import Container from '@element/container'; 4 | import Main from '@element/main'; 5 | import Header from '@element/header'; 6 | import Footer from '@element/footer'; 7 | import Aside from '@element/aside'; 8 | import Icon from '@element/icon'; 9 | 10 | const components = [ 11 | Row, 12 | Col, 13 | Container, 14 | Main, 15 | Header, 16 | Footer, 17 | Aside, 18 | Icon, 19 | ]; 20 | 21 | const install = (Vue) => { 22 | components.forEach((component) => { 23 | Vue.component(component.name, component); 24 | }); 25 | }; 26 | 27 | 28 | export default { 29 | install, 30 | Row, 31 | Col, 32 | Container, 33 | Main, 34 | Header, 35 | Footer, 36 | Aside, 37 | Icon, 38 | }; 39 | 40 | export { 41 | install, 42 | Row, 43 | Col, 44 | Container, 45 | Main, 46 | Header, 47 | Footer, 48 | Aside, 49 | Icon, 50 | }; 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "duyi-elementui", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "test:unit": "vue-cli-service test:unit --watch" 10 | }, 11 | "dependencies": { 12 | "core-js": "^2.6.5", 13 | "vue": "^2.6.10" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^3.9.0", 17 | "@vue/cli-plugin-eslint": "^3.9.0", 18 | "@vue/cli-plugin-unit-jest": "^3.9.0", 19 | "@vue/cli-service": "^3.9.0", 20 | "@vue/eslint-config-airbnb": "^4.0.0", 21 | "@vue/test-utils": "1.0.0-beta.29", 22 | "babel-core": "7.0.0-bridge.0", 23 | "babel-eslint": "^10.0.1", 24 | "babel-jest": "^23.6.0", 25 | "eslint": "^5.16.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "node-sass": "^4.9.0", 28 | "sass-loader": "^7.1.0", 29 | "vue-template-compiler": "^2.6.10" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/mixins/mixins.scss: -------------------------------------------------------------------------------- 1 | @import "./config.scss"; 2 | @import "../common/var.scss"; 3 | 4 | /** BEM 5 | ----------------*/ 6 | @mixin b($block) { 7 | $B: $namespace + '-' + $block; 8 | 9 | .#{$B} { 10 | @content; 11 | } 12 | } 13 | 14 | @mixin m($modifier) { 15 | // &--flex 16 | $currentSelector: ""; 17 | 18 | @each $unit in $modifier { 19 | $currentSelector: $currentSelector + & + $modifier-separator + $unit + ','; 20 | } 21 | 22 | @at-root { 23 | #{$currentSelector} { 24 | @content; 25 | } 26 | } 27 | } 28 | 29 | @mixin when($state) { 30 | @at-root { 31 | &.#{$state-prefix + $state} { 32 | @content; 33 | } 34 | } 35 | } 36 | 37 | /* 断点 （break points） 38 | ------------------------*/ 39 | @mixin res($key, $map: $--breakpoints) { 40 | @if map-has-key($map, $key) { 41 | @media only screen and #{inspect(map-get($map, $key))} { 42 | @content; 43 | } 44 | } @else { 45 | @warn "undefined points: `#{$map}`" 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /tests/unit/Row.spec.js: -------------------------------------------------------------------------------- 1 | import Row from '@element/row'; 2 | import { shallowMount } from '@vue/test-utils'; 3 | 4 | describe('Row.vue', () => { 5 | let wrapper; 6 | let rowEle; 7 | 8 | beforeEach(() => { 9 | wrapper = shallowMount(Row); 10 | rowEle = wrapper.vm.$el; 11 | }); 12 | 13 | it('create', () => { 14 | expect(rowEle.classList).toContain('el-row'); 15 | }); 16 | 17 | it('gutter', () => { 18 | wrapper.setProps({ gutter: 20 }); 19 | expect(rowEle.style.marginLeft).toBe('-10px'); 20 | expect(rowEle.style.marginRight).toBe('-10px'); 21 | }); 22 | 23 | it('type', () => { 24 | wrapper.setProps({ type: 'flex' }); 25 | expect(rowEle.classList).toContain('el-row--flex'); 26 | }); 27 | 28 | it('justify', () => { 29 | wrapper.setProps({ justify: 'end' }); 30 | expect(rowEle.classList).toContain('is-justify-end'); 31 | }); 32 | 33 | it('align', () => { 34 | wrapper.setProps({ align: 'bottom' }); 35 | expect(rowEle.classList).toContain('is-align-bottom'); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | 53 | -------------------------------------------------------------------------------- /src/components/element/row/src/Row.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'ElRow', 3 | props: { 4 | tag: { 5 | type: String, 6 | default: 'div', 7 | }, 8 | gutter: { 9 | type: Number, 10 | default: 0, 11 | }, 12 | type: String, 13 | justify: { 14 | type: String, 15 | default: 'start', 16 | validator: val => ['start', 'end', 'center', 'space-between', 'space-around'].includes(val), 17 | }, 18 | align: { 19 | type: String, 20 | default: 'top', 21 | validator: val => ['top', 'middle', 'bottom'].includes(val), 22 | }, 23 | }, 24 | computed: { 25 | style() { 26 | const style = {}; 27 | if (this.gutter) { 28 | style.marginLeft = `${-this.gutter / 2}px`; 29 | style.marginRight = style.marginLeft; 30 | } 31 | return style; 32 | }, 33 | }, 34 | render(h) { 35 | return h(this.tag, { 36 | class: [ 37 | 'el-row', 38 | { 'el-row--flex': this.type === 'flex' }, 39 | this.justify !== 'start' && `is-justify-${this.justify}`, 40 | this.align !== 'top' && `is-align-${this.align}`, 41 | ], 42 | style: this.style, 43 | }, this.$slots.default); 44 | }, 45 | }; 46 | -------------------------------------------------------------------------------- /tests/unit/Col.spec.js: -------------------------------------------------------------------------------- 1 | import Row from '@element/row'; 2 | import Col from '@element/col'; 3 | import { shallowMount } from '@vue/test-utils'; 4 | 5 | describe('Col.vue', () => { 6 | let wrapper; 7 | let colEle; 8 | 9 | beforeEach(() => { 10 | wrapper = shallowMount(Col, { 11 | parentComponent: Row, 12 | }); 13 | colEle = wrapper.vm.$el; 14 | }); 15 | 16 | it('create', () => { 17 | expect(colEle.classList).toContain('el-col'); 18 | }); 19 | 20 | it('span', () => { 21 | wrapper.setProps({ span: 12 }); 22 | expect(colEle.classList).toContain('el-col-12'); 23 | }); 24 | 25 | it('offset', () => { 26 | wrapper.setProps({ offset: 6 }); 27 | expect(colEle.classList).toContain('el-col-offset-6'); 28 | }); 29 | 30 | it('pull', () => { 31 | wrapper.setProps({ pull: 3 }); 32 | expect(colEle.classList).toContain('el-col-pull-3'); 33 | }); 34 | 35 | it('push', () => { 36 | wrapper.setProps({ push: 5 }); 37 | expect(colEle.classList).toContain('el-col-push-5'); 38 | }); 39 | 40 | it('respnsive', () => { 41 | wrapper.setProps({ 42 | sm: { span: 4, offset: 2 }, 43 | md: 8, 44 | lg: { span: 6, offset: 3 }, 45 | }); 46 | expect(colEle.classList).toContain('el-col-sm-4'); 47 | expect(colEle.classList).toContain('el-col-sm-offset-2'); 48 | expect(colEle.classList).toContain('el-col-md-8'); 49 | expect(colEle.classList).toContain('el-col-lg-6'); 50 | expect(colEle.classList).toContain('el-col-lg-offset-3'); 51 | }); 52 | 53 | it('gutter', () => { 54 | wrapper.vm.$parent.gutter = 20; 55 | expect(colEle.style.paddingLeft).toBe('10px'); 56 | expect(colEle.style.paddingRight).toBe('10px'); 57 | }); 58 | }); 59 | -------------------------------------------------------------------------------- /src/components/element/col/src/Col.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'ElCol', 3 | props: { 4 | tag: { 5 | type: String, 6 | default: 'div', 7 | }, 8 | span: { 9 | type: Number, 10 | default: 24, 11 | }, 12 | offset: { 13 | type: Number, 14 | default: 0, 15 | }, 16 | push: { 17 | type: Number, 18 | default: 0, 19 | }, 20 | pull: { 21 | type: Number, 22 | default: 0, 23 | }, 24 | xs: [Number, Object], 25 | sm: [Number, Object], 26 | md: [Number, Object], 27 | lg: [Number, Object], 28 | xl: [Number, Object], 29 | }, 30 | computed: { 31 | gutter() { 32 | let parent = this.$parent; 33 | 34 | while (parent && parent.$options.name !== 'ElRow') { 35 | parent = parent.$parent; 36 | } 37 | 38 | return parent ? parent.gutter : 0; 39 | }, 40 | style() { 41 | const style = {}; 42 | 43 | if (this.gutter) { 44 | style.paddingLeft = `${this.gutter / 2}px`; 45 | style.paddingRight = style.paddingLeft; 46 | } 47 | 48 | return style; 49 | }, 50 | classList() { 51 | const classList = []; 52 | 53 | ['span', 'offset', 'push', 'pull'].forEach((prop) => { 54 | if (this[prop]) { 55 | classList.push( 56 | prop === 'span' 57 | ? `el-col-${this[prop]}` 58 | : `el-col-${prop}-${this[prop]}`, 59 | ); 60 | } 61 | }); 62 | 63 | ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => { 64 | if (typeof this[size] === 'number') { 65 | classList.push(`el-col-${size}-${this[size]}`); 66 | } else if (typeof this[size] === 'object') { 67 | // { 68 | // span: 6, 69 | // offset: 8, 70 | // push: 7, 71 | // pull: 9 72 | // } 73 | // el-col-xs-6 74 | // el-col-xs-offset-8 75 | // el-col-xs-push-7 76 | // el-col-xs-pull-9 77 | const props = this[size]; 78 | Object.keys(props).forEach((prop) => { 79 | classList.push( 80 | prop === 'span' 81 | ? `el-col-${size}-${props[prop]}` 82 | : `el-col-${size}-${prop}-${props[prop]}`, 83 | ); 84 | }); 85 | } 86 | }); 87 | 88 | return classList; 89 | }, 90 | }, 91 | render(h) { 92 | return h(this.tag, { 93 | class: ['el-col', this.classList], 94 | style: this.style, 95 | }, this.$slots.default); 96 | }, 97 | }; 98 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/col.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins.scss"; 2 | 3 | @include b(col) { 4 | box-sizing: border-box; 5 | float: left; 6 | }; 7 | 8 | @for $i from 0 through 24 { 9 | .el-col-#{$i} { 10 | width: $i / 24 * 100%; 11 | } 12 | 13 | .el-col-offset-#{$i} { 14 | margin-left: $i / 24 * 100%; 15 | } 16 | 17 | .el-col-push-#{$i} { 18 | position: relative; 19 | left: $i / 24 * 100%; 20 | } 21 | 22 | .el-col-pull-#{$i} { 23 | position: relative; 24 | right: $i / 24 * 100%; 25 | } 26 | }; 27 | 28 | // xs < 768px 29 | .el-col-xs-0 { 30 | display: none; 31 | } 32 | @include res(xs) { 33 | @for $i from 0 through 24 { 34 | 35 | .el-col-xs-#{$i} { 36 | width: $i / 24 * 100%; 37 | } 38 | 39 | .el-col-xs-offset-#{$i} { 40 | margin-left: $i / 24 * 100%; 41 | } 42 | 43 | .el-col-xs-push-#{$i} { 44 | position: relative; 45 | left: $i / 24 * 100%; 46 | } 47 | 48 | .el-col-xs-pull-#{$i} { 49 | position: relative; 50 | right: $i / 24 * 100%; 51 | } 52 | } 53 | } 54 | 55 | // sm >= 768px 56 | .el-col-sm-0 { 57 | display: none; 58 | } 59 | @include res(sm) { 60 | @for $i from 0 through 24 { 61 | 62 | .el-col-sm-#{$i} { 63 | width: $i / 24 * 100%; 64 | } 65 | 66 | .el-col-sm-offset-#{$i} { 67 | margin-left: $i / 24 * 100%; 68 | } 69 | 70 | .el-col-sm-push-#{$i} { 71 | position: relative; 72 | left: $i / 24 * 100%; 73 | } 74 | 75 | .el-col-sm-pull-#{$i} { 76 | position: relative; 77 | right: $i / 24 * 100%; 78 | } 79 | } 80 | } 81 | 82 | // md >= 992px 83 | .el-col-md-0 { 84 | display: none; 85 | } 86 | @include res(md) { 87 | @for $i from 0 through 24 { 88 | 89 | .el-col-md-#{$i} { 90 | width: $i / 24 * 100%; 91 | } 92 | 93 | .el-col-md-offset-#{$i} { 94 | margin-left: $i / 24 * 100%; 95 | } 96 | 97 | .el-col-md-push-#{$i} { 98 | position: relative; 99 | left: $i / 24 * 100%; 100 | } 101 | 102 | .el-col-md-pull-#{$i} { 103 | position: relative; 104 | right: $i / 24 * 100%; 105 | } 106 | } 107 | } 108 | 109 | // lg >= 1200px 110 | .el-col-lg-0 { 111 | display: none; 112 | } 113 | 114 | @include res(lg) { 115 | @for $i from 0 through 24 { 116 | 117 | .el-col-lg-#{$i} { 118 | width: $i / 24 * 100%; 119 | } 120 | 121 | .el-col-lg-offset-#{$i} { 122 | margin-left: $i / 24 * 100%; 123 | } 124 | 125 | .el-col-lg-push-#{$i} { 126 | position: relative; 127 | left: $i / 24 * 100%; 128 | } 129 | 130 | .el-col-lg-pull-#{$i} { 131 | position: relative; 132 | right: $i / 24 * 100%; 133 | } 134 | } 135 | } 136 | 137 | // xl >= 1920px 138 | .el-col-xl-0 { 139 | display: none; 140 | } 141 | 142 | @include res(xl) { 143 | @for $i from 0 through 24 { 144 | 145 | .el-col-xl-#{$i} { 146 | width: $i / 24 * 100%; 147 | } 148 | 149 | .el-col-xl-offset-#{$i} { 150 | margin-left: $i / 24 * 100%; 151 | } 152 | 153 | .el-col-xl-push-#{$i} { 154 | position: relative; 155 | left: $i / 24 * 100%; 156 | } 157 | 158 | .el-col-xl-pull-#{$i} { 159 | position: relative; 160 | right: $i / 24 * 100%; 161 | } 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /src/assets/theme-chalk/common/var.scss: -------------------------------------------------------------------------------- 1 | /* Header 2 | --------------------------*/ 3 | $--header-padding: 0 20px !default; 4 | 5 | /* Footer 6 | --------------------------*/ 7 | $--footer-padding: 0 20px !default; 8 | 9 | /* Main 10 | --------------------------*/ 11 | $--main-padding: 0 20px !default; 12 | 13 | /** Color 14 | ---------------------------*/ 15 | $--color-primary: #409eff !default; 16 | $--color-white: #ffffff !default; 17 | $--color-black: #000000 !default; 18 | $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; 19 | $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; 20 | $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; 21 | $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; 22 | $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; 23 | $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; 24 | $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; 25 | $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; 26 | $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; 27 | // 辅助色 28 | $--color-success: #67c23a !default; // 成功颜色 29 | $--color-success-light: mix($--color-white, $--color-success, 80%) !default; 30 | $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; 31 | $--color-warning: #e6a23c !default; // 警告颜色 32 | $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; 33 | $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; 34 | $--color-danger: #f56c6c !default; // 危险颜色 35 | $--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; 36 | $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; 37 | $--color-info: #909399 !default; // 信息颜色 38 | $--color-info-light: mix($--color-white, $--color-info, 80%) !default; 39 | $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; 40 | // 中性色 41 | $--color-text-primary: #303133 !default; // 主要文字 42 | $--color-text-regular: #606266 !default; // 常规文字 43 | $--color-text-secondary: #909399 !default; // 次要文字 44 | $--color-text-placeholder: #c0c4cc !default; // 占位文字 45 | $--border-color-base: #dcdfe6 !default; // 一级边框 46 | $--border-color-light: #e4e7eD !default; // 二级边框 47 | $--border-color-lighter: #ebeef5 !default; // 三级边框 48 | $--border-color-extra-light: #f2f6fc !default; // 四级边框 49 | 50 | /** Typography 51 | -------------------------------*/ 52 | $--font-path: 'fonts'; // 字体路径 53 | $--font-size-extra-large: 20px !default; // 主标题 54 | $--font-size-large: 18px !default; // 标题 55 | $--font-size-medium: 16px !default; // 小标题 56 | $--font-size-base: 14px !default; // 正文 57 | $--font-size-small: 13px !default; // 正文（小） 58 | $--font-size-extra-small: 12px !default; // 正文（小） 59 | 60 | /** Border 61 | ----------------------------*/ 62 | $--border-width-base: 1px !default; 63 | $--border-style-base: solid !default; 64 | $--border-base: 1px solid $--border-color-base !default; 65 | $--border-radius-base: 4px !default; // 大圆角 66 | $--border-radius-small: 2px !default; // 小圆角 67 | $--border-radius-zero: 0 !default; // 无圆角 68 | $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; 69 | $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, .1) !default; 70 | 71 | /* Break Point 72 | --------------------------*/ 73 | $--sm: 768px !default; 74 | $--md: 992px !default; 75 | $--lg: 1200px !default; 76 | $--xl: 1920px !default; 77 | 78 | $--breakpoints: ( 79 | 'xs': (max-width: $--sm - 1), 80 | 'sm': (min-width: $--sm), 81 | 'md': (min-width: $--md), 82 | 'lg': (min-width: $--lg), 83 | 'xl': (min-width: $--xl), 84 | ); 85 | 86 | $--breakpoints-spec: ( 87 | 'xs-only': (max-width: $--sm - 1), 88 | 'sm-and-up': (min-width: $--sm), 89 | 'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md -1})', 90 | 'sm-and-down': (max-width: $--md - 1), 91 | 'md-and-up': (min-width: $--md), 92 | 'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg -1})', 93 | 'md-and-down': (max-width: $--lg - 1), 94 | 'lg-and-up': (min-width: $--lg), 95 | 'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})', 96 | 'lg-and-down': (max-width: $--xl - 1), 97 | 'xl-only': (min-width: $--xl), 98 | ) -------------------------------------------------------------------------------- /src/assets/theme-chalk/icon.scss: -------------------------------------------------------------------------------- 1 | @import "./common/var.scss"; 2 | 3 | @font-face { 4 | font-family: 'element-icons'; 5 | src: url('#{$--font-path}/element-icons.woff') format('woff'), 6 | url('#{$--font-path}/element-icons.ttf') format('truetype'); 7 | } 8 | 9 | [class^="el-icon-"], [class*="el-icon-"] { 10 | font-family: 'element-icons' !important; 11 | display: inline-block; 12 | font-style: normal; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | .el-icon-ice-cream-round:before { 18 | content: "\e6a0"; 19 | } 20 | 21 | .el-icon-ice-cream-square:before { 22 | content: "\e6a3"; 23 | } 24 | 25 | .el-icon-lollipop:before { 26 | content: "\e6a4"; 27 | } 28 | 29 | .el-icon-potato-strips:before { 30 | content: "\e6a5"; 31 | } 32 | 33 | .el-icon-milk-tea:before { 34 | content: "\e6a6"; 35 | } 36 | 37 | .el-icon-ice-drink:before { 38 | content: "\e6a7"; 39 | } 40 | 41 | .el-icon-ice-tea:before { 42 | content: "\e6a9"; 43 | } 44 | 45 | .el-icon-coffee:before { 46 | content: "\e6aa"; 47 | } 48 | 49 | .el-icon-orange:before { 50 | content: "\e6ab"; 51 | } 52 | 53 | .el-icon-pear:before { 54 | content: "\e6ac"; 55 | } 56 | 57 | .el-icon-apple:before { 58 | content: "\e6ad"; 59 | } 60 | 61 | .el-icon-cherry:before { 62 | content: "\e6ae"; 63 | } 64 | 65 | .el-icon-watermelon:before { 66 | content: "\e6af"; 67 | } 68 | 69 | .el-icon-grape:before { 70 | content: "\e6b0"; 71 | } 72 | 73 | .el-icon-refrigerator:before { 74 | content: "\e6b1"; 75 | } 76 | 77 | .el-icon-goblet-square-full:before { 78 | content: "\e6b2"; 79 | } 80 | 81 | .el-icon-goblet-square:before { 82 | content: "\e6b3"; 83 | } 84 | 85 | .el-icon-goblet-full:before { 86 | content: "\e6b4"; 87 | } 88 | 89 | .el-icon-goblet:before { 90 | content: "\e6b5"; 91 | } 92 | 93 | .el-icon-cold-drink:before { 94 | content: "\e6b6"; 95 | } 96 | 97 | .el-icon-coffee-cup:before { 98 | content: "\e6b8"; 99 | } 100 | 101 | .el-icon-water-cup:before { 102 | content: "\e6b9"; 103 | } 104 | 105 | .el-icon-hot-water:before { 106 | content: "\e6ba"; 107 | } 108 | 109 | .el-icon-ice-cream:before { 110 | content: "\e6bb"; 111 | } 112 | 113 | .el-icon-dessert:before { 114 | content: "\e6bc"; 115 | } 116 | 117 | .el-icon-sugar:before { 118 | content: "\e6bd"; 119 | } 120 | 121 | .el-icon-tableware:before { 122 | content: "\e6be"; 123 | } 124 | 125 | .el-icon-burger:before { 126 | content: "\e6bf"; 127 | } 128 | 129 | .el-icon-knife-fork:before { 130 | content: "\e6c1"; 131 | } 132 | 133 | .el-icon-fork-spoon:before { 134 | content: "\e6c2"; 135 | } 136 | 137 | .el-icon-chicken:before { 138 | content: "\e6c3"; 139 | } 140 | 141 | .el-icon-food:before { 142 | content: "\e6c4"; 143 | } 144 | 145 | .el-icon-dish-1:before { 146 | content: "\e6c5"; 147 | } 148 | 149 | .el-icon-dish:before { 150 | content: "\e6c6"; 151 | } 152 | 153 | .el-icon-moon-night:before { 154 | content: "\e6ee"; 155 | } 156 | 157 | .el-icon-moon:before { 158 | content: "\e6f0"; 159 | } 160 | 161 | .el-icon-cloudy-and-sunny:before { 162 | content: "\e6f1"; 163 | } 164 | 165 | .el-icon-partly-cloudy:before { 166 | content: "\e6f2"; 167 | } 168 | 169 | .el-icon-cloudy:before { 170 | content: "\e6f3"; 171 | } 172 | 173 | .el-icon-sunny:before { 174 | content: "\e6f6"; 175 | } 176 | 177 | .el-icon-sunset:before { 178 | content: "\e6f7"; 179 | } 180 | 181 | .el-icon-sunrise-1:before { 182 | content: "\e6f8"; 183 | } 184 | 185 | .el-icon-sunrise:before { 186 | content: "\e6f9"; 187 | } 188 | 189 | .el-icon-heavy-rain:before { 190 | content: "\e6fa"; 191 | } 192 | 193 | .el-icon-lightning:before { 194 | content: "\e6fb"; 195 | } 196 | 197 | .el-icon-light-rain:before { 198 | content: "\e6fc"; 199 | } 200 | 201 | .el-icon-wind-power:before { 202 | content: "\e6fd"; 203 | } 204 | 205 | .el-icon-baseball:before { 206 | content: "\e712"; 207 | } 208 | 209 | .el-icon-soccer:before { 210 | content: "\e713"; 211 | } 212 | 213 | .el-icon-football:before { 214 | content: "\e715"; 215 | } 216 | 217 | .el-icon-basketball:before { 218 | content: "\e716"; 219 | } 220 | 221 | .el-icon-ship:before { 222 | content: "\e73f"; 223 | } 224 | 225 | .el-icon-truck:before { 226 | content: "\e740"; 227 | } 228 | 229 | .el-icon-bicycle:before { 230 | content: "\e741"; 231 | } 232 | 233 | .el-icon-mobile-phone:before { 234 | content: "\e6d3"; 235 | } 236 | 237 | .el-icon-service:before { 238 | content: "\e6d4"; 239 | } 240 | 241 | .el-icon-key:before { 242 | content: "\e6e2"; 243 | } 244 | 245 | .el-icon-unlock:before { 246 | content: "\e6e4"; 247 | } 248 | 249 | .el-icon-lock:before { 250 | content: "\e6e5"; 251 | } 252 | 253 | .el-icon-watch:before { 254 | content: "\e6fe"; 255 | } 256 | 257 | .el-icon-watch-1:before { 258 | content: "\e6ff"; 259 | } 260 | 261 | .el-icon-timer:before { 262 | content: "\e702"; 263 | } 264 | 265 | .el-icon-alarm-clock:before { 266 | content: "\e703"; 267 | } 268 | 269 | .el-icon-map-location:before { 270 | content: "\e704"; 271 | } 272 | 273 | .el-icon-delete-location:before { 274 | content: "\e705"; 275 | } 276 | 277 | .el-icon-add-location:before { 278 | content: "\e706"; 279 | } 280 | 281 | .el-icon-location-information:before { 282 | content: "\e707"; 283 | } 284 | 285 | .el-icon-location-outline:before { 286 | content: "\e708"; 287 | } 288 | 289 | .el-icon-location:before { 290 | content: "\e79e"; 291 | } 292 | 293 | .el-icon-place:before { 294 | content: "\e709"; 295 | } 296 | 297 | .el-icon-discover:before { 298 | content: "\e70a"; 299 | } 300 | 301 | .el-icon-first-aid-kit:before { 302 | content: "\e70b"; 303 | } 304 | 305 | .el-icon-trophy-1:before { 306 | content: "\e70c"; 307 | } 308 | 309 | .el-icon-trophy:before { 310 | content: "\e70d"; 311 | } 312 | 313 | .el-icon-medal:before { 314 | content: "\e70e"; 315 | } 316 | 317 | .el-icon-medal-1:before { 318 | content: "\e70f"; 319 | } 320 | 321 | .el-icon-stopwatch:before { 322 | content: "\e710"; 323 | } 324 | 325 | .el-icon-mic:before { 326 | content: "\e711"; 327 | } 328 | 329 | .el-icon-copy-document:before { 330 | content: "\e718"; 331 | } 332 | 333 | .el-icon-full-screen:before { 334 | content: "\e719"; 335 | } 336 | 337 | .el-icon-switch-button:before { 338 | content: "\e71b"; 339 | } 340 | 341 | .el-icon-aim:before { 342 | content: "\e71c"; 343 | } 344 | 345 | .el-icon-crop:before { 346 | content: "\e71d"; 347 | } 348 | 349 | .el-icon-odometer:before { 350 | content: "\e71e"; 351 | } 352 | 353 | .el-icon-time:before { 354 | content: "\e71f"; 355 | } 356 | 357 | .el-icon-bangzhu:before { 358 | content: "\e724"; 359 | } 360 | 361 | .el-icon-close-notification:before { 362 | content: "\e726"; 363 | } 364 | 365 | .el-icon-microphone:before { 366 | content: "\e727"; 367 | } 368 | 369 | .el-icon-turn-off-microphone:before { 370 | content: "\e728"; 371 | } 372 | 373 | .el-icon-position:before { 374 | content: "\e729"; 375 | } 376 | 377 | .el-icon-postcard:before { 378 | content: "\e72a"; 379 | } 380 | 381 | .el-icon-message:before { 382 | content: "\e72b"; 383 | } 384 | 385 | .el-icon-chat-line-square:before { 386 | content: "\e72d"; 387 | } 388 | 389 | .el-icon-chat-dot-square:before { 390 | content: "\e72e"; 391 | } 392 | 393 | .el-icon-chat-dot-round:before { 394 | content: "\e72f"; 395 | } 396 | 397 | .el-icon-chat-square:before { 398 | content: "\e730"; 399 | } 400 | 401 | .el-icon-chat-line-round:before { 402 | content: "\e731"; 403 | } 404 | 405 | .el-icon-chat-round:before { 406 | content: "\e732"; 407 | } 408 | 409 | .el-icon-set-up:before { 410 | content: "\e733"; 411 | } 412 | 413 | .el-icon-turn-off:before { 414 | content: "\e734"; 415 | } 416 | 417 | .el-icon-open:before { 418 | content: "\e735"; 419 | } 420 | 421 | .el-icon-connection:before { 422 | content: "\e736"; 423 | } 424 | 425 | .el-icon-link:before { 426 | content: "\e737"; 427 | } 428 | 429 | .el-icon-cpu:before { 430 | content: "\e738"; 431 | } 432 | 433 | .el-icon-thumb:before { 434 | content: "\e739"; 435 | } 436 | 437 | .el-icon-female:before { 438 | content: "\e73a"; 439 | } 440 | 441 | .el-icon-male:before { 442 | content: "\e73b"; 443 | } 444 | 445 | .el-icon-guide:before { 446 | content: "\e73c"; 447 | } 448 | 449 | .el-icon-news:before { 450 | content: "\e73e"; 451 | } 452 | 453 | .el-icon-price-tag:before { 454 | content: "\e744"; 455 | } 456 | 457 | .el-icon-discount:before { 458 | content: "\e745"; 459 | } 460 | 461 | .el-icon-wallet:before { 462 | content: "\e747"; 463 | } 464 | 465 | .el-icon-coin:before { 466 | content: "\e748"; 467 | } 468 | 469 | .el-icon-money:before { 470 | content: "\e749"; 471 | } 472 | 473 | .el-icon-bank-card:before { 474 | content: "\e74a"; 475 | } 476 | 477 | .el-icon-box:before { 478 | content: "\e74b"; 479 | } 480 | 481 | .el-icon-present:before { 482 | content: "\e74c"; 483 | } 484 | 485 | .el-icon-sell:before { 486 | content: "\e6d5"; 487 | } 488 | 489 | .el-icon-sold-out:before { 490 | content: "\e6d6"; 491 | } 492 | 493 | .el-icon-shopping-bag-2:before { 494 | content: "\e74d"; 495 | } 496 | 497 | .el-icon-shopping-bag-1:before { 498 | content: "\e74e"; 499 | } 500 | 501 | .el-icon-shopping-cart-2:before { 502 | content: "\e74f"; 503 | } 504 | 505 | .el-icon-shopping-cart-1:before { 506 | content: "\e750"; 507 | } 508 | 509 | .el-icon-shopping-cart-full:before { 510 | content: "\e751"; 511 | } 512 | 513 | .el-icon-smoking:before { 514 | content: "\e752"; 515 | } 516 | 517 | .el-icon-no-smoking:before { 518 | content: "\e753"; 519 | } 520 | 521 | .el-icon-house:before { 522 | content: "\e754"; 523 | } 524 | 525 | .el-icon-table-lamp:before { 526 | content: "\e755"; 527 | } 528 | 529 | .el-icon-school:before { 530 | content: "\e756"; 531 | } 532 | 533 | .el-icon-office-building:before { 534 | content: "\e757"; 535 | } 536 | 537 | .el-icon-toilet-paper:before { 538 | content: "\e758"; 539 | } 540 | 541 | .el-icon-notebook-2:before { 542 | content: "\e759"; 543 | } 544 | 545 | .el-icon-notebook-1:before { 546 | content: "\e75a"; 547 | } 548 | 549 | .el-icon-files:before { 550 | content: "\e75b"; 551 | } 552 | 553 | .el-icon-collection:before { 554 | content: "\e75c"; 555 | } 556 | 557 | .el-icon-receiving:before { 558 | content: "\e75d"; 559 | } 560 | 561 | .el-icon-suitcase-1:before { 562 | content: "\e760"; 563 | } 564 | 565 | .el-icon-suitcase:before { 566 | content: "\e761"; 567 | } 568 | 569 | .el-icon-film:before { 570 | content: "\e763"; 571 | } 572 | 573 | .el-icon-collection-tag:before { 574 | content: "\e765"; 575 | } 576 | 577 | .el-icon-data-analysis:before { 578 | content: "\e766"; 579 | } 580 | 581 | .el-icon-pie-chart:before { 582 | content: "\e767"; 583 | } 584 | 585 | .el-icon-data-board:before { 586 | content: "\e768"; 587 | } 588 | 589 | .el-icon-data-line:before { 590 | content: "\e76d"; 591 | } 592 | 593 | .el-icon-reading:before { 594 | content: "\e769"; 595 | } 596 | 597 | .el-icon-magic-stick:before { 598 | content: "\e76a"; 599 | } 600 | 601 | .el-icon-coordinate:before { 602 | content: "\e76b"; 603 | } 604 | 605 | .el-icon-mouse:before { 606 | content: "\e76c"; 607 | } 608 | 609 | .el-icon-brush:before { 610 | content: "\e76e"; 611 | } 612 | 613 | .el-icon-headset:before { 614 | content: "\e76f"; 615 | } 616 | 617 | .el-icon-umbrella:before { 618 | content: "\e770"; 619 | } 620 | 621 | .el-icon-scissors:before { 622 | content: "\e771"; 623 | } 624 | 625 | .el-icon-mobile:before { 626 | content: "\e773"; 627 | } 628 | 629 | .el-icon-attract:before { 630 | content: "\e774"; 631 | } 632 | 633 | .el-icon-monitor:before { 634 | content: "\e775"; 635 | } 636 | 637 | .el-icon-search:before { 638 | content: "\e778"; 639 | } 640 | 641 | .el-icon-takeaway-box:before { 642 | content: "\e77a"; 643 | } 644 | 645 | .el-icon-paperclip:before { 646 | content: "\e77d"; 647 | } 648 | 649 | .el-icon-printer:before { 650 | content: "\e77e"; 651 | } 652 | 653 | .el-icon-document-add:before { 654 | content: "\e782"; 655 | } 656 | 657 | .el-icon-document:before { 658 | content: "\e785"; 659 | } 660 | 661 | .el-icon-document-checked:before { 662 | content: "\e786"; 663 | } 664 | 665 | .el-icon-document-copy:before { 666 | content: "\e787"; 667 | } 668 | 669 | .el-icon-document-delete:before { 670 | content: "\e788"; 671 | } 672 | 673 | .el-icon-document-remove:before { 674 | content: "\e789"; 675 | } 676 | 677 | .el-icon-tickets:before { 678 | content: "\e78b"; 679 | } 680 | 681 | .el-icon-folder-checked:before { 682 | content: "\e77f"; 683 | } 684 | 685 | .el-icon-folder-delete:before { 686 | content: "\e780"; 687 | } 688 | 689 | .el-icon-folder-remove:before { 690 | content: "\e781"; 691 | } 692 | 693 | .el-icon-folder-add:before { 694 | content: "\e783"; 695 | } 696 | 697 | .el-icon-folder-opened:before { 698 | content: "\e784"; 699 | } 700 | 701 | .el-icon-folder:before { 702 | content: "\e78a"; 703 | } 704 | 705 | .el-icon-edit-outline:before { 706 | content: "\e764"; 707 | } 708 | 709 | .el-icon-edit:before { 710 | content: "\e78c"; 711 | } 712 | 713 | .el-icon-date:before { 714 | content: "\e78e"; 715 | } 716 | 717 | .el-icon-c-scale-to-original:before { 718 | content: "\e7c6"; 719 | } 720 | 721 | .el-icon-view:before { 722 | content: "\e6ce"; 723 | } 724 | 725 | .el-icon-loading:before { 726 | content: "\e6cf"; 727 | } 728 | 729 | .el-icon-rank:before { 730 | content: "\e6d1"; 731 | } 732 | 733 | .el-icon-sort-down:before { 734 | content: "\e7c4"; 735 | } 736 | 737 | .el-icon-sort-up:before { 738 | content: "\e7c5"; 739 | } 740 | 741 | .el-icon-sort:before { 742 | content: "\e6d2"; 743 | } 744 | 745 | .el-icon-finished:before { 746 | content: "\e6cd"; 747 | } 748 | 749 | .el-icon-refresh-left:before { 750 | content: "\e6c7"; 751 | } 752 | 753 | .el-icon-refresh-right:before { 754 | content: "\e6c8"; 755 | } 756 | 757 | .el-icon-refresh:before { 758 | content: "\e6d0"; 759 | } 760 | 761 | .el-icon-video-play:before { 762 | content: "\e7c0"; 763 | } 764 | 765 | .el-icon-video-pause:before { 766 | content: "\e7c1"; 767 | } 768 | 769 | .el-icon-d-arrow-right:before { 770 | content: "\e6dc"; 771 | } 772 | 773 | .el-icon-d-arrow-left:before { 774 | content: "\e6dd"; 775 | } 776 | 777 | .el-icon-arrow-up:before { 778 | content: "\e6e1"; 779 | } 780 | 781 | .el-icon-arrow-down:before { 782 | content: "\e6df"; 783 | } 784 | 785 | .el-icon-arrow-right:before { 786 | content: "\e6e0"; 787 | } 788 | 789 | .el-icon-arrow-left:before { 790 | content: "\e6de"; 791 | } 792 | 793 | .el-icon-top-right:before { 794 | content: "\e6e7"; 795 | } 796 | 797 | .el-icon-top-left:before { 798 | content: "\e6e8"; 799 | } 800 | 801 | .el-icon-top:before { 802 | content: "\e6e6"; 803 | } 804 | 805 | .el-icon-bottom:before { 806 | content: "\e6eb"; 807 | } 808 | 809 | .el-icon-right:before { 810 | content: "\e6e9"; 811 | } 812 | 813 | .el-icon-back:before { 814 | content: "\e6ea"; 815 | } 816 | 817 | .el-icon-bottom-right:before { 818 | content: "\e6ec"; 819 | } 820 | 821 | .el-icon-bottom-left:before { 822 | content: "\e6ed"; 823 | } 824 | 825 | .el-icon-caret-top:before { 826 | content: "\e78f"; 827 | } 828 | 829 | .el-icon-caret-bottom:before { 830 | content: "\e790"; 831 | } 832 | 833 | .el-icon-caret-right:before { 834 | content: "\e791"; 835 | } 836 | 837 | .el-icon-caret-left:before { 838 | content: "\e792"; 839 | } 840 | 841 | .el-icon-d-caret:before { 842 | content: "\e79a"; 843 | } 844 | 845 | .el-icon-share:before { 846 | content: "\e793"; 847 | } 848 | 849 | .el-icon-menu:before { 850 | content: "\e798"; 851 | } 852 | 853 | .el-icon-s-grid:before { 854 | content: "\e7a6"; 855 | } 856 | 857 | .el-icon-s-check:before { 858 | content: "\e7a7"; 859 | } 860 | 861 | .el-icon-s-data:before { 862 | content: "\e7a8"; 863 | } 864 | 865 | .el-icon-s-opportunity:before { 866 | content: "\e7aa"; 867 | } 868 | 869 | .el-icon-s-custom:before { 870 | content: "\e7ab"; 871 | } 872 | 873 | .el-icon-s-claim:before { 874 | content: "\e7ad"; 875 | } 876 | 877 | .el-icon-s-finance:before { 878 | content: "\e7ae"; 879 | } 880 | 881 | .el-icon-s-comment:before { 882 | content: "\e7af"; 883 | } 884 | 885 | .el-icon-s-flag:before { 886 | content: "\e7b0"; 887 | } 888 | 889 | .el-icon-s-marketing:before { 890 | content: "\e7b1"; 891 | } 892 | 893 | .el-icon-s-shop:before { 894 | content: "\e7b4"; 895 | } 896 | 897 | .el-icon-s-open:before { 898 | content: "\e7b5"; 899 | } 900 | 901 | .el-icon-s-management:before { 902 | content: "\e7b6"; 903 | } 904 | 905 | .el-icon-s-ticket:before { 906 | content: "\e7b7"; 907 | } 908 | 909 | .el-icon-s-release:before { 910 | content: "\e7b8"; 911 | } 912 | 913 | .el-icon-s-home:before { 914 | content: "\e7b9"; 915 | } 916 | 917 | .el-icon-s-promotion:before { 918 | content: "\e7ba"; 919 | } 920 | 921 | .el-icon-s-operation:before { 922 | content: "\e7bb"; 923 | } 924 | 925 | .el-icon-s-unfold:before { 926 | content: "\e7bc"; 927 | } 928 | 929 | .el-icon-s-fold:before { 930 | content: "\e7a9"; 931 | } 932 | 933 | .el-icon-s-platform:before { 934 | content: "\e7bd"; 935 | } 936 | 937 | .el-icon-s-order:before { 938 | content: "\e7be"; 939 | } 940 | 941 | .el-icon-s-cooperation:before { 942 | content: "\e7bf"; 943 | } 944 | 945 | .el-icon-bell:before { 946 | content: "\e725"; 947 | } 948 | 949 | .el-icon-message-solid:before { 950 | content: "\e799"; 951 | } 952 | 953 | .el-icon-video-camera:before { 954 | content: "\e772"; 955 | } 956 | 957 | .el-icon-video-camera-solid:before { 958 | content: "\e796"; 959 | } 960 | 961 | .el-icon-camera:before { 962 | content: "\e779"; 963 | } 964 | 965 | .el-icon-camera-solid:before { 966 | content: "\e79b"; 967 | } 968 | 969 | .el-icon-download:before { 970 | content: "\e77c"; 971 | } 972 | 973 | .el-icon-upload2:before { 974 | content: "\e77b"; 975 | } 976 | 977 | .el-icon-upload:before { 978 | content: "\e7c3"; 979 | } 980 | 981 | .el-icon-picture-outline-round:before { 982 | content: "\e75f"; 983 | } 984 | 985 | .el-icon-picture-outline:before { 986 | content: "\e75e"; 987 | } 988 | 989 | .el-icon-picture:before { 990 | content: "\e79f"; 991 | } 992 | 993 | .el-icon-close:before { 994 | content: "\e6db"; 995 | } 996 | 997 | .el-icon-check:before { 998 | content: "\e6da"; 999 | } 1000 | 1001 | .el-icon-plus:before { 1002 | content: "\e6d9"; 1003 | } 1004 | 1005 | .el-icon-minus:before { 1006 | content: "\e6d8"; 1007 | } 1008 | 1009 | .el-icon-help:before { 1010 | content: "\e73d"; 1011 | } 1012 | 1013 | .el-icon-s-help:before { 1014 | content: "\e7b3"; 1015 | } 1016 | 1017 | .el-icon-circle-close:before { 1018 | content: "\e78d"; 1019 | } 1020 | 1021 | .el-icon-circle-check:before { 1022 | content: "\e720"; 1023 | } 1024 | 1025 | .el-icon-circle-plus-outline:before { 1026 | content: "\e723"; 1027 | } 1028 | 1029 | .el-icon-remove-outline:before { 1030 | content: "\e722"; 1031 | } 1032 | 1033 | .el-icon-zoom-out:before { 1034 | content: "\e776"; 1035 | } 1036 | 1037 | .el-icon-zoom-in:before { 1038 | content: "\e777"; 1039 | } 1040 | 1041 | .el-icon-error:before { 1042 | content: "\e79d"; 1043 | } 1044 | 1045 | .el-icon-success:before { 1046 | content: "\e79c"; 1047 | } 1048 | 1049 | .el-icon-circle-plus:before { 1050 | content: "\e7a0"; 1051 | } 1052 | 1053 | .el-icon-remove:before { 1054 | content: "\e7a2"; 1055 | } 1056 | 1057 | .el-icon-info:before { 1058 | content: "\e7a1"; 1059 | } 1060 | 1061 | .el-icon-question:before { 1062 | content: "\e7a4"; 1063 | } 1064 | 1065 | .el-icon-warning-outline:before { 1066 | content: "\e6c9"; 1067 | } 1068 | 1069 | .el-icon-warning:before { 1070 | content: "\e7a3"; 1071 | } 1072 | 1073 | .el-icon-goods:before { 1074 | content: "\e7c2"; 1075 | } 1076 | 1077 | .el-icon-s-goods:before { 1078 | content: "\e7b2"; 1079 | } 1080 | 1081 | .el-icon-star-off:before { 1082 | content: "\e717"; 1083 | } 1084 | 1085 | .el-icon-star-on:before { 1086 | content: "\e797"; 1087 | } 1088 | 1089 | .el-icon-more-outline:before { 1090 | content: "\e6cc"; 1091 | } 1092 | 1093 | .el-icon-more:before { 1094 | content: "\e794"; 1095 | } 1096 | 1097 | .el-icon-phone-outline:before { 1098 | content: "\e6cb"; 1099 | } 1100 | 1101 | .el-icon-phone:before { 1102 | content: "\e795"; 1103 | } 1104 | 1105 | .el-icon-user:before { 1106 | content: "\e6e3"; 1107 | } 1108 | 1109 | .el-icon-user-solid:before { 1110 | content: "\e7a5"; 1111 | } 1112 | 1113 | .el-icon-setting:before { 1114 | content: "\e6ca"; 1115 | } 1116 | 1117 | .el-icon-s-tools:before { 1118 | content: "\e7ac"; 1119 | } 1120 | 1121 | .el-icon-delete:before { 1122 | content: "\e6d7"; 1123 | } 1124 | 1125 | .el-icon-delete-solid:before { 1126 | content: "\e7c9"; 1127 | } 1128 | 1129 | .el-icon-eleme:before { 1130 | content: "\e7c7"; 1131 | } 1132 | 1133 | .el-icon-platform-eleme:before { 1134 | content: "\e7ca"; 1135 | } 1136 | 1137 | .el-icon-loading { 1138 | animation: rotating 2s linear infinite; 1139 | } 1140 | 1141 | @keyframes rotating { 1142 | 0% { 1143 | transform: rotateZ(0deg); 1144 | } 1145 | 100% { 1146 | transform: rotateZ(360deg); 1147 | } 1148 | } --------------------------------------------------------------------------------