feat:99999999999

src/modules/root/Menu.less

@@ -5,7 +5,7 @@
 @active-color: #2966FF;
 .left-container {
   position: absolute;
-  z-index: 2;
+  z-index: 10;
   top: @top-height;
   left: 0;
   bottom: 0;
@@ -156,6 +156,70 @@
       line-height: 22px;
       margin: 6px auto 0 auto;
     }
+    .popover {
+      position: absolute;
+      z-index: 100;
+      padding: 16px 22px;
+      bottom: 22px;
+      width: 352px;
+      height: 198px;
+      right: -342px;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.06);
+      .title {
+        display: inline-block;
+        width: 68px;
+        height: 22px;
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 22px;
+        margin-right: 8px;
+      }
+      .expiration-tag {
+        display: inline-block;
+        width: 52px;
+        height: 18px;
+        background: #EEEEEE;
+        border-radius: 2px;
+        text-align: center;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 17px;
+      }
+      &::before {
+        position: absolute;
+        content: "";
+        width: 16px;
+        height: 16px;
+        left: -8px;
+        top: 80%;
+        border: 8px solid transparent;
+        box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.06);
+      }
+      .content {
+        margin-top: 24px;
+        .widget {
+          display: inline-block;
+        }
+        .lable {
+          font-size: 14px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 22px;
+        }
+        .lable-text {
+          margin-top: 4px;
+          font-size: 16px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 22px;
+        }
+      }
+    }
   }
 }
 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {

src/modules/root/Menu.tsx

@@ -127,12 +127,31 @@ function Aside(props: any) {
       </div>
       
       </div>
-      <Popover placement="rightBottom" content="sss" style={{width:"352px",height:"198px"}}>
       <div className="version-info">
         <div className="version-name">{`版本信息：${versionName}`}</div>
         <div className="expiration-time">{`有效期至${expirationTime}`}</div>
+        <div className="popover">
+          <div className="title">版本信息</div><div className="expiration-tag">已过期</div>
+          <div className="content">
+            <div className="widget" style={{marginRight:"40px",marginBottom:"16px"}}>
+              <div className="lable">剩余天数</div>
+              <div className="lable-text">0</div>
+            </div>
+            <div className="widget" style={{marginBottom:"16px"}}>
+              <div className="lable">有效起止日期</div>
+              <div className="lable-text">2021-01-01~2021-12-31</div>
+            </div>
+            <div className="widget" style={{marginRight:"40px",marginBottom:"8px"}}>
+              <div className="lable">剩余人数</div>
+              <div className="lable-text">0</div>
+            </div><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>
+            <div className="widget" style={{marginBottom:"8px"}}>
+              <div className="lable">人数限制<span className='iconfont icon' style={{paddingLeft:'2px'}}>&#xe61e;</span></div>
+              <div className="lable-text">0</div>
+            </div>
+          </div>
+        </div>
       </div>
-      </Popover>
       
     </div>
   );