update landing page for 2.0

9e6f1ada · Leopoldthecoder · 杨奕 · 88636b94 · 9e6f1ada · 88636b94
Commit 9e6f1ada authored Oct 23, 2017 by Leopoldthecoder Committed by 杨奕 Oct 23, 2017
39 changed files
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -39,7 +39,7 @@
 #### Breaking changes
 - Switch
  - Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not
-able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This changes affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
+able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
 - Table
  - `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean

--- a/examples/assets/images/banner-bg.svg
+++ b/examples/assets/images/banner-bg.svg
--- a/examples/assets/images/cloud-1.png
+++ b/examples/assets/images/cloud-1.png
--- a/examples/assets/images/cloud-2.png
+++ b/examples/assets/images/cloud-2.png
--- a/examples/assets/images/compo-1.png
+++ b/examples/assets/images/compo-1.png
--- a/examples/assets/images/compo-2.png
+++ b/examples/assets/images/compo-2.png
--- a/examples/assets/images/compo-3.png
+++ b/examples/assets/images/compo-3.png
--- a/examples/assets/images/element-logo-small-white.svg
+++ b/examples/assets/images/element-logo-small-white.svg
-<?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="#fff">
-            <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>
\ No newline at end of file
--- a/examples/assets/images/element-logo-white.svg
+++ b/examples/assets/images/element-logo-white.svg
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="146px" height="38px" viewBox="0 0 146 38" 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="#fff">
-            <path d="M212.135441,45.1578077 C212.135441,45.1578077 212.420237,45.1505105 212.960937,45.1578077 C213.501637,45.1651049 213.648851,45.5708556 213.648851,45.5708556 C213.648851,45.5708556 214.733828,47.5665657 215.024677,48.0491434 C215.283608,48.4787133 214.973221,48.4708654 214.901816,48.4638436 C214.902504,48.4628798 214.887095,48.4621914 214.887095,48.4621914 C214.887095,48.4621914 214.893011,48.4630175 214.901816,48.4638436 C214.898652,48.4682495 214.594731,48.4783003 211.447528,48.4621914 C207.058641,47.8665762 206.9073,43.9186638 206.9073,43.9186638 L206.9073,36.8968483 L204.430812,36.8968483 L204.430812,34.2808779 C204.430812,33.9242798 204.84356,33.8678299 204.84356,33.8678299 L206.9073,33.8678299 L206.9073,31.2518594 C206.9073,30.8251809 207.320048,30.7011288 207.320048,30.7011288 C207.320048,30.7011288 208.772646,30.2858779 209.617816,30.0441072 C209.964662,29.9449756 210.071701,30.1503982 210.071701,30.1503982 C210.071701,30.1503982 210.209284,30.0774264 210.209284,30.3927196 L210.209284,34.0055125 L213.786433,34.0055125 C214.134655,34.0055125 214.199181,34.4185605 214.199181,34.4185605 L214.199181,37.034531 L210.209284,37.034531 L210.209284,43.0925678 C210.209284,44.8533913 212.135441,45.1578077 212.135441,45.1578077 L212.135441,45.1578077 Z M201.541576,48.1868261 L199.340253,48.1868261 C198.908381,48.1868261 198.927505,47.6360955 198.927505,47.6360955 L198.927505,37.4475789 C198.927505,36.8286954 198.102009,36.621483 198.102009,36.621483 L193.561781,36.621483 C192.884462,36.621483 192.873868,37.4475789 192.873868,37.4475789 L192.873868,47.7737781 C192.873868,48.1787028 192.46112,48.1868261 192.46112,48.1868261 L190.259797,48.1868261 C189.775782,48.1868261 189.847049,47.6360955 189.847049,47.6360955 L189.847049,34.8316085 C189.847049,33.803119 191.085293,33.5924646 191.085293,33.5924646 L200.71608,33.5924646 C201.677783,33.5924646 201.954324,34.8316085 201.954324,34.8316085 L201.954324,47.4984128 C201.954324,48.2186308 201.541576,48.1868261 201.541576,48.1868261 L201.541576,48.1868261 Z M185.857152,42.4041546 L177.327027,42.4041546 L177.327027,44.4693944 C177.327027,45.2135691 178.290106,45.433173 178.290106,45.433173 L185.169239,45.433173 C185.658758,45.433173 185.994735,45.846221 185.994735,45.846221 C185.994735,45.846221 186.595008,47.0951403 186.820231,47.6360955 C187.045454,48.1770506 186.407483,48.1868261 186.407483,48.1868261 L176.088783,48.1868261 C174.846136,48.1868261 174.575374,46.6723169 174.575374,46.6723169 L174.575374,34.9692911 C174.575374,34.2962983 175.538452,34.0055125 175.538452,34.0055125 L185.857152,34.0055125 C186.894113,34.0055125 187.095396,35.2446564 187.095396,35.2446564 L187.095396,41.1650107 C187.095396,42.1638983 185.857152,42.4041546 185.857152,42.4041546 L185.857152,42.4041546 Z M184.343743,37.4475789 C184.343743,37.4475789 184.257066,36.7591657 183.65583,36.7591657 L178.01494,36.7591657 C178.01494,36.7591657 177.327027,36.9437981 177.327027,37.4475789 L177.327027,38.9620882 C177.327027,38.9620882 177.346839,39.6505014 178.01494,39.6505014 L183.65583,39.6505014 C183.65583,39.6505014 184.343743,39.4804634 184.343743,38.8244055 L184.343743,37.4475789 L184.343743,37.4475789 Z M171.410972,48.1868261 L169.20965,48.1868261 C168.919213,48.1868261 168.796902,47.7737781 168.796902,47.7737781 L168.796902,37.4475789 C168.796902,36.8072169 167.971406,36.621483 167.971406,36.621483 L165.907666,36.621483 C165.331882,36.621483 165.219752,37.4475789 165.219752,37.4475789 L165.219752,47.7737781 C165.219752,48.1163326 164.807004,48.1868261 164.807004,48.1868261 L162.605682,48.1868261 C162.29956,48.1868261 162.192934,47.7737781 162.192934,47.7737781 L162.192934,37.4475789 C162.192934,36.7928979 161.367438,36.621483 161.367438,36.621483 L159.303698,36.621483 C158.673982,36.621483 158.615784,37.4475789 158.615784,37.4475789 L158.615784,47.7737781 C158.615784,48.2157395 158.203036,48.1868261 158.203036,48.1868261 L156.001714,48.1868261 C155.589378,48.1868261 155.588966,47.7737781 155.588966,47.7737781 L155.588966,34.6939258 C155.588966,33.9362582 156.689627,33.5924646 156.689627,33.5924646 L170.447894,33.5924646 C171.55227,33.5924646 171.82372,34.9692911 171.82372,34.9692911 L171.82372,47.7737781 C171.82372,48.249334 171.410972,48.1868261 171.410972,48.1868261 L171.410972,48.1868261 Z M151.461486,42.4041546 L142.93136,42.4041546 L142.93136,44.4693944 C142.93136,45.2135691 143.894439,45.433173 143.894439,45.433173 L150.773572,45.433173 C151.263092,45.433173 151.599068,45.846221 151.599068,45.846221 C151.599068,45.846221 152.199204,47.0951403 152.424564,47.6360955 C152.649787,48.1770506 152.011816,48.1868261 152.011816,48.1868261 L141.693117,48.1868261 C140.45047,48.1868261 140.179707,46.6723169 140.179707,46.6723169 L140.179707,34.9692911 C140.179707,34.2962983 141.142786,34.0055125 141.142786,34.0055125 L151.461486,34.0055125 C152.498446,34.0055125 152.69973,35.2446564 152.69973,35.2446564 L152.69973,41.1650107 C152.69973,42.1638983 151.461486,42.4041546 151.461486,42.4041546 L151.461486,42.4041546 Z M149.948076,37.4475789 C149.948076,37.4475789 149.861399,36.7591657 149.260163,36.7591657 L143.619274,36.7591657 C143.619274,36.7591657 142.93136,36.9437981 142.93136,37.4475789 L142.93136,38.9620882 C142.93136,38.9620882 142.951172,39.6505014 143.619274,39.6505014 L149.260163,39.6505014 C149.260163,39.6505014 149.948076,39.4804634 149.948076,38.8244055 L149.948076,37.4475789 L149.948076,37.4475789 Z M138.115967,48.1868261 L132.887826,48.1868261 C132.887826,48.1868261 129.061927,48.0061865 128.760346,44.1940291 C128.748239,40.2790228 128.760346,28.0851583 128.760346,28.0851583 L131.236834,28.0851583 C131.236834,28.0851583 132.06233,28.0701509 132.06233,28.9112543 L132.06233,43.3679331 C132.06233,43.3679331 132.350015,44.5638447 133.988487,45.020125 C135.8398,45.0107626 136.18981,45.020125 136.18981,45.020125 C136.18981,45.020125 136.907303,44.790195 137.428054,45.7085383 C137.948804,46.6268816 138.528715,47.6360955 138.528715,47.6360955 C138.528715,47.6360955 138.61154,48.1868261 138.115967,48.1868261 L138.115967,48.1868261 Z M111.562513,47.3607302 L111.562513,29.1866196 C111.562513,28.380763 112.250426,28.222841 112.250426,28.222841 L125.183197,28.222841 C125.906469,28.222841 125.595945,29.0489369 125.595945,29.0489369 C125.595945,29.0489369 125.192827,30.166094 124.908031,30.7011288 C124.623235,31.2361636 124.082535,31.2518594 124.082535,31.2518594 L115.689993,31.2518594 C114.908523,31.2518594 114.864497,31.9402727 114.864497,31.9402727 L114.864497,36.4838003 L124.357701,36.4838003 C124.914635,36.4838003 124.632866,37.1722136 124.632866,37.1722136 C124.632866,37.1722136 123.921839,38.6889258 123.669787,39.0997708 C123.417736,39.5106159 122.844291,39.5128188 122.844291,39.5128188 L114.864497,39.5128188 L114.864497,44.3317117 C114.864497,44.988458 115.55241,45.1578077 115.55241,45.1578077 L124.357701,45.1578077 C124.996222,45.1578077 125.183197,45.5708556 125.183197,45.5708556 C125.183197,45.5708556 126.055196,46.9323994 126.421441,47.4984128 C126.787823,48.0644262 126.283858,48.1868261 126.283858,48.1868261 L112.388009,48.1868261 C111.814151,48.1868261 111.562513,47.3607302 111.562513,47.3607302 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>
\ No newline at end of file
--- a/examples/assets/images/figure-1.png
+++ b/examples/assets/images/figure-1.png
--- a/examples/assets/images/figure-2.png
+++ b/examples/assets/images/figure-2.png
--- a/examples/assets/images/plant-1.png
+++ b/examples/assets/images/plant-1.png
--- a/examples/assets/images/plant-2.png
+++ b/examples/assets/images/plant-2.png
--- a/examples/assets/images/resource-placeholder.svg
+++ b/examples/assets/images/resource-placeholder.svg
--- a/examples/assets/images/stars.png
+++ b/examples/assets/images/stars.png
--- a/examples/assets/images/web.png
+++ b/examples/assets/images/web.png
--- a/examples/components/footer.vue
+++ b/examples/components/footer.vue
@@ -2,12 +2,23 @@
  <footer class="footer">
    <div class="container">
      <div class="footer-main">
-        <p class="footer-main-title">Element {{ version && version.slice(0, 3) }} Carbon</p>
+        <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="https://github.com/eleme/element-react" class="footer-main-link" target="_blank">Element-React</a>
+        <a href="https://github.com/eleme/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://eleme.github.io/element-react/#/${ lang }/quick-start`" class="footer-main-link" target="_blank">Element-React</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) }} Carbon</p>
        <el-popover
          ref="weixin"
          placement="top"
