feat: optimize home-page style

Author: zhangmo8

packages/varlet-vue2-cli/site/pc/pages/index/index.less

@@ -138,13 +138,15 @@
     .block-button-content {
       display: flex;
       align-items: center;
+      justify-content: center;
     }
 
     .common-button {
       height: 52px;
       font-size: 18px;
       transition: all .25s;
       animation: fade-in .75s forwards;
+      text-align: center;
     }
 
     .extra-button {
@@ -166,7 +168,7 @@
     }
 
     .base-title {
-      font-size: 84px;
+      font-size: 60px;
       line-height: 72px;
       font-weight: 500;
       margin-top: 8px;

packages/varlet-vue2-cli/site/pc/pages/index/index.vue

@@ -82,7 +82,7 @@ export default ({
   },
   methods: {
     goGithub() {
-      window.open(github)
+      window.open(this.github)
     },
 
     getStar () {

packages/varlet-vue2-cli/site/pc/pages/index/locale/en-US.ts

@@ -1,5 +1,5 @@
 export default {
   started: 'GET STARTED',
-  description: 'Varlet is a Material design mobile component library developed based on Vue3, developed and maintained by partners in the community. ' +
+  description: 'Varlet-Vue2 is a Material design mobile component library developed based on Vue2, developed and maintained by partners in the community. ' +
     'Support Typescript, import on demand, dark mode, theme customization, internationalization, and provide VSCode plugin to ensure a good development experience',
 }

packages/varlet-vue2-cli/site/pc/pages/index/locale/zh-CN.ts

@@ -1,5 +1,5 @@
 export default {
   started: '起步',
-  description: 'Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，' +
-    '全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验',
+  description: 'Varlet-Vue2 是一个基于 Vue2 开发的 Material 风格移动端组件库，' +
+    '全面拥抱 Vue2 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验',
 }

packages/varlet-vue2-ui/docs/home.en-US.md

@@ -1,16 +1,9 @@
-<div class="varlet-introduce">
-  <div class="varlet-introduce__row">
-    <img class="varlet-introduce__image" src="https://varlet-vue2.vercel.app/varlet_icon.png" />
-    <div class="varlet-introduce__name">VARLET-VUE2</div>  
-  </div>
-  <div class="varlet-introduce__des">Material design mobile component library for Vue2</div>
-</div>
-
 ### Intro
 
 Varlet is a Material design mobile component library developed based on `Vue2`, developed and maintained by partners in the community.
 
 ### Features
+
 - 1.Provide more than 50 high quality general purpose components
 - 2.Components are very lightweight
 - 3.Developed by Chinese, complete Chinese and English documentation and logistics support
@@ -24,17 +17,21 @@ Varlet is a Material design mobile component library developed based on `Vue2`,
 - 11.Support dark mode
 
 ### PR & Issue
+
 If you have any problems during use, you can [issue](https://github.com/varletjs/varlet-vue2/issues) them to us on [github](https://github.com/varletjs/varlet-vue2),
 we will deal with it as soon as possible. You can also give us [PR](https://github.com/varletjs/varlet-vue2/pulls).
 
 ### Open source licenses
+
 Component library based on `MIT` licenses.
 
 ### Material De#troduction
+
 Material Design, Is a new design language from Google that aims to provide a more consistent and broader 
 "look and feel" for phones, tablets, desktops and "other platforms".
 
 ### Why Material
+
 In the early mobile devices, large color blocks and strong contrast colors had high requirements for display devices, 
 while non-linear animation and water ripples had certain requirements for GPU.
 As a result, Material style does not have a good experience in the mobile browser environment, and more flat and simple style is chosen to be put into the product.
@@ -43,5 +40,5 @@ browsers have more free time, and the ability to process animations, and Materia
 
 ### Special thanks
 
-Special thanks to `Yu Tiezhu-eddieyc@163.com` for the visual support of our component library documentation site, 
-so as to help us continue to evolve.
+Special thanks to `Yu Tiezhu-eddieyc@163.com` for the visual support of our component library documentation site,
+so as to help us continue to evolve.

packages/varlet-vue2-ui/docs/home.zh-CN.md

@@ -1,16 +1,9 @@
-<div class="varlet-introduce">
-  <div class="varlet-introduce__row">
-    <img class="varlet-introduce__image" src="https://varlet-vue2.vercel.app/varlet_icon.png" />
-    <div class="varlet-introduce__name">VARLET-VUE2</div>
-  </div>
-  <div class="varlet-introduce__des">面向 Vue2 的 Material 风格移动端组件库</div>
-</div>
-
 ### 介绍
 
 Varlet 是一个基于 `Vue2` 开发的 Material 风格移动端组件库，全面拥抱 `Vue2` 生态，由社区的小伙伴开发和维护。
 
 ### 特性
+
 - 1.提供 50个 高质量通用组件
 - 2.组件十分轻量
 - 3.由国人开发，完善的中英文文档和后勤保障
@@ -24,16 +17,20 @@ Varlet 是一个基于 `Vue2` 开发的 Material 风格移动端组件库，全
 - 11.支持暗黑模式
 
 ### PR & Issue
+
 使用过程中出现的问题可以到 [github](https://github.com/varletjs/varlet-vue2) 来给我们提 [issue](https://github.com/varletjs/varlet-vue2/issues)，
 我们会在第一时间处理问题。也可以给我们提 [PR](https://github.com/varletjs/varlet-vue2/pulls)，十分欢迎小伙伴们来找茬。
 
 ### 开源协议
+
 组件库基于 `MIT` 协议。
 
 ### Material 风格介绍
+
 Material Design，中文名：材料设计语言，是由 Google 推出的全新的设计语言，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
 
 ### 为什么选择 Material
+
 在早期的移动端设备中，大色块以及强烈对比色，对显示设备要求很高，同时非线性动画和水波纹对 GPU 有一定要求。
 导致 Material 风格并没有在移动端浏览器环境下有很好的体验，更多选择更扁平朴素的风格投入产品。
 但随着现代设备和新的 js 框架运行时处理的效率的逐步提升，浏览器有了更多的空闲时间和能力去处理动画效果，Material Design 将会给应用带来更好的体验。