feat: 新增首页导航

backend/pom.xml

@@ -256,6 +256,11 @@
             <artifactId>selenium-java</artifactId>
         </dependency>
 
+        <dependency>
+            <groupId>org.jsoup</groupId>
+            <artifactId>jsoup</artifactId>
+            <version>1.14.3</version>
+        </dependency>
     </dependencies>
 
     <build>

backend/src/main/java/io/dataease/controller/wizard/ReptileController.java

@@ -0,0 +1,30 @@
+package io.dataease.controller.wizard;
+
+import com.github.xiaoymin.knife4j.annotations.ApiSupport;
+import io.dataease.service.wizard.ReptileService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.context.MessageSource;
+import org.springframework.context.i18n.LocaleContextHolder;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import javax.annotation.Resource;
+import java.util.Map;
+
+@Api(tags = "首页")
+@ApiSupport(order = 80)
+@RestController
+@RequestMapping("Reptile")
+public class ReptileController {
+
+    @Resource
+    private ReptileService reptileService;
+
+    @GetMapping("lastActive")
+    @ApiOperation("获取官方Blog最新动态")
+    public Map<String, String> lastActive() {
+        return reptileService.lastActive();
+    }
+}

backend/src/main/java/io/dataease/service/wizard/ReptileService.java

@@ -0,0 +1,45 @@
+package io.dataease.service.wizard;
+
+import io.dataease.commons.utils.HttpClientUtil;
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.jsoup.select.Elements;
+import org.springframework.stereotype.Service;
+
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * Author: wangjiahao
+ * Date: 2022/1/11
+ * Description:
+ */
+@Service
+public class ReptileService {
+    String blogUrl = "https://blog.fit2cloud.com/?cat=321";
+
+    public Map<String, String> lastActive() {
+        Map<String, String> result = new HashMap();
+        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());
+        } 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日");
+        }
+
+        return result;
+
+    }
+
+
+}

backend/src/main/resources/i18n/messages_en_US.properties

@@ -223,6 +223,7 @@ authsource_configuration_is_null=Authentication source configuration cannot be e
 角色表单=Role Form
 重置密码=Reset Password
 关于=About Us
+首页=Home Page
 i18n_auth_view=View
 i18n_auth_use=Use
 i18n_auth_export=Export

backend/src/main/resources/i18n/messages_zh_CN.properties

@@ -222,6 +222,7 @@ authsource_configuration_is_null=认证源配置不能为空
 角色表单=角色表单
 重置密码=重置密码
 关于=关于
+首页=首页
 i18n_auth_view=查看
 i18n_auth_use=使用
 i18n_auth_export=导出

backend/src/main/resources/i18n/messages_zh_TW.properties

@@ -225,6 +225,7 @@ authsource_configuration_is_null=認證源配置不能為空
 角色表单=角色表單
 重置密码=重置密碼
 关于=關於
+首页=首頁
 i18n_auth_view=查看
 i18n_auth_use=使用
 i18n_auth_export=導出

frontend/src/api/wizard/wizard.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function blogLastActive() {
+  return request({
+    url: 'Reptile/lastActive',
+    method: 'get'
+  })
+}

frontend/src/lang/en.js

@@ -1758,5 +1758,25 @@ export default {
     cmonth: 'This Month',
     cquarter: 'This Quarter',
     cyear: 'This Year'
+  },
+  wizard: {
+    welcome_title: 'Welcome To Use DataEase',
+    welcome_hint: 'Open source data visual analysis tool available to everyone',
+    demo_video: 'Demo',
+    online_document: 'Online',
+    latest_developments: 'Latest',
+    teaching_video: 'Teaching',
+    enterprise_edition: 'Enterprise',
+    contact_us: 'Contact Us',
+    demo_video_hint: 'How to make a DataEase dashboard in 3 minutes and share it with others',
+    online_document_hint: 'It covers the installation steps, user manuals, tutorials, solutions to common problems, and secondary development of DataEase',
+    teaching_video_bottom_hint: 'More videos',
+    enterprise_edition_hint1: 'Provide enterprise application scenario x-pack enhancement package',
+    enterprise_edition_hint2: 'Provide high-level original factory service support',
+    enterprise_edition_hint3: 'Provide dataease O & M security best practices',
+    open_source_community: 'Open source community',
+    click_show: 'Click To View',
+    show_more: 'Show More',
+    click_inner: 'Click To Enter'
   }
 }

frontend/src/lang/tw.js

