update landing page for 2.0

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
 

examples/assets/images/element-logo-small-white.svg

@@ -1,12 +0,0 @@
-<?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>

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: #324057;
-    color: #a4aebd;
+    background-color: #F7FBFD;
     width: 100%;
-    z-index: 1000;
+    padding: 40px 150px;
     margin-top: -120px;
-
-    * {
-      word-spacing: 0;
-    }
+    box-sizing: border-box;
 
     .container {
-      height: 100%;
       box-sizing: border-box;
     }
 
     .footer-main {
       font-size: 0;
-      padding-top: 40px;
       display: inline-block;
-
-      .footer-main-title {
+      vertical-align: top;
+      margin-right: 110px;
+    
+      h4 {
+        font-size: 18px;
+        color: #333;
         line-height: 1;
-        font-size: 22px;
-        margin: 0;
+        margin: 0 0 15px 0;
       }
 
       .footer-main-link {
-        display: inline-block;
-        margin: 12px 18px 0 0;
-        line-height: 1;
-        font-size: 12px;
-        color: #768193;
+        display: block;
+        margin: 0;
+        line-height: 2;
+        font-size: 14px;
+        color: #666;
 
-        a {
-          color: #768193;
-          text-decoration: none;
+        &:hover {
+          color: #333;
         }
       }
     }
 
     .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);
-        }
-      }
-
-      .doc-icon-weixin {
-        margin-right: 36px;
-        &:hover {
-          color: #fff;
+          transform: scale(1.2);
+          color: #8D99AB;
         }
       }
 
-      .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';
       }
     }
   };

examples/components/header.vue

@@ -1,16 +1,11 @@
 <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;
-          left: 0;
-          width: 100%;
+          bottom: 15px;
+          left: calc(50% - 7px);
+          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"
-      ref="header"
-      :style="headerStyle"
-      :class="{
-        'header-home': isHome,
-        'header-light': !isHome
-      }">
+    <header class="header" ref="header">
       <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>

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 | - |
-| clearFilter | clear filter | - |
+| clearSort | clear sorting, restore data to the original order | — |
+| clearFilter | clear filter | — |
 
 ### Table Slot
 | Name | Description |

examples/docs/zh-CN/table.md

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

examples/entry.js

@@ -1,9 +1,9 @@
 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';

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"

examples/i18n/page.json

@@ -4,14 +4,10 @@
     "pages": {
       "index": {
         "lang": "zh-CN",
-        "titleSize": "46",
-        "theatreSize": "46",
-        "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)",
+        "titleSize": "34",
+        "paraSize": "20",
         "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",
-        "theatreSize": "42",
-        "paraHeight": "1.6",
+        "titleSize": "34",
+        "paraSize": "20",
         "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",

examples/icon.json

@@ -1 +1 @@
-["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"]

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>

examples/pages/template/index.tpl

@@ -1,68 +1,101 @@
 <style scoped>
-  .actor {
-    min-height: 65px;
+  .banner {
+    text-align: center;
+  }
+  .banner-desc {
+    padding-top: 20px;
 
-    &:after {
-      content: '';
-      width: 6px;
-      height: 50px;
-      vertical-align: -8px;
-      margin-left: 5px;
-      background-color: #fff;
-      display: inline-block;
-      animation: blink 400ms infinite alternate;
+    h1 {
+      font-size: <%= titleSize >px;
+      margin: 0;
+      line-height: 48px;
+      color: #555;
+    }
+
+    p {
+      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 {
-      position: relative;
+    div {
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      position: absolute;
+      top: 0;
+      left: 0;
     }
-
+    
     img {
       position: absolute;
-      top: 15px;
-      right: -10px;
     }
-  }
-  .banner-sky {
-    position: absolute;
-    top: -150px;
-    bottom: -15px;
-    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;
+    
+    .jumbotron-cloud-1 {
+      right: 0;
+      top: 0;
+      height: 55px;
+    }
 
-    h2 {
-      font-size: <%= titleSize >px;
-      margin: 0;
-      color: #fff;
+    .jumbotron-plant-2 {
+      left: 60px;
+      top: 200px;
+    }
+    
+    .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 {
-      font-size: 14px;
-      opacity: .8;
-      width: 420px;
-      line-height: <%= paraHeight >;
-      padding-left: 3px;
+    .jumbotron-compo-2 {
+      right: 73px;
+      top: 60px;
+      height: 124px;
+    }
+  
+    .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>
-      <img class="banner-stars" src="~examples/assets/images/stars.png" alt="Element">
-      <div class="container">
-        <div class="banner-desc">
-          <h2><%= 1 ></h2>
-          <div id="line2" class="actor"></div>
-          <p><%= 2 ></p>
-        </div>
-        <img src="~examples/assets/images/banner-bg.svg" alt="Element">
+      <div class="banner-desc">
+        <h1><%= 1 ></h1>
+        <p><%= 2 ></p>
+      </div>
+    </div>
+    <div class="jumbotron">
+      <div>
+        <img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
+        <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) {
-        theater
-          <%= typingFunc >
-          .addScene((done) => {
-            typing(theater);
-            done();
-          });
-      }
-      var theater = theaterJS(<%= theatreParam >);
-      theater
-        .on('type:start, erase:start', function() {
-          theater.getCurrentActor().$element.classList.add('typing');
-        })
-        .on('type:end, erase:end', function() {
-          theater.getCurrentActor().$element.classList.remove('typing');
-        });
-      theater
-        <%= typingInvoke >
-        .addScene((done) => {
-          typing(theater);
-          done();
-        });
+      new Hover('.jumbotron', { // eslint-disable-line
+        max: 1,
+        scale: 1,
+        perspective: 700,
+        layers: [{
+          multiple: 0.01,
+          reverseTranslate: true
+        }, {
+          multiple: 0.04,
+          reverseTranslate: true
+        }, {
+          multiple: 0.015,
+          reverseTranslate: true
+        }]
+      });
     }
   };
 </script>

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>-->

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",

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',
 

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;

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) {

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;

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;
   }

packages/theme-chalk/src/icon.scss

@@ -1,7 +1,9 @@
+@import "common/var";
+
 @font-face {
   font-family: 'element-icons';
-  src: url('fonts/element-icons.woff?t=1508313898411') format('woff'), /* chrome, firefox */
-       url('fonts/element-icons.ttf?t=1508313898411') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  src: url('#{$--font-path}/element-icons.woff?t=1508751886602') format('woff'), /* chrome, firefox */
+       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"; }
 

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 {

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"