From ea3d344e10bec1d4505ed6ab63e5012e29ceec03 Mon Sep 17 00:00:00 2001
From: "huanqing.shao" <shaohq@foxmail.com>
Date: Fri, 4 Oct 2019 17:15:11 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AD=94=E7=96=91=E7=BE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vuepress/theme/components/Page.vue | 12 ++++++++
 overview/README.md                  | 45 +++++++++++++++--------------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/.vuepress/theme/components/Page.vue b/.vuepress/theme/components/Page.vue
index 7525152..b367af9 100644
--- a/.vuepress/theme/components/Page.vue
+++ b/.vuepress/theme/components/Page.vue
@@ -3,6 +3,18 @@
     <slot name="top"/>
 
     <Content class="theme-default-content"/>
+
+    <!-- <el-divider>加入 Kuboard 社群</el-divider> -->
+
+    <div style="margin: auto; width: 182px;">
+      <p>
+        <Qq/> 在线答疑
+      </p>
+      <p>
+        <img src="/images/kuboard_qq.png" alt="Kubernetes教程：QQ群在线答疑"/>
+      </p>
+    </div>
+
     <div style="text-align: center; margin-bottom: 10px;" v-if="$page.path.indexOf('/learning/') === 0">
       <a href="https://github.com/eip-work/kuboard-press" target="_blank">如果您觉得 Kubernetes教程 有帮到您，点击此处，给个 Github Star，谢谢！</a>
     </div>
diff --git a/overview/README.md b/overview/README.md
index 8b19d23..5cca57c 100644
--- a/overview/README.md
+++ b/overview/README.md
@@ -95,34 +95,35 @@ Kuboard，是一款免费的 Kubernetes 图形化管理工具，Kuboard 力图
 
 ## Kuboard在线体验
 
-<p>
-<a target="_blank" :href="`http://demo.kuboard.cn/#/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
-  Kuboard 在线体验
-</a>
-</p>
+<grid :rwd="{compact: 'stack'}">
+  <grid-item size="1/3" :rwd="{tablet: '1/1', compact: '1/1'}" style="padding: 1rem 0 1rem 1rem;">
+      <el-card style="height: 100%; color: #2c3e50; line-height: 1.7;">
+        <p>
+          <a target="_blank" :href="`http://demo.kuboard.cn/#/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
+          Kuboard 在线体验
+          </a>
+        </p>
+        <p>
+        为保证环境的稳定性，在线 Demo 中只提供只读权限。<span style="color: #F56C6C; font-weight: 500;">（请在PC浏览器中打开）</span>
+        </p>
+      </el-card>
+  </grid-item>
+  <grid-item size="2/3" :rwd="{tablet: '1/1', compact: '1/1'}" style="padding: 1rem 0 1rem 1rem;">
+    <el-card style="height: 100%">
+      <a  target="_blank" :href="`http://demo.kuboard.cn/#/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
+        <p style="max-width: 100%;">
+        <img src="./README.assets/1564841972085.gif" style="border: 1px solid #d7dae2; max-width: 100%;" alt="Kubernetes教程：Kuboard 在线Demo"></img>
+        </p>
+      </a>
+    </el-card>
+  </grid-item>
+</grid>
 
-<p>
-为保证环境的稳定性，在线 Demo 中只提供只读权限。<span style="color: #F56C6C; font-weight: 500;">（请在PC浏览器中打开）</span>
-</p>
-
-<a  target="_blank" :href="`http://demo.kuboard.cn/#/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
-  <p style="max-width: 600px;">
-  <img src="./README.assets/1564841972085.gif" style="border: 1px solid #d7dae2; max-width: 100%;" alt="Kubernetes教程：Kuboard 在线Demo"></img>
-  </p>
-</a>
 
 ## Kubernetes + Devops
 
 正在编写文档，[准备好后，请通知我](https://www.wjx.top/jq/43453748.aspx)
 
-## 在线答疑
-
-  <p>
-    <Qq/>
-  </p>
-  <p>
-    <img src="/images/kuboard_qq.png" alt="Kubernetes教程：QQ群在线答疑"/>
-  </p>
 <!-- <div>
   <div style="margin-top: 10px;">未打赏用户可进 QQ 群聊，<span style="color: red;">打赏用户可进微信群聊</span>。</div>
   <div style="margin-top: 10px;">