修改介绍信息

.vuepress/components/HomePage.vue

@@ -41,10 +41,17 @@
         class="feature"
         v-for="(feature, index) in data.features"
         :key="index"
+        @click="$router.push({ path: feature.link })"
       >
+        <div class="feature-content">
           <h2>{{ feature.title }}</h2>
           <p>{{ feature.details }}</p>
         </div>
+        <div class="feature-mask">
+          <h2>{{ feature.title }}</h2>
+          <p style="color: #007af5; font-weight: 500;">点击查看</p>
+        </div>
+      </div>
     </div>
 
     <div style="max-width: 450px; margin: auto;">
@@ -151,7 +158,7 @@ export default {
       border 1px solid $accentColor
   .features
     border-top 1px solid $borderColor
-    padding 1.2rem 0
+    padding 2rem 0
     margin-top 2.5rem
     display flex
     flex-wrap wrap
@@ -161,7 +168,9 @@ export default {
   .feature
     flex-grow 1
     flex-basis 30%
-    max-width 30%
+    max-width 32%
+    height calc(240px + 2rem)
+    cursor pointer
     h2
       font-size 1.4rem
       font-weight 500
@@ -170,6 +179,28 @@ export default {
       color lighten($textColor, 10%)
     p
       color lighten($textColor, 25%)
+    .feature-mask
+      padding: 1rem
+      height 240px
+      border solid 1px rgb(212, 212, 213)
+      border-radius 3px
+      position relative
+      top calc(-242px - 2rem)
+      opacity 0
+      transition background-color .5s linear
+      z-index 10
+      &:hover
+        background #F9F9F9
+        box-shadow: 0 0 15px #999
+        color white
+        opacity 1
+        z-index 10
+        transition all .3s
+    .feature-content
+      border solid 1px rgb(212, 212, 213)
+      border-radius 3px
+      height 240px
+      padding: 1rem
   .footer
     padding 2.5rem
     border-top 1px solid $borderColor

README.md

@@ -2,7 +2,7 @@
 home: false
 layout: HomePage
 title: Kuboard官网_Kubernetes教程_K8S安装_管理界面
-description: Kuboard是一款免费的Kubernetes管理界面_同时该网站还提供Kubernetes安装文档_在线答疑_K8S_部署_入门_免费中文Kubernetes教程_以及在Kubernetes上部署SpringCloud的详细文档
+description: Kuboard是一款免费的Kubernetes管理界面_同时该网站还提供Kubernetes安装文档_K8S_部署_入门_免费中文Kubernetes教程_以及在Kubernetes上部署SpringCloud的详细文档
 meta:
   - name: keywords
     content: Kubernetes教程,K8S教程,Kubernetes安装,K8S安装
@@ -10,12 +10,15 @@ actionText: 在线体验
 actionText2: 开始使用 →
 actionLink2: /overview/
 features:
-- title: 快速落地 Kubernetes
-  details: 快速安装Kubernetes、免费Kubernetes教程、图形化界面、场景化设计
-- title: 微服务架构
-  details: 经典微服务参考架构：Spring Cloud 实战案例
-- title: 多层次监控
-  details: 资源层监控、中间件层监控、链路层监控
+- title: Kubernetes安装文档
+  details: 快速安装Kubernetes，每天有超过200个用户参考此文档完成Kubernetes安装，碰到问题可QQ在线答疑
+  link: /install/install-k8s.html
+- title: Kubernetes免费教程
+  details: 免费但绝不降低品质，活跃的QQ社群，与网友共同学习进步
+  link: /learning/
+- title: Kubernetes + Spring Cloud实战
+  details: 参考文档，一步一步完成Spring Cloud微服务架构在Kubernetes上的部署和管理
+  link: /learning/k8s-practice/ocp
 ---
 
 ## 简介

overview/README.md

@@ -22,58 +22,37 @@ meta:
     justify-content: space-between;">
 <div style="flex-grow: 1; flex-basis: 25%; min-width: 200px;">
   <h2 style="font-size: 1.1rem; font-weight: 500; border-bottom: none; padding-bottom: 0; color: #3a5169;">
-  快速落地 Kubernetes
+  Kubernetes安装文档
   </h2>
   <li style="color: #4e6e8e;">
-  快速安装
+  快速安装Kubernetes
   </li>
   <li style="color: #4e6e8e;">
-  图形化界面
+  每天有超过200个用户参考此文档完成Kubernetes安装
   </li>
   <li style="color: #4e6e8e;">
-  场景化设计
+  碰到问题可QQ在线答疑
   </li>
 </div>
 
 <div style="flex-grow: 1; flex-basis: 25%; min-width: 200px;">
   <h2 style="font-size: 1.1rem; font-weight: 500; border-bottom: none; padding-bottom: 0; color: #3a5169;">
-  微服务架构
+  Kubernetes免费教程
   </h2>
   <li style="color: #4e6e8e;">
-  经典微服务参考架构
+  免费但绝不降低品质
   </li>
   <li style="color: #4e6e8e;">
-  Spring Cloud 实战案例
+  活跃的QQ社群，与网友共同学习进步
   </li>
 </div>
 
 <div style="flex-grow: 1; flex-basis: 25%; min-width: 200px;">
   <h2 style="font-size: 1.1rem; font-weight: 500; border-bottom: none; padding-bottom: 0; color: #3a5169;">
-  多层次监控
+  Kubernetes+SpringCloud实战
   </h2>
   <li style="color: #4e6e8e;">
-  资源层监控
-  </li>
-  <li style="color: #4e6e8e;">
-  中间件层监控
-  </li>
-  <li style="color: #4e6e8e;">
-  链路层监控
-  </li>
-</div>
-
-<div style="flex-grow: 1; flex-basis: 25%; min-width: 180px;">
-  <h2 style="font-size: 1.1rem; font-weight: 500; border-bottom: none; padding-bottom: 0; color: #3a5169;">
-  适用范围
-  </h2>
-  <li style="color: #4e6e8e;">
-  物理机/虚拟机
-  </li>
-  <li style="color: #4e6e8e;">
-  私有云
-  </li>
-  <li style="color: #4e6e8e;">
-  阿里云、腾讯云、亚马逊云 ...
+  参考文档，一步一步完成Spring Cloud微服务架构在Kubernetes上的部署和管理
   </li>
 </div>