feat:添加浮窗。。。。

src/common/less/antd-override.less

@@ -11,3 +11,6 @@
   padding: 16px;
   background-color: #F0F2F5;
 }
+.ant-tooltip-inner {
+  max-width: 1000px;
+}
\ No newline at end of file

src/modules/root/Menu.less

@@ -134,21 +134,47 @@
     bottom: 0;
     width: 100%;
     cursor: pointer;
-    .version-name {
+    .row-1 {
+      width: fit-content;
       font-size: 14px;
-      text-align: center;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #999999;
       line-height: 20px;
       margin: 0 auto;
+      .version-name {
+        display: inline-block;
+        width: 58px;
+        text-align: center;
+        margin: 0 auto;
+        border-radius: 2px;
+        border: 1px solid #E8E8E8;
+      }
+      .renew {
+        display: inline-block;
+        width: 58px;
+        color: #2966FF;
+        margin-left: 8px;
+        .renew-popover {
+          display: none;
+          position: absolute;
+          width: 276px;
+          height: 294px;
+          left: 150px;
+          bottom: 52px;
+          box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
+          
+        }
+        &:hover .renew-popover {
+          display: block;
         }
+      }
+    }
+
     .expiration-time {
       width: 129px;
       height: 24px;
       text-align: center;
-      border-radius: 2px;
-      border: 1px solid #E8E8E8;
       font-size: 12px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
@@ -156,7 +182,11 @@
       line-height: 22px;
       margin: 6px auto 0 auto;
     }
+    &:hover .popover {
+      display: block;
+    }
     .popover {
+      display: none;
       position: absolute;
       z-index: 100;
       padding: 16px 22px;
@@ -222,6 +252,7 @@
     }
   }
 }
+
 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background:@active-color !important;
 }

src/modules/root/Menu.tsx

@@ -3,6 +3,7 @@ import {
   withRouter,
 } from 'react-router-dom';
 import { Menu, Popover, Tooltip } from 'antd';
+import { RightOutlined } from '@ant-design/icons'
 import { menuList } from '../../routes//config/menuList'
 import { XMContext } from '../../store/context';
 import _ from 'underscore';
@@ -129,7 +130,12 @@ function Aside(props: any) {
       
       </div>
       <div className="version-info">
-        <div className="version-name">{`版本信息：${versionName}`}</div>
+        <div className="row-1">
+          <div className="version-name">{versionName}</div>
+          <div className="renew" onPointerEnter={(e)=> e.preventDefault()}>去续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span>
+          <div className="renew-popover">sss</div>
+          </div>
+        </div>
         <div className="expiration-time">{`有效期至${expirationTime}`}</div>
         <div className="popover">
           <div className="title">版本信息</div><div className="expiration-tag">已过期</div>
@@ -148,7 +154,7 @@ function Aside(props: any) {
             </div>
             <div className="widget" style={{marginBottom:"8px"}}>
               <div className="lable" style={{display:"inline-block"}}>人数限制</div>
-                <Tooltip overlayStyle={{maxWidth:"587px"}} placement="topLeft" arrowPointAtCenter title="1、若员工/学员存在多个学院，企业人数只统计为1人；2、若一个学员既用「企业微信」登录学习又用「微信」登录学习，企业人数将统计为2人。">
+                <Tooltip overlayStyle={{maxWidth:"587px",width:"587px"}} placement="topLeft" arrowPointAtCenter title={()=>{ return (<div><div>1、若员工/学员存在多个学院，企业人数只统计为1人；</div><div>2、若一个学员既用「企业微信」登录学习又用「微信」登录学习，企业人数将统计为2人。</div></div>)}}>
                 <div  style={{display:"inline-block",position:"relative",top:"2px",marginLeft:"4px"}}><span><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1026" width="14" height="14"><path d="M512 68.266667c245.111467 0 443.733333 198.656 443.733333 443.733333s-198.621867 443.733333-443.733333 443.733333C266.922667 955.733333 68.266667 757.077333 68.266667 512S266.922667 68.266667 512 68.266667z m29.320533 596.548266c0.477867-27.989333 2.4576-48.196267 5.802667-60.654933 3.413333-12.458667 8.567467-23.4496 15.633067-33.0752 6.997333-9.557333 21.9136-24.507733 44.714666-44.714667 33.928533-30.037333 56.797867-55.637333 68.437334-76.5952a139.1616 139.1616 0 0 0 17.5104-68.846933c0-43.008-16.5888-79.701333-49.800534-110.011733-33.1776-30.378667-77.6192-45.533867-133.358933-45.533867-52.6336 0-94.958933 14.1312-126.976 42.3936-31.9488 28.2624-51.268267 68.949333-57.685333 122.094933l71.8848 8.533334c6.212267-39.6288 19.3536-68.778667 39.3216-87.483734 19.933867-18.6368 44.817067-27.989333 74.6496-27.989333 30.788267 0 56.900267 10.308267 78.165333 30.9248 21.265067 20.5824 31.880533 44.544 31.880533 71.748267 0 15.018667-3.618133 28.910933-10.922666 41.608533-7.168 12.731733-22.971733 29.764267-47.240534 51.131733-24.200533 21.367467-41.028267 37.649067-50.346666 48.810667-12.6976 15.291733-21.9136 30.481067-27.613867 45.533867-7.748267 19.933867-11.639467 43.690667-11.639467 71.133866 0 4.676267 0.1024 11.707733 0.341334 21.026134h67.242666z m8.192 140.3904v-79.735466h-79.701333v79.735466h79.701333z" fill="#bfbfbf" p-id="1027"></path></svg></span></div>
                 </Tooltip> 
               <div className="lable-text">0</div>