diff --git a/src/views/index/components/VersionInformation.vue b/src/views/index/components/VersionInformation.vue
index 00baaef..653d868 100644
--- a/src/views/index/components/VersionInformation.vue
+++ b/src/views/index/components/VersionInformation.vue
@@ -1,56 +1,78 @@
 <template>
-  <div class="index-container">
-    <h3>
-      欢迎体验全网首个基于vue{{ dependencies["vue"] }} + ant-design-vue{{
-        dependencies["ant-design-vue"]
-      }}开发的admin框架vue-admin-beautiful-antdv，vue3.0的流畅超乎了我们的想象。。。
-    </h3>
-    <a-card class="version-information" title="">
-      <template v-slot:extra>
-        <a href="#">部署时间:{{ updateTime }}</a>
-      </template>
-      <table class="table">
-        <tr>
-          <td>vue</td>
-          <td>{{ dependencies["vue"] }}</td>
-          <td>@vue/cli</td>
-          <td>{{ devDependencies["@vue/cli-service"] }}</td>
-        </tr>
-        <tr>
-          <td>vuex</td>
-          <td>{{ dependencies["vuex"] }}</td>
-          <td>vue-router</td>
-          <td>{{ dependencies["vue-router"] }}</td>
-        </tr>
-        <tr>
-          <td>eslint-plugin-vue</td>
-          <td>{{ devDependencies["eslint-plugin-vue"] }}</td>
-          <td>axios</td>
-          <td>{{ dependencies["axios"] }}</td>
-        </tr>
-        <tr>
-          <td>babel-eslint</td>
-          <td>{{ devDependencies["babel-eslint"] }}</td>
-          <td>ant-design-vue</td>
-          <td>{{ dependencies["ant-design-vue"] }}</td>
-        </tr>
-        <tr>
-          <td>PRO版演示地址</td>
-          <td colspan="3">
-            <a
-              href="https://chu1204505056.gitee.io/vue-admin-beautiful-pro/#/index"
-            >
-              https://chu1204505056.gitee.io/vue-admin-beautiful-pro/#/index
-            </a>
-          </td>
-        </tr>
-        <tr>
-          <td>官方QQ群</td>
-          <td colspan="3">972435319、1139183756</td>
-        </tr>
-      </table>
-    </a-card>
-  </div>
+  <a-alert
+    :message="
+      '欢迎体验全网首个基于vue' +
+      dependencies['vue'] +
+      'ant-design-vue' +
+      dependencies['ant-design-vue'] +
+      '开发的admin框架vue-admin-beautiful-antdv，vue3.0的流畅超乎了我们的想象。。。'
+    "
+    type="success"
+    show-icon
+  />
+
+  <a-card class="version-information">
+    <template v-slot:title>
+      <a
+        target="_blank"
+        href="https://github.com/chuzhixin/vue-admin-beautiful/tree/vue3.0-antdv"
+      >
+        <img
+          style="margin-right: 10px"
+          src="https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=flat-square&label=Stars&logo=github"
+        />
+      </a>
+    </template>
+    <template v-slot:extra>
+      <a href="#">部署时间:{{ updateTime }}</a>
+    </template>
+    <table class="table">
+      <tr>
+        <td>vue</td>
+        <td>{{ dependencies["vue"] }}</td>
+        <td>@vue/cli</td>
+        <td>{{ devDependencies["@vue/cli-service"] }}</td>
+      </tr>
+      <tr>
+        <td>vuex</td>
+        <td>{{ dependencies["vuex"] }}</td>
+        <td>vue-router</td>
+        <td>{{ dependencies["vue-router"] }}</td>
+      </tr>
+      <tr>
+        <td>eslint-plugin-vue</td>
+        <td>{{ devDependencies["eslint-plugin-vue"] }}</td>
+        <td>axios</td>
+        <td>{{ dependencies["axios"] }}</td>
+      </tr>
+      <tr>
+        <td>babel-eslint</td>
+        <td>{{ devDependencies["babel-eslint"] }}</td>
+        <td>ant-design-vue</td>
+        <td>{{ dependencies["ant-design-vue"] }}</td>
+      </tr>
+      <tr>
+        <td>v2.x版演示地址（MIT协议，商用免费）</td>
+        <td colspan="3">
+          <a href="https://chu1204505056.gitee.io/vue-admin-beautiful/">
+            https://chu1204505056.gitee.io/vue-admin-beautiful/
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>PRO版演示地址</td>
+        <td colspan="3">
+          <a href="https://chu1204505056.gitee.io/vue-admin-beautiful-pro/">
+            https://chu1204505056.gitee.io/vue-admin-beautiful-pro/
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>官方QQ群</td>
+        <td colspan="3">972435319、1139183756</td>
+      </tr>
+    </table>
+  </a-card>
 </template>
 <script>
   import { dependencies, devDependencies } from "*/package.json";
@@ -67,6 +89,7 @@
 </script>
 <style lang="less" scoped>
   .version-information {
+    margin-top: @vab-margin;
     .table {
       width: 100%;
       color: #666;
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 04aa7db..82631dd 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,14 +1,5 @@
 <template>
   <div class="index-container">
-    <a
-      target="_blank"
-      href="https://github.com/chuzhixin/vue-admin-beautiful/tree/vue3.0-antdv"
-    >
-      <img
-        style="margin-right: 10px"
-        src="https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=flat-square&label=Stars&logo=github"
-      />
-    </a>
     <version-information />
   </div>
 </template>