feat:添加浮窗。。。。

6913816a · maolipeng · b7ff6b1f · 6913816a · 6913816a · 6913816a
Commit 6913816a authored Jun 15, 2021 by maolipeng
Hide whitespace changes
Inline Side-by-side

Showing with 47 additions and 6 deletions

src/common/less/antd-override.less
+4 -0

src/modules/root/Menu.less
+35 -4

src/modules/root/Menu.tsx
+8 -2

No files found.
--- a/src/common/less/antd-override.less
+++ b/src/common/less/antd-override.less
@@ -10,4 +10,7 @@
  height: 100vh;
  padding: 16px;
  background-color: #F0F2F5;
+}
+.ant-tooltip-inner {
+  max-width: 1000px;
 }
\ No newline at end of file
--- a/src/modules/root/Menu.less
+++ b/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;
 }

--- a/src/modules/root/Menu.tsx
+++ b/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>