fix:

config/routes/index.ts

@@ -38,8 +38,8 @@ const memberCenterRoute = {
       name: 'home',
       icon: 'smile',
       key: 'home',
-      component: '@/pages/index',
-      // component: '@/pages/home',
+      // component: '@/pages/index',
+      component: '@/pages/home',
     },
     ...routes,
     {

src/pages/home/index.less

@@ -6,6 +6,7 @@
   align-items: center;
   height: 90px;
   color: white;
+  position: relative;
   .gridStyle{
     display: flex;
     flex: 1;
@@ -17,26 +18,68 @@
       font-size: 12px;
       font-weight: 400;
       margin-left: 24px;
+      margin-bottom: 0;
+      padding: 0 0 8px 0;
+      line-height: 1;
+      vertical-align: middle;
+    }
+    .firstp{
+      height: 24px;
+      line-height: 24px;
     }
     .guideTitle{
       font-size: 14px;
       font-weight: 400;
     } 
-    .guideDesc{
-
-    }
     .guideIcon{
       font-size: 14px;
       margin-right: 27px;
     }
     .guideIconFirst{
       font-size: 24px;
+      vertical-align: bottom;
     }
   }
   .gridStyleFirst{
     flex: 0 0 16%;
   }
-  .gridStyleLast{
+  .guideClose{
+    width: 56px;
+    height: 20px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 0px 8px 0px 8px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+    text-align: center;
+  }
+  
+  &::after {
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #6B778C;
+    content: "";
+    position: absolute;    
+    right: 18px;
+    bottom: -7px;
+  }
+}
 
+.giudeMenuBox{
+  border-radius: 5px;
+  padding: 16px;
+  background-color: #fff;
+  flex: 0 0 16%;
+  //重写步骤条
+  :global{
+    .ant-steps-vertical.ant-steps-dot .ant-steps-item .ant-steps-icon-dot{
+      border: 1px solid #DFE1E6;
+      background-color: #fff;
+    }
+    .ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail::after{
+      background-color: #fff;
+      border-right: 1px dashed #DFE1E6;
+    }
   }
 }
\ No newline at end of file

src/pages/home/index.tsx

 import React, { useState, useEffect } from 'react'
-import { Button, Card, Space, Radio, Row, Col, Table, Tabs, Tag, Avatar, Image, List, Badge } from 'antd'
+import { Button, Card, Space, Steps, Dropdown, Radio, Row, Col, Table, Tabs, Tag, Avatar, Image, List, Badge, Menu } from 'antd'
 import cx from 'classnames'
 
 import styles from './index.less'
@@ -7,8 +7,22 @@ import StatusTag from '@/components/StatusTag'
 import { CaretUpOutlined, CompassFilled, CompassOutlined, RightCircleFilled, RightOutlined, UpOutlined } from '@ant-design/icons'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 
+const { Step } = Steps;
+
 const Home: React.FC<{}> = () => {
 
+  const menu = (
+    <div className={styles.giudeMenuBox}>
+        <Steps progressDot current={1000} direction="vertical">
+          <Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
+          <Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
+          <Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
+          <Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
+          <Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
+        </Steps>
+    </div>
+  );
+
   return (
     <PageHeaderWrapper>
       <Space direction="vertical" style={{width:'100%'}}>
@@ -16,31 +30,40 @@ const Home: React.FC<{}> = () => {
           <Col span={24}>
             <div className={styles.homeGuide}>
               <div className={cx(styles.gridStyle, styles.gridStyleFirst)}>
-                <p>
+                <p className={styles.firstp}>
                   <CompassFilled className={styles.guideIconFirst} />
-                  <span>使用向导</span>
+                  <span>&nbsp;使用向导</span>
                 </p>
               </div>
-              <div className={styles.gridStyle}>
-                <div>
-                  <p className={styles.guideTitle}>1.新建商品</p>
-                  <p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
+              <Dropdown overlay={menu}>
+                <div className={styles.gridStyle}>
+                  <div>
+                    <p className={styles.guideTitle}>1.新建商品</p>
+                    <p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
+                  </div>
+                  <UpOutlined className={styles.guideIcon} />
                 </div>
-                <UpOutlined className={styles.guideIcon} />
-              </div>
-              <div className={styles.gridStyle}>
-                <div>
-                  <p className={styles.guideTitle}>1.新建商品</p>
-                  <p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
+              </Dropdown>
+              <Dropdown overlay={menu}>
+                <div className={styles.gridStyle}>
+                  <div>
+                    <p className={styles.guideTitle}>1.新建商品</p>
+                    <p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
+                  </div>
+                  <UpOutlined className={styles.guideIcon} />
                 </div>
-                <UpOutlined className={styles.guideIcon} />
-              </div>
-              <div className={cx(styles.gridStyle, styles.gridStyleLast)}>
-                <div>
-                  <p className={styles.guideTitle}>1.新建商品</p>
-                  <p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
+              </Dropdown>
+              <Dropdown overlay={menu}>
+                <div className={cx(styles.gridStyle, styles.gridStyleLast)}>
+                  <div>
+                    <p className={styles.guideTitle}>1.新建商品</p>
+                    <p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
+                  </div>
+                  <UpOutlined className={styles.guideIcon} />
                 </div>
-                <UpOutlined className={styles.guideIcon} />
+              </Dropdown>
+              <div className={styles.guideClose}>
+                <p>关闭</p>
               </div>
             </div>
           </Col>