@@ -1770,5 +1770,25 @@ export default {
     cmonth: '本月',
     cquarter: '本季',
     cyear: '本年'
+  },
+  wizard: {
+    welcome_title: '欢迎使用DataEase',
+    welcome_hint: '人人可用的开源数据可视化分析工具',
+    demo_video: '演示视频',
+    online_document: '在线文档',
+    latest_developments: '最新动态',
+    teaching_video: '教学视频',
+    enterprise_edition: '企业版',
+    contact_us: '联系我们',
+    demo_video_hint: '如何3分钟制作一个DataEase 数据看板、并分享给他人',
+    online_document_hint: '涵盖DataEase的安装步骤、用户手册、使用教程、常见问题的解决方案、以及二次开发等',
+    teaching_video_bottom_hint: '更多视频资料',
+    enterprise_edition_hint1: '提供企业级应用场景X-Pack增强包',
+    enterprise_edition_hint2: '提供高等级原厂服务支持',
+    enterprise_edition_hint3: '提供DataEase 运维安全最佳实践',
+    open_source_community: '开源社区',
+    click_show: '点击查看',
+    show_more: '查看更多',
+    click_inner: '点击进入'
   }
 }

frontend/src/lang/zh.js

@@ -1780,5 +1780,25 @@ export default {
     cmonth: '本月',
     cquarter: '本季',
     cyear: '本年'
+  },
+  wizard: {
+    welcome_title: '欢迎使用DataEase',
+    welcome_hint: '人人可用的开源数据可视化分析工具',
+    demo_video: '演示视频',
+    online_document: '在线文档',
+    latest_developments: '最新动态',
+    teaching_video: '教学视频',
+    enterprise_edition: '企业版',
+    contact_us: '联系我们',
+    demo_video_hint: '如何3分钟制作一个DataEase 数据看板、并分享给他人',
+    online_document_hint: '涵盖DataEase的安装步骤、用户手册、使用教程、常见问题的解决方案、以及二次开发等',
+    teaching_video_bottom_hint: '更多视频资料',
+    enterprise_edition_hint1: '提供企业级应用场景X-Pack增强包',
+    enterprise_edition_hint2: '提供高等级原厂服务支持',
+    enterprise_edition_hint3: '提供DataEase 运维安全最佳实践',
+    open_source_community: '开源社区',
+    click_show: '点击查看',
+    show_more: '查看更多',
+    click_inner: '点击进入'
   }
 }

frontend/src/router/index.js

@@ -95,7 +95,7 @@ export const constantRoutes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/panel/index',
+    redirect: '/wizard/index',
     hidden: true
   }
 

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,24 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">发送邮件</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f8;</span>
+                <div class="name">github</div>
+                <div class="code-name">&amp;#xe6f8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe681;</span>
+                <div class="name">电话</div>
+                <div class="code-name">&amp;#xe681;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe60d;</span>
                 <div class="name">关闭</div>
@@ -480,9 +498,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1639622225820') format('woff2'),
+  src: url('iconfont.woff2?t=1641890849948') format('woff2'),
-       url('iconfont.woff?t=1639622225820') format('woff'),
+       url('iconfont.woff?t=1641890849948') format('woff'),
-       url('iconfont.ttf?t=1639622225820') format('truetype');
+       url('iconfont.ttf?t=1641890849948') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -508,6 +526,33 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-fasongyoujian"></span>
+            <div class="name">
+              发送邮件
+            </div>
+            <div class="code-name">.icon-fasongyoujian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-github"></span>
+            <div class="name">
+              github
+            </div>
+            <div class="code-name">.icon-github
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianhua"></span>
+            <div class="name">
+              电话
+            </div>
+            <div class="code-name">.icon-dianhua
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-guanbi"></span>
             <div class="name">
