💬 Updating text and literals.

src/const/website.js

 export default {
     title: "PigX",
-    logo: "P",
-    indexTitle: 'avue-cli By smallwei',
+    logo: "PigX",
+    indexTitle: 'PigX Pro 快速开发框架',
     whiteList: ["/login", "/404", "/401", "/lock"], //配置无权限可以访问的页面
     whiteTagList: ["/login", "/404", "/401", "/lock", ], //配置不添加tags页面 （'/advanced-router/mutative-detail/*'——*为通配符）
     lockPage: '/lock',
@@ -25,4 +25,4 @@ export default {
             children: 'children'
         }
     }
-}
\ No newline at end of file
+}

src/page/wel.vue

 <template>
   <div>
-    <el-row :span="24">
-      <el-col :md="7"
-              :xs="24"
-              :sm="24">
-        <basic-container>
-          <div class="info">
-            <div class="img-border">
-              <a href="#">
-                <div class="img"><img src="https://gitee.com/uploads/61/632261_smallweigit.jpg"></div>
-              </a><img alt="用户等级"
-                   src="data:image/png;base64,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"
-                   class="img-v"></div>
-            <div class="user">
-              <div class="user-img">
-                <span style="user-title">smallwei</span>
-                <div class="user-subtitle">VIP用户</div>
-              </div>
-              <div class="user-item">绑定机构：Avue后台模版</div>
-              <div class="user-item">认证信息：hello 大家好！</div>
-            </div>
-          </div>
-        </basic-container>
-      </el-col>
-      <el-col :md="17"
-              :xs="24"
-              :sm="24">
-        <basic-container>
-          <avue-data-icons :option="easyDataOption2"></avue-data-icons>
-        </basic-container>
-      </el-col>
-    </el-row>
     <basic-container>
-      <avue-data-box :option="easyDataOption"></avue-data-box>
-    </basic-container>
-    <basic-container>
-      <avue-crud :data="data"
-                 :option="tableOption">
-        <template slot-scope="scope"
-                  slot="username">
-          <el-tag>{{scope.row.username}}</el-tag>
-        </template>
-        <template slot-scope="scope"
-                  slot="stars">
-          <a :href='scope.row.git'
-             target="_blank">
-            <img :src="scope.row.stars"
-                 alt='star' />
-          </a>
-        </template>
-        <template slot-scope="scope"
-                  slot="address">
-          <a :href="scope.row.git"
-             target="_blank">{{scope.row.address}}</a>
-        </template>
-      </avue-crud>
+      <div class="banner-text">
+        <span>
+          <img src="https://img.shields.io/badge/Avue-2.0.0-green.svg" alt="Build Status">
+          <img src="https://img.shields.io/badge/Spring%20Boot-2.0.6.RELEASE-yellowgreen.svg" alt="Downloads">
+          <img src="https://img.shields.io/badge/Spring%20Cloud-Finchley.SR2-blue.svg" alt="Coverage Status">
+        </span>
+        <br/>
+        <span>
+          <el-collapse v-model="activeNames">
+            <el-collapse-item title="完整的微服务架构" name="1">
+              <div>基于Spring Cloud Gateway</div>
+              <div>基于Spring Cloud Finchley.SR2</div>
+              <div>基于Spring Boot 2.0.6.RELEASE</div>
+            </el-collapse-item>
+            <el-collapse-item title="完善的权限控制" name="2">
+              <div>基于Spring Security OAuth实现鉴权体系；</div>
+              <div>深度定制，支持全流程的登录授权，Server Resource</div>
+            </el-collapse-item>
+            <el-collapse-item title="完美的容器化支持" name="3">
+              <div>支持docker部署</div>
+              <div>支持Rancher2 + Kubernetes部署</div>
+              <div>支持企业Pass Rainbond 部署</div>
+            </el-collapse-item>
+            <el-collapse-item title="最终一致性分布式事务" name="4">
+              <div>基于开源LCN 分布式事务解决方案深度定制</div>
+              <div>完美兼容2.X，优化集群部署，提升性能</div>
+            </el-collapse-item>
+            <el-collapse-item title="SASS多租户" name="4">
+              <div>扩展Spring Cache无缝兼容</div>
+              <div>支持开发过程无感知</div>
+            </el-collapse-item>
+            <el-collapse-item title="Activiti工作流" name="4">
+              <div>基于activiti5.22整合OAuth2</div>
+              <div>支持在线流程设计</div>
+            </el-collapse-item>
+            <el-collapse-item title="动态路由" name="4">
+              <div>支持数据库存储SCG路由信息</div>
+              <div>支持前端动态编辑</div>
+            </el-collapse-item>
+            <el-collapse-item title="其他功能" name="4">
+              <div>单点登录</div>
+              <div>扩展SBA支持服务监听事件redis保存</div>
+              <div>扩展Turbine,定制展示UI</div>
+              <div>扩展ResourceServer完全屏蔽实现细节开发更简单</div>
+            </el-collapse-item>
+          </el-collapse>
+        </span>
+      </div>
+
     </basic-container>
   </div>
 </template>
 
 <script>
-export default {
-  name: "wel",
-  data () {
-    return {
-      tableOption: {
-        "border": true,
-        "index": true,
-        "expand": true,
-        "stripe": true,
-        "selection": true,
-        "page": false,
-        "menuBtn": true,
-        "menuWidth": 130,
-        "menuAlign": "center",
-        "align": "center",
-        "dic": ['type'],
-        "column": [{
-          "label": "用户名",
-          "prop": "username",
-          "width": 120,
-          "span": 24,
-          "solt": true,
-          "sortable": true,
-          "rules": [{
-            "required": true,
-            "message": "请输入用户名",
-            "trigger": "blur"
-          }]
-        },
-        {
-          "label": "类型",
-          "prop": "type",
-          "width": 80,
-          "type": "select",
-          "sortable": true,
-          "dicData": [{
-            label: '前端',
-            value: 0,
-          }, {
-            label: '后端',
-            value: 1,
-          }]
+    import { mapGetters } from 'vuex';
+    export default {
+        name: 'wel',
+        data() {
+            return {
+                activeNames: ['1', '2', '3', '4'],
+                DATA: [],
+                text: '',
+                actor: '',
+                count: 0,
+                isText: false
+            }
         },
-        {
-          "label": "stars",
-          "width": "150",
-          "prop": "stars",
-          "sortable": true,
-          "solt": true,
+        computed: {
+            ...mapGetters(['website'])
         },
-        {
-          "label": "码云",
-          "solt": true,
-          "span": 24,
-          "prop": "address",
-          "type": "textarea",
-          "overHidden": true
-        }, {
-          "label": "项目介绍",
-          "width": "300",
-          "prop": "info",
-          "editDisabled": true,
-          "formHeight": 200,
-          "type": "ueditor",
-          "span": 24,
-          "overHidden": true
-        },
-        ]
-      },
-      data: [{
-        username: "lengleng",
-        name: "lengleng",
-        number: 12,
-        type: '0',
-        stars: 'https://gitee.com/log4j/pig/badge/star.svg?theme=white',
-        git: 'https://gitee.com/log4j/pig',
-        address: "https://gitee.com/log4j",
-        info: 'Pig是基于Spring Cloud、OAuth2.0，使用Vue前后分离的开发平台,支持账号、 短信、 SSO等多种登录。 ',
-      },
-      {
-        username: "smallwei",
-        name: "smallwei",
-        number: 20,
-        type: '1',
-        stars: 'https://gitee.com/smallweigit/avue/badge/star.svg?theme=white',
-        git: 'https://gitee.com/smallweigit/avue',
-        address: "https://gitee.com/smallweigit",
-        info: 'Avue是一个后台集成解决方案，它基于 Vue.js 和 element。 使用了最新的前端技术栈，支持权限验证，第三方网站嵌套等功能。',
-      }],
-      easyDataOption2: {
-        // color: 'rgb(63, 161, 255)',
-        span: 6,
-        discount: true,
-        data: [
-          {
-            title: '错误日志',
-            icon: 'icon-cuowu'
-          },
-          {
-            title: '数据展示',
-            icon: 'icon-shujuzhanshi2'
-          },
-          {
-            title: '权限管理',
-            icon: 'icon-jiaoseguanli'
-          },
-          {
-            title: '菜单管理',
-            icon: 'icon-caidanguanli'
-          }]
-      },
-      easyDataOption: {
-        data: [
-          {
-            title: '错误日志',
-            count: 12332,
-            icon: 'icon-cuowu',
-            color: 'rgb(49, 180, 141)',
-          },
-          {
-            title: '数据展示',
-            count: 33,
-            icon: 'icon-shujuzhanshi2',
-            color: 'rgb(56, 161, 242)',
-          },
-          {
-            title: '权限管理',
-            count: 2223,
-            icon: 'icon-jiaoseguanli',
-            color: 'rgb(117, 56, 199)',
-          },
-        ]
-      }
-    };
-  },
-  computed: {
-
-  },
-  created () {
-
-  },
-  methods: {
-
-  }
-};
+        methods: {
+            getData() {
+                if (this.count < this.DATA.length - 1) {
+                    this.count++
+                } else {
+                    this.count = 0
+                }
+                this.isText = true
+                this.actor = this.DATA[this.count]
+            },
+            setData() {
+                let num = 0
+                let count = 0
+                let active = false
+                let timeoutstart = 5000
+                let timeoutend = 1000
+                let timespeed = 10
+                setInterval(() => {
+                    if (this.isText) {
+                        if (count == this.actor.length) {
+                            active = true
+                        } else {
+                            active = false
+                        }
+                        if (active) {
+                            num--
+                            this.text = this.actor.substr(0, num)
+                            if (num == 0) {
+                                this.isText = false
+                                setTimeout(() => {
+                                    count = 0
+                                    this.getData()
+                                }, timeoutend)
+                            }
+                        } else {
+                            num++
+                            this.text = this.actor.substr(0, num)
+                            if (num == this.actor.length) {
+                                this.isText = false
+                                setTimeout(() => {
+                                    this.isText = true
+                                    count = this.actor.length
+                                }, timeoutstart)
+                            }
+                        }
+                    }
+                }, timespeed)
+            }
+        }
+    }
 </script>
 
 <style scoped="scoped" lang="scss">
-.info {
-  padding: 21px 0;
-  .img-border {
-    width: 64px;
-    height: 65px;
+  .wel-contailer {
     position: relative;
-    vertical-align: middle;
-    display: inline-block;
   }
-  .img-v {
+  .banner-text {
+    position: relative;
+    padding: 0 20px;
+    font-size: 20px;
+    text-align: center;
+    color: #333;
+  }
+  .banner-img {
     position: absolute;
-    bottom: -2px;
-    right: -2px;
-    width: 22px;
-    height: 22px;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.8;
+    display: none;
   }
-  .img {
-    border-radius: 5px;
-    width: 64px;
-    height: 64px;
-    display: inline-block;
+  .actor {
+    height: 250px;
     overflow: hidden;
-    img {
-      display: block;
-      max-width: none;
-      height: 64px;
-      opacity: 1;
-      width: 64px;
-      margin-left: 0px;
-      margin-top: 0px;
-    }
-  }
-  .user {
-    margin-left: 20px;
-    display: inline-block;
-    color: rgb(153, 153, 153);
-    vertical-align: middle;
-  }
-  .user-title {
     font-size: 18px;
-    color: rgb(102, 102, 102);
-    margin-right: 5px;
-    display: inline-block;
-    max-width: 200px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    color: #333;
   }
-  .user-subtitle {
+
+  .actor:after {
+    content: '';
+    width: 3px;
+    height: 25px;
+    vertical-align: -5px;
+    margin-left: 5px;
+    background-color: #333;
     display: inline-block;
-    width: 40px;
-    height: 16px;
-    line-height: 16px;
-    border-radius: 2px;
-    padding: 0px 5px;
-    margin-left: 10px;
-    font-size: 12px;
-    text-align: center;
-    color: rgb(255, 44, 84);
-    background-color: rgb(255, 242, 244);
-    white-space: nowrap;
+    animation: blink 0.4s infinite alternate;
+  }
+
+  .typeing:after {
+    animation: none;
   }
-  .user-item {
-    font-size: 12px;
-    line-height: 20px;
+
+  @keyframes blink {
+    to {
+      opacity: 0;
+    }
   }
-}
 </style>