@@ -18,9 +29,12 @@
          <img src="../assets/images/qrcode.png" alt="">
        </el-popover>
        <i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
-        <a href="//github.com/elemefe" target="_blank">
+        <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>
@@ -28,83 +42,79 @@
 <style>
  .footer {
-    height: 120px;
+    background-color: #F7FBFD;
-    background-color: #324057;
-    color: #a4aebd;
    width: 100%;
-    z-index: 1000;
+    padding: 40px 150px;
    margin-top: -120px;
+    box-sizing: border-box;
-    * {
-      word-spacing: 0;
-    }
    .container {
-      height: 100%;
      box-sizing: border-box;
    }
    .footer-main {
      font-size: 0;
-      padding-top: 40px;
      display: inline-block;
+      vertical-align: top;
-      .footer-main-title {
+      margin-right: 110px;
+      h4 {
+        font-size: 18px;
+        color: #333;
        line-height: 1;
-        font-size: 22px;
+        margin: 0 0 15px 0;
-        margin: 0;
      }
      .footer-main-link {
-        display: inline-block;
+        display: block;
-        margin: 12px 18px 0 0;
+        margin: 0;
-        line-height: 1;
+        line-height: 2;
-        font-size: 12px;
+        font-size: 14px;
-        color: #768193;
+        color: #666;
-        a {
+        &:hover {
-          color: #768193;
+          color: #333;
-          text-decoration: none;
        }
      }
    }
    .footer-social {
      float: right;
-      line-height: 120px;
+      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: #8D99AB;
+        color: #c8d6e8;
        background-color: transparent;
        size: 32px;
        font-size: 32px;
        vertical-align: middle;
+        margin-right: 20px;
        &:hover {
-           transform: scale(1.2);
+          transform: scale(1.2);
-        }
+          color: #8D99AB;
-      }
-      .doc-icon-weixin {
-        margin-right: 36px;
-        &:hover {
-          color: #fff;
        }
      }
-      .doc-icon-github {
+      .doc-icon-gitter {
        margin-right: 0;
-        &:hover {
-           color: #fff;
-        }
      }
    }
  }
-  .footer-popover {
+  .el-popover.footer-popover {
    padding: 0;
    min-width: 120px;
    line-height: normal;
@@ -151,6 +161,10 @@
      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';
      }
    }
  };

--- a/examples/components/header.vue
+++ b/examples/components/header.vue
 <style scoped>
  .headerWrapper {
    height: 80px;
-    transition: transform .3s;
-    &.is-hidden {
-      transform: translateY(-80px);
-    }
  }
  .header {
    height: 80px;
-    background-color: rgba(32, 160, 255, 1);
+    background-color: #fff;
    color: #fff;
    top: 0;
    left: 0;
@@ -24,6 +19,10 @@
      box-sizing: border-box;
    }
+    .nav-lang-spe {
+      color: #888;
+    }
    h1 {
      margin: 0;
      float: left;
@@ -109,89 +108,43 @@
          cursor: pointer;
          display: inline-block;
          height: 100%;
+          color: #888;
          &:hover {
-            opacity: 1;
-          }
-          &.active {
-            font-weight: 700;
-            opacity: 1;
            color: #409EFF;
          }
+          &.active {
+             font-weight: bold;
+             color: #409EFF;
+           }
        }
      }
      a {
        text-decoration: none;
-        color: #fff;
+        color: #888;
        display: block;
        padding: 0 22px;
-        opacity: .8;
        &.active,
        &:hover {
-          opacity: 1;
+          color: #333;
        }
        &.active::after {
          content: '';
          display: inline-block;
          position: absolute;
-          bottom: 0;
+          bottom: 15px;
-          left: 0;
+          left: calc(50% - 7px);
-          width: 100%;
+          width: 14px;
          height: 4px;
-          background:#99d2fc;
+          background: #409EFF;
        }
      }
    }
  }
-  .header-home {
-    position: fixed;
-    top: 0;
-    background-color: rgba(32, 160, 255, 0);
-  }
-  .header-light {
-    background-color: #fff;
-    .nav-lang {
-      color: #888;
-      &:hover,
-      &.acive {
-        font-weight: normal;
-        opacity: 1;
-        color: #409EFF;
-      }
-    }
-    .nav-lang-spe {
-      color: #888;
-    }
-    .nav-item {
-      a {
-        color: #888;
-        opacity: 1;
-      }
-      a:hover,
-      a.active {
-        color: #333;
-      }
-      a.active::after {
-        width: 14px;
-        left: calc(50% - 7px);
-        bottom: 15px;
-        background: #409EFF;
-      }
-    }
-  }
  .nav-dropdown {
    margin-bottom: 6px;
    padding-left: 18px;
@@ -214,9 +167,9 @@
    i {
      transition: .2s;
-      transform: scale(.6);
      font-size: 12px;
      color: #979797;
+      transform: translateY(-2px);
    }
    @when active {
@@ -224,7 +177,7 @@
        color: #409EFF;
      }
      i {
-        transform: rotateZ(180deg) translateY(2px) scale(.6);
+        transform: rotateZ(180deg) translateY(3px);
      }
    }
@@ -286,17 +239,11 @@
 </style>
 <template>
  <div class="headerWrapper">
-    <header class="header"
+    <header class="header" ref="header">
-      ref="header"
-      :style="headerStyle"
-      :class="{
-        'header-home': isHome,
-        'header-light': !isHome
-      }">
      <div class="container">
        <h1><router-link :to="`/${ lang }`">
          <!-- logo -->
-          <slot v-if="!isHome">
+          <slot>
            <img
              src="../assets/images/element-logo.svg"
              alt="element-logo"
@@ -306,16 +253,6 @@
              alt="element-logo"
              class="nav-logo-small">
          </slot>
-          <slot v-if="isHome">
-            <img
-              src="../assets/images/element-logo-white.svg"
-              alt="element-logo"
-              class="nav-logo">
-            <img
-              src="../assets/images/element-logo-small-white.svg"
-              alt="element-logo"
-              class="nav-logo-small">
-          </slot>
        </router-link></h1>
@@ -409,8 +346,6 @@
    data() {
      return {
        active: '',
-        isHome: true,
-        headerStyle: {},
        versions: [],
        version,
        dropdownVisible: true
@@ -422,15 +357,6 @@
      AlgoliaSearch
    },
-    watch: {
-      '$route.path': {
-        immediate: true,
-        handler() {
-          this.handlePathChange();
-        }
-      }
-    },
    computed: {
      lang() {
        return this.$route.path.split('/')[1] || 'zh-CN';
@@ -457,22 +383,10 @@
      handleDropdownToggle(visible) {
        this.dropdownVisible = visible;
-      },
-      handlePathChange() {
-        const routerName = this.$route.name;
-        this.isHome = /^home/.test(routerName);
-        if (!this.isHome) {
-          this.headerStyle.backgroundColor = '#fff';
-          return;
-        }
-        this.headerStyle.backgroundColor = 'rgba(32, 160, 255, 0)';
      }
    },
    created() {
-      this.handlePathChange();
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = _ => {
        if (xhr.readyState === 4 && xhr.status === 200) {
@@ -481,19 +395,6 @@
      };
      xhr.open('GET', '/versions.json');
      xhr.send();
-    },
-    mounted() {
-      function scroll(fn) {
-        window.addEventListener('scroll', fn, false);
-      }
-      scroll(() => {
-        if (this.isHome) {
-          const threshold = 200;
-          let alpha = Math.min((document.documentElement.scrollTop || document.body.scrollTop), threshold) / threshold;
-          this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
-        }
-      });
    }
  };
 </script>
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -1896,8 +1896,8 @@ Configuring rowspan and colspan allows you to merge cells
 | clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection |
 | toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
 | setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
-| clearSort | clear sorting, restore data to the original order | - |
+| clearSort | clear sorting, restore data to the original order | — |
-| clearFilter | clear filter | - |
+| clearFilter | clear filter | — |
 ### Table Slot
 | Name | Description |

--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -1959,8 +1959,8 @@
 | clearSelection | 用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 | selection |
 | toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
 | setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
-| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | - |
+| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
-| clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | - |
+| clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | — |
 ### Table Slot
 | name | 说明 |

--- a/examples/entry.js
+++ b/examples/entry.js
 import Vue from 'vue';
 import entry from './app';
 import VueRouter from 'vue-router';
-import routes from './route.config';
 import Element from 'main/index.js';
 import 'packages/theme-chalk/src/index.scss';
+import routes from './route.config';
 import demoBlock from './components/demo-block.vue';
 import MainFooter from './components/footer.vue';
 import MainHeader from './components/header.vue';

--- a/examples/i18n/component.json
+++ b/examples/i18n/component.json
@@ -8,6 +8,13 @@
      "tooltip-text": "前往 jsfiddle.net 运行此示例"
    },
    "footer": {
+      "links": "链接",
+      "repo": "代码仓库",
+      "community": "社区",
+      "changelog": "更新日志",
+      "faq": "常见问题",
+      "gitter": "在线讨论",
+      "starter": "脚手架",
      "feedback": "反馈建议",
      "contribution": "贡献指南",
      "eleme": "饿了么"
@@ -30,6 +37,13 @@
      "tooltip-text": "Run this demo on jsfiddle.net"
    },
    "footer": {
+      "links": "Links",
+      "repo": "GitHub",
+      "community": "Community",
+      "changelog": "Changelog",
+      "faq": "FAQ",
+      "gitter": "Gitter",
+      "starter": "Starter kit",
      "feedback": "Feedback",
      "contribution": "Contribution",
      "eleme": "Eleme"

--- a/examples/i18n/page.json
+++ b/examples/i18n/page.json
@@ -4,14 +4,10 @@
    "pages": {
      "index": {
        "lang": "zh-CN",
-        "titleSize": "46",
+        "titleSize": "34",
-        "theatreSize": "46",
+        "paraSize": "20",
-        "paraHeight": "1.8",
-        "theatreParam": "",
-        "typingFunc": ".addScene('产品设计师', 1800, -5, 800)\n          .addScene('交互设计师', 1800, -5, 500)\n          .addScene('视觉设计师', 1800, -5, 700)\n          .addScene('产品经理', 1800, -4, 600)\n          .addScene('前端工程师', 1800, -5, 800)",
-        "typingInvoke": ".addActor('line2', { speed: 0.5, accuracy: 1 })\n        .addScene(2600)\n        .addScene('line2:只为守护世界和平', 300, -6, 1000)\n        .addScene('让你少加班', 300, -5)\n        .addScene('line2:只为这样的你: ', 400)",
        "1": "网站快速成型工具",
-        "2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。",
+        "2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库",
        "3": "指南",
        "4": "了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。",
        "5": "查看详情",
@@ -81,6 +77,8 @@
      },
      "resource": {
        "paraHeight": "1.8",
+        "placeholder1": "整理中",
+        "placeholder2": "设计资源正在整理和完善中",
        "1": "资源",
        "2": "整理中",
        "3": "Axure Components",
@@ -98,9 +96,8 @@
    "pages": {
      "index": {
        "lang": "en-US",
-        "titleSize": "50",
+        "titleSize": "34",
-        "theatreSize": "42",
+        "paraSize": "20",
-        "paraHeight": "1.6",
        "theatreParam": "{ maxSpeed: 100 }",
        "typingFunc": ".addScene('product designers', 1800, -17, 800)\n          .addScene('UI designers', 1800, -12, 800)\n          .addScene('UX designers', 1800, -12, 800)\n          .addScene('product managers', 1800, -16, 800)\n          .addScene('FE developers', 1800, -13, 800)",
        "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n        .addScene(2600)\n        .addScene('line2:For ', 500)",
@@ -175,6 +172,8 @@
      },
      "resource": {
        "paraHeight": "1.6",
+        "placeholder1": "Under construction",
+        "placeholder2": "Please wait while we prepare the design resources",
        "1": "Resource",
        "2": "Under construction.",
        "3": "Axure Components",

--- a/examples/icon.json
+++ b/examples/icon.json
-["upload","error","success","warning","sort-down","sort-up","arrow-left","circle-plus","circle-plus-outline","arrow-down","arrow-right","arrow-up","back","circle-close","date","circle-close-outline","caret-left","caret-bottom","caret-top","caret-right","close","d-arrow-left","check","delete","d-arrow-right","document","d-caret","edit-outline","download","goods","search","info","message","edit","location","loading","location-outline","menu","minus","bell","moblie-phone","news","more","phone","phone-outline","picture","picture-outline","plus","printer","rank","refresh","question","remove","share","star-on","setting","circle-check","service","sold-out","remove-outline","star-off","circle-check-outline","tickets","sort","zoom-in","time","view","upload2","zoom-out"]
+["upload","error","success","warning","sort-down","sort-up","arrow-left","circle-plus","circle-plus-outline","arrow-down","arrow-right","arrow-up","back","circle-close","date","circle-close-outline","caret-left","caret-bottom","caret-top","caret-right","close","d-arrow-left","check","delete","d-arrow-right","document","d-caret","edit-outline","download","goods","search","info","message","edit","location","loading","location-outline","menu","minus","bell","moblie-phone","news","more","more-outline","phone","phone-outline","picture","picture-outline","plus","printer","rank","refresh","question","remove","share","star-on","setting","circle-check","service","sold-out","remove-outline","star-off","circle-check-outline","tickets","sort","zoom-in","time","view","upload2","zoom-out"]
\ No newline at end of file
--- a/examples/index.tpl
+++ b/examples/index.tpl
@@ -3,13 +3,18 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_137970_p1tpzmomxp9cnmi.css">
    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#409EFF">
    <title>Element</title>
  </head>
  <body>
    <div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
    <!--<script src="https://app.codesponsor.io/scripts/qFcVkt4f3DQEg4zrwINGVg?theme=light&height=250&width=240"></script>-->
+    <script>
+      if (!window.Promise) {
+        document.write('<script src="//shadow.elemecdn.com/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
+      }
+    </script>
    <script src="//cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.runtime.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/vue-router@2.7.0/dist/vue-router.min.js"></script><% } %>
  </body>

--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
 <style scoped>
-  .actor {
+  .banner {
-    min-height: 65px;
+    text-align: center;
+  }
+  .banner-desc {
+    padding-top: 20px;
-    &:after {
+    h1 {
-      content: '';
+      font-size: <%= titleSize >px;
-      width: 6px;
+      margin: 0;
-      height: 50px;
+      line-height: 48px;
-      vertical-align: -8px;
+      color: #555;
-      margin-left: 5px;
+    }
-      background-color: #fff;
-      display: inline-block;
+    p {
-      animation: blink 400ms infinite alternate;
+      font-size: <%= paraSize >px;
+      line-height: 28px;
+      color: #888;
+      margin: 15px 0 0;
    }
  }
-  .banner {
+  .jumbotron {
+    width: 890px;
+    height: 465px;
+    margin: 30px auto 100px;
+    /*border: solid 1px black;*/
    position: relative;
-    height: 420px;
-    color: #fff;
-    margin-bottom: 130px;
-    .container {
+    div {
-      position: relative;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      position: absolute;
+      top: 0;
+      left: 0;
    }
    img {
      position: absolute;
-      top: 15px;
-      right: -10px;
    }
-  }
-  .banner-sky {
+    .jumbotron-cloud-1 {
-    position: absolute;
+      right: 0;
-    top: -150px;
+      top: 0;
-    bottom: -15px;
+      height: 55px;
-    width: 100%;
+    }
-    margin-top: -140px;
-    transform: skewY(-5deg);
-    transform-origin: center;
-    background-image: linear-gradient(180deg, #0d1a44 13%, #3c4f91 56%, #5fc1e4 100%);
-  }
-  img.banner-stars {
-    top: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  .banner-desc {
-    padding-top: 110px;
-    padding-left: 30px;
-    font-size: <%= theatreSize >px;
-    position: relative;
-    z-index: 10;
-    h2 {
+    .jumbotron-plant-2 {
-      font-size: <%= titleSize >px;
+      left: 60px;
-      margin: 0;
+      top: 200px;
-      color: #fff;
+    }
+    .jumbotron-web {
+      height: 385px;
+      top: 35px;
+      left: 110px;
+    }
+    .jumbotron-cloud-2 {
+      left: 0;
+      top: 50px;
+      height: 55px;
+    }
+    .jumbotron-compo-1 {
+      left: 94px;
+      height: 90px;
+      top: 220px;
    }
-    p {
+    .jumbotron-compo-2 {
-      font-size: 14px;
+      right: 73px;
-      opacity: .8;
+      top: 60px;
-      width: 420px;
+      height: 124px;
-      line-height: <%= paraHeight >;
+    }
-      padding-left: 3px;
+    .jumbotron-compo-3 {
+      right: 42px;
+      top: 200px;
+      height: 120px;
+    }
+    .jumbotron-plant-1 {
+      bottom: 0;
+      left: 30px;
+      height: 185px;
+    }
+    .jumbotron-figure-1 {
+      bottom: 0;
+      right: 180px;
+      height: 140px;
+    }
+    .jumbotron-figure-2 {
+      bottom: 0;
+      right: 10px;
+      height: 68px;
    }
  }
  .cards {
@@ -114,7 +147,7 @@
      font-size: 14px;
      color: #99a9bf;
      padding: 0 25px;
-      line-height: <%= paraHeight >;
+      line-height: 20px;
    }
    a {
      height: 53px;
@@ -143,13 +176,9 @@
    }
    &:hover {
      bottom: 6px;
-      box-shadow: 0px 6px 18px 0px rgba(232,237,250,0.50);
+      box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50);
    }
  }
-  @keyframes blink {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
  @media (max-width: 1140px) {
    .cards {
      width: 100%;
@@ -172,6 +201,9 @@
        display: none;
      }
    }
+    .jumbotron {
+      display: none;
+    }
  }
  @media (max-width: 768px) {
@@ -205,15 +237,29 @@
 <template>
  <div>
    <div class="banner">
-      <div class="banner-sky"></div>
+      <div class="banner-desc">
-      <img class="banner-stars" src="~examples/assets/images/stars.png" alt="Element">
+        <h1><%= 1 ></h1>
-      <div class="container">
+        <p><%= 2 ></p>
-        <div class="banner-desc">
+      </div>
-          <h2><%= 1 ></h2>
+    </div>
-          <div id="line2" class="actor"></div>
+    <div class="jumbotron">
-          <p><%= 2 ></p>
+      <div>
-        </div>
+        <img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
-        <img src="~examples/assets/images/banner-bg.svg" alt="Element">
+        <img class="jumbotron-web" src="~examples/assets/images/web.png" alt="">
+      </div>
+      <div data-hover-layer="0">
+        <img class="jumbotron-cloud-1" src="~examples/assets/images/cloud-1.png" alt="">
+        <img class="jumbotron-cloud-2" src="~examples/assets/images/cloud-2.png" alt="">
+      </div>
+      <div data-hover-layer="1">
+        <img class="jumbotron-compo-1" src="~examples/assets/images/compo-1.png" alt="">
+        <img class="jumbotron-compo-2" src="~examples/assets/images/compo-2.png" alt="">
+        <img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
+      </div>
+      <div data-hover-layer="2">
+        <img class="jumbotron-plant-1" src="~examples/assets/images/plant-1.png" alt="">
+        <img class="jumbotron-figure-1" src="~examples/assets/images/figure-1.png" alt="">
+        <img class="jumbotron-figure-2" src="~examples/assets/images/figure-2.png" alt="">
      </div>
    </div>
    <div class="cards">
@@ -259,32 +305,25 @@
  </div>
 </template>
 <script>
-  import theaterJS from 'theaterjs';
+  import { Hover } from 'perspective.js';
  export default {
    mounted() {
-      function typing(theater) {
+      new Hover('.jumbotron', { // eslint-disable-line
-        theater
+        max: 1,
-          <%= typingFunc >
+        scale: 1,
-          .addScene((done) => {
+        perspective: 700,
-            typing(theater);
+        layers: [{
-            done();
+          multiple: 0.01,
-          });
+          reverseTranslate: true
-      }
+        }, {
-      var theater = theaterJS(<%= theatreParam >);
+          multiple: 0.04,
-      theater
+          reverseTranslate: true
-        .on('type:start, erase:start', function() {
+        }, {
-          theater.getCurrentActor().$element.classList.add('typing');
+          multiple: 0.015,
-        })
+          reverseTranslate: true
-        .on('type:end, erase:end', function() {
+        }]
-          theater.getCurrentActor().$element.classList.remove('typing');
+      });
-        });
-      theater
-        <%= typingInvoke >
-        .addScene((done) => {
-          typing(theater);
-          done();
-        });
    }
  };
 </script>
--- a/examples/pages/template/resource.tpl
+++ b/examples/pages/template/resource.tpl
@@ -2,6 +2,29 @@
  .page-resource {
    padding-top: 55px;
    box-sizing: border-box;
+    .resource-placeholder {
+      margin: 50px auto 0;
+      text-align: center;
+      img {
+        width: 150px;
+      }
+      h4 {
+        margin: 20px 0 16px;
+        font-size: 16px;
+        color: #1f2f3d;
+        line-height: 1;
+      }
+      p {
+        margin: 0;
+        font-size: 14px;
+        color: #99a9bf;
+        line-height: 1;
+      }
+    }
  }
  .cards {
    margin: 35px auto 110px;
@@ -98,7 +121,13 @@
 <template>
  <div class="page-container page-resource">
    <h2><%= 1 ></h2>
-    <p><%= 2 ></p>
+    <div class="resource-placeholder">
+      <img src="~examples/assets/images/resource-placeholder.svg" alt="">
+      <h4><%= placeholder1 ></h4>
+      <p><%= placeholder2 ></p>
+    </div>
+    <!--<p><%= 2 ></p>-->
    <!--<div class="cards">-->
      <!--<ul class="container">-->
        <!--<li>-->

--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
    "markdown-it-container": "^2.0.0",
    "mocha": "^3.1.1",
    "node-sass": "^4.5.3",
+    "perspective.js": "^1.0.0",
    "postcss": "^5.1.2",
    "postcss-loader": "0.11.1",
    "postcss-salad": "^1.0.8",
@@ -121,7 +122,6 @@
    "sinon": "^1.17.6",
    "sinon-chai": "^2.8.0",
    "style-loader": "^0.19.0",
-    "theaterjs": "^3.0.0",
    "transliteration": "^1.1.11",
    "uppercamelcase": "^1.1.0",
    "url-loader": "^0.6.2",

--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -65,11 +65,12 @@
  import Emitter from 'element-ui/src/mixins/emitter';
  import Migrating from 'element-ui/src/mixins/migrating';
  import { generateId } from 'element-ui/src/utils/util';
+  import Focus from 'element-ui/src/mixins/focus';
  export default {
    name: 'ElAutocomplete',
-    mixins: [Emitter, Migrating],
+    mixins: [Emitter, Focus('input'), Migrating],
    componentName: 'ElAutocomplete',

--- a/packages/cascader/src/main.vue
+++ b/packages/cascader/src/main.vue
@@ -337,9 +337,9 @@ export default {
    },
    handleClick() {
      if (this.disabled) return;
+      this.$refs.input.focus();
      if (this.filterable) {
        this.menuVisible = true;
-        this.$refs.input.focus();
        return;
      }
      this.menuVisible = !this.menuVisible;

--- a/packages/theme-chalk/src/button.scss
+++ b/packages/theme-chalk/src/button.scss
@@ -113,6 +113,10 @@
      background-color: rgba(255,255,255,.35);
    }
  }
+  @include when(round) {
+    border-radius: 20px;
+    padding: 12px 23px;
+  }
  @include m(primary) {
    @include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
  }
@@ -156,10 +160,6 @@
      background-color: transparent;
    }
  }
-  @include when(round) {
-    border-radius: 20px;
-    padding: 12px 23px;
-  }
 }
 @include b(button-group) {

--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -80,6 +80,7 @@ $--fill-base: $--color-white;
 /* Font
 -------------------------- */
+$--font-path: 'fonts' !default;
 $--font-size-base: 14px;
 $--font-size-small: 13px;
 $--font-size-large: 18px;

--- a/packages/theme-chalk/src/date-picker/date-picker.scss
+++ b/packages/theme-chalk/src/date-picker/date-picker.scss
@@ -13,6 +13,10 @@
    width: 438px;
  }
+  &.has-time .el-picker-panel__body-wrapper {
+    position: relative;
+  }
  .el-picker-panel__content {
    width: 292px;
  }

--- a/packages/theme-chalk/src/fonts/element-icons.ttf
+++ b/packages/theme-chalk/src/fonts/element-icons.ttf
--- a/packages/theme-chalk/src/fonts/element-icons.woff
+++ b/packages/theme-chalk/src/fonts/element-icons.woff
--- a/packages/theme-chalk/src/icon.scss
+++ b/packages/theme-chalk/src/icon.scss
+@import "common/var";
 @font-face {
  font-family: 'element-icons';
-  src: url('fonts/element-icons.woff?t=1508313898411') format('woff'), /* chrome, firefox */
+  src: url('#{$--font-path}/element-icons.woff?t=1508751886602') format('woff'), /* chrome, firefox */
-       url('fonts/element-icons.ttf?t=1508313898411') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+       url('#{$--font-path}/element-icons.ttf?t=1508751886602') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-style: normal
 }
@@ -107,7 +109,9 @@
 .el-icon-news:before { content: "\e625"; }
-.el-icon-more:before { content: "\e626"; }
+.el-icon-more:before { content: "\e646"; }
+.el-icon-more-outline:before { content: "\e626"; }
 .el-icon-phone:before { content: "\e627"; }

--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -115,6 +115,7 @@
      display: block;
      box-sizing: border-box;
      padding-left: 24px;
+      line-height: $--transfer-item-height;
    }
    .el-checkbox__input {

--- a/packages/theme-default/package.json
+++ b/packages/theme-default/package.json
--- a/yarn.lock
+++ b/yarn.lock
@@ -2071,7 +2071,7 @@ dom-serializer@~0.0.0:
    domelementtype "~1.1.1"
    entities "~1.1.1"
-dom-walk@^0.1.0:
+dom-walk@^0.1.0, dom-walk@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
@@ -5627,6 +5627,14 @@ pbkdf2@^3.0.3:
    safe-buffer "^5.0.1"
    sha.js "^2.4.8"
+perspective.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/perspective.js/-/perspective.js-1.0.0.tgz#b14aca449043fcfd21297fabd2dfa184f42cb26c"
+  dependencies:
+    color-convert "^1.9.0"
+    dom-walk "^0.1.1"
+    throttle-debounce "^1.0.1"
 pify@^2.0.0, pify@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -7458,10 +7466,6 @@ text-table@^0.2.0, text-table@~0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-theaterjs@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/theaterjs/-/theaterjs-3.1.0.tgz#74b1a750c54c4b3bef74383ea83cbcb19ab4f185"
 thenify-all@^1.0.0, thenify-all@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"