@@ -1147,6 +1192,30 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fasongyoujian"></use>
+                </svg>
+                <div class="name">发送邮件</div>
+                <div class="code-name">#icon-fasongyoujian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-github"></use>
+                </svg>
+                <div class="name">github</div>
+                <div class="code-name">#icon-github</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianhua"></use>
+                </svg>
+                <div class="name">电话</div>
+                <div class="code-name">#icon-dianhua</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-guanbi"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1639622225820') format('woff2'),
+  src: url('iconfont.woff2?t=1641890849948') format('woff2'),
-       url('iconfont.woff?t=1639622225820') format('woff'),
+       url('iconfont.woff?t=1641890849948') format('woff'),
-       url('iconfont.ttf?t=1639622225820') format('truetype');
+       url('iconfont.ttf?t=1641890849948') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-fasongyoujian:before {
+  content: "\e605";
+}
+
+.icon-github:before {
+  content: "\e6f8";
+}
+
+.icon-dianhua:before {
+  content: "\e681";
+}
+
 .icon-guanbi:before {
   content: "\e60d";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1286",
+      "name": "发送邮件",
+      "font_class": "fasongyoujian",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "7239484",
+      "name": "github",
+      "font_class": "github",
+      "unicode": "e6f8",
+      "unicode_decimal": 59128
+    },
+    {
+      "icon_id": "11810462",
+      "name": "电话",
+      "font_class": "dianhua",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
     {
       "icon_id": "1367318",
       "name": "关闭",

frontend/src/views/wizard/card.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-col :span="8" class="card_main">
+    <el-row>
+      <el-col :span="8" class="card_head">
+        <span>{{ headInfo }}</span>
+      </el-col>
+      <el-col :span="1" class="triangle" />
+    </el-row>
+    <el-row class="card_content">
+      <slot />
+    </el-row>
+  </el-col>
+</template>
+
+<script>
+
+export default {
+  name: 'Card',
+  props: {
+    headInfo: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .card_main{
+    padding: 70px 40px 40px 40px;
+    height: 35vh;
+  }
+  .card_head{
+    padding-left: 15px;
+    color: white;
+    line-height: 35px;
+    font-weight: bold;
+    font-size: 20px;
+    background-color: var(--MenuActiveBG, #409EFF);
+  }
+  .triangle{
+    width: 0;
+    height: 0;
+    border-bottom: 35px solid var(--MenuActiveBG, #409EFF);
+    border-right: 30px solid transparent;
+    -webkit-transform: rotate(180deg);
+    transform: rotate(0deg);
+  }
+  .card_content{
+    border: lightgray solid 1px;
+    border-radius: 0px 5px 5px 5px;
+    height: 100%;
+  }
+
+</style>

frontend/src/views/wizard/details/ContactUs.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-row class="demo_main">
+    <el-row style="margin-top: 5%" class="demo_content">
+      <span class="icon iconfont icon-fasongyoujian" />
+      <span style="margin-left: 10px">dataease@fit2cloud.com</span>
+    </el-row>
+    <el-row class="demo_content">
+      <span class="icon iconfont icon-dianhua" />
+      <span style="margin-left: 10px">400-052-0755</span>
+    </el-row>
+    <el-row class="demo_content">
+      <span class="icon iconfont icon-github" />
+      <span class="demo_git"><a href="https://github.com/dataease/dataease/issues" target="_blank">{{ $t('wizard.open_source_community') }}</a></span>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+
+export default {
+  name: 'ContactUs',
+  data() {
+    return {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .demo_main{
+    height: 100%;
+    padding: 10px 20px 10px 20px;
+  }
+  .demo_content{
+    padding-left: 10px;
+    height: 30%;
+  }
+  .demo_git{
+    margin-left: 10px;
+    color: var(--MenuActiveBG, #409EFF);
+  }
+
+  .demo_bottom{
+    position: absolute;
+    left: 30px;
+    bottom: 10px;
+    font-weight: 500;
+    color: var(--MenuActiveBG, #409EFF);
+  }
+
+</style>

frontend/src/views/wizard/details/DemoVideo.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-row class="demo_main">
+    <div class="demo_title" />
+    <div class="demo_content">
+      <a href="https://www.bilibili.com/video/BV1UB4y1K7jA" target="_blank">{{ $t('wizard.demo_video_hint') }}</a>
+    </div>
+  </el-row>
+</template>
+
+<script>
+
+export default {
+  name: 'DemoVideo',
+  props: {
+    headInfo: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .demo_main{
+    height: 100%;
+    padding: 10px 20px 10px 20px;
+  }
+  .demo_title{
+    float: left;
+    height: 100%;
+    width: 50%;
+    background-size: 100% 100% !important;
+    background-image: url('../../../assets/deV.png');
+  }
+  .demo_content{
+    margin: auto;
+    padding-left: 10px;
+    float: left;
+    width: 50%;
+    font-weight: 500;
+    color: var(--MenuActiveBG, #409EFF);
+
+  }
+
+</style>

frontend/src/views/wizard/details/EnterpriseEdition.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-row class="demo_main">
+    <el-row class="demo_content">
+      <span>
+        {{ $t('wizard.enterprise_edition_hint1') }}
+      </span>
+      <br>
+      <span>
+         {{ $t('wizard.enterprise_edition_hint2') }}
+      </span>
+      <br>
+      <span>
+         {{ $t('wizard.enterprise_edition_hint3') }}
+      </span>
+    </el-row>
+    <el-row class="demo_bottom">
+      <a href="https://jinshuju.net/f/TK5TTd" target="_blank"> {{ $t('wizard.click_inner') }}</a>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+
+export default {
+  name: 'TeachingVideo',
+  props: {
+    headInfo: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .demo_main{
+    height: 100%;
+    padding: 10px 20px 10px 20px;
+  }
+  .demo_content{
+    padding-left: 10px;
+    float: left;
+    font-weight: 400;
+  }
+
+  .demo_bottom{
+    position: absolute;
+    left: 30px;
+    bottom: 10px;
+    font-weight: 500;
+    color: var(--MenuActiveBG, #409EFF);
+  }
+
+  .title{
+    line-height: 40px;
+  }
+
+</style>

frontend/src/views/wizard/details/LatestDevelopments.vue

@@ -0,0 +1,63 @@
+<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>
+</template>
+
+<script>
+
+import { blogLastActive } from '@/api/wizard/wizard'
+
+export default {
+  name: 'LatestDevelopments',
+  data() {
+    return {
+      title: '',
+      href: '',
+      time: ''
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      blogLastActive().then(res => {
+        this.title = res.data.title
+        this.href = res.data.href
+        this.time = res.data.time
+      })
+    }
+  }
+}
+
+</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);
+  }
+
+  .demo_bottom{
+    position: absolute;
+    left: 30px;
+    bottom: 10px;
+    font-weight: 500;
+    color: var(--MenuActiveBG, #409EFF);
+  }
+
+</style>

frontend/src/views/wizard/details/OnlineDocument.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-row class="demo_main">
+    <el-row class="demo_content">
+      <span>{{ $t('wizard.online_document_hint') }}</span>
+    </el-row>
+    <el-row class="demo_bottom">
+      <a href="https://dataease.io/docs/dev_manual/dev_manual/" target="_blank">{{ $t('wizard.click_show') }}</a>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+
+export default {
+  name: 'OnlineDocument',
+  props: {
+    headInfo: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .demo_main{
+    height: 100%;
+    padding: 10px 20px 10px 20px;
+  }
+  .demo_content{
+    padding-left: 10px;
+    float: left;
+    font-weight: 400;
+  }
+
+  .demo_bottom{
+    position: absolute;
+    left: 30px;
+    bottom: 10px;
+    font-weight: 500;
+    color: var(--MenuActiveBG, #409EFF);
+  }
+
+</style>

frontend/src/views/wizard/details/TeachingVideo.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-row class="demo_main">
+    <el-row class="demo_content">
+      <span class="title">
+        <a href="https://live.vhall.com/v3/lives/subscribe/533874762" target="_blank">40分钟带你玩转 DataEase </a>
+      </span>
+      <br>
+      <span class="title">
+        <a href="https://live.vhall.com/v3/lives/subscribe/903960272" target="_blank">用DataEase开源工具可视化 ClickHouse数据 </a>
+      </span>
+    </el-row>
+    <el-row class="demo_bottom">
+      <span style="color: black">{{ $t('wizard.teaching_video_bottom_hint') }}</span><a href="https://e.vhall.com/v3/user/home/45637107" target="_blank">{{ $t('wizard.click_inner') }}</a>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+
+export default {
+  name: 'OnlineDocument',
+  props: {
+    headInfo: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .demo_main{
+    height: 100%;
+    padding: 10px 20px 10px 20px;
+  }
+  .demo_content{
+    padding-left: 10px;
+    float: left;
+    font-weight: 400;
+    color: var(--MenuActiveBG, #409EFF);
+  }
+
+  .demo_bottom{
+    position: absolute;
+    left: 30px;
+    bottom: 10px;
+    font-weight: 500;
+    color: var(--MenuActiveBG, #409EFF);
+  }
+
+  .title{
+    line-height: 40px;
+  }
+
+</style>

frontend/src/views/wizard/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-row class="main_container">
+    <el-row class="head">
+      <span class="hint_head">{{ $t('wizard.welcome_title') }}</span> <br>
+      <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>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+
+import Card from '@/views/wizard/card'
+import DemoVideo from '@/views/wizard/details/DemoVideo'
+import OnlineDocument from '@/views/wizard/details/OnlineDocument'
+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'
+export default {
+  name: 'Wizard',
+  components: { Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs },
+  data() {
+    return {
+      cardList: [
+        {
+          headInfo: this.$t('wizard.demo_video'),
+          component: 'DemoVideo'
+        },
+        {
+          headInfo: this.$t('wizard.online_document'),
+          component: 'OnlineDocument'
+        },
+        {
+          headInfo: this.$t('wizard.latest_developments'),
+          component: 'LatestDevelopments'
+        },
+        {
+          headInfo: this.$t('wizard.teaching_video'),
+          component: 'TeachingVideo'
+        },
+        {
+          headInfo: this.$t('wizard.enterprise_edition'),
+          component: 'EnterpriseEdition'
+        },
+        {
+          headInfo: this.$t('wizard.contact_us'),
+          component: 'ContactUs'
+        }
+      ]
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .main_container {
+  }
+  .head {
+    background-color: var(--MenuActiveBG, #409EFF);
+    text-align: center;
+    color: white;
+    padding: 10px;
+    margin-top: 20px;
+  }
+  .hint_head {
+    line-height: 50px;
+    font-weight: bold;
+    font-size: 30px;
+  }
+  .hint_content {
+    line-height: 50px;
+    font-size: 20px;
+  }
+
+  .card_container {
+
+  }
+</style>