Revert "Revert "Chore: update new 2.9.0 index page (ElemeFE#15682)" (E…

…lemeFE#15801)" (ElemeFE#15856)

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

@@ -2,7 +2,7 @@
 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' part of this section).
+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;">
 

examples/docs/es/custom-theme.md

@@ -2,7 +2,7 @@
 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 part of this section).
+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;">
 

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

@@ -1,8 +1,8 @@
 ## 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 ttrtois 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
-Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section).
+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;">
 

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

@@ -2,7 +2,7 @@
 Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。
 
 ### 在线主题编辑器
-使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。
+使用[在线主题编辑器](./#/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;">
 

examples/pages/template/index.tpl

@@ -228,7 +228,7 @@
       color: #FFF;
       text-align: center;
       font-weight: bold;
-      font-size: 20px;
+      font-size: 24px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -423,9 +423,6 @@
         this.showIntroB = false;
       },
       hideIntroA() {
-        const themeTab = document.querySelector('.nav-item-theme');
-        this.introBX = themeTab.offsetLeft + (themeTab.clientWidth * 0.5) - (300 / 2);
-        this.introBY = themeTab.offsetTop + 40;
         this.showIntroA = false;
         this.showIntroB = true;
       }
@@ -446,6 +443,9 @@
     mounted() {
       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');
     }