feat: add website (#135)

* feat: add website * chore: fix
2025-03-19 16:00:34 +08:00 · 2020-08-13 15:18:26 +08:00 · 2020-08-13 15:18:26 +08:00 · f12000f9c2
commit f12000f9c2
parent dbaf83e2a4
401 changed files with 84906 additions and 72 deletions
--- a/.gitignore
+++ b/.gitignore
@ -9,4 +9,5 @@ lerna-debug.json
 lerna-debug.log
 yarn-error.log
 storybook-static
-coverage/
+coverage/
+website-dist
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
--- a/index.html
+++ b/index.html
@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-</html>
--- a/package.json
+++ b/package.json
@ -9,7 +9,9 @@
    "storybook": "start-storybook",
    "bootstrap": "yarn && npx lerna bootstrap",
    "build": "yarn bootstrap && yarn build-storybook",
-    "lint": "eslint ./packages --ext .vue,.js,.ts"
+    "lint": "eslint ./packages --ext .vue,.js,.ts",
+    "website-build": "webpack --config ./website/webpack.config.js",
+    "website-dev": "webpack-dev-server --config ./website/webpack.config.js"
  },
  "peerDependencies": {
    "vue": "^3.0.0-rc.1"
@ -26,21 +28,41 @@
    "@typescript-eslint/eslint-plugin": "^3.7.0",
    "@typescript-eslint/parser": "^3.7.0",
    "@vue/compiler-sfc": "^3.0.0-rc.1",
+    "@vue/component-compiler-utils": "^3.2.0",
+    "algoliasearch": "^4.4.0",
    "babel-loader": "^8.1.0",
    "babel-preset-vue": "^2.0.2",
+    "css-loader": "^4.2.1",
    "cz-conventional-changelog": "^3.2.0",
    "eslint": "^7.5.0",
    "eslint-plugin-vue": "^7.0.0-beta.0",
+    "file-loader": "^6.0.0",
+    "highlight.js": "^10.1.2",
+    "html-webpack-plugin": "^4.3.0",
    "husky": "^4.2.5",
    "jest": "^24.1.0",
    "lerna": "^3.22.1",
    "lint-staged": "^10.2.11",
+    "markdown-it": "^11.0.0",
+    "markdown-it-anchor": "^5.3.0",
+    "markdown-it-chain": "^1.3.0",
+    "markdown-it-container": "^3.0.0",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^9.0.3",
+    "style-loader": "^1.2.1",
+    "throttle-debounce": "1.0.1",
+    "transliteration": "^2.1.11",
    "ts-loader": "^8.0.1",
    "typescript": "^3.9.7",
+    "url-loader": "^4.1.0",
    "vite": "^1.0.0-rc.1",
    "vue-jest": "5.0.0-alpha.1",
-    "vue-loader": "^v16.0.0-beta.4",
-    "vue-router": "^4.0.0-beta.4"
+    "vue-loader": "16.0.0-beta.5",
+    "vue-router": "^4.0.0-beta.4",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
  },
  "config": {
    "commitizen": {
--- a/website/app.vue
+++ b/website/app.vue
@ -0,0 +1,85 @@
+<template>
+  <div id="app" :class="{ 'is-component': isComponent }">
+    <main-header v-if="lang !== 'play'" />
+    <div class="main-cnt">
+      <router-view />
+    </div>
+    <main-footer v-if="lang !== 'play' && !isComponent" />
+  </div>
+</template>
+
+<script>
+import { use } from '@element-plus/locale'
+import zhLocale from '@element-plus/locale/lang/zh-CN'
+import enLocale from '@element-plus/locale/lang/en'
+import esLocale from '@element-plus/locale/lang/es'
+import frLocale from '@element-plus/locale/lang/fr'
+
+const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN'
+const localize = lang => {
+  switch (lang) {
+    case 'zh-CN':
+      use(zhLocale)
+      break
+    case 'es':
+      use(esLocale)
+      break
+    case 'fr-FR':
+      use(frLocale)
+      break
+    default:
+      use(enLocale)
+  }
+}
+localize(lang)
+
+export default {
+  name: 'App',
+
+  computed: {
+    lang() {
+      return this.$route.path.split('/')[1] || 'zh-CN'
+    },
+    isComponent() {
+      return /^component-/.test(this.$route.name || '')
+    },
+  },
+
+  watch: {
+    lang(val) {
+      if (val === 'zh-CN') {
+        this.suggestJump()
+      }
+      localize(val)
+    },
+  },
+
+  mounted() {
+    localize(this.lang)
+    if (this.lang === 'zh-CN') {
+      this.suggestJump()
+    }
+  },
+
+  methods: {
+    suggestJump() {
+      if (process.env.NODE_ENV !== 'production') return
+
+      const href = location.href
+      const preferGithub = localStorage.getItem('PREFER_GITHUB')
+      const cnHref = href.indexOf('eleme.cn') > -1 || href.indexOf('element-cn') > -1 || href.indexOf('element.faas') > -1
+      if (cnHref || preferGithub) return
+      setTimeout(() => {
+        if (this.lang !== 'zh-CN') return
+        this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
+          .then(() => {
+            location.replace('https://element.eleme.cn')
+          })
+          .catch(() => {
+            localStorage.setItem('PREFER_GITHUB', 'true')
+          })
+      }, 1000)
+    },
+  },
+}
+</script>
--- a/website/assets/images/Axure-Components.svg
+++ b/website/assets/images/Axure-Components.svg
@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="110px" height="87px" viewBox="0 0 110 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Axure Components_icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Axure-Components_icon">
+            <g id="sitemap">
+                <g id="Group">
+                    <path d="M87.2413867,49.517832 L56.8966406,49.517832 L56.8966406,41.9316992 L53.1035742,41.9316992 L53.1035742,49.517832 L22.7586133,49.517832 C21.71125,49.517832 20.8619727,50.3671094 20.8619727,51.4144727 L20.8619727,60.8972461 L24.6550391,60.8972461 L24.6550391,53.3111133 L53.1033594,53.3111133 L53.1033594,60.8972461 L56.8964258,60.8972461 L56.8964258,53.3111133 L85.3447461,53.3111133 L85.3447461,60.8972461 L89.1378125,60.8972461 L89.1378125,51.4142578 C89.1380273,50.3668945 88.28875,49.517832 87.2413867,49.517832 L87.2413867,49.517832 Z" id="Shape" fill="#DEEBFD"></path>
+                    <path d="M104.310293,0 L5.68970703,0 C2.54740234,0 0,2.54014599 0,5.673764 L0,81.3260218 C0,84.4596398 2.54740234,87 5.68970703,87 L104.310293,87 C107.452598,87 110,84.4596398 110,81.3260218 L110,5.673764 C110,2.54014599 107.452598,0 104.310293,0 L104.310293,0 Z M106.206934,81.5516797 C106.206934,82.599043 105.357656,83.4483203 104.310293,83.4483203 L5.68970703,83.4483203 C4.64234375,83.4483203 3.79306641,82.599043 3.79306641,81.5516797 L3.79306641,13.2758398 C3.79306641,12.2284766 4.64234375,11.3791992 5.68970703,11.3791992 L104.310293,11.3791992 C105.357656,11.3791992 106.206934,12.2284766 106.206934,13.2758398 L106.206934,81.5516797 L106.206934,81.5516797 Z" id="Shape" fill="#F2F8FE"></path>
+                </g>
+                <circle id="Oval" fill="#DDEAFC" cx="5.68970703" cy="5.89703125" r="1.89664062"></circle>
+                <circle id="Oval" fill="#DDEAFC" cx="11.3794141" cy="5.89703125" r="1.89664062"></circle>
+                <circle id="Oval" fill="#DDEAFC" cx="17.0689062" cy="5.89703125" r="1.89664062"></circle>
+                <path d="M34.2899219,43.828125 C33.1585547,43.828125 32.2413867,42.910957 32.2413867,41.7795898 L32.2413867,19.3249805 C32.2413867,18.1936133 33.1585547,17.2764453 34.2899219,17.2764453 L75.7100781,17.2764453 C76.8414453,17.2764453 77.7586133,18.1936133 77.7586133,19.3249805 L77.7586133,41.7795898 C77.7586133,42.910957 76.8414453,43.828125 75.7100781,43.828125 L34.2899219,43.828125 Z" id="Shape" fill="#20A0FF"></path>
+                <path d="M66.9534766,77.9661523 L43.0465234,77.9661523 C42.3162695,77.9661523 41.7241602,77.3742578 41.7241602,76.6437891 L41.7241602,60.3227539 C41.7241602,59.5922852 42.3160547,59.0003906 43.0465234,59.0003906 L66.9536914,59.0003906 C67.6841602,59.0003906 68.2760547,59.5922852 68.2760547,60.3227539 L68.2760547,76.6437891 C68.2758398,77.374043 67.6839453,77.9661523 66.9534766,77.9661523 L66.9534766,77.9661523 Z" id="Shape" fill="#FFD6D2"></path>
+                <g id="Group" transform="translate(35.878906, 21.054688)" fill="#2198F0">
+                    <path d="M36.19,11.3940234 L2.0521875,11.3940234 C1.00482422,11.3940234 0.155546875,10.5447461 0.155546875,9.49738281 L0.155546875,9.49738281 C0.155546875,8.45001953 1.00482422,7.60074219 2.0521875,7.60074219 L36.1902148,7.60074219 C37.2375781,7.60074219 38.0868555,8.45001953 38.0868555,9.49738281 L38.0868555,9.49738281 C38.0866406,10.5449609 37.2373633,11.3940234 36.19,11.3940234 L36.19,11.3940234 Z" id="Shape"></path>
+                    <path d="M32.3969336,3.80789063 L5.84525391,3.80789063 C4.79789062,3.80789063 3.94861328,2.95861328 3.94861328,1.91125 L3.94861328,1.91125 C3.94861328,0.863886719 4.79789062,0.014609375 5.84525391,0.014609375 L32.3969336,0.014609375 C33.4442969,0.014609375 34.2935742,0.863886719 34.2935742,1.91125 L34.2935742,1.91125 C34.2935742,2.95882813 33.4442969,3.80789063 32.3969336,3.80789063 L32.3969336,3.80789063 Z" id="Shape"></path>
+                    <path d="M24.8108008,18.9803711 L13.4313867,18.9803711 C12.3840234,18.9803711 11.5347461,18.1310938 11.5347461,17.0837305 L11.5347461,17.0837305 C11.5347461,16.0363672 12.3840234,15.1870898 13.4313867,15.1870898 L24.8108008,15.1870898 C25.8581641,15.1870898 26.7074414,16.0363672 26.7074414,17.0837305 L26.7074414,17.0837305 C26.7072266,18.1310938 25.8581641,18.9803711 24.8108008,18.9803711 L24.8108008,18.9803711 Z" id="Shape"></path>
+                </g>
+                <g id="Group" transform="translate(45.332031, 62.734375)" fill="#FFACAD">
+                    <path d="M13.4610352,11.4384961 L5.87490234,11.4384961 C4.82753906,11.4384961 3.97826172,10.5892188 3.97826172,9.54185547 L3.97826172,9.54185547 C3.97826172,8.49449219 4.82753906,7.64521484 5.87490234,7.64521484 L13.4610352,7.64521484 C14.5083984,7.64521484 15.3576758,8.49449219 15.3576758,9.54185547 L15.3576758,9.54185547 C15.3576758,10.5894336 14.5083984,11.4384961 13.4610352,11.4384961 L13.4610352,11.4384961 Z" id="Shape"></path>
+                    <path d="M17.2541016,3.85236328 L2.08183594,3.85236328 C1.03447266,3.85236328 0.185195313,3.00308594 0.185195313,1.95572266 L0.185195313,1.95572266 C0.185195313,0.908359375 1.03447266,0.0590820312 2.08183594,0.0590820312 L17.2543164,0.0590820312 C18.3016797,0.0590820312 19.150957,0.908359375 19.150957,1.95572266 L19.150957,1.95572266 C19.1507422,3.00308594 18.3014648,3.85236328 17.2541016,3.85236328 L17.2541016,3.85236328 Z" id="Shape"></path>
+                </g>
+                <path d="M99.1948633,77.9661523 L75.2879102,77.9661523 C74.5574414,77.9661523 73.9655469,77.3742578 73.9655469,76.6437891 L73.9655469,60.3227539 C73.9655469,59.5922852 74.5574414,59.0003906 75.2879102,59.0003906 L99.1950781,59.0003906 C99.9255469,59.0003906 100.517441,59.5922852 100.517441,60.3227539 L100.517441,76.6437891 C100.517227,77.374043 99.925332,77.9661523 99.1948633,77.9661523 L99.1948633,77.9661523 Z" id="Shape" fill="#F2F8FE"></path>
+                <g id="Group" transform="translate(77.558594, 62.734375)" fill="#DEEBF8">
+                    <path d="M13.4758594,11.4384961 L5.88972656,11.4384961 C4.84236328,11.4384961 3.99308594,10.5892188 3.99308594,9.54185547 L3.99308594,9.54185547 C3.99308594,8.49449219 4.84236328,7.64521484 5.88972656,7.64521484 L13.4758594,7.64521484 C14.5232227,7.64521484 15.3725,8.49449219 15.3725,9.54185547 L15.3725,9.54185547 C15.3725,10.5894336 14.5232227,11.4384961 13.4758594,11.4384961 L13.4758594,11.4384961 Z" id="Shape"></path>
+                    <path d="M17.2689258,3.85236328 L2.09644531,3.85236328 C1.04908203,3.85236328 0.199804688,3.00308594 0.199804688,1.95572266 L0.199804688,1.95572266 C0.199804688,0.908359375 1.04908203,0.0590820312 2.09644531,0.0590820312 L17.2689258,0.0590820312 C18.3162891,0.0590820312 19.1655664,0.908359375 19.1655664,1.95572266 L19.1655664,1.95572266 C19.1655664,3.00308594 18.3162891,3.85236328 17.2689258,3.85236328 L17.2689258,3.85236328 Z" id="Shape"></path>
+                </g>
+                <path d="M34.7120898,77.9661523 L10.8051367,77.9661523 C10.0748828,77.9661523 9.48277344,77.3742578 9.48277344,76.6437891 L9.48277344,60.3227539 C9.48277344,59.5922852 10.074668,59.0003906 10.8051367,59.0003906 L34.7123047,59.0003906 C35.4425586,59.0003906 36.034668,59.5922852 36.034668,60.3227539 L36.034668,76.6437891 C36.0344531,77.374043 35.4425586,77.9661523 34.7120898,77.9661523 L34.7120898,77.9661523 Z" id="Shape" fill="#80A8E1"></path>
+                <g id="Group" transform="translate(13.105469, 62.734375)" fill="#6496DC">
+                    <path d="M13.4462109,11.4384961 L5.86007813,11.4384961 C4.81271484,11.4384961 3.9634375,10.5892188 3.9634375,9.54185547 L3.9634375,9.54185547 C3.9634375,8.49449219 4.81271484,7.64521484 5.86007813,7.64521484 L13.4462109,7.64521484 C14.4935742,7.64521484 15.3428516,8.49449219 15.3428516,9.54185547 L15.3428516,9.54185547 C15.3428516,10.5894336 14.4935742,11.4384961 13.4462109,11.4384961 L13.4462109,11.4384961 Z" id="Shape"></path>
+                    <path d="M17.2392773,3.85236328 L2.06701172,3.85236328 C1.01964844,3.85236328 0.170371094,3.00308594 0.170371094,1.95572266 L0.170371094,1.95572266 C0.170371094,0.908359375 1.01964844,0.0590820312 2.06701172,0.0590820312 L17.2394922,0.0590820312 C18.2868555,0.0590820312 19.1361328,0.908359375 19.1361328,1.95572266 L19.1361328,1.95572266 C19.135918,3.00308594 18.2866406,3.85236328 17.2392773,3.85236328 L17.2392773,3.85236328 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/website/assets/images/Module.svg
+++ b/website/assets/images/Module.svg
@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="81px" height="77px" viewBox="0 0 81 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Module_icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="6" y="57" width="11" height="11" rx="5.5"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.466666667   0 0 0 0 0.807843137  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <rect id="path-3" x="6" y="57" width="11" height="11" rx="5.5"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.392156863   0 0 0 0 0.588235294   0 0 0 0 0.862745098  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <rect id="path-5" x="6" y="57" width="11" height="11" rx="5.5"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.674509804   0 0 0 0 0.678431373  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Module_icon">
+            <g id="Group-5">
+                <g id="folder-3">
+                    <g id="Group">
+                        <rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
+                        <rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
+                        <rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
+                        <g id="Rectangle-path">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                            <use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        </g>
+                    </g>
+                </g>
+                <g id="folder-3-copy" transform="translate(29.000000, 0.000000)">
+                    <g id="Group">
+                        <rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
+                        <rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
+                        <rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
+                        <g id="Rectangle-path">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="#80A8E1" fill-rule="evenodd" xlink:href="#path-3"></use>
+                        </g>
+                    </g>
+                </g>
+                <g id="folder-3-copy" transform="translate(58.000000, 0.000000)">
+                    <g id="Group">
+                        <rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
+                        <rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
+                        <rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
+                        <g id="Rectangle-path">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                            <use fill="#FFD6D2" fill-rule="evenodd" xlink:href="#path-5"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/website/assets/images/Sketch-Template.svg
+++ b/website/assets/images/Sketch-Template.svg
@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="88px" height="77px" viewBox="0 0 88 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Sketch Template_icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sketch-Template_icon">
+            <g id="Group-25">
+                <g id="browser">
+                    <g id="Group" transform="translate(0.042735, 6.772269)" fill="#C9E1FB" opacity="0.23880597">
+                        <path d="M3.20088476,28.5057337 L44.1701391,28.5057337 C45.9105265,28.5057337 47.3217575,27.1026312 47.3217575,25.3722682 L47.3217575,0.305608725 C47.3217575,2.03597172 45.9105265,3.43907426 44.1701391,3.43907426 L3.20088476,3.43907426 C1.46049739,3.43907426 0.0492663503,2.03597172 0.0492663503,0.305608725 L0.0492663503,25.3722682 C0.0492663503,27.1029861 1.46014038,28.5057337 3.20088476,28.5057337 L3.20088476,28.5057337 Z" id="Shape"></path>
+                        <path d="M59.9271601,28.5057337 L78.8361566,28.5057337 C80.576544,28.5057337 81.987775,27.1026312 81.987775,25.3722682 L81.987775,0.305608725 C81.987775,2.03597172 80.576544,3.43907426 78.8361566,3.43907426 L59.9271601,3.43907426 C58.1867728,3.43907426 56.7755417,2.03597172 56.7755417,0.305608725 L56.7755417,25.3722682 C56.7755417,27.1029861 58.1867728,28.5057337 59.9271601,28.5057337 L59.9271601,28.5057337 Z" id="Shape"></path>
+                    </g>
+                    <path d="M3.24361929,10.2116986 L44.2128736,10.2116986 C45.953261,10.2116986 47.364492,8.80859603 47.364492,7.07823304 L47.364492,3.94476751 C47.364492,2.21440451 45.953261,0.811301969 44.2128736,0.811301969 L3.24361929,0.811301969 C1.50323191,0.811301969 0.0920008764,2.21440451 0.0920008764,3.94476751 L0.0920008764,7.07823304 C0.0920008764,8.80859603 1.50287491,10.2116986 3.24361929,10.2116986 L3.24361929,10.2116986 Z" id="Shape" fill="#FFD6D2"></path>
+                    <path d="M59.9698947,10.2116986 L78.8788911,10.2116986 C80.6192785,10.2116986 82.0305096,8.80859603 82.0305096,7.07823304 L82.0305096,3.94476751 C82.0305096,2.21440451 80.6192785,0.811301969 78.8788911,0.811301969 L59.9698947,0.811301969 C58.2295073,0.811301969 56.8182763,2.21440451 56.8182763,3.94476751 L56.8182763,7.07823304 C56.8182763,8.80859603 58.2295073,10.2116986 59.9698947,10.2116986 L59.9698947,10.2116986 Z" id="Shape" fill="#20A0FF"></path>
+                    <g id="Group" transform="translate(6.111778, 44.396572)" fill="#C9E1FB" opacity="0.23880597">
+                        <path d="M3.63949659,28.4815974 C3.63949659,30.2119604 2.13657137,31.6150629 0.283103013,31.6150629 L62.5667088,31.6150629 C64.4201772,31.6150629 65.9231024,30.2119604 65.9231024,28.4815974 L65.9231024,3.41493792 C65.9231024,1.68457492 64.4201772,0.28147238 62.5667088,0.28147238 L0.283103013,0.28147238 C2.13657137,0.28147238 3.63949659,1.68457492 3.63949659,3.41493792 L3.63949659,28.4815974 Z" id="Shape"></path>
+                    </g>
+                    <path d="M3.24361929,76.0112803 L6.3952377,76.0112803 C8.13562508,76.0112803 9.54685611,74.6081778 9.54685611,72.8778148 L9.54685611,47.8111553 C9.54685611,46.265021 8.42013066,44.9801712 6.93862628,44.7241059 C6.76209851,44.6935946 6.58053368,44.6776898 6.3952377,44.6776898 L3.24361929,44.6776898 C1.50323191,44.6776898 0.0920008764,46.0807923 0.0920008764,47.8111553 L0.0920008764,72.8778148 C0.0920008764,74.6081778 1.50287491,76.0112803 3.24361929,76.0112803 L3.24361929,76.0112803 Z" id="Shape" fill="#20A0FF"></path>
+                </g>
+                <g id="diamond" transform="translate(53.000000, 45.000000)">
+                    <polygon id="Shape" fill="#AFC8EB" points="24.1753264 8.86069795 17.1851852 28.8357025 34.3703704 8.86069795"></polygon>
+                    <g id="Group">
+                        <polygon id="Shape" fill="#80A8E1" points="7.1111088 0.0481841797 0 8.86069795 10.195044 8.86069795"></polygon>
+                        <polygon id="Shape" fill="#80A8E1" points="24.1753264 8.86069795 34.3703704 8.86069795 27.2592616 0.0481841797"></polygon>
+                        <polygon id="Shape" fill="#AFC8EA" points="24.1753264 8.86069795 17.1851852 0.0481841797 10.195044 8.86069795"></polygon>
+                    </g>
+                    <polygon id="Shape" fill="#6496DC" points="17.1851852 0.0481841797 7.1111088 0.0481841797 10.195044 8.86069795"></polygon>
+                    <polygon id="Shape" fill="#93B8EE" points="27.2592616 0.0481841797 17.1851852 0.0481841797 24.1753264 8.86069795"></polygon>
+                    <polygon id="Shape" fill="#80A8E1" points="10.195044 8.86069795 17.1851852 28.8357025 24.1753264 8.86069795"></polygon>
+                    <polygon id="Shape" fill="#6496DC" points="0 8.86069795 17.1851852 28.8357025 10.195044 8.86069795"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/website/assets/images/button-d-cn.png
+++ b/website/assets/images/button-d-cn.png
--- a/website/assets/images/button-d-en.png
+++ b/website/assets/images/button-d-en.png
--- a/website/assets/images/button-l-cn.png
+++ b/website/assets/images/button-l-cn.png
--- a/website/assets/images/button-l-en.png
+++ b/website/assets/images/button-l-en.png
--- a/website/assets/images/cloud-1.png
+++ b/website/assets/images/cloud-1.png
--- a/website/assets/images/cloud-2.png
+++ b/website/assets/images/cloud-2.png
--- a/website/assets/images/compo-1.png
+++ b/website/assets/images/compo-1.png
--- a/website/assets/images/compo-2.png
+++ b/website/assets/images/compo-2.png
--- a/website/assets/images/compo-3.png
+++ b/website/assets/images/compo-3.png
--- a/website/assets/images/component.png
+++ b/website/assets/images/component.png
--- a/website/assets/images/consistency.png
+++ b/website/assets/images/consistency.png
--- a/website/assets/images/controllability.png
+++ b/website/assets/images/controllability.png
--- a/website/assets/images/dialog-close.png
+++ b/website/assets/images/dialog-close.png
--- a/website/assets/images/duohui.svg
+++ b/website/assets/images/duohui.svg
@ -0,0 +1,24 @@
+<svg width="98" height="150" viewBox="0 0 98 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>duohui-element</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-2216 140)">
+<clipPath id="clip-0" clip-rule="evenodd">
+<path d="M 2216 -140L 2314 -140L 2314 10L 2216 10L 2216 -140Z" fill="#FFFFFF"/>
+</clipPath>
+<g id="duohui-element" clip-path="url(#clip-0)">
+<path d="M 2216 -140L 2314 -140L 2314 10L 2216 10L 2216 -140Z" fill="#FFFFFF"/>
+<g id="Duohui Icon 2">
+<g id="Vector">
+<use xlink:href="#path0_fill" transform="matrix(1.26636 0 0 1.21929 2230 -75.7038)" fill="#3A88FD"/>
+</g>
+<g id="Vector">
+<use xlink:href="#path1_fill" transform="matrix(1.41534 0 0 1.21834 2226 -112)" fill="#35AFFB"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" fill-rule="evenodd" d="M 25.7722 1.00635C 26.2 0.374983 26.8949 -2.6613e-07 27.6349 -2.6613e-07C 28.3755 -2.6613e-07 29.0699 0.374983 29.4983 1.00635C 34.409 8.24964 47.798 27.9964 54.5986 38.0262C 55.3878 39.1901 55.4896 40.7162 54.8623 41.983C 54.235 43.2498 52.9833 44.0452 51.6178 44.0452C 39.6694 44.0452 15.601 44.0452 3.6521 44.0452C 2.28712 44.0452 1.03545 43.2498 0.408173 41.983C -0.219106 40.7162 -0.117353 39.1901 0.671804 38.0262C 7.47242 27.9964 20.8609 8.24964 25.7722 1.00635Z"/>
+<path id="path1_fill" fill-rule="evenodd" d="M 24.9939 1.44703C 25.6137 0.533117 26.5572 -3.01614e-07 27.5551 -3.01614e-07C 28.5535 -3.01614e-07 29.497 0.533117 30.1168 1.44703C 35.4674 9.33854 47.8725 27.6342 54.4043 37.2681C 55.1825 38.4157 55.3299 39.982 54.7847 41.2999C 54.2389 42.6185 53.096 43.4556 51.8426 43.4556C 39.9023 43.4556 15.2084 43.4556 3.26811 43.4556C 2.01471 43.4556 0.871739 42.6185 0.325978 41.2999C -0.219783 39.982 -0.0717813 38.4157 0.70639 37.2681C 7.23818 27.6342 19.6433 9.33854 24.9939 1.44703Z"/>
+</defs>
+</svg>
--- a/website/assets/images/efficiency.png
+++ b/website/assets/images/efficiency.png
--- a/website/assets/images/element-demo.jpeg
+++ b/website/assets/images/element-demo.jpeg
--- a/website/assets/images/element-logo-small.svg
+++ b/website/assets/images/element-logo-small.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30px" height="30px" viewBox="0 0 38 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
+            <path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
+        </g>
+    </g>
+</svg>
--- a/website/assets/images/element-logo.svg
+++ b/website/assets/images/element-logo.svg
--- a/website/assets/images/feedback.png
+++ b/website/assets/images/feedback.png
--- a/website/assets/images/figure-1.png
+++ b/website/assets/images/figure-1.png
--- a/website/assets/images/figure-2.png
+++ b/website/assets/images/figure-2.png
--- a/website/assets/images/guide.png
+++ b/website/assets/images/guide.png
--- a/website/assets/images/hamburger.png
+++ b/website/assets/images/hamburger.png
--- a/website/assets/images/icon-check.png
+++ b/website/assets/images/icon-check.png
--- a/website/assets/images/icon-copy.png
+++ b/website/assets/images/icon-copy.png
--- a/website/assets/images/icon-download.png
+++ b/website/assets/images/icon-download.png
--- a/website/assets/images/icon-edit.png
+++ b/website/assets/images/icon-edit.png
--- a/website/assets/images/icon-redo.svg
+++ b/website/assets/images/icon-redo.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon-redo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme-editor" transform="translate(-1118.000000, -167.000000)" fill="#606266" fill-rule="nonzero">
+            <g id="custom" transform="translate(1060.000000, 146.000000)">
+                <g id="Group-2" transform="translate(30.000000, 15.000000)">
+                    <g id="Group" transform="translate(0.000000, 4.000000)">
+                        <g id="icon-clockwise" transform="translate(26.000000, 0.000000)">
+                            <path d="M12.2585,3.59833136 L12.2585,2.3085 L13.2585,2.3085 L13.2585,5.6365 L9.9295,5.6365 L9.9295,4.6365 L11.8833737,4.6365 C10.9510824,3.62012881 9.6272717,3.0179 8.2,3.0179 C5.43814237,3.0179 3.2,5.25604237 3.2,8.0179 C3.2,10.7797576 5.43814237,13.0179 8.2,13.0179 C10.9618576,13.0179 13.2,10.7797576 13.2,8.0179 L14.2,8.0179 C14.2,11.3320424 11.5141424,14.0179 8.2,14.0179 C4.88585763,14.0179 2.2,11.3320424 2.2,8.0179 C2.2,4.70375763 4.88585763,2.0179 8.2,2.0179 C9.73531163,2.0179 11.1716793,2.59926473 12.2585,3.59833136 Z" id="icon-redo"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/website/assets/images/icon-undo.svg
+++ b/website/assets/images/icon-undo.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon-undo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme-editor" transform="translate(-1092.000000, -167.000000)" fill="#606266" fill-rule="nonzero">
+            <g id="custom" transform="translate(1060.000000, 146.000000)">
+                <g id="Group-2" transform="translate(30.000000, 15.000000)">
+                    <g id="Group" transform="translate(0.000000, 4.000000)">
+                        <g id="icon-clockwise">
+                            <path d="M12.2585,3.59833136 L12.2585,2.3085 L13.2585,2.3085 L13.2585,5.6365 L9.9295,5.6365 L9.9295,4.6365 L11.8833737,4.6365 C10.9510824,3.62012881 9.6272717,3.0179 8.2,3.0179 C5.43814237,3.0179 3.2,5.25604237 3.2,8.0179 C3.2,10.7797576 5.43814237,13.0179 8.2,13.0179 C10.9618576,13.0179 13.2,10.7797576 13.2,8.0179 L14.2,8.0179 C14.2,11.3320424 11.5141424,14.0179 8.2,14.0179 C4.88585763,14.0179 2.2,11.3320424 2.2,8.0179 C2.2,4.70375763 4.88585763,2.0179 8.2,2.0179 C9.73531163,2.0179 11.1716793,2.59926473 12.2585,3.59833136 Z" id="icon-undo" transform="translate(8.200000, 8.017900) scale(-1, 1) translate(-8.200000, -8.017900) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/website/assets/images/icon-upload.svg
+++ b/website/assets/images/icon-upload.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon_upload</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme" transform="translate(-207.000000, -662.000000)" fill="#909399">
+            <g id="section" transform="translate(70.000000, 511.000000)">
+                <g id="card" transform="translate(0.000000, 60.000000)">
+                    <g id="btn" transform="translate(108.000000, 91.000000)">
+                        <g id="icon-upload" transform="translate(29.000000, 0.000000)">
+                            <path d="M13,-0.000600000001 L3.015,9.9854 L4.429,11.3984 L12,3.8284 L12,20.4854 L14.001,20.4854 L14.001,3.8284 L21.572,11.3984 L22.986,9.9854 L14.415,1.4144 L13,-0.000600000001 Z M13,2.8284 L13.158,2.9844 L12.843,2.9844 L13,2.8284 Z M24.001,19.9854 L24.001,23.9854 L2,23.9854 L2,19.9854 L0,19.9854 L0,25.9854 L26.001,25.9854 L26.001,19.9854 L24.001,19.9854 Z" id="icon_upload"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/website/assets/images/intro-theme-b.png
+++ b/website/assets/images/intro-theme-b.png
--- a/website/assets/images/navbar_0.png
+++ b/website/assets/images/navbar_0.png
--- a/website/assets/images/navbar_1.png
+++ b/website/assets/images/navbar_1.png
--- a/website/assets/images/navbar_2.png
+++ b/website/assets/images/navbar_2.png
--- a/website/assets/images/navbar_3.png
+++ b/website/assets/images/navbar_3.png
--- a/website/assets/images/plant-1.png
+++ b/website/assets/images/plant-1.png
--- a/website/assets/images/plant-2.png
+++ b/website/assets/images/plant-2.png
--- a/website/assets/images/qrcode.png
+++ b/website/assets/images/qrcode.png
--- a/website/assets/images/resource-placeholder.svg
+++ b/website/assets/images/resource-placeholder.svg
--- a/website/assets/images/resource.png
+++ b/website/assets/images/resource.png
--- a/website/assets/images/search-by-algolia.svg
+++ b/website/assets/images/search-by-algolia.svg
--- a/website/assets/images/term-arial.png
+++ b/website/assets/images/term-arial.png
--- a/website/assets/images/term-helvetica.png
+++ b/website/assets/images/term-helvetica.png
--- a/website/assets/images/term-hiragino.png
+++ b/website/assets/images/term-hiragino.png
--- a/website/assets/images/term-microsoft.png
+++ b/website/assets/images/term-microsoft.png
--- a/website/assets/images/term-pingfang.png
+++ b/website/assets/images/term-pingfang.png
--- a/website/assets/images/term-sf.png
+++ b/website/assets/images/term-sf.png
--- a/website/assets/images/theme-index-blue.png
+++ b/website/assets/images/theme-index-blue.png
--- a/website/assets/images/theme-index-icon.svg
+++ b/website/assets/images/theme-index-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 240"><defs><style>.cls-1{fill:none;}.cls-2{fill:#eff5fd;}.cls-3{fill:#fff;}.cls-4{fill:#26a1ff;}.cls-5{fill:snow;}.cls-6{fill:#fdaca9;}.cls-7{fill:#fd9da0;}.cls-8{fill:#fed5d0;}.cls-9{fill:#ffe8e6;}</style></defs><title>资源 104</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" width="320" height="240"/><circle class="cls-2" cx="160" cy="120" r="120"/><path class="cls-3" d="M160,55H105.64A20.64,20.64,0,0,0,85,75.64V200a5,5,0,0,0,5,5h70Z"/><rect class="cls-4" x="95" y="145" width="130" height="40" rx="5"/><path class="cls-5" d="M230,55H160V205h70a5,5,0,0,0,5-5V60A5,5,0,0,0,230,55Z"/><path class="cls-6" d="M220,145H160v40h60a5,5,0,0,0,5-5V150A5,5,0,0,0,220,145Z"/><path class="cls-6" d="M160,99.78a2.5,2.5,0,0,1,0-5c48.71,0,62.17-28.57,62.72-29.79a2.5,2.5,0,1,1,4.56,2C226.69,68.36,212.13,99.78,160,99.78Z"/><path class="cls-2" d="M124.26,171.58V154.4h6.44a7.91,7.91,0,0,1,3.16.52,4,4,0,0,1,1.86,1.6,4.26,4.26,0,0,1,.68,2.27,3.89,3.89,0,0,1-.6,2.08,4.36,4.36,0,0,1-1.8,1.57,4.45,4.45,0,0,1,2.39,1.56,4.15,4.15,0,0,1,.84,2.6,5,5,0,0,1-.51,2.24,4.32,4.32,0,0,1-1.26,1.6,5.18,5.18,0,0,1-1.88.85,11.48,11.48,0,0,1-2.77.29Zm2.27-10h3.72a8.34,8.34,0,0,0,2.16-.2,2.39,2.39,0,0,0,1.31-.86,2.49,2.49,0,0,0,.44-1.5,2.76,2.76,0,0,0-.41-1.5,2,2,0,0,0-1.17-.89,9.84,9.84,0,0,0-2.62-.24h-3.43Zm0,7.93h4.28a10.68,10.68,0,0,0,1.55-.08,3.81,3.81,0,0,0,1.31-.47,2.44,2.44,0,0,0,.86-1,2.92,2.92,0,0,0,.34-1.44,2.84,2.84,0,0,0-.49-1.67,2.56,2.56,0,0,0-1.36-1,8.51,8.51,0,0,0-2.52-.29h-4Z"/><path class="cls-2" d="M148.25,171.58v-1.83a4.55,4.55,0,0,1-3.95,2.11,5.06,5.06,0,0,1-2.06-.42,3.42,3.42,0,0,1-1.42-1.06,4.06,4.06,0,0,1-.65-1.57,11.22,11.22,0,0,1-.13-2v-7.71h2.11V166a11.86,11.86,0,0,0,.13,2.23,2.18,2.18,0,0,0,.84,1.31,2.68,2.68,0,0,0,1.6.47,3.52,3.52,0,0,0,1.78-.48,2.76,2.76,0,0,0,1.18-1.33,6.68,6.68,0,0,0,.34-2.43v-6.67h2.11v12.45Z"/><path class="cls-2" d="M158,169.69l.31,1.86a7.59,7.59,0,0,1-1.6.19,3.64,3.64,0,0,1-1.78-.36,2,2,0,0,1-.89-1,7.55,7.55,0,0,1-.26-2.49v-7.16h-1.54v-1.64h1.54v-3.08l2.1-1.27v4.35H158v1.64h-2.12v7.28a3.83,3.83,0,0,0,.11,1.16.92.92,0,0,0,.37.41,1.38,1.38,0,0,0,.72.15A6,6,0,0,0,158,169.69Z"/><path class="cls-5" d="M167.69,169.69l.3,1.86a7.43,7.43,0,0,1-1.59.19,3.61,3.61,0,0,1-1.78-.36,2,2,0,0,1-.89-1,7.28,7.28,0,0,1-.26-2.49v-7.16h-1.55v-1.64h1.55v-3.08l2.1-1.27v4.35h2.12v1.64h-2.12v7.28a3.51,3.51,0,0,0,.11,1.16.84.84,0,0,0,.36.41,1.43,1.43,0,0,0,.72.15A6.1,6.1,0,0,0,167.69,169.69Z"/><path class="cls-5" d="M169,165.35a6.43,6.43,0,0,1,1.93-5.12,5.79,5.79,0,0,1,3.91-1.38,5.6,5.6,0,0,1,4.2,1.68,6.42,6.42,0,0,1,1.62,4.65,8.25,8.25,0,0,1-.72,3.78,5.13,5.13,0,0,1-2.09,2.14,6.2,6.2,0,0,1-3,.76,5.57,5.57,0,0,1-4.22-1.68A6.65,6.65,0,0,1,169,165.35Zm2.17,0a5.26,5.26,0,0,0,1.05,3.58,3.47,3.47,0,0,0,5.23,0,5.41,5.41,0,0,0,1.05-3.65,5.13,5.13,0,0,0-1.05-3.49,3.48,3.48,0,0,0-5.23,0A5.25,5.25,0,0,0,171.13,165.35Z"/><path class="cls-5" d="M183.1,171.58V159.13H185v1.77a4.46,4.46,0,0,1,4-2.05,5.2,5.2,0,0,1,2.07.41,3.25,3.25,0,0,1,1.41,1.06,4,4,0,0,1,.65,1.55,11.89,11.89,0,0,1,.12,2.06v7.65H191.1V164a5.85,5.85,0,0,0-.24-1.93,2,2,0,0,0-.88-1,2.82,2.82,0,0,0-1.47-.38,3.39,3.39,0,0,0-2.32.85c-.66.57-1,1.66-1,3.25v6.8Z"/><circle class="cls-4" cx="71.9" cy="76.81" r="30"/><path class="cls-3" d="M62.69,68.35h4.89v2.5H59.25V62.53h2.5v3.23a15,15,0,0,1,25.15,11H84.4A12.5,12.5,0,0,0,63.06,68C62.93,68.09,62.81,68.22,62.69,68.35Zm19.36,19.5a15,15,0,0,1-25.15-11h2.5a12.51,12.51,0,0,0,21.34,8.85l.37-.39H76.22v-2.5h8.33v8.32h-2.5Z"/><path class="cls-7" d="M46.94,47.79a2.92,2.92,0,0,1-2.25-1l-7-8.38a2.93,2.93,0,1,1,4.48-3.77L49.17,43a2.92,2.92,0,0,1-.35,4.12A2.88,2.88,0,0,1,46.94,47.79Z"/><path class="cls-8" d="M37.06,59.93h-.25L25.89,59a2.93,2.93,0,0,1,.51-5.83l10.91,1a2.93,2.93,0,0,1-.25,5.84Z"/><path class="cls-8" d="M60.58,40.14l-.25,0A2.93,2.93,0,0,1,57.66,37l.94-10.91a2.93,2.93,0,1,1,5.83.5l-.94,10.91A2.93,2.93,0,0,1,60.58,40.14Z"/><rect class="cls-2" x="99" y="128.31" width="15" height="6.27"/><rect class="cls-2" x="123.56" y="112.59" width="15" height="22"/><rect class="cls-9" x="160" y="106.81" width="7.5" height="27.78"/><rect class="cls-2" x="152.5" y="106.81" width="7.5" height="27.78"/><rect class="cls-9" x="206" y="91.81" width="15" height="42.78"/><rect class="cls-9" x="179.25" y="103.64" width="15" height="30.94"/><path class="cls-4" d="M95,130.81a2.62,2.62,0,0,1-1-.21,2.5,2.5,0,0,1-1.26-3.31C93.31,126,107.88,94.78,160,94.78a2.5,2.5,0,0,1,0,5c-48.91,0-62.59,29.26-62.72,29.56A2.5,2.5,0,0,1,95,130.81Z"/><path class="cls-6" d="M226,63.73a2.5,2.5,0,0,0-3.3,1.26c-.55,1.22-14,29.79-62.72,29.79h0v5h0c52.13,0,66.69-31.42,67.28-32.75A2.5,2.5,0,0,0,226,63.73Z"/></g></g></svg>
--- a/website/assets/images/theme-index-red.png
+++ b/website/assets/images/theme-index-red.png
--- a/website/assets/images/theme-intro.png
+++ b/website/assets/images/theme-intro.png
--- a/website/assets/images/tipe.svg
+++ b/website/assets/images/tipe.svg
@ -0,0 +1,175 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.32 226.69">
+  <defs>
+    <style>
+      .cls-1 {
+        isolation: isolate;
+      }
+
+      .cls-2 {
+        fill: url(#radial-gradient);
+      }
+
+      .cls-3 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-4 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-5 {
+        fill: url(#linear-gradient-3);
+      }
+
+      .cls-6 {
+        fill: url(#linear-gradient-4);
+      }
+
+      .cls-7 {
+        fill: url(#linear-gradient-5);
+      }
+
+      .cls-8 {
+        fill: url(#linear-gradient-6);
+      }
+
+      .cls-9 {
+        opacity: 0.7;
+      }
+
+      .cls-11, .cls-9 {
+        mix-blend-mode: multiply;
+      }
+
+      .cls-10 {
+        fill: url(#linear-gradient-7);
+      }
+
+      .cls-12 {
+        fill: url(#linear-gradient-8);
+      }
+
+      .cls-13 {
+        fill: url(#linear-gradient-9);
+      }
+
+      .cls-14 {
+        fill: #3c2e36;
+      }
+
+      .cls-15 {
+        fill: url(#linear-gradient-10);
+      }
+
+      .cls-16 {
+        fill: url(#radial-gradient-2);
+      }
+    </style>
+    <radialGradient id="radial-gradient" cx="74.93" cy="117.87" r="86.39" gradientTransform="translate(0 22.72) scale(1 1.07)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.32" stop-color="#e4dce1"/>
+      <stop offset="0.48" stop-color="#e1dadf"/>
+      <stop offset="0.59" stop-color="#d9d3da"/>
+      <stop offset="0.68" stop-color="#cac7d2"/>
+      <stop offset="0.76" stop-color="#b5b6c6"/>
+      <stop offset="0.79" stop-color="#aaadc0"/>
+      <stop offset="1" stop-color="#6f6f85"/>
+    </radialGradient>
+    <linearGradient id="linear-gradient" x1="38.85" y1="122.53" x2="108.18" y2="108.38" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e4dce1"/>
+      <stop offset="0.19" stop-color="#d7d0d7"/>
+      <stop offset="0.53" stop-color="#b5b2be"/>
+      <stop offset="0.97" stop-color="#808296"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="32.25" y1="64.7" x2="148.44" y2="64.7" gradientUnits="userSpaceOnUse">
+      <stop offset="0.32" stop-color="#e4dce1"/>
+      <stop offset="0.49" stop-color="#e1dadf"/>
+      <stop offset="0.6" stop-color="#d9d3da"/>
+      <stop offset="0.69" stop-color="#cac7d2"/>
+      <stop offset="0.78" stop-color="#b5b6c6"/>
+      <stop offset="0.81" stop-color="#aaadc0"/>
+      <stop offset="1" stop-color="#6f6f85"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="139.11" y1="68.34" x2="139.11" y2="1.17" gradientUnits="userSpaceOnUse">
+      <stop offset="0.12" stop-color="#888aa0"/>
+      <stop offset="0.54" stop-color="#716f8a"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-4" x1="111.94" y1="16.05" x2="135.36" y2="16.05" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3c314b"/>
+      <stop offset="0.54" stop-color="#534a67"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-5" x1="6752.04" y1="68.34" x2="6752.04" y2="-3.45" gradientTransform="matrix(-1, 0, 0, 1, 6787.68, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.19" stop-color="#e4dce1"/>
+      <stop offset="0.42" stop-color="#c2bac6"/>
+      <stop offset="0.92" stop-color="#6b6582"/>
+      <stop offset="0.97" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-6" x1="39.39" y1="16.05" x2="62.82" y2="16.05" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3c314b"/>
+      <stop offset="0.02" stop-color="#3d324c"/>
+      <stop offset="0.35" stop-color="#524a66"/>
+      <stop offset="0.65" stop-color="#5f5876"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-7" x1="79.66" y1="229.05" x2="79.66" y2="194.82" gradientUnits="userSpaceOnUse">
+      <stop offset="0.03" stop-color="#808296"/>
+      <stop offset="0.31" stop-color="#b7b8c3" stop-opacity="0.78"/>
+      <stop offset="0.79" stop-color="#fff" stop-opacity="0.5"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-8" x1="87.38" y1="117.84" x2="87.38" y2="41.77" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e3dddf" stop-opacity="0"/>
+      <stop offset="0.04" stop-color="#cbc5cd" stop-opacity="0.12"/>
+      <stop offset="0.15" stop-color="#9d97a9" stop-opacity="0.37"/>
+      <stop offset="0.25" stop-color="#7b758f" stop-opacity="0.54"/>
+      <stop offset="0.35" stop-color="#67617f" stop-opacity="0.65"/>
+      <stop offset="0.45" stop-color="#605a7a" stop-opacity="0.68"/>
+      <stop offset="0.54" stop-color="#575070" stop-opacity="0.75"/>
+      <stop offset="1" stop-color="#382e4a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-9" x1="11357.22" y1="78.8" x2="11361.46" y2="58.49" gradientTransform="matrix(-1, 0, 0, 1, 11419.34, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.07" stop-color="#28ffff"/>
+      <stop offset="0.41" stop-color="#51d2ff"/>
+      <stop offset="0.8" stop-color="#7ba3ff"/>
+      <stop offset="1" stop-color="#8b91ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-10" x1="113" y1="78.8" x2="117.24" y2="58.49" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-9"/>
+    <radialGradient id="radial-gradient-2" cx="36.09" cy="124.71" r="36.13" gradientUnits="userSpaceOnUse">
+      <stop offset="0.11" stop-color="#635d7c"/>
+      <stop offset="0.35" stop-color="#5f5876"/>
+      <stop offset="0.65" stop-color="#524a66"/>
+      <stop offset="0.98" stop-color="#3d324c"/>
+      <stop offset="1" stop-color="#3c314b"/>
+    </radialGradient>
+  </defs>
+  <title>Asset 3</title>
+  <g class="cls-1">
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g>
+          <path class="cls-2" d="M138.13,128.27c-4.7-9.78-11.29-21.28-9.75-33.55a15.83,15.83,0,0,1,3.26-8.26A65.12,65.12,0,0,1,114.75,99a64.1,64.1,0,0,1-6.11,2.76,66.61,66.61,0,0,0-14.35,9.42c-13.43,11.7-26.21,44.39-48.51,50.6h0a23.9,23.9,0,0,1-9.81,2c-9.41-.07-20.4-6.21-26.26-15.43C1,134.68,3.58,115.85,9.49,103.81c-.18.37-.37.74-.55,1.13a102.51,102.51,0,0,0-4.2,10.42v0A86.37,86.37,0,0,0,0,143.69c0,45.84,35.49,83,79.27,83,11.19,0,29-3.38,43.66-13.61a57.75,57.75,0,0,0,22.57-32C151.54,158.58,144.94,142.45,138.13,128.27Z"/>
+          <path class="cls-3" d="M51.46,158.37a27,27,0,0,1-5.67,3.38h0c22.3-6.21,35.07-38.9,48.51-50.6a66.61,66.61,0,0,1,14.35-9.42,58.67,58.67,0,0,1-21.26,4.09c-19.75,0-37.75-10.49-48.31-24,1,1.39,13,15.46,22.29,43.72A30,30,0,0,1,51.46,158.37Z"/>
+          <path class="cls-4" d="M145.33,59.56c-2.08,22.29-28.26,46.26-58,46.26-29.95,0-55.88-24.12-58-46.26-1.45-15.6,7.34-36,58-36S146.78,44,145.33,59.56Z"/>
+          <path class="cls-5" d="M135.36,0h0a51.59,51.59,0,0,0-4.68,32.1A37.21,37.21,0,0,1,134,34.24c10,7.23,12.12,17,11.34,25.32a35.2,35.2,0,0,1-1.6,7.61A73.45,73.45,0,0,0,142.08,12,71.18,71.18,0,0,0,135.36,0Z"/>
+          <path class="cls-6" d="M130.68,32.1A51.59,51.59,0,0,1,135.36,0h0a57.92,57.92,0,0,0-9.41,6.87,59.8,59.8,0,0,0-14,18.75q3.35.64,6.29,1.45A53.09,53.09,0,0,1,130.68,32.1Z"/>
+          <path class="cls-7" d="M39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,37.21,37.21,0,0,0-3.31,2.14c-10,7.23-12.12,17-11.34,25.32A35.2,35.2,0,0,0,31,67.17,73.45,73.45,0,0,1,32.67,12,71.18,71.18,0,0,1,39.39,0Z"/>
+          <path class="cls-8" d="M48.81,6.87A57.92,57.92,0,0,0,39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,53.09,53.09,0,0,1,12.45-5q2.94-.82,6.29-1.45A59.8,59.8,0,0,0,48.81,6.87Z"/>
+          <g class="cls-9">
+            <path class="cls-10" d="M84.24,182.6c-26.08,0-49.56,5.42-66,14.08,14.54,18.33,36.47,30,61,30,11.19,0,29-3.38,43.66-13.61A58.81,58.81,0,0,0,141,192.47C125.56,186.3,105.79,182.6,84.24,182.6Z"/>
+          </g>
+          <g>
+            <g class="cls-11">
+              <path class="cls-12" d="M138.51,52.94c-.56-2.94-2-5.19-5-5.88-7.88-1.85-27,9.84-37.8,15.34-4,2.06-6.16,3.05-8.34,3s-4.31-.94-8.34-3c-10.77-5.5-29.92-17.18-37.8-15.34-3,.7-4.44,2.94-5,5.88-1,5.16.35,18,9.89,27.49,7.14,7.11,16.68,10.46,24.69,12.71l.18.08a4.2,4.2,0,0,0-.09.88c0,3.28,3.83,5.94,8.56,5.94,2.34,0,6.35-.65,7.9-1.71h0c1.55,1.06,5.56,1.71,7.9,1.71,4.73,0,8.56-2.66,8.56-5.94a4.2,4.2,0,0,0-.09-.88l.18-.08c8-2.25,17.56-5.6,24.69-12.71C138.16,70.92,139.49,58.1,138.51,52.94Z"/>
+            </g>
+            <path class="cls-13" d="M75.26,75.35C64.56,86.85,47.81,77.09,45,63.28c-1.83-9.07,3.63-7.73,8.71-5.67C60.14,60.2,68.84,66.27,75.26,75.35Z"/>
+            <path class="cls-14" d="M60.43,68.26a15.16,15.16,0,0,1-2.19,8,15.56,15.56,0,0,1,0-15.92A15.16,15.16,0,0,1,60.43,68.26Z"/>
+            <path d="M87.36,86.64a8.15,8.15,0,0,0-6.27,2.49c8.25,5.17,4.31,5.17,12.55,0A8.15,8.15,0,0,0,87.36,86.64Z"/>
+            <path class="cls-15" d="M99.86,75.35c10.69,11.5,27.45,1.74,30.23-12.07,1.83-9.07-3.63-7.73-8.71-5.67C115,60.2,106.28,66.27,99.86,75.35Z"/>
+            <path class="cls-14" d="M114.69,68.26a15.16,15.16,0,0,0,2.19,8,15.56,15.56,0,0,0,0-15.92A15.16,15.16,0,0,0,114.69,68.26Z"/>
+          </g>
+          <path class="cls-16" d="M9.71,148.35c5.86,9.22,16.85,15.37,26.26,15.43a23.7,23.7,0,0,0,8.21-1.41l0,0c-15,4.18-19.32-25.16-10.92-43.06v0c1.09-3.38,2.35-6.34,3.42-8.83.37-.86,2.53-5.15,2.09-9.8-.84-9-14-17.33-24-5.37A44.52,44.52,0,0,0,9.39,104C3.55,116.06,1.08,134.76,9.71,148.35Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/website/assets/images/typography.png
+++ b/website/assets/images/typography.png
--- a/website/assets/images/web.png
+++ b/website/assets/images/web.png
--- a/website/assets/styles/common.css
+++ b/website/assets/styles/common.css
@ -0,0 +1,169 @@
+html, body {
+  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;
+
+  &.is-component {
+    overflow: hidden;
+  }
+}
+
+#app {
+  height: 100%;
+  
+  &.is-component {
+    overflow-y: hidden;
+
+    .main-cnt {
+      padding: 0;
+      margin-top: 0;
+      height: 100%;
+      min-height: auto;
+    }
+
+    .headerWrapper {
+      position: fixed;
+      width: 100%;
+      left: 0;
+      top: 0;
+      z-index: 1500;
+      
+      .container {
+        padding: 0;
+      }
+    }
+  }
+}
+
+a {
+  color: #409EFF;
+  text-decoration: none;
+}
+
+code {
+  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;
+}
+
+.hljs {
+  line-height: 1.8;
+  font-family: Menlo, Monaco, Consolas, Courier, monospace;
+  font-size: 12px;
+  padding: 18px 24px;
+  background-color: #fafafa;
+  border: solid 1px #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%;
+}
+
+.container,
+.page-container {
+  width: 1140px;
+  padding: 0;
+  margin: 0 auto;
+}
+
+.page-container {
+  padding-top: 55px;
+
+  h2 {
+    font-size: 28px;
+    color: #1f2d3d;
+    margin: 0;
+  }
+  h3 {
+    font-size: 22px;
+  }
+  h2, h3, h4, h5 {
+    font-weight: normal;
+    color: #1f2f3d;
+
+    &:hover a {
+      opacity: .4;
+    }
+
+    a {
+      float: left;
+      margin-left: -20px;
+      opacity: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: .4;
+      }
+    }
+  }
+
+  p {
+    font-size: 14px;
+    color: #5e6d82;
+    line-height: 1.5em;
+  }
+
+  .tip {
+    padding: 8px 16px;
+    background-color: #ECF8FF;
+    border-radius: 4px;
+    border-left: #50bfff 5px solid;
+    margin: 20px 0;
+
+    code {
+      background-color: rgba(255, 255, 255, .7);
+      color: #445368;
+    }
+  }
+
+  .warning {
+    padding: 8px 16px;
+    background-color: #fff6f7;
+    border-radius: 4px;
+    border-left: #FE6C6F 5px solid;
+    margin: 20px 0;
+
+    code {
+      background-color: rgba(255, 255, 255, .7);
+      color: #445368;
+    }
+  }
+}
+.demo {
+  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;
+  }
+}
--- a/website/assets/styles/fonts/icomoon.eot
+++ b/website/assets/styles/fonts/icomoon.eot
--- a/website/assets/styles/fonts/icomoon.svg
+++ b/website/assets/styles/fonts/icomoon.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="rate-face-off" d="M0 448c0 282.766 229.234 512 512 512s512-229.234 512-512c0-282.766-229.234-512-512-512s-512 229.234-512 512zM947.2 448c0 240.351-194.849 435.2-435.2 435.2s-435.2-194.849-435.2-435.2c0-240.351 194.849-435.2 435.2-435.2s435.2 194.849 435.2 435.2zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
+<glyph unicode="&#xe901;" glyph-name="rate-face-1" d="M512.001 960c-282.771 0-512.001-229.23-512.001-512.002 0-282.77 229.23-511.998 512.001-511.998 282.769 0 511.999 229.227 511.999 511.998s-229.23 512.002-511.999 512.002zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM694.529 181.197l-3.422 1.216c-56.15 27.872-116.388 42.047-178.882 42.047-64.556 0-125.611-14.316-181.515-42.45l-3.382-1.132c-2.102-0.628-4.945-1.529-8.489-1.529-20.554 0-37.239 18.29-37.239 40.734 0 10.655 4.571 21.361 12.114 29.399l-0.456 2.483 9.516 4.698c66.74 33.104 139.336 50.537 209.907 50.537 71.889 0 142.336-16.984 210.314-50.948 11.943-7.181 19.405-20.953 19.405-35.903 0-26.328-21.71-47.958-47.871-39.153z" />
+<glyph unicode="&#xe902;" glyph-name="rate-face-2" d="M512-64c-282.766 0-512 229.234-512 512s229.234 512 512 512c282.766 0 512-229.234 512-512s-229.234-512-512-512zM294.4 588.853v-51.307c0-28.482 22.923-51.147 51.2-51.147 28.474 0 51.2 22.899 51.2 51.147v51.307c0 28.482-22.923 51.147-51.2 51.147-28.474 0-51.2-22.899-51.2-51.147zM627.2 588.853v-51.307c0-28.482 22.923-51.147 51.2-51.147 28.474 0 51.2 22.899 51.2 51.147v51.307c0 28.482-22.923 51.147-51.2 51.147-28.474 0-51.2-22.899-51.2-51.147zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
+<glyph unicode="&#xe903;" glyph-name="rate-face-3" d="M512.001 960c-282.77 0-512.001-229.23-512.001-511.999s229.23-512.001 512.001-512.001c282.77 0 511.999 229.23 511.999 511.999s-229.229 512.001-511.999 512.001zM817.495 305.565c-0.445-1.485-0.963-2.939-1.569-4.35-0.676-1.572-1.455-3.089-2.317-4.556-55.631-107.613-169.518-181.459-301.323-181.459-0.096 0-0.19 0.002-0.286 0.002s-0.19-0.002-0.286-0.002c-131.804 0-245.693 73.845-301.323 181.459-0.862 1.467-1.641 2.984-2.317 4.556-0.606 1.41-1.124 2.865-1.569 4.35-1.103 3.68-1.705 7.569-1.705 11.597 0 6.566 1.579 12.771 4.372 18.282 6.897 13.601 21.239 22.955 37.822 22.955s30.927-9.355 37.823-22.955h0.676c41.411-81.453 127.131-137.544 226.507-137.652 99.375 0.108 185.095 56.2 226.507 137.652h0.676c6.897 13.601 21.239 22.955 37.823 22.955s30.927-9.355 37.822-22.955c2.794-5.511 4.372-11.715 4.372-18.282 0-4.029-0.602-7.918-1.705-11.597zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307z" />
+</font></defs></svg>
--- a/website/assets/styles/fonts/icomoon.ttf
+++ b/website/assets/styles/fonts/icomoon.ttf
--- a/website/assets/styles/fonts/icomoon.woff
+++ b/website/assets/styles/fonts/icomoon.woff
--- a/website/assets/styles/fonts/style.css
+++ b/website/assets/styles/fonts/style.css
@ -0,0 +1,39 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('icomoon.eot?h6xgdm');
+  src:  url('icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
+    url('icomoon.ttf?h6xgdm') format('truetype'),
+    url('icomoon.woff?h6xgdm') format('woff'),
+    url('icomoon.svg?h6xgdm#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-rate-face-off:before {
+  content: "\e900";
+}
+.icon-rate-face-1:before {
+  content: "\e901";
+}
+.icon-rate-face-2:before {
+  content: "\e902";
+}
+.icon-rate-face-3:before {
+  content: "\e903";
+}
+
--- a/website/bus.js
+++ b/website/bus.js
@ -0,0 +1,6 @@
+import mitt from 'mitt'
+const emitter = mitt()
+emitter.$off = emitter.off
+emitter.$on = emitter.on
+emitter.$emit = emitter.emit
+export default emitter
--- a/website/color.js
+++ b/website/color.js
@ -0,0 +1,18 @@
+export const 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 }`
+  }
+}
--- a/website/components/demo-block.vue
+++ b/website/components/demo-block.vue
@ -0,0 +1,338 @@
+<template>
+  <div
+    class="demo-block"
+    :class="[blockClass, { 'hover': hovering }]"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <div class="source">
+      <slot name="source"></slot>
+    </div>
+    <div ref="meta" class="meta">
+      <div v-if="$slots.default" class="description">
+        <slot></slot>
+      </div>
+      <div class="highlight">
+        <slot name="highlight"></slot>
+      </div>
+    </div>
+    <div
+      ref="control"
+      class="demo-block-control"
+      :class="{ 'is-fixed': fixedControl }"
+      @click="isExpanded = !isExpanded"
+    >
+      <transition name="arrow-slide">
+        <i :class="[iconClass, { 'hovering': hovering }]"></i>
+      </transition>
+      <transition name="text-slide">
+        <span v-show="hovering">{{ controlText }}</span>
+      </transition>
+      <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
+        <transition name="text-slide">
+          <el-button
+            v-show="hovering || isExpanded"
+            size="small"
+            type="text"
+            class="control-button"
+            @click.stop="goCodepen"
+          >
+            {{ langConfig['button-text'] }}
+          </el-button>
+        </transition>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<script>
+import { nextTick } from 'vue'
+import compoLang from '../i18n/component.json'
+import { stripScript, stripStyle, stripTemplate } from '../util'
+const version = '1.0.0' // element version
+
+export default {
+  data() {
+    return {
+      codepen: {
+        script: '',
+        html: '',
+        style: '',
+      },
+      hovering: false,
+      isExpanded: false,
+      fixedControl: false,
+      scrollParent: null,
+    }
+  },
+
+  computed: {
+    lang() {
+      return this.$route.path.split('/')[1]
+    },
+
+    langConfig() {
+      return compoLang.filter(config => config.lang === this.lang)[0]['demo-block']
+    },
+
+    blockClass() {
+      return `demo-${ this.lang } demo-${ this.$router.currentRoute.value.path.split('/').pop() }`
+    },
+
+    iconClass() {
+      return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
+    },
+
+    controlText() {
+      return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text']
+    },
+
+    codeArea() {
+      return this.$el.getElementsByClassName('meta')[0]
+    },
+
+    codeAreaHeight() {
+      if (this.$el.getElementsByClassName('description').length > 0) {
+        return this.$el.getElementsByClassName('description')[0].clientHeight +
+            this.$el.getElementsByClassName('highlight')[0].clientHeight + 20
+      }
+      return this.$el.getElementsByClassName('highlight')[0].clientHeight
+    },
+  },
+
+  watch: {
+    isExpanded(val) {
+      this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0'
+      if (!val) {
+        this.fixedControl = false
+        this.$refs.control.style.left = '0'
+        this.removeScrollHandler()
+        return
+      }
+      setTimeout(() => {
+        this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap')
+        this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler)
+        this.scrollHandler()
+      }, 200)
+    },
+  },
+
+  created() {
+    const highlight = this.$slots.highlight()
+    if (highlight && highlight[0]) {
+      let code = ''
+      let cur = highlight[0]
+      if (cur.tag === 'pre' && (cur.children && cur.children[0])) {
+        cur = cur.children[0]
+        if (cur.tag === 'code') {
+          code = cur.children[0].text
+        }
+      }
+      if (code) {
+        this.codepen.html = stripTemplate(code)
+        this.codepen.script = stripScript(code)
+        this.codepen.style = stripStyle(code)
+      }
+    }
+  },
+
+  mounted() {
+    nextTick(() => {
+      let highlight = this.$el.getElementsByClassName('highlight')[0]
+      if (this.$el.getElementsByClassName('description').length === 0) {
+        highlight.style.width = '100%'
+        highlight.borderRight = 'none'
+      }
+    })
+  },
+
+  beforeUnmount() {
+    this.removeScrollHandler()
+  },
+
+  methods: {
+    goCodepen() {
+      // since 2.6.2 use code rather than jsfiddle https://blog.codepen.io/documentation/api/prefill/
+      const { script, html, style } = this.codepen
+      const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
+        '\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>'
+      let jsTpl = (script || '').replace(/export default/, 'var Main =').trim()
+      let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`
+      let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`
+      jsTpl = jsTpl
+        ? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
+        : 'new Vue().$mount(\'#app\')'
+      const data = {
+        js: jsTpl,
+        css: cssTpl,
+        html: htmlTpl,
+      }
+      const form = document.getElementById('fiddle-form') || document.createElement('form')
+      while (form.firstChild) {
+        form.removeChild(form.firstChild)
+      }
+      form.method = 'POST'
+      form.action = 'https://codepen.io/pen/define/'
+      form.target = '_blank'
+      form.style.display = 'none'
+
+      const input = document.createElement('input')
+      input.setAttribute('name', 'data')
+      input.setAttribute('type', 'hidden')
+      input.setAttribute('value', JSON.stringify(data))
+
+      form.appendChild(input)
+      document.body.appendChild(form)
+
+      form.submit()
+    },
+
+    scrollHandler() {
+      const { top, bottom, left } = this.$refs.meta.getBoundingClientRect()
+      this.fixedControl = bottom > document.documentElement.clientHeight &&
+          top + 44 <= document.documentElement.clientHeight
+      this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0'
+    },
+
+    removeScrollHandler() {
+      this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+  .demo-block {
+    border: solid 1px #ebebeb;
+    border-radius: 3px;
+    transition: .2s;
+
+    &.hover {
+      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
+    }
+
+    code {
+      font-family: Menlo, Monaco, Consolas, Courier, monospace;
+    }
+
+    .demo-button {
+      float: right;
+    }
+
+    .source {
+      padding: 24px;
+    }
+
+    .meta {
+      background-color: #fafafa;
+      border-top: solid 1px #eaeefb;
+      overflow: hidden;
+      height: 0;
+      transition: height .2s;
+    }
+
+    .description {
+      padding: 20px;
+      box-sizing: border-box;
+      border: solid 1px #ebebeb;
+      border-radius: 3px;
+      font-size: 14px;
+      line-height: 22px;
+      color: #666;
+      word-break: break-word;
+      margin: 10px;
+      background-color: #fff;
+
+      p {
+        margin: 0;
+        line-height: 26px;
+      }
+
+      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;
+      }
+    }
+
+    .highlight {
+      pre {
+        margin: 0;
+      }
+
+      code.hljs {
+        margin: 0;
+        border: none;
+        max-height: none;
+        border-radius: 0;
+
+        &::before {
+          content: none;
+        }
+      }
+    }
+
+    .demo-block-control {
+      border-top: solid 1px #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;
+
+      &.is-fixed {
+        position: fixed;
+        bottom: 0;
+        width: 868px;
+      }
+
+      i {
+        font-size: 16px;
+        line-height: 44px;
+        transition: .3s;
+        &.hovering {
+          transform: translateX(-40px);
+        }
+      }
+
+      > span {
+        position: absolute;
+        transform: translateX(-30px);
+        font-size: 14px;
+        line-height: 44px;
+        transition: .3s;
+        display: inline-block;
+      }
+
+      &:hover {
+        color: #409EFF;
+        background-color: #f9fafc;
+      }
+
+      & .text-slide-enter,
+      & .text-slide-leave-active {
+        opacity: 0;
+        transform: translateX(10px);
+      }
+
+      .control-button {
+        line-height: 26px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 14px;
+        padding-left: 5px;
+        padding-right: 25px;
+      }
+    }
+  }
+</style>
--- a/website/components/footer-nav.vue
+++ b/website/components/footer-nav.vue
@ -0,0 +1,122 @@
+<template>
+  <div class="footer-nav">
+    <span
+      v-if="leftNav"
+      class="footer-nav-link footer-nav-left"
+      @click="handleNavClick('prev')"
+    >
+      <i class="el-icon-arrow-left"></i>
+      {{ leftNav.title || leftNav.name }}
+    </span>
+    <span
+      v-if="rightNav"
+      class="footer-nav-link footer-nav-right"
+      @click="handleNavClick('next')"
+    >
+      {{ rightNav.title || rightNav.name }}
+      <i class="el-icon-arrow-right"></i>
+    </span>
+  </div>
+</template>
+
+<script>
+import navConfig from '../nav.config.json'
+
+export default {
+  data() {
+    return {
+      currentComponent: null,
+      nav: [],
+      currentIndex: -1,
+      leftNav: null,
+      rightNav: null,
+    }
+  },
+
+  computed: {
+    lang() {
+      return this.$route.meta.lang
+    },
+  },
+
+  watch: {
+    '$route.path'() {
+      this.setNav()
+      this.updateNav()
+    },
+  },
+
+  created() {
+    this.setNav()
+    this.updateNav()
+  },
+
+  methods: {
+    setNav() {
+      let nav = navConfig[this.lang]
+      this.nav = [nav[0]].concat(nav[3].children)
+      nav[4].groups.map(group => group.list).forEach(list => {
+        this.nav = this.nav.concat(list)
+      })
+    },
+
+    updateNav() {
+      this.currentComponent = '/' + this.$route.path.split('/')[3]
+      for (let i = 0, len = this.nav.length; i < len; i++) {
+        if (this.nav[i].path === this.currentComponent) {
+          this.currentIndex = i
+          break
+        }
+      }
+      this.leftNav = this.nav[this.currentIndex - 1]
+      this.rightNav = this.nav[this.currentIndex + 1]
+    },
+
+    handleNavClick(direction) {
+      this.$router.push(`/${ this.lang }/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+  .footer-nav {
+    padding: 40px 0;
+    color: #333;
+    font-size: 14px;
+
+    &::after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+
+    & i {
+      transition: .3s;
+      color: #999;
+      vertical-align: baseline;
+    }
+  }
+
+  .footer-nav-link {
+    cursor: pointer;
+    transition: .3s;
+
+    &:hover {
+      color: #409EFF;
+
+      & i {
+        color: #409EFF;
+      }
+    }
+  }
+
+  .footer-nav-left {
+    float: left;
+    margin-left: -4px;
+  }
+
+  .footer-nav-right {
+    float: right;
+    margin-right: -4px;
+  }
+</style>
--- a/website/components/footer.vue
+++ b/website/components/footer.vue
@ -0,0 +1,188 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-main">
+        <h4>{{ langConfig.links }}</h4>
+        <a href="https://github.com/ElemeFE/element" class="footer-main-link" target="_blank">{{ langConfig.repo }}</a>
+        <a href="https://github.com/ElemeFE/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
+        <a href="https://github.com/ElemeFE/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
+        <a href="https://github.com/ElementUI/element-starter" class="footer-main-link" target="_blank">{{ langConfig.starter }}</a>
+        <a :href="'/#/' + lang + '/component/custom-theme'" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
+        <a href="https://github.com/elemefe/element-react" class="footer-main-link" target="_blank">Element-React</a>
+        <a href="https://github.com/ElemeFE/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
+      </div>
+      <div class="footer-main">
+        <h4>{{ langConfig.community }}</h4>
+        <a :href="gitterLink" class="footer-main-link" target="_blank">{{ langConfig.gitter }}</a>
+        <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
+        <a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
+        <a href="https://segmentfault.com/t/element-ui" class="footer-main-link" target="_blank">SegmentFault</a>
+        <a href="https://github.com/ElementUI/awesome-element" class="footer-main-link" target="_blank">Awesome Element</a>
+      </div>
+      <div class="footer-social">
+        <p class="footer-social-title">Element {{ version && version.slice(0, 3) }} Fullerene</p>
+        <el-popover
+          ref="weixin"
+          placement="top"
+          width="120"
+          popper-class="footer-popover"
+          trigger="hover"
+        >
+          <div class="footer-popover-title">{{ langConfig.eleme }} UED</div>
+          <img src="../assets/images/qrcode.png" alt="">
+        </el-popover>
+        <!-- <i v-popover:weixin class="doc-icon-weixin elementdoc"></i> -->
+        <a href="https://github.com/elemefe" target="_blank">
+          <i class="doc-icon-github elementdoc"></i>
+        </a>
+        <a :href="gitterLink" target="_blank">
+          <i class="doc-icon-gitter elementdoc"></i>
+        </a>
+      </div>
+    </div>
+  </footer>
+</template>
+<script>
+import compoLang from '../i18n/component.json'
+const version = '1.0.0' // element version
+
+export default {
+  data() {
+    return {
+      version,
+    }
+  },
+
+  computed: {
+    lang() {
+      return this.$route.path.split('/')[1] || 'zh-CN'
+    },
+
+    langConfig() {
+      return compoLang.filter(config => config.lang === this.lang)[0]['footer']
+    },
+
+    gitterLink() {
+      return this.lang === 'zh-CN' ? 'https://gitter.im/ElemeFE/element' : 'https://gitter.im/element-en/Lobby'
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .footer {
+    background-color: #F7FBFD;
+    width: 100%;
+    padding: 40px 150px;
+    margin-top: -340px;
+    box-sizing: border-box;
+    height: 340px;
+
+    .container {
+      box-sizing: border-box;
+      width: auto;
+    }
+
+    .footer-main {
+      font-size: 0;
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 110px;
+
+      h4 {
+        font-size: 18px;
+        color: #333;
+        line-height: 1;
+        margin: 0 0 15px 0;
+      }
+
+      .footer-main-link {
+        display: block;
+        margin: 0;
+        line-height: 2;
+        font-size: 14px;
+        color: #666;
+
+        &:hover {
+          color: #333;
+        }
+      }
+    }
+
+    .footer-social {
+      float: right;
+      text-align: right;
+
+      .footer-social-title {
+        color: #666;
+        font-size: 18px;
+        line-height: 1;
+        margin: 0 0 20px 0;
+        padding: 0;
+        font-weight: bold;
+      }
+
+      .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;
+        &:hover {
+          transform: scale(1.2);
+          color: #8D99AB;
+        }
+      }
+
+      .doc-icon-gitter {
+        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, 0.24);
+
+    .footer-popover-title {
+      border-bottom: solid 1px #eaeefb;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #99a9bf;
+      background-color: #f8f9fe;
+    }
+
+    img {
+      size: 100px;
+      margin: 10px;
+    }
+  }
+  @media (max-width: 1140px) {
+    .footer {
+      height: auto;
+    }
+  }
+
+  @media (max-width: 1000px) {
+    .footer-social {
+      display: none;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .footer {
+      .footer-main {
+        margin-bottom: 30px;
+      }
+    }
+  }
+</style>
+
--- a/website/components/header.vue
+++ b/website/components/header.vue
@ -0,0 +1,458 @@
+<template>
+  <div class="headerWrapper">
+    <header ref="header" class="header">
+      <div class="container">
+        <h1>
+          <router-link :to="`/${ lang }`">
+            <!-- logo -->
+            <slot>
+              <img
+                src="../assets/images/element-logo.svg"
+                alt="element-logo"
+                class="nav-logo"
+              >
+              <img
+                src="../assets/images/element-logo-small.svg"
+                alt="element-logo"
+                class="nav-logo-small"
+              >
+            </slot>
+          </router-link>
+        </h1>
+
+        <!-- nav -->
+        <ul class="nav">
+          <li v-show="isComponentPage" class="nav-item nav-algolia-search">
+            <algolia-search />
+          </li>
+          <li class="nav-item">
+            <router-link
+              active-class="active"
+              :to="`/${ lang }/guide`"
+            >
+              {{ langConfig.guide }}
+            </router-link>
+          </li>
+          <li class="nav-item">
+            <router-link
+              active-class="active"
+              :to="`/${ lang }/component`"
+            >
+              {{ langConfig.components }}
+            </router-link>
+          </li>
+          <li class="nav-item">
+            <router-link
+              active-class="active"
+              :to="`/${ lang }/resource`"
+              exact
+            >
+              {{ langConfig.resource }}
+            </router-link>
+          </li>
+
+          <!-- gap -->
+          <li v-show="isComponentPage" class="nav-item">
+            <div class="nav-gap"></div>
+          </li>
+
+          <!-- 版本选择器 -->
+          <li v-if="false" v-show="isComponentPage" class="nav-item nav-versions">
+            <el-dropdown
+              trigger="click"
+              class="nav-dropdown"
+              :class="{ 'is-active': verDropdownVisible }"
+            >
+              <span>
+                {{ version }}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                class="nav-dropdown-list"
+                @input="handleVerDropdownToggle"
+              >
+                <el-dropdown-item
+                  v-for="item in Object.keys(versions)"
+                  :key="item"
+                  @click="switchVersion(item)"
+                >
+                  {{ item }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </li>
+
+          <!-- 语言选择器 -->
+          <li class="nav-item lang-item">
+            <el-dropdown
+              trigger="click"
+              class="nav-dropdown nav-lang"
+              :class="{ 'is-active': langDropdownVisible }"
+            >
+              <span>
+                {{ displayedLang }}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                class="nav-dropdown-list"
+                @input="handleLangDropdownToggle"
+              >
+                <el-dropdown-item
+                  v-for="(value, key) in langs"
+                  :key="key"
+                  @click="switchLang(key)"
+                >
+                  {{ value }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </li>
+        </ul>
+      </div>
+    </header>
+  </div>
+</template>
+<script>
+import AlgoliaSearch from './search.vue'
+import compoLang from '../i18n/component.json'
+
+const version = '1.0.0' // element version
+
+export default {
+
+  components: {
+    AlgoliaSearch,
+  },
+  data() {
+    return {
+      active: '',
+      versions: [],
+      version,
+      verDropdownVisible: true,
+      langDropdownVisible: true,
+      langs: {
+        'zh-CN': '中文',
+        'en-US': 'English',
+        'es': 'Español',
+        'fr-FR': 'Français',
+      },
+    }
+  },
+
+  computed: {
+    lang() {
+      return this.$route.path.split('/')[1] || 'zh-CN'
+    },
+    displayedLang() {
+      return this.langs[this.lang] || '中文'
+    },
+    langConfig() {
+      return compoLang.filter(config => config.lang === this.lang)[0]['header']
+    },
+    isComponentPage() {
+      return /^component/.test(this.$route.name)
+    },
+  },
+  created() {
+    const xhr = new XMLHttpRequest()
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        const versions = JSON.parse(xhr.responseText)
+        this.versions = Object.keys(versions).reduce((prev, next) => {
+          prev[next] = versions[next]
+          return prev
+        }, {})
+      }
+    }
+    xhr.open('GET', '/versions.json')
+    xhr.send()
+  },
+  methods: {
+    switchVersion(version) {
+      if (version === this.version) return
+      location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `
+    },
+
+    switchLang(targetLang) {
+      if (this.lang === targetLang) return
+      localStorage.setItem('ELEMENT_LANGUAGE', targetLang)
+      this.$router.push(this.$route.path.replace(this.lang, targetLang))
+    },
+
+    handleVerDropdownToggle(visible) {
+      this.verDropdownVisible = visible
+    },
+
+    handleLangDropdownToggle(visible) {
+      this.langDropdownVisible = visible
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+  .headerWrapper {
+    height: 80px;
+  }
+
+  .header {
+    height: 80px;
+    background-color: #fff;
+    color: #fff;
+    top: 0;
+    left: 0;
+    width: 100%;
+    line-height: 80px;
+    z-index: 100;
+    position: relative;
+
+    .container {
+      height: 100%;
+      box-sizing: border-box;
+      border-bottom: 1px solid #DCDFE6;
+    }
+
+    .nav-lang-spe {
+      color: #888;
+    }
+
+    h1 {
+      margin: 0;
+      float: left;
+      font-size: 32px;
+      font-weight: normal;
+
+      a {
+        color: #333;
+        text-decoration: none;
+        display: block;
+      }
+
+      span {
+        font-size: 12px;
+        display: inline-block;
+        width: 34px;
+        height: 18px;
+        border: 1px solid rgba(255, 255, 255, .5);
+        text-align: center;
+        line-height: 18px;
+        vertical-align: middle;
+        margin-left: 10px;
+        border-radius: 3px;
+      }
+    }
+
+    .nav {
+      float: right;
+      height: 100%;
+      line-height: 80px;
+      background: transparent;
+      padding: 0;
+      margin: 0;
+      &::before, &::after {
+        display: table;
+        content: "";
+      }
+      &::after {
+        clear: both;
+      }
+    }
+
+    .nav-gap {
+      position: relative;
+      width: 1px;
+      height: 80px;
+      padding: 0 20px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: calc(50% - 8px);
+        width: 1px;
+        height: 16px;
+        background: #ebebeb;
+      }
+    }
+
+    .nav-logo,
+    .nav-logo-small {
+      vertical-align: sub;
+    }
+
+    .nav-logo-small {
+      display: none;
+    }
+
+    .nav-item {
+      margin: 0;
+      float: left;
+      list-style: none;
+      position: relative;
+      cursor: pointer;
+
+      &.nav-algolia-search {
+        cursor: default;
+      }
+
+      &.lang-item,
+      &:last-child {
+        cursor: default;
+        margin-left: 34px;
+
+        span {
+          opacity: .8;
+        }
+
+        .nav-lang {
+          cursor: pointer;
+          display: inline-block;
+          height: 100%;
+          color: #888;
+
+          &:hover {
+            color: #409EFF;
+          }
+          &.active {
+             font-weight: bold;
+             color: #409EFF;
+           }
+        }
+      }
+
+      a {
+        text-decoration: none;
+        color: #1989FA;
+        opacity: 0.5;
+        display: block;
+        padding: 0 22px;
+
+        &.active,
+        &:hover {
+          opacity: 1;
+        }
+
+        &.active::after {
+          content: '';
+          display: inline-block;
+          position: absolute;
+          bottom: 0;
+          left: calc(50% - 15px);
+          width: 30px;
+          height: 2px;
+          background: #409EFF;
+        }
+      }
+    }
+  }
+
+  .nav-dropdown {
+    margin-bottom: 6px;
+    padding-left: 18px;
+    width: 100%;
+
+    span {
+      display: block;
+      width: 100%;
+      font-size: 16px;
+      color: #888;
+      line-height: 40px;
+      transition: .2s;
+      padding-bottom: 6px;
+      user-select: none;
+
+      &:hover {
+         cursor: pointer;
+       }
+    }
+
+    i {
+      transition: .2s;
+      font-size: 12px;
+      color: #979797;
+      transform: translateY(-2px);
+    }
+
+    .is-active {
+      span, i {
+        color: #409EFF;
+      }
+      i {
+        transform: rotateZ(180deg) translateY(3px);
+      }
+    }
+
+    &:hover {
+      span, i {
+        color: #409EFF;
+      }
+    }
+  }
+
+  .nav-dropdown-list {
+    width: auto;
+  }
+
+  @media (max-width: 850px) {
+    .header {
+      .nav-logo {
+        display: none;
+      }
+      .nav-logo-small {
+        display: inline-block;
+      }
+      .nav-item {
+        margin-left: 6px;
+
+        &.lang-item,
+        &:last-child {
+          margin-left: 10px;
+        }
+
+        a {
+          padding: 0 5px;
+        }
+      }
+      .nav-theme-switch, .nav-algolia-search {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: 700px) {
+    .header {
+      .container {
+        padding: 0 12px;
+      }
+      .nav-item {
+        a {
+          font-size: 12px;
+          vertical-align: top;
+        }
+
+        &.lang-item {
+          height: 100%;
+
+          .nav-lang {
+            display: flex;
+            align-items: center;
+
+            span {
+              padding-bottom: 0;
+            }
+          }
+        }
+      }
+      .nav-dropdown {
+        padding: 0;
+        span {
+          font-size: 12px;
+        }
+      }
+      .nav-gap {
+        padding: 0 8px;
+      }
+      .nav-versions {
+        display: none;
+      }
+    }
+  }
+</style>
--- a/website/components/search.vue
+++ b/website/components/search.vue
@ -0,0 +1,228 @@
+<template>
+  <el-autocomplete
+    v-model="query"
+    size="small"
+    :popper-class="`algolia-search${ isEmpty ? ' is-empty' : '' }`"
+    :fetch-suggestions="querySearch"
+    :placeholder="placeholder"
+    :trigger-on-focus="false"
+    highlight-first-item
+    @select="handleSelect"
+  >
+    <template #default="props">
+      <p v-if="props && props.item.title" class="algolia-search-title">
+        <span v-html="props.item.highlightedCompo"></span>
+        <span class="algolia-search-separator"></span>
+        <span v-html="props.item.title"></span>
+      </p>
+      <p
+        v-if="props && props.item.content"
+        class="algolia-search-content"
+        v-html="props.item.content"
+      ></p>
+      <a
+        v-if="props && props.item.img"
+        class="algolia-search-link"
+        target="_blank"
+        href="https://www.algolia.com/docsearch"
+      >
+        <img
+          class="algolia-search-logo"
+          src="../assets/images/search-by-algolia.svg"
+          alt="algolia-logo"
+        >
+      </a>
+      <p
+        v-if="props && props.item.isEmpty"
+        class="algolia-search-empty"
+      >
+        {{ emptyText }}
+      </p>
+    </template>
+  </el-autocomplete>
+</template>
+
+<script>
+import algoliasearch from 'algoliasearch'
+
+export default {
+  data() {
+    return {
+      index: null,
+      query: '',
+      isEmpty: false,
+      langs: {
+        'zh-CN': {
+          search: '搜索文档',
+          empty: '无匹配结果',
+          index: 'zh',
+        },
+        'en-US': {
+          search: 'Search',
+          empty: 'No results',
+          index: 'en',
+        },
+        'es': {
+          search: 'Buscar',
+          empty: 'No hay datos que coincidan',
+          index: 'es',
+        },
+        'fr-FR': {
+          search: 'Rechercher',
+          empty: 'Aucun résultat',
+          index: 'fr',
+        },
+      },
+    }
+  },
+
+  computed: {
+    lang() {
+      return this.$route.meta.lang
+    },
+
+    placeholder() {
+      return this.lang ? this.langs[this.lang].search : ''
+    },
+
+    emptyText() {
+      return this.lang ? this.langs[this.lang].empty : ''
+    },
+  },
+
+  watch: {
+    lang() {
+      this.initIndex()
+    },
+  },
+
+  mounted() {
+    this.initIndex()
+  },
+
+  methods: {
+    initIndex() {
+      const client = algoliasearch('4C63BTGP6S', '0729c3c7f4dc8db7395ad0b19c0748d2')
+      this.index = client.initIndex(`element-${ this.lang ? this.langs[this.lang].index : 'zh' }`)
+    },
+
+    querySearch(query, cb) {
+      if (!query) return
+      this.index.search({ query, hitsPerPage: 6 }, (err, res) => {
+        if (err) {
+          console.error(err)
+          return
+        }
+        if (res.hits.length > 0) {
+          this.isEmpty = false
+          cb(res.hits.map(hit => {
+            let content = hit._highlightResult.content.value.replace(/\s+/g, ' ')
+            const highlightStart = content.indexOf('<span class="algolia-highlight">')
+            if (highlightStart > -1) {
+              const startEllipsis = highlightStart - 15 > 0
+              content = (startEllipsis ? '...' : '') +
+                  content.slice(Math.max(0, highlightStart - 15), content.length)
+            } else if (content.indexOf('|') > -1) {
+              content = ''
+            }
+            return {
+              anchor: hit.anchor,
+              component: hit.component,
+              highlightedCompo: hit._highlightResult.component.value,
+              title: hit._highlightResult.title.value,
+              content,
+            }
+          }).concat({ img: true }))
+        } else {
+          this.isEmpty = true
+          cb([{ isEmpty: true }])
+        }
+      })
+    },
+
+    handleSelect(val) {
+      if (val.img || val.isEmpty) return
+      const component = val.component || ''
+      const anchor = val.anchor
+      this.$router.push(`/${ this.lang }/component/${ component }${ anchor ? `#${ anchor }` : '' }`)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+  .algolia-search {
+    width: 450px !important;
+
+    &.is-empty {
+      .el-autocomplete-suggestion__list {
+        padding-bottom: 0;
+      }
+    }
+
+    .el-autocomplete-suggestion__list {
+      position: static !important;
+      padding-bottom: 28px;
+    }
+
+    li {
+      border-bottom: solid 1px #ebebeb;
+
+      &:last-child {
+         border-bottom: none;
+       }
+    }
+
+    .algolia-highlight {
+      color: #409EFF;
+      font-weight: bold;
+    }
+
+    .algolia-search-title {
+      font-size: 14px;
+      margin: 6px 0;
+      line-height: 1.8;
+    }
+
+    .algolia-search-separator {
+      padding: 0 6px;
+    }
+
+    .algolia-search-content {
+      font-size: 12px;
+      margin: 6px 0;
+      line-height: 2.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .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;
+
+      &:hover {
+         background-color: #e4e7ed;
+       }
+
+      img {
+        display: inline-block;
+        height: 17px;
+        margin-top: 10px;
+      }
+    }
+
+    .algolia-search-empty {
+      margin: 5px 0;
+      text-align: center;
+      color: #999;
+    }
+  }
+</style>
--- a/website/components/side-nav.vue
+++ b/website/components/side-nav.vue
@ -0,0 +1,297 @@
+<template>
+  <div
+    class="side-nav"
+    :class="{ 'is-fade': isFade }"
+    :style="navStyle"
+    @mouseenter="isFade = false"
+  >
+    <ul>
+      <li class="nav-item sponsors">
+        <a>{{ lang === 'zh-CN' ? '赞助商' : 'Sponsors' }}</a>
+        <ul class="pure-menu-list sub-nav">
+          <li v-show="lang !== 'zh-CN'" class="nav-item">
+            <a href="https://tipe.io/?ref=element" target="_blank">
+              <img src="~examples/assets/images/tipe.svg" alt="tipe.io">
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
+              <img src="~examples/assets/images/duohui.svg" alt="duohui">
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li
+        v-for="(item, keyy) in data"
+        :key="keyy"
+        class="nav-item"
+      >
+        <a v-if="!item.path && !item.href" @click="expandMenu">{{ item.name }}</a>
+        <a v-if="item.href" :href="item.href" target="_blank">{{ item.name }}</a>
+        <router-link
+          v-if="item.path"
+          active-class="active"
+          :to="base + item.path"
+          exact
+          v-text="item.title || item.name"
+        />
+        <ul v-if="item.children" class="pure-menu-list sub-nav">
+          <li
+            v-for="(navItem, key) in item.children"
+            :key="key"
+            class="nav-item"
+          >
+            <router-link
+              class=""
+              active-class="active"
+              :to="base + navItem.path"
+              exact
+              v-text="navItem.title || navItem.name"
+            />
+          </li>
+        </ul>
+        <template v-if="item.groups">
+          <div
+            v-for="(group, key) in item.groups"
+            :key="key"
+            class="nav-group"
+          >
+            <div class="nav-group__title" @click="expandMenu">{{ group.groupName }}</div>
+            <ul class="pure-menu-list">
+              <li
+                v-for="(navItem, keey) in group.list"
+                v-show="!navItem.disabled"
+                :key="keey"
+                class="nav-item"
+              >
+                <router-link
+                  active-class="active"
+                  :to="base + navItem.path"
+                  exact
+                  v-text="navItem.title"
+                />
+              </li>
+            </ul>
+          </div>
+        </template>
+      </li>
+    </ul>
+    <!--<div id="code-sponsor-widget"></div>-->
+  </div>
+</template>
+<script>
+import bus from '../bus'
+import compoLang from '../i18n/component.json'
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => ([]),
+    },
+    base: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      highlights: [],
+      navState: [],
+      isSmallScreen: false,
+      isFade: false,
+    }
+  },
+  computed: {
+    navStyle() {
+      const style = {}
+      if (this.isSmallScreen) {
+        style.paddingBottom = '60px'
+      }
+      style.opacity = this.isFade ? '0.5' : '1'
+      return style
+    },
+    lang() {
+      return this.$route.meta.lang
+    },
+    langConfig() {
+      return compoLang.filter(config => config.lang === this.lang)[0]['nav']
+    },
+  },
+  watch: {
+    '$route.path'() {
+      this.handlePathChange()
+    },
+    isFade(val) {
+      bus.$emit('nav-fade', val)
+    },
+  },
+  created() {
+    bus.$on('fade-nav', () => {
+      this.isFade = true
+    })
+  },
+  mounted() {
+    this.handleResize()
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.isSmallScreen = document.documentElement.clientWidth < 768
+      this.handlePathChange()
+    },
+    handlePathChange() {
+      if (!this.isSmallScreen) {
+        this.expandAllMenu()
+        return
+      }
+      this.$nextTick(() => {
+        this.hideAllMenu()
+        let activeAnchor = this.$el.querySelector('a.active')
+        let ul = activeAnchor.parentNode
+        while (ul.tagName !== 'UL') {
+          ul = ul.parentNode
+        }
+        ul.style.height = 'auto'
+      })
+    },
+    hideAllMenu() {
+      [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+        ul.style.height = '0'
+      })
+    },
+    expandAllMenu() {
+      [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+        ul.style.height = 'auto'
+      })
+    },
+    expandMenu(event) {
+      if (!this.isSmallScreen) return
+      let target = event.currentTarget
+      if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return
+      this.hideAllMenu()
+      event.currentTarget.nextElementSibling.style.height = 'auto'
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+  .side-nav {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 30px;
+    transition: opacity .3s;
+    &.is-fade {
+      transition: opacity 3s;
+    }
+
+    li {
+      list-style: none;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+
+    > ul > .nav-item > a {
+      margin-top: 15px;
+    }
+
+    > ul > .nav-item:nth-child(-n + 4) > a {
+      margin-top: 0;
+    }
+
+    .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: bold;
+
+        &.active {
+          color: #409EFF;
+        }
+      }
+
+      .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: normal;
+
+          &:hover,
+          &.active {
+            color: #409EFF;
+          }
+        }
+      }
+
+      &.sponsors {
+        & > .sub-nav {
+          margin-top: -10px;
+        }
+
+        & > a {
+          color: #777;
+          font-weight: 300;
+          font-size: 14px;
+        }
+
+        .nav-item {
+          display: inline-block;
+
+          a {
+            height: auto;
+            display: inline-block;
+            vertical-align: middle;
+            margin: 8px 12px 12px 0;
+
+            img {
+              width: 42px;
+            }
+          }
+
+          &:first-child a img {
+            width: 36px;
+          }
+        }
+      }
+    }
+
+    .nav-group__title {
+      font-size: 12px;
+      color: #999;
+      line-height: 26px;
+      margin-top: 15px;
+    }
+
+    #code-sponsor-widget {
+      margin: 0 0 0 -20px;
+    }
+  }
+  .nav-dropdown-list {
+    width: 120px;
+    margin-top: -8px;
+    li {
+      font-size: 14px;
+    }
+  }
+</style>
--- a/website/components/theme-picker.vue
+++ b/website/components/theme-picker.vue
@ -0,0 +1,156 @@
+<template>
+  <el-color-picker
+    v-model="theme"
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
+  />
+</template>
+<script>
+import Element from 'main/index.js'
+const { version } = Element
+
+const ORIGINAL_THEME = '#409EFF'
+export default {
+  data() {
+    return {
+      chalk: '', // content of theme-chalk css
+      docs: '', // content of docs css
+      theme: ORIGINAL_THEME,
+    }
+  },
+
+  watch: {
+    theme(val, oldVal) {
+      if (typeof val !== 'string') return
+      const themeCluster = this.getThemeCluster(val.replace('#', ''))
+      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
+      const getHandler = (variable, id) => {
+        return () => {
+          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
+          let newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
+
+          let styleTag = document.getElementById(id)
+          if (!styleTag) {
+            styleTag = document.createElement('style')
+            styleTag.setAttribute('id', id)
+            document.head.appendChild(styleTag)
+          }
+          styleTag.innerText = newStyle
+        }
+      }
+
+      const chalkHandler = getHandler('chalk', 'chalk-style')
+      const docsHandler = getHandler('docs', 'docs-style')
+
+      if (!this.chalk) {
+        const url = `https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`
+        this.getCSSString(url, chalkHandler, 'chalk')
+      } else {
+        chalkHandler()
+      }
+
+      if (!this.docs) {
+        const links = [].filter.call(document.querySelectorAll('link'), link => {
+          return /docs\..+\.css/.test(link.href || '')
+        })
+        links[0] && this.getCSSString(links[0].href, docsHandler, 'docs')
+      } else {
+        docsHandler()
+      }
+
+      const styles = [].slice.call(document.querySelectorAll('style'))
+        .filter(style => {
+          const text = style.innerText
+          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
+        })
+      styles.forEach(style => {
+        const { innerText } = style
+        if (typeof innerText !== 'string') return
+        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
+      })
+    },
+  },
+
+  methods: {
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
+      })
+      return newStyle
+    },
+
+    getCSSString(url, callback, variable) {
+      const xhr = new XMLHttpRequest()
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
+          callback()
+        }
+      }
+      xhr.open('GET', url)
+      xhr.send()
+    },
+
+    getThemeCluster(theme) {
+      const tintColor = (color, tint) => {
+        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 }`
+        }
+      }
+
+      const shadeColor = (color, shade) => {
+        let red = parseInt(color.slice(0, 2), 16)
+        let green = parseInt(color.slice(2, 4), 16)
+        let blue = parseInt(color.slice(4, 6), 16)
+
+        red = Math.round((1 - shade) * red)
+        green = Math.round((1 - shade) * green)
+        blue = Math.round((1 - shade) * blue)
+
+        red = red.toString(16)
+        green = green.toString(16)
+        blue = blue.toString(16)
+
+        return `#${ red }${ green }${ blue }`
+      }
+
+      const clusters = [theme]
+      for (let i = 0; i <= 9; i++) {
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
+      }
+      clusters.push(shadeColor(theme, 0.1))
+      return clusters
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+  .theme-picker {
+    height: 80px;
+    display: inline-block;
+    // @utils-vertical-center;
+  }
+
+  .theme-picker .el-color-picker__trigger {
+    vertical-align: middle;
+  }
+
+  .theme-picker-dropdown .el-color-dropdown__link-btn {
+    display: none;
+  }
+</style>
--- a/website/demo-styles/alert.scss
+++ b/website/demo-styles/alert.scss
@ -0,0 +1,7 @@
+.demo-block.demo-alert .el-alert {
+  margin: 20px 0 0;
+}
+
+.demo-block.demo-alert .el-alert:first-child {
+  margin: 0;
+}
--- a/website/demo-styles/avatar.scss
+++ b/website/demo-styles/avatar.scss
@ -0,0 +1,62 @@
+.demo-avatar {
+
+  &.demo-basic {
+    text-align: center;
+
+    .demo-basic--circle, .demo-basic--square {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .block {
+        flex: 1;
+      }
+
+      .block:not(:last-child) {
+        border-right: 1px solid rgba(224, 230, 237, 0.5);
+      }
+    }
+
+  }
+
+  .sub-title {
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #8492a6;
+  }
+
+  .el-col:not(:last-child) {
+    border-right: 1px solid rgba(224,230,237,.5);
+  }
+
+  .demo-type {
+    display: flex;
+
+    >div {
+      flex: 1;
+      text-align: center;
+    }
+
+    >div:not(:last-child) {
+      border-right: 1px solid rgba(224,230,237,.5);
+    }
+  }
+
+  .demo-fit {
+    display: flex;
+    text-align: center;
+    justify-content: space-between;
+
+    .block {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 0;
+    }
+
+    .title {
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: #8492a6;
+    }
+  }
+}
--- a/website/demo-styles/badge.scss
+++ b/website/demo-styles/badge.scss
@ -0,0 +1,19 @@
+.demo-badge.demo-block .el-dropdown {
+  vertical-align: middle;
+}
+.demo-badge.demo-block {
+  .share-button {
+    width: 36px;
+    padding: 10px;
+  }
+
+  .mark {
+    margin-top: 8px;
+    line-height: 1;
+    float: right;
+  }
+
+  .item {
+    margin-right: 40px;
+  }
+}
--- a/website/demo-styles/border.scss
+++ b/website/demo-styles/border.scss
@ -0,0 +1,44 @@
+.demo-border .text {
+  width: 15%;
+}
+.demo-border .line {
+  width: 70%;
+}
+.demo-border .line div {
+  width: 100%;
+  height: 0;
+  border-top: 1px solid #eee;
+}
+.demo-border .line .dashed {
+  border-top: 2px dashed #eee;
+}
+.demo-shadow {
+  height: 100px;
+  width: 50%;
+  border: 1px solid #eee;
+}
+.demo-shadow-text {
+  line-height: 50px;
+  color: #666;
+  font-size: 14px;
+}
+.demo-radius .title {
+  color: #666;
+  font-size: 18px;
+  margin: 10px 0;
+}
+.demo-radius .value {
+  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;
+}
+.demo-radius .radius-30 {
+  border-radius: 30px;
+}
--- a/website/demo-styles/button.scss
+++ b/website/demo-styles/button.scss
@ -0,0 +1,21 @@
+.demo-block.demo-button {
+  .el-row {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-button + .el-button {
+    margin-left: 10px;
+  }
+  .el-button-group {
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+
+    & + .el-button-group {
+      margin-left: 10px;
+    }
+  }
+}
--- a/website/demo-styles/calendar.scss
+++ b/website/demo-styles/calendar.scss
@ -0,0 +1,5 @@
+.demo-calendar.demo-block {
+  .is-selected {
+    color: #1989FA;
+  } 
+}
--- a/website/demo-styles/card.scss
+++ b/website/demo-styles/card.scss
@ -0,0 +1,33 @@
+.demo-block.demo-card {
+  .text {
+    font-size: 14px;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+}
--- a/website/demo-styles/carousel.scss
+++ b/website/demo-styles/carousel.scss
@ -0,0 +1,46 @@
+.demo-carousel .block {
+  padding: 30px;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 49%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-carousel .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.demo-carousel .el-carousel__container {
+  text-align: center;
+}
+
+.demo-carousel .el-carousel__item {
+  h3 {
+    color: #fff;
+    font-size: 18px;
+    line-height: 300px;
+    margin: 0;
+    &.small {
+      font-size: 14px;
+      line-height: 150px;
+    }
+    &.medium {
+      font-size: 14px;
+      line-height: 200px;
+    }
+  }
+  &:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  &:nth-child(2n + 1) {
+    background-color: #d3dce6;
+  }
+}
+
--- a/website/demo-styles/cascader.scss
+++ b/website/demo-styles/cascader.scss
@ -0,0 +1,30 @@
+.demo-cascader {
+  .el-cascader {
+    width: 222px;
+  }
+}
+.demo-cascader-size {
+  .el-cascader {
+    vertical-align: top;
+    margin-right: 15px;
+  }
+}
+.demo-cascader .source > div {
+  display: flex;
+}
+.demo-cascader .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  width: 50%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+.demo-cascader .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
--- a/website/demo-styles/collapse.scss
+++ b/website/demo-styles/collapse.scss
@ -0,0 +1,7 @@
+.demo-collapse {
+  .el-collapse-item__header {
+    .header-icon {
+      margin-left: 5px;
+    }
+  }
+}
--- a/website/demo-styles/color-picker.scss
+++ b/website/demo-styles/color-picker.scss
@ -0,0 +1,20 @@
+.demo-color-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+.demo-color-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.demo-color-picker .el-color-picker + .el-color-picker {
+  margin-left: 20px;
+}
--- a/website/demo-styles/color.scss
+++ b/website/demo-styles/color.scss
@ -0,0 +1,72 @@
+.demo-color-box {
+  position: relative;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 5px 0;
+  height: 114px;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 14px;
+
+  & .value {
+    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;
+}
+.demo-color-box-group {
+  .demo-color-box {
+    border-radius: 0;
+    margin: 0;
+  }
+  .demo-color-box:first-child {
+    border-radius: 4px 4px 0 0;
+  }
+  .demo-color-box:last-child {
+    border-radius: 0 0 4px 4px;
+  }
+}
+.bg-color-sub {
+  width: 100%;
+  height: 40px;
+  left: 0;
+  bottom: 0;
+  position: absolute;
+  border-radius: 0 0 4px 4px;
+}
+.bg-blue-sub-item {
+  width: 11.1111111%;
+  height: 100%;
+  display: inline-block;
+}
+.bg-blue-sub-item:first-child {
+  border-radius: 0 0 0 4px;
+}
+.bg-success-sub-item {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.bg-success-sub-item:first-child {
+  border-radius: 0 0 0 4px;
+}
+.bg-success-sub-item:last-child {
+  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: center center;
+  background-size: 100% 100%, auto;
+}
+.demo-color-box-lite {
+  color: #303133;
+}
--- a/website/demo-styles/container.scss
+++ b/website/demo-styles/container.scss
@ -0,0 +1,43 @@
+.el-header,
+.el-footer {
+  background-color: #b3c0d1;
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+
+#chang-jian-ye-mian-bu-ju + .demo-container {
+  .el-header,
+  .el-footer {
+    text-align: center;
+  }
+
+  .el-aside {
+    background-color: #d3dce6;
+    text-align: center;
+    line-height: 200px;
+  }
+
+  .el-main {
+    background-color: #e9eef3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+
+  & > .source > .el-container {
+    margin-bottom: 40px;
+
+    &:nth-child(5) .el-aside,
+    &:nth-child(6) .el-aside {
+      line-height: 260px;
+    }
+
+    &:nth-child(7) .el-aside {
+      line-height: 320px;
+    }
+  }
+}
--- a/website/demo-styles/date-picker.scss
+++ b/website/demo-styles/date-picker.scss
@ -0,0 +1,36 @@
+.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: solid 1px #eff2f6;
+  flex: 1;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-date-picker .container {
+  flex: 1;
+  border-right: solid 1px #eff2f6;
+  .block {
+    border-right: none;
+    &:last-child {
+      border-top: solid 1px #eff2f6;
+    }
+  }
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
--- a/website/demo-styles/datetime-picker.scss
+++ b/website/demo-styles/datetime-picker.scss
@ -0,0 +1,21 @@
+.demo-block.demo-datetime-picker .source > div {
+  padding: 0;
+  display: flex;
+}
+
+.demo-datetime-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  flex: 1;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-datetime-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
--- a/website/demo-styles/dialog.scss
+++ b/website/demo-styles/dialog.scss
@ -0,0 +1,20 @@
+.demo-block.demo-dialog {
+  .dialog-footer button:first-child {
+    margin-right: 10px;
+  }
+  .full-image {
+    width: 100%;
+  }
+  .el-dialog__wrapper {
+    margin: 0;
+  }
+  .el-select {
+    width: 300px;
+  }
+  .el-input {
+    width: 300px;
+  }
+  .el-button--text {
+    margin-right: 15px;
+  }
+}
--- a/website/demo-styles/divider.scss
+++ b/website/demo-styles/divider.scss
@ -0,0 +1,9 @@
+.demo-divider-container-1 {
+  display: inline-block;
+  width: 33%;
+}
+
+.demo-divider-container-2 {
+  display: inline-block;
+  width: 50%;
+}
--- a/website/demo-styles/drawer.scss
+++ b/website/demo-styles/drawer.scss
@ -0,0 +1,21 @@
+.demo-drawer {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    form {
+      flex: 1;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    button {
+      flex: 1;
+    }
+  }
+}
+
+.el-drawer__body {
+  padding: 20px;
+}
--- a/website/demo-styles/dropdown.scss
+++ b/website/demo-styles/dropdown.scss
@ -0,0 +1,37 @@
+.demo-block {
+  .el-dropdown {
+    vertical-align: top;
+
+    & + .el-dropdown {
+      margin-left: 15px;
+    }
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409eff;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+}
+
+.block-col-2 {
+  margin: -24px;
+
+  .el-col {
+    padding: 30px 0;
+    text-align: center;
+    border-right: 1px solid #eff2f6;
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+}
+
+.demo-dropdown .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
--- a/website/demo-styles/form.scss
+++ b/website/demo-styles/form.scss
@ -0,0 +1,73 @@
+.demo-form {
+  .el-select .el-input {
+    width: 380px;
+  }
+  .el-form {
+    width: 460px;
+  }
+
+  .line {
+    text-align: center;
+  }
+
+  .el-checkbox-group {
+    width: 320px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &:after,
+    &:before {
+      content: " ";
+      display: table;
+    }
+    &:after {
+      clear: both;
+      visibility: hidden;
+      font-size: 0;
+      height: 0;
+    }
+
+    .el-checkbox {
+      float: left;
+      width: 160px;
+      padding-right: 20px;
+      margin: 0;
+      padding: 0;
+
+      + .el-checkbox {
+        margin-left: 0;
+      }
+    }
+  }
+  .demo-form-normal {
+    width: 460px;
+  }
+  .demo-form-inline {
+    width: auto;
+
+    .el-input {
+      width: 150px;
+    }
+    > * {
+      margin-right: 10px;
+    }
+  }
+  .demo-ruleForm {
+    width: 460px;
+
+    .el-select .el-input {
+      width: 360px;
+    }
+  }
+  .demo-dynamic {
+    .el-input {
+      margin-right: 10px;
+      width: 270px;
+      vertical-align: top;
+    }
+  }
+  .fr {
+    float: right;
+  }
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 240"><defs><style>.cls-1{fill:none;}.cls-2{fill:#eff5fd;}.cls-3{fill:#fff;}.cls-4{fill:#26a1ff;}.cls-5{fill:snow;}.cls-6{fill:#fdaca9;}.cls-7{fill:#fd9da0;}.cls-8{fill:#fed5d0;}.cls-9{fill:#ffe8e6;}</style></defs><title>资源 104</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" width="320" height="240"/><circle class="cls-2" cx="160" cy="120" r="120"/><path class="cls-3" d="M160,55H105.64A20.64,20.64,0,0,0,85,75.64V200a5,5,0,0,0,5,5h70Z"/><rect class="cls-4" x="95" y="145" width="130" height="40" rx="5"/><path class="cls-5" d="M230,55H160V205h70a5,5,0,0,0,5-5V60A5,5,0,0,0,230,55Z"/><path class="cls-6" d="M220,145H160v40h60a5,5,0,0,0,5-5V150A5,5,0,0,0,220,145Z"/><path class="cls-6" d="M160,99.78a2.5,2.5,0,0,1,0-5c48.71,0,62.17-28.57,62.72-29.79a2.5,2.5,0,1,1,4.56,2C226.69,68.36,212.13,99.78,160,99.78Z"/><path class="cls-2" d="M124.26,171.58V154.4h6.44a7.91,7.91,0,0,1,3.16.52,4,4,0,0,1,1.86,1.6,4.26,4.26,0,0,1,.68,2.27,3.89,3.89,0,0,1-.6,2.08,4.36,4.36,0,0,1-1.8,1.57,4.45,4.45,0,0,1,2.39,1.56,4.15,4.15,0,0,1,.84,2.6,5,5,0,0,1-.51,2.24,4.32,4.32,0,0,1-1.26,1.6,5.18,5.18,0,0,1-1.88.85,11.48,11.48,0,0,1-2.77.29Zm2.27-10h3.72a8.34,8.34,0,0,0,2.16-.2,2.39,2.39,0,0,0,1.31-.86,2.49,2.49,0,0,0,.44-1.5,2.76,2.76,0,0,0-.41-1.5,2,2,0,0,0-1.17-.89,9.84,9.84,0,0,0-2.62-.24h-3.43Zm0,7.93h4.28a10.68,10.68,0,0,0,1.55-.08,3.81,3.81,0,0,0,1.31-.47,2.44,2.44,0,0,0,.86-1,2.92,2.92,0,0,0,.34-1.44,2.84,2.84,0,0,0-.49-1.67,2.56,2.56,0,0,0-1.36-1,8.51,8.51,0,0,0-2.52-.29h-4Z"/><path class="cls-2" d="M148.25,171.58v-1.83a4.55,4.55,0,0,1-3.95,2.11,5.06,5.06,0,0,1-2.06-.42,3.42,3.42,0,0,1-1.42-1.06,4.06,4.06,0,0,1-.65-1.57,11.22,11.22,0,0,1-.13-2v-7.71h2.11V166a11.86,11.86,0,0,0,.13,2.23,2.18,2.18,0,0,0,.84,1.31,2.68,2.68,0,0,0,1.6.47,3.52,3.52,0,0,0,1.78-.48,2.76,2.76,0,0,0,1.18-1.33,6.68,6.68,0,0,0,.34-2.43v-6.67h2.11v12.45Z"/><path class="cls-2" d="M158,169.69l.31,1.86a7.59,7.59,0,0,1-1.6.19,3.64,3.64,0,0,1-1.78-.36,2,2,0,0,1-.89-1,7.55,7.55,0,0,1-.26-2.49v-7.16h-1.54v-1.64h1.54v-3.08l2.1-1.27v4.35H158v1.64h-2.12v7.28a3.83,3.83,0,0,0,.11,1.16.92.92,0,0,0,.37.41,1.38,1.38,0,0,0,.72.15A6,6,0,0,0,158,169.69Z"/><path class="cls-5" d="M167.69,169.69l.3,1.86a7.43,7.43,0,0,1-1.59.19,3.61,3.61,0,0,1-1.78-.36,2,2,0,0,1-.89-1,7.28,7.28,0,0,1-.26-2.49v-7.16h-1.55v-1.64h1.55v-3.08l2.1-1.27v4.35h2.12v1.64h-2.12v7.28a3.51,3.51,0,0,0,.11,1.16.84.84,0,0,0,.36.41,1.43,1.43,0,0,0,.72.15A6.1,6.1,0,0,0,167.69,169.69Z"/><path class="cls-5" d="M169,165.35a6.43,6.43,0,0,1,1.93-5.12,5.79,5.79,0,0,1,3.91-1.38,5.6,5.6,0,0,1,4.2,1.68,6.42,6.42,0,0,1,1.62,4.65,8.25,8.25,0,0,1-.72,3.78,5.13,5.13,0,0,1-2.09,2.14,6.2,6.2,0,0,1-3,.76,5.57,5.57,0,0,1-4.22-1.68A6.65,6.65,0,0,1,169,165.35Zm2.17,0a5.26,5.26,0,0,0,1.05,3.58,3.47,3.47,0,0,0,5.23,0,5.41,5.41,0,0,0,1.05-3.65,5.13,5.13,0,0,0-1.05-3.49,3.48,3.48,0,0,0-5.23,0A5.25,5.25,0,0,0,171.13,165.35Z"/><path class="cls-5" d="M183.1,171.58V159.13H185v1.77a4.46,4.46,0,0,1,4-2.05,5.2,5.2,0,0,1,2.07.41,3.25,3.25,0,0,1,1.41,1.06,4,4,0,0,1,.65,1.55,11.89,11.89,0,0,1,.12,2.06v7.65H191.1V164a5.85,5.85,0,0,0-.24-1.93,2,2,0,0,0-.88-1,2.82,2.82,0,0,0-1.47-.38,3.39,3.39,0,0,0-2.32.85c-.66.57-1,1.66-1,3.25v6.8Z"/><circle class="cls-4" cx="71.9" cy="76.81" r="30"/><path class="cls-3" d="M62.69,68.35h4.89v2.5H59.25V62.53h2.5v3.23a15,15,0,0,1,25.15,11H84.4A12.5,12.5,0,0,0,63.06,68C62.93,68.09,62.81,68.22,62.69,68.35Zm19.36,19.5a15,15,0,0,1-25.15-11h2.5a12.51,12.51,0,0,0,21.34,8.85l.37-.39H76.22v-2.5h8.33v8.32h-2.5Z"/><path class="cls-7" d="M46.94,47.79a2.92,2.92,0,0,1-2.25-1l-7-8.38a2.93,2.93,0,1,1,4.48-3.77L49.17,43a2.92,2.92,0,0,1-.35,4.12A2.88,2.88,0,0,1,46.94,47.79Z"/><path class="cls-8" d="M37.06,59.93h-.25L25.89,59a2.93,2.93,0,0,1,.51-5.83l10.91,1a2.93,2.93,0,0,1-.25,5.84Z"/><path class="cls-8" d="M60.58,40.14l-.25,0A2.93,2.93,0,0,1,57.66,37l.94-10.91a2.93,2.93,0,1,1,5.83.5l-.94,10.91A2.93,2.93,0,0,1,60.58,40.14Z"/><rect class="cls-2" x="99" y="128.31" width="15" height="6.27"/><rect class="cls-2" x="123.56" y="112.59" width="15" height="22"/><rect class="cls-9" x="160" y="106.81" width="7.5" height="27.78"/><rect class="cls-2" x="152.5" y="106.81" width="7.5" height="27.78"/><rect class="cls-9" x="206" y="91.81" width="15" height="42.78"/><rect class="cls-9" x="179.25" y="103.64" width="15" height="30.94"/><path class="cls-4" d="M95,130.81a2.62,2.62,0,0,1-1-.21,2.5,2.5,0,0,1-1.26-3.31C93.31,126,107.88,94.78,160,94.78a2.5,2.5,0,0,1,0,5c-48.91,0-62.59,29.26-62.72,29.56A2.5,2.5,0,0,1,95,130.81Z"/><path class="cls-6" d="M226,63.73a2.5,2.5,0,0,0-3.3,1.26c-.55,1.22-14,29.79-62.72,29.79h0v5h0c52.13,0,66.69-31.42,67.28-32.75A2.5,2.5,0,0,0,226,63.73Z"/></g></g></svg>