diff --git a/packages/design-system/.github/workflows/deploy.yml b/packages/design-system/.github/workflows/deploy.yml
index 0bd6d45ece..2ab9ccee75 100644
--- a/packages/design-system/.github/workflows/deploy.yml
+++ b/packages/design-system/.github/workflows/deploy.yml
@@ -3,13 +3,13 @@ name: Deploy Docs
 on:
   push:
     branches:
-      - main 
+      - main
 
 jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      NODE_OPTIONS: '--max_old_space_size=4096'
+      NODE_OPTIONS: "--max_old_space_size=4096"
     steps:
       - uses: actions/checkout@v2
       - name: Build and deploy
@@ -37,4 +37,4 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages
           force: true
-          directory: 'storybook-static'
+          directory: "storybook-static"
diff --git a/packages/design-system/.storybook/font-awesome-icons.js b/packages/design-system/.storybook/font-awesome-icons.js
index fd895b51a8..779577a395 100644
--- a/packages/design-system/.storybook/font-awesome-icons.js
+++ b/packages/design-system/.storybook/font-awesome-icons.js
@@ -1,88 +1,87 @@
-
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { library } from "@fortawesome/fontawesome-svg-core";
 import {
-	faAngleDoubleLeft,
-	faAngleDown,
-	faAngleRight,
-	faAngleUp,
-	faArrowLeft,
-	faArrowRight,
-	faAt,
-	faBook,
-	faBug,
-	faCalendar,
-	faCheck,
-	faChevronDown,
-	faChevronUp,
-	faCode,
-	faCodeBranch,
-	faCog,
-	faCogs,
-	faClone,
-	faCloud,
-	faCloudDownloadAlt,
-	faCopy,
-	faCut,
-	faDotCircle,
-	faEdit,
-	faEnvelope,
-	faEye,
-	faExclamationTriangle,
-	faExpand,
-	faExternalLinkAlt,
-	faExchangeAlt,
-	faFile,
-	faFileArchive,
-	faFileCode,
-	faFileDownload,
-	faFileExport,
-	faFileImport,
-	faFilePdf,
-	faFolderOpen,
-	faGift,
-	faHdd,
-	faHome,
-	faHourglass,
-	faImage,
-	faInbox,
-	faInfo,
-	faInfoCircle,
-	faKey,
-	faMapSigns,
-	faNetworkWired,
-	faPause,
-	faPen,
-	faPlay,
-	faPlayCircle,
-	faPlus,
-	faPlusCircle,
-	faQuestion,
-	faQuestionCircle,
-	faRedo,
-	faRss,
-	faSave,
-	faSearch,
-	faSearchMinus,
-	faSearchPlus,
-	faServer,
-	faSignInAlt,
-	faSlidersH,
-	faSpinner,
-	faStop,
-	faSun,
-	faSync,
-	faSyncAlt,
-	faTable,
-	faTasks,
-	faTerminal,
-	faThLarge,
-	faTimes,
-	faTrash,
-	faUndo,
-	faUsers,
-	faClock,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+  faAngleDoubleLeft,
+  faAngleDown,
+  faAngleRight,
+  faAngleUp,
+  faArrowLeft,
+  faArrowRight,
+  faAt,
+  faBook,
+  faBug,
+  faCalendar,
+  faCheck,
+  faChevronDown,
+  faChevronUp,
+  faCode,
+  faCodeBranch,
+  faCog,
+  faCogs,
+  faClone,
+  faCloud,
+  faCloudDownloadAlt,
+  faCopy,
+  faCut,
+  faDotCircle,
+  faEdit,
+  faEnvelope,
+  faEye,
+  faExclamationTriangle,
+  faExpand,
+  faExternalLinkAlt,
+  faExchangeAlt,
+  faFile,
+  faFileArchive,
+  faFileCode,
+  faFileDownload,
+  faFileExport,
+  faFileImport,
+  faFilePdf,
+  faFolderOpen,
+  faGift,
+  faHdd,
+  faHome,
+  faHourglass,
+  faImage,
+  faInbox,
+  faInfo,
+  faInfoCircle,
+  faKey,
+  faMapSigns,
+  faNetworkWired,
+  faPause,
+  faPen,
+  faPlay,
+  faPlayCircle,
+  faPlus,
+  faPlusCircle,
+  faQuestion,
+  faQuestionCircle,
+  faRedo,
+  faRss,
+  faSave,
+  faSearch,
+  faSearchMinus,
+  faSearchPlus,
+  faServer,
+  faSignInAlt,
+  faSlidersH,
+  faSpinner,
+  faStop,
+  faSun,
+  faSync,
+  faSyncAlt,
+  faTable,
+  faTasks,
+  faTerminal,
+  faThLarge,
+  faTimes,
+  faTrash,
+  faUndo,
+  faUsers,
+  faClock,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 library.add(faAngleDoubleLeft);
 library.add(faAngleDown);
diff --git a/packages/design-system/.storybook/fonts.scss b/packages/design-system/.storybook/fonts.scss
index e6e5ab65d6..67902a3696 100644
--- a/packages/design-system/.storybook/fonts.scss
+++ b/packages/design-system/.storybook/fonts.scss
@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
index 3f8b0d5005..dc6b29a6f2 100644
--- a/packages/design-system/.storybook/main.js
+++ b/packages/design-system/.storybook/main.js
@@ -1,46 +1,38 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-	"stories": [
-		"../src/**/*.stories.mdx",
-		"../src/**/*.stories.@(js|jsx|ts|tsx)"
-	],
-	"addons": [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		'storybook-addon-designs',
-		'storybook-addon-themes'
-	],
-	webpackFinal: async (config, {
-		configType
-	}) => {
-		config.module.rules.push({
-			test: /\.scss$/,
-			oneOf: [{
-					resourceQuery: /module/,
-					use: [
-						'vue-style-loader',
-						{
-							loader: 'css-loader',
-							options: {
-								modules: true
-							}
-						},
-						'sass-loader',
-					],
-					include: path.resolve(__dirname, '../'),
-				},
-				{
-					use: [
-						'vue-style-loader',
-						'css-loader',
-						'sass-loader',
-					],
-					include: path.resolve(__dirname, '../'),
-				}
-			]
-		});
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-addon-designs",
+    "storybook-addon-themes",
+  ],
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      oneOf: [
+        {
+          resourceQuery: /module/,
+          use: [
+            "vue-style-loader",
+            {
+              loader: "css-loader",
+              options: {
+                modules: true,
+              },
+            },
+            "sass-loader",
+          ],
+          include: path.resolve(__dirname, "../"),
+        },
+        {
+          use: ["vue-style-loader", "css-loader", "sass-loader"],
+          include: path.resolve(__dirname, "../"),
+        },
+      ],
+    });
 
-		return config;
-	},
-}
\ No newline at end of file
+    return config;
+  },
+};
diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js
index e0931629d9..65b96d35bc 100644
--- a/packages/design-system/.storybook/preview.js
+++ b/packages/design-system/.storybook/preview.js
@@ -1,58 +1,60 @@
-import './font-awesome-icons';
-import './storybook.scss';
+import "./font-awesome-icons";
+import "./storybook.scss";
 
-import Vue from 'vue';
+import Vue from "vue";
 
 // https://github.com/storybookjs/storybook/issues/6153
 Vue.prototype.toJSON = function () {
-	return this;
+  return this;
 };
 
 export const parameters = {
-	actions: {
-		argTypesRegex: "^on[A-Z].*"
-	},
-	controls: {
-		matchers: {
-			color: /(background|color)$/i,
-			date: /Date$/,
-		},
-	},
-	backgrounds: {
-		default: '--color-background-xlight',
-		values: [{
-				name: '--color-background-dark',
-				value: 'var(--color-background-dark)',
-			},
-			{
-				name: '--color-background-base',
-				value: 'var(--color-background-base)'
-			},
-			{
-				name: '--color-background-light',
-				value: 'var(--color-background-light)'
-			},
-			{
-				name: '--color-background-lighter',
-				value: 'var(--color-background-lighter)'
-			},
-			{
-				name: '--color-background-xlight',
-				value: 'var(--color-background-xlight)'
-			}
-		],
-	},
-	themes: {
-		list: [{
-				name: 'dark',
-				class: 'theme-dark',
-				color: '#000'
-			}
-		],
-	},
-	options: {
-		storySort: {
-			order: ['Docs', 'Styleguide', 'Atoms']
-		}
-	}
-}
\ No newline at end of file
+  actions: {
+    argTypesRegex: "^on[A-Z].*",
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: {
+    default: "--color-background-xlight",
+    values: [
+      {
+        name: "--color-background-dark",
+        value: "var(--color-background-dark)",
+      },
+      {
+        name: "--color-background-base",
+        value: "var(--color-background-base)",
+      },
+      {
+        name: "--color-background-light",
+        value: "var(--color-background-light)",
+      },
+      {
+        name: "--color-background-lighter",
+        value: "var(--color-background-lighter)",
+      },
+      {
+        name: "--color-background-xlight",
+        value: "var(--color-background-xlight)",
+      },
+    ],
+  },
+  themes: {
+    list: [
+      {
+        name: "dark",
+        class: "theme-dark",
+        color: "#000",
+      },
+    ],
+  },
+  options: {
+    storySort: {
+      order: ["Docs", "Styleguide", "Atoms"],
+    },
+  },
+};
diff --git a/packages/design-system/.storybook/storybook.scss b/packages/design-system/.storybook/storybook.scss
index 97b6afaa65..15f686f085 100644
--- a/packages/design-system/.storybook/storybook.scss
+++ b/packages/design-system/.storybook/storybook.scss
@@ -5,4 +5,4 @@
 );
 
 @use "~/theme/src/reset.scss";
-@use "~/theme/src/index.scss"
+@use "~/theme/src/index.scss";
diff --git a/packages/design-system/README.md b/packages/design-system/README.md
index f52c891ca0..e0ee3a1bae 100644
--- a/packages/design-system/README.md
+++ b/packages/design-system/README.md
@@ -5,36 +5,43 @@ A component system for [n8n](https://n8n.io) using Storybook to preview.
 You can [preview project here](https://n8n-io.github.io/n8n-design-system/index.html).
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run storybook
 ```
 
 ### Build static pages
+
 ```
 npm run build:storybook
 ```
 
 ### Run your unit tests
+
 ```
 npm run test:unit
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Build css files
+
 ```
 npm run build:theme
 ```
 
 ### Monitor theme files and build any changes
+
 ```
 npm run watch:theme
-```
\ No newline at end of file
+```
diff --git a/packages/design-system/src/components/N8nButton/Button.stories.js b/packages/design-system/src/components/N8nButton/Button.stories.js
index cc005d314d..f02ce6d400 100644
--- a/packages/design-system/src/components/N8nButton/Button.stories.js
+++ b/packages/design-system/src/components/N8nButton/Button.stories.js
@@ -120,4 +120,3 @@ Text.args = {
   label: "Button",
   icon: "plus-circle",
 };
-
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 41564fd474..591f4910f0 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -109,15 +109,17 @@ export default {
       ...(props.fullWidth ? { width: "100%" } : {}),
     };
   },
-  getClass(props: {type: string, theme?: string}) {
-	return props.type === 'text' ? 'text' : `${props.type}-${props.theme || 'primary'}`;
+  getClass(props: { type: string; theme?: string }) {
+    return props.type === "text"
+      ? "text"
+      : `${props.type}-${props.theme || "primary"}`;
   },
 };
 </script>
 
 <style lang="scss" module>
 @function lightness($h, $s, $l, $lightness) {
-  @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}))
+  @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}));
 }
 
 .button {
@@ -138,156 +140,156 @@ export default {
 
 $active-shade-percent: 10%;
 $color-primary-shade: lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	-($active-shade-percent)
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  -($active-shade-percent)
 );
 
 $color-success-shade: lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	-($active-shade-percent)
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  -($active-shade-percent)
 );
 
 $color-warning-shade: lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	-($active-shade-percent)
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  -($active-shade-percent)
 );
 
 $color-danger-shade: lightness(
-	--color-danger-h,
-	--color-danger-s,
-	--color-danger-l,
-	-($active-shade-percent)
+  --color-danger-h,
+  --color-danger-s,
+  --color-danger-l,
+  -($active-shade-percent)
 );
 
 .primary-primary {
-	composes: button;
+  composes: button;
 }
 
 .primary-success {
-	composes: button;
-	--button-background-color: var(--color-success);
-	--button-color: var(--color-text-xlight);
-	--button-border-color: var(--color-success);
-	--button-active-color: var(--color-text-xlight);
-	--button-active-border-color: #{$color-success-shade};
-	--button-active-background-color: #{$color-success-shade};
+  composes: button;
+  --button-background-color: var(--color-success);
+  --button-color: var(--color-text-xlight);
+  --button-border-color: var(--color-success);
+  --button-active-color: var(--color-text-xlight);
+  --button-active-border-color: #{$color-success-shade};
+  --button-active-background-color: #{$color-success-shade};
 }
 
 .primary-warning {
-	composes: button;
-	--button-background-color: var(--color-warning);
-	--button-color: var(--color-text-xlight);
-	--button-border-color: var(--color-warning);
-	--button-active-color: var(--color-text-xlight);
-	--button-active-border-color: #{$color-warning-shade};
-	--button-active-background-color: #{$color-warning-shade};
+  composes: button;
+  --button-background-color: var(--color-warning);
+  --button-color: var(--color-text-xlight);
+  --button-border-color: var(--color-warning);
+  --button-active-color: var(--color-text-xlight);
+  --button-active-border-color: #{$color-warning-shade};
+  --button-active-background-color: #{$color-warning-shade};
 }
 
 .primary-danger {
-	composes: button;
-	--button-background-color: var(--color-danger);
-	--button-color: var(--color-text-xlight);
-	--button-border-color: var(--color-danger);
-	--button-active-color: var(--color-text-xlight);
-	--button-active-border-color: #{$color-danger-shade};
-	--button-active-background-color: #{$color-danger-shade};
+  composes: button;
+  --button-background-color: var(--color-danger);
+  --button-color: var(--color-text-xlight);
+  --button-border-color: var(--color-danger);
+  --button-active-color: var(--color-text-xlight);
+  --button-active-border-color: #{$color-danger-shade};
+  --button-active-background-color: #{$color-danger-shade};
 }
 
 .outline {
-	--button-background-color: var(--color-foreground-xlight);
-	--button-disabled-background-color: var(--color-foreground-xlight);
-	--button-active-background-color: var(--color-foreground-xlight);
+  --button-background-color: var(--color-foreground-xlight);
+  --button-disabled-background-color: var(--color-foreground-xlight);
+  --button-active-background-color: var(--color-foreground-xlight);
 }
 
 .outline-primary {
-	composes: button;
-	composes: outline;
-	--button-color: var(--color-primary);
-	--button-active-border-color: #{$color-primary-shade};
-	--button-active-color: #{$color-primary-shade};
+  composes: button;
+  composes: outline;
+  --button-color: var(--color-primary);
+  --button-active-border-color: #{$color-primary-shade};
+  --button-active-color: #{$color-primary-shade};
 }
 
 .outline-success {
-	composes: button;
-	composes: outline;
-	--button-color: var(--color-success);
-	--button-border-color: var(--color-success);
-	--button-active-color: #{$color-success-shade};
-	--button-active-border-color: #{$color-success-shade};
+  composes: button;
+  composes: outline;
+  --button-color: var(--color-success);
+  --button-border-color: var(--color-success);
+  --button-active-color: #{$color-success-shade};
+  --button-active-border-color: #{$color-success-shade};
 }
 
 .outline-warning {
-	composes: button;
-	composes: outline;
-	--button-color: var(--color-warning);
-	--button-border-color: var(--color-warning);
-	--button-active-color: #{$color-warning-shade};
-	--button-active-border-color: #{$color-warning-shade};
+  composes: button;
+  composes: outline;
+  --button-color: var(--color-warning);
+  --button-border-color: var(--color-warning);
+  --button-active-color: #{$color-warning-shade};
+  --button-active-border-color: #{$color-warning-shade};
 }
 
 .outline-danger {
-	composes: button;
-	composes: outline;
-	--button-color: var(--color-danger);
-	--button-border-color: var(--color-danger);
-	--button-active-color: #{$color-danger-shade};
-	--button-active-border-color: #{$color-danger-shade};
+  composes: button;
+  composes: outline;
+  --button-color: var(--color-danger);
+  --button-border-color: var(--color-danger);
+  --button-active-color: #{$color-danger-shade};
+  --button-active-border-color: #{$color-danger-shade};
 }
 
 .light-primary {
-	composes: button;
-	--button-color: var(--color-primary);
-	--button-border-color: var(--color-primary-tint-2);
-	--button-background-color: var(--color-primary-tint-2);
-	--button-active-background-color: var(--color-primary-tint-2);
-	--button-active-color: #{$color-primary-shade};
-	--button-active-border-color: #{$color-primary-shade};
+  composes: button;
+  --button-color: var(--color-primary);
+  --button-border-color: var(--color-primary-tint-2);
+  --button-background-color: var(--color-primary-tint-2);
+  --button-active-background-color: var(--color-primary-tint-2);
+  --button-active-color: #{$color-primary-shade};
+  --button-active-border-color: #{$color-primary-shade};
 }
 
 .light-success {
-	composes: button;
-	--button-color: var(--color-success);
-	--button-border-color: var(--color-success-tint-1);
-	--button-background-color: var(--color-success-tint-1);
-	--button-active-background-color: var(--color-success-tint-1);
-	--button-active-color: #{$color-success-shade};
-	--button-active-border-color: #{$color-success-shade};
+  composes: button;
+  --button-color: var(--color-success);
+  --button-border-color: var(--color-success-tint-1);
+  --button-background-color: var(--color-success-tint-1);
+  --button-active-background-color: var(--color-success-tint-1);
+  --button-active-color: #{$color-success-shade};
+  --button-active-border-color: #{$color-success-shade};
 }
 
 .light-warning {
-	composes: button;
-	--button-color: var(--color-warning);
-	--button-border-color: var(--color-warning-tint-2);
-	--button-background-color: var(--color-warning-tint-2);
-	--button-active-background-color: var(--color-warning-tint-2);
-	--button-active-color: #{$color-warning-shade};
-	--button-active-border-color: #{$color-warning-shade};
+  composes: button;
+  --button-color: var(--color-warning);
+  --button-border-color: var(--color-warning-tint-2);
+  --button-background-color: var(--color-warning-tint-2);
+  --button-active-background-color: var(--color-warning-tint-2);
+  --button-active-color: #{$color-warning-shade};
+  --button-active-border-color: #{$color-warning-shade};
 }
 
 .light-danger {
-	composes: button;
-	--button-color: var(--color-danger);
-	--button-border-color: var(--color-danger-tint-1);
-	--button-background-color: var(--color-danger-tint-1);
-	--button-active-background-color: var(--color-danger-tint-1);
-	--button-active-color: #{$color-danger-shade};
-	--button-active-border-color: #{$color-danger-shade};
+  composes: button;
+  --button-color: var(--color-danger);
+  --button-border-color: var(--color-danger-tint-1);
+  --button-background-color: var(--color-danger-tint-1);
+  --button-active-background-color: var(--color-danger-tint-1);
+  --button-active-color: #{$color-danger-shade};
+  --button-active-border-color: #{$color-danger-shade};
 }
 
 .text {
-	composes: button;
-	--button-color: var(--color-text-light);
-	--button-border-color: transparent;
-	--button-background-color: transparent;
-	--button-active-background-color: transparent;
-	--button-active-color: var(--color-primary);
-	--button-active-border-color: transparent;
+  composes: button;
+  --button-color: var(--color-text-light);
+  --button-border-color: transparent;
+  --button-background-color: transparent;
+  --button-active-background-color: transparent;
+  --button-active-color: var(--color-primary);
+  --button-active-border-color: transparent;
 }
 
 .icon {
diff --git a/packages/design-system/src/components/N8nButton/index.d.ts b/packages/design-system/src/components/N8nButton/index.d.ts
index 48e238c7df..57ee4e6f6f 100644
--- a/packages/design-system/src/components/N8nButton/index.d.ts
+++ b/packages/design-system/src/components/N8nButton/index.d.ts
@@ -1,7 +1,7 @@
-import { N8nComponent, N8nComponentSize } from "../component";
+import { N8nComponent, N8nComponentSize } from '../component';
 
 /** Button type */
-export type ButtonType = "primary" | "outline" | "light";
+export type ButtonType = 'primary' | 'outline' | 'light';
 
 /** Button Component */
 export declare class N8nButton extends N8nComponent {
diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue
index 0351ba4d0b..97ee1c2bd0 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.vue
+++ b/packages/design-system/src/components/N8nIcon/Icon.vue
@@ -43,9 +43,9 @@ export default {
 }
 
 ._md {
-  font-size: .95em;
-  height: .95em;
-  width: .95em !important;
+  font-size: 0.95em;
+  height: 0.95em;
+  width: 0.95em !important;
 }
 
 ._lg {
diff --git a/packages/design-system/src/components/N8nIcon/index.d.ts b/packages/design-system/src/components/N8nIcon/index.d.ts
index 9135c281b2..e5bd895e82 100644
--- a/packages/design-system/src/components/N8nIcon/index.d.ts
+++ b/packages/design-system/src/components/N8nIcon/index.d.ts
@@ -1,4 +1,4 @@
-import { N8nComponent, N8nComponentSize } from "../component";
+import { N8nComponent, N8nComponentSize } from '../component';
 
 /** Button Component */
 export declare class N8nIcon extends N8nComponent {
diff --git a/packages/design-system/src/components/N8nIconButton/index.d.ts b/packages/design-system/src/components/N8nIconButton/index.d.ts
index 131ec8b46e..375853e271 100644
--- a/packages/design-system/src/components/N8nIconButton/index.d.ts
+++ b/packages/design-system/src/components/N8nIconButton/index.d.ts
@@ -1,4 +1,4 @@
-import { N8nComponent, N8nComponentSize } from "../component";
+import { N8nComponent, N8nComponentSize } from '../component';
 
 /** Icon Button Component */
 export declare class N8nIconButton extends N8nComponent {
@@ -6,7 +6,7 @@ export declare class N8nIconButton extends N8nComponent {
   title: string;
 
   /** Button size */
-  size: N8nComponentSize | "xl";
+  size: N8nComponentSize | 'xl';
 
   /** icon size */
   iconSize: N8nComponentSize;
diff --git a/packages/design-system/src/components/N8nSpinner/index.d.ts b/packages/design-system/src/components/N8nSpinner/index.d.ts
index c07959d4c8..c70d21c825 100644
--- a/packages/design-system/src/components/N8nSpinner/index.d.ts
+++ b/packages/design-system/src/components/N8nSpinner/index.d.ts
@@ -1,4 +1,4 @@
-import { N8nComponent, N8nComponentSize } from "../component";
+import { N8nComponent, N8nComponentSize } from '../component';
 
 /** Spinner Component */
 export declare class N8nSpinner extends N8nComponent {
diff --git a/packages/design-system/src/components/component.d.ts b/packages/design-system/src/components/component.d.ts
index 70a036bd28..d4be002f17 100644
--- a/packages/design-system/src/components/component.d.ts
+++ b/packages/design-system/src/components/component.d.ts
@@ -1,4 +1,4 @@
-import Vue from "vue";
+import Vue from 'vue';
 
 /** N8n component common definition */
 export declare class N8nComponent extends Vue {
@@ -7,4 +7,4 @@ export declare class N8nComponent extends Vue {
 }
 
 /** Component size definition for button, input, etc */
-export type N8nComponentSize = "lg" | "md" | "sm";
+export type N8nComponentSize = 'lg' | 'md' | 'sm';
diff --git a/packages/design-system/src/components/index.d.ts b/packages/design-system/src/components/index.d.ts
index dee4c7c617..19b518d8ae 100644
--- a/packages/design-system/src/components/index.d.ts
+++ b/packages/design-system/src/components/index.d.ts
@@ -1 +1 @@
-declare module "./N8nButton";
+declare module './N8nButton';
diff --git a/packages/design-system/src/docs/Introduction.stories.mdx b/packages/design-system/src/docs/Introduction.stories.mdx
index 60205b0a0a..b1fed0fac6 100644
--- a/packages/design-system/src/docs/Introduction.stories.mdx
+++ b/packages/design-system/src/docs/Introduction.stories.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import { Meta } from "@storybook/addon-docs";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
 
 <Meta title="Docs/Introduction" />
 
@@ -182,14 +182,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
@@ -206,6 +214,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>src/stories/Introduction.stories.mdx</code>
 </div>
diff --git a/packages/design-system/src/main.d.ts b/packages/design-system/src/main.d.ts
index 2cfd2b2c43..ed730c2988 100644
--- a/packages/design-system/src/main.d.ts
+++ b/packages/design-system/src/main.d.ts
@@ -1 +1 @@
-declare module "n8n-design-system";
+declare module 'n8n-design-system';
diff --git a/packages/design-system/src/shims-element-ui.d.ts b/packages/design-system/src/shims-element-ui.d.ts
index bb2c199ccb..fb5d567dd6 100644
--- a/packages/design-system/src/shims-element-ui.d.ts
+++ b/packages/design-system/src/shims-element-ui.d.ts
@@ -1 +1 @@
-declare module "element-ui/packages/button";
+declare module 'element-ui/packages/button';
diff --git a/packages/design-system/src/shims-tsx.d.ts b/packages/design-system/src/shims-tsx.d.ts
index 2bcdf9fbcb..3b88b58292 100644
--- a/packages/design-system/src/shims-tsx.d.ts
+++ b/packages/design-system/src/shims-tsx.d.ts
@@ -1,4 +1,4 @@
-import Vue, { VNode } from "vue";
+import Vue, { VNode } from 'vue';
 
 declare global {
   namespace JSX {
diff --git a/packages/design-system/src/shims-vue.d.ts b/packages/design-system/src/shims-vue.d.ts
index 0660bd67a5..8f6f410263 100644
--- a/packages/design-system/src/shims-vue.d.ts
+++ b/packages/design-system/src/shims-vue.d.ts
@@ -1,4 +1,4 @@
-declare module "*.vue" {
-  import Vue from "vue";
+declare module '*.vue' {
+  import Vue from 'vue';
   export default Vue;
 }
diff --git a/packages/design-system/src/styleguide/border.stories.mdx b/packages/design-system/src/styleguide/border.stories.mdx
index 36cccb88a6..b3e58b832d 100644
--- a/packages/design-system/src/styleguide/border.stories.mdx
+++ b/packages/design-system/src/styleguide/border.stories.mdx
@@ -1,50 +1,49 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import VariableTable from './VariableTable.vue'
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import VariableTable from "./VariableTable.vue";
 
-<Meta 
-	title="Styleguide/Border" 
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898'
-		}
-	}}
+<Meta
+  title="Styleguide/Border"
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+    },
+  }}
 />
 
 # Border Radius
 
 <Canvas>
-	<Story name="border-radius">
-		{{
-		template: `<variable-table :variables="['--border-radius-small','--border-radius-base']" />`,
-		components: {
-			VariableTable,
-		}
-		}}
-	</Story>
+  <Story name="border-radius">
+    {{
+      template: `<variable-table :variables="['--border-radius-small','--border-radius-base']" />`,
+      components: {
+        VariableTable,
+      },
+    }}
+  </Story>
 </Canvas>
 
 # Border Width
 
 <Canvas>
-	<Story name="border-width">
-		{{
-		template: `<variable-table :variables="['--border-width-base']" />`,
-		components: {
-			VariableTable,
-		}
-		}}
-	</Story>
+  <Story name="border-width">
+    {{
+      template: `<variable-table :variables="['--border-width-base']" />`,
+      components: {
+        VariableTable,
+      },
+    }}
+  </Story>
 </Canvas>
 
 <Canvas>
-	<Story name="border-style">
-		{{
-		template: `<variable-table :variables="['--border-style-base']" />`,
-		components: {
-			VariableTable,
-		}
-		}}
-	</Story>
+  <Story name="border-style">
+    {{
+      template: `<variable-table :variables="['--border-style-base']" />`,
+      components: {
+        VariableTable,
+      },
+    }}
+  </Story>
 </Canvas>
-
diff --git a/packages/design-system/src/styleguide/colors.stories.mdx b/packages/design-system/src/styleguide/colors.stories.mdx
index 3e5c80e666..a692ea84e5 100644
--- a/packages/design-system/src/styleguide/colors.stories.mdx
+++ b/packages/design-system/src/styleguide/colors.stories.mdx
@@ -1,14 +1,14 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import ColorCircles from './ColorCircles.vue';
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import ColorCircles from "./ColorCircles.vue";
 
-<Meta 
-	title="Styleguide/Colors" 
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23'
-		}
-	}}
+<Meta
+  title="Styleguide/Colors"
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23",
+    },
+  }}
 />
 
 # Colors
@@ -16,117 +16,116 @@ import ColorCircles from './ColorCircles.vue';
 ## Primary
 
 <Canvas>
-	<Story name="primary">
-		{{
-		template: `<color-circles :colors="['--color-primary-shade-1', '--color-primary', '--color-primary-tint-1', '--color-primary-tint-2', '--color-primary-tint-3']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
+  <Story name="primary">
+    {{
+      template: `<color-circles :colors="['--color-primary-shade-1', '--color-primary', '--color-primary-tint-1', '--color-primary-tint-2', '--color-primary-tint-3']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
 </Canvas>
 
-## Outline 
+## Outline
 
 <Canvas>
-	<Story name="secondary">
-		{{
-		template: `<color-circles :colors="['--color-secondary']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
+  <Story name="secondary">
+    {{
+      template: `<color-circles :colors="['--color-secondary']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Success
 
 <Canvas>
-	<Story name="success">
-		{{
-		template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
+  <Story name="success">
+    {{
+      template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
 </Canvas>
 
-
 ## Warning
 
 <Canvas>
-	<Story name="warning">
-		{{
-		template: `<color-circles :colors="['--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
+  <Story name="warning">
+    {{
+      template: `<color-circles :colors="['--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Danger
 
 <Canvas>
-	<Story name="danger">
-		{{
-		template: `<color-circles :colors="['--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
+  <Story name="danger">
+    {{
+      template: `<color-circles :colors="['--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Info
 
 <Canvas>
-	<Story name="info">
-		{{
-		template: `<color-circles :colors="['--color-info', '--color-info-tint-1', '--color-info-tint-2']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
+  <Story name="info">
+    {{
+      template: `<color-circles :colors="['--color-info', '--color-info-tint-1', '--color-info-tint-2']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Text
 
 <Canvas>
-	<Story name="text">
-		{{
-		template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
+  <Story name="text">
+    {{
+      template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Foreground
 
 <Canvas>
-	<Story name="foreground">
-		{{
-		template: `<color-circles :colors="['--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
+  <Story name="foreground">
+    {{
+      template: `<color-circles :colors="['--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Background
 
 <Canvas>
-	<Story name="background">
-		{{
-		template: `<color-circles :colors="['--color-background-dark', '--color-background-base', '--color-background-light', '--color-background-lighter', '--color-background-xlight']" />`,
-		components: {
-			ColorCircles,
-		}
-		}}
-	</Story>
-</Canvas>
\ No newline at end of file
+  <Story name="background">
+    {{
+      template: `<color-circles :colors="['--color-background-dark', '--color-background-base', '--color-background-light', '--color-background-lighter', '--color-background-xlight']" />`,
+      components: {
+        ColorCircles,
+      },
+    }}
+  </Story>
+</Canvas>
diff --git a/packages/design-system/src/styleguide/fonts.stories.mdx b/packages/design-system/src/styleguide/fonts.stories.mdx
index 0aeed2a26e..75ec4b50d1 100644
--- a/packages/design-system/src/styleguide/fonts.stories.mdx
+++ b/packages/design-system/src/styleguide/fonts.stories.mdx
@@ -1,62 +1,59 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import Sizes from './Sizes.vue';
-import VariableTable from './VariableTable.vue'
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import Sizes from "./Sizes.vue";
+import VariableTable from "./VariableTable.vue";
 
-<Meta 
-	title="Styleguide/Font" 
-/>
+<Meta title="Styleguide/Font" />
 
 # Font
 
 ## Font Sizes
 
 <Canvas>
-	<Story name="font-size">
-		{{
-		template: `<sizes :variables="['--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']" attr="font-size" />`,
-		components: {
-			Sizes,
-		}
-		}}
-	</Story>
+  <Story name="font-size">
+    {{
+      template: `<sizes :variables="['--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']" attr="font-size" />`,
+      components: {
+        Sizes,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Line Heights
 
 <Canvas>
-	<Story name="line-height">
-		{{
-		template: `<variable-table :variables="['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']" />`,
-		components: {
-			VariableTable,
-		}
-		}}
-	</Story>
+  <Story name="line-height">
+    {{
+      template: `<variable-table :variables="['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']" />`,
+      components: {
+        VariableTable,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Font Weights
 
 <Canvas>
-	<Story name="font-weight">
-		{{
-		template: `<variable-table :variables="['--font-weight-regular','--font-weight-bold']" attr="font-weight" />`,
-		components: {
-			VariableTable,
-		}
-		}}
-	</Story>
+  <Story name="font-weight">
+    {{
+      template: `<variable-table :variables="['--font-weight-regular','--font-weight-bold']" attr="font-weight" />`,
+      components: {
+        VariableTable,
+      },
+    }}
+  </Story>
 </Canvas>
 
 ## Font Family
 
 <Canvas>
-	<Story name="font-family">
-		{{
-		template: `<variable-table :variables="['--font-family']" attr="font-family" />`,
-		components: {
-			VariableTable,
-		}
-		}}
-	</Story>
+  <Story name="font-family">
+    {{
+      template: `<variable-table :variables="['--font-family']" attr="font-family" />`,
+      components: {
+        VariableTable,
+      },
+    }}
+  </Story>
 </Canvas>
-
diff --git a/packages/design-system/src/styleguide/spacing.stories.mdx b/packages/design-system/src/styleguide/spacing.stories.mdx
index 2e167d4b5f..943e00f11a 100644
--- a/packages/design-system/src/styleguide/spacing.stories.mdx
+++ b/packages/design-system/src/styleguide/spacing.stories.mdx
@@ -1,26 +1,26 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import Sizes from './Sizes.vue';
-import TextClasses from './TextClasses.vue';
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import Sizes from "./Sizes.vue";
+import TextClasses from "./TextClasses.vue";
 
-<Meta 
-	title="Styleguide/Spacing" 
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898'
-		}
-	}}
+<Meta
+  title="Styleguide/Spacing"
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+    },
+  }}
 />
 
 # Spacing
 
 <Canvas>
-	<Story name="spacing">
-		{{
-		template: `<sizes :variables="['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']" />`,
-		components: {
-			Sizes,
-		}
-		}}
-	</Story>
+  <Story name="spacing">
+    {{
+      template: `<sizes :variables="['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']" />`,
+      components: {
+        Sizes,
+      },
+    }}
+  </Story>
 </Canvas>
diff --git a/packages/design-system/src/styleguide/text.stories.mdx b/packages/design-system/src/styleguide/text.stories.mdx
index e07eac296f..f28b83d815 100644
--- a/packages/design-system/src/styleguide/text.stories.mdx
+++ b/packages/design-system/src/styleguide/text.stories.mdx
@@ -1,38 +1,38 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import TextClasses from './TextClasses.vue';
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import TextClasses from "./TextClasses.vue";
 
-<Meta 
-	title="Styleguide/Text" 
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898'
-		}
-	}}
+<Meta
+  title="Styleguide/Text"
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+    },
+  }}
 />
 
-#  Regular
+# Regular
 
 <Canvas>
-	<Story name="regular">
-		{{
-		template: `<text-classes />`,
-		components: {
-			TextClasses,
-		}
-		}}
-	</Story>
+  <Story name="regular">
+    {{
+      template: `<text-classes />`,
+      components: {
+        TextClasses,
+      },
+    }}
+  </Story>
 </Canvas>
 
-# Bold 
+# Bold
 
 <Canvas>
-	<Story name="bold">
-		{{
-		template: `<text-classes postfix="-bold" />`,
-		components: {
-			TextClasses,
-		}
-		}}
-	</Story>
-</Canvas>
\ No newline at end of file
+  <Story name="bold">
+    {{
+      template: `<text-classes postfix="-bold" />`,
+      components: {
+        TextClasses,
+      },
+    }}
+  </Story>
+</Canvas>
diff --git a/packages/design-system/theme/README.md b/packages/design-system/theme/README.md
index 9ba4301353..d5cdaa66e5 100644
--- a/packages/design-system/theme/README.md
+++ b/packages/design-system/theme/README.md
@@ -1,4 +1,5 @@
 # element-theme-n8n
+
 > element component chalk theme by css variable.
 
 [Online preview](https://n8n-io.github.io/element-theme-n8n/)
@@ -9,6 +10,7 @@ CSS Variable
 https://caniuse.com/css-variables
 
 ## Installation
+
 ```shell
 npm i element-theme-n8n -S
 ```
@@ -16,24 +18,31 @@ npm i element-theme-n8n -S
 ## Usage
 
 Use Sass import
+
 ```css
-@import 'element-theme-n8n';
+@import "element-theme-n8n";
 ```
 
 Or Use webpack
+
 ```javascript
-import 'element-theme-n8n';
+import "element-theme-n8n";
 ```
 
 Or
+
 ```html
-<link rel="stylesheet" href="path/to/node_modules/element-theme-chalk/css-variable/lib/index.css">
+<link
+  rel="stylesheet"
+  href="path/to/node_modules/element-theme-chalk/css-variable/lib/index.css"
+/>
 ```
 
-##  Import on demand
+## Import on demand
+
 ```javascript
-import 'element-theme-n8n/dist/input.css';
-import 'element-theme-n8n/dist/select.css';
+import "element-theme-n8n/dist/input.css";
+import "element-theme-n8n/dist/select.css";
 
 // ...
 ```
diff --git a/packages/design-system/theme/docs.css b/packages/design-system/theme/docs.css
index 2cd2b7eb05..ace10b012e 100644
--- a/packages/design-system/theme/docs.css
+++ b/packages/design-system/theme/docs.css
@@ -1,1935 +1,2373 @@
 .color-wrap {
-	padding: 20px;
+  padding: 20px;
 }
 .box-card-header {
-	display: flex;
-	justify-content:space-between;
-	align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .demo-line {
-    margin: 15px 0;
+  margin: 15px 0;
 }
 .component-preview h4 {
-    font-size: 20px;
-    margin: 40px 0 20px;
-    color: #909399;
+  font-size: 20px;
+  margin: 40px 0 20px;
+  color: #909399;
 }
 .demo-block {
-	border:1px solid #ebebeb;
-	border-radius:3px;
-	transition:.2s
+  border: 1px solid #ebebeb;
+  border-radius: 3px;
+  transition: 0.2s;
 }
 .demo-block.hover {
-	box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)
+  box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
+    0 2px 4px 0 rgba(232, 237, 250, 0.5);
 }
 .demo-block code {
-	font-family:Menlo,Monaco,Consolas,Courier,monospace
+  font-family: Menlo, Monaco, Consolas, Courier, monospace;
 }
 .demo-block .demo-button {
-	float:right
+  float: right;
 }
 .demo-block .source {
-	padding:24px
+  padding: 24px;
 }
 .demo-block .meta {
-	background-color:#fafafa;
-	border-top:1px solid #eaeefb;
-	overflow:hidden;
-	height:0;
-	transition:height .2s
+  background-color: #fafafa;
+  border-top: 1px solid #eaeefb;
+  overflow: hidden;
+  height: 0;
+  transition: height 0.2s;
 }
 .demo-block .description {
-	padding:20px;
-	box-sizing:border-box;
-	border:1px solid #ebebeb;
-	border-radius:3px;
-	font-size:14px;
-	line-height:22px;
-	color:#666;
-	word-break:break-word;
-	margin:10px;
-	background-color:#fff
+  padding: 20px;
+  box-sizing: border-box;
+  border: 1px solid #ebebeb;
+  border-radius: 3px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #666;
+  word-break: break-word;
+  margin: 10px;
+  background-color: #fff;
 }
 .demo-block .description p {
-	margin:0;
-	line-height:26px
+  margin: 0;
+  line-height: 26px;
 }
 .demo-block .description code {
-	color:#5e6d82;
-	background-color:#e6effb;
-	margin:0 4px;
-	display:inline-block;
-	padding:1px 5px;
-	font-size:12px;
-	border-radius:3px;
-	height:18px;
-	line-height:18px
+  color: #5e6d82;
+  background-color: #e6effb;
+  margin: 0 4px;
+  display: inline-block;
+  padding: 1px 5px;
+  font-size: 12px;
+  border-radius: 3px;
+  height: 18px;
+  line-height: 18px;
 }
 .demo-block .highlight pre {
-	margin:0
+  margin: 0;
 }
 .demo-block .highlight code.hljs {
-	margin:0;
-	border:none;
-	max-height:none;
-	border-radius:0
+  margin: 0;
+  border: none;
+  max-height: none;
+  border-radius: 0;
 }
 .demo-block .highlight code.hljs:before {
-	content:none
+  content: none;
 }
 .demo-block .demo-block-control {
-	border-top:1px solid #eaeefb;
-	height:44px;
-	box-sizing:border-box;
-	background-color:#fff;
-	border-bottom-left-radius:4px;
-	border-bottom-right-radius:4px;
-	text-align:center;
-	margin-top:-1px;
-	color:#d3dce6;
-	cursor:pointer;
-	position:relative
+  border-top: 1px solid #eaeefb;
+  height: 44px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  text-align: center;
+  margin-top: -1px;
+  color: #d3dce6;
+  cursor: pointer;
+  position: relative;
 }
 .demo-block .demo-block-control.is-fixed {
-	position:fixed;
-	bottom:0;
-	width:868px
+  position: fixed;
+  bottom: 0;
+  width: 868px;
 }
 .demo-block .demo-block-control i {
-	font-size:16px;
-	line-height:44px;
-	transition:.3s
+  font-size: 16px;
+  line-height: 44px;
+  transition: 0.3s;
 }
 .demo-block .demo-block-control i.hovering {
-	transform:translateX(-40px)
+  transform: translateX(-40px);
 }
-.demo-block .demo-block-control>span {
-	position:absolute;
-	transform:translateX(-30px);
-	font-size:14px;
-	line-height:44px;
-	transition:.3s;
-	display:inline-block
+.demo-block .demo-block-control > span {
+  position: absolute;
+  transform: translateX(-30px);
+  font-size: 14px;
+  line-height: 44px;
+  transition: 0.3s;
+  display: inline-block;
 }
 .demo-block .demo-block-control:hover {
-	color:#409eff;
-	background-color:#f9fafc
+  color: #409eff;
+  background-color: #f9fafc;
 }
-.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active {
-	opacity:0;
-	transform:translateX(10px)
+.demo-block .demo-block-control .text-slide-enter,
+.demo-block .demo-block-control .text-slide-leave-active {
+  opacity: 0;
+  transform: translateX(10px);
 }
 .demo-block .demo-block-control .control-button {
-	line-height:26px;
-	position:absolute;
-	top:0;
-	right:0;
-	font-size:14px;
-	padding-left:5px;
-	padding-right:25px
+  line-height: 26px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 14px;
+  padding-left: 5px;
+  padding-right: 25px;
 }
 .footer {
-	background-color:#f7fbfd;
-	width:100%;
-	padding:40px 150px;
-	margin-top:-340px;
-	box-sizing:border-box;
-	height:340px
+  background-color: #f7fbfd;
+  width: 100%;
+  padding: 40px 150px;
+  margin-top: -340px;
+  box-sizing: border-box;
+  height: 340px;
 }
 .footer .container {
-	box-sizing:border-box;
-	width:auto
+  box-sizing: border-box;
+  width: auto;
 }
 .footer .footer-main {
-	font-size:0;
-	display:inline-block;
-	vertical-align:top;
-	margin-right:110px
+  font-size: 0;
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 110px;
 }
 .footer .footer-main h4 {
-	font-size:18px;
-	color:#333;
-	line-height:1;
-	margin:0 0 15px
+  font-size: 18px;
+  color: #333;
+  line-height: 1;
+  margin: 0 0 15px;
 }
 .footer .footer-main .footer-main-link {
-	display:block;
-	margin:0;
-	line-height:2;
-	font-size:14px;
-	color:#666
+  display: block;
+  margin: 0;
+  line-height: 2;
+  font-size: 14px;
+  color: #666;
 }
 .footer .footer-main .footer-main-link:hover {
-	color:#333
+  color: #333;
 }
 .footer .footer-social {
-	float:right;
-	text-align:right
+  float: right;
+  text-align: right;
 }
 .footer .footer-social .footer-social-title {
-	color:#666;
-	font-size:18px;
-	line-height:1;
-	margin:0 0 20px;
-	padding:0;
-	font-weight:700
+  color: #666;
+  font-size: 18px;
+  line-height: 1;
+  margin: 0 0 20px;
+  padding: 0;
+  font-weight: 700;
 }
 .footer .footer-social .elementdoc {
-	transition:.3s;
-	display:inline-block;
-	line-height:32px;
-	text-align:center;
-	color:#c8d6e8;
-	background-color:transparent;
-	size:32px;
-	font-size:32px;
-	vertical-align:middle;
-	margin-right:20px
+  transition: 0.3s;
+  display: inline-block;
+  line-height: 32px;
+  text-align: center;
+  color: #c8d6e8;
+  background-color: transparent;
+  size: 32px;
+  font-size: 32px;
+  vertical-align: middle;
+  margin-right: 20px;
 }
 .footer .footer-social .elementdoc:hover {
-	transform:scale(1.2);
-	color:#8d99ab
+  transform: scale(1.2);
+  color: #8d99ab;
 }
 .footer .footer-social .doc-icon-gitter {
-	margin-right:0
+  margin-right: 0;
 }
 .el-popover.footer-popover {
-	padding:0;
-	min-width:120px;
-	line-height:normal;
-	box-shadow:0 0 11px 0 rgba(174,187,211,.24)
+  padding: 0;
+  min-width: 120px;
+  line-height: normal;
+  box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
 }
 .el-popover.footer-popover .footer-popover-title {
-	border-bottom:1px solid #eaeefb;
-	height:30px;
-	line-height:30px;
-	text-align:center;
-	color:#99a9bf;
-	background-color:#f8f9fe
+  border-bottom: 1px solid #eaeefb;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  color: #99a9bf;
+  background-color: #f8f9fe;
 }
 .el-popover.footer-popover img {
-	size:100px;
-	margin:10px
+  size: 100px;
+  margin: 10px;
 }
-@media (max-width:1140px) {
-	.footer {
-	height:auto
+@media (max-width: 1140px) {
+  .footer {
+    height: auto;
+  }
 }
-}@media (max-width:1000px) {
-	.footer-social {
-	display:none
+@media (max-width: 1000px) {
+  .footer-social {
+    display: none;
+  }
 }
-}@media (max-width:768px) {
-	.footer .footer-main {
-	margin-bottom:30px
+@media (max-width: 768px) {
+  .footer .footer-main {
+    margin-bottom: 30px;
+  }
 }
-}.theme-picker {
-	height:80px;
-	display:inline-block
+.theme-picker {
+  height: 80px;
+  display: inline-block;
 }
 .theme-picker .el-color-picker__trigger {
-	vertical-align:middle
+  vertical-align: middle;
 }
 .theme-picker-dropdown .el-color-dropdown__link-btn {
-	display:none
+  display: none;
 }
 .algolia-search {
-	width:450px!important
+  width: 450px !important;
 }
 .algolia-search.is-empty .el-autocomplete-suggestion__list {
-	padding-bottom:0
+  padding-bottom: 0;
 }
 .algolia-search .el-autocomplete-suggestion__list {
-	position:static!important;
-	padding-bottom:28px
+  position: static !important;
+  padding-bottom: 28px;
 }
 .algolia-search li {
-	border-bottom:1px solid #ebebeb
+  border-bottom: 1px solid #ebebeb;
 }
 .algolia-search li:last-child {
-	border-bottom:none
+  border-bottom: none;
 }
 .algolia-search .algolia-highlight {
-	color:#409eff;
-	font-weight:700
+  color: #409eff;
+  font-weight: 700;
 }
 .algolia-search .algolia-search-title {
-	font-size:14px;
-	margin:6px 0;
-	line-height:1.8
+  font-size: 14px;
+  margin: 6px 0;
+  line-height: 1.8;
 }
 .algolia-search .algolia-search-separator {
-	padding:0 6px
+  padding: 0 6px;
 }
 .algolia-search .algolia-search-content {
-	font-size:12px;
-	margin:6px 0;
-	line-height:2.4;
-	overflow:hidden;
-	text-overflow:ellipsis;
-	white-space:nowrap
+  font-size: 12px;
+  margin: 6px 0;
+  line-height: 2.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .algolia-search .algolia-search-link {
-	position:absolute;
-	bottom:0;
-	left:0;
-	width:100%;
-	padding-right:20px;
-	background-color:#e4e7ed;
-	border-bottom-left-radius:4px;
-	border-bottom-right-radius:4px;
-	box-sizing:border-box;
-	text-align:right
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding-right: 20px;
+  background-color: #e4e7ed;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-sizing: border-box;
+  text-align: right;
 }
 .algolia-search .algolia-search-link:hover {
-	background-color:#e4e7ed
+  background-color: #e4e7ed;
 }
 .algolia-search .algolia-search-link img {
-	display:inline-block;
-	height:17px;
-	margin-top:10px
+  display: inline-block;
+  height: 17px;
+  margin-top: 10px;
 }
 .algolia-search .algolia-search-empty {
-	margin:5px 0;
-	text-align:center;
-	color:#999
+  margin: 5px 0;
+  text-align: center;
+  color: #999;
 }
 .progress[data-v-3285c94c] {
-	position:fixed;
-	top:0;
-	left:0;
-	right:0;
-	height:2px;
-	width:0;
-	transition:width .2s,opacity .4s;
-	opacity:1;
-	z-index:999999
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  width: 0;
+  transition: width 0.2s, opacity 0.4s;
+  opacity: 1;
+  z-index: 999999;
 }
 .loadingClass {
-	z-index:0!important
+  z-index: 0 !important;
 }
 .loadingClass .el-loading-spinner {
-	top:0;
-	margin-top:30%
+  top: 0;
+  margin-top: 30%;
 }
 .headerWrapper[data-v-70469f40] {
-	height:80px
+  height: 80px;
 }
 #v3-banner[data-v-70469f40] {
-	background-color:#409eff;
-	min-height:30px;
-	padding:5px 60px;
-	z-index:19;
-	box-sizing:border-box;
-	text-align:center;
-	color:#eee
+  background-color: #409eff;
+  min-height: 30px;
+  padding: 5px 60px;
+  z-index: 19;
+  box-sizing: border-box;
+  text-align: center;
+  color: #eee;
 }
 #v3-banner a[data-v-70469f40] {
-	color:#fff;
-	font-weight:700
+  color: #fff;
+  font-weight: 700;
 }
 .header[data-v-70469f40] {
-	height:80px;
-	background-color:#fff;
-	color:#fff;
-	top:0;
-	left:0;
-	width:100%;
-	line-height:80px;
-	z-index:100;
-	position:relative
+  height: 80px;
+  background-color: #fff;
+  color: #fff;
+  top: 0;
+  left: 0;
+  width: 100%;
+  line-height: 80px;
+  z-index: 100;
+  position: relative;
 }
 .header .container[data-v-70469f40] {
-	height:100%;
-	box-sizing:border-box;
-	border-bottom:1px solid #dcdfe6
+  height: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid #dcdfe6;
 }
 .header .nav-lang-spe[data-v-70469f40] {
-	color:#888
+  color: #888;
 }
 .header h1[data-v-70469f40] {
-	margin:0;
-	float:left;
-	font-size:32px;
-	font-weight:400
+  margin: 0;
+  float: left;
+  font-size: 32px;
+  font-weight: 400;
 }
 .header h1 a[data-v-70469f40] {
-	color:#333;
-	text-decoration:none;
-	display:block
+  color: #333;
+  text-decoration: none;
+  display: block;
 }
 .header h1 span[data-v-70469f40] {
-	font-size:12px;
-	display:inline-block;
-	width:34px;
-	height:18px;
-	border:1px solid hsla(0,0%,100%,.5);
-	text-align:center;
-	line-height:18px;
-	vertical-align:middle;
-	margin-left:10px;
-	border-radius:3px
+  font-size: 12px;
+  display: inline-block;
+  width: 34px;
+  height: 18px;
+  border: 1px solid hsla(0, 0%, 100%, 0.5);
+  text-align: center;
+  line-height: 18px;
+  vertical-align: middle;
+  margin-left: 10px;
+  border-radius: 3px;
 }
 .header .nav[data-v-70469f40] {
-	float:right;
-	height:100%;
-	line-height:80px;
-	background:transparent;
-	padding:0;
-	margin:0
+  float: right;
+  height: 100%;
+  line-height: 80px;
+  background: transparent;
+  padding: 0;
+  margin: 0;
 }
-.header .nav[data-v-70469f40]:after,.header .nav[data-v-70469f40]:before {
-	display:table;
-	content:""
+.header .nav[data-v-70469f40]:after,
+.header .nav[data-v-70469f40]:before {
+  display: table;
+  content: "";
 }
 .header .nav[data-v-70469f40]:after {
-	clear:both
+  clear: both;
 }
 .header .nav-gap[data-v-70469f40] {
-	position:relative;
-	width:1px;
-	height:80px;
-	padding:0 20px
+  position: relative;
+  width: 1px;
+  height: 80px;
+  padding: 0 20px;
 }
 .header .nav-gap[data-v-70469f40]:before {
-	content:"";
-	position:absolute;
-	top:calc(50% - 8px);
-	width:1px;
-	height:16px;
-	background:#ebebeb
+  content: "";
+  position: absolute;
+  top: calc(50% - 8px);
+  width: 1px;
+  height: 16px;
+  background: #ebebeb;
 }
-.header .nav-logo-small[data-v-70469f40],.header .nav-logo[data-v-70469f40] {
-	vertical-align:sub
+.header .nav-logo-small[data-v-70469f40],
+.header .nav-logo[data-v-70469f40] {
+  vertical-align: sub;
 }
 .header .nav-logo-small[data-v-70469f40] {
-	display:none
+  display: none;
 }
 .header .nav-item[data-v-70469f40] {
-	margin:0;
-	float:left;
-	list-style:none;
-	position:relative;
-	cursor:pointer
+  margin: 0;
+  float: left;
+  list-style: none;
+  position: relative;
+  cursor: pointer;
 }
 .header .nav-item.nav-algolia-search[data-v-70469f40] {
-	cursor:default
+  cursor: default;
 }
-.header .nav-item.lang-item[data-v-70469f40],.header .nav-item[data-v-70469f40]:last-child {
-	cursor:default;
-	margin-left:34px
+.header .nav-item.lang-item[data-v-70469f40],
+.header .nav-item[data-v-70469f40]:last-child {
+  cursor: default;
+  margin-left: 34px;
 }
-.header .nav-item.lang-item span[data-v-70469f40],.header .nav-item:last-child span[data-v-70469f40] {
-	opacity:.8
+.header .nav-item.lang-item span[data-v-70469f40],
+.header .nav-item:last-child span[data-v-70469f40] {
+  opacity: 0.8;
 }
-.header .nav-item.lang-item .nav-lang[data-v-70469f40],.header .nav-item:last-child .nav-lang[data-v-70469f40] {
-	cursor:pointer;
-	display:inline-block;
-	height:100%;
-	color:#888
+.header .nav-item.lang-item .nav-lang[data-v-70469f40],
+.header .nav-item:last-child .nav-lang[data-v-70469f40] {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  color: #888;
 }
-.header .nav-item.lang-item .nav-lang[data-v-70469f40]:hover,.header .nav-item:last-child .nav-lang[data-v-70469f40]:hover {
-	color:#409eff
+.header .nav-item.lang-item .nav-lang[data-v-70469f40]:hover,
+.header .nav-item:last-child .nav-lang[data-v-70469f40]:hover {
+  color: #409eff;
 }
-.header .nav-item.lang-item .nav-lang.active[data-v-70469f40],.header .nav-item:last-child .nav-lang.active[data-v-70469f40] {
-	font-weight:700;
-	color:#409eff
+.header .nav-item.lang-item .nav-lang.active[data-v-70469f40],
+.header .nav-item:last-child .nav-lang.active[data-v-70469f40] {
+  font-weight: 700;
+  color: #409eff;
 }
 .header .nav-item a[data-v-70469f40] {
-	text-decoration:none;
-	color:#1989fa;
-	opacity:.5;
-	display:block;
-	padding:0 22px
+  text-decoration: none;
+  color: #1989fa;
+  opacity: 0.5;
+  display: block;
+  padding: 0 22px;
 }
-.header .nav-item a.active[data-v-70469f40],.header .nav-item a[data-v-70469f40]:hover {
-	opacity:1
+.header .nav-item a.active[data-v-70469f40],
+.header .nav-item a[data-v-70469f40]:hover {
+  opacity: 1;
 }
 .header .nav-item a.active[data-v-70469f40]:after {
-	content:"";
-	display:inline-block;
-	position:absolute;
-	bottom:0;
-	left:calc(50% - 15px);
-	width:30px;
-	height:2px;
-	background:#409eff
+  content: "";
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - 15px);
+  width: 30px;
+  height: 2px;
+  background: #409eff;
 }
 .nav-dropdown[data-v-70469f40] {
-	margin-bottom:6px;
-	padding-left:18px;
-	width:100%
+  margin-bottom: 6px;
+  padding-left: 18px;
+  width: 100%;
 }
 .nav-dropdown span[data-v-70469f40] {
-	display:block;
-	width:100%;
-	font-size:16px;
-	color:#888;
-	line-height:40px;
-	transition:.2s;
-	padding-bottom:6px;
-	user-select:none
+  display: block;
+  width: 100%;
+  font-size: 16px;
+  color: #888;
+  line-height: 40px;
+  transition: 0.2s;
+  padding-bottom: 6px;
+  user-select: none;
 }
 .nav-dropdown span[data-v-70469f40]:hover {
-	cursor:pointer
+  cursor: pointer;
 }
 .nav-dropdown i[data-v-70469f40] {
-	transition:.2s;
-	font-size:12px;
-	color:#979797;
-	transform:translateY(-2px)
+  transition: 0.2s;
+  font-size: 12px;
+  color: #979797;
+  transform: translateY(-2px);
 }
-.nav-dropdown .is-active i[data-v-70469f40],.nav-dropdown .is-active span[data-v-70469f40] {
-	color:#409eff
+.nav-dropdown .is-active i[data-v-70469f40],
+.nav-dropdown .is-active span[data-v-70469f40] {
+  color: #409eff;
 }
 .nav-dropdown .is-active i[data-v-70469f40] {
-	transform:rotate(180deg) translateY(3px)
+  transform: rotate(180deg) translateY(3px);
 }
-.nav-dropdown:hover i[data-v-70469f40],.nav-dropdown:hover span[data-v-70469f40] {
-	color:#409eff
+.nav-dropdown:hover i[data-v-70469f40],
+.nav-dropdown:hover span[data-v-70469f40] {
+  color: #409eff;
 }
 .nav-dropdown-list[data-v-70469f40] {
-	width:auto
+  width: auto;
 }
-@media (max-width:850px) {
-	.header .nav-logo[data-v-70469f40] {
-	display:none
+@media (max-width: 850px) {
+  .header .nav-logo[data-v-70469f40] {
+    display: none;
+  }
+  .header .nav-logo-small[data-v-70469f40] {
+    display: inline-block;
+  }
+  .header .nav-item[data-v-70469f40] {
+    margin-left: 6px;
+  }
+  .header .nav-item.lang-item[data-v-70469f40],
+  .header .nav-item[data-v-70469f40]:last-child {
+    margin-left: 10px;
+  }
+  .header .nav-item a[data-v-70469f40] {
+    padding: 0 5px;
+  }
+  .header .nav-algolia-search[data-v-70469f40],
+  .header .nav-theme-switch[data-v-70469f40] {
+    display: none;
+  }
 }
-.header .nav-logo-small[data-v-70469f40] {
-	display:inline-block
+@media (max-width: 700px) {
+  .header .container[data-v-70469f40] {
+    padding: 0 12px;
+  }
+  .header .nav-item a[data-v-70469f40] {
+    font-size: 12px;
+    vertical-align: top;
+  }
+  .header .nav-item.lang-item[data-v-70469f40] {
+    height: 100%;
+  }
+  .header .nav-item.lang-item .nav-lang[data-v-70469f40] {
+    display: flex;
+    align-items: center;
+  }
+  .header .nav-item.lang-item .nav-lang span[data-v-70469f40] {
+    padding-bottom: 0;
+  }
+  .header .nav-dropdown[data-v-70469f40] {
+    padding: 0;
+  }
+  .header .nav-dropdown span[data-v-70469f40] {
+    font-size: 12px;
+  }
+  .header .nav-gap[data-v-70469f40] {
+    padding: 0 8px;
+  }
+  .header .nav-versions[data-v-70469f40] {
+    display: none;
+  }
 }
-.header .nav-item[data-v-70469f40] {
-	margin-left:6px
-}
-.header .nav-item.lang-item[data-v-70469f40],.header .nav-item[data-v-70469f40]:last-child {
-	margin-left:10px
-}
-.header .nav-item a[data-v-70469f40] {
-	padding:0 5px
-}
-.header .nav-algolia-search[data-v-70469f40],.header .nav-theme-switch[data-v-70469f40] {
-	display:none
-}
-}@media (max-width:700px) {
-	.header .container[data-v-70469f40] {
-	padding:0 12px
-}
-.header .nav-item a[data-v-70469f40] {
-	font-size:12px;
-	vertical-align:top
-}
-.header .nav-item.lang-item[data-v-70469f40] {
-	height:100%
-}
-.header .nav-item.lang-item .nav-lang[data-v-70469f40] {
-	display:flex;
-	align-items:center
-}
-.header .nav-item.lang-item .nav-lang span[data-v-70469f40] {
-	padding-bottom:0
-}
-.header .nav-dropdown[data-v-70469f40] {
-	padding:0
-}
-.header .nav-dropdown span[data-v-70469f40] {
-	font-size:12px
-}
-.header .nav-gap[data-v-70469f40] {
-	padding:0 8px
-}
-.header .nav-versions[data-v-70469f40] {
-	display:none
-}
-}.side-nav {
-	width:100%;
-	box-sizing:border-box;
-	padding-right:30px;
-	transition:opacity .3s
+.side-nav {
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 30px;
+  transition: opacity 0.3s;
 }
 .side-nav.is-fade {
-	transition:opacity 3s
+  transition: opacity 3s;
 }
 .side-nav li {
-	list-style:none
+  list-style: none;
 }
 .side-nav ul {
-	padding:0;
-	margin:0;
-	overflow:hidden
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
 }
-.side-nav>ul>.nav-item>a {
-	margin-top:15px
+.side-nav > ul > .nav-item > a {
+  margin-top: 15px;
 }
-.side-nav>ul>.nav-item:nth-child(-n+4)>a {
-	margin-top:0
+.side-nav > ul > .nav-item:nth-child(-n + 4) > a {
+  margin-top: 0;
 }
 .side-nav .nav-item a {
-	font-size:16px;
-	color:#333;
-	line-height:40px;
-	height:40px;
-	margin:0;
-	padding:0;
-	text-decoration:none;
-	display:block;
-	position:relative;
-	transition:.15s ease-out;
-	font-weight:700
+  font-size: 16px;
+  color: #333;
+  line-height: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: 0.15s ease-out;
+  font-weight: 700;
 }
 .side-nav .nav-item a.active {
-	color:#409eff
+  color: #409eff;
 }
 .side-nav .nav-item .nav-item a {
-	display:block;
-	height:40px;
-	color:#444;
-	line-height:40px;
-	font-size:14px;
-	overflow:hidden;
-	white-space:nowrap;
-	text-overflow:ellipsis;
-	font-weight:400
+  display: block;
+  height: 40px;
+  color: #444;
+  line-height: 40px;
+  font-size: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: 400;
 }
-.side-nav .nav-item .nav-item a.active,.side-nav .nav-item .nav-item a:hover {
-	color:#409eff
+.side-nav .nav-item .nav-item a.active,
+.side-nav .nav-item .nav-item a:hover {
+  color: #409eff;
 }
-.side-nav .nav-item.sponsors>.sub-nav {
-	margin-top:-10px
+.side-nav .nav-item.sponsors > .sub-nav {
+  margin-top: -10px;
 }
-.side-nav .nav-item.sponsors>a {
-	color:#777;
-	font-weight:300;
-	font-size:14px
+.side-nav .nav-item.sponsors > a {
+  color: #777;
+  font-weight: 300;
+  font-size: 14px;
 }
 .side-nav .nav-item.sponsors .nav-item {
-	display:inline-block
+  display: inline-block;
 }
 .side-nav .nav-item.sponsors .nav-item a {
-	height:auto;
-	display:inline-block;
-	vertical-align:middle;
-	margin:8px 12px 12px 0
+  height: auto;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 8px 12px 12px 0;
 }
 .side-nav .nav-item.sponsors .nav-item a img {
-	width:42px
+  width: 42px;
 }
 .side-nav .nav-item.sponsors .nav-item:first-child a img {
-	width:36px
+  width: 36px;
 }
 .side-nav .nav-group__title {
-	font-size:12px;
-	color:#999;
-	line-height:26px;
-	margin-top:15px
+  font-size: 12px;
+  color: #999;
+  line-height: 26px;
+  margin-top: 15px;
 }
 .side-nav #code-sponsor-widget {
-	margin:0 0 0 -20px
+  margin: 0 0 0 -20px;
 }
 .nav-dropdown-list {
-	width:120px;
-	margin-top:-8px
+  width: 120px;
+  margin-top: -8px;
 }
-.footer-nav,.nav-dropdown-list li {
-	font-size:14px
+.footer-nav,
+.nav-dropdown-list li {
+  font-size: 14px;
 }
 .footer-nav {
-	padding:40px 0;
-	color:#333
+  padding: 40px 0;
+  color: #333;
 }
 .footer-nav:after {
-	content:"";
-	display:block;
-	clear:both
+  content: "";
+  display: block;
+  clear: both;
 }
 .footer-nav i {
-	transition:.3s;
-	color:#999;
-	vertical-align:baseline
+  transition: 0.3s;
+  color: #999;
+  vertical-align: baseline;
 }
 .footer-nav-link {
-	cursor:pointer;
-	transition:.3s
+  cursor: pointer;
+  transition: 0.3s;
 }
-.footer-nav-link:hover,.footer-nav-link:hover i {
-	color:#409eff
+.footer-nav-link:hover,
+.footer-nav-link:hover i {
+  color: #409eff;
 }
 .footer-nav-left {
-	float:left;
-	margin-left:-4px
+  float: left;
+  margin-left: -4px;
 }
 .footer-nav-right {
-	float:right;
-	margin-right:-4px
+  float: right;
+  margin-right: -4px;
 }
 .demo-block.demo-alert .el-alert {
-	margin:20px 0 0
+  margin: 20px 0 0;
 }
 .demo-block.demo-alert .el-alert:first-child {
-	margin:0
+  margin: 0;
 }
 .demo-badge.demo-block .el-dropdown {
-	vertical-align:middle
+  vertical-align: middle;
 }
 .demo-badge.demo-block .share-button {
-	width:36px;
-	padding:10px
+  width: 36px;
+  padding: 10px;
 }
 .demo-badge.demo-block .mark {
-	margin-top:8px;
-	line-height:1;
-	float:right
+  margin-top: 8px;
+  line-height: 1;
+  float: right;
 }
 .demo-badge.demo-block .item {
-	margin-right:40px
+  margin-right: 40px;
 }
 .demo-border .text {
-	width:15%
+  width: 15%;
 }
 .demo-border .line {
-	width:70%
+  width: 70%;
 }
 .demo-border .line div {
-	width:100%;
-	height:0;
-	border-top:1px solid #eee
+  width: 100%;
+  height: 0;
+  border-top: 1px solid #eee;
 }
 .demo-border .line .dashed {
-	border-top:2px dashed #eee
+  border-top: 2px dashed #eee;
 }
 .demo-shadow {
-	height:100px;
-	width:50%;
-	border:1px solid #eee
+  height: 100px;
+  width: 50%;
+  border: 1px solid #eee;
 }
 .demo-shadow-text {
-	line-height:50px;
-	color:#666;
-	font-size:14px
+  line-height: 50px;
+  color: #666;
+  font-size: 14px;
 }
 .demo-radius .title {
-	color:#666;
-	font-size:18px;
-	margin:10px 0
+  color: #666;
+  font-size: 18px;
+  margin: 10px 0;
 }
 .demo-radius .value {
-	color:#333;
-	font-size:16px;
-	margin:10px 0
+  color: #333;
+  font-size: 16px;
+  margin: 10px 0;
 }
 .demo-radius .radius {
-	height:60px;
-	width:70%;
-	border:1px solid #d7dae2;
-	border-radius:0;
-	margin-top:20px
+  height: 60px;
+  width: 70%;
+  border: 1px solid #d7dae2;
+  border-radius: 0;
+  margin-top: 20px;
 }
 .demo-radius .radius-30 {
-	border-radius:30px
+  border-radius: 30px;
 }
 .demo-block.demo-button .el-row {
-	margin-bottom:20px
+  margin-bottom: 20px;
 }
 .demo-block.demo-button .el-row:last-child {
-	margin-bottom:0
+  margin-bottom: 0;
 }
-.demo-block.demo-button .el-button+.el-button {
-	margin-left:10px
+.demo-block.demo-button .el-button + .el-button {
+  margin-left: 10px;
 }
-.demo-block.demo-button .el-button-group .el-button+.el-button {
-	margin-left:0
+.demo-block.demo-button .el-button-group .el-button + .el-button {
+  margin-left: 0;
 }
-.demo-block.demo-button .el-button-group+.el-button-group {
-	margin-left:10px
+.demo-block.demo-button .el-button-group + .el-button-group {
+  margin-left: 10px;
 }
 .demo-calendar.demo-block .is-selected {
-	color:#1989fa
+  color: #1989fa;
 }
 .demo-block.demo-card .text {
-	font-size:14px
+  font-size: 14px;
 }
 .demo-block.demo-card .time {
-	font-size:13px;
-	color:#999
+  font-size: 13px;
+  color: #999;
 }
 .demo-block.demo-card .bottom {
-	margin-top:13px;
-	line-height:12px
+  margin-top: 13px;
+  line-height: 12px;
 }
 .demo-block.demo-card .item {
-	margin-bottom:18px
+  margin-bottom: 18px;
 }
 .demo-block.demo-card .button {
-	padding:0;
-	float:right
+  padding: 0;
+  float: right;
 }
 .demo-block.demo-card .image {
-	width:100%;
-	display:block
+  width: 100%;
+  display: block;
 }
 .demo-block.demo-card .box-card {
-	width:480px
+  width: 480px;
 }
 .demo-carousel .block {
-	padding:30px;
-	text-align:center;
-	border-right:1px solid #eff2f6;
-	display:inline-block;
-	width:49%;
-	box-sizing:border-box
+  padding: 30px;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  display: inline-block;
+  width: 49%;
+  box-sizing: border-box;
 }
 .demo-carousel .block:last-child {
-	border-right:none
+  border-right: none;
 }
 .demo-carousel .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
 .demo-carousel .el-carousel__container {
-	text-align:center
+  text-align: center;
 }
 .demo-carousel .el-carousel__item h3 {
-	color:#fff;
-	font-size:18px;
-	line-height:300px;
-	margin:0
+  color: #fff;
+  font-size: 18px;
+  line-height: 300px;
+  margin: 0;
 }
 .demo-carousel .el-carousel__item h3.small {
-	font-size:14px;
-	line-height:150px
+  font-size: 14px;
+  line-height: 150px;
 }
 .demo-carousel .el-carousel__item h3.medium {
-	font-size:14px;
-	line-height:200px
+  font-size: 14px;
+  line-height: 200px;
 }
 .demo-carousel .el-carousel__item:nth-child(2n) {
-	background-color:#99a9bf
+  background-color: #99a9bf;
 }
 .demo-carousel .el-carousel__item:nth-child(odd) {
-	background-color:#d3dce6
+  background-color: #d3dce6;
 }
 .demo-cascader .el-cascader {
-	width:222px
+  width: 222px;
 }
 .demo-cascader-size .el-cascader {
-	vertical-align:top;
-	margin-right:15px
+  vertical-align: top;
+  margin-right: 15px;
 }
-.demo-cascader .source>div {
-	display:flex
+.demo-cascader .source > div {
+  display: flex;
 }
 .demo-cascader .block {
-	padding:30px 0;
-	text-align:center;
-	border-right:1px solid #eff2f6;
-	width:50%;
-	box-sizing:border-box
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  width: 50%;
+  box-sizing: border-box;
 }
 .demo-cascader .block:last-child {
-	border-right:none
+  border-right: none;
 }
 .demo-cascader .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
 .demo-collapse .el-collapse-item__header .header-icon {
-	margin-left:5px
+  margin-left: 5px;
 }
 .demo-color-picker .block {
-	padding:30px 0;
-	text-align:center;
-	border-right:1px solid #eff2f6;
-	display:inline-block;
-	width:50%;
-	box-sizing:border-box
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
 }
 .demo-color-picker .block:last-child {
-	border-right:none
+  border-right: none;
 }
 .demo-color-picker .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
-.demo-color-picker .el-color-picker+.el-color-picker {
-	margin-left:20px
+.demo-color-picker .el-color-picker + .el-color-picker {
+  margin-left: 20px;
 }
 .demo-color-box {
-	position:relative;
-	border-radius:4px;
-	padding:20px;
-	margin:5px 0;
-	height:114px;
-	box-sizing:border-box;
-	color:#fff;
-	font-size:14px
+  position: relative;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 5px 0;
+  height: 114px;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 14px;
 }
 .demo-color-box .value {
-	font-size:12px;
-	opacity:.69;
-	line-height:24px
+  font-size: 12px;
+  opacity: 0.69;
+  line-height: 24px;
 }
 .demo-color-box-other {
-	height:74px;
-	margin:10px 0!important;
-	border-radius:4px 4px 4px 4px!important;
-	padding:15px 20px
+  height: 74px;
+  margin: 10px 0 !important;
+  border-radius: 4px 4px 4px 4px !important;
+  padding: 15px 20px;
 }
 .demo-color-box-group .demo-color-box {
-	border-radius:0;
-	margin:0
+  border-radius: 0;
+  margin: 0;
 }
 .demo-color-box-group .demo-color-box:first-child {
-	border-radius:4px 4px 0 0
+  border-radius: 4px 4px 0 0;
 }
-.bg-color-sub,.demo-color-box-group .demo-color-box:last-child {
-	border-radius:0 0 4px 4px
+.bg-color-sub,
+.demo-color-box-group .demo-color-box:last-child {
+  border-radius: 0 0 4px 4px;
 }
 .bg-color-sub {
-	width:100%;
-	height:40px;
-	left:0;
-	bottom:0;
-	position:absolute
+  width: 100%;
+  height: 40px;
+  left: 0;
+  bottom: 0;
+  position: absolute;
 }
 .bg-blue-sub-item {
-	width:11.1111111%;
-	height:100%;
-	display:inline-block
+  width: 11.1111111%;
+  height: 100%;
+  display: inline-block;
 }
 .bg-blue-sub-item:first-child {
-	border-radius:0 0 0 4px
+  border-radius: 0 0 0 4px;
 }
 .bg-success-sub-item {
-	width:50%;
-	height:100%;
-	display:inline-block
+  width: 50%;
+  height: 100%;
+  display: inline-block;
 }
 .bg-success-sub-item:first-child {
-	border-radius:0 0 0 4px
+  border-radius: 0 0 0 4px;
 }
 .bg-success-sub-item:last-child {
-	border-radius:0 0 4px 0
+  border-radius: 0 0 4px 0;
 }
 .bg-transparent {
-	border:1px solid #fcc3c3;
-	color:#303133;
-	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
-	background-repeat:no-repeat;
-	background-position:50%;
-	background-size:100% 100%,auto
+  border: 1px solid #fcc3c3;
+  color: #303133;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100% 100%, auto;
 }
 .demo-color-box-lite {
-	color:#303133
+  color: #303133;
 }
-.el-footer,.el-header {
-	background-color:#b3c0d1;
-	color:#333;
-	line-height:60px
+.el-footer,
+.el-header {
+  background-color: #b3c0d1;
+  color: #333;
+  line-height: 60px;
 }
 .el-aside {
-	color:#333
+  color: #333;
 }
-#chang-jian-ye-mian-bu-ju+.demo-container .el-footer,#chang-jian-ye-mian-bu-ju+.demo-container .el-header {
-	text-align:center
+#chang-jian-ye-mian-bu-ju + .demo-container .el-footer,
+#chang-jian-ye-mian-bu-ju + .demo-container .el-header {
+  text-align: center;
 }
-#chang-jian-ye-mian-bu-ju+.demo-container .el-aside {
-	background-color:#d3dce6;
-	text-align:center;
-	line-height:200px
+#chang-jian-ye-mian-bu-ju + .demo-container .el-aside {
+  background-color: #d3dce6;
+  text-align: center;
+  line-height: 200px;
 }
-#chang-jian-ye-mian-bu-ju+.demo-container .el-main {
-	background-color:#e9eef3;
-	color:#333;
-	text-align:center;
-	line-height:160px
+#chang-jian-ye-mian-bu-ju + .demo-container .el-main {
+  background-color: #e9eef3;
+  color: #333;
+  text-align: center;
+  line-height: 160px;
 }
-#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container {
-	margin-bottom:40px
+#chang-jian-ye-mian-bu-ju + .demo-container > .source > .el-container {
+  margin-bottom: 40px;
 }
-#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(5) .el-aside,#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(6) .el-aside {
-	line-height:260px
+#chang-jian-ye-mian-bu-ju
+  + .demo-container
+  > .source
+  > .el-container:nth-child(5)
+  .el-aside,
+#chang-jian-ye-mian-bu-ju
+  + .demo-container
+  > .source
+  > .el-container:nth-child(6)
+  .el-aside {
+  line-height: 260px;
 }
-#chang-jian-ye-mian-bu-ju+.demo-container>.source>.el-container:nth-child(7) .el-aside {
-	line-height:320px
+#chang-jian-ye-mian-bu-ju
+  + .demo-container
+  > .source
+  > .el-container:nth-child(7)
+  .el-aside {
+  line-height: 320px;
 }
-.demo-block.demo-date-picker .source>div {
-	padding:0;
-	display:flex;
-	flex-wrap:wrap
+.demo-block.demo-date-picker .source > div {
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
 }
 .demo-date-picker .block {
-	padding:30px 0;
-	text-align:center;
-	border-right:1px solid #eff2f6;
-	flex:1
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  flex: 1;
 }
 .demo-date-picker .block:last-child {
-	border-right:none
+  border-right: none;
 }
 .demo-date-picker .container {
-	flex:1;
-	border-right:1px solid #eff2f6
+  flex: 1;
+  border-right: 1px solid #eff2f6;
 }
 .demo-date-picker .container .block {
-	border-right:none
+  border-right: none;
 }
 .demo-date-picker .container .block:last-child {
-	border-top:1px solid #eff2f6
+  border-top: 1px solid #eff2f6;
 }
 .demo-date-picker .container:last-child {
-	border-right:none
+  border-right: none;
 }
 .demo-date-picker .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
-.demo-block.demo-datetime-picker .source>div {
-	padding:0;
-	display:flex
+.demo-block.demo-datetime-picker .source > div {
+  padding: 0;
+  display: flex;
 }
 .demo-datetime-picker .block {
-	padding:30px 0;
-	text-align:center;
-	border-right:1px solid #eff2f6;
-	flex:1
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  flex: 1;
 }
 .demo-datetime-picker .block:last-child {
-	border-right:none
+  border-right: none;
 }
 .demo-datetime-picker .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
 .demo-block.demo-dialog .dialog-footer button:first-child {
-	margin-right:10px
+  margin-right: 10px;
 }
 .demo-block.demo-dialog .full-image {
-	width:100%
+  width: 100%;
 }
 .demo-block.demo-dialog .el-dialog__wrapper {
-	margin:0
+  margin: 0;
 }
-.demo-block.demo-dialog .el-input,.demo-block.demo-dialog .el-select {
-	width:300px
+.demo-block.demo-dialog .el-input,
+.demo-block.demo-dialog .el-select {
+  width: 300px;
 }
 .demo-block.demo-dialog .el-button--text {
-	margin-right:15px
+  margin-right: 15px;
 }
 .demo-block .el-dropdown {
-	vertical-align:top
+  vertical-align: top;
 }
-.demo-block .el-dropdown+.el-dropdown {
-	margin-left:15px
+.demo-block .el-dropdown + .el-dropdown {
+  margin-left: 15px;
 }
 .demo-block .el-dropdown-link {
-	cursor:pointer;
-	color:#409eff
+  cursor: pointer;
+  color: #409eff;
 }
 .demo-block .el-icon-arrow-down {
-	font-size:12px
+  font-size: 12px;
 }
 .block-col-2 {
-	margin:-24px
+  margin: -24px;
 }
 .block-col-2 .el-col {
-	padding:30px 0;
-	text-align:center;
-	border-right:1px solid #eff2f6
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
 }
 .block-col-2 .el-col:last-child {
-	border-right:0
+  border-right: 0;
 }
 .demo-dropdown .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
 .demo-form .el-select .el-input {
-	width:380px
+  width: 380px;
 }
 .demo-form .el-form {
-	width:460px
+  width: 460px;
 }
 .demo-form .line {
-	text-align:center
+  text-align: center;
 }
 .demo-form .el-checkbox-group {
-	width:320px;
-	margin:0;
-	padding:0;
-	list-style:none
+  width: 320px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.demo-form .el-checkbox-group:after,.demo-form .el-checkbox-group:before {
-	content:" ";
-	display:table
+.demo-form .el-checkbox-group:after,
+.demo-form .el-checkbox-group:before {
+  content: " ";
+  display: table;
 }
 .demo-form .el-checkbox-group:after {
-	clear:both;
-	visibility:hidden;
-	font-size:0;
-	height:0
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
 }
 .demo-form .el-checkbox-group .el-checkbox {
-	float:left;
-	width:160px;
-	margin:0;
-	padding:0
+  float: left;
+  width: 160px;
+  margin: 0;
+  padding: 0;
 }
-.demo-form .el-checkbox-group .el-checkbox+.el-checkbox {
-	margin-left:0
+.demo-form .el-checkbox-group .el-checkbox + .el-checkbox {
+  margin-left: 0;
 }
 .demo-form .demo-form-normal {
-	width:460px
+  width: 460px;
 }
 .demo-form .demo-form-inline {
-	width:auto
+  width: auto;
 }
 .demo-form .demo-form-inline .el-input {
-	width:150px
+  width: 150px;
 }
-.demo-form .demo-form-inline>* {
-	margin-right:10px
+.demo-form .demo-form-inline > * {
+  margin-right: 10px;
 }
 .demo-form .demo-ruleForm {
-	width:460px
+  width: 460px;
 }
 .demo-form .demo-ruleForm .el-select .el-input {
-	width:360px
+  width: 360px;
 }
 .demo-form .demo-dynamic .el-input {
-	margin-right:10px;
-	width:270px;
-	vertical-align:top
+  margin-right: 10px;
+  width: 270px;
+  vertical-align: top;
 }
 .demo-form .fr {
-	float:right
+  float: right;
 }
 ul.language-list {
-	color:#5e6d82;
-	font-size:14px;
-	padding-left:20px
+  color: #5e6d82;
+  font-size: 14px;
+  padding-left: 20px;
 }
 ul.language-list li {
-	line-height:1.8
+  line-height: 1.8;
 }
-.demo-icon .source>div>i {
-	color:#606266;
-	margin:0 20px;
-	font-size:1.5em;
-	vertical-align:middle
+.demo-icon .source > div > i {
+  color: #606266;
+  margin: 0 20px;
+  font-size: 1.5em;
+  vertical-align: middle;
 }
 .demo-icon .source button {
-	margin:0 20px
+  margin: 0 20px;
 }
-.page-component .content>ul.icon-list {
-	overflow:hidden;
-	list-style:none;
-	padding:0!important;
-	border:1px solid #eaeefb;
-	border-radius:4px
+.page-component .content > ul.icon-list {
+  overflow: hidden;
+  list-style: none;
+  padding: 0 !important;
+  border: 1px solid #eaeefb;
+  border-radius: 4px;
 }
 .icon-list li {
-	float:left;
-	width:16.66%;
-	text-align:center;
-	height:120px;
-	line-height:120px;
-	color:#666;
-	font-size:13px;
-	border-right:1px solid #eee;
-	border-bottom:1px solid #eee;
-	margin-right:-1px;
-	margin-bottom:-1px
+  float: left;
+  width: 16.66%;
+  text-align: center;
+  height: 120px;
+  line-height: 120px;
+  color: #666;
+  font-size: 13px;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  margin-right: -1px;
+  margin-bottom: -1px;
 }
 .icon-list li:after {
-	content:"";
-	height:100%
+  content: "";
+  height: 100%;
 }
-.icon-list li:after,.icon-list li span {
-	display:inline-block;
-	vertical-align:middle
+.icon-list li:after,
+.icon-list li span {
+  display: inline-block;
+  vertical-align: middle;
 }
 .icon-list li span {
-	line-height:normal;
-	font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
-	color:#99a9bf;
-	transition:color .15s linear
+  line-height: normal;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, SimSun, sans-serif;
+  color: #99a9bf;
+  transition: color 0.15s linear;
 }
 .icon-list li i {
-	display:block;
-	font-size:32px;
-	margin-bottom:15px;
-	color:#606266;
-	transition:color .15s linear
+  display: block;
+  font-size: 32px;
+  margin-bottom: 15px;
+  color: #606266;
+  transition: color 0.15s linear;
 }
 .icon-list li .icon-name {
-	display:inline-block;
-	padding:0 3px;
-	height:1em
+  display: inline-block;
+  padding: 0 3px;
+  height: 1em;
 }
-.icon-list li:hover i,.icon-list li:hover span {
-	color:#5cb6ff
+.icon-list li:hover i,
+.icon-list li:hover span {
+  color: #5cb6ff;
 }
-.demo-block.demo-input-number .el-input-number+.el-input-number {
-	margin-left:10px
+.demo-block.demo-input-number .el-input-number + .el-input-number {
+  margin-left: 10px;
 }
 .demo-input .el-select .el-input {
-	width:130px
+  width: 130px;
 }
 .demo-input .el-input {
-	width:180px
+  width: 180px;
 }
 .demo-input .el-textarea {
-	width:414px
+  width: 414px;
 }
 .demo-input .el-input-group {
-	width:100%
+  width: 100%;
 }
 .demo-input .demo-input-size .el-input {
-	vertical-align:top;
-	margin:0 10px 10px 0
+  vertical-align: top;
+  margin: 0 10px 10px 0;
 }
 .demo-input .input-with-select .el-input-group__prepend {
-	background-color:#fff
+  background-color: #fff;
 }
 .demo-input .demo-autocomplete {
-	text-align:center
+  text-align: center;
 }
 .demo-input .demo-autocomplete .sub-title {
-	margin-bottom:10px;
-	font-size:14px;
-	color:#8492a6
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #8492a6;
 }
 .demo-input .demo-autocomplete .el-col:not(:last-child) {
-	border-right:1px solid rgba(224,230,237,.5)
+  border-right: 1px solid rgba(224, 230, 237, 0.5);
 }
 .demo-input .demo-autocomplete .el-autocomplete {
-	text-align:left
+  text-align: left;
 }
 .el-autocomplete-suggestion.my-autocomplete li {
-	line-height:normal;
-	padding-top:7px;
-	padding-bottom:7px
+  line-height: normal;
+  padding-top: 7px;
+  padding-bottom: 7px;
 }
 .el-autocomplete-suggestion.my-autocomplete li .name {
-	text-overflow:ellipsis;
-	overflow:hidden
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .el-autocomplete-suggestion.my-autocomplete li .addr {
-	font-size:12px;
-	color:#b4b4b4
+  font-size: 12px;
+  color: #b4b4b4;
 }
 .el-autocomplete-suggestion.my-autocomplete li .highlighted .addr {
-	color:#ddd
+  color: #ddd;
 }
 .demo-input-suffix {
-	margin-bottom:15px
+  margin-bottom: 15px;
 }
 .demo-input-suffix .el-input {
-	margin-right:15px
+  margin-right: 15px;
 }
 .demo-layout .el-row {
-	margin-bottom:20px
+  margin-bottom: 20px;
 }
 .demo-layout .el-row:last-child {
-	margin-bottom:0
+  margin-bottom: 0;
 }
 .demo-layout .el-col {
-	border-radius:4px
+  border-radius: 4px;
 }
 .demo-layout .bg-purple-dark {
-	background:#99a9bf
+  background: #99a9bf;
 }
 .demo-layout .bg-purple {
-	background:#d3dce6
+  background: #d3dce6;
 }
 .demo-layout .bg-purple-light {
-	background:#e5e9f2
+  background: #e5e9f2;
 }
 .demo-layout .grid-content {
-	border-radius:4px;
-	min-height:36px
+  border-radius: 4px;
+  min-height: 36px;
 }
 .demo-layout .row-bg {
-	padding:10px 0;
-	background-color:#f9fafc
+  padding: 10px 0;
+  background-color: #f9fafc;
 }
 .demo-loading .el-table {
-	border:none
+  border: none;
 }
 .demo-block.demo-menu .el-menu-demo {
-	padding-left:55px
+  padding-left: 55px;
 }
 .demo-block.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse) {
-	width:240px;
-	min-height:400px
+  width: 240px;
+  min-height: 400px;
 }
 .demo-block.demo-menu .line {
-	height:1px;
-	background-color:#e0e6ed;
-	margin:35px -24px
+  height: 1px;
+  background-color: #e0e6ed;
+  margin: 35px -24px;
 }
 .demo-block.demo-menu h5 {
-	font-size:14px;
-	color:#8492a6;
-	margin-top:10px
+  font-size: 14px;
+  color: #8492a6;
+  margin-top: 10px;
 }
 .demo-block.demo-menu .tac {
-	text-align:center
+  text-align: center;
 }
 .demo-block.demo-menu .tac .el-menu-vertical-demo {
-	display:inline-block;
-	text-align:left
+  display: inline-block;
+  text-align: left;
 }
 .demo-pagination .source.first {
-	padding:0
+  padding: 0;
 }
 .demo-pagination .first .block {
-	padding:30px 0;
-	text-align:center;
-	border-right:1px solid #eff2f6;
-	display:inline-block;
-	width:50%;
-	box-sizing:border-box
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
 }
 .demo-pagination .first .block:last-child {
-	border-right:none
+  border-right: none;
 }
 .demo-pagination .first .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
 .demo-pagination .source.last {
-	padding:0
+  padding: 0;
 }
 .demo-pagination .last .block {
-	padding:30px 24px;
-	border-bottom:1px solid #eff2f6
+  padding: 30px 24px;
+  border-bottom: 1px solid #eff2f6;
 }
 .demo-pagination .last .block:last-child {
-	border-bottom:none
+  border-bottom: none;
 }
 .demo-pagination .last .demonstration {
-	font-size:14px;
-	color:#8492a6;
-	line-height:44px
+  font-size: 14px;
+  color: #8492a6;
+  line-height: 44px;
 }
-.demo-pagination .last .demonstration+.el-pagination {
-	width:70%;
-	margin:5px 20px 0 0
+.demo-pagination .last .demonstration + .el-pagination {
+  width: 70%;
+  margin: 5px 20px 0 0;
 }
-.demo-block.demo-popover .el-popover+.el-popover {
-	margin-left:10px
+.demo-block.demo-popover .el-popover + .el-popover {
+  margin-left: 10px;
 }
 .demo-block.demo-popover .el-input {
-	width:360px
+  width: 360px;
 }
 .demo-block.demo-popover .el-button {
-	margin-left:10px
+  margin-left: 10px;
 }
 .demo-block.demo-progress .el-progress--line {
-	margin-bottom:15px;
-	width:350px
+  margin-bottom: 15px;
+  width: 350px;
 }
 .demo-block.demo-progress .el-progress--circle {
-	margin-right:15px
+  margin-right: 15px;
 }
 .demo-rate .block {
-	padding:30px 0;
-	text-align:center;
-	border-right:1px solid #eff2f6;
-	display:inline-block;
-	width:49%;
-	box-sizing:border-box
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  display: inline-block;
+  width: 49%;
+  box-sizing: border-box;
 }
 .demo-rate .block:last-child {
-	border-right:none
+  border-right: none;
 }
 .demo-rate .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
 .demo-select .el-select {
-	width:240px
+  width: 240px;
 }
 .demo-block.demo-slider .source {
-	padding:0
+  padding: 0;
 }
 .demo-block.demo-slider .block {
-	padding:30px 24px;
-	overflow:hidden;
-	border-bottom:1px solid #eff2f6
+  padding: 30px 24px;
+  overflow: hidden;
+  border-bottom: 1px solid #eff2f6;
 }
 .demo-block.demo-slider .block:last-child {
-	border-bottom:none
+  border-bottom: none;
 }
 .demo-block.demo-slider .demonstration {
-	font-size:14px;
-	color:#8492a6;
-	line-height:44px
+  font-size: 14px;
+  color: #8492a6;
+  line-height: 44px;
 }
-.demo-block.demo-slider .demonstration+.el-slider {
-	float:right;
-	width:70%;
-	margin-right:20px
+.demo-block.demo-slider .demonstration + .el-slider {
+  float: right;
+  width: 70%;
+  margin-right: 20px;
 }
 .demo-block.demo-switch .el-switch {
-	margin:20px 20px 20px 0
+  margin: 20px 20px 20px 0;
 }
 .el-table .warning-row {
-	background:#fdf5e6
+  background: #fdf5e6;
 }
 .el-table .success-row {
-	background:#f0f9eb
+  background: #f0f9eb;
 }
 .demo-table .name-wrapper {
-	display:inline-block
+  display: inline-block;
 }
 .demo-table .demo-table-expand label {
-	width:90px;
-	color:#99a9bf
+  width: 90px;
+  color: #99a9bf;
 }
 .demo-table .demo-table-expand .el-form-item {
-	margin-right:0;
-	margin-bottom:0;
-	width:50%
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
 }
-.demo-block.demo-tag .el-tag+.el-tag {
-	margin-left:10px
+.demo-block.demo-tag .el-tag + .el-tag {
+  margin-left: 10px;
 }
 .demo-block.demo-tag .button-new-tag {
-	margin-left:10px;
-	height:32px;
-	line-height:30px;
-	padding-top:0;
-	padding-bottom:0
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 .demo-block.demo-tag .input-new-tag {
-	width:90px;
-	margin-left:10px;
-	vertical-align:bottom
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
 }
 .demo-block.demo-tag .tag-group {
-	display:flex;
-	align-items:center
+  display: flex;
+  align-items: center;
 }
 .demo-block.demo-tag .tag-group__title {
-	width:45px;
-	font-size:14px;
-	color:#606266
+  width: 45px;
+  font-size: 14px;
+  color: #606266;
 }
-.demo-block.demo-tag .tag-group+.tag-group {
-	margin-top:10px
+.demo-block.demo-tag .tag-group + .tag-group {
+  margin-top: 10px;
 }
-.demo-block .el-date-editor+.el-date-editor {
-	margin-left:10px
+.demo-block .el-date-editor + .el-date-editor {
+  margin-left: 10px;
 }
 .demo-timeline .source .radio {
-	margin-bottom:20px
+  margin-bottom: 20px;
 }
 .demo-timeline .source .radio .el-radio-group {
-	margin-left:20px
+  margin-left: 20px;
 }
-.demo-tooltip .el-tooltip+.el-tooltip {
-	margin-left:15px
+.demo-tooltip .el-tooltip + .el-tooltip {
+  margin-left: 15px;
 }
 .demo-tooltip .box {
-	width:400px
+  width: 400px;
 }
 .demo-tooltip .box .top {
-	text-align:center
+  text-align: center;
 }
 .demo-tooltip .box .left {
-	float:left;
-	width:60px
+  float: left;
+  width: 60px;
 }
 .demo-tooltip .box .right {
-	float:right;
-	width:60px
+  float: right;
+  width: 60px;
 }
 .demo-tooltip .box .bottom {
-	clear:both;
-	text-align:center
+  clear: both;
+  text-align: center;
 }
 .demo-tooltip .box .item {
-	margin:4px
+  margin: 4px;
 }
-.demo-tooltip .box .left .el-tooltip__popper,.demo-tooltip .box .right .el-tooltip__popper {
-	padding:8px 10px
+.demo-tooltip .box .left .el-tooltip__popper,
+.demo-tooltip .box .right .el-tooltip__popper {
+  padding: 8px 10px;
 }
 .demo-tooltip .box .el-tooltip {
-	margin-left:0
+  margin-left: 0;
 }
 .demo-transition .transition-box {
-	margin-bottom:10px;
-	width:200px;
-	height:100px;
-	border-radius:4px;
-	background-color:#409eff;
-	text-align:center;
-	color:#fff;
-	padding:40px 20px;
-	margin-right:20px;
-	box-sizing:border-box
+  margin-bottom: 10px;
+  width: 200px;
+  height: 100px;
+  border-radius: 4px;
+  background-color: #409eff;
+  text-align: center;
+  color: #fff;
+  padding: 40px 20px;
+  margin-right: 20px;
+  box-sizing: border-box;
 }
 .demo-transfer .transfer-footer {
-	margin-left:15px;
-	padding:6px 5px
+  margin-left: 15px;
+  padding: 6px 5px;
 }
 .demo-tree .leaf {
-	width:20px;
-	background:#ddd
+  width: 20px;
+  background: #ddd;
 }
 .demo-tree .folder {
-	width:20px;
-	background:#888
+  width: 20px;
+  background: #888;
 }
-.demo-tree .buttons,.demo-tree .filter-tree {
-	margin-top:20px
+.demo-tree .buttons,
+.demo-tree .filter-tree {
+  margin-top: 20px;
 }
 .demo-tree .custom-tree-container {
-	display:flex;
-	margin:-24px
+  display: flex;
+  margin: -24px;
 }
 .demo-tree .block {
-	flex:1;
-	padding:8px 24px 24px
+  flex: 1;
+  padding: 8px 24px 24px;
 }
 .demo-tree .block:first-child {
-	border-right:1px solid #eff2f6
+  border-right: 1px solid #eff2f6;
 }
-.demo-tree .block>p {
-	text-align:center;
-	margin:0;
-	line-height:4
+.demo-tree .block > p {
+  text-align: center;
+  margin: 0;
+  line-height: 4;
 }
 .demo-tree .custom-tree-node {
-	flex:1;
-	display:flex;
-	align-items:center;
-	justify-content:space-between;
-	font-size:14px;
-	padding-right:8px
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
 }
 .demo-typo-size .color-dark-light {
-	color:#99a9bf
+  color: #99a9bf;
 }
 .demo-term-box img {
-	width:24%;
-	margin:0 4% 20px 0
+  width: 24%;
+  margin: 0 4% 20px 0;
 }
 .lineH-left {
-	display:inline-block;
-	height:80px
+  display: inline-block;
+  height: 80px;
 }
 .lineH-right {
-	display:inline-block;
-	list-style:none;
-	padding:0 0 0 90px;
-	margin:0;
-	vertical-align:top
+  display: inline-block;
+  list-style: none;
+  padding: 0 0 0 90px;
+  margin: 0;
+  vertical-align: top;
 }
 .lineH-right li {
-	font-size:13px;
-	color:#666;
-	height:20px;
-	line-height:20px
+  font-size: 13px;
+  color: #666;
+  height: 20px;
+  line-height: 20px;
 }
 .lineH-right li span {
-	padding-left:40px
+  padding-left: 40px;
 }
 .upload-tip {
-	color:#8492a6;
-	font-size:12px;
-	margin-top:7px
+  color: #8492a6;
+  font-size: 12px;
+  margin-top: 7px;
 }
 .demo-block {
-	margin-bottom:24px
+  margin-bottom: 24px;
 }
 .demo-block .upload-demo {
-	width:360px
+  width: 360px;
 }
 .demo-block .avatar-uploader .el-upload {
-	border:1px dashed #d9d9d9;
-	border-radius:6px;
-	cursor:pointer;
-	position:relative;
-	overflow:hidden
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
 }
-.demo-block .avatar-uploader .el-upload:focus,.demo-block .avatar-uploader .el-upload:hover {
-	border-color:#409eff
+.demo-block .avatar-uploader .el-upload:focus,
+.demo-block .avatar-uploader .el-upload:hover {
+  border-color: #409eff;
 }
 .demo-block .avatar-uploader .avatar-uploader-icon {
-	font-size:28px;
-	color:#8c939d;
-	width:178px;
-	height:178px;
-	line-height:178px;
-	text-align:center
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
 }
 .demo-block .avatar-uploader .avatar {
-	width:178px;
-	height:178px;
-	display:block
+  width: 178px;
+  height: 178px;
+  display: block;
 }
 .demo-divider-container-1 {
-	display:inline-block;
-	width:33%
+  display: inline-block;
+  width: 33%;
 }
 .demo-divider-container-2 {
-	display:inline-block;
-	width:50%
+  display: inline-block;
+  width: 50%;
 }
 @keyframes dot {
-	0% {
-	width:0;
-	margin-right:1em
+  0% {
+    width: 0;
+    margin-right: 1em;
+  }
+  to {
+    width: 1em;
+    margin-right: 0;
+  }
 }
-to {
-	width:1em;
-	margin-right:0
+.demo-image .block,
+.demo-image__error .block,
+.demo-image__placeholder .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  display: inline-block;
+  width: 20%;
+  box-sizing: border-box;
+  vertical-align: top;
 }
-}.demo-image .block,.demo-image__error .block,.demo-image__placeholder .block {
-	padding:30px 0;
-	text-align:center;
-	border-right:1px solid #eff2f6;
-	display:inline-block;
-	width:20%;
-	box-sizing:border-box;
-	vertical-align:top
+.demo-image .block:last-child,
+.demo-image__error .block:last-child,
+.demo-image__placeholder .block:last-child {
+  border-right: none;
 }
-.demo-image .block:last-child,.demo-image__error .block:last-child,.demo-image__placeholder .block:last-child {
-	border-right:none
+.demo-image .demonstration,
+.demo-image__error .demonstration,
+.demo-image__placeholder .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
 }
-.demo-image .demonstration,.demo-image__error .demonstration,.demo-image__placeholder .demonstration {
-	display:block;
-	color:#8492a6;
-	font-size:14px;
-	margin-bottom:20px
+.demo-image__error .block,
+.demo-image__placeholder .block {
+  width: 49%;
 }
-.demo-image__error .block,.demo-image__placeholder .block {
-	width:49%
+.demo-image__error .el-image,
+.demo-image__placeholder .el-image {
+  width: 300px;
+  height: 200px;
 }
-.demo-image__error .el-image,.demo-image__placeholder .el-image {
-	width:300px;
-	height:200px
-}
-.demo-image__error .image-slot,.demo-image__placeholder .image-slot {
-	display:flex;
-	justify-content:center;
-	align-items:center;
-	width:100%;
-	height:100%;
-	background:#f5f7fa;
-	color:#909399;
-	font-size:14px
+.demo-image__error .image-slot,
+.demo-image__placeholder .image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 14px;
 }
 .demo-image__placeholder .dot {
-	animation:dot 2s steps(3,start) infinite;
-	overflow:hidden
+  animation: dot 2s steps(3, start) infinite;
+  overflow: hidden;
 }
 .demo-image__error .image-slot {
-	font-size:30px
+  font-size: 30px;
 }
 .demo-image__lazy {
-	height:400px;
-	overflow-y:auto
+  height: 400px;
+  overflow-y: auto;
 }
 .demo-image__lazy .el-image {
-	display:block;
-	min-height:200px;
-	margin-bottom:10px
+  display: block;
+  min-height: 200px;
+  margin-bottom: 10px;
 }
 .demo-image__lazy .el-image:last-child {
-	margin-bottom:0
+  margin-bottom: 0;
 }
 .infinite-list {
-	height:300px;
-	padding:0;
-	margin:0;
-	list-style:none
+  height: 300px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 .infinite-list .infinite-list-item {
-	display:flex;
-	align-items:center;
-	justify-content:center;
-	height:50px;
-	background:#e8f3fe;
-	margin:10px;
-	color:#7dbcfc
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background: #e8f3fe;
+  margin: 10px;
+  color: #7dbcfc;
 }
-.infinite-list .infinite-list-item+.list-item {
-	margin-top:10px
+.infinite-list .infinite-list-item + .list-item {
+  margin-top: 10px;
 }
 .infinite-list-wrapper {
-	height:300px;
-	text-align:center
+  height: 300px;
+  text-align: center;
 }
 .infinite-list-wrapper .list {
-	padding:0;
-	margin:0;
-	list-style:none
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 .infinite-list-wrapper .list-item {
-	display:flex;
-	align-items:center;
-	justify-content:center;
-	height:50px;
-	background:#fff6f6;
-	color:#ff8484
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background: #fff6f6;
+  color: #ff8484;
 }
-.infinite-list-wrapper .list-item+.list-item {
-	margin-top:10px
+.infinite-list-wrapper .list-item + .list-item {
+  margin-top: 10px;
 }
 .demo-avatar.demo-basic {
-	text-align:center
+  text-align: center;
 }
-.demo-avatar.demo-basic .demo-basic--circle,.demo-avatar.demo-basic .demo-basic--square {
-	display:flex;
-	justify-content:space-between;
-	align-items:center
+.demo-avatar.demo-basic .demo-basic--circle,
+.demo-avatar.demo-basic .demo-basic--square {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.demo-avatar.demo-basic .demo-basic--circle .block,.demo-avatar.demo-basic .demo-basic--square .block {
-	flex:1
+.demo-avatar.demo-basic .demo-basic--circle .block,
+.demo-avatar.demo-basic .demo-basic--square .block {
+  flex: 1;
 }
-.demo-avatar.demo-basic .demo-basic--circle .block:not(:last-child),.demo-avatar.demo-basic .demo-basic--square .block:not(:last-child) {
-	border-right:1px solid rgba(224,230,237,.5)
+.demo-avatar.demo-basic .demo-basic--circle .block:not(:last-child),
+.demo-avatar.demo-basic .demo-basic--square .block:not(:last-child) {
+  border-right: 1px solid rgba(224, 230, 237, 0.5);
 }
 .demo-avatar .sub-title {
-	margin-bottom:10px;
-	font-size:14px;
-	color:#8492a6
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #8492a6;
 }
 .demo-avatar .el-col:not(:last-child) {
-	border-right:1px solid rgba(224,230,237,.5)
+  border-right: 1px solid rgba(224, 230, 237, 0.5);
 }
 .demo-avatar .demo-type {
-	display:flex
+  display: flex;
 }
-.demo-avatar .demo-type>div {
-	flex:1;
-	text-align:center
+.demo-avatar .demo-type > div {
+  flex: 1;
+  text-align: center;
 }
-.demo-avatar .demo-type>div:not(:last-child) {
-	border-right:1px solid rgba(224,230,237,.5)
+.demo-avatar .demo-type > div:not(:last-child) {
+  border-right: 1px solid rgba(224, 230, 237, 0.5);
 }
 .demo-avatar .demo-fit {
-	display:flex;
-	text-align:center;
-	justify-content:space-between
+  display: flex;
+  text-align: center;
+  justify-content: space-between;
 }
 .demo-avatar .demo-fit .block {
-	flex:1;
-	display:flex;
-	flex-direction:column;
-	flex-grow:0
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
 }
 .demo-avatar .demo-fit .title {
-	margin-bottom:10px;
-	font-size:14px;
-	color:#8492a6
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #8492a6;
 }
 .demo-drawer__content {
-	display:flex;
-	flex-direction:column;
-	height:100%
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 .demo-drawer__content form {
-	flex:1
+  flex: 1;
 }
 .demo-drawer__footer {
-	display:flex
+  display: flex;
 }
 .demo-drawer__footer button {
-	flex:1
+  flex: 1;
 }
 .el-drawer__body {
-	padding:20px
+  padding: 20px;
 }
-body,html {
-	margin:0;
-	padding:0;
-	height:100%;
-	font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
-	font-weight:400;
-	-webkit-font-smoothing:antialiased;
-	-webkit-tap-highlight-color:transparent
+body,
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, SimSun, sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
 }
-body.is-component,html.is-component {
-	overflow:hidden
+body.is-component,
+html.is-component {
+  overflow: hidden;
 }
 #app {
-	height:100%
+  height: 100%;
 }
 #app.is-component {
-	overflow-y:hidden
+  overflow-y: hidden;
 }
 #app.is-component .main-cnt {
-	padding:0;
-	margin-top:0;
-	height:100%;
-	min-height:auto
+  padding: 0;
+  margin-top: 0;
+  height: 100%;
+  min-height: auto;
 }
 #app.is-component .headerWrapper {
-	position:fixed;
-	width:100%;
-	left:0;
-	top:0;
-	z-index:1500
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1500;
 }
 #app.is-component .headerWrapper .container {
-	padding:0
+  padding: 0;
 }
 a {
-	color:#409eff;
-	text-decoration:none
+  color: #409eff;
+  text-decoration: none;
 }
 code {
-	background-color:#f9fafc;
-	padding:0 4px;
-	border:1px solid #eaeefb;
-	border-radius:4px
+  background-color: #f9fafc;
+  padding: 0 4px;
+  border: 1px solid #eaeefb;
+  border-radius: 4px;
 }
-button,input,select,textarea {
-	font-family:inherit;
-	font-size:inherit;
-	line-height:inherit;
-	color:inherit
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
 }
 .hljs {
-	line-height:1.8;
-	font-family:Menlo,Monaco,Consolas,Courier,monospace;
-	font-size:12px;
-	padding:18px 24px;
-	background-color:#fafafa;
-	border:1px solid #eaeefb;
-	margin-bottom:25px;
-	border-radius:4px;
-	-webkit-font-smoothing:auto
+  line-height: 1.8;
+  font-family: Menlo, Monaco, Consolas, Courier, monospace;
+  font-size: 12px;
+  padding: 18px 24px;
+  background-color: #fafafa;
+  border: 1px solid #eaeefb;
+  margin-bottom: 25px;
+  border-radius: 4px;
+  -webkit-font-smoothing: auto;
 }
 .main-cnt {
-	margin-top:-80px;
-	padding:80px 0 340px;
-	box-sizing:border-box;
-	min-height:100%
+  margin-top: -80px;
+  padding: 80px 0 340px;
+  box-sizing: border-box;
+  min-height: 100%;
 }
-.container,.page-container {
-	width:1140px;
-	padding:0;
-	margin:0 auto
+.container,
+.page-container {
+  width: 1140px;
+  padding: 0;
+  margin: 0 auto;
 }
 .page-container {
-	padding-top:55px
+  padding-top: 55px;
 }
 .page-container h2 {
-	font-size:28px;
-	color:#1f2d3d;
-	margin:0
+  font-size: 28px;
+  color: #1f2d3d;
+  margin: 0;
 }
 .page-container h3 {
-	font-size:22px
+  font-size: 22px;
 }
-.page-container h2,.page-container h3,.page-container h4,.page-container h5 {
-	font-weight:400;
-	color:#1f2f3d
+.page-container h2,
+.page-container h3,
+.page-container h4,
+.page-container h5 {
+  font-weight: 400;
+  color: #1f2f3d;
 }
-.page-container h2:hover a,.page-container h3:hover a,.page-container h4:hover a,.page-container h5:hover a {
-	opacity:.4
+.page-container h2:hover a,
+.page-container h3:hover a,
+.page-container h4:hover a,
+.page-container h5:hover a {
+  opacity: 0.4;
 }
-.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a {
-	float:left;
-	margin-left:-20px;
-	opacity:0;
-	cursor:pointer
+.page-container h2 a,
+.page-container h3 a,
+.page-container h4 a,
+.page-container h5 a {
+  float: left;
+  margin-left: -20px;
+  opacity: 0;
+  cursor: pointer;
 }
-.page-container h2 a:hover,.page-container h3 a:hover,.page-container h4 a:hover,.page-container h5 a:hover {
-	opacity:.4
+.page-container h2 a:hover,
+.page-container h3 a:hover,
+.page-container h4 a:hover,
+.page-container h5 a:hover {
+  opacity: 0.4;
 }
 .page-container p {
-	font-size:14px;
-	color:#5e6d82;
-	line-height:1.5em
+  font-size: 14px;
+  color: #5e6d82;
+  line-height: 1.5em;
 }
 .page-container .tip {
-	padding:8px 16px;
-	background-color:#ecf8ff;
-	border-radius:4px;
-	border-left:5px solid #50bfff;
-	margin:20px 0
+  padding: 8px 16px;
+  background-color: #ecf8ff;
+  border-radius: 4px;
+  border-left: 5px solid #50bfff;
+  margin: 20px 0;
 }
 .page-container .tip code {
-	background-color:hsla(0,0%,100%,.7);
-	color:#445368
+  background-color: hsla(0, 0%, 100%, 0.7);
+  color: #445368;
 }
 .page-container .warning {
-	padding:8px 16px;
-	background-color:#fff6f7;
-	border-radius:4px;
-	border-left:5px solid #fe6c6f;
-	margin:20px 0
+  padding: 8px 16px;
+  background-color: #fff6f7;
+  border-radius: 4px;
+  border-left: 5px solid #fe6c6f;
+  margin: 20px 0;
 }
 .page-container .warning code {
-	background-color:hsla(0,0%,100%,.7);
-	color:#445368
+  background-color: hsla(0, 0%, 100%, 0.7);
+  color: #445368;
 }
 .demo {
-	margin:20px 0
+  margin: 20px 0;
 }
-@media (max-width:1140px) {
-	.container,.page-container {
-	width:100%
-}
-}@media (max-width:768px) {
-	.container,.page-container {
-	padding:0 20px
-}
-#app.is-component .headerWrapper .container {
-	padding:0 12px
+@media (max-width: 1140px) {
+  .container,
+  .page-container {
+    width: 100%;
+  }
 }
+@media (max-width: 768px) {
+  .container,
+  .page-container {
+    padding: 0 20px;
+  }
+  #app.is-component .headerWrapper .container {
+    padding: 0 12px;
+  }
 }
 @font-face {
-	font-family:icomoon;
-	src:url(data:application/vnd.ms-fontobject;base64,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);
-	src:url(data:application/vnd.ms-fontobject;base64,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#iefix) format("embedded-opentype"),url(data:font/ttf;base64,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) format("truetype"),url(data:font/woff;base64,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) format("woff"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=) format("svg");
-	font-weight:400;
-	font-style:normal
+  font-family: icomoon;
+  src: url(data:application/vnd.ms-fontobject;base64,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);
+  src: url(data:application/vnd.ms-fontobject;base64,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#iefix)
+      format("embedded-opentype"),
+    url(data:font/ttf;base64,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)
+      format("truetype"),
+    url(data:font/woff;base64,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)
+      format("woff"),
+    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=)
+      format("svg");
+  font-weight: 400;
+  font-style: normal;
 }
-[class*=" icon-"],[class^=icon-] {
-	font-family:icomoon!important;
-	speak:none;
-	font-style:normal;
-	font-weight:400;
-	font-variant:normal;
-	text-transform:none;
-	line-height:1;
-	-webkit-font-smoothing:antialiased;
-	-moz-osx-font-smoothing:grayscale
+[class*=" icon-"],
+[class^="icon-"] {
+  font-family: icomoon !important;
+  speak: none;
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 .icon-rate-face-off:before {
-	content:"\e900"
+  content: "\e900";
 }
 .icon-rate-face-1:before {
-	content:"\e901"
+  content: "\e901";
 }
 .icon-rate-face-2:before {
-	content:"\e902"
+  content: "\e902";
 }
 .icon-rate-face-3:before {
-	content:"\e903"
+  content: "\e903";
 }
 
-.config{padding:5px 0}.config-label{color:#606266;font-size:14px;padding-bottom:8px;position:relative}.content-80{box-sizing:border-box;display:inline-block;width:80%}.content-20{width:20%}.content-10,.content-20{box-sizing:border-box;display:inline-block;vertical-align:bottom}.content-10{width:10%}.content-15{box-sizing:border-box;display:inline-block;width:15%;vertical-align:bottom}input{cursor:pointer}.colorPicker{margin-left:10px;vertical-align:bottom}.select{width:100%}.plus-button[data-v-98c1688e]{position:absolute;left:90%;margin-top:4px}.colorPicker[data-v-98c1688e]{margin-left:0}.content-20 .el-input__suffix-inner span[data-v-98c1688e]{line-height:28px}.content-20[data-v-98c1688e]{padding:0 3px}.content-10[data-v-98c1688e]{vertical-align:top}.content-tip[data-v-98c1688e]{color:#909399;font-size:12px}.config-content[data-v-98c1688e]{padding:5px 0}.el-button--mini.is-round[data-v-98c1688e]{padding:3px}.editor-main{padding:0 18px 15px;overflow-y:auto}.category-name{color:#c0c4cc;font-size:18px;display:block;margin:13px 0 3px}.configurator-action{padding:15px 18px 0}.configurator-action .action-group{padding:5px 0}.configurator-action .action-group img{cursor:not-allowed;width:16px;height:16px;padding:7px 0;margin-left:5px;opacity:.5}.configurator-action .action-group img.active{opacity:1;cursor:pointer}.configurator-action .action-group img:last-of-type{margin-left:10px}.configurator-action .action-group .button-group{float:right}.configurator-action .action-group .button-group .el-button{padding:6px 15px}.configurator-action .action-group .button-group .el-button.is-disabled{color:#c0c4cc;background-color:#fff;border-color:#ebeef5}.configurator-action .action-group .button-group .reset{background:#e6f1fc;color:#1989fa;border-color:#a2cffc}.configurator-action .action-group .button-group .download{background:#1989fa;color:#fff;border-color:#1989fa}.configurator-action .selector{width:100%}.configurator-action .selector input{background:#f5f7fa;border:none;font-size:18px;padding-left:0;color:#606266}.configurator-action .line{width:100%;height:0;border-bottom:1px solid #dcdfe6}.main-configurator{height:100%;display:flex;flex-direction:column}.component-preview{padding-right:10px}.component-preview:last-of-type{padding-bottom:20px}.component-preview h4{font-size:20px;margin:40px 0 20px;color:#909399}.component-preview .demo-item{margin-top:10px;margin-right:40px}.component-preview .demo-line{margin:15px 0}.component-preview .el-carousel__item:nth-child(2n){background-color:#99a9bf}.component-preview .el-carousel__item:nth-child(odd){background-color:#d3dce6}.component-preview .el-avatar:not(:last-child){margin-right:20px}.component-preview .avatar-demo{display:flex;align-items:center}.component-preview .heading>div{margin-bottom:15px}.component-preview .title{font-size:18px;font-weight:400;padding:0 20px}.component-preview .paragraph{padding:0 20px}.component-preview .demo-color-box{margin:0}.component-preview .color{margin-right:-12%}.theme-card-item{user-select:none;border-radius:4px;overflow:hidden;background:#fff;height:90%;margin:25px 0;box-shadow:0 0 1px 0 #666}.theme-card-item.is-hidden{opacity:0;height:0}.theme-card-item .upload{cursor:pointer;background:#f5f7fa;height:100%;width:100%;display:flex;justify-content:center;align-items:center}.theme-card-item .upload .upload-action{width:40%;margin:0 auto;text-align:center;color:#606266}.theme-card-item .upload .upload-action img{display:block;margin:0 auto}.theme-card-item .upload .upload-action span{display:block;font-size:14px;margin-top:8px}.theme-card-item .preview{position:relative;height:70%;width:100%}.theme-card-item .preview .line{height:50%}.theme-card-item .preview .line-2{width:50%;height:100%;display:inline-block}.theme-card-item .preview .line-4{width:25%;height:100%;display:inline-block}.theme-card-item .preview .action{transition:all .3s;position:absolute;opacity:0;top:0;left:0;right:0;bottom:0}.theme-card-item .preview .action .action-mask{position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:.4}.theme-card-item .preview .action .action-block{position:absolute;width:50%;height:50%;left:25%;top:25%}.theme-card-item .preview .action .action-item{cursor:pointer;display:inline-block;height:100%;width:30%;color:#eee}.theme-card-item .preview .action .action-item:hover{color:#fff}.theme-card-item .preview .action .action-item:hover .circle{border-color:#fff}.theme-card-item .preview .action .action-item .icon{height:50%;font-size:22px;text-align:center;display:flex;justify-content:center;align-items:center}.theme-card-item .preview .action .action-item .icon img{width:130%}.theme-card-item .preview .action .action-item .name{font-size:12px;height:50%;text-align:center;display:flex;justify-content:center;align-items:center;margin-top:4px}.theme-card-item .preview .action .action-item-right{margin-left:40%}.theme-card-item .info{height:30%;line-height:16px;display:flex;align-items:center}.theme-card-item .info .info-center{width:100%}.theme-card-item .info .title{font-weight:700;font-size:16px;color:#303133;padding:0 12px;justify-content:space-between}.theme-card-item .info .right{float:right;font-weight:400;font-size:14px;color:#909399}.theme-card-item .info .more{font-size:16px;cursor:pointer}.theme-card-item .info .description{padding:0 12px;font-size:14px;color:#606266;margin-top:10px}.theme-card-item.is-upload{box-shadow:none;border:1px dashed #dcdfe6}.theme-card-item.is-upload:hover{box-shadow:none}.theme-card-item:hover{box-shadow:0 0 10px 0 #999}.theme-card-item:hover .action{opacity:1}
\ No newline at end of file
+.config {
+  padding: 5px 0;
+}
+.config-label {
+  color: #606266;
+  font-size: 14px;
+  padding-bottom: 8px;
+  position: relative;
+}
+.content-80 {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 80%;
+}
+.content-20 {
+  width: 20%;
+}
+.content-10,
+.content-20 {
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: bottom;
+}
+.content-10 {
+  width: 10%;
+}
+.content-15 {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 15%;
+  vertical-align: bottom;
+}
+input {
+  cursor: pointer;
+}
+.colorPicker {
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+.select {
+  width: 100%;
+}
+.plus-button[data-v-98c1688e] {
+  position: absolute;
+  left: 90%;
+  margin-top: 4px;
+}
+.colorPicker[data-v-98c1688e] {
+  margin-left: 0;
+}
+.content-20 .el-input__suffix-inner span[data-v-98c1688e] {
+  line-height: 28px;
+}
+.content-20[data-v-98c1688e] {
+  padding: 0 3px;
+}
+.content-10[data-v-98c1688e] {
+  vertical-align: top;
+}
+.content-tip[data-v-98c1688e] {
+  color: #909399;
+  font-size: 12px;
+}
+.config-content[data-v-98c1688e] {
+  padding: 5px 0;
+}
+.el-button--mini.is-round[data-v-98c1688e] {
+  padding: 3px;
+}
+.editor-main {
+  padding: 0 18px 15px;
+  overflow-y: auto;
+}
+.category-name {
+  color: #c0c4cc;
+  font-size: 18px;
+  display: block;
+  margin: 13px 0 3px;
+}
+.configurator-action {
+  padding: 15px 18px 0;
+}
+.configurator-action .action-group {
+  padding: 5px 0;
+}
+.configurator-action .action-group img {
+  cursor: not-allowed;
+  width: 16px;
+  height: 16px;
+  padding: 7px 0;
+  margin-left: 5px;
+  opacity: 0.5;
+}
+.configurator-action .action-group img.active {
+  opacity: 1;
+  cursor: pointer;
+}
+.configurator-action .action-group img:last-of-type {
+  margin-left: 10px;
+}
+.configurator-action .action-group .button-group {
+  float: right;
+}
+.configurator-action .action-group .button-group .el-button {
+  padding: 6px 15px;
+}
+.configurator-action .action-group .button-group .el-button.is-disabled {
+  color: #c0c4cc;
+  background-color: #fff;
+  border-color: #ebeef5;
+}
+.configurator-action .action-group .button-group .reset {
+  background: #e6f1fc;
+  color: #1989fa;
+  border-color: #a2cffc;
+}
+.configurator-action .action-group .button-group .download {
+  background: #1989fa;
+  color: #fff;
+  border-color: #1989fa;
+}
+.configurator-action .selector {
+  width: 100%;
+}
+.configurator-action .selector input {
+  background: #f5f7fa;
+  border: none;
+  font-size: 18px;
+  padding-left: 0;
+  color: #606266;
+}
+.configurator-action .line {
+  width: 100%;
+  height: 0;
+  border-bottom: 1px solid #dcdfe6;
+}
+.main-configurator {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.component-preview {
+  padding-right: 10px;
+}
+.component-preview:last-of-type {
+  padding-bottom: 20px;
+}
+.component-preview h4 {
+  font-size: 20px;
+  margin: 40px 0 20px;
+  color: #909399;
+}
+.component-preview .demo-item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+.component-preview .demo-line {
+  margin: 15px 0;
+}
+.component-preview .el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+.component-preview .el-carousel__item:nth-child(odd) {
+  background-color: #d3dce6;
+}
+.component-preview .el-avatar:not(:last-child) {
+  margin-right: 20px;
+}
+.component-preview .avatar-demo {
+  display: flex;
+  align-items: center;
+}
+.component-preview .heading > div {
+  margin-bottom: 15px;
+}
+.component-preview .title {
+  font-size: 18px;
+  font-weight: 400;
+  padding: 0 20px;
+}
+.component-preview .paragraph {
+  padding: 0 20px;
+}
+.component-preview .demo-color-box {
+  margin: 0;
+}
+.component-preview .color {
+  margin-right: -12%;
+}
+.theme-card-item {
+  user-select: none;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  height: 90%;
+  margin: 25px 0;
+  box-shadow: 0 0 1px 0 #666;
+}
+.theme-card-item.is-hidden {
+  opacity: 0;
+  height: 0;
+}
+.theme-card-item .upload {
+  cursor: pointer;
+  background: #f5f7fa;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.theme-card-item .upload .upload-action {
+  width: 40%;
+  margin: 0 auto;
+  text-align: center;
+  color: #606266;
+}
+.theme-card-item .upload .upload-action img {
+  display: block;
+  margin: 0 auto;
+}
+.theme-card-item .upload .upload-action span {
+  display: block;
+  font-size: 14px;
+  margin-top: 8px;
+}
+.theme-card-item .preview {
+  position: relative;
+  height: 70%;
+  width: 100%;
+}
+.theme-card-item .preview .line {
+  height: 50%;
+}
+.theme-card-item .preview .line-2 {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.theme-card-item .preview .line-4 {
+  width: 25%;
+  height: 100%;
+  display: inline-block;
+}
+.theme-card-item .preview .action {
+  transition: all 0.3s;
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.theme-card-item .preview .action .action-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #000;
+  opacity: 0.4;
+}
+.theme-card-item .preview .action .action-block {
+  position: absolute;
+  width: 50%;
+  height: 50%;
+  left: 25%;
+  top: 25%;
+}
+.theme-card-item .preview .action .action-item {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  width: 30%;
+  color: #eee;
+}
+.theme-card-item .preview .action .action-item:hover {
+  color: #fff;
+}
+.theme-card-item .preview .action .action-item:hover .circle {
+  border-color: #fff;
+}
+.theme-card-item .preview .action .action-item .icon {
+  height: 50%;
+  font-size: 22px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.theme-card-item .preview .action .action-item .icon img {
+  width: 130%;
+}
+.theme-card-item .preview .action .action-item .name {
+  font-size: 12px;
+  height: 50%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 4px;
+}
+.theme-card-item .preview .action .action-item-right {
+  margin-left: 40%;
+}
+.theme-card-item .info {
+  height: 30%;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+}
+.theme-card-item .info .info-center {
+  width: 100%;
+}
+.theme-card-item .info .title {
+  font-weight: 700;
+  font-size: 16px;
+  color: #303133;
+  padding: 0 12px;
+  justify-content: space-between;
+}
+.theme-card-item .info .right {
+  float: right;
+  font-weight: 400;
+  font-size: 14px;
+  color: #909399;
+}
+.theme-card-item .info .more {
+  font-size: 16px;
+  cursor: pointer;
+}
+.theme-card-item .info .description {
+  padding: 0 12px;
+  font-size: 14px;
+  color: #606266;
+  margin-top: 10px;
+}
+.theme-card-item.is-upload {
+  box-shadow: none;
+  border: 1px dashed #dcdfe6;
+}
+.theme-card-item.is-upload:hover {
+  box-shadow: none;
+}
+.theme-card-item:hover {
+  box-shadow: 0 0 10px 0 #999;
+}
+.theme-card-item:hover .action {
+  opacity: 1;
+}
diff --git a/packages/design-system/theme/index.html b/packages/design-system/theme/index.html
index 9595598fc4..4101bf162c 100644
--- a/packages/design-system/theme/index.html
+++ b/packages/design-system/theme/index.html
@@ -1,1126 +1,1526 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Element UI Theme CSS Variable</title>
+    <!-- import CSS -->
+    <link rel="stylesheet" href="./dist/index.css" />
+    <link rel="stylesheet" href="./docs.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Element UI Theme CSS Variable</title>
-  <!-- import CSS -->
-  <link rel="stylesheet" href="./dist/index.css">
-  <link rel="stylesheet" href="./docs.css">
-</head>
-
-<body>
-  <div id="app">
-    <el-container>
+  <body>
+    <div id="app">
       <el-container>
-        <el-main>
-          <div class="component-preview">
-            <h4>Color</h4>
-            <div class="color">
-              <el-row :gutter="12">
-                <el-col :span="4" v-for="(color, key) in colorLine" :key="key">
-                  <div class="demo-color-box" :style="{ background: dataProxy(color) }">
-                    {{color}}
-                    <div class="value">{{dataProxy(color)}}</div>
-                    <div class="bg-color-sub">
-                      <div class="bg-success-sub-item" v-for="(item, key) in Array(2)" :key="key"
-                        :style="{ background: tintColor(dataProxy(color), (key + 8) / 10) }"></div>
+        <el-container>
+          <el-main>
+            <div class="component-preview">
+              <h4>Color</h4>
+              <div class="color">
+                <el-row :gutter="12">
+                  <el-col
+                    :span="4"
+                    v-for="(color, key) in colorLine"
+                    :key="key"
+                  >
+                    <div
+                      class="demo-color-box"
+                      :style="{ background: dataProxy(color) }"
+                    >
+                      {{color}}
+                      <div class="value">{{dataProxy(color)}}</div>
+                      <div class="bg-color-sub">
+                        <div
+                          class="bg-success-sub-item"
+                          v-for="(item, key) in Array(2)"
+                          :key="key"
+                          :style="{ background: tintColor(dataProxy(color), (key + 8) / 10) }"
+                        ></div>
+                      </div>
                     </div>
-                  </div>
-                </el-col>
-              </el-row>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="12">
+                  <el-col :span="4">
+                    <div
+                      class="demo-color-box demo-color-box-other"
+                      :style="{ background: color_text_primary }"
+                    >
+                      Primary Text
+                      <div class="value">{{color_text_primary}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="4">
+                    <div
+                      class="demo-color-box demo-color-box-other"
+                      :style="{ background: color_text_regular }"
+                    >
+                      Regular Text
+                      <div class="value">{{color_text_regular}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="4">
+                    <div
+                      class="demo-color-box demo-color-box-other"
+                      :style="{ background: color_text_secondary }"
+                    >
+                      Secondary Text
+                      <div class="value">{{color_text_secondary}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="4">
+                    <div
+                      class="demo-color-box demo-color-box-other"
+                      :style="{ background: color_text_placeholder }"
+                    >
+                      Placeholder
+                      <div class="value">{{color_text_placeholder}}</div>
+                    </div>
+                  </el-col>
+                </el-row>
+
+                <el-row :gutter="12">
+                  <el-col :span="4">
+                    <div
+                      class="
+                        demo-color-box demo-color-box-other demo-color-box-lite
+                      "
+                      :style="{ background: border_color_base }"
+                    >
+                      Border Base
+                      <div class="value">{{border_color_base}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="4">
+                    <div
+                      class="
+                        demo-color-box demo-color-box-other demo-color-box-lite
+                      "
+                      :style="{ background: border_color_light }"
+                    >
+                      Border Light
+                      <div class="value">{{border_color_light}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="4">
+                    <div
+                      class="
+                        demo-color-box demo-color-box-other demo-color-box-lite
+                      "
+                      :style="{ background: border_color_lighter }"
+                    >
+                      Border Lighter
+                      <div class="value">{{border_color_lighter}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="4">
+                    <div
+                      class="
+                        demo-color-box demo-color-box-other demo-color-box-lite
+                      "
+                      :style="{ background: border_color_extra_light }"
+                    >
+                      Border Extralight
+                      <div class="value">{{border_color_extra_light}}</div>
+                    </div>
+                  </el-col>
+                </el-row>
+
+                <el-row :gutter="12" v-if="false">
+                  <el-col :span="4">
+                    <div
+                      class="demo-color-box demo-color-box-other"
+                      :style="{ background: color_black }"
+                    >
+                      Background B
+                      <div class="value">{{color_black}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="4">
+                    <div
+                      class="demo-color-box demo-color-box-other"
+                      :style="{ background: color_white, color: '#303133', border: '1px solid #eee' }"
+                    >
+                      Background W
+                      <div class="value">{{color_white}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="4">
+                    <div
+                      class="demo-color-box demo-color-box-other bg-transparent"
+                    >
+                      Background
+                      <div class="value">Transparent</div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+
+              <h4>Typography</h4>
               <el-row :gutter="12">
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other" :style="{ background: color_text_primary }">
-                    Primary Text
-                    <div class="value">{{color_text_primary}}</div>
+                <el-col :span="6" class="heading">
+                  <div :style="{ fontSize: font_size_extra_large }">
+                    Heading1
+                  </div>
+                  <div :style="{ fontSize: font_size_large }">Heading2</div>
+                  <div :style="{ fontSize: font_size_medium }">Heading3</div>
+                  <div :style="{ fontSize: font_size_base }">Heading4</div>
+                  <div :style="{ fontSize: font_size_small }">Heading5</div>
+                  <div :style="{ fontSize: font_size_extra_small }">
+                    Heading6
                   </div>
                 </el-col>
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other" :style="{ background: color_text_regular }">
-                    Regular Text
-                    <div class="value">{{color_text_regular}}</div>
-                  </div>
-                </el-col>
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other" :style="{ background: color_text_secondary }">
-                    Secondary Text
-                    <div class="value">{{color_text_secondary}}</div>
-                  </div>
-                </el-col>
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other" :style="{ background: color_text_placeholder }">
-                    Placeholder
-                    <div class="value">{{color_text_placeholder}}</div>
-                  </div>
-                </el-col>
-              </el-row>
-
-              <el-row :gutter="12">
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
-                    :style="{ background: border_color_base }">
-                    Border Base
-                    <div class="value">{{border_color_base}}</div>
-                  </div>
-                </el-col>
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
-                    :style="{ background: border_color_light }">
-                    Border Light
-                    <div class="value">{{border_color_light}}</div>
-                  </div>
-                </el-col>
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
-                    :style="{ background: border_color_lighter }">
-                    Border Lighter
-                    <div class="value">{{border_color_lighter}}</div>
-                  </div>
-                </el-col>
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
-                    :style="{ background: border_color_extra_light }">
-                    Border Extralight
-                    <div class="value">{{border_color_extra_light}}</div>
-                  </div>
-                </el-col>
-              </el-row>
-
-              <el-row :gutter="12" v-if="false">
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other" :style="{ background: color_black }">
-                    Background B
-                    <div class="value">{{color_black}}</div>
-                  </div>
-                </el-col>
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other"
-                    :style="{ background: color_white, color: '#303133', border: '1px solid #eee' }">
-                    Background W
-                    <div class="value">{{color_white}}</div>
-                  </div>
-                </el-col>
-                <el-col :span="4">
-                  <div class="demo-color-box demo-color-box-other bg-transparent">
-                    Background
-                    <div class="value">Transparent</div>
-                  </div>
-                </el-col>
-              </el-row>
-            </div>
-
-            <h4>Typography</h4>
-            <el-row :gutter="12">
-              <el-col :span="6" class="heading">
-                <div :style="{ fontSize: font_size_extra_large }">Heading1</div>
-                <div :style="{ fontSize: font_size_large }">Heading2</div>
-                <div :style="{ fontSize: font_size_medium }">Heading3</div>
-                <div :style="{ fontSize: font_size_base }">Heading4</div>
-                <div :style="{ fontSize: font_size_small }">Heading5</div>
-                <div :style="{ fontSize: font_size_extra_small }">Heading6</div>
-              </el-col>
-              <el-col :span="9">
-                <div class="title">Example body text</div>
-                <p class="paragraph" :style="{ 
+                <el-col :span="9">
+                  <div class="title">Example body text</div>
+                  <p
+                    class="paragraph"
+                    :style="{ 
               fontSize: font_size_base,
               fontWeight: font_weight_primary, 
               lineHeight: font_line_height_primary
-            }">
-                  With MySpace becoming more popular every day, there is the constant need to be different. There are
-                  millions
-                  of users. If MySpace layouts are chosen well, then you can enhance your profile a great deal.</p>
-              </el-col>
-              <el-col :span="9">
-                <div class="title">Example small text</div>
-                <p class="paragraph" :style="{ 
+            }"
+                  >
+                    With MySpace becoming more popular every day, there is the
+                    constant need to be different. There are millions of users.
+                    If MySpace layouts are chosen well, then you can enhance
+                    your profile a great deal.
+                  </p>
+                </el-col>
+                <el-col :span="9">
+                  <div class="title">Example small text</div>
+                  <p
+                    class="paragraph"
+                    :style="{ 
               fontSize: font_size_small,
               fontWeight: font_weight_secondary, 
               lineHeight: font_line_height_secondary
-            }">
-                  Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours
-                  in
-                  front of their desktops, while delivery people scan bar codes with handhelds and workers in the field
-                  stay
-                  in touch with the central office via their notebooks. Computer hardware weaves itself through the
-                  fabric of
-                  our lives.</p>
-              </el-col>
-            </el-row>
+            }"
+                  >
+                    Computers have become ubiquitous in almost every facet of
+                    our lives. At work, desk jockeys spend hours in front of
+                    their desktops, while delivery people scan bar codes with
+                    handhelds and workers in the field stay in touch with the
+                    central office via their notebooks. Computer hardware weaves
+                    itself through the fabric of our lives.
+                  </p>
+                </el-col>
+              </el-row>
 
-            <h4>Button</h4>
-            <el-row class="demo-line">
-              <el-button>Default</el-button>
-              <el-button type="primary">Primary</el-button>
-              <el-button type="success">Success</el-button>
-              <el-button type="info">Info</el-button>
-              <el-button type="warning">Warning</el-button>
-              <el-button type="danger">Danger</el-button>
-            </el-row>
-            <el-row class="demo-line">
-              <el-button disabled>Default</el-button>
-              <el-button disabled type="primary">Primary</el-button>
-              <el-button disabled type="success">Success</el-button>
-              <el-button disabled type="info">Info</el-button>
-              <el-button disabled type="warning">Warning</el-button>
-              <el-button disabled type="danger">Danger</el-button>
-            </el-row>
-            <el-row class="demo-line">
-              <el-button plain>Plain</el-button>
-              <el-button type="primary" plain>Primary</el-button>
-              <el-button type="success" plain>Success</el-button>
-              <el-button type="info" plain>Info</el-button>
-              <el-button type="warning" plain>Warning</el-button>
-              <el-button type="danger" plain>Danger</el-button>
-            </el-row>
-            <el-row class="demo-line">
-              <el-button disabled plain>Plain</el-button>
-              <el-button disabled type="primary" plain>Primary</el-button>
-              <el-button disabled type="success" plain>Success</el-button>
-              <el-button disabled type="info" plain>Info</el-button>
-              <el-button disabled type="warning" plain>Warning</el-button>
-              <el-button disabled type="danger" plain>Danger</el-button>
-            </el-row>
-            <el-row class="demo-line">
-              <el-button round>Round</el-button>
-              <el-button type="primary" round>Primary</el-button>
-              <el-button type="success" round>Success</el-button>
-              <el-button type="info" round>Info</el-button>
-              <el-button type="warning" round>Warning</el-button>
-              <el-button type="danger" round>Danger</el-button>
-            </el-row>
-            <el-row class="demo-line">
-              <el-button icon="el-icon-search" circle></el-button>
-              <el-button type="primary" icon="el-icon-edit" circle></el-button>
-              <el-button type="success" icon="el-icon-check" circle></el-button>
-              <el-button type="info" icon="el-icon-message" circle></el-button>
-              <el-button type="warning" icon="el-icon-star-off" circle></el-button>
-              <el-button type="danger" icon="el-icon-delete" circle></el-button>
-            </el-row>
-            <el-row class="demo-line">
-              <el-button>Default</el-button>
-              <el-button size="medium">Medium</el-button>
-              <el-button size="small">Small</el-button>
-              <el-button size="mini">Mini</el-button>
-            </el-row>
-            <el-row>
-              <el-button type="text">文字按钮</el-button>
-              <el-button type="text" disabled>文字按钮</el-button>
-            </el-row>
-            <h4>Radio</h4>
-            <el-row class="demo-line">
-              <el-radio v-model="radio" label="1">Option A</el-radio>
-              <el-radio v-model="radio" label="2">Option B</el-radio>
-            </el-row>
-            <el-row class="demo-line">
-              <el-radio-group v-model="radio1">
-                <el-radio-button label="New York"></el-radio-button>
-                <el-radio-button label="Washington"></el-radio-button>
-                <el-radio-button label="Los Angeles"></el-radio-button>
-                <el-radio-button label="Chicago"></el-radio-button>
-              </el-radio-group>
-            </el-row>
-            <el-row class="demo-line">
-              <el-radio v-model="radio2" label="1" border>Option A</el-radio>
-              <el-radio v-model="radio2" label="2" border>Option B</el-radio>
-            </el-row>
-            <h4>Checkbox</h4>
-            <el-row class="demo-line">
-              <el-checkbox v-model="checked">Option</el-checkbox>
-            </el-row>
-            <el-row class="demo-line">
-              <el-checkbox-group v-model="checked1">
-                <el-checkbox-button v-for="city in ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']" :label="city"
-                  :key="city">{{city}}</el-checkbox-button>
-              </el-checkbox-group>
-            </el-row>
-            <el-row class="demo-line">
-              <el-checkbox v-model="checked2" label="Option1" border></el-checkbox>
-            </el-row>
-            <h4>Input</h4>
-            <el-row style="width: 180px">
-              <el-input placeholder="Please input" v-model="input"></el-input>
-            </el-row>
-            <h4>InputNumber</h4>
-            <el-row>
-              <el-input-number v-model="inputNumber" :min="1" :max="10"></el-input-number>
-            </el-row>
-            <h4>Select</h4>
-            <el-row>
-              <el-select v-model="selectValue" placeholder="Select">
-                <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </el-row>
-            <h4>Cascader</h4>
-            <el-row>
-              <el-cascader :options="cascadeOptions" v-model="cascaderValue"></el-cascader>
-            </el-row>
-            <h4>Switch</h4>
-            <el-row>
-              <el-switch v-model="switchValue"></el-switch>
-              <el-switch style="margin-left: 40px" v-model="switchValue" active-text="Pay by month"
-                inactive-text="Pay by year">
-              </el-switch>
-            </el-row>
-            <h4>Slider</h4>
-            <el-row style="width: 380px">
-              <el-slider v-model="slider"></el-slider>
-            </el-row>
-            <h4>DatePicker</h4>
-            <el-row>
-              <el-date-picker v-model="datePicker" type="date"></el-date-picker>
-            </el-row>
-            <h4>Rate</h4>
-            <el-row>
-              <el-rate class="demo-line" v-model="rate"></el-rate>
-              <el-rate class="demo-line" v-model="rate" show-score text-color="#ff9900" score-template="{value} points">
-              </el-rate>
-            </el-row>
-            <h4>Transfer</h4>
-            <el-row>
-              <el-transfer v-model="transfer" filterable :data="transferData">
-                <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
-                <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
-              </el-transfer>
-            </el-row>
-            <h4>Table</h4>
-            <el-row>
-              <el-table :data="tableData" style="width: 70%">
-                <el-table-column prop="date" label="Date" width="180"></el-table-column>
-                <el-table-column prop="name" label="Name" width="180"></el-table-column>
-                <el-table-column prop="address" label="Address"></el-table-column>
-              </el-table>
-            </el-row>
-            <h4>Tag</h4>
-            <el-row>
-              <el-tag class="demo-item" closable>Tag One</el-tag>
-              <el-tag class="demo-item" closable type="success">Tag Two</el-tag>
-              <el-tag class="demo-item" closable type="info">Tag Three</el-tag>
-              <el-tag class="demo-item" closable type="warning">Tag Four</el-tag>
-              <el-tag class="demo-item" closable type="danger">Tag Five</el-tag>
-            </el-row>
-            <h4>Progress</h4>
-            <el-row style="width: 380px">
-              <el-progress :percentage="20"></el-progress>
-              <el-progress :percentage="60" status="exception"></el-progress>
-              <el-progress :percentage="100" status="success"></el-progress>
-            </el-row>
-            <h4>Tree</h4>
-            <el-row style="width: 380px">
-              <el-tree :data="treeData" :props="defaultTreeProps"></el-tree>
-            </el-row>
-            <h4>Pagination</h4>
-            <el-row>
-              <el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
-            </el-row>
-            <h4>Badge</h4>
-            <el-row>
-              <el-badge :value="12" class="demo-item">
-                <el-button size="small">comments</el-button>
-              </el-badge>
-              <el-badge :value="3" class="demo-item">
-                <el-button size="small">replies</el-button>
-              </el-badge>
-              <el-badge :value="1" class="demo-item" type="primary">
-                <el-button size="small">comments</el-button>
-              </el-badge>
-              <el-badge :value="2" class="demo-item" type="warning">
-                <el-button size="small">replies</el-button>
-              </el-badge>
-            </el-row>
-            <h4>Alert</h4>
-            <el-row style="width: 380px;">
-              <el-alert class="demo-item" title="success alert" type="success" show-icon></el-alert>
-              <el-alert class="demo-item" title="info alert" type="info" close-text="Gotcha" show-icon></el-alert>
-              <el-alert class="demo-item" title="warning alert" type="warning" show-icon></el-alert>
-              <el-alert class="demo-item" title="error alert" type="error" description="more text description"
-                show-icon>
-              </el-alert>
-            </el-row>
-            <h4>Loading</h4>
-            <el-row>
-              <el-table :data="tableData" style="width: 90%" v-loading="true">
-                <el-table-column prop="date" label="Date" width="180"></el-table-column>
-                <el-table-column prop="name" label="Name" width="180"></el-table-column>
-                <el-table-column prop="address" label="Address"></el-table-column>
-              </el-table>
-            </el-row>
-            <h4>Message</h4>
-            <el-row>
-              <div role="alert"
-                class="demo-item el-message el-message--success el-message-fade-leave-active el-message-fade-leave-to"
-                style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i
-                  class="el-message__icon el-icon-success"></i>
-                <p class="el-message__content">Congrats, this is a success message.</p>
-                <!---->
-              </div>
-              <div role="alert"
-                class="demo-item el-message el-message--warning el-message-fade-leave-active el-message-fade-leave-to"
-                style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i
-                  class="el-message__icon el-icon-warning"></i>
-                <p class="el-message__content">Warning, this is a warning message.</p>
-                <!---->
-              </div>
-              <div role="alert"
-                class="demo-item el-message el-message--info el-message-fade-leave-active el-message-fade-leave-to"
-                style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i
-                  class="el-message__icon el-icon-info"></i>
-                <p class="el-message__content">This is a message.</p>
-                <!---->
-              </div>
-              <div role="alert"
-                class="demo-item el-message el-message--error is-closable el-message-fade-leave-active el-message-fade-leave-to"
-                style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i
-                  class="el-message__icon el-icon-error"></i>
-                <p class="el-message__content">Oops, this is a error message.</p><i
-                  class="el-message__closeBtn el-icon-close"></i>
-              </div>
-            </el-row>
-            <h4>MessageBox</h4>
-            <el-row>
-              <div class="el-message-box">
-                <div class="el-message-box__header">
-                  <div class="el-message-box__title">
-                    <!----><span>Warning</span>
-                  </div><button type="button" aria-label="Close" class="el-message-box__headerbtn"><i
-                      class="el-message-box__close el-icon-close"></i></button>
+              <h4>Button</h4>
+              <el-row class="demo-line">
+                <el-button>Default</el-button>
+                <el-button type="primary">Primary</el-button>
+                <el-button type="success">Success</el-button>
+                <el-button type="info">Info</el-button>
+                <el-button type="warning">Warning</el-button>
+                <el-button type="danger">Danger</el-button>
+              </el-row>
+              <el-row class="demo-line">
+                <el-button disabled>Default</el-button>
+                <el-button disabled type="primary">Primary</el-button>
+                <el-button disabled type="success">Success</el-button>
+                <el-button disabled type="info">Info</el-button>
+                <el-button disabled type="warning">Warning</el-button>
+                <el-button disabled type="danger">Danger</el-button>
+              </el-row>
+              <el-row class="demo-line">
+                <el-button plain>Plain</el-button>
+                <el-button type="primary" plain>Primary</el-button>
+                <el-button type="success" plain>Success</el-button>
+                <el-button type="info" plain>Info</el-button>
+                <el-button type="warning" plain>Warning</el-button>
+                <el-button type="danger" plain>Danger</el-button>
+              </el-row>
+              <el-row class="demo-line">
+                <el-button disabled plain>Plain</el-button>
+                <el-button disabled type="primary" plain>Primary</el-button>
+                <el-button disabled type="success" plain>Success</el-button>
+                <el-button disabled type="info" plain>Info</el-button>
+                <el-button disabled type="warning" plain>Warning</el-button>
+                <el-button disabled type="danger" plain>Danger</el-button>
+              </el-row>
+              <el-row class="demo-line">
+                <el-button round>Round</el-button>
+                <el-button type="primary" round>Primary</el-button>
+                <el-button type="success" round>Success</el-button>
+                <el-button type="info" round>Info</el-button>
+                <el-button type="warning" round>Warning</el-button>
+                <el-button type="danger" round>Danger</el-button>
+              </el-row>
+              <el-row class="demo-line">
+                <el-button icon="el-icon-search" circle></el-button>
+                <el-button
+                  type="primary"
+                  icon="el-icon-edit"
+                  circle
+                ></el-button>
+                <el-button
+                  type="success"
+                  icon="el-icon-check"
+                  circle
+                ></el-button>
+                <el-button
+                  type="info"
+                  icon="el-icon-message"
+                  circle
+                ></el-button>
+                <el-button
+                  type="warning"
+                  icon="el-icon-star-off"
+                  circle
+                ></el-button>
+                <el-button
+                  type="danger"
+                  icon="el-icon-delete"
+                  circle
+                ></el-button>
+              </el-row>
+              <el-row class="demo-line">
+                <el-button>Default</el-button>
+                <el-button size="medium">Medium</el-button>
+                <el-button size="small">Small</el-button>
+                <el-button size="mini">Mini</el-button>
+              </el-row>
+              <el-row>
+                <el-button type="text">文字按钮</el-button>
+                <el-button type="text" disabled>文字按钮</el-button>
+              </el-row>
+              <h4>Radio</h4>
+              <el-row class="demo-line">
+                <el-radio v-model="radio" label="1">Option A</el-radio>
+                <el-radio v-model="radio" label="2">Option B</el-radio>
+              </el-row>
+              <el-row class="demo-line">
+                <el-radio-group v-model="radio1">
+                  <el-radio-button label="New York"></el-radio-button>
+                  <el-radio-button label="Washington"></el-radio-button>
+                  <el-radio-button label="Los Angeles"></el-radio-button>
+                  <el-radio-button label="Chicago"></el-radio-button>
+                </el-radio-group>
+              </el-row>
+              <el-row class="demo-line">
+                <el-radio v-model="radio2" label="1" border>Option A</el-radio>
+                <el-radio v-model="radio2" label="2" border>Option B</el-radio>
+              </el-row>
+              <h4>Checkbox</h4>
+              <el-row class="demo-line">
+                <el-checkbox v-model="checked">Option</el-checkbox>
+              </el-row>
+              <el-row class="demo-line">
+                <el-checkbox-group v-model="checked1">
+                  <el-checkbox-button
+                    v-for="city in ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']"
+                    :label="city"
+                    :key="city"
+                    >{{city}}</el-checkbox-button
+                  >
+                </el-checkbox-group>
+              </el-row>
+              <el-row class="demo-line">
+                <el-checkbox
+                  v-model="checked2"
+                  label="Option1"
+                  border
+                ></el-checkbox>
+              </el-row>
+              <h4>Input</h4>
+              <el-row style="width: 180px">
+                <el-input placeholder="Please input" v-model="input"></el-input>
+              </el-row>
+              <h4>InputNumber</h4>
+              <el-row>
+                <el-input-number
+                  v-model="inputNumber"
+                  :min="1"
+                  :max="10"
+                ></el-input-number>
+              </el-row>
+              <h4>Select</h4>
+              <el-row>
+                <el-select v-model="selectValue" placeholder="Select">
+                  <el-option
+                    v-for="item in selectOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-row>
+              <h4>Cascader</h4>
+              <el-row>
+                <el-cascader
+                  :options="cascadeOptions"
+                  v-model="cascaderValue"
+                ></el-cascader>
+              </el-row>
+              <h4>Switch</h4>
+              <el-row>
+                <el-switch v-model="switchValue"></el-switch>
+                <el-switch
+                  style="margin-left: 40px"
+                  v-model="switchValue"
+                  active-text="Pay by month"
+                  inactive-text="Pay by year"
+                >
+                </el-switch>
+              </el-row>
+              <h4>Slider</h4>
+              <el-row style="width: 380px">
+                <el-slider v-model="slider"></el-slider>
+              </el-row>
+              <h4>DatePicker</h4>
+              <el-row>
+                <el-date-picker
+                  v-model="datePicker"
+                  type="date"
+                ></el-date-picker>
+              </el-row>
+              <h4>Rate</h4>
+              <el-row>
+                <el-rate class="demo-line" v-model="rate"></el-rate>
+                <el-rate
+                  class="demo-line"
+                  v-model="rate"
+                  show-score
+                  text-color="#ff9900"
+                  score-template="{value} points"
+                >
+                </el-rate>
+              </el-row>
+              <h4>Transfer</h4>
+              <el-row>
+                <el-transfer v-model="transfer" filterable :data="transferData">
+                  <el-button
+                    class="transfer-footer"
+                    slot="left-footer"
+                    size="small"
+                    >Operation</el-button
+                  >
+                  <el-button
+                    class="transfer-footer"
+                    slot="right-footer"
+                    size="small"
+                    >Operation</el-button
+                  >
+                </el-transfer>
+              </el-row>
+              <h4>Table</h4>
+              <el-row>
+                <el-table :data="tableData" style="width: 70%">
+                  <el-table-column
+                    prop="date"
+                    label="Date"
+                    width="180"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="name"
+                    label="Name"
+                    width="180"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="address"
+                    label="Address"
+                  ></el-table-column>
+                </el-table>
+              </el-row>
+              <h4>Tag</h4>
+              <el-row>
+                <el-tag class="demo-item" closable>Tag One</el-tag>
+                <el-tag class="demo-item" closable type="success"
+                  >Tag Two</el-tag
+                >
+                <el-tag class="demo-item" closable type="info"
+                  >Tag Three</el-tag
+                >
+                <el-tag class="demo-item" closable type="warning"
+                  >Tag Four</el-tag
+                >
+                <el-tag class="demo-item" closable type="danger"
+                  >Tag Five</el-tag
+                >
+              </el-row>
+              <h4>Progress</h4>
+              <el-row style="width: 380px">
+                <el-progress :percentage="20"></el-progress>
+                <el-progress :percentage="60" status="exception"></el-progress>
+                <el-progress :percentage="100" status="success"></el-progress>
+              </el-row>
+              <h4>Tree</h4>
+              <el-row style="width: 380px">
+                <el-tree :data="treeData" :props="defaultTreeProps"></el-tree>
+              </el-row>
+              <h4>Pagination</h4>
+              <el-row>
+                <el-pagination
+                  layout="prev, pager, next"
+                  :total="1000"
+                ></el-pagination>
+              </el-row>
+              <h4>Badge</h4>
+              <el-row>
+                <el-badge :value="12" class="demo-item">
+                  <el-button size="small">comments</el-button>
+                </el-badge>
+                <el-badge :value="3" class="demo-item">
+                  <el-button size="small">replies</el-button>
+                </el-badge>
+                <el-badge :value="1" class="demo-item" type="primary">
+                  <el-button size="small">comments</el-button>
+                </el-badge>
+                <el-badge :value="2" class="demo-item" type="warning">
+                  <el-button size="small">replies</el-button>
+                </el-badge>
+              </el-row>
+              <h4>Alert</h4>
+              <el-row style="width: 380px">
+                <el-alert
+                  class="demo-item"
+                  title="success alert"
+                  type="success"
+                  show-icon
+                ></el-alert>
+                <el-alert
+                  class="demo-item"
+                  title="info alert"
+                  type="info"
+                  close-text="Gotcha"
+                  show-icon
+                ></el-alert>
+                <el-alert
+                  class="demo-item"
+                  title="warning alert"
+                  type="warning"
+                  show-icon
+                ></el-alert>
+                <el-alert
+                  class="demo-item"
+                  title="error alert"
+                  type="error"
+                  description="more text description"
+                  show-icon
+                >
+                </el-alert>
+              </el-row>
+              <h4>Loading</h4>
+              <el-row>
+                <el-table :data="tableData" style="width: 90%" v-loading="true">
+                  <el-table-column
+                    prop="date"
+                    label="Date"
+                    width="180"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="name"
+                    label="Name"
+                    width="180"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="address"
+                    label="Address"
+                  ></el-table-column>
+                </el-table>
+              </el-row>
+              <h4>Message</h4>
+              <el-row>
+                <div
+                  role="alert"
+                  class="
+                    demo-item
+                    el-message el-message--success
+                    el-message-fade-leave-active el-message-fade-leave-to
+                  "
+                  style="
+                    top: 0;
+                    left: 0;
+                    width: 100px;
+                    opacity: 1;
+                    position: relative;
+                    transform: none;
+                  "
+                >
+                  <i class="el-message__icon el-icon-success"></i>
+                  <p class="el-message__content">
+                    Congrats, this is a success message.
+                  </p>
+                  <!---->
                 </div>
-                <div class="el-message-box__content">
-                  <div class="el-message-box__status el-icon-warning"></div>
-                  <div class="el-message-box__message">
-                    <p>This will permanently delete the file. Continue?</p>
-                  </div>
-                  <div class="el-message-box__input" style="display: none;">
-                    <div class="el-input">
-                      <!----><input type="text" autocomplete="off" placeholder="" class="el-input__inner">
-                      <!---->
-                      <!---->
-                      <!---->
+                <div
+                  role="alert"
+                  class="
+                    demo-item
+                    el-message el-message--warning
+                    el-message-fade-leave-active el-message-fade-leave-to
+                  "
+                  style="
+                    top: 0;
+                    left: 0;
+                    width: 100px;
+                    opacity: 1;
+                    position: relative;
+                    transform: none;
+                  "
+                >
+                  <i class="el-message__icon el-icon-warning"></i>
+                  <p class="el-message__content">
+                    Warning, this is a warning message.
+                  </p>
+                  <!---->
+                </div>
+                <div
+                  role="alert"
+                  class="
+                    demo-item
+                    el-message el-message--info
+                    el-message-fade-leave-active el-message-fade-leave-to
+                  "
+                  style="
+                    top: 0;
+                    left: 0;
+                    width: 100px;
+                    opacity: 1;
+                    position: relative;
+                    transform: none;
+                  "
+                >
+                  <i class="el-message__icon el-icon-info"></i>
+                  <p class="el-message__content">This is a message.</p>
+                  <!---->
+                </div>
+                <div
+                  role="alert"
+                  class="
+                    demo-item
+                    el-message el-message--error
+                    is-closable
+                    el-message-fade-leave-active el-message-fade-leave-to
+                  "
+                  style="
+                    top: 0;
+                    left: 0;
+                    width: 100px;
+                    opacity: 1;
+                    position: relative;
+                    transform: none;
+                  "
+                >
+                  <i class="el-message__icon el-icon-error"></i>
+                  <p class="el-message__content">
+                    Oops, this is a error message.
+                  </p>
+                  <i class="el-message__closeBtn el-icon-close"></i>
+                </div>
+              </el-row>
+              <h4>MessageBox</h4>
+              <el-row>
+                <div class="el-message-box">
+                  <div class="el-message-box__header">
+                    <div class="el-message-box__title">
+                      <!----><span>Warning</span>
                     </div>
-                    <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
+                    <button
+                      type="button"
+                      aria-label="Close"
+                      class="el-message-box__headerbtn"
+                    >
+                      <i class="el-message-box__close el-icon-close"></i>
+                    </button>
+                  </div>
+                  <div class="el-message-box__content">
+                    <div class="el-message-box__status el-icon-warning"></div>
+                    <div class="el-message-box__message">
+                      <p>This will permanently delete the file. Continue?</p>
+                    </div>
+                    <div class="el-message-box__input" style="display: none">
+                      <div class="el-input">
+                        <!----><input
+                          type="text"
+                          autocomplete="off"
+                          placeholder=""
+                          class="el-input__inner"
+                        />
+                        <!---->
+                        <!---->
+                        <!---->
+                      </div>
+                      <div
+                        class="el-message-box__errormsg"
+                        style="visibility: hidden"
+                      ></div>
+                    </div>
+                  </div>
+                  <div class="el-message-box__btns">
+                    <button
+                      type="button"
+                      class="el-button el-button--default el-button--small"
+                    >
+                      <!---->
+                      <!----><span> Cancel </span></button
+                    ><button
+                      type="button"
+                      class="
+                        el-button
+                        el-button--default
+                        el-button--small
+                        el-button--primary
+                      "
+                    >
+                      <!---->
+                      <!----><span> OK </span>
+                    </button>
                   </div>
                 </div>
-                <div class="el-message-box__btns"><button type="button"
-                    class="el-button el-button--default el-button--small">
-                    <!---->
-                    <!----><span>
-                      Cancel
-                    </span>
-                  </button><button type="button"
-                    class="el-button el-button--default el-button--small el-button--primary ">
-                    <!---->
-                    <!----><span>
-                      OK
-                    </span>
-                  </button></div>
-              </div>
-            </el-row>
-            <h4>Notification</h4>
-            <el-row>
-              <div role="alert" class="el-notification right" style="position: relative; left: 0;">
-                <!---->
-                <div class="el-notification__group"><span class="el-notification__title">Notification</span>
-                  <div class="el-notification__content">
-                    <div>This is a message </div>
+              </el-row>
+              <h4>Notification</h4>
+              <el-row>
+                <div
+                  role="alert"
+                  class="el-notification right"
+                  style="position: relative; left: 0"
+                >
+                  <!---->
+                  <div class="el-notification__group">
+                    <span class="el-notification__title">Notification</span>
+                    <div class="el-notification__content">
+                      <div>This is a message</div>
+                    </div>
+                    <div class="el-notification__closeBtn el-icon-close"></div>
                   </div>
-                  <div class="el-notification__closeBtn el-icon-close"></div>
                 </div>
-              </div>
-            </el-row>
-            <h4>Menu</h4>
-            <el-row>
-              <el-menu :default-active="menu" class="el-menu-demo" mode="horizontal">
-                <el-menu-item index="1">Processing Center</el-menu-item>
-                <el-submenu index="2">
-                  <template slot="title">Workspace</template>
-                  <el-menu-item index="2-1">item one</el-menu-item>
-                  <el-menu-item index="2-2">item two</el-menu-item>
-                  <el-menu-item index="2-3">item three</el-menu-item>
-                  <el-submenu index="2-4">
-                    <template slot="title">item four</template>
-                    <el-menu-item index="2-4-1">item one</el-menu-item>
-                    <el-menu-item index="2-4-2">item two</el-menu-item>
-                    <el-menu-item index="2-4-3">item three</el-menu-item>
+              </el-row>
+              <h4>Menu</h4>
+              <el-row>
+                <el-menu
+                  :default-active="menu"
+                  class="el-menu-demo"
+                  mode="horizontal"
+                >
+                  <el-menu-item index="1">Processing Center</el-menu-item>
+                  <el-submenu index="2">
+                    <template slot="title">Workspace</template>
+                    <el-menu-item index="2-1">item one</el-menu-item>
+                    <el-menu-item index="2-2">item two</el-menu-item>
+                    <el-menu-item index="2-3">item three</el-menu-item>
+                    <el-submenu index="2-4">
+                      <template slot="title">item four</template>
+                      <el-menu-item index="2-4-1">item one</el-menu-item>
+                      <el-menu-item index="2-4-2">item two</el-menu-item>
+                      <el-menu-item index="2-4-3">item three</el-menu-item>
+                    </el-submenu>
                   </el-submenu>
-                </el-submenu>
-                <el-menu-item index="3" disabled>Info</el-menu-item>
-                <el-menu-item index="4">
-                  <a href="https://www.ele.me" target="_blank">Orders</a>
-                </el-menu-item>
-              </el-menu>
-              <el-menu default-active="2" class="demo-line">
-                <el-submenu index="1">
-                  <template slot="title">
-                    <i class="el-icon-location"></i>
-                    <span>Navigator One</span>
-                  </template>
-                  <el-menu-item-group title="Group One">
-                    <el-menu-item index="1-1">item one</el-menu-item>
-                    <el-menu-item index="1-2">item one</el-menu-item>
-                  </el-menu-item-group>
-                  <el-menu-item-group title="Group Two">
-                    <el-menu-item index="1-3">item three</el-menu-item>
-                  </el-menu-item-group>
-                  <el-submenu index="1-4">
-                    <template slot="title">item four</template>
-                    <el-menu-item index="1-4-1">item one</el-menu-item>
+                  <el-menu-item index="3" disabled>Info</el-menu-item>
+                  <el-menu-item index="4">
+                    <a href="https://www.ele.me" target="_blank">Orders</a>
+                  </el-menu-item>
+                </el-menu>
+                <el-menu default-active="2" class="demo-line">
+                  <el-submenu index="1">
+                    <template slot="title">
+                      <i class="el-icon-location"></i>
+                      <span>Navigator One</span>
+                    </template>
+                    <el-menu-item-group title="Group One">
+                      <el-menu-item index="1-1">item one</el-menu-item>
+                      <el-menu-item index="1-2">item one</el-menu-item>
+                    </el-menu-item-group>
+                    <el-menu-item-group title="Group Two">
+                      <el-menu-item index="1-3">item three</el-menu-item>
+                    </el-menu-item-group>
+                    <el-submenu index="1-4">
+                      <template slot="title">item four</template>
+                      <el-menu-item index="1-4-1">item one</el-menu-item>
+                    </el-submenu>
                   </el-submenu>
-                </el-submenu>
-                <el-menu-item index="2">
-                  <i class="el-icon-menu"></i>
-                  <span>Navigator Two</span>
-                </el-menu-item>
-                <el-menu-item index="3" disabled>
-                  <i class="el-icon-document"></i>
-                  <span>Navigator Three</span>
-                </el-menu-item>
-                <el-menu-item index="4">
-                  <i class="el-icon-setting"></i>
-                  <span>Navigator Four</span>
-                </el-menu-item>
-              </el-menu>
-            </el-row>
-            <h4>Tabs</h4>
-            <el-row>
-              <el-tabs v-model="tab" class="demo-item">
-                <el-tab-pane label="User" name="first">User</el-tab-pane>
-                <el-tab-pane label="Config" name="second">Config</el-tab-pane>
-                <el-tab-pane label="Role" name="third">Role</el-tab-pane>
-                <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
-              </el-tabs>
-              <el-tabs type="card" class="demo-item">
-                <el-tab-pane label="User">User</el-tab-pane>
-                <el-tab-pane label="Config">Config</el-tab-pane>
-                <el-tab-pane label="Role">Role</el-tab-pane>
-                <el-tab-pane label="Task">Task</el-tab-pane>
-              </el-tabs>
-            </el-row>
-            <h4>Dialog</h4>
-            <el-row>
-              <div role="dialog" aria-modal="true" aria-label="Tips" class="el-dialog" style="margin: 0">
-                <div class="el-dialog__header"><span class="el-dialog__title">Tips</span><button type="button"
-                    aria-label="Close" class="el-dialog__headerbtn"><i
-                      class="el-dialog__close el-icon el-icon-close"></i></button></div>
-                <div class="el-dialog__body"><span>This is a message</span> </div>
-                <div class="el-dialog__footer"><span class="dialog-footer"><button type="button"
-                      class="el-button el-button--default">
-                      <!---->
-                      <!----><span>Cancel</span>
-                    </button> <button type="button" class="el-button el-button--primary">
-                      <!---->
-                      <!----><span>Confirm</span>
-                    </button></span></div>
-              </div>
-            </el-row>
-            <h4>Tooltip</h4>
-            <el-row>
-              <div role="tooltip" x-placement="top" class="el-tooltip__popper is-dark"
-                style="position: relative; width: 40px;text-align: center;">Dark<div x-arrow="" class="popper__arrow">
+                  <el-menu-item index="2">
+                    <i class="el-icon-menu"></i>
+                    <span>Navigator Two</span>
+                  </el-menu-item>
+                  <el-menu-item index="3" disabled>
+                    <i class="el-icon-document"></i>
+                    <span>Navigator Three</span>
+                  </el-menu-item>
+                  <el-menu-item index="4">
+                    <i class="el-icon-setting"></i>
+                    <span>Navigator Four</span>
+                  </el-menu-item>
+                </el-menu>
+              </el-row>
+              <h4>Tabs</h4>
+              <el-row>
+                <el-tabs v-model="tab" class="demo-item">
+                  <el-tab-pane label="User" name="first">User</el-tab-pane>
+                  <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+                  <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+                  <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+                </el-tabs>
+                <el-tabs type="card" class="demo-item">
+                  <el-tab-pane label="User">User</el-tab-pane>
+                  <el-tab-pane label="Config">Config</el-tab-pane>
+                  <el-tab-pane label="Role">Role</el-tab-pane>
+                  <el-tab-pane label="Task">Task</el-tab-pane>
+                </el-tabs>
+              </el-row>
+              <h4>Dialog</h4>
+              <el-row>
+                <div
+                  role="dialog"
+                  aria-modal="true"
+                  aria-label="Tips"
+                  class="el-dialog"
+                  style="margin: 0"
+                >
+                  <div class="el-dialog__header">
+                    <span class="el-dialog__title">Tips</span
+                    ><button
+                      type="button"
+                      aria-label="Close"
+                      class="el-dialog__headerbtn"
+                    >
+                      <i class="el-dialog__close el-icon el-icon-close"></i>
+                    </button>
+                  </div>
+                  <div class="el-dialog__body">
+                    <span>This is a message</span>
+                  </div>
+                  <div class="el-dialog__footer">
+                    <span class="dialog-footer"
+                      ><button
+                        type="button"
+                        class="el-button el-button--default"
+                      >
+                        <!---->
+                        <!----><span>Cancel</span>
+                      </button>
+                      <button
+                        type="button"
+                        class="el-button el-button--primary"
+                      >
+                        <!---->
+                        <!----><span>Confirm</span>
+                      </button></span
+                    >
+                  </div>
                 </div>
-              </div>
-              <div role="tooltip" x-placement="top" class="el-tooltip__popper is-light"
-                style="margin-top: 10px;position: relative; width: 40px;text-align: center;">Light<div x-arrow=""
-                  class="popper__arrow"></div>
-              </div>
-            </el-row>
-            <h4>Popover</h4>
-            <el-row>
-              <div role="tooltip" x-placement="top" id="el-popover-2936" aria-hidden="true"
-                class="el-popover el-popper el-popover--plain" tabindex="0" style="width: 200px; position: relative; ">
-                <div class="el-popover__title">Title</div>this is content, this is content, this is content<div
-                  x-arrow="" class="popper__arrow"></div>
-              </div>
-            </el-row>
-            <h4>Card</h4>
-            <el-row>
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>Card name</span>
+              </el-row>
+              <h4>Tooltip</h4>
+              <el-row>
+                <div
+                  role="tooltip"
+                  x-placement="top"
+                  class="el-tooltip__popper is-dark"
+                  style="position: relative; width: 40px; text-align: center"
+                >
+                  Dark
+                  <div x-arrow="" class="popper__arrow"></div>
                 </div>
-              </el-card>
-            </el-row>
-            <h4>Carousel</h4>
-            <el-row>
-              <el-carousel height="150px">
-                <el-carousel-item v-for="item in 4" :key="item">
-                  <h3>{{ item }}</h3>
-                </el-carousel-item>
-              </el-carousel>
-            </el-row>
-            <h4>Collapse</h4>
-            <el-row>
-              <el-collapse v-model="collapse">
-                <el-collapse-item title="Consistent" name="1">
-                  <div>Consistent with real life: in line with the process and logic of real life, and comply with
-                    languages
-                    and habits that the users are used to;</div>
-                </el-collapse-item>
-                <el-collapse-item title="Feedback" name="2">
-                  <div>Operation feedback: enable the users to clearly perceive their operations by style updates and
-                    interactive effects;</div>
-                </el-collapse-item>
-              </el-collapse>
-            </el-row>
-            <h4>Avatar</h4>
-            <el-row class="demo-line avatar-demo">
-              <el-avatar icon="el-icon-user-solid" />
-              <el-avatar> avatar </el-avatar>
-              <el-avatar shape="square" fit="contain" :src="avatarData.url"></el-avatar>
-              <el-avatar size="large"> large </el-avatar>
-              <el-avatar size="medium"> medium </el-avatar>
-              <el-avatar size="small"> small </el-avatar>
-            </el-row>
-            <h4>Tree</h4>
-            <el-row class="demo-line">
-              <el-tree :data="treeData"></el-tree>
-            </el-row>
-          </div>
-        </el-main>
-      </el-container>
-      <el-aside width="400px">
-        <div class="color-wrap">
-          <el-card class="box-card">
-            <div slot="header" class="box-card-header">
-              <span>Color</span>
-              <el-button size="small" round type="primary" @click.native="copyCssVariables">复制变量</el-button>
+                <div
+                  role="tooltip"
+                  x-placement="top"
+                  class="el-tooltip__popper is-light"
+                  style="
+                    margin-top: 10px;
+                    position: relative;
+                    width: 40px;
+                    text-align: center;
+                  "
+                >
+                  Light
+                  <div x-arrow="" class="popper__arrow"></div>
+                </div>
+              </el-row>
+              <h4>Popover</h4>
+              <el-row>
+                <div
+                  role="tooltip"
+                  x-placement="top"
+                  id="el-popover-2936"
+                  aria-hidden="true"
+                  class="el-popover el-popper el-popover--plain"
+                  tabindex="0"
+                  style="width: 200px; position: relative"
+                >
+                  <div class="el-popover__title">Title</div>
+                  this is content, this is content, this is content
+                  <div x-arrow="" class="popper__arrow"></div>
+                </div>
+              </el-row>
+              <h4>Card</h4>
+              <el-row>
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span>Card name</span>
+                  </div>
+                </el-card>
+              </el-row>
+              <h4>Carousel</h4>
+              <el-row>
+                <el-carousel height="150px">
+                  <el-carousel-item v-for="item in 4" :key="item">
+                    <h3>{{ item }}</h3>
+                  </el-carousel-item>
+                </el-carousel>
+              </el-row>
+              <h4>Collapse</h4>
+              <el-row>
+                <el-collapse v-model="collapse">
+                  <el-collapse-item title="Consistent" name="1">
+                    <div>
+                      Consistent with real life: in line with the process and
+                      logic of real life, and comply with languages and habits
+                      that the users are used to;
+                    </div>
+                  </el-collapse-item>
+                  <el-collapse-item title="Feedback" name="2">
+                    <div>
+                      Operation feedback: enable the users to clearly perceive
+                      their operations by style updates and interactive effects;
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </el-row>
+              <h4>Avatar</h4>
+              <el-row class="demo-line avatar-demo">
+                <el-avatar icon="el-icon-user-solid" />
+                <el-avatar> avatar </el-avatar>
+                <el-avatar
+                  shape="square"
+                  fit="contain"
+                  :src="avatarData.url"
+                ></el-avatar>
+                <el-avatar size="large"> large </el-avatar>
+                <el-avatar size="medium"> medium </el-avatar>
+                <el-avatar size="small"> small </el-avatar>
+              </el-row>
+              <h4>Tree</h4>
+              <el-row class="demo-line">
+                <el-tree :data="treeData"></el-tree>
+              </el-row>
             </div>
-            <el-row>
-              <p>color-primary 主题色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_primary"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_primary"></el-input>
-              </el-col>
-            </el-row>
+          </el-main>
+        </el-container>
+        <el-aside width="400px">
+          <div class="color-wrap">
+            <el-card class="box-card">
+              <div slot="header" class="box-card-header">
+                <span>Color</span>
+                <el-button
+                  size="small"
+                  round
+                  type="primary"
+                  @click.native="copyCssVariables"
+                  >复制变量</el-button
+                >
+              </div>
+              <el-row>
+                <p>color-primary 主题色</p>
+                <el-col :span="6">
+                  <el-color-picker v-model="color_primary"></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_primary"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>color-success 成功题色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_success"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_success"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>color-success 成功题色</p>
+                <el-col :span="6">
+                  <el-color-picker v-model="color_success"></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_success"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>color-warning 警告题色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_warning"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_warning"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>color-warning 警告题色</p>
+                <el-col :span="6">
+                  <el-color-picker v-model="color_warning"></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_warning"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>color-danger 危险题色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_danger"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_danger"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>color-danger 危险题色</p>
+                <el-col :span="6">
+                  <el-color-picker v-model="color_danger"></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_danger"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>color-info 信息题色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_info"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_info"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>color-info 信息题色</p>
+                <el-col :span="6">
+                  <el-color-picker v-model="color_info"></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_info"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>color-text-primary 主要文字颜色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_text_primary"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_text_primary"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>color-text-primary 主要文字颜色</p>
+                <el-col :span="6">
+                  <el-color-picker
+                    v-model="color_text_primary"
+                  ></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_text_primary"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>color-text-regular 常规文字颜色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_text_regular"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_text_regular"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>color-text-regular 常规文字颜色</p>
+                <el-col :span="6">
+                  <el-color-picker
+                    v-model="color_text_regular"
+                  ></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_text_regular"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>color-text-secondary 次要文字颜色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_text_secondary"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_text_secondary"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>color-text-secondary 次要文字颜色</p>
+                <el-col :span="6">
+                  <el-color-picker
+                    v-model="color_text_secondary"
+                  ></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_text_secondary"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>color-text-placeholder 占位文字颜色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="color_text_placeholder"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="color_text_placeholder"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>color-text-placeholder 占位文字颜色</p>
+                <el-col :span="6">
+                  <el-color-picker
+                    v-model="color_text_placeholder"
+                  ></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="color_text_placeholder"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>border-color-base 一级边框颜色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="border_color_base"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="border_color_base"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>border-color-base 一级边框颜色</p>
+                <el-col :span="6">
+                  <el-color-picker
+                    v-model="border_color_base"
+                  ></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="border_color_base"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>border-color-light 二级边框颜色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="border_color_light"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="border_color_light"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>border-color-light 二级边框颜色</p>
+                <el-col :span="6">
+                  <el-color-picker
+                    v-model="border_color_light"
+                  ></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="border_color_light"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>border-color-lighter 三级边框颜色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="border_color_lighter"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="border_color_lighter"></el-input>
-              </el-col>
-            </el-row>
+              <el-row>
+                <p>border-color-lighter 三级边框颜色</p>
+                <el-col :span="6">
+                  <el-color-picker
+                    v-model="border_color_lighter"
+                  ></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="border_color_lighter"></el-input>
+                </el-col>
+              </el-row>
 
-            <el-row>
-              <p>border-color-xlight 四级边框颜色</p>
-              <el-col :span="6">
-                <el-color-picker v-model="border_color_extra_light"></el-color-picker>
-              </el-col>
-              <el-col :span="18">
-                <el-input v-model="border_color_extra_light"></el-input>
-              </el-col>
-            </el-row>
-          </el-card>
-        </div>
+              <el-row>
+                <p>border-color-xlight 四级边框颜色</p>
+                <el-col :span="6">
+                  <el-color-picker
+                    v-model="border_color_extra_light"
+                  ></el-color-picker>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model="border_color_extra_light"></el-input>
+                </el-col>
+              </el-row>
+            </el-card>
+          </div>
 
-        <el-dialog :visible.sync="visible" title="复制CSS变量">
-          <pre>{{ cssVariables}}</pre>
-          <small>使用方式：将上面的代码通过style属性添加到项目的html标签上</small>
-        </el-dialog>
-      </el-aside>
-    </el-container>
-  </div>
-</body>
-<!-- import Vue before Element -->
-<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-<!-- import JavaScript -->
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
-<script>
-  const original = {
-    'color_primary': '#409EFF',
-    'color_success': '#67C23A',
-    'color_warning': '#E6A23C',
-    'color_danger': '#F56C6C',
-    'color_info': '#909399',
-    'color_white': '#FFFFFF',
-    'color_black': '#000000',
-    'color_text_primary': '#303133',
-    'color_text_regular': '#606266',
-    'color_text_secondary': '#909399',
-    'color_text_placeholder': '#C0C4CC',
-    'border_color_base': '#DCDFE6',
-    'border_color_light': '#E4E7ED',
-    'border_color_lighter': '#EBEEF5',
-    'border_color_extra_light': '#F2F6FC',
-    'font_size_extra_large': '20px',
-    'font_size_large': '18px',
-    'font_size_medium': '16px',
-    'font_size_base': '14px',
-    'font_size_small': '13px',
-    'font_size_extra_small': '12px',
-    'font_weight_primary': 500,
-    'font_weight_secondary': 100,
-    'font_line_height_primary': '24px',
-    'font_line_height_secondary': '16px'
-  };
-
-  Vue.config.devtools = true
-  new Vue({
-    el: '#app',
-    data() {
-      return {
-        global: {},
-        colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'],
-        'color_primary': '',
-        'color_success': '',
-        'color_warning': '',
-        'color_danger': '',
-        'color_info': '',
-        'color_white': '',
-        'color_black': '',
-        'color_text_primary': '',
-        'color_text_regular': '',
-        'color_text_secondary': '',
-        'color_text_placeholder': '',
-        'border_color_base': '',
-        'border_color_light': '',
-        'border_color_lighter': '',
-        'border_color_extra_light': '',
-        'font_size_extra_large': '',
-        'font_size_large': '',
-        'font_size_medium': '',
-        'font_size_base': '',
-        'font_size_small': '',
-        'font_size_extra_small': '',
-        'font_weight_primary': 0,
-        'font_weight_secondary': 0,
-        'font_line_height_primary': '',
-        'font_line_height_secondary': '',
-        radio: '1',
-        radio1: 'Washington',
-        radio2: '1',
-        checked: true,
-        checked1: ['Shanghai'],
-        checked2: true,
-        input: 'Element',
-        inputNumber: 1,
-        treeData: [{
-          label: '一级 1',
-          children: [{
-            label: '二级 1-1',
-            children: [{
-              label: '三级 1-1-1'
-            }]
-          }]
-        }, {
-          label: '一级 2',
-          children: [{
-            label: '二级 2-1',
-            children: [{
-              label: '三级 2-1-1'
-            }]
-          }, {
-            label: '二级 2-2',
-            children: [{
-              label: '三级 2-2-1'
-            }]
-          }]
-        }, {
-          label: '一级 3',
-          children: [{
-            label: '二级 3-1',
-            children: [{
-              label: '三级 3-1-1'
-            }]
-          }, {
-            label: '二级 3-2',
-            children: [{
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
-        selectOptions: [
-          {
-            value: 'Option1',
-            label: 'Option1'
-          },
-          {
-            value: 'Option2',
-            label: 'Option2'
-          },
-          {
-            value: 'Option3',
-            label: 'Option3'
-          },
-          {
-            value: 'Option4',
-            label: 'Option4'
-          },
-          {
-            value: 'Option5',
-            label: 'Option5'
-          }
-        ],
-        selectValue: '',
-        cascadeOptions: [
-          {
-            value: 'guide',
-            label: 'Guide',
-            children: [
-              {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                  {
-                    value: 'consistency',
-                    label: 'Consistency'
-                  },
-                  {
-                    value: 'feedback',
-                    label: 'Feedback'
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            value: 'resource',
-            label: 'Resource',
-            children: [
-              {
-                value: 'axure',
-                label: 'Axure Components'
-              },
-              {
-                value: 'sketch',
-                label: 'Sketch Templates'
-              },
-              {
-                value: 'docs',
-                label: 'Design Documentation'
-              }
-            ]
-          }
-        ],
-        cascaderValue: [],
-        switchValue: true,
-        slider: 28,
-        datePicker: '',
-        rate: null,
-        transferData: (() => {
-          const data = [];
-          for (let i = 1; i <= 15; i++) {
-            data.push({
-              key: i,
-              label: `Option ${i}`,
-              disabled: i % 4 === 0
-            });
-          }
-          return data;
-        })(),
-        transfer: [1, 4],
-        tableData: [
-          {
-            date: '2016-05-03',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          },
-          {
-            date: '2016-05-02',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          },
-          {
-            date: '2016-05-04',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          },
-          {
-            date: '2016-05-01',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }
-        ],
-        menu: '1',
-        tab: 'first',
-        collapse: ['1'],
-        treeData: [{
-          label: 'Level one 1',
-          children: [{
-            label: 'Level two 1-1',
-            children: [{
-              label: 'Level three 1-1-1'
-            }]
-          }]
-        }, {
-          label: 'Level one 2',
-          children: [{
-            label: 'Level two 2-1',
-            children: [{
-              label: 'Level three 2-1-1'
-            }]
-          }, {
-            label: 'Level two 2-2',
-            children: [{
-              label: 'Level three 2-2-1'
-            }]
-          }]
-        }, {
-          label: 'Level one 3',
-          children: [{
-            label: 'Level two 3-1',
-            children: [{
-              label: 'Level three 3-1-1'
-            }]
-          }, {
-            label: 'Level two 3-2',
-            children: [{
-              label: 'Level three 3-2-1'
-            }]
-          }]
-        }],
-        defaultTreeProps: {
-          children: 'children',
-          label: 'label'
-        },
-        avatarData: {
-          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-        },
-        cssVariables: '',
-        visible: false
-      };
-    },
-    watch: {
-      global: {
-        immediate: true,
-        handler(value) {
-          Object.keys(original).forEach((v) => {
-            const key = `$--${v.replace(/_/g, '-')}`;
-            if (value[key]) {
-              this[v] = value[key];
-            } else {
-              this[v] = original[v];
-            }
-          });
-        }
-      },
-      color_primary(v) {
-        this.setCssVariable('color-primary-base', v)
-      },
-      color_success(v) {
-        this.setCssVariable('color-success-base', v)
-      },
-      color_warning(v) {
-        this.setCssVariable('color-warning-base', v)
-      },
-      color_danger(v) {
-        this.setCssVariable('color-danger-base', v)
-      },
-      color_info(v) {
-        this.setCssVariable('color-info-base', v)
-      },
-      color_text_primary(v) {
-        this.setCssVariable('color-text-dark', v)
-      },
-      color_text_regular(v) {
-        this.setCssVariable('color-text-base', v)
-      },
-      color_text_secondary(v) {
-        this.setCssVariable('color-text-light', v)
-      },
-      color_text_placeholder(v) {
-        this.setCssVariable('color-text-lighter', v)
-      },
-      border_color_base(v) {
-        this.setCssVariable('border-color-base', v)
-      },
-      border_color_light(v) {
-        this.setCssVariable('border-color-light', v)
-      },
-      border_color_lighter(v) {
-        this.setCssVariable('border-color-lighter', v)
-      },
-      border_color_extra_light(v) {
-        this.setCssVariable('border-color-xlight', v)
-      },
-    },
-    methods: {
-      tintColor(a, b) {
-        return tintColor(a, b);
-      },
-      dataProxy(value) {
-        return this[`color_${value.toLowerCase()}`];
-      },
-      setGlobal() {
-        if (window.userThemeConfig) {
-          this.global = window.userThemeConfig.global;
-        }
-      },
-      tintColor(c, tint) {
-        const color = c.replace('#', '');
-        let red = parseInt(color.slice(0, 2), 16);
-        let green = parseInt(color.slice(2, 4), 16);
-        let blue = parseInt(color.slice(4, 6), 16);
-
-        if (tint === 0) { // when primary color is in its rgb space
-          return [red, green, blue].join(',');
-        } else {
-          red += Math.round(tint * (255 - red));
-          green += Math.round(tint * (255 - green));
-          blue += Math.round(tint * (255 - blue));
-          red = red.toString(16);
-          green = green.toString(16);
-          blue = blue.toString(16);
-          return `#${red}${green}${blue}`;
-        }
-      },
-      hexToHSL(hex) {
-        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-
-        var r = parseInt(result[1], 16);
-        var g = parseInt(result[2], 16);
-        var b = parseInt(result[3], 16);
-
-        r /= 255, g /= 255, b /= 255;
-        var max = Math.max(r, g, b), min = Math.min(r, g, b);
-        var h, s, l = (max + min) / 2;
-
-        if (max == min) {
-          h = s = 0; // achromatic
-        } else {
-          var d = max - min;
-          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-          switch (max) {
-            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-            case g: h = (b - r) / d + 2; break;
-            case b: h = (r - g) / d + 4; break;
-          }
-          h /= 6;
-        }
-
-        s = s * 100;
-        s = Math.round(s);
-        l = l * 100;
-        l = Math.round(l);
-        h = Math.round(360 * h);
+          <el-dialog :visible.sync="visible" title="复制CSS变量">
+            <pre>{{ cssVariables}}</pre>
+            <small
+              >使用方式：将上面的代码通过style属性添加到项目的html标签上</small
+            >
+          </el-dialog>
+        </el-aside>
+      </el-container>
+    </div>
+  </body>
+  <!-- import Vue before Element -->
+  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <script>
+    const original = {
+      color_primary: "#409EFF",
+      color_success: "#67C23A",
+      color_warning: "#E6A23C",
+      color_danger: "#F56C6C",
+      color_info: "#909399",
+      color_white: "#FFFFFF",
+      color_black: "#000000",
+      color_text_primary: "#303133",
+      color_text_regular: "#606266",
+      color_text_secondary: "#909399",
+      color_text_placeholder: "#C0C4CC",
+      border_color_base: "#DCDFE6",
+      border_color_light: "#E4E7ED",
+      border_color_lighter: "#EBEEF5",
+      border_color_extra_light: "#F2F6FC",
+      font_size_extra_large: "20px",
+      font_size_large: "18px",
+      font_size_medium: "16px",
+      font_size_base: "14px",
+      font_size_small: "13px",
+      font_size_extra_small: "12px",
+      font_weight_primary: 500,
+      font_weight_secondary: 100,
+      font_line_height_primary: "24px",
+      font_line_height_secondary: "16px",
+    };
 
+    Vue.config.devtools = true;
+    new Vue({
+      el: "#app",
+      data() {
         return {
-          h: h,
-          s: s + '%',
-          l: l + '%'
-        }
+          global: {},
+          colorLine: ["Primary", "Success", "Warning", "Danger", "Info"],
+          color_primary: "",
+          color_success: "",
+          color_warning: "",
+          color_danger: "",
+          color_info: "",
+          color_white: "",
+          color_black: "",
+          color_text_primary: "",
+          color_text_regular: "",
+          color_text_secondary: "",
+          color_text_placeholder: "",
+          border_color_base: "",
+          border_color_light: "",
+          border_color_lighter: "",
+          border_color_extra_light: "",
+          font_size_extra_large: "",
+          font_size_large: "",
+          font_size_medium: "",
+          font_size_base: "",
+          font_size_small: "",
+          font_size_extra_small: "",
+          font_weight_primary: 0,
+          font_weight_secondary: 0,
+          font_line_height_primary: "",
+          font_line_height_secondary: "",
+          radio: "1",
+          radio1: "Washington",
+          radio2: "1",
+          checked: true,
+          checked1: ["Shanghai"],
+          checked2: true,
+          input: "Element",
+          inputNumber: 1,
+          treeData: [
+            {
+              label: "一级 1",
+              children: [
+                {
+                  label: "二级 1-1",
+                  children: [
+                    {
+                      label: "三级 1-1-1",
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              label: "一级 2",
+              children: [
+                {
+                  label: "二级 2-1",
+                  children: [
+                    {
+                      label: "三级 2-1-1",
+                    },
+                  ],
+                },
+                {
+                  label: "二级 2-2",
+                  children: [
+                    {
+                      label: "三级 2-2-1",
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              label: "一级 3",
+              children: [
+                {
+                  label: "二级 3-1",
+                  children: [
+                    {
+                      label: "三级 3-1-1",
+                    },
+                  ],
+                },
+                {
+                  label: "二级 3-2",
+                  children: [
+                    {
+                      label: "三级 3-2-1",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+          selectOptions: [
+            {
+              value: "Option1",
+              label: "Option1",
+            },
+            {
+              value: "Option2",
+              label: "Option2",
+            },
+            {
+              value: "Option3",
+              label: "Option3",
+            },
+            {
+              value: "Option4",
+              label: "Option4",
+            },
+            {
+              value: "Option5",
+              label: "Option5",
+            },
+          ],
+          selectValue: "",
+          cascadeOptions: [
+            {
+              value: "guide",
+              label: "Guide",
+              children: [
+                {
+                  value: "disciplines",
+                  label: "Disciplines",
+                  children: [
+                    {
+                      value: "consistency",
+                      label: "Consistency",
+                    },
+                    {
+                      value: "feedback",
+                      label: "Feedback",
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              value: "resource",
+              label: "Resource",
+              children: [
+                {
+                  value: "axure",
+                  label: "Axure Components",
+                },
+                {
+                  value: "sketch",
+                  label: "Sketch Templates",
+                },
+                {
+                  value: "docs",
+                  label: "Design Documentation",
+                },
+              ],
+            },
+          ],
+          cascaderValue: [],
+          switchValue: true,
+          slider: 28,
+          datePicker: "",
+          rate: null,
+          transferData: (() => {
+            const data = [];
+            for (let i = 1; i <= 15; i++) {
+              data.push({
+                key: i,
+                label: `Option ${i}`,
+                disabled: i % 4 === 0,
+              });
+            }
+            return data;
+          })(),
+          transfer: [1, 4],
+          tableData: [
+            {
+              date: "2016-05-03",
+              name: "Tom",
+              address: "No. 189, Grove St, Los Angeles",
+            },
+            {
+              date: "2016-05-02",
+              name: "Tom",
+              address: "No. 189, Grove St, Los Angeles",
+            },
+            {
+              date: "2016-05-04",
+              name: "Tom",
+              address: "No. 189, Grove St, Los Angeles",
+            },
+            {
+              date: "2016-05-01",
+              name: "Tom",
+              address: "No. 189, Grove St, Los Angeles",
+            },
+          ],
+          menu: "1",
+          tab: "first",
+          collapse: ["1"],
+          treeData: [
+            {
+              label: "Level one 1",
+              children: [
+                {
+                  label: "Level two 1-1",
+                  children: [
+                    {
+                      label: "Level three 1-1-1",
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              label: "Level one 2",
+              children: [
+                {
+                  label: "Level two 2-1",
+                  children: [
+                    {
+                      label: "Level three 2-1-1",
+                    },
+                  ],
+                },
+                {
+                  label: "Level two 2-2",
+                  children: [
+                    {
+                      label: "Level three 2-2-1",
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              label: "Level one 3",
+              children: [
+                {
+                  label: "Level two 3-1",
+                  children: [
+                    {
+                      label: "Level three 3-1-1",
+                    },
+                  ],
+                },
+                {
+                  label: "Level two 3-2",
+                  children: [
+                    {
+                      label: "Level three 3-2-1",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+          defaultTreeProps: {
+            children: "children",
+            label: "label",
+          },
+          avatarData: {
+            url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          },
+          cssVariables: "",
+          visible: false,
+        };
       },
-      setCssVariable(key, color) {
-        const hslColor = this.hexToHSL(color)
-        document.documentElement.style.setProperty(`--${key}-h`, hslColor.h);
-        document.documentElement.style.setProperty(`--${key}-s`, hslColor.s);
-        document.documentElement.style.setProperty(`--${key}-l`, hslColor.l);
+      watch: {
+        global: {
+          immediate: true,
+          handler(value) {
+            Object.keys(original).forEach((v) => {
+              const key = `$--${v.replace(/_/g, "-")}`;
+              if (value[key]) {
+                this[v] = value[key];
+              } else {
+                this[v] = original[v];
+              }
+            });
+          },
+        },
+        color_primary(v) {
+          this.setCssVariable("color-primary-base", v);
+        },
+        color_success(v) {
+          this.setCssVariable("color-success-base", v);
+        },
+        color_warning(v) {
+          this.setCssVariable("color-warning-base", v);
+        },
+        color_danger(v) {
+          this.setCssVariable("color-danger-base", v);
+        },
+        color_info(v) {
+          this.setCssVariable("color-info-base", v);
+        },
+        color_text_primary(v) {
+          this.setCssVariable("color-text-dark", v);
+        },
+        color_text_regular(v) {
+          this.setCssVariable("color-text-base", v);
+        },
+        color_text_secondary(v) {
+          this.setCssVariable("color-text-light", v);
+        },
+        color_text_placeholder(v) {
+          this.setCssVariable("color-text-lighter", v);
+        },
+        border_color_base(v) {
+          this.setCssVariable("border-color-base", v);
+        },
+        border_color_light(v) {
+          this.setCssVariable("border-color-light", v);
+        },
+        border_color_lighter(v) {
+          this.setCssVariable("border-color-lighter", v);
+        },
+        border_color_extra_light(v) {
+          this.setCssVariable("border-color-xlight", v);
+        },
       },
-      copyCssVariables() {
-        const cssVariables = document.querySelector('html').getAttribute('style')
-        this.cssVariables = cssVariables ? cssVariables : '没有进行颜色修改，请先修改颜色！'
-        this.visible = true
-      }
-    },
-  })
-</script>
+      methods: {
+        tintColor(a, b) {
+          return tintColor(a, b);
+        },
+        dataProxy(value) {
+          return this[`color_${value.toLowerCase()}`];
+        },
+        setGlobal() {
+          if (window.userThemeConfig) {
+            this.global = window.userThemeConfig.global;
+          }
+        },
+        tintColor(c, tint) {
+          const color = c.replace("#", "");
+          let red = parseInt(color.slice(0, 2), 16);
+          let green = parseInt(color.slice(2, 4), 16);
+          let blue = parseInt(color.slice(4, 6), 16);
 
-</html>
\ No newline at end of file
+          if (tint === 0) {
+            // when primary color is in its rgb space
+            return [red, green, blue].join(",");
+          } else {
+            red += Math.round(tint * (255 - red));
+            green += Math.round(tint * (255 - green));
+            blue += Math.round(tint * (255 - blue));
+            red = red.toString(16);
+            green = green.toString(16);
+            blue = blue.toString(16);
+            return `#${red}${green}${blue}`;
+          }
+        },
+        hexToHSL(hex) {
+          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+          var r = parseInt(result[1], 16);
+          var g = parseInt(result[2], 16);
+          var b = parseInt(result[3], 16);
+
+          (r /= 255), (g /= 255), (b /= 255);
+          var max = Math.max(r, g, b),
+            min = Math.min(r, g, b);
+          var h,
+            s,
+            l = (max + min) / 2;
+
+          if (max == min) {
+            h = s = 0; // achromatic
+          } else {
+            var d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+              case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+              case g:
+                h = (b - r) / d + 2;
+                break;
+              case b:
+                h = (r - g) / d + 4;
+                break;
+            }
+            h /= 6;
+          }
+
+          s = s * 100;
+          s = Math.round(s);
+          l = l * 100;
+          l = Math.round(l);
+          h = Math.round(360 * h);
+
+          return {
+            h: h,
+            s: s + "%",
+            l: l + "%",
+          };
+        },
+        setCssVariable(key, color) {
+          const hslColor = this.hexToHSL(color);
+          document.documentElement.style.setProperty(`--${key}-h`, hslColor.h);
+          document.documentElement.style.setProperty(`--${key}-s`, hslColor.s);
+          document.documentElement.style.setProperty(`--${key}-l`, hslColor.l);
+        },
+        copyCssVariables() {
+          const cssVariables = document
+            .querySelector("html")
+            .getAttribute("style");
+          this.cssVariables = cssVariables
+            ? cssVariables
+            : "没有进行颜色修改，请先修改颜色！";
+          this.visible = true;
+        },
+      },
+    });
+  </script>
+</html>
diff --git a/packages/design-system/theme/src/_tokens.dark.scss b/packages/design-system/theme/src/_tokens.dark.scss
index e5acd4425c..e8a66b15fa 100644
--- a/packages/design-system/theme/src/_tokens.dark.scss
+++ b/packages/design-system/theme/src/_tokens.dark.scss
@@ -7,133 +7,259 @@
   --color-primary-h: 7;
   --color-primary-s: 100%;
   --color-primary-l: 68%;
-  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
+  --color-primary: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-l)
+  );
 
   --color-primary-tint-1-l: 18%;
-  --color-primary-tint-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-1-l));
+  --color-primary-tint-1: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-1-l)
+  );
 
   --color-primary-tint-2-l: 9%;
-  --color-primary-tint-2: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-2-l));
+  --color-primary-tint-2: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-2-l)
+  );
 
   --color-primary-tint-3-l: 3%;
-  --color-primary-tint-3: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-3-l));
+  --color-primary-tint-3: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-3-l)
+  );
 
   --color-primary-shade-1-l: 89%;
-  --color-primary-shade-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-shade-1-l));
+  --color-primary-shade-1: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-shade-1-l)
+  );
 
   --color-secondary-h: 247;
-  --color-secondary-s:  100%;
-  --color-secondary-l:  35%;
-  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
+  --color-secondary-s: 100%;
+  --color-secondary-l: 35%;
+  --color-secondary: hsl(
+    var(--color-secondary-h),
+    var(--color-secondary-s),
+    var(--color-secondary-l)
+  );
 
   --color-success-h: 150;
   --color-success-s: 74%;
   --color-success-l: 60%;
-  --color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
+  --color-success: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-l)
+  );
 
   --color-success-tint-1-l: 12%;
-  --color-success-tint-1: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-tint-1-l));
+  --color-success-tint-1: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-tint-1-l)
+  );
 
   --color-success-tint-2-l: 3%;
-  --color-success-tint-2: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-tint-2-l));
+  --color-success-tint-2: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-tint-2-l)
+  );
 
   --color-warning-h: 36;
   --color-warning-s: 77%;
   --color-warning-l: 43%;
-  --color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
+  --color-warning: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-l)
+  );
 
   --color-warning-tint-1-l: 12%;
-  --color-warning-tint-1: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-tint-1-l));
+  --color-warning-tint-1: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-tint-1-l)
+  );
 
   --color-warning-tint-2-l: 4%;
-  --color-warning-tint-2: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-tint-2-l));
+  --color-warning-tint-2: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-tint-2-l)
+  );
 
   --color-danger-h: 0;
   --color-danger-s: 88%;
   --color-danger-l: 35%;
-  --color-danger: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
+  --color-danger: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-l)
+  );
 
   --color-danger-tint-1-l: 8%;
-  --color-danger-tint-1: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-tint-1-l));
+  --color-danger-tint-1: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-tint-1-l)
+  );
 
   --color-danger-tint-2-l: 3%;
-  --color-danger-tint-2: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-tint-2-l));
+  --color-danger-tint-2: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-tint-2-l)
+  );
 
   --color-info-h: 220;
   --color-info-s: 4%;
   --color-info-l: 42%;
-  --color-info: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
+  --color-info: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-l)
+  );
 
   --color-info-tint-1-l: 12%;
-  --color-info-tint-1: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-1-l));
+  --color-info-tint-1: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-tint-1-l)
+  );
 
   --color-info-tint-2-l: 4%;
-  --color-info-tint-2: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-2-l));
+  --color-info-tint-2: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-tint-2-l)
+  );
 
   --color-text-dark-h: 0;
-  --color-text-dark-s:  0%;
-  --color-text-dark-l:  100%;
-  --color-text-dark: hsl(var(--color-text-dark-h), var(--color-text-dark-s), var(--color-text-dark-l));
+  --color-text-dark-s: 0%;
+  --color-text-dark-l: 100%;
+  --color-text-dark: hsl(
+    var(--color-text-dark-h),
+    var(--color-text-dark-s),
+    var(--color-text-dark-l)
+  );
 
   --color-text-base-h: 240;
-  --color-text-base-s:  4%;
-  --color-text-base-l:  49%;
-  --color-text-base: hsl(var(--color-text-base-h), var(--color-text-base-s), var(--color-text-base-l));
+  --color-text-base-s: 4%;
+  --color-text-base-l: 49%;
+  --color-text-base: hsl(
+    var(--color-text-base-h),
+    var(--color-text-base-s),
+    var(--color-text-base-l)
+  );
 
   --color-text-light-h: 220;
   --color-text-light-s: 4%;
   --color-text-light-l: 42%;
-  --color-text-light: hsl(var(--color-text-light-h), var(--color-text-light-s), var(--color-text-light-l));
+  --color-text-light: hsl(
+    var(--color-text-light-h),
+    var(--color-text-light-s),
+    var(--color-text-light-l)
+  );
 
   --color-text-lighter-h: 222;
-  --color-text-lighter-s:  17%;
-  --color-text-lighter-l:  12%;
-  --color-text-lighter: hsl(var(--color-text-lighter-h), var(--color-text-lighter-s), var(--color-text-lighter-l));
+  --color-text-lighter-s: 17%;
+  --color-text-lighter-l: 12%;
+  --color-text-lighter: hsl(
+    var(--color-text-lighter-h),
+    var(--color-text-lighter-s),
+    var(--color-text-lighter-l)
+  );
 
   --color-text-xlight-h: 0;
-  --color-text-xlight-s:  0%;
-  --color-text-xlight-l:  100%;
-  --color-text-xlight: hsl(var(--color-text-xlight-h), var(--color-text-xlight-s), var(--color-text-xlight-l));
+  --color-text-xlight-s: 0%;
+  --color-text-xlight-l: 100%;
+  --color-text-xlight: hsl(
+    var(--color-text-xlight-h),
+    var(--color-text-xlight-s),
+    var(--color-text-xlight-l)
+  );
 
   --color-foreground-base-h: 220;
-  --color-foreground-base-s:  20%;
-  --color-foreground-base-l:  12%;
-  --color-foreground-base: hsl(var(--color-foreground-base-h), var(--color-foreground-base-s), var(--color-foreground-base-l));
+  --color-foreground-base-s: 20%;
+  --color-foreground-base-l: 12%;
+  --color-foreground-base: hsl(
+    var(--color-foreground-base-h),
+    var(--color-foreground-base-s),
+    var(--color-foreground-base-l)
+  );
 
   --color-foreground-light-h: 0;
-  --color-foreground-light-s:  0%;
-  --color-foreground-light-l:  7%;
-  --color-foreground-light: hsl(var(--color-foreground-light-h), var(--color-foreground-light-s), var(--color-foreground-light-l));
+  --color-foreground-light-s: 0%;
+  --color-foreground-light-l: 7%;
+  --color-foreground-light: hsl(
+    var(--color-foreground-light-h),
+    var(--color-foreground-light-s),
+    var(--color-foreground-light-l)
+  );
 
   --color-foreground-xlight-h: 0;
-  --color-foreground-xlight-s:  0%;
-  --color-foreground-xlight-l:  0%;
-  --color-foreground-xlight: hsl(var(--color-foreground-xlight-h), var(--color-foreground-xlight-s), var(--color-foreground-xlight-l));
+  --color-foreground-xlight-s: 0%;
+  --color-foreground-xlight-l: 0%;
+  --color-foreground-xlight: hsl(
+    var(--color-foreground-xlight-h),
+    var(--color-foreground-xlight-s),
+    var(--color-foreground-xlight-l)
+  );
 
   --color-background-dark-h: 0;
-  --color-background-dark-s:  0%;
-  --color-background-dark-l:  100%;
-  --color-background-dark: hsl(var(--color-background-dark-h), var(--color-background-dark-s), var(--color-background-dark-l));
+  --color-background-dark-s: 0%;
+  --color-background-dark-l: 100%;
+  --color-background-dark: hsl(
+    var(--color-background-dark-h),
+    var(--color-background-dark-s),
+    var(--color-background-dark-l)
+  );
 
   --color-background-base-h: 252;
-  --color-background-base-s:  71%;
-  --color-background-base-l:  99%;
-  --color-background-base: hsl(var(--color-background-base-h), var(--color-background-base-s), var(--color-background-base-l));
+  --color-background-base-s: 71%;
+  --color-background-base-l: 99%;
+  --color-background-base: hsl(
+    var(--color-background-base-h),
+    var(--color-background-base-s),
+    var(--color-background-base-l)
+  );
 
   --color-background-light-h: 220;
-  --color-background-light-s:  27%;
-  --color-background-light-l:  98%;
-  --color-background-light: hsl(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l));
+  --color-background-light-s: 27%;
+  --color-background-light-l: 98%;
+  --color-background-light: hsl(
+    var(--color-background-light-h),
+    var(--color-background-light-s),
+    var(--color-background-light-l)
+  );
 
   --color-background-lighter-h: 220;
-  --color-background-lighter-s:  30%;
-  --color-background-lighter-l:  96%;
-  --color-background-lighter: hsl(var(--color-background-lighter-h), var(--color-background-lighter-s), var(--color-background-lighter-l));
+  --color-background-lighter-s: 30%;
+  --color-background-lighter-l: 96%;
+  --color-background-lighter: hsl(
+    var(--color-background-lighter-h),
+    var(--color-background-lighter-s),
+    var(--color-background-lighter-l)
+  );
 
   --color-background-xlight-h: 240;
-  --color-background-xlight-s:  4%;
-  --color-background-xlight-l:  19%;
-  --color-background-xlight: hsl(var(--color-background-xlight-h), var(--color-background-xlight-s), var(--color-background-xlight-l));
+  --color-background-xlight-s: 4%;
+  --color-background-xlight-l: 19%;
+  --color-background-xlight: hsl(
+    var(--color-background-xlight-h),
+    var(--color-background-xlight-s),
+    var(--color-background-xlight-l)
+  );
 }
 
-body.theme-dark { @include theme }
\ No newline at end of file
+body.theme-dark {
+  @include theme;
+}
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index bc8686617c..026a80a41d 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -7,139 +7,264 @@
   --color-primary-h: 6.9;
   --color-primary-s: 100%;
   --color-primary-l: 67.6%;
-  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
+  --color-primary: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-l)
+  );
 
   --color-primary-tint-1-l: 88%;
-  --color-primary-tint-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-1-l));
+  --color-primary-tint-1: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-1-l)
+  );
 
   --color-primary-tint-2-l: 94.5%;
-  --color-primary-tint-2: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-2-l));
+  --color-primary-tint-2: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-2-l)
+  );
 
   --color-primary-tint-3-l: 96.9%;
-  --color-primary-tint-3: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-3-l));
+  --color-primary-tint-3: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-3-l)
+  );
 
   --color-primary-shade-1-l: 23%;
-  --color-primary-shade-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-shade-1-l));
+  --color-primary-shade-1: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-shade-1-l)
+  );
 
   --color-secondary-h: 247.4;
-  --color-secondary-s:  100%;
-  --color-secondary-l:  65.1%;
-  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
+  --color-secondary-s: 100%;
+  --color-secondary-l: 65.1%;
+  --color-secondary: hsl(
+    var(--color-secondary-h),
+    var(--color-secondary-s),
+    var(--color-secondary-l)
+  );
 
   --color-success-h: 150.4;
   --color-success-s: 73.8%;
   --color-success-l: 40.4%;
-  --color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
+  --color-success: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-l)
+  );
 
   --color-success-tint-1-l: 90%;
-  --color-success-tint-1: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-tint-1-l));
+  --color-success-tint-1: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-tint-1-l)
+  );
 
   --color-success-tint-2-l: 94.9%;
-  --color-success-tint-2: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-tint-2-l));
+  --color-success-tint-2: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-tint-2-l)
+  );
 
   --color-warning-h: 36;
   --color-warning-s: 77%;
   --color-warning-l: 57%;
-  --color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
+  --color-warning: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-l)
+  );
 
   --color-warning-tint-1-l: 88%;
-  --color-warning-tint-1: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-tint-1-l));
+  --color-warning-tint-1: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-tint-1-l)
+  );
 
   --color-warning-tint-2-l: 96%;
-  --color-warning-tint-2: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-tint-2-l));
+  --color-warning-tint-2: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-tint-2-l)
+  );
 
   --color-danger-h: 0;
   --color-danger-s: 87.6%;
   --color-danger-l: 65.3%;
-  --color-danger: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
+  --color-danger: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-l)
+  );
 
   --color-danger-tint-1-l: 93.9%;
-  --color-danger-tint-1: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-tint-1-l));
+  --color-danger-tint-1: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-tint-1-l)
+  );
   --color-danger-tint-2-l: 96.9%;
-  --color-danger-tint-2: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-tint-2-l));
+  --color-danger-tint-2: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-tint-2-l)
+  );
 
   --color-info-h: 220;
   --color-info-s: 4%;
   --color-info-l: 58%;
-  --color-info: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
+  --color-info: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-l)
+  );
 
   --color-info-tint-1-l: 88%;
-  --color-info-tint-1: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-1-l));
+  --color-info-tint-1: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-tint-1-l)
+  );
   --color-info-tint-2-l: 96%;
-  --color-info-tint-2: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-2-l));
+  --color-info-tint-2: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-tint-2-l)
+  );
 
   --color-text-dark-h: 0;
-  --color-text-dark-s:  0%;
-  --color-text-dark-l:  33.3%;
-  --color-text-dark: hsl(var(--color-text-dark-h), var(--color-text-dark-s), var(--color-text-dark-l));
+  --color-text-dark-s: 0%;
+  --color-text-dark-l: 33.3%;
+  --color-text-dark: hsl(
+    var(--color-text-dark-h),
+    var(--color-text-dark-s),
+    var(--color-text-dark-l)
+  );
 
   --color-text-base-h: 240;
-  --color-text-base-s:  4%;
-  --color-text-base-l:  51%;
-  --color-text-base: hsl(var(--color-text-base-h), var(--color-text-base-s), var(--color-text-base-l));
+  --color-text-base-s: 4%;
+  --color-text-base-l: 51%;
+  --color-text-base: hsl(
+    var(--color-text-base-h),
+    var(--color-text-base-s),
+    var(--color-text-base-l)
+  );
 
   --color-text-light-h: 220;
   --color-text-light-s: 4.2%;
   --color-text-light-l: 58.2%;
-  --color-text-light: hsl(var(--color-text-light-h), var(--color-text-light-s), var(--color-text-light-l));
-  
+  --color-text-light: hsl(
+    var(--color-text-light-h),
+    var(--color-text-light-s),
+    var(--color-text-light-l)
+  );
+
   // todo placeholder color - hsl(222,16.7%,88.2%) - change after roll out inputs
   --color-text-lighter-h: 220;
-  --color-text-lighter-s:  10.5%;
-  --color-text-lighter-l:  77.6%;
-  --color-text-lighter: hsl(var(--color-text-lighter-h), var(--color-text-lighter-s), var(--color-text-lighter-l));
+  --color-text-lighter-s: 10.5%;
+  --color-text-lighter-l: 77.6%;
+  --color-text-lighter: hsl(
+    var(--color-text-lighter-h),
+    var(--color-text-lighter-s),
+    var(--color-text-lighter-l)
+  );
 
   --color-text-xlight-h: 0;
-  --color-text-xlight-s:  0%;
-  --color-text-xlight-l:  100%;
-  --color-text-xlight: hsl(var(--color-text-xlight-h), var(--color-text-xlight-s), var(--color-text-xlight-l));
+  --color-text-xlight-s: 0%;
+  --color-text-xlight-l: 100%;
+  --color-text-xlight: hsl(
+    var(--color-text-xlight-h),
+    var(--color-text-xlight-s),
+    var(--color-text-xlight-l)
+  );
 
   --color-foreground-base-h: 220;
-  --color-foreground-base-s:  20%;
-  --color-foreground-base-l:  88.2%;
-  --color-foreground-base: hsl(var(--color-foreground-base-h), var(--color-foreground-base-s), var(--color-foreground-base-l));
+  --color-foreground-base-s: 20%;
+  --color-foreground-base-l: 88.2%;
+  --color-foreground-base: hsl(
+    var(--color-foreground-base-h),
+    var(--color-foreground-base-s),
+    var(--color-foreground-base-l)
+  );
 
   --color-foreground-light-h: 0;
-  --color-foreground-light-s:  0%;
-  --color-foreground-light-l:  93.3%;
-  --color-foreground-light: hsl(var(--color-foreground-light-h), var(--color-foreground-light-s), var(--color-foreground-light-l));
+  --color-foreground-light-s: 0%;
+  --color-foreground-light-l: 93.3%;
+  --color-foreground-light: hsl(
+    var(--color-foreground-light-h),
+    var(--color-foreground-light-s),
+    var(--color-foreground-light-l)
+  );
 
   --color-foreground-xlight-h: 0;
-  --color-foreground-xlight-s:  0%;
-  --color-foreground-xlight-l:  100%;
-  --color-foreground-xlight: hsl(var(--color-foreground-xlight-h), var(--color-foreground-xlight-s), var(--color-foreground-xlight-l));
+  --color-foreground-xlight-s: 0%;
+  --color-foreground-xlight-l: 100%;
+  --color-foreground-xlight: hsl(
+    var(--color-foreground-xlight-h),
+    var(--color-foreground-xlight-s),
+    var(--color-foreground-xlight-l)
+  );
 
   --color-background-dark-h: 240;
-  --color-background-dark-s:  4.2%;
-  --color-background-dark-l:  18.8%;
-  --color-background-dark: hsl(var(--color-background-dark-h), var(--color-background-dark-s), var(--color-background-dark-l));
+  --color-background-dark-s: 4.2%;
+  --color-background-dark-l: 18.8%;
+  --color-background-dark: hsl(
+    var(--color-background-dark-h),
+    var(--color-background-dark-s),
+    var(--color-background-dark-l)
+  );
 
   --color-background-base-h: 220;
-  --color-background-base-s:  30%;
-  --color-background-base-l:  96.1%;
-  --color-background-base: hsl(var(--color-background-base-h), var(--color-background-base-s), var(--color-background-base-l));
+  --color-background-base-s: 30%;
+  --color-background-base-l: 96.1%;
+  --color-background-base: hsl(
+    var(--color-background-base-h),
+    var(--color-background-base-s),
+    var(--color-background-base-l)
+  );
 
   --color-background-light-h: 220;
-  --color-background-light-s:  27.3%;
-  --color-background-light-l:  97.8%;
-  --color-background-light: hsl(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l));
+  --color-background-light-s: 27.3%;
+  --color-background-light-l: 97.8%;
+  --color-background-light: hsl(
+    var(--color-background-light-h),
+    var(--color-background-light-s),
+    var(--color-background-light-l)
+  );
 
   --color-background-lighter-h: 252;
-  --color-background-lighter-s:  71.4%;
-  --color-background-lighter-l:  98.6%;
-  --color-background-lighter: hsl(var(--color-background-lighter-h), var(--color-background-lighter-s), var(--color-background-lighter-l));
+  --color-background-lighter-s: 71.4%;
+  --color-background-lighter-l: 98.6%;
+  --color-background-lighter: hsl(
+    var(--color-background-lighter-h),
+    var(--color-background-lighter-s),
+    var(--color-background-lighter-l)
+  );
 
   --color-background-xlight-h: 0;
-  --color-background-xlight-s:  0%;
-  --color-background-xlight-l:  100%;
-  --color-background-xlight: hsl(var(--color-background-xlight-h), var(--color-background-xlight-s), var(--color-background-xlight-l));
+  --color-background-xlight-s: 0%;
+  --color-background-xlight-l: 100%;
+  --color-background-xlight: hsl(
+    var(--color-background-xlight-h),
+    var(--color-background-xlight-s),
+    var(--color-background-xlight-l)
+  );
 
   --border-radius-base: 4px;
   --border-radius-small: 2px;
 
   --border-style-base: solid;
   --border-width-base: 1px;
-  --border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+  --border-base: var(--border-width-base) var(--border-style-base)
+    var(--color-foreground-base);
 
   --font-size-2xs: 0.75rem;
   --font-size-xs: 0.8125rem;
@@ -157,7 +282,7 @@
   --font-weight-regular: 400;
   --font-weight-semi-bold: 500;
   --font-weight-bold: 600;
-  --font-family: 'Open Sans',sans-serif;
+  --font-family: "Open Sans", sans-serif;
 
   --spacing-5xs: 0.125rem;
   --spacing-4xs: 0.25rem;
@@ -177,4 +302,6 @@
   --button-shade-active: 10%;
 }
 
-:root { @include theme }
\ No newline at end of file
+:root {
+  @include theme;
+}
diff --git a/packages/design-system/theme/src/alert.scss b/packages/design-system/theme/src/alert.scss
index 658ccd22b8..55fcb9a30f 100644
--- a/packages/design-system/theme/src/alert.scss
+++ b/packages/design-system/theme/src/alert.scss
@@ -13,7 +13,7 @@
   opacity: 1;
   display: flex;
   align-items: center;
-  transition: opacity .2s;
+  transition: opacity 0.2s;
 
   @include mixins.when(light) {
     .el-alert__closebtn {
diff --git a/packages/design-system/theme/src/avatar.scss b/packages/design-system/theme/src/avatar.scss
index 20eb7fd221..2ea1b89c0d 100644
--- a/packages/design-system/theme/src/avatar.scss
+++ b/packages/design-system/theme/src/avatar.scss
@@ -13,7 +13,7 @@
   line-height: var.$avatar-large-size;
   font-size: var.$avatar-text-font-size;
 
-  >img {
+  > img {
     display: block;
     height: 100%;
     vertical-align: middle;
diff --git a/packages/design-system/theme/src/backtop.scss b/packages/design-system/theme/src/backtop.scss
index e134a49eb7..f72ed0f6b7 100644
--- a/packages/design-system/theme/src/backtop.scss
+++ b/packages/design-system/theme/src/backtop.scss
@@ -12,11 +12,11 @@
   align-items: center;
   justify-content: center;
   font-size: 20px;
-  box-shadow: 0 0 6px rgba(0,0,0, .12);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
   cursor: pointer;
   z-index: 5;
 
   &:hover {
-    background-color: var.$backtop-hover-background-color
+    background-color: var.$backtop-hover-background-color;
   }
 }
diff --git a/packages/design-system/theme/src/breadcrumb.scss b/packages/design-system/theme/src/breadcrumb.scss
index 0994f99c30..9b661d0579 100644
--- a/packages/design-system/theme/src/breadcrumb.scss
+++ b/packages/design-system/theme/src/breadcrumb.scss
@@ -12,7 +12,7 @@
     font-weight: bold;
     color: var.$color-text-placeholder;
 
-    &[class*=icon] {
+    &[class*="icon"] {
       margin: 0 6px;
       font-weight: normal;
     }
@@ -24,7 +24,8 @@
     @include mixins.e(inner) {
       color: var.$color-text-primary;
 
-      &.is-link, & a {
+      &.is-link,
+      & a {
         font-weight: bold;
         text-decoration: none;
         transition: var.$color-transition-base;
@@ -40,7 +41,8 @@
     &:last-child {
       .el-breadcrumb__inner,
       .el-breadcrumb__inner a {
-        &, &:hover {
+        &,
+        &:hover {
           font-weight: normal;
           color: var.$color-text-primary;
           cursor: text;
diff --git a/packages/design-system/theme/src/button-group.scss b/packages/design-system/theme/src/button-group.scss
index 4c24a5d7d8..fe5084018d 100644
--- a/packages/design-system/theme/src/button-group.scss
+++ b/packages/design-system/theme/src/button-group.scss
@@ -6,80 +6,79 @@
 @use 'mixins/function';
 
 @include mixins.b(button-group) {
-	@include utils.utils-clearfix;
-	display: inline-block;
-	vertical-align: middle;
-      
-	& > .el-button {
-	  float: left;
-	  position: relative;
-	  & + .el-button {
-	    margin-left: 0;
-	  }
-	  &.is-disabled {
-	    z-index: 1;
-	  }
-	  &:first-child {
-	    border-top-right-radius: 0;
-	    border-bottom-right-radius: 0;
-	  }
-	  &:last-child {
-	    border-top-left-radius: 0;
-	    border-bottom-left-radius: 0;
-	  }
-	  &:first-child:last-child {
-	    border-top-right-radius: var(--border-radius-base);
-	    border-bottom-right-radius: var(--border-radius-base);
-	    border-top-left-radius: var(--border-radius-base);
-	    border-bottom-left-radius: var(--border-radius-base);
-      
-	    &.is-round {
-	      border-radius: 20px;
-	    }
-      
-	    &.is-circle {
-	      border-radius: 50%;
-	    }
-	  }
-	  &:not(:first-child):not(:last-child) {
-	    border-radius: 0;
-	  }
-	  &:not(:last-child) {
-	    margin-right: -1px;
-	  }
-      
-	  &:hover,
-	  &:focus,
-	  &:active {
-	    z-index: 1;
-	  }
-      
-	  @include mixins.when(active) {
-	    z-index: 1;
-	  }
-	}
-      
-	& > .el-dropdown {
-	  & > .el-button {
-	    border-top-left-radius: 0;
-	    border-bottom-left-radius: 0;
-	    border-left-color: rgba(var.$color-white, 0.5);
-	  }
-	}
-      
-	@each $type in (primary, success, warning, danger, info) {
-	  .el-button--#{$type} {
-	    &:first-child {
-	      border-right-color: rgba(var.$color-white, 0.5);
-	    }
-	    &:last-child {
-	      border-left-color: rgba(var.$color-white, 0.5);
-	    }
-	    &:not(:first-child):not(:last-child) {
-	      border-left-color: rgba(var.$color-white, 0.5);
-	      border-right-color: rgba(var.$color-white, 0.5);
-	    }
-	  }
-	}
+  @include utils.utils-clearfix;
+  display: inline-block;
+  vertical-align: middle;
+
+  & > .el-button {
+    float: left;
+    position: relative;
+    & + .el-button {
+      margin-left: 0;
+    }
+    &.is-disabled {
+      z-index: 1;
+    }
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    &:first-child:last-child {
+      border-top-right-radius: var(--border-radius-base);
+      border-bottom-right-radius: var(--border-radius-base);
+      border-top-left-radius: var(--border-radius-base);
+      border-bottom-left-radius: var(--border-radius-base);
+
+      &.is-round {
+        border-radius: 20px;
       }
-      
\ No newline at end of file
+
+      &.is-circle {
+        border-radius: 50%;
+      }
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 1;
+    }
+
+    @include mixins.when(active) {
+      z-index: 1;
+    }
+  }
+
+  & > .el-dropdown {
+    & > .el-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: rgba(var.$color-white, 0.5);
+    }
+  }
+
+  @each $type in (primary, success, warning, danger, info) {
+    .el-button--#{$type} {
+      &:first-child {
+        border-right-color: rgba(var.$color-white, 0.5);
+      }
+      &:last-child {
+        border-left-color: rgba(var.$color-white, 0.5);
+      }
+      &:not(:first-child):not(:last-child) {
+        border-left-color: rgba(var.$color-white, 0.5);
+        border-right-color: rgba(var.$color-white, 0.5);
+      }
+    }
+  }
+}
diff --git a/packages/design-system/theme/src/button.scss b/packages/design-system/theme/src/button.scss
index 705f86f397..975b37c604 100644
--- a/packages/design-system/theme/src/button.scss
+++ b/packages/design-system/theme/src/button.scss
@@ -5,10 +5,10 @@
 
 $active-shade-percent: 10%;
 $color-primary-shade: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	-($active-shade-percent)
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  -($active-shade-percent)
 );
 
 $font-weight: var(--font-weight-bold);
@@ -27,10 +27,16 @@ $background-color: var(--button-background-color, var(--color-primary));
 
 $active-color: var(--button-active-color, var(--color-text-xlight));
 $active-border-color: var(--button-active-border-color, $color-primary-shade);
-$active-background-color: var(--button-active-background-color, $color-primary-shade);
+$active-background-color: var(
+  --button-active-background-color,
+  $color-primary-shade
+);
 
 $disabled-color: var(--color-text-light);
-$disabled-background-color: var(--button-disabled-background-color, var(--color-foreground-base));
+$disabled-background-color: var(
+  --button-disabled-background-color,
+  var(--color-foreground-base)
+);
 $disabled-border-color: var(--color-foreground-base);
 
 $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
@@ -70,61 +76,61 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
   }
 
   @include mixins.when(loading) {
-	position: relative;
-	pointer-events: none;
-    
-	&:before {
-	  pointer-events: none;
-	  content: '';
-	  position: absolute;
-	  left: -1px;
-	  top: -1px;
-	  right: -1px;
-	  bottom: -1px;
-	  border-radius: inherit;
-	  background-color: $loading-overlay-background-color;
-	}
+    position: relative;
+    pointer-events: none;
+
+    &:before {
+      pointer-events: none;
+      content: "";
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: inherit;
+      background-color: $loading-overlay-background-color;
+    }
   }
 
   @include mixins.when(disabled) {
-	&,
-	&:hover,
-	&:active,
-	&:focus {
-	  cursor: not-allowed;
-	  background-image: none;
-	  color: $disabled-color;
-	  background-color: $disabled-background-color;
-	  border-color: $disabled-border-color;
-	}
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      cursor: not-allowed;
+      background-image: none;
+      color: $disabled-color;
+      background-color: $disabled-background-color;
+      border-color: $disabled-border-color;
+    }
   }
 
   @include mixins.when(circle) {
-	border-radius: 50%;
+    border-radius: 50%;
 
-	--button-padding-vertical: var(--spacing-xs);
-	--button-padding-horizontal: var(--spacing-xs);
+    --button-padding-vertical: var(--spacing-xs);
+    --button-padding-horizontal: var(--spacing-xs);
   }
 
   @include mixins.m(small) {
-	--button-padding-vertical: var(--spacing-3xs);
-	--button-padding-horizontal: var(--spacing-xs);
-	--button-font-size: var(--font-size-2xs);
-    
-	@include mixins.when(circle) {
-		--button-padding-vertical: var(--spacing-3xs);
-		--button-padding-horizontal: var(--spacing-3xs);
-	}
-   }
+    --button-padding-vertical: var(--spacing-3xs);
+    --button-padding-horizontal: var(--spacing-xs);
+    --button-font-size: var(--font-size-2xs);
 
-   @include mixins.m(medium) {
-	--button-padding-vertical: var(--spacing-2xs);
-	--button-padding-horizontal: var(--spacing-xs);
-	--button-font-size: var(--font-size-2xs);
+    @include mixins.when(circle) {
+      --button-padding-vertical: var(--spacing-3xs);
+      --button-padding-horizontal: var(--spacing-3xs);
+    }
+  }
 
-	@include mixins.when(circle) {
-		--button-padding-vertical: var(--spacing-2xs);
-		--button-padding-horizontal: var(--spacing-2xs);
-	}
-   }
+  @include mixins.m(medium) {
+    --button-padding-vertical: var(--spacing-2xs);
+    --button-padding-horizontal: var(--spacing-xs);
+    --button-font-size: var(--font-size-2xs);
+
+    @include mixins.when(circle) {
+      --button-padding-vertical: var(--spacing-2xs);
+      --button-padding-horizontal: var(--spacing-2xs);
+    }
+  }
 }
diff --git a/packages/design-system/theme/src/calendar.scss b/packages/design-system/theme/src/calendar.scss
index 96c077466e..f4b82e481b 100644
--- a/packages/design-system/theme/src/calendar.scss
+++ b/packages/design-system/theme/src/calendar.scss
@@ -4,7 +4,7 @@
 @use "button-group";
 
 @include mixins.b(calendar) {
-  background-color:#fff;
+  background-color: #fff;
 
   @include mixins.e(header) {
     display: flex;
diff --git a/packages/design-system/theme/src/carousel-item.scss b/packages/design-system/theme/src/carousel-item.scss
index 13a5fb3d66..f6e789ec18 100644
--- a/packages/design-system/theme/src/carousel-item.scss
+++ b/packages/design-system/theme/src/carousel-item.scss
@@ -17,12 +17,12 @@
     }
 
     @include mixins.when(animating) {
-      transition: transform .4s ease-in-out;
+      transition: transform 0.4s ease-in-out;
     }
 
     @include mixins.m(card) {
       width: 50%;
-      transition: transform .4s ease-in-out;
+      transition: transform 0.4s ease-in-out;
       &.is-in-stage {
         cursor: pointer;
         z-index: var.$index-normal;
@@ -45,6 +45,6 @@
     left: 0;
     background-color: var.$color-white;
     opacity: 0.24;
-    transition: .2s;
+    transition: 0.2s;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/design-system/theme/src/carousel.scss b/packages/design-system/theme/src/carousel.scss
index 2e43d33218..30e6d689ec 100644
--- a/packages/design-system/theme/src/carousel.scss
+++ b/packages/design-system/theme/src/carousel.scss
@@ -25,7 +25,7 @@
     height: var.$carousel-arrow-size;
     width: var.$carousel-arrow-size;
     cursor: pointer;
-    transition: .3s;
+    transition: 0.3s;
     border-radius: 50%;
     background-color: var.$carousel-arrow-background;
     color: var.$color-white;
@@ -73,7 +73,8 @@
     }
 
     @include mixins.m(outside) {
-      bottom: #{var.$carousel-indicator-height + var.$carousel-indicator-padding-vertical * 2};
+      bottom: #{var.$carousel-indicator-height +
+        var.$carousel-indicator-padding-vertical * 2};
       text-align: center;
       position: static;
       transform: none;
@@ -115,11 +116,13 @@
 
     @include mixins.m(horizontal) {
       display: inline-block;
-      padding: var.$carousel-indicator-padding-vertical var.$carousel-indicator-padding-horizontal;
+      padding: var.$carousel-indicator-padding-vertical
+        var.$carousel-indicator-padding-horizontal;
     }
 
     @include mixins.m(vertical) {
-      padding: var.$carousel-indicator-padding-horizontal var.$carousel-indicator-padding-vertical;
+      padding: var.$carousel-indicator-padding-horizontal
+        var.$carousel-indicator-padding-vertical;
       .el-carousel__button {
         width: var.$carousel-indicator-height;
         height: #{var.$carousel-indicator-width * 0.5};
@@ -144,7 +147,7 @@
     padding: 0;
     margin: 0;
     cursor: pointer;
-    transition: .3s;
+    transition: 0.3s;
   }
 }
 
diff --git a/packages/design-system/theme/src/cascader-panel.scss b/packages/design-system/theme/src/cascader-panel.scss
index 1e0255c7e5..0d5f66d81d 100644
--- a/packages/design-system/theme/src/cascader-panel.scss
+++ b/packages/design-system/theme/src/cascader-panel.scss
@@ -82,7 +82,8 @@
 
   &:not(.is-disabled) {
     cursor: pointer;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: var.$cascader-node-background-hover;
     }
   }
diff --git a/packages/design-system/theme/src/cascader.scss b/packages/design-system/theme/src/cascader.scss
index 10f3d702fb..85a41e5f28 100644
--- a/packages/design-system/theme/src/cascader.scss
+++ b/packages/design-system/theme/src/cascader.scss
@@ -30,7 +30,7 @@
     }
 
     .el-icon-arrow-down {
-      transition: transform .3s;
+      transition: transform 0.3s;
       font-size: 14px;
 
       @include mixins.when(reverse) {
@@ -145,7 +145,8 @@
     outline: none;
     cursor: pointer;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: var.$cascader-node-background-hover;
     }
 
diff --git a/packages/design-system/theme/src/checkbox.scss b/packages/design-system/theme/src/checkbox.scss
index 22d105735b..0cb6c594df 100644
--- a/packages/design-system/theme/src/checkbox.scss
+++ b/packages/design-system/theme/src/checkbox.scss
@@ -161,7 +161,8 @@
         color: var.$checkbox-checked-font-color;
       }
     }
-    @include mixins.when(focus) { /*focus时 视觉上区分*/
+    @include mixins.when(focus) {
+      /*focus时 视觉上区分*/
       .el-checkbox__inner {
         border-color: var.$checkbox-input-border-color-hover;
       }
@@ -172,7 +173,7 @@
         border-color: var.$checkbox-checked-input-border-color;
 
         &::before {
-          content: '';
+          content: "";
           position: absolute;
           display: block;
           background-color: var.$checkbox-checked-icon-color;
@@ -199,8 +200,8 @@
     height: var.$checkbox-input-height;
     background-color: var.$checkbox-background-color;
     z-index: var.$index-normal;
-    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
-    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
 
     &:hover {
       border-color: var.$checkbox-input-border-color-hover;
@@ -218,7 +219,7 @@
       top: 1px;
       transform: rotate(45deg) scaleY(0);
       width: 3px;
-      transition: transform .15s ease-in .05s;
+      transition: transform 0.15s ease-in 0.05s;
       transform-origin: center;
     }
   }
@@ -270,7 +271,11 @@
     border-radius: 0;
     @include utils.utils-user-select(none);
 
-    @include button.button-size(var.$button-padding-vertical, var.$button-padding-horizontal, var.$button-font-size,);
+    @include button.button-size(
+      var.$button-padding-vertical,
+      var.$button-padding-horizontal,
+      var.$button-font-size
+    );
 
     &:hover {
       color: var(--color-primary);
@@ -341,19 +346,31 @@
   @include mixins.m(medium) {
     .el-checkbox-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-medium-padding-vertical, var.$button-medium-padding-horizontal, var.$button-medium-font-size,);
+      @include button.button-size(
+        var.$button-medium-padding-vertical,
+        var.$button-medium-padding-horizontal,
+        var.$button-medium-font-size
+      );
     }
   }
   @include mixins.m(small) {
     .el-checkbox-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-small-padding-vertical, var.$button-small-padding-horizontal, var.$button-small-font-size,);
+      @include button.button-size(
+        var.$button-small-padding-vertical,
+        var.$button-small-padding-horizontal,
+        var.$button-small-font-size
+      );
     }
   }
   @include mixins.m(mini) {
     .el-checkbox-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-mini-padding-vertical, var.$button-mini-padding-horizontal, var.$button-mini-font-size,);
+      @include button.button-size(
+        var.$button-mini-padding-vertical,
+        var.$button-mini-padding-horizontal,
+        var.$button-mini-font-size
+      );
     }
   }
 }
diff --git a/packages/design-system/theme/src/col.scss b/packages/design-system/theme/src/col.scss
index a53ca1286c..d08d7624bc 100644
--- a/packages/design-system/theme/src/col.scss
+++ b/packages/design-system/theme/src/col.scss
@@ -155,4 +155,4 @@
       left: (math.div(1, 24) * $i * 100) * 1%;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/design-system/theme/src/collapse.scss b/packages/design-system/theme/src/collapse.scss
index 50523b231a..67dc39950c 100644
--- a/packages/design-system/theme/src/collapse.scss
+++ b/packages/design-system/theme/src/collapse.scss
@@ -24,17 +24,17 @@
     border-bottom: 1px solid var.$collapse-border-color;
     font-size: var.$collapse-header-font-size;
     font-weight: 500;
-    transition: border-bottom-color .3s;
+    transition: border-bottom-color 0.3s;
     outline: none;
     @include mixins.e(arrow) {
       margin: 0 8px 0 auto;
-      transition: transform .3s;
+      transition: transform 0.3s;
       font-weight: 300;
       @include mixins.when(active) {
         transform: rotate(90deg);
       }
     }
-    &.focusing:focus:not(:hover){
+    &.focusing:focus:not(:hover) {
       color: var(--color-primary);
     }
     @include mixins.when(active) {
diff --git a/packages/design-system/theme/src/color-picker.scss b/packages/design-system/theme/src/color-picker.scss
index 215b817f09..7457e7e13b 100644
--- a/packages/design-system/theme/src/color-picker.scss
+++ b/packages/design-system/theme/src/color-picker.scss
@@ -52,10 +52,15 @@
   @include mixins.e(bar) {
     position: relative;
     background: linear-gradient(
-      to right, #f00 0%,
-      #ff0 17%, #0f0 33%,
-      #0ff 50%, #00f 67%,
-      #f0f 83%, #f00 100%);
+      to right,
+      #f00 0%,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      #f00 100%
+    );
     height: 100%;
   }
 
@@ -81,10 +86,15 @@
 
     .el-color-hue-slider__bar {
       background: linear-gradient(
-        to bottom, #f00 0%,
-        #ff0 17%, #0f0 33%,
-        #0ff 50%, #00f 67%,
-        #f0f 83%, #f00 100%);
+        to bottom,
+        #f00 0%,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        #f00 100%
+      );
     }
 
     .el-color-hue-slider__thumb {
@@ -101,7 +111,7 @@
   width: 280px;
   height: 180px;
 
-  @include mixins.e(('white', 'black')) {
+  @include mixins.e(("white", "black")) {
     position: absolute;
     top: 0;
     left: 0;
@@ -109,12 +119,12 @@
     bottom: 0;
   }
 
-  @include mixins.e('white') {
-    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+  @include mixins.e("white") {
+    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
   }
 
-  @include mixins.e('black') {
-    background: linear-gradient(to top, #000, rgba(0,0,0,0));
+  @include mixins.e("black") {
+    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
   }
 
   @include mixins.e(cursor) {
@@ -124,7 +134,8 @@
       cursor: head;
       width: 4px;
       height: 4px;
-      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
+      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
+        0 0 1px 2px rgba(0, 0, 0, 0.4);
       border-radius: 50%;
       transform: translate(-2px, -2px);
     }
@@ -141,8 +152,10 @@
   @include mixins.e(bar) {
     position: relative;
     background: linear-gradient(
-      to right, rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%);
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 100%
+    );
     height: 100%;
   }
 
@@ -167,8 +180,10 @@
 
     .el-color-alpha-slider__bar {
       background: linear-gradient(
-        to bottom, rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 1) 100%);
+        to bottom,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
     }
 
     .el-color-alpha-slider__thumb {
@@ -207,15 +222,15 @@
   }
 
   @include mixins.e(btn) {
-	@include button.button-small();
-	@include button.button-just-primary();
+    @include button.button-small();
+    @include button.button-just-primary();
   }
 
   @include mixins.e(link-btn) {
-	@include button.button-outline();
-	@include button.button-small();
+    @include button.button-outline();
+    @include button.button-small();
 
-	margin-right: var(--spacing-2xs);
+    margin-right: var(--spacing-2xs);
   }
 }
 
@@ -292,7 +307,7 @@
     left: 1px;
     z-index: 1;
     cursor: not-allowed;
-    background-color: rgba(255, 255, 255, .7);
+    background-color: rgba(255, 255, 255, 0.7);
   }
 
   @include mixins.e(trigger) {
diff --git a/packages/design-system/theme/src/common/popup.scss b/packages/design-system/theme/src/common/popup.scss
index 7c22218fa4..70926d99ee 100644
--- a/packages/design-system/theme/src/common/popup.scss
+++ b/packages/design-system/theme/src/common/popup.scss
@@ -2,11 +2,11 @@
 @use "../mixins/mixins";
 
 .v-modal-enter {
-  animation: v-modal-in .2s ease;
+  animation: v-modal-in 0.2s ease;
 }
 
 .v-modal-leave {
-  animation: v-modal-out .2s ease forwards;
+  animation: v-modal-out 0.2s ease forwards;
 }
 
 @keyframes v-modal-in {
diff --git a/packages/design-system/theme/src/common/transition.scss b/packages/design-system/theme/src/common/transition.scss
index 22c6127237..5ffd677030 100644
--- a/packages/design-system/theme/src/common/transition.scss
+++ b/packages/design-system/theme/src/common/transition.scss
@@ -22,7 +22,7 @@
 
 .el-fade-in-enter-active,
 .el-fade-in-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
 .el-fade-in-enter,
 .el-fade-in-leave-active {
@@ -31,7 +31,7 @@
 
 .el-zoom-in-center-enter-active,
 .el-zoom-in-center-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
 .el-zoom-in-center-enter,
 .el-zoom-in-center-leave-active {
@@ -75,25 +75,28 @@
 .el-zoom-in-left-enter,
 .el-zoom-in-left-leave-active {
   opacity: 0;
-  transform: scale(.45, .45);
+  transform: scale(0.45, 0.45);
 }
 
 .collapse-transition {
-  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
+    0.3s padding-bottom ease-in-out;
 }
 .horizontal-collapse-transition {
-  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
+  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
+    0.3s padding-right ease-in-out;
 }
 
 .el-list-enter-active,
 .el-list-leave-active {
   transition: all 1s;
 }
-.el-list-enter, .el-list-leave-active {
+.el-list-enter,
+.el-list-leave-active {
   opacity: 0;
   transform: translateY(-30px);
 }
 
 .el-opacity-transition {
-  transition: opacity .3s cubic-bezier(.55,0,.1,1);
-}
\ No newline at end of file
+  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
diff --git a/packages/design-system/theme/src/common/typography.scss b/packages/design-system/theme/src/common/typography.scss
index a071012b51..336288d629 100644
--- a/packages/design-system/theme/src/common/typography.scss
+++ b/packages/design-system/theme/src/common/typography.scss
@@ -1,67 +1,66 @@
 %bold {
-	font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 
 .heading1 {
-	font-size: var(--font-size-2xl);
-	line-height: var(--font-line-height-compact);
+  font-size: var(--font-size-2xl);
+  line-height: var(--font-line-height-compact);
 }
 
 .heading1-bold {
-	@extend %bold, .heading1;
+  @extend %bold, .heading1;
 }
 
 .heading2 {
-	font-size: var(--font-size-xl);
-	line-height: var(--font-line-height-loose);
+  font-size: var(--font-size-xl);
+  line-height: var(--font-line-height-loose);
 }
 
 .heading2-bold {
-	@extend %bold, .heading2;
+  @extend %bold, .heading2;
 }
 
 .heading3 {
-	font-size: var(--font-size-m);
-	line-height: var(--font-line-height-loose);
+  font-size: var(--font-size-m);
+  line-height: var(--font-line-height-loose);
 }
 
 .heading3-bold {
-	@extend %bold, .heading3;
+  @extend %bold, .heading3;
 }
 
 .heading4 {
-	font-size: var(--font-size-s);
-	line-height: var(--font-line-height-regular);
+  font-size: var(--font-size-s);
+  line-height: var(--font-line-height-regular);
 }
 
 .heading4-bold {
-	@extend %bold, .heading4;
+  @extend %bold, .heading4;
 }
 
 .body-large {
-	font-size: var(--font-size-m);
-	line-height: var(--font-line-height-xloose);
+  font-size: var(--font-size-m);
+  line-height: var(--font-line-height-xloose);
 }
 
 .body-large-bold {
-	@extend %bold, .body-large;
+  @extend %bold, .body-large;
 }
 
 .body-medium {
-	font-size: var(--font-size-s);
-	line-height: var(--font-line-height-loose);
+  font-size: var(--font-size-s);
+  line-height: var(--font-line-height-loose);
 }
 
 .body-medium-bold {
-	@extend %bold, .body-medium;
+  @extend %bold, .body-medium;
 }
 
 .body-small {
-	font-size: var(--font-size-2xs);
-	line-height: var(--font-line-height-loose);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-loose);
 }
 
 .body-small-bold {
-	@extend %bold, .body-small;
+  @extend %bold, .body-small;
 }
-
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index a41b31be86..661f538221 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -7,52 +7,198 @@
 
 /* Transition
 -------------------------- */
-$all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
+$all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 $fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $fade-linear-transition: opacity 200ms linear !default;
-$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
-$color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
+$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 
 /* Color
 -------------------------- */
-$color-white: #FFFFFF !default;
+$color-white: #ffffff !default;
 $color-black: #000000 !default;
 
-$color-primary-light-1: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 4%) !default;
-$color-primary-light-2: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 8%) !default;
-$color-primary-light-3: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 12%) !default;
-$color-primary-light-4: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 16%) !default;
-$color-primary-light-5: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 20%) !default;
-$color-primary-light-6: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 24%) !default;
-$color-primary-light-7: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 28%) !default;
-$color-primary-light-8: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 32%) !default;
-$color-primary-light-9: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 36%) !default;
-$color-primary-light: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 30%) !default;
-$color-primary-lighter: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 34%) !default;
+$color-primary-light-1: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  4%
+) !default;
+$color-primary-light-2: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  8%
+) !default;
+$color-primary-light-3: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  12%
+) !default;
+$color-primary-light-4: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  16%
+) !default;
+$color-primary-light-5: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  20%
+) !default;
+$color-primary-light-6: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  24%
+) !default;
+$color-primary-light-7: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  28%
+) !default;
+$color-primary-light-8: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  32%
+) !default;
+$color-primary-light-9: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  36%
+) !default;
+$color-primary-light: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  30%
+) !default;
+$color-primary-lighter: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  34%
+) !default;
 
-$color-success-light-1: function.lightness(--color-success-h, --color-success-s, --color-success-l, 4%) !default;
-$color-success-light-3: function.lightness(--color-success-h, --color-success-s, --color-success-l, 12%) !default;
-$color-success-light-5: function.lightness(--color-success-h, --color-success-s, --color-success-l, 20%) !default;
-$color-success-light: function.lightness(--color-success-h, --color-success-s, --color-success-l, 41%) !default;
-$color-success-lighter: function.lightness(--color-success-h, --color-success-s, --color-success-l, 48%) !default;
+$color-success-light-1: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  4%
+) !default;
+$color-success-light-3: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  12%
+) !default;
+$color-success-light-5: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  20%
+) !default;
+$color-success-light: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  41%
+) !default;
+$color-success-lighter: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  48%
+) !default;
 
-$color-warning-light-1: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 4%) !default;
-$color-warning-light-3: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 12%) !default;
-$color-warning-light-5: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 20%) !default;
-$color-warning-light: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 34%) !default;
-$color-warning-lighter: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 40%) !default;
+$color-warning-light-1: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  4%
+) !default;
+$color-warning-light-3: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  12%
+) !default;
+$color-warning-light-5: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  20%
+) !default;
+$color-warning-light: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  34%
+) !default;
+$color-warning-lighter: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  40%
+) !default;
 
-$color-danger-light-1: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 4%) !default;
-$color-danger-light-3: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 12%) !default;
-$color-danger-light-5: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 20%) !default;
-$color-danger-light: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 24%) !default;
+$color-danger-light-1: function.lightness(
+  --color-danger-h,
+  --color-danger-s,
+  --color-danger-l,
+  4%
+) !default;
+$color-danger-light-3: function.lightness(
+  --color-danger-h,
+  --color-danger-s,
+  --color-danger-l,
+  12%
+) !default;
+$color-danger-light-5: function.lightness(
+  --color-danger-h,
+  --color-danger-s,
+  --color-danger-l,
+  20%
+) !default;
+$color-danger-light: function.lightness(
+  --color-danger-h,
+  --color-danger-s,
+  --color-danger-l,
+  24%
+) !default;
 $color-danger-lighter: var(--color-danger-tint-2);
 
-$color-info-light-1: function.lightness(--color-info-h, --color-info-s, --color-info-l, 4%) !default;
-$color-info-light-3: function.lightness(--color-info-h, --color-info-s, --color-info-l, 12%) !default;
-$color-info-light-5: function.lightness(--color-info-h, --color-info-s, --color-info-l, 20%) !default;
-$color-info-lighter: function.lightness(--color-info-h, --color-info-s, --color-info-l, 39%) !default;
+$color-info-light-1: function.lightness(
+  --color-info-h,
+  --color-info-s,
+  --color-info-l,
+  4%
+) !default;
+$color-info-light-3: function.lightness(
+  --color-info-h,
+  --color-info-s,
+  --color-info-l,
+  12%
+) !default;
+$color-info-light-5: function.lightness(
+  --color-info-h,
+  --color-info-s,
+  --color-info-l,
+  20%
+) !default;
+$color-info-lighter: function.lightness(
+  --color-info-h,
+  --color-info-s,
+  --color-info-l,
+  39%
+) !default;
 
 /// color|1|Font Color|2
 $color-text-primary: var(--color-text-dark) !default;
@@ -88,9 +234,9 @@ $border-radius-circle: 100% !default;
 
 // Box-shadow
 /// boxShadow|1|Shadow|1
-$box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
+$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
 // boxShadow|1|Shadow|1
-$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
 /// boxShadow|1|Shadow|1
 $box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
@@ -100,8 +246,8 @@ $fill-base: $color-white !default;
 
 /* Typography
 -------------------------- */
-$font-path: 'fonts' !default;
-$font-display: 'auto' !default;
+$font-path: "fonts" !default;
+$font-display: "auto" !default;
 /// fontSize|1|Font Size|0
 $font-size-extra-large: var(--font-size-xl) !default;
 /// fontSize|1|Font Size|0
@@ -468,8 +614,8 @@ $cascader-menu-radius: var(--border-radius-base) !default;
 $cascader-menu-border: solid 1px $border-color-light !default;
 $cascader-menu-shadow: $box-shadow-light !default;
 $cascader-node-background-hover: $background-color-base !default;
-$cascader-node-color-disabled:$color-text-placeholder !default;
-$cascader-color-empty:$color-text-placeholder !default;
+$cascader-node-color-disabled: $color-text-placeholder !default;
+$cascader-color-empty: $color-text-placeholder !default;
 $cascader-tag-background: #f0f2f5;
 
 /* Group
@@ -577,7 +723,6 @@ $button-hover-tint-percent: 10% !default;
 $button-light-tint-percent: 30% !default;
 $button-active-shade-percent: 10% !default;
 
-
 /* cascader
 -------------------------- */
 $cascader-height: 200px !default;
@@ -625,7 +770,7 @@ $table-row-hover-background-color: $background-color-base !default;
 $table-current-row-background-color: $color-primary-light-9 !default;
 /// color||Color|0
 $table-header-background-color: $color-white !default;
-$table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
+$table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
 
 /* Pagination
 -------------------------- */
@@ -745,7 +890,12 @@ $card-padding: 20px !default;
 $slider-main-background-color: var(--color-primary) !default;
 /// color||Color|0
 $slider-runway-background-color: $border-color-light !default;
-$slider-button-hover-color: function.saturation(--color-primary-h, --color-primary-s, --color-primary-l, 8%) !default;
+$slider-button-hover-color: function.saturation(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  8%
+) !default;
 $slider-stop-background-color: $color-white !default;
 $slider-disable-color: $color-text-placeholder !default;
 $slider-margin: 16px 0 !default;
@@ -813,8 +963,18 @@ $loading-fullscreen-spinner-size: 50px !default;
 
 /* Scrollbar
 --------------------------*/
-$scrollbar-background-color: hsla(var(#{--color-text-light-h}), var(#{--color-text-light-s}), var(#{--color-text-light-l}), .3) !default;
-$scrollbar-hover-background-color: hsla(var(#{--color-text-light-h}), var(#{--color-text-light-s}), var(#{--color-text-light-l}), .5) !default;
+$scrollbar-background-color: hsla(
+  var(#{--color-text-light-h}),
+  var(#{--color-text-light-s}),
+  var(#{--color-text-light-l}),
+  0.3
+) !default;
+$scrollbar-hover-background-color: hsla(
+  var(#{--color-text-light-h}),
+  var(#{--color-text-light-s}),
+  var(#{--color-text-light-l}),
+  0.5
+) !default;
 
 /* Carousel
 --------------------------*/
@@ -923,7 +1083,7 @@ $link-info-font-color: var(--color-info) !default;
 /// border||Other|4
 $calendar-border: $table-border !default;
 /// color||Other|4
-$calendar-selected-background-color: #F2F8FE !default;
+$calendar-selected-background-color: #f2f8fe !default;
 $calendar-cell-width: 85px !default;
 
 /* Form
@@ -936,7 +1096,7 @@ $form-label-font-size: $font-size-base !default;
 /// color||Color|0
 $avatar-font-color: #fff !default;
 /// color||Color|0
-$avatar-background-color: #C0C4CC !default;
+$avatar-background-color: #c0c4cc !default;
 /// fontSize||Font Size|1
 $avatar-text-font-size: 14px !default;
 /// fontSize||Font Size|1
@@ -958,23 +1118,67 @@ $lg: 1200px !default;
 $xl: 1920px !default;
 
 $breakpoints: (
-  'xs' : (max-width: $sm - 1),
-  'sm' : (min-width: $sm),
-  'md' : (min-width: $md),
-  'lg' : (min-width: $lg),
-  'xl' : (min-width: $xl)
+  "xs": (
+    max-width: $sm - 1,
+  ),
+  "sm": (
+    min-width: $sm,
+  ),
+  "md": (
+    min-width: $md,
+  ),
+  "lg": (
+    min-width: $lg,
+  ),
+  "xl": (
+    min-width: $xl,
+  ),
 );
 
 $breakpoints-spec: (
-  'xs-only' : (max-width: $sm - 1),
-  'sm-and-up' : (min-width: $sm),
-  'sm-only': (min-width: #{$sm}) and (max-width: #{$md - 1}),
-  'sm-and-down': (max-width: $md - 1),
-  'md-and-up' : (min-width: $md),
-  'md-only': (min-width: #{$md}) and (max-width: #{$lg - 1}),
-  'md-and-down': (max-width: $lg - 1),
-  'lg-and-up' : (min-width: $lg),
-  'lg-only': (min-width: #{$lg}) and (max-width: #{$xl - 1}),
-  'lg-and-down': (max-width: $xl - 1),
-  'xl-only' : (min-width: $xl),
+  "xs-only": (
+    max-width: $sm - 1,
+  ),
+  "sm-and-up": (
+    min-width: $sm,
+  ),
+  "sm-only": (
+    min-width: #{$sm},
+  )
+  and
+  (
+    max-width: #{$md - 1},
+  ),
+  "sm-and-down": (
+    max-width: $md - 1,
+  ),
+  "md-and-up": (
+    min-width: $md,
+  ),
+  "md-only": (
+    min-width: #{$md},
+  )
+  and
+  (
+    max-width: #{$lg - 1},
+  ),
+  "md-and-down": (
+    max-width: $lg - 1,
+  ),
+  "lg-and-up": (
+    min-width: $lg,
+  ),
+  "lg-only": (
+    min-width: #{$lg},
+  )
+  and
+  (
+    max-width: #{$xl - 1},
+  ),
+  "lg-and-down": (
+    max-width: $xl - 1,
+  ),
+  "xl-only": (
+    min-width: $xl,
+  ),
 );
diff --git a/packages/design-system/theme/src/date-picker.scss b/packages/design-system/theme/src/date-picker.scss
index 65367e7640..6060427914 100644
--- a/packages/design-system/theme/src/date-picker.scss
+++ b/packages/design-system/theme/src/date-picker.scss
@@ -9,4 +9,4 @@
 @use "./date-picker/time-picker.scss";
 @use "./input.scss";
 @use "./scrollbar.scss";
-@use "./popper";
\ No newline at end of file
+@use "./popper";
diff --git a/packages/design-system/theme/src/date-picker/date-range-picker.scss b/packages/design-system/theme/src/date-picker/date-range-picker.scss
index 088a43e564..ebffe8c25f 100644
--- a/packages/design-system/theme/src/date-picker/date-range-picker.scss
+++ b/packages/design-system/theme/src/date-picker/date-range-picker.scss
@@ -26,11 +26,11 @@
     text-align: center;
     height: 28px;
 
-    [class*=arrow-left] {
+    [class*="arrow-left"] {
       float: left;
     }
 
-    [class*=arrow-right] {
+    [class*="arrow-right"] {
       float: right;
     }
 
@@ -52,7 +52,6 @@
       border-right: 1px solid var.$datepicker-inner-border-color;
     }
     .el-date-range-picker__header {
-
       div {
         margin-left: 50px;
         margin-right: 50px;
diff --git a/packages/design-system/theme/src/date-picker/picker-panel.scss b/packages/design-system/theme/src/date-picker/picker-panel.scss
index 6b0bbc3e10..534f49ad86 100644
--- a/packages/design-system/theme/src/date-picker/picker-panel.scss
+++ b/packages/design-system/theme/src/date-picker/picker-panel.scss
@@ -103,12 +103,12 @@
     margin-left: var(--spacing-2xs);
 
     &.is-plain {
-    	@include button.button-just-primary();
+      @include button.button-just-primary();
     }
   }
 }
 
-.el-picker-panel *[slot=sidebar],
+.el-picker-panel *[slot="sidebar"],
 .el-picker-panel__sidebar {
   position: absolute;
   top: 0;
@@ -121,7 +121,7 @@
   overflow: auto;
 }
 
-.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
+.el-picker-panel *[slot="sidebar"] + .el-picker-panel__body,
 .el-picker-panel__sidebar + .el-picker-panel__body {
   margin-left: 110px;
 }
diff --git a/packages/design-system/theme/src/date-picker/picker.scss b/packages/design-system/theme/src/date-picker/picker.scss
index 7f3bb04594..e2134525ba 100644
--- a/packages/design-system/theme/src/date-picker/picker.scss
+++ b/packages/design-system/theme/src/date-picker/picker.scss
@@ -177,7 +177,8 @@
     color: var.$input-disabled-color;
     cursor: not-allowed;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border-color: var.$input-disabled-border;
     }
 
diff --git a/packages/design-system/theme/src/date-picker/time-picker.scss b/packages/design-system/theme/src/date-picker/time-picker.scss
index b8f4bb513d..245b17e6cb 100644
--- a/packages/design-system/theme/src/date-picker/time-picker.scss
+++ b/packages/design-system/theme/src/date-picker/time-picker.scss
@@ -19,7 +19,8 @@
     position: relative;
     overflow: hidden;
 
-    &::after, &::before {
+    &::after,
+    &::before {
       content: "";
       top: 50%;
       position: absolute;
diff --git a/packages/design-system/theme/src/date-picker/time-range-picker.scss b/packages/design-system/theme/src/date-picker/time-range-picker.scss
index 5474dd27ee..8c77aedeed 100644
--- a/packages/design-system/theme/src/date-picker/time-range-picker.scss
+++ b/packages/design-system/theme/src/date-picker/time-range-picker.scss
@@ -26,7 +26,7 @@
   }
 
   @include mixins.e(body) {
-    border-radius:2px;
+    border-radius: 2px;
     border: 1px solid var.$datepicker-border-color;
   }
 }
diff --git a/packages/design-system/theme/src/date-picker/time-spinner.scss b/packages/design-system/theme/src/date-picker/time-spinner.scss
index 1962de41b5..abc319e84a 100644
--- a/packages/design-system/theme/src/date-picker/time-spinner.scss
+++ b/packages/design-system/theme/src/date-picker/time-spinner.scss
@@ -79,7 +79,7 @@
 
     &::after,
     &::before {
-      content: '';
+      content: "";
       display: block;
       width: 100%;
       height: 80px;
diff --git a/packages/design-system/theme/src/dialog.scss b/packages/design-system/theme/src/dialog.scss
index f40b0fcfb7..94d4d71f0d 100644
--- a/packages/design-system/theme/src/dialog.scss
+++ b/packages/design-system/theme/src/dialog.scss
@@ -50,7 +50,8 @@
       color: var(--color-info);
     }
 
-    &:focus, &:hover {
+    &:focus,
+    &:hover {
       .el-dialog__close {
         color: var(--color-primary);
       }
@@ -93,11 +94,11 @@
 }
 
 .dialog-fade-enter-active {
-  animation: dialog-fade-in .3s;
+  animation: dialog-fade-in 0.3s;
 }
 
 .dialog-fade-leave-active {
-  animation: dialog-fade-out .3s;
+  animation: dialog-fade-out 0.3s;
 }
 
 @keyframes dialog-fade-in {
diff --git a/packages/design-system/theme/src/divider.scss b/packages/design-system/theme/src/divider.scss
index 3e63ea95a8..8a1a228e8c 100644
--- a/packages/design-system/theme/src/divider.scss
+++ b/packages/design-system/theme/src/divider.scss
@@ -34,14 +34,14 @@
       transform: translateY(-50%);
     }
 
-    @include mixins.when(center)  {
+    @include mixins.when(center) {
       left: 50%;
       transform: translateX(-50%) translateY(-50%);
     }
 
-    @include mixins.when(right)  {
+    @include mixins.when(right) {
       right: 20px;
       transform: translateY(-50%);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/design-system/theme/src/drawer.scss b/packages/design-system/theme/src/drawer.scss
index beb7131a0d..056cdff4a8 100644
--- a/packages/design-system/theme/src/drawer.scss
+++ b/packages/design-system/theme/src/drawer.scss
@@ -11,10 +11,8 @@
 }
 
 @mixin drawer-animation($direction) {
-
   @keyframes #{$direction}-drawer-in {
     0% {
-
       @if $direction == ltr {
         transform: translate(-100%, 0px);
       }
@@ -58,7 +56,7 @@
       }
 
       @if $direction == rtl {
-        transform: translate(0px, 0px);;
+        transform: translate(0px, 0px);
       }
 
       @if $direction == ttb {
@@ -92,13 +90,13 @@
 
 @mixin animation-in($direction) {
   .el-drawer__open &.#{$direction} {
-    animation: #{$direction}-drawer-in .3s 1ms;
+    animation: #{$direction}-drawer-in 0.3s 1ms;
   }
 }
 
 @mixin animation-out($direction) {
   &.#{$direction} {
-    animation: #{$direction}-drawer-out .3s;
+    animation: #{$direction}-drawer-out 0.3s;
   }
 }
 
@@ -116,8 +114,7 @@ $directions: rtl, ltr, ttb, btt;
   display: flex;
   flex-direction: column;
   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
-  0 16px 24px 2px rgba(0, 0, 0, 0.14),
-  0 6px 30px 5px rgba(0, 0, 0, 0.12);
+    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
   overflow: hidden;
   outline: 0;
 
@@ -170,13 +167,15 @@ $directions: rtl, ltr, ttb, btt;
     }
   }
 
-  &.ltr, &.rtl {
+  &.ltr,
+  &.rtl {
     height: 100%;
     top: 0;
     bottom: 0;
   }
 
-  &.ttb, &.btt {
+  &.ttb,
+  &.btt {
     width: 100%;
     left: 0;
     right: 0;
@@ -210,9 +209,9 @@ $directions: rtl, ltr, ttb, btt;
 }
 
 .el-drawer-fade-enter-active {
-  animation: el-drawer-fade-in .3s;
+  animation: el-drawer-fade-in 0.3s;
 }
 
 .el-drawer-fade-leave-active {
-  animation: el-drawer-fade-in .3s reverse;
+  animation: el-drawer-fade-in 0.3s reverse;
 }
diff --git a/packages/design-system/theme/src/dropdown.scss b/packages/design-system/theme/src/dropdown.scss
index 9f3340385a..a3b4807c07 100644
--- a/packages/design-system/theme/src/dropdown.scss
+++ b/packages/design-system/theme/src/dropdown.scss
@@ -25,18 +25,23 @@
     &::before {
       $gap: 5px;
 
-      content: '';
+      content: "";
       position: absolute;
       display: block;
       width: 1px;
       top: $gap;
       bottom: $gap;
       left: 0;
-      background: rgba(var.$color-white, .5);
+      background: rgba(var.$color-white, 0.5);
     }
 
     &.el-button--default::before {
-      background: hsla(var(#{--button-default-border-color-h}), var(#{--button-default-border-color-s}), var(#{--button-default-border-color-l}), .5);
+      background: hsla(
+        var(#{--button-default-border-color-h}),
+        var(#{--button-default-border-color-s}),
+        var(#{--button-default-border-color-l}),
+        0.5
+      );
     }
 
     &:hover {
@@ -55,8 +60,10 @@
     margin: 0 3px;
   }
 
-  .el-dropdown-selfdefine { // 自定义
-    &:focus:active, &:focus:not(.focusing) {
+  .el-dropdown-selfdefine {
+    // 自定义
+    &:focus:active,
+    &:focus:not(.focusing) {
       outline-width: 0;
     }
   }
@@ -83,7 +90,8 @@
     color: var.$color-text-primary;
     cursor: pointer;
     outline: none;
-    &:not(.is-disabled):hover, &:focus {
+    &:not(.is-disabled):hover,
+    &:focus {
       background-color: var.$dropdown-menuItem-hover-fill;
       color: var.$dropdown-menuItem-hover-color;
     }
@@ -100,7 +108,7 @@
       border-top: 1px solid var.$border-color-lighter;
 
       &:before {
-        content: '';
+        content: "";
         height: $divided-offset;
         display: block;
         margin: 0 -20px;
diff --git a/packages/design-system/theme/src/form.scss b/packages/design-system/theme/src/form.scss
index d1ad325ff0..6943baca39 100644
--- a/packages/design-system/theme/src/form.scss
+++ b/packages/design-system/theme/src/form.scss
@@ -131,10 +131,10 @@
   }
 
   @include mixins.when(required) {
-    @include mixins.pseudo('not(.is-no-asterisk)') {
+    @include mixins.pseudo("not(.is-no-asterisk)") {
       & > .el-form-item__label:before,
       & .el-form-item__label-wrap > .el-form-item__label:before {
-        content: '*';
+        content: "*";
         color: var(--color-danger);
         margin-right: 4px;
       }
@@ -144,7 +144,8 @@
   @include mixins.when(error) {
     & .el-input__inner,
     & .el-textarea__inner {
-      &, &:focus {
+      &,
+      &:focus {
         border-color: var(--color-danger);
       }
     }
diff --git a/packages/design-system/theme/src/icon.scss b/packages/design-system/theme/src/icon.scss
index 69b608b2e7..c08b1cf771 100644
--- a/packages/design-system/theme/src/icon.scss
+++ b/packages/design-system/theme/src/icon.scss
@@ -1,17 +1,19 @@
 @use "./common/var";
 
 @font-face {
-  font-family: 'element-icons';
-  src: url('#{var.$font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
-       url('#{var.$font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  font-family: "element-icons";
+  src: url("#{var.$font-path}/element-icons.woff") format("woff"),
+    /* chrome, firefox */ url("#{var.$font-path}/element-icons.ttf")
+      format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   font-weight: normal;
   font-display: var.$font-display;
   font-style: normal;
 }
 
-[class^="el-icon-"], [class*=" el-icon-"] {
+[class^="el-icon-"],
+[class*=" el-icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'element-icons' !important;
+  font-family: "element-icons" !important;
   speak: none;
   font-style: normal;
   font-weight: normal;
diff --git a/packages/design-system/theme/src/image.scss b/packages/design-system/theme/src/image.scss
index 049969b7e6..05fb76c374 100644
--- a/packages/design-system/theme/src/image.scss
+++ b/packages/design-system/theme/src/image.scss
@@ -45,10 +45,7 @@
   }
 }
 
-
 @include mixins.b(image-viewer) {
-
-
   @include mixins.e(wrapper) {
     position: fixed;
     top: 0;
@@ -64,7 +61,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    opacity: .8;
+    opacity: 0.8;
     cursor: pointer;
     box-sizing: border-box;
     user-select: none;
@@ -112,7 +109,7 @@
     }
   }
 
-  @include mixins.e(prev){
+  @include mixins.e(prev) {
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
@@ -124,7 +121,7 @@
     left: 40px;
   }
 
-  @include mixins.e(next){
+  @include mixins.e(next) {
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
@@ -143,17 +140,17 @@
     height: 100%;
     top: 0;
     left: 0;
-    opacity: .5;
+    opacity: 0.5;
     background: #000;
   }
 }
 
 .viewer-fade-enter-active {
-  animation: viewer-fade-in .3s;
+  animation: viewer-fade-in 0.3s;
 }
 
 .viewer-fade-leave-active {
-  animation: viewer-fade-out .3s;
+  animation: viewer-fade-out 0.3s;
 }
 
 @keyframes viewer-fade-in {
diff --git a/packages/design-system/theme/src/input-number.scss b/packages/design-system/theme/src/input-number.scss
index d260a36ed7..73014d7ba9 100644
--- a/packages/design-system/theme/src/input-number.scss
+++ b/packages/design-system/theme/src/input-number.scss
@@ -92,8 +92,8 @@
       width: var.$input-small-height;
       font-size: var.$input-small-font-size;
 
-      [class*=el-icon] {
-        transform: scale(.9);
+      [class*="el-icon"] {
+        transform: scale(0.9);
       }
     }
 
@@ -111,8 +111,8 @@
       width: var.$input-mini-height;
       font-size: var.$input-mini-font-size;
 
-      [class*=el-icon] {
-        transform: scale(.8);
+      [class*="el-icon"] {
+        transform: scale(0.8);
       }
     }
 
@@ -139,8 +139,8 @@
       height: auto;
       line-height: #{(var.$input-height - 2) * 0.5};
 
-      [class*=el-icon] {
-        transform: scale(.8);
+      [class*="el-icon"] {
+        transform: scale(0.8);
       }
     }
 
@@ -159,20 +159,23 @@
       border-radius: 0 0 var(--border-radius-base) 0;
     }
 
-    &[class*=medium] {
-      [class*=increase], [class*=decrease] {
+    &[class*="medium"] {
+      [class*="increase"],
+      [class*="decrease"] {
         line-height: #{(var.$input-medium-height - 2) * 0.5};
       }
     }
 
-    &[class*=small] {
-      [class*=increase], [class*=decrease] {
+    &[class*="small"] {
+      [class*="increase"],
+      [class*="decrease"] {
         line-height: #{(var.$input-small-height - 2) * 0.5};
       }
     }
 
-    &[class*=mini] {
-      [class*=increase], [class*=decrease] {
+    &[class*="mini"] {
+      [class*="increase"],
+      [class*="decrease"] {
         line-height: #{(var.$input-mini-height - 2) * 0.5};
       }
     }
diff --git a/packages/design-system/theme/src/input.scss b/packages/design-system/theme/src/input.scss
index c19aed970b..402c5bcd60 100644
--- a/packages/design-system/theme/src/input.scss
+++ b/packages/design-system/theme/src/input.scss
@@ -141,7 +141,7 @@
     top: 0;
     text-align: center;
     color: var.$input-icon-color;
-    transition: all .3s;
+    transition: all 0.3s;
     pointer-events: none;
   }
 
@@ -156,18 +156,18 @@
     top: 0;
     text-align: center;
     color: var.$input-icon-color;
-    transition: all .3s;
+    transition: all 0.3s;
   }
 
   @include mixins.e(icon) {
     height: 100%;
     width: 25px;
     text-align: center;
-    transition: all .3s;
+    transition: all 0.3s;
     line-height: var.$input-height;
 
     &:after {
-      content: '';
+      content: "";
       height: 100%;
       width: 0;
       display: inline-block;
@@ -270,7 +270,7 @@
   display: inline-table;
   width: 100%;
   border-collapse: separate;
-  border-spacing:0;
+  border-spacing: 0;
 
   > .el-input__inner {
     vertical-align: middle;
diff --git a/packages/design-system/theme/src/link.scss b/packages/design-system/theme/src/link.scss
index 9b685dc455..56e384163d 100644
--- a/packages/design-system/theme/src/link.scss
+++ b/packages/design-system/theme/src/link.scss
@@ -2,11 +2,12 @@
 @use "./common/var";
 
 $typeMap: (
-  primary: var.$link-primary-font-color, 
-  danger: var.$link-danger-font-color, 
-  success: var.$link-success-font-color, 
-  warning: var.$link-warning-font-color, 
-  info: var.$link-info-font-color);
+  primary: var.$link-primary-font-color,
+  danger: var.$link-danger-font-color,
+  success: var.$link-success-font-color,
+  warning: var.$link-warning-font-color,
+  info: var.$link-info-font-color,
+);
 
 @include mixins.b(link) {
   display: inline-flex;
@@ -30,31 +31,30 @@ $typeMap: (
       right: 0;
       height: 0;
       bottom: 0;
-      border-bottom: 1px solid var.$link-default-active-color
+      border-bottom: 1px solid var.$link-default-active-color;
     }
   }
 
   @include mixins.when(disabled) {
     cursor: not-allowed;
-  } 
+  }
 
   & [class*="el-icon-"] {
     & + span {
       margin-left: 5px;
     }
   }
-    
-    
-  &.el-link--default  {
+
+  &.el-link--default {
     color: var.$link-default-font-color;
     &:hover {
-      color: var.$link-default-active-color
+      color: var.$link-default-active-color;
     }
     &:after {
-      border-color: var.$link-default-active-color
+      border-color: var.$link-default-active-color;
     }
     @include mixins.when(disabled) {
-      color: var.$link-disabled-font-color
+      color: var.$link-disabled-font-color;
     }
   }
 
@@ -62,20 +62,19 @@ $typeMap: (
     &.el-link--#{$type} {
       color: $primaryColor;
       &:hover {
-        color: var.$color-primary-light-3
+        color: var.$color-primary-light-3;
       }
       &:after {
-        border-color: $primaryColor
+        border-color: $primaryColor;
       }
       @include mixins.when(disabled) {
-        color: var.$color-primary-light-6
+        color: var.$color-primary-light-6;
       }
       @include mixins.when(underline) {
         &:hover:after {
-          border-color: $primaryColor
+          border-color: $primaryColor;
         }
       }
     }
   }
-    
 }
diff --git a/packages/design-system/theme/src/loading.scss b/packages/design-system/theme/src/loading.scss
index 962f36bcee..fa60639a1c 100644
--- a/packages/design-system/theme/src/loading.scss
+++ b/packages/design-system/theme/src/loading.scss
@@ -14,7 +14,7 @@
 @include mixins.b(loading-mask) {
   position: absolute;
   z-index: 2000;
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, 0.9);
   margin: 0;
   top: 0;
   right: 0;
diff --git a/packages/design-system/theme/src/menu.scss b/packages/design-system/theme/src/menu.scss
index 8ea093683b..aa884aa0fe 100644
--- a/packages/design-system/theme/src/menu.scss
+++ b/packages/design-system/theme/src/menu.scss
@@ -12,7 +12,7 @@
   list-style: none;
   cursor: pointer;
   position: relative;
-  transition: border-color .3s, background-color .3s, color .3s;
+  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
   box-sizing: border-box;
   white-space: nowrap;
 
@@ -65,7 +65,7 @@
       }
 
       &:not(.is-disabled):hover,
-      &:not(.is-disabled):focus{
+      &:not(.is-disabled):focus {
         background-color: #fff;
       }
     }
@@ -214,7 +214,7 @@
     }
   }
 }
-  
+
 @include mixins.b(submenu) {
   list-style: none;
   margin: 0;
@@ -241,7 +241,7 @@
     top: 50%;
     right: 20px;
     margin-top: -7px;
-    transition: transform .3s;
+    transition: transform 0.3s;
     font-size: 12px;
   }
   @include mixins.when(active) {
@@ -284,6 +284,6 @@
 }
 
 .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
-  transition: .2s;
+  transition: 0.2s;
   opacity: 0;
 }
diff --git a/packages/design-system/theme/src/message-box.scss b/packages/design-system/theme/src/message-box.scss
index 70a80367ff..d553e2efc2 100644
--- a/packages/design-system/theme/src/message-box.scss
+++ b/packages/design-system/theme/src/message-box.scss
@@ -65,12 +65,12 @@
       color: var(--color-info);
     }
 
-    &:focus, &:hover {
+    &:focus,
+    &:hover {
       .el-message-box__close {
         color: var(--color-primary);
       }
     }
-
   }
 
   @include mixins.e(content) {
@@ -78,7 +78,7 @@
     color: var.$messagebox-content-color;
     font-size: var.$messagebox-content-font-size;
   }
-  
+
   @include mixins.e(container) {
     position: relative;
   }
@@ -152,13 +152,13 @@
     }
 
     & .btn--confirm {
-       @include button.button-just-primary();
-       @include button.button-medium();
+      @include button.button-just-primary();
+      @include button.button-medium();
     }
 
     & .btn--cancel {
-       @include button.button-outline();
-       @include button.button-medium();
+      @include button.button-outline();
+      @include button.button-medium();
     }
   }
 
@@ -207,11 +207,11 @@
 }
 
 .msgbox-fade-enter-active {
-  animation: msgbox-fade-in .3s;
+  animation: msgbox-fade-in 0.3s;
 }
 
 .msgbox-fade-leave-active {
-  animation: msgbox-fade-out .3s;
+  animation: msgbox-fade-out 0.3s;
 }
 
 @keyframes msgbox-fade-in {
diff --git a/packages/design-system/theme/src/message.scss b/packages/design-system/theme/src/message.scss
index 14c97ad368..ca461425d3 100644
--- a/packages/design-system/theme/src/message.scss
+++ b/packages/design-system/theme/src/message.scss
@@ -13,7 +13,7 @@
   top: 20px;
   transform: translateX(-50%);
   background-color: var.$message-background-color;
-  transition: opacity 0.3s, transform .4s, top 0.4s;
+  transition: opacity 0.3s, transform 0.4s, top 0.4s;
   overflow: hidden;
   padding: var.$message-padding;
   display: flex;
diff --git a/packages/design-system/theme/src/mixins/_button.scss b/packages/design-system/theme/src/mixins/_button.scss
index 04641eeaea..757d87f441 100644
--- a/packages/design-system/theme/src/mixins/_button.scss
+++ b/packages/design-system/theme/src/mixins/_button.scss
@@ -6,19 +6,29 @@
   &,
   &:focus,
   &:hover {
-	color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
-	background-color: var(--color-foreground-xlight);
-	border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
+    color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
+    background-color: var(--color-foreground-xlight);
+    border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
   }
 
   @include mixins.when(loading) {
-	color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
-	background-color: var(--color-foreground-xlight);
-	border-color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
+    color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
+    background-color: var(--color-foreground-xlight);
+    border-color: function.lightness(
+      $h,
+      $s,
+      $l,
+      var.$button-hover-tint-percent
+    );
   }
 
   &:active {
-    border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+    border-color: function.lightness(
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
     background-color: var(--color-foreground-xlight);
     color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
     outline: none;
@@ -29,36 +39,64 @@
     &:hover,
     &:focus,
     &:active {
-      color: var(--color-text-light);;
+      color: var(--color-text-light);
       background-color: var(--color-foreground-xlight);
       border-color: var(--color-foreground-base);
     }
   }
 }
 
-
-@mixin button-variant($color, $background-color, $border-color, $h, $s, $l, $t, $plain: true) {
+@mixin button-variant(
+  $color,
+  $background-color,
+  $border-color,
+  $h,
+  $s,
+  $l,
+  $t,
+  $plain: true
+) {
   color: $color;
   background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
   border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
 
   &:active {
-    background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
-    border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+    background: function.lightness(
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
+    border-color: function.lightness(
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
     color: $color;
     outline: none;
   }
 
   &.is-active {
-    background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
-    border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+    background: function.lightness(
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
+    border-color: function.lightness(
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
     color: $color;
   }
 
   &.is-light {
-	color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));;
-	background-color:  hsl(var(#{$h}), var(#{$s}), var(#{$t}));
-	border-color:  hsl(var(#{$h}), var(#{$s}), var(#{$t}));
+    color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
+    background-color: hsl(var(#{$h}), var(#{$s}), var(#{$t}));
+    border-color: hsl(var(#{$h}), var(#{$s}), var(#{$t}));
   }
 
   &.is-disabled {
@@ -73,9 +111,9 @@
   }
 
   @if $plain {
-	&.is-plain {
-		@include button-plain($background-color, $h, $s, $l,);
-	}
+    &.is-plain {
+      @include button-plain($background-color, $h, $s, $l);
+    }
   }
 }
 
@@ -90,34 +128,39 @@
 
 // ignore plain overrides
 @mixin button-just-primary() {
-	@include button-variant(
-		var.$button-primary-font-color,
-		var.$button-primary-background-color,
-		var.$button-primary-border-color,
-		--color-primary-h,
-		--color-primary-s,
-		--color-primary-l,
-		--color-primary-tint-2-l,
-		$plain: false
-	);
+  @include button-variant(
+    var.$button-primary-font-color,
+    var.$button-primary-background-color,
+    var.$button-primary-border-color,
+    --color-primary-h,
+    --color-primary-s,
+    --color-primary-l,
+    --color-primary-tint-2-l,
+    $plain: false
+  );
 }
 
 @mixin button-outline() {
-	@include button-plain(var.$button-primary-background-color, --color-primary-h, --color-primary-s, --color-primary-l,);
+  @include button-plain(
+    var.$button-primary-background-color,
+    --color-primary-h,
+    --color-primary-s,
+    --color-primary-l
+  );
 }
 
 @mixin button-small() {
-	@include button-size(
-		var(--spacing-3xs),
-		var(--spacing-xs),
-		var(--font-size-2xs),
-	);
+  @include button-size(
+    var(--spacing-3xs),
+    var(--spacing-xs),
+    var(--font-size-2xs)
+  );
 }
 
 @mixin button-medium() {
-    @include button-size(
-	var(--spacing-2xs),
-	var(--spacing-xs),
-      	var(--font-size-2xs),
-    );
+  @include button-size(
+    var(--spacing-2xs),
+    var(--spacing-xs),
+    var(--font-size-2xs)
+  );
 }
diff --git a/packages/design-system/theme/src/mixins/config.scss b/packages/design-system/theme/src/mixins/config.scss
index 87e29b458c..91d8d0add0 100644
--- a/packages/design-system/theme/src/mixins/config.scss
+++ b/packages/design-system/theme/src/mixins/config.scss
@@ -1,4 +1,4 @@
-$namespace: 'el';
-$element-separator: '__';
-$modifier-separator: '--';
-$state-prefix: 'is-';
+$namespace: "el";
+$element-separator: "__";
+$modifier-separator: "--";
+$state-prefix: "is-";
diff --git a/packages/design-system/theme/src/mixins/function.scss b/packages/design-system/theme/src/mixins/function.scss
index ca2c39ebee..777a3a6adb 100644
--- a/packages/design-system/theme/src/mixins/function.scss
+++ b/packages/design-system/theme/src/mixins/function.scss
@@ -23,32 +23,32 @@
 @function containWhenFlag($selector) {
   $selector: selectorToString($selector);
 
-  @if string.index($selector, '.' + config.$state-prefix) {
-    @return true
+  @if string.index($selector, "." + config.$state-prefix) {
+    @return true;
   } @else {
-    @return false
+    @return false;
   }
 }
 
 @function containPseudoClass($selector) {
   $selector: selectorToString($selector);
 
-  @if string.index($selector, ':') {
-    @return true
+  @if string.index($selector, ":") {
+    @return true;
   } @else {
-    @return false
+    @return false;
   }
 }
 
 @function hitAllSpecialNestRule($selector) {
-
-  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+  @return containsModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector);
 }
 
 @function lightness($h, $s, $l, $lightness) {
-  @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}))
+  @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}));
 }
 
 @function saturation($h, $s, $l, $saturation) {
-  @return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}))
+  @return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}));
 }
diff --git a/packages/design-system/theme/src/mixins/mixins.scss b/packages/design-system/theme/src/mixins/mixins.scss
index 06bb5d83c9..9f730b8c65 100644
--- a/packages/design-system/theme/src/mixins/mixins.scss
+++ b/packages/design-system/theme/src/mixins/mixins.scss
@@ -56,22 +56,22 @@
  -------------------------- */
 @mixin placeholder {
   &::-webkit-input-placeholder {
-    @content
+    @content;
   }
 
   &::-moz-placeholder {
-    @content
+    @content;
   }
 
   &:-ms-input-placeholder {
-    @content
+    @content;
   }
 }
 
 /* BEM
  -------------------------- */
 @mixin b($block) {
-  $B: config.$namespace+'-'+$block !global;
+  $B: config.$namespace + "-" + $block !global;
 
   .#{$B} {
     @content;
@@ -83,7 +83,12 @@
   $selector: &;
   $currentSelector: "";
   @each $unit in $element {
-    $currentSelector: #{$currentSelector + "." + $B + config.$element-separator + $unit + ","};
+    $currentSelector: #{$currentSelector +
+      "." +
+      $B +
+      config.$element-separator +
+      $unit +
+      ","};
   }
 
   @if function.hitAllSpecialNestRule($selector) {
@@ -107,7 +112,11 @@
   $selector: &;
   $currentSelector: "";
   @each $unit in $modifier {
-    $currentSelector: #{$currentSelector + & + config.$modifier-separator + $unit + ","};
+    $currentSelector: #{$currentSelector +
+      & +
+      config.$modifier-separator +
+      $unit +
+      ","};
   }
 
   @at-root {
@@ -119,7 +128,7 @@
 
 @mixin configurable-m($modifier, $E-flag: false) {
   $selector: &;
-  $interpolation: '';
+  $interpolation: "";
 
   @if $E-flag {
     $interpolation: config.$element-separator + $E-flag;
@@ -127,30 +136,38 @@
 
   @at-root {
     #{$selector} {
-      .#{$B+$interpolation+config.$modifier-separator+$modifier} {
+      .#{$B + $interpolation + config.$modifier-separator + $modifier} {
         @content;
       }
     }
   }
 }
 
-@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
-  $modifierCombo: '';
+@mixin spec-selector(
+  $specSelector: "",
+  $element: $E,
+  $modifier: false,
+  $block: $B
+) {
+  $modifierCombo: "";
 
   @if $modifier {
     $modifierCombo: config.$modifier-separator + $modifier;
   }
 
   @at-root {
-    #{&}#{$specSelector}.#{$block+config.$element-separator+$element+$modifierCombo} {
-      @content
+    #{&}#{$specSelector}.#{$block
+      + config.$element-separator
+      + $element
+      + $modifierCombo} {
+      @content;
     }
   }
 }
 
 @mixin meb($modifier: false, $element: $E, $block: $B) {
   $selector: &;
-  $modifierCombo: '';
+  $modifierCombo: "";
 
   @if $modifier {
     $modifierCombo: config.$modifier-separator + $modifier;
@@ -158,8 +175,8 @@
 
   @at-root {
     #{$selector} {
-      .#{$block+config.$element-separator+$element+$modifierCombo} {
-        @content
+      .#{$block + config.$element-separator + $element + $modifierCombo} {
+        @content;
       }
     }
   }
@@ -174,20 +191,19 @@
 }
 
 @mixin extend-rule($name) {
-  @extend #{'%shared-'+$name};
+  @extend #{"%shared-" + $name};
 }
 
 @mixin share-rule($name) {
-  $rule-name: '%shared-'+$name;
+  $rule-name: "%shared-" + $name;
 
   @at-root #{$rule-name} {
-    @content
+    @content;
   }
 }
 
 @mixin pseudo($pseudo) {
-  @at-root #{&}#{':#{$pseudo}'} {
-    @content
+  @at-root #{&}#{":#{$pseudo}"} {
+    @content;
   }
 }
-
diff --git a/packages/design-system/theme/src/mixins/utils.scss b/packages/design-system/theme/src/mixins/utils.scss
index a642326638..18c4e96560 100644
--- a/packages/design-system/theme/src/mixins/utils.scss
+++ b/packages/design-system/theme/src/mixins/utils.scss
@@ -14,7 +14,7 @@
       content: "";
     }
     #{$selector}::after {
-      clear: both
+      clear: both;
     }
   }
 }
@@ -27,7 +27,7 @@
       display: inline-block;
       content: "";
       height: 100%;
-      vertical-align: middle
+      vertical-align: middle;
     }
   }
 }
@@ -36,4 +36,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
\ No newline at end of file
+}
diff --git a/packages/design-system/theme/src/notification.scss b/packages/design-system/theme/src/notification.scss
index 93a501d9bb..5eea375ff7 100644
--- a/packages/design-system/theme/src/notification.scss
+++ b/packages/design-system/theme/src/notification.scss
@@ -11,7 +11,8 @@
   position: fixed;
   background-color: var.$color-white;
   box-shadow: var.$notification-shadow;
-  transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
+  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
+    bottom 0.3s;
   overflow: hidden;
 
   &.right {
diff --git a/packages/design-system/theme/src/option-group.scss b/packages/design-system/theme/src/option-group.scss
index 619ab76dc4..f8922d623d 100644
--- a/packages/design-system/theme/src/option-group.scss
+++ b/packages/design-system/theme/src/option-group.scss
@@ -17,7 +17,7 @@
       padding-bottom: 24px;
 
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         display: block;
         left: $gap;
diff --git a/packages/design-system/theme/src/option.scss b/packages/design-system/theme/src/option.scss
index 658281e1ce..39a62cb71c 100644
--- a/packages/design-system/theme/src/option.scss
+++ b/packages/design-system/theme/src/option.scss
@@ -24,7 +24,8 @@
       }
     }
 
-    &.hover, &:hover {
+    &.hover,
+    &:hover {
       background-color: var.$select-option-hover-background;
     }
 
diff --git a/packages/design-system/theme/src/pagination.scss b/packages/design-system/theme/src/pagination.scss
index 8a8d9c5f6c..d4f7755c0f 100644
--- a/packages/design-system/theme/src/pagination.scss
+++ b/packages/design-system/theme/src/pagination.scss
@@ -10,7 +10,7 @@
   font-weight: bold;
   @include utils.utils-clearfix;
 
-  span:not([class*=suffix]),
+  span:not([class*="suffix"]),
   button {
     display: inline-block;
     font-size: var.$pagination-font-size;
@@ -30,7 +30,7 @@
   // pagesize 的下拉 icon
   .el-input__suffix {
     right: 0;
-    transform: scale(.8);
+    transform: scale(0.8);
   }
 
   .el-select .el-input {
@@ -84,7 +84,7 @@
   }
 
   .btn-next {
-    padding-left: 12px;    
+    padding-left: 12px;
   }
 
   .el-pager li.disabled {
@@ -115,7 +115,7 @@
       line-height: 24px;
     }
 
-    span:not([class*=suffix]),
+    span:not([class*="suffix"]),
     button {
       height: 22px;
       line-height: 22px;
@@ -168,7 +168,7 @@
     line-height: 18px;
     padding: 0 2px;
     height: var.$pagination-button-height;
-      
+
     text-align: center;
     margin: 0 2px;
     box-sizing: border-box;
@@ -204,7 +204,8 @@
       }
     }
 
-    .btn-prev, .btn-next {
+    .btn-prev,
+    .btn-next {
       padding: 0;
 
       &:disabled {
diff --git a/packages/design-system/theme/src/popconfirm.scss b/packages/design-system/theme/src/popconfirm.scss
index 57a2570817..f89d480f41 100644
--- a/packages/design-system/theme/src/popconfirm.scss
+++ b/packages/design-system/theme/src/popconfirm.scss
@@ -10,7 +10,7 @@
     margin-right: 5px;
   }
   @include mixins.e(action) {
-    text-align: right; 
-    margin: 0
+    text-align: right;
+    margin: 0;
   }
 }
diff --git a/packages/design-system/theme/src/popover.scss b/packages/design-system/theme/src/popover.scss
index bb77c1a67f..183c43e45d 100644
--- a/packages/design-system/theme/src/popover.scss
+++ b/packages/design-system/theme/src/popover.scss
@@ -29,12 +29,14 @@
   }
 
   @include mixins.e(reference) {
-    &:focus:not(.focusing), &:focus:hover {
+    &:focus:not(.focusing),
+    &:focus:hover {
       outline-width: 0;
     }
   }
 
-  &:focus:active, &:focus {
+  &:focus:active,
+  &:focus {
     outline-width: 0;
   }
 }
diff --git a/packages/design-system/theme/src/popper.scss b/packages/design-system/theme/src/popper.scss
index 3dd5000b67..c32c62212e 100644
--- a/packages/design-system/theme/src/popper.scss
+++ b/packages/design-system/theme/src/popper.scss
@@ -14,7 +14,7 @@
 
   .popper__arrow {
     border-width: var.$popover-arrow-size;
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
   }
 
   .popper__arrow::after {
@@ -98,4 +98,4 @@
       border-left-color: var.$popover-background-color;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/design-system/theme/src/progress.scss b/packages/design-system/theme/src/progress.scss
index f288a60da2..9832b93e45 100644
--- a/packages/design-system/theme/src/progress.scss
+++ b/packages/design-system/theme/src/progress.scss
@@ -7,7 +7,7 @@
   line-height: 1;
 
   @include mixins.e(text) {
-    font-size:14px;
+    font-size: 14px;
     color: var.$color-text-primary;
     display: inline-block;
     vertical-align: middle;
@@ -20,7 +20,7 @@
     }
   }
 
-  @include mixins.m((circle,dashboard)) {
+  @include mixins.m((circle, dashboard)) {
     display: inline-block;
 
     .el-progress__text {
@@ -39,7 +39,6 @@
     }
   }
 
-
   @include mixins.m(without-text) {
     .el-progress__text {
       display: none;
diff --git a/packages/design-system/theme/src/radio-button.scss b/packages/design-system/theme/src/radio-button.scss
index 194d6af438..254ca91828 100644
--- a/packages/design-system/theme/src/radio-button.scss
+++ b/packages/design-system/theme/src/radio-button.scss
@@ -27,7 +27,11 @@
     transition: var.$all-transition;
     border-radius: 0;
 
-    @include button.button-size(var.$button-padding-vertical, var.$button-padding-horizontal, var.$button-font-size,);
+    @include button.button-size(
+      var.$button-padding-vertical,
+      var.$button-padding-horizontal,
+      var.$button-font-size
+    );
 
     &:hover {
       color: var(--color-primary);
@@ -95,23 +99,36 @@
   @include mixins.m(medium) {
     & .el-radio-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-medium-padding-vertical, var.$button-medium-padding-horizontal, var.$button-medium-font-size,);
+      @include button.button-size(
+        var.$button-medium-padding-vertical,
+        var.$button-medium-padding-horizontal,
+        var.$button-medium-font-size
+      );
     }
   }
   @include mixins.m(small) {
     & .el-radio-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-small-padding-vertical, var.$button-small-padding-horizontal, var.$button-small-font-size,);
+      @include button.button-size(
+        var.$button-small-padding-vertical,
+        var.$button-small-padding-horizontal,
+        var.$button-small-font-size
+      );
     }
   }
   @include mixins.m(mini) {
     & .el-radio-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-mini-padding-vertical, var.$button-mini-padding-horizontal, var.$button-mini-font-size,);
+      @include button.button-size(
+        var.$button-mini-padding-vertical,
+        var.$button-mini-padding-horizontal,
+        var.$button-mini-font-size
+      );
     }
   }
 
-  &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
+  &:focus:not(.is-focus):not(:active):not(.is-disabled) {
+    /*获得焦点时 样式提醒*/
     box-shadow: 0 0 2px 2px var.$radio-button-checked-border-color;
   }
 }
diff --git a/packages/design-system/theme/src/radio.scss b/packages/design-system/theme/src/radio.scss
index e270e7caa2..79e23cb169 100644
--- a/packages/design-system/theme/src/radio.scss
+++ b/packages/design-system/theme/src/radio.scss
@@ -170,7 +170,7 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%) scale(0);
-      transition: transform .15s ease-in;
+      transition: transform 0.15s ease-in;
     }
   }
 
@@ -186,7 +186,8 @@
     margin: 0;
   }
 
-  &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
+  &:focus:not(.is-focus):not(:active):not(.is-disabled) {
+    /*获得焦点时 样式提醒*/
     .el-radio__inner {
       box-shadow: 0 0 2px 2px var.$radio-input-border-color-hover;
     }
diff --git a/packages/design-system/theme/src/rate.scss b/packages/design-system/theme/src/rate.scss
index b316b89eb4..7938888a7e 100644
--- a/packages/design-system/theme/src/rate.scss
+++ b/packages/design-system/theme/src/rate.scss
@@ -5,7 +5,8 @@
   height: var.$rate-height;
   line-height: 1;
 
-  &:focus, &:active {
+  &:focus,
+  &:active {
     outline-width: 0;
   }
 
@@ -22,7 +23,7 @@
     font-size: var.$rate-icon-size;
     margin-right: var.$rate-icon-margin;
     color: var.$rate-icon-color;
-    transition: .3s;
+    transition: 0.3s;
     &.hover {
       transform: scale(1.15);
     }
diff --git a/packages/design-system/theme/src/reset.scss b/packages/design-system/theme/src/reset.scss
index 037ed390d2..23f812a9f9 100644
--- a/packages/design-system/theme/src/reset.scss
+++ b/packages/design-system/theme/src/reset.scss
@@ -1,70 +1,143 @@
 @use "mixins/function";
 @use 'common/var';
 
-*, *::before, *::after {
-	box-sizing: border-box;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
 body {
-	overscroll-behavior-x: none;
-	line-height: 1;
-	font-size: var(--font-size-m);
-	color: var(--color-text-dark);
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  overscroll-behavior-x: none;
+  line-height: 1;
+  font-size: var(--font-size-m);
+  color: var(--color-text-dark);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-body, button, input {
-	font-family: var(--font-family);
-	font-weight: var(--font-weight-regular);
+body,
+button,
+input {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-regular);
 }
 
 button {
-	font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code,
-del, dfn, em, img, ins, kbd, q, samp,
-small, strong, sub, sup, var,
-b, i,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    vertical-align: baseline;
-    background: transparent;
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  vertical-align: baseline;
+  background: transparent;
 }
 
-article,aside,details,figcaption,figure,
-footer,header,hgroup,menu,nav,section { 
-    display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 
 nav ul {
-   list-style: none;
+  list-style: none;
 }
 
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content:'';
-    content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
 }
 
 a {
-  margin:0;
-  padding:0;
+  margin: 0;
+  padding: 0;
   color: var(--color-primary);
   text-decoration: none;
   font-size: 100%;
@@ -73,11 +146,21 @@ a {
   cursor: pointer;
 
   &:active {
-    color: function.saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(var.$button-active-shade-percent));
+    color: function.saturation(
+      --color-primary-h,
+      --color-primary-s,
+      --color-primary-l,
+      -(var.$button-active-shade-percent)
+    );
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: var.$color-text-primary;
   font-weight: inherit;
 
@@ -90,7 +173,10 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-h4, h5, h6, p {
+h4,
+h5,
+h6,
+p {
   font-size: inherit;
 }
 
@@ -107,42 +193,43 @@ p {
 }
 
 ins {
-	background-color: var(--color-success);
-	color: var(--color-text-dark);
-	text-decoration:none;
+  background-color: var(--color-success);
+  color: var(--color-text-dark);
+  text-decoration: none;
 }
 
 mark {
-	background-color: var(--color-warning);
-	color: var(--color-text-dark); 
-	font-style: italic;
-	font-weight: bold;
+  background-color: var(--color-warning);
+  color: var(--color-text-dark);
+  font-style: italic;
+  font-weight: bold;
 }
 
 del {
-	text-decoration: line-through;
+  text-decoration: line-through;
 }
 
-abbr[title], dfn[title] {
-	border-bottom: 1px dotted;
-	cursor: help;
+abbr[title],
+dfn[title] {
+  border-bottom: 1px dotted;
+  cursor: help;
 }
 
 hr {
-	display: block;
-	height: 1px;
-	border: 0;   
-	border-top: 1px solid var(--color-foreground-light);
-	margin: 1em 0;
-	padding: 0;
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid var(--color-foreground-light);
+  margin: 1em 0;
+  padding: 0;
 }
 
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
-input, select {
-	vertical-align: middle;
+input,
+select {
+  vertical-align: middle;
 }
-
diff --git a/packages/design-system/theme/src/row.scss b/packages/design-system/theme/src/row.scss
index a441847b03..b84178e83c 100644
--- a/packages/design-system/theme/src/row.scss
+++ b/packages/design-system/theme/src/row.scss
@@ -34,6 +34,4 @@
       align-items: flex-end;
     }
   }
-
 }
-
diff --git a/packages/design-system/theme/src/scrollbar.scss b/packages/design-system/theme/src/scrollbar.scss
index 3ac68fcf62..04c6ab5637 100644
--- a/packages/design-system/theme/src/scrollbar.scss
+++ b/packages/design-system/theme/src/scrollbar.scss
@@ -35,7 +35,7 @@
     cursor: pointer;
     border-radius: inherit;
     background-color: var.$scrollbar-background-color;
-    transition: .3s background-color;
+    transition: 0.3s background-color;
 
     &:hover {
       background-color: var.$scrollbar-hover-background-color;
diff --git a/packages/design-system/theme/src/select-dropdown.scss b/packages/design-system/theme/src/select-dropdown.scss
index d673399a32..7c308ae7ee 100644
--- a/packages/design-system/theme/src/select-dropdown.scss
+++ b/packages/design-system/theme/src/select-dropdown.scss
@@ -24,7 +24,7 @@
       &::after {
         position: absolute;
         right: 20px;
-        font-family: 'element-icons';
+        font-family: "element-icons";
         content: "\e6da";
         font-size: 12px;
         font-weight: bold;
@@ -34,7 +34,7 @@
     }
   }
 
-  .el-scrollbar.is-empty .el-select-dropdown__list{
+  .el-scrollbar.is-empty .el-select-dropdown__list {
     padding: 0;
   }
 }
diff --git a/packages/design-system/theme/src/select.scss b/packages/design-system/theme/src/select.scss
index e808e8aed7..3dfc49c19a 100644
--- a/packages/design-system/theme/src/select.scss
+++ b/packages/design-system/theme/src/select.scss
@@ -12,10 +12,9 @@
   display: inline-block;
   position: relative;
 
-  .el-select__tags
-    >span {
-      display: contents;
-    }
+  .el-select__tags > span {
+    display: contents;
+  }
 
   &:hover {
     .el-input__inner {
@@ -36,7 +35,7 @@
     & .el-select__caret {
       color: var.$select-input-color;
       font-size: var.$select-input-font-size;
-      transition: transform .3s;
+      transition: transform 0.3s;
       transform: rotateZ(180deg);
       cursor: pointer;
 
@@ -141,7 +140,7 @@
 
       &::before {
         display: block;
-        transform: translate(0, .5px);
+        transform: translate(0, 0.5px);
       }
     }
   }
diff --git a/packages/design-system/theme/src/slider.scss b/packages/design-system/theme/src/slider.scss
index c3afd52ca1..64127f2682 100644
--- a/packages/design-system/theme/src/slider.scss
+++ b/packages/design-system/theme/src/slider.scss
@@ -5,7 +5,6 @@
 @use "./common/var";
 
 @include mixins.b(slider) {
-
   @include utils.utils-clearfix;
 
   @include mixins.e(runway) {
@@ -124,7 +123,7 @@
     border: solid 2px var.$slider-main-background-color;
     background-color: var.$color-white;
     border-radius: 50%;
-    transition: .2s;
+    transition: 0.2s;
     user-select: none;
 
     &:hover,
@@ -202,8 +201,7 @@
           padding-right: 5px;
         }
         .el-input-number__decrease,
-        .el-input-number__increase
-        {
+        .el-input-number__increase {
           top: var.$input-small-height;
           margin-top: -1px;
           border: var.$input-border;
@@ -226,15 +224,13 @@
         }
         &:hover {
           .el-input-number__decrease,
-          .el-input-number__increase
-          {
+          .el-input-number__increase {
             border-color: var.$input-hover-border;
           }
         }
         &:active {
           .el-input-number__decrease,
-          .el-input-number__increase
-          {
+          .el-input-number__increase {
             border-color: var.$input-focus-border;
           }
         }
diff --git a/packages/design-system/theme/src/spinner.scss b/packages/design-system/theme/src/spinner.scss
index 6b93c43701..c7ef658002 100644
--- a/packages/design-system/theme/src/spinner.scss
+++ b/packages/design-system/theme/src/spinner.scss
@@ -19,7 +19,6 @@
     stroke-linecap: round;
     animation: dash 1.5s ease-in-out infinite;
   }
-
 }
 
 @keyframes rotate {
diff --git a/packages/design-system/theme/src/step.scss b/packages/design-system/theme/src/step.scss
index a606ab36ce..7bd77f059e 100644
--- a/packages/design-system/theme/src/step.scss
+++ b/packages/design-system/theme/src/step.scss
@@ -63,7 +63,7 @@
     font-size: 14px;
     box-sizing: border-box;
     background: var.$color-white;
-    transition: .15s ease-out;
+    transition: 0.15s ease-out;
 
     @include mixins.when(text) {
       border-radius: 50%;
@@ -84,7 +84,7 @@
     line-height: 1;
     color: inherit;
 
-    &[class*=el-icon]:not(.is-status) {
+    &[class*="el-icon"]:not(.is-status) {
       font-size: 25px;
       font-weight: normal;
     }
@@ -106,7 +106,7 @@
     border-width: 1px;
     border-style: solid;
     border-color: inherit;
-    transition: .15s ease-out;
+    transition: 0.15s ease-out;
     box-sizing: border-box;
     width: 0;
     height: 0;
@@ -215,7 +215,6 @@
   }
 
   @include mixins.when(center) {
-
     @include mixins.e(head) {
       text-align: center;
     }
@@ -253,12 +252,12 @@
     }
 
     @include mixins.e(icon-inner) {
-      &[class*=el-icon]:not(.is-status) {
+      &[class*="el-icon"]:not(.is-status) {
         font-size: 18px;
       }
 
       &.is-status {
-        transform: scale(.8) translateY(1px);
+        transform: scale(0.8) translateY(1px);
       }
     }
 
@@ -274,7 +273,7 @@
       line-height: 20px;
     }
 
-    @include mixins.pseudo('not(:last-of-type)') {
+    @include mixins.pseudo("not(:last-of-type)") {
       @include mixins.e(title) {
         max-width: 50%;
         word-break: break-all;
@@ -289,7 +288,7 @@
 
       &::before,
       &::after {
-        content: '';
+        content: "";
         display: inline-block;
         position: absolute;
         height: 15px;
diff --git a/packages/design-system/theme/src/switch.scss b/packages/design-system/theme/src/switch.scss
index e828ce7fc4..422d0ffc01 100644
--- a/packages/design-system/theme/src/switch.scss
+++ b/packages/design-system/theme/src/switch.scss
@@ -17,7 +17,7 @@
   }
 
   @include mixins.e(label) {
-    transition: .2s;
+    transition: 0.2s;
     height: var.$switch-height;
     display: inline-block;
     font-size: var.$switch-font-size;
@@ -63,7 +63,7 @@
     box-sizing: border-box;
     background: var.$switch-off-color;
     cursor: pointer;
-    transition: border-color .3s, background-color .3s;
+    transition: border-color 0.3s, background-color 0.3s;
     vertical-align: middle;
 
     &:after {
@@ -72,7 +72,7 @@
       top: 1px;
       left: 1px;
       border-radius: var.$border-radius-circle;
-      transition: all .3s;
+      transition: all 0.3s;
       width: var.$switch-button-size;
       height: var.$switch-button-size;
       background-color: var.$color-white;
diff --git a/packages/design-system/theme/src/table-column.scss b/packages/design-system/theme/src/table-column.scss
index e776237d75..bd1fc4c7d9 100644
--- a/packages/design-system/theme/src/table-column.scss
+++ b/packages/design-system/theme/src/table-column.scss
@@ -94,4 +94,4 @@
       margin-bottom: 0;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/design-system/theme/src/table.scss b/packages/design-system/theme/src/table.scss
index 7f4d8b5d7a..3754a11a1b 100644
--- a/packages/design-system/theme/src/table.scss
+++ b/packages/design-system/theme/src/table.scss
@@ -66,7 +66,7 @@
     background-color: var.$color-white;
 
     // 纯属为了增加权重
-    &[class*=cell] {
+    &[class*="cell"] {
       padding: 20px 50px;
     }
 
@@ -89,7 +89,8 @@
     border-right: 0;
     border-bottom: 0;
 
-    th.gutter, td.gutter {
+    th.gutter,
+    td.gutter {
       border-right-width: 1px;
     }
   }
@@ -117,7 +118,8 @@
     }
   }
 
-  th, td {
+  th,
+  td {
     padding: 12px 0;
     min-width: 0;
     box-sizing: border-box;
@@ -149,21 +151,24 @@
   }
 
   @include mixins.m(medium) {
-    th, td {
+    th,
+    td {
       padding: 10px 0;
     }
   }
 
   @include mixins.m(small) {
     font-size: 12px;
-    th, td {
+    th,
+    td {
       padding: 8px 0;
     }
   }
 
   @include mixins.m(mini) {
     font-size: 12px;
-    th, td {
+    th,
+    td {
       padding: 6px 0;
     }
   }
@@ -176,7 +181,8 @@
     }
   }
 
-  th.is-leaf, td {
+  th.is-leaf,
+  td {
     border-bottom: var.$table-border;
   }
 
@@ -246,7 +252,7 @@
     border: var.$table-border;
 
     @include mixins.share-rule(border-pseudo) {
-      content: '';
+      content: "";
       position: absolute;
       background-color: var.$table-border-color;
       z-index: 1;
@@ -280,7 +286,8 @@
       border-color: transparent;
     }
 
-    th, td {
+    th,
+    td {
       border-right: var.$table-border;
 
       &:first-child .cell {
@@ -311,7 +318,7 @@
     box-shadow: var.$table-fixed-box-shadow;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       bottom: 0;
@@ -482,7 +489,7 @@
     & .el-table__body {
       & tr.el-table__row--striped {
         td {
-          background: #FAFAFA;
+          background: #fafafa;
         }
 
         &.current-row td {
@@ -494,8 +501,10 @@
 
   @include mixins.e(body) {
     tr.hover-row {
-      &, &.el-table__row--striped {
-        &, &.current-row {
+      &,
+      &.el-table__row--striped {
+        &,
+        &.current-row {
           > td {
             background-color: var.$table-row-hover-background-color;
           }
@@ -526,13 +535,13 @@
     & i {
       color: var(--color-info);
       font-size: 12px;
-      transform: scale(.75);
+      transform: scale(0.75);
     }
   }
 
   @include mixins.m(enable-row-transition) {
     .el-table__body td {
-      transition: background-color .25s ease;
+      transition: background-color 0.25s ease;
     }
   }
 
@@ -550,7 +559,7 @@
     }
   }
 
-  [class*=el-table__row--level] {
+  [class*="el-table__row--level"] {
     .el-table__expand-icon {
       display: inline-block;
       width: 20px;
diff --git a/packages/design-system/theme/src/tabs.scss b/packages/design-system/theme/src/tabs.scss
index ad20dc4c23..e815dc450d 100644
--- a/packages/design-system/theme/src/tabs.scss
+++ b/packages/design-system/theme/src/tabs.scss
@@ -14,7 +14,7 @@
     height: 2px;
     background-color: var(--color-primary);
     z-index: 1;
-    transition: transform .3s cubic-bezier(.645,.045,.355,1);
+    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     list-style: none;
   }
   @include mixins.e(new-tab) {
@@ -29,7 +29,7 @@
     font-size: 12px;
     color: #d3dce6;
     cursor: pointer;
-    transition: all .15s;
+    transition: all 0.15s;
 
     .el-icon-plus {
       transform: scale(0.8, 0.8);
@@ -79,7 +79,7 @@
   @include mixins.e(nav) {
     white-space: nowrap;
     position: relative;
-    transition: transform .3s;
+    transition: transform 0.3s;
     float: left;
     z-index: #{var.$index-normal + 1};
 
@@ -104,7 +104,8 @@
     color: var.$color-text-primary;
     position: relative;
 
-    &:focus, &:focus:active {
+    &:focus,
+    &:focus:active {
       outline: none;
     }
 
@@ -116,10 +117,10 @@
     & .el-icon-close {
       border-radius: 50%;
       text-align: center;
-      transition: all .3s cubic-bezier(.645,.045,.355,1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       margin-left: 5px;
       &:before {
-        transform: scale(.9);
+        transform: scale(0.9);
         display: inline-block;
       }
 
@@ -178,7 +179,8 @@
     > .el-tabs__header .el-tabs__item {
       border-bottom: 1px solid transparent;
       border-left: 1px solid var.$border-color-light;
-      transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
+      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       &:first-child {
         border-left: none;
       }
@@ -209,7 +211,7 @@
   @include mixins.m(border-card) {
     background: var.$color-white;
     border: 1px solid var.$border-color-base;
-    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
 
     > .el-tabs__content {
       padding: 15px;
@@ -223,7 +225,7 @@
       content: none;
     }
     > .el-tabs__header .el-tabs__item {
-      transition: all .3s cubic-bezier(.645,.045,.355,1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       border: 1px solid transparent;
       margin-top: -1px;
       color: var.$color-text-secondary;
@@ -264,8 +266,10 @@
       padding-right: 0;
     }
 
-    &.el-tabs--border-card, &.el-tabs--card,
-    .el-tabs--left, .el-tabs--right {
+    &.el-tabs--border-card,
+    &.el-tabs--card,
+    .el-tabs--left,
+    .el-tabs--right {
       > .el-tabs__header {
         .el-tabs__item:nth-child(2) {
           padding-left: 20px;
@@ -514,22 +518,22 @@
   display: inline-block;
 }
 .slideInRight-enter {
-  animation: slideInRight-enter .3s;
+  animation: slideInRight-enter 0.3s;
 }
 .slideInRight-leave {
   position: absolute;
   left: 0;
   right: 0;
-  animation: slideInRight-leave .3s;
+  animation: slideInRight-leave 0.3s;
 }
 .slideInLeft-enter {
-  animation: slideInLeft-enter .3s;
+  animation: slideInLeft-enter 0.3s;
 }
 .slideInLeft-leave {
   position: absolute;
   left: 0;
   right: 0;
-  animation: slideInLeft-leave .3s;
+  animation: slideInLeft-leave 0.3s;
 }
 
 @keyframes slideInRight-enter {
@@ -538,7 +542,7 @@
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: translateX(100%);
-    transform: translateX(100%)
+    transform: translateX(100%);
   }
 
   to {
@@ -546,7 +550,7 @@
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: translateX(0);
-    transform: translateX(0)
+    transform: translateX(0);
   }
 }
 @keyframes slideInRight-leave {
@@ -555,7 +559,7 @@
     transform-origin: 0 0;
     -webkit-transform: translateX(0);
     transform: translateX(0);
-    opacity: 1
+    opacity: 1;
   }
 
   100% {
@@ -563,7 +567,7 @@
     transform-origin: 0 0;
     -webkit-transform: translateX(100%);
     transform: translateX(100%);
-    opacity: 0
+    opacity: 0;
   }
 }
 @keyframes slideInLeft-enter {
@@ -572,7 +576,7 @@
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: translateX(-100%);
-    transform: translateX(-100%)
+    transform: translateX(-100%);
   }
 
   to {
@@ -580,7 +584,7 @@
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: translateX(0);
-    transform: translateX(0)
+    transform: translateX(0);
   }
 }
 @keyframes slideInLeft-leave {
@@ -589,7 +593,7 @@
     transform-origin: 0 0;
     -webkit-transform: translateX(0);
     transform: translateX(0);
-    opacity: 1
+    opacity: 1;
   }
 
   100% {
@@ -597,6 +601,6 @@
     transform-origin: 0 0;
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
-    opacity: 0
+    opacity: 0;
   }
 }
diff --git a/packages/design-system/theme/src/tag.scss b/packages/design-system/theme/src/tag.scss
index 6fe1050c2c..dc05b8a1ad 100644
--- a/packages/design-system/theme/src/tag.scss
+++ b/packages/design-system/theme/src/tag.scss
@@ -136,7 +136,7 @@
     line-height: 26px;
 
     .el-icon-close {
-      transform: scale(.8);
+      transform: scale(0.8);
     }
   }
 
@@ -146,7 +146,7 @@
     line-height: 22px;
 
     .el-icon-close {
-      transform: scale(.8);
+      transform: scale(0.8);
     }
   }
 
@@ -157,7 +157,7 @@
 
     .el-icon-close {
       margin-left: -3px;
-      transform: scale(.7);
+      transform: scale(0.7);
     }
   }
 }
diff --git a/packages/design-system/theme/src/tooltip.scss b/packages/design-system/theme/src/tooltip.scss
index 6d78ce0f6f..adacaa68c6 100644
--- a/packages/design-system/theme/src/tooltip.scss
+++ b/packages/design-system/theme/src/tooltip.scss
@@ -2,7 +2,8 @@
 @use "./common/var";
 
 @include mixins.b(tooltip) {
-  &:focus:not(.focusing), &:focus:hover {
+  &:focus:not(.focusing),
+  &:focus:hover {
     outline-width: 0;
   }
   @include mixins.e(popper) {
diff --git a/packages/design-system/theme/src/transfer.scss b/packages/design-system/theme/src/transfer.scss
index a99cfbe7b8..2e4c3ce01b 100644
--- a/packages/design-system/theme/src/transfer.scss
+++ b/packages/design-system/theme/src/transfer.scss
@@ -48,7 +48,8 @@
       margin: 0;
     }
 
-    i, span {
+    i,
+    span {
       font-size: 14px;
     }
 
@@ -87,7 +88,8 @@
     box-sizing: border-box;
 
     @include mixins.when(filterable) {
-      height: #{var.$transfer-panel-body-height - var.$transfer-filter-height - 20px};
+      height: #{var.$transfer-panel-body-height - var.$transfer-filter-height -
+        20px};
       padding-top: 0;
     }
   }
diff --git a/packages/design-system/theme/src/tree.scss b/packages/design-system/theme/src/tree.scss
index 71390829eb..c93116dfe3 100644
--- a/packages/design-system/theme/src/tree.scss
+++ b/packages/design-system/theme/src/tree.scss
@@ -38,7 +38,8 @@
 @include mixins.b(tree-node) {
   white-space: nowrap;
   outline: none;
-  &:focus { /* focus */
+  &:focus {
+    /* focus */
     > .el-tree-node__content {
       background-color: var.$tree-node-hover-background-color;
     }
diff --git a/packages/design-system/theme/src/upload.scss b/packages/design-system/theme/src/upload.scss
index dc91a5b812..bccad55a2e 100644
--- a/packages/design-system/theme/src/upload.scss
+++ b/packages/design-system/theme/src/upload.scss
@@ -104,7 +104,7 @@
   }
 
   @include mixins.when(dragover) {
-    background-color: rgba(32, 159, 255, .06);
+    background-color: rgba(32, 159, 255, 0.06);
     border: 2px dashed var(--color-primary);
   }
 }
@@ -115,7 +115,7 @@
   list-style: none;
 
   @include mixins.e(item) {
-    transition: all .5s cubic-bezier(.55,0,.1,1);
+    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
     font-size: 14px;
     color: var.$color-text-primary;
     line-height: 1.8;
@@ -156,7 +156,7 @@
       top: 5px;
       right: 5px;
       cursor: pointer;
-      opacity: .75;
+      opacity: 0.75;
       color: var.$color-text-primary;
       //transform: scale(.7);
 
@@ -175,7 +175,7 @@
       opacity: 1;
       color: var(--color-primary);
     }
-    
+
     &:hover {
       background-color: var.$background-color-base;
 
@@ -193,25 +193,30 @@
         display: block;
       }
 
-      .el-upload-list__item-name:hover, .el-upload-list__item-name:focus {
+      .el-upload-list__item-name:hover,
+      .el-upload-list__item-name:focus {
         color: var.$link-hover-color;
         cursor: pointer;
       }
 
-      &:focus:not(:hover) {  /* 键盘focus */
+      &:focus:not(:hover) {
+        /* 键盘focus */
         .el-icon-close-tip {
           display: inline-block;
         }
       }
 
-      &:not(.focusing):focus, &:active { /* click时 */
+      &:not(.focusing):focus,
+      &:active {
+        /* click时 */
         outline-width: 0;
         .el-icon-close-tip {
           display: none;
         }
       }
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         .el-upload-list__item-status-label {
           display: none;
         }
@@ -232,7 +237,7 @@
     overflow: hidden;
     padding-left: 4px;
     text-overflow: ellipsis;
-    transition: color .3s;
+    transition: color 0.3s;
     white-space: nowrap;
 
     [class^="el-icon"] {
@@ -317,7 +322,7 @@
       background: #13ce66;
       text-align: center;
       transform: rotate(45deg);
-      box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
+      box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
 
       i {
         font-size: 12px;
@@ -337,13 +342,13 @@
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
       &::after {
         display: inline-block;
         content: "";
         height: 100%;
-        vertical-align: middle
+        vertical-align: middle;
       }
 
       span {
@@ -432,7 +437,7 @@
       position: relative;
       z-index: 1;
       margin-left: -80px;
-      background-color: var.$color-white
+      background-color: var.$color-white;
     }
 
     .el-upload-list__item-name {
@@ -499,7 +504,7 @@
     background: #13ce66;
     text-align: center;
     transform: rotate(45deg);
-    box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
+    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
 
     i {
       font-size: 12px;
@@ -534,7 +539,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(#000, .72);
+    background-color: rgba(#000, 0.72);
     text-align: center;
 
     .btn {
@@ -552,7 +557,7 @@
 
       span {
         opacity: 0;
-        transition: opacity .15s linear;
+        transition: opacity 0.15s linear;
       }
 
       &:not(:first-child) {
diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json
index 5c6ed5aa81..8924b97678 100644
--- a/packages/design-system/tsconfig.json
+++ b/packages/design-system/tsconfig.json
@@ -12,21 +12,11 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
-      "webpack-env",
-      "jest"
-    ],
+    "types": ["webpack-env", "jest"],
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "include": [
     "src/**/*.ts",
@@ -35,7 +25,5 @@
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }