Revert "Revert "Chore: update new 2.9.0 index page (#15682)" (#15801)" (#15856)

examples/assets/images/theme-index-icon.svg

+<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>
\ No newline at end of file

examples/components/header.vue

@@ -302,8 +302,7 @@
             </router-link>
           </li>
           <li 
-            class="nav-item"
-            v-if="$isEle"
+            class="nav-item nav-item-theme"
           >
             <router-link
               active-class="active"
@@ -370,11 +369,6 @@
               </el-dropdown-menu>
             </el-dropdown>
           </li>
-          
-          <!--theme picker-->
-          <li class="nav-item nav-theme-switch" v-show="isComponentPage">
-            <theme-picker v-if="!$isEle"></theme-picker>
-          </li>
         </ul>
       </div>
     </header>

examples/docs/en-US/custom-theme.md

 ## Custom theme
-Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
+Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide four ways to change the style variables.
+
+### Online Theme Roller
+Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
 
 ### Changing theme color
 If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.

examples/docs/es/custom-theme.md

 ## Tema personalizado
-Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.
+Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 4 maneras de modificar los estilos.
+
+### Online Theme Roller
+Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
 
 ### Cambiando el color del tema
 Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.

examples/docs/fr-FR/custom-theme.md

 ## Thème
-Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons trois méthodes pour changer les variables de style.
+Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons four méthodes pour changer les variables de style.
+
+### Online Theme Roller
+Use [Online Theme Roller](./#/fr-FR/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
 
 ### Changer la couleur du thème
 Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.

examples/docs/zh-CN/custom-theme.md

 ## 自定义主题
-Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。
+Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。
+
+### 在线主题编辑器
+使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
 
 ### 仅替换主题色
 如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。

examples/i18n/page.json

@@ -12,6 +12,11 @@
         "7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。",
         "8": "资源",
         "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。",
+        "10": "主题",
+        "11": "在线主题编辑器，可视化定制和管理站点主题、组件样式",
+        "12": "主题定制功能上线",
+        "13": "点击开始编辑",
+        "14": "尝试您的新主题",
         "lang": "zh-CN",
         "titleSize": "34",
         "paraSize": "18"
@@ -113,6 +118,11 @@
         "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
         "8": "Resource",
         "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
+        "10": "Theme",
+        "11": "Online theme roller, visualize custom and manage site themes and component styles",
+        "12": "Theme customization is available!",
+        "13": "Click here",
+        "14": "Make your own theme",
         "lang": "en-US",
         "titleSize": "34",
         "paraSize": "18"
@@ -214,6 +224,11 @@
         "7": "Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.",
         "8": "Recursos",
         "9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.",
+        "10": "Theme",
+        "11": "Online theme roller, visualize custom and manage site themes and component styles",
+        "12": "Theme customization is available!",
+        "13": "Click here",
+        "14": "Make your own theme",
         "lang": "es",
         "titleSize": "34",
         "paraSize": "18"
@@ -315,6 +330,11 @@
         "7": "Découvrez les détails de chaque composant and parcourant les différentes démos. Utilisez l'encapsulation du code pour développer plus efficacement.",
         "8": "Ressources",
         "9": "Téléchargez différents outils de prototypage ou de visualisation pour un design plus efficace.",
+        "10": "Theme",
+        "11": "Online theme roller, visualize custom and manage site themes and component styles",
+        "12": "Theme customization is available!",
+        "13": "Click here",
+        "14": "Make your own theme",
         "lang": "fr-FR",
         "titleSize": "34",
         "paraSize": "18"

examples/pages/template/index.tpl

@@ -49,80 +49,18 @@
   }
   .jumbotron {
     width: 890px;
-    height: 465px;
     margin: 30px auto;
     position: relative;
-
-    div {
+    img {
       width: 100%;
-      height: 100%;
-      background-color: transparent;
-      position: absolute;
-      top: 0;
-      left: 0;
     }
-
-    img {
+    .jumbotron-red {
+      transition: height .1s;
+      background: #FFF;
       position: absolute;
-    }
-
-    .jumbotron-cloud-1 {
-      right: 0;
-      top: 0;
-      height: 55px;
-    }
-
-    .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;
-    }
-
-    .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;
+      top:0;
+      overflow: hidden;
     }
   }
   .cards {
@@ -144,7 +82,7 @@
 
 
     li {
-      width: 33.33333%;
+      width: 25%;
       padding: 0 19px;
       box-sizing: border-box;
       float: left;
@@ -268,6 +206,81 @@
       }
     }
   }
+  .theme-intro-b {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    .intro-banner {
+      position: absolute
+    }
+    img {
+      width: 300px;
+    }
+    .title {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      color: #FFF;
+      text-align: center;
+      font-weight: bold;
+      font-size: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      p {
+        padding: 0;
+        margin: 10px 0;
+      }
+    }
+  }
+  .theme-intro-a {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    .mask{
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: #000;
+      opacity: .5;
+    }
+    .intro-banner {
+      top: 50%;
+      left: 50%;
+      position: fixed;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      box-sizing: border-box;
+      text-align: center;
+      z-index: 100;
+      img {
+        width: 100%;
+      }
+      .intro-text {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        p {
+          padding: 0;
+          margin: 0;
+          font-size: 48px;
+          font-weight: bold;
+          color: #FFF;
+        }
+      }
+    }
+  }
 </style>
 <template>
   <div>
@@ -277,22 +290,12 @@
         <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="">
-        <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 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 class="jumbotron" ref="indexMainImg">
+      <img src="~examples/assets/images/theme-index-blue.png" alt="">
+      <div class="jumbotron-red" :style="{
+           height: mainImgOffset + 'px'
+         }">
+        <img src="~examples/assets/images/theme-index-red.png" alt="">
       </div>
     </div>
     <div class="sponsors">
@@ -337,6 +340,18 @@
             </router-link>
           </div>
         </li>
+        <li>
+          <div class="card">
+            <img src="~examples/assets/images/theme-index-icon.svg" alt="">
+            <h3><%= 10 ></h3>
+            <p><%= 11 ></p>
+            <router-link
+              active-class="active"
+              to="/<%= lang >/theme"
+              exact><%= 5 >
+            </router-link>
+          </div>
+        </li>
         <li>
           <div class="card">
             <img src="~examples/assets/images/resource.png" alt="">
@@ -351,30 +366,88 @@
         </li>
       </ul>
     </div>
+    <div class="theme-intro-a" v-if="showIntroA" @click="hideIntroA">
+      <div class="intro-banner">
+        <img src="~examples/assets/images/theme-intro.png" alt="">
+        <div class="intro-text">
+          <p><%= 12 ></p>
+        </div>
+      </div>
+      <div class="mask"></div>
+    </div>
+    <div 
+      class="theme-intro-b"
+      @click="hideIntroB"
+      v-if="showIntroB"
+    >
+      <div class="intro-banner"
+      :style="{
+        left: introBX + 'px',
+        top: introBY + 'px'
+      }"
+      >
+        <img src="~examples/assets/images/intro-theme-b.png" alt="">
+          <div class="title">
+            <div>
+              <p><%= 13 ></p>
+              <p><%= 14 ></p>
+            </div>
+          </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-  import { Hover } from 'perspective.js';
-
+  import throttle from 'throttle-debounce/throttle';
+  import { addClass, removeClass } from 'element-ui/src/utils/dom';
+  
   export default {
+    created() {
+      this.throttledHandleScroll = throttle(10, true, index => {
+        this.handleScroll(index);
+      });
+    },
+    methods: {
+      handleScroll(index) {
+        const ele = this.$refs.indexMainImg;
+        const rect = ele.getBoundingClientRect();
+        const eleHeight = ele.clientHeight + 55;
+        let calHeight = (180 - rect.top) * 2;
+        if (calHeight < 0) calHeight = 0;
+        if (calHeight > eleHeight) calHeight = eleHeight;
+        this.mainImgOffset = calHeight;
+      },
+      hideIntroB() {
+        removeClass(document.body, 'el-loading-parent--hidden');
+        localStorage.setItem('KNOW_THEME', 'true');
+        this.showIntroB = false;
+      },
+      hideIntroA() {
+        this.showIntroA = false;
+        this.showIntroB = true;
+      }
+    },
     data() {
       return {
-        lang: this.$route.meta.lang
+        lang: this.$route.meta.lang,
+        mainImgOffset: 0,
+        showIntroA: false,
+        showIntroB: false,
+        introBY: 0,
+        introBX: 0
       };
     },
+    beforeDestroy() {
+      window.removeEventListener('scroll', this.throttledHandleScroll);
+    },
     mounted() {
-      new Hover('.jumbotron', { // eslint-disable-line
-        max: 3,
-        scale: 1,
-        perspective: 700,
-        layers: [{
-          multiple: 0.01,
-          reverseTranslate: true
-        }, {
-          multiple: 0.02,
-          reverseTranslate: true
-        }]
-      });
+      window.addEventListener('scroll', this.throttledHandleScroll);
+      if (localStorage.getItem('KNOW_THEME')) return;
+      const themeTab = document.querySelector('.nav-item-theme');
+      this.introBX = themeTab.offsetLeft + (themeTab.clientWidth * 0.5) - (300 / 2);
+      this.introBY = themeTab.offsetTop + 40;
+      this.showIntroA = true;
+      addClass(document.body, 'el-loading-parent--hidden');
     }
   };
 </script>

examples/pages/template/theme.tpl

@@ -97,6 +97,9 @@ export default {
       this.userTheme = [];
       saveUserThemeToLocal(this.userTheme);
     }
+    this.$nextTick(() => {
+      window.scrollTo(0, 0);
+    });
   },
   data() {
     return {

package.json

@@ -121,7 +121,6 @@
     "mocha": "^6.0.2",
     "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "perspective.js": "^1.0.0",
     "postcss": "^7.0.14",
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",

yarn.lock

@@ -2999,7 +2999,7 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-dom-walk@^0.1.0, dom-walk@^0.1.1:
+dom-walk@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
   integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
@@ -7270,15 +7270,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-perspective.js@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/perspective.js/-/perspective.js-1.0.0.tgz#b14aca449043fcfd21297fabd2dfa184f42cb26c"
-  integrity sha1-sUrKRJBD/P0hKX+r0t+hhPQssmw=
-  dependencies:
-    color-convert "^1.9.0"
-    dom-walk "^0.1.1"
-    throttle-debounce "^1.0.1"
-
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"