diff --git a/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java b/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
index 56f01e09b0..3fb4b2cd80 100644
--- a/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
+++ b/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
@@ -11,6 +11,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
 import javax.annotation.Resource;
+import java.util.List;
 import java.util.Map;
 
 @Api(tags = "首页")
@@ -24,7 +25,7 @@ public class ReptileController {
 
     @GetMapping("lastActive")
     @ApiOperation("获取官方Blog最新动态")
-    public Map<String, String> lastActive() {
+    public List lastActive() {
         return reptileService.lastActive();
     }
 }
diff --git a/backend/src/main/java/io/dataease/service/wizard/ReptileService.java b/backend/src/main/java/io/dataease/service/wizard/ReptileService.java
index 2530f7d287..a8c8de74dc 100644
--- a/backend/src/main/java/io/dataease/service/wizard/ReptileService.java
+++ b/backend/src/main/java/io/dataease/service/wizard/ReptileService.java
@@ -7,8 +7,7 @@ import org.jsoup.nodes.Element;
 import org.jsoup.select.Elements;
 import org.springframework.stereotype.Service;
 
-import java.util.HashMap;
-import java.util.Map;
+import java.util.*;
 
 /**
  * Author: wangjiahao
@@ -18,27 +17,33 @@ import java.util.Map;
 @Service
 public class ReptileService {
     String blogUrl = "https://blog.fit2cloud.com/?cat=321";
+    //获取最新的前几条数据
+    private static int infoCount=1;
 
-    public Map<String, String> lastActive() {
-        Map<String, String> result = new HashMap();
+    public List lastActive() {
+        List result = new ArrayList();
         try {
             //爬取最新数据
             Document doc = Jsoup.parse(HttpClientUtil.get(blogUrl, null));
             Elements elementsContent = doc.getElementsByAttributeValue("rel", "bookmark");
             Elements elementsTime = doc.getElementsByTag("time");
-            Element lastInfo = elementsContent.get(0);
-            result.put("title",lastInfo.attr("title"));
-            result.put("href",lastInfo.attr("href"));
-            result.put("time",elementsTime.get(0).childNode(0).outerHtml());
+            for(int i = 0;i<infoCount;i++){
+                Element info = elementsContent.get(i*3);
+                Map<String, String> infoMap = new HashMap();
+                infoMap.put("title",info.attr("title"));
+                infoMap.put("href",info.attr("href"));
+                infoMap.put("time",elementsTime.get(i).childNode(0).outerHtml());
+                result.add(infoMap);
+            }
         } catch (Exception e) {
             //ignore
-            result.put("title","支持移动端展示，数据源新增对DB2的支持，DataEase开源数据可视化分析平台v1.6.0发布");
-            result.put("href","https://blog.fit2cloud.com/?p=3200");
-            result.put("time","2022年1月10日");
+            Map<String, String> infoMap = new HashMap();
+            infoMap.put("title","支持移动端展示，数据源新增对DB2的支持，DataEase开源数据可视化分析平台v1.6.0发布");
+            infoMap.put("href","https://blog.fit2cloud.com/?p=3200");
+            infoMap.put("time","2022年1月10日");
+            result.add(infoMap);
         }
-
         return result;
-
     }
 
 
diff --git a/frontend/src/assets/DataEase-0.jpg b/frontend/src/assets/DataEase-0.jpg
new file mode 100644
index 0000000000..9e9795332e
Binary files /dev/null and b/frontend/src/assets/DataEase-0.jpg differ
diff --git a/frontend/src/assets/DataEase-1.jpg b/frontend/src/assets/DataEase-1.jpg
new file mode 100644
index 0000000000..0cdc743d6b
Binary files /dev/null and b/frontend/src/assets/DataEase-1.jpg differ
diff --git a/frontend/src/assets/DataEase-2.jpg b/frontend/src/assets/DataEase-2.jpg
new file mode 100644
index 0000000000..46c9ac5281
Binary files /dev/null and b/frontend/src/assets/DataEase-2.jpg differ
diff --git a/frontend/src/assets/DataEase-3.jpg b/frontend/src/assets/DataEase-3.jpg
new file mode 100644
index 0000000000..5a1078e153
Binary files /dev/null and b/frontend/src/assets/DataEase-3.jpg differ
diff --git a/frontend/src/assets/DataEase-4.jpg b/frontend/src/assets/DataEase-4.jpg
new file mode 100644
index 0000000000..55163d03f9
Binary files /dev/null and b/frontend/src/assets/DataEase-4.jpg differ
diff --git a/frontend/src/assets/DataEase-5.jpg b/frontend/src/assets/DataEase-5.jpg
new file mode 100644
index 0000000000..1fe04aa014
Binary files /dev/null and b/frontend/src/assets/DataEase-5.jpg differ
diff --git a/frontend/src/assets/banner.png b/frontend/src/assets/banner.png
new file mode 100644
index 0000000000..1dd1951cd2
Binary files /dev/null and b/frontend/src/assets/banner.png differ
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 075aa00727..e8d7af9ded 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1820,6 +1820,9 @@ export default {
     open_source_community: 'Open source community',
     click_show: 'Click To View',
     show_more: 'Show More',
-    click_inner: 'Click To Enter'
+    click_inner: 'Click To Enter',
+    email: 'Email:',
+    tel: 'Tel:',
+    web: 'Web:'
   }
 }
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 8676988aac..c378fb7015 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1829,6 +1829,9 @@ export default {
     open_source_community: '開源社區',
     click_show: '點擊查看',
     show_more: '查看更多',
-    click_inner: '點擊進入'
+    click_inner: '點擊進入',
+    email: '邮箱：',
+    tel: '电话：',
+    web: '网址：'
   }
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 3cd5b7b94e..40822edfd0 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1839,6 +1839,8 @@ export default {
     open_source_community: '开源社区',
     click_show: '点击查看',
     show_more: '查看更多',
-    click_inner: '点击进入'
+    email: '邮箱：',
+    tel: '电话：',
+    web: '网址：'
   }
 }
diff --git a/frontend/src/views/wizard/card.vue b/frontend/src/views/wizard/card.vue
index 1e1842a395..d5d81bd750 100644
--- a/frontend/src/views/wizard/card.vue
+++ b/frontend/src/views/wizard/card.vue
@@ -54,7 +54,7 @@ export default {
     border: lightgray solid 1px;
     border-radius: 0px 5px 5px 5px;
     height: 100%;
-    overflow: hidden;
+    overflow-y: auto;
   }
 
 </style>
diff --git a/frontend/src/views/wizard/details/CardDetail.vue b/frontend/src/views/wizard/details/CardDetail.vue
new file mode 100644
index 0000000000..3e327642a5
--- /dev/null
+++ b/frontend/src/views/wizard/details/CardDetail.vue
@@ -0,0 +1,90 @@
+<template>
+  <el-row
+    class="demo_main"
+  >
+    <div class="demo_title">
+      <a target="_blank" :href="details.href">
+        <img
+          :src="require('../../../assets/DataEase-' +imgIndex + '.jpg')"
+          height="100%"
+        >
+      </a>
+    </div>
+    <div class="demo_content">
+      <el-row class="head">
+        <span>{{ details.head }}</span>
+      </el-row>
+      <el-row class="content">
+        <span v-html="details.content" />
+      </el-row>
+      <el-row class="bottom">
+        <span class="span-box">{{ details.bottom }}</span>
+      </el-row>
+    </div>
+  </el-row>
+</template>
+
+<script>
+
+export default {
+  name: 'CardDetail',
+  props: {
+    imgIndex: {
+      type: Number,
+      required: true
+    },
+    details: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      imgSrc: '../../../assets/DataEase-' + this.imgIndex + '.jpg'
+    }
+  },
+  computed: {
+
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep a:hover{color:blue;}
+  .demo_main{
+    height: 100%;
+  }
+  .demo_title{
+    float: left;
+    height: 100%;
+  }
+  .demo_content{
+    margin: auto;
+    padding-left: 15px;
+    height: 100%;
+    overflow: hidden;
+    .head{
+      padding-top: 24px;
+      color: var(--TopTextColor, #000000);
+    }
+    .content{
+      height: 50%;
+      padding-top: 15px;
+      padding-right: 10px;
+      color: var(--TextPrimary, #6D6D6D);
+      font-size: 12px;
+      overflow-y: auto;
+    }
+    .bottom{
+      height: 25%;
+      .span-box{
+        color: var(--TextPrimary, #6D6D6D);
+        font-size: 12px;
+        position: absolute;
+        bottom: 8px;
+      }
+    }
+  }
+
+</style>
diff --git a/frontend/src/views/wizard/details/LatestDevelopments.vue b/frontend/src/views/wizard/details/LatestDevelopments.vue
index fb62518076..3e1d05d21d 100644
--- a/frontend/src/views/wizard/details/LatestDevelopments.vue
+++ b/frontend/src/views/wizard/details/LatestDevelopments.vue
@@ -1,13 +1,26 @@
 <template>
-  <el-row class="demo_main">
-    <el-row class="demo_content">
-      <a :href="href" target="_blank">{{ title }}</a>
-      <br>
-      <span style="color: lightgray">{{ time }}</span>
-    </el-row>
-    <el-row class="demo_bottom">
-      <a href="https://blog.fit2cloud.com/?cat=321" target="_blank">{{ $t('wizard.show_more') }}</a>
-    </el-row>
+  <el-row
+    class="demo_main"
+  >
+    <div class="demo_title">
+      <a target="_blank" :href="details.href">
+        <img
+          :src="require('../../../assets/DataEase-' +imgIndex + '.jpg')"
+          height="100%"
+        >
+      </a>
+    </div>
+    <div class="demo_content">
+      <el-row class="head">
+        <span>{{ details.head }}</span>
+      </el-row>
+      <el-row class="content">
+        <span v-html="details.content" />
+      </el-row>
+      <el-row class="bottom">
+        <span class="span-box">{{ details.bottom }}</span>
+      </el-row>
+    </div>
   </el-row>
 </template>
 
@@ -16,13 +29,25 @@
 import { blogLastActive } from '@/api/wizard/wizard'
 
 export default {
-  name: 'LatestDevelopments',
+  name: 'CardDetail',
+  props: {
+    imgIndex: {
+      type: Number,
+      required: true
+    },
+    details: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
-      title: '',
-      href: '',
-      time: ''
+      blogsInfo: {},
+      imgSrc: '../../../assets/DataEase-' + this.imgIndex + '.jpg'
     }
+  },
+  computed: {
+
   },
   mounted() {
     this.init()
@@ -30,9 +55,7 @@ export default {
   methods: {
     init() {
       blogLastActive().then(res => {
-        this.title = res.data.title
-        this.href = res.data.href
-        this.time = res.data.time
+        this.blogsInfo = res.data[0]
       })
     }
   }
@@ -43,23 +66,37 @@ export default {
 <style lang="scss" scoped>
   .demo_main{
     height: 100%;
-    padding: 10px 20px 10px 20px;
+  }
+  .demo_title{
+    float: left;
+    height: 100%;
   }
   .demo_content{
-    padding-left: 10px;
-    float: left;
-    font-weight: 500;
-    color: var(--MenuActiveBG, #409EFF);
-    max-height: 80%;
+    margin: auto;
+    padding-left: 15px;
+    height: 100%;
     overflow: hidden;
-  }
-
-  .demo_bottom{
-    position: absolute;
-    left: 30px;
-    bottom: 10px;
-    font-weight: 500;
-    color: var(--MenuActiveBG, #409EFF);
+    .head{
+      padding-top: 24px;
+      color: var(--TopTextColor, #000000);
+    }
+    .content{
+      height: 50%;
+      padding-top: 15px;
+      padding-right: 20px;
+      color: var(--TextPrimary, #6D6D6D);
+      font-size: 12px;
+      overflow: hidden;
+    }
+    .bottom{
+      height: 25%;
+      .span-box{
+        color: var(--TextPrimary, #6D6D6D);
+        font-size: 12px;
+        position: absolute;
+        bottom: 5px;
+      }
+    }
   }
 
 </style>
diff --git a/frontend/src/views/wizard/details/LatestDevelopmentsBack.vue b/frontend/src/views/wizard/details/LatestDevelopmentsBack.vue
new file mode 100644
index 0000000000..1778310334
--- /dev/null
+++ b/frontend/src/views/wizard/details/LatestDevelopmentsBack.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-row class="demo_main">
+    <el-row class="demo_content">
+      <el-row v-for="(details,index) in blogsInfo" :key="index">
+        <a :href="details.href" target="_blank">{{ details.title }}</a>
+        <br>
+        <span style="color: lightgray">{{ details.time }}</span>
+      </el-row>
+    </el-row>
+    <el-row class="demo_bottom">
+      <a href="https://blog.fit2cloud.com/?cat=321" target="_blank">{{ $t('wizard.show_more') }}</a>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+
+import { blogLastActive } from '@/api/wizard/wizard'
+
+export default {
+  name: 'LatestDevelopments',
+  data() {
+    return {
+      blogsInfo: []
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      blogLastActive().then(res => {
+        this.blogsInfo = res.data
+      })
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .demo_main{
+    height: 100%;
+    padding: 10px 20px 10px 20px;
+  }
+  .demo_content{
+    padding-left: 10px;
+    float: left;
+    font-weight: 500;
+    color: var(--MenuActiveBG, #409EFF);
+    max-height: 80%;
+    overflow: hidden;
+  }
+
+  .demo_bottom{
+    position: absolute;
+    left: 30px;
+    bottom: 10px;
+    font-weight: 500;
+    color: var(--MenuActiveBG, #409EFF);
+  }
+
+</style>
diff --git a/frontend/src/views/wizard/index.vue b/frontend/src/views/wizard/index.vue
index d2b00b6999..1a3824dfb6 100644
--- a/frontend/src/views/wizard/index.vue
+++ b/frontend/src/views/wizard/index.vue
@@ -5,9 +5,9 @@
       <span class="hint_content">{{ $t('wizard.welcome_hint') }}</span>
     </el-row>
     <el-row class="card_container">
-      <card v-for="(cardDetail,index) in cardList" :key="index" :head-info="cardDetail.headInfo">
-        <component :is="cardDetail.component" />
-      </card>
+      <info-card v-for="(cardDetail,index) in cardList" :key="index">
+        <component :is="cardDetail.component" :img-index="index" :details="cardDetail" />
+      </info-card>
     </el-row>
   </el-row>
 </template>
@@ -21,38 +21,72 @@ import LatestDevelopments from '@/views/wizard/details/LatestDevelopments'
 import TeachingVideo from '@/views/wizard/details/TeachingVideo'
 import EnterpriseEdition from '@/views/wizard/details/EnterpriseEdition'
 import ContactUs from '@/views/wizard/details/ContactUs'
+import InfoCard from '@/views/wizard/infoCard'
+import CardDetail from '@/views/wizard/details/CardDetail'
+import { blogLastActive } from '@/api/wizard/wizard'
+
 export default {
   name: 'Wizard',
-  components: { Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs },
+  components: { InfoCard, Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs, CardDetail },
   data() {
     return {
       cardList: [
         {
-          headInfo: this.$t('wizard.demo_video'),
-          component: 'DemoVideo'
+          head: this.$t('wizard.demo_video'),
+          content: this.$t('wizard.demo_video_hint'),
+          bottom: '',
+          href: 'https://www.bilibili.com/video/BV1UB4y1K7jA',
+          component: 'CardDetail'
         },
         {
-          headInfo: this.$t('wizard.online_document'),
-          component: 'OnlineDocument'
+          head: this.$t('wizard.online_document'),
+          content: this.$t('wizard.online_document_hint'),
+          bottom: '',
+          href: 'https://dataease.io/docs/dev_manual/dev_manual/',
+          component: 'CardDetail'
         },
         {
-          headInfo: this.$t('wizard.latest_developments'),
-          component: 'LatestDevelopments'
+          head: this.$t('wizard.latest_developments'),
+          content: '',
+          bottom: '',
+          href: 'https://blog.fit2cloud.com/?cat=321',
+          component: 'CardDetail'
         },
         {
-          headInfo: this.$t('wizard.teaching_video'),
-          component: 'TeachingVideo'
+          head: this.$t('wizard.teaching_video'),
+          content: '<a href="https://live.vhall.com/v3/lives/subscribe/533874762" target="_blank"><span style="line-height: 30px">40分钟带你玩转 DataEase </span></a><br><a href="https://live.vhall.com/v3/lives/subscribe/903960272" target="_blank">用DataEase开源工具可视化 ClickHouse数据</a>',
+          bottom: '',
+          href: 'https://e.vhall.com/v3/user/home/45637107',
+          component: 'CardDetail'
         },
         {
-          headInfo: this.$t('wizard.enterprise_edition'),
-          component: 'EnterpriseEdition'
+          head: this.$t('wizard.enterprise_edition'),
+          content: this.$t('wizard.enterprise_edition_hint1') + '<br>' + this.$t('wizard.enterprise_edition_hint2') + '<br>' + this.$t('wizard.enterprise_edition_hint3'),
+          bottom: '',
+          href: 'https://jinshuju.net/f/TK5TTd',
+          component: 'CardDetail'
         },
         {
-          headInfo: this.$t('wizard.contact_us'),
-          component: 'ContactUs'
+          head: this.$t('wizard.contact_us'),
+          content: this.$t('wizard.email') + 'dataease@fit2cloud.com<br>' + this.$t('wizard.tel') + '400-052-0755<br>' + this.$t('wizard.web') + '<a target="_blank" href="https://www.dataease.io">www.dataease.io</a>',
+          bottom: '',
+          href: 'https://www.dataease.io',
+          component: 'CardDetail'
         }
       ]
     }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      blogLastActive().then(res => {
+        const blogsInfo = res.data[0]
+        this.cardList[2].content = blogsInfo.title
+        this.cardList[2].bottom = blogsInfo.time
+      })
+    }
   }
 }
 
@@ -62,23 +96,25 @@ export default {
   .main_container {
   }
   .head {
-    background-color: var(--MenuActiveBG, #409EFF);
     text-align: center;
     color: white;
     padding: 10px;
-    margin-top: 25px;
+    margin-top: 35px;
+    background-size: 100% 100% !important;
+    background-image: url('../../assets/banner.png');
   }
   .hint_head {
-    line-height: 40px;
+    line-height: 50px;
     font-weight: bold;
     font-size: 25px;
   }
   .hint_content {
-    line-height: 40px;
+    line-height: 50px;
     font-size: 15px;
   }
 
   .card_container {
+   vertical-align: middle;
 
   }
 </style>
diff --git a/frontend/src/views/wizard/infoCard.vue b/frontend/src/views/wizard/infoCard.vue
new file mode 100644
index 0000000000..ccecdbb681
--- /dev/null
+++ b/frontend/src/views/wizard/infoCard.vue
@@ -0,0 +1,36 @@
+<template>
+  <el-col :span="8" class="card_main">
+    <el-row class="card_content">
+      <slot />
+    </el-row>
+  </el-col>
+</template>
+
+<script>
+
+export default {
+  name: 'InfoCard',
+  props: {
+  },
+  data() {
+    return {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .card_main{
+    padding: 5% 25px 30px 25px;
+    min-height: 250px;
+    height: 33vh;
+    max-height: 300px;
+  }
+  .card_content{
+    border: lightgray solid 1px;
+    border-radius: 5px;
+    height: 100%;
+    overflow: hidden;
+  }
+
+</style>