fix:////////////

package.json

@@ -34,7 +34,7 @@
     "bizcharts": "^3.3.0",
     "bizcharts": "^3.3.0",
     "camelcase": "^5.3.1",
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "cropper": "^3.1.4",
     "cropper": "^3.1.4",
     "cross-env": "^7.0.3",
     "cross-env": "^7.0.3",
     "css-loader": "3.4.2",
     "css-loader": "3.4.2",

src/modules/root/Menu.less

@@ -165,7 +165,7 @@
           box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
           box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
           
           
         }
         }
-        &:hover .renew-popover {
+        .renew-popover-show {
           display: block;
           display: block;
         }
         }
       }
       }
@@ -182,9 +182,7 @@
       line-height: 22px;
       line-height: 22px;
       margin: 6px auto 0 auto;
       margin: 6px auto 0 auto;
     }
     }
-    &:hover .popover {
-      display: block;
-    }
+    
     .popover {
     .popover {
       display: none;
       display: none;
       position: absolute;
       position: absolute;
@@ -250,6 +248,9 @@
         }
         }
       }
       }
     }
     }
+    .popover-show {
+      display: block;
+    }
   }
   }
 }
 }
 
 

src/modules/root/Menu.tsx

@@ -6,6 +6,7 @@ import { Menu, Popover, Tooltip } from 'antd';
 import { RightOutlined } from '@ant-design/icons'
 import { RightOutlined } from '@ant-design/icons'
 import { menuList } from '../../routes//config/menuList'
 import { menuList } from '../../routes//config/menuList'
 import { XMContext } from '../../store/context';
 import { XMContext } from '../../store/context';
+import classNames from 'classnames';
 import _ from 'underscore';
 import _ from 'underscore';
 import "./Menu.less";
 import "./Menu.less";
 import { display } from 'html2canvas/dist/types/css/property-descriptors/display';
 import { display } from 'html2canvas/dist/types/css/property-descriptors/display';
@@ -18,6 +19,8 @@ function Aside(props: any) {
   const [openKeys, setOpenKeys] = useState(['']);
   const [openKeys, setOpenKeys] = useState(['']);
   const [versionName,setVersionName] = useState("标准版")
   const [versionName,setVersionName] = useState("标准版")
   const [expirationTime,setExpirationTime] = useState("2021-06-10")
   const [expirationTime,setExpirationTime] = useState("2021-06-10")
+  const [showVersionPopover, setShowVersionPopover] = useState(false)
+  const [showRenewPopover, setShowRenewPopover] = useState(false)
   const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
   const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
   useEffect(() => {
   useEffect(() => {
     const link = props.location.pathname;
     const link = props.location.pathname;
@@ -48,7 +51,26 @@ function Aside(props: any) {
   function handleMenu() {
   function handleMenu() {
     handleMenuType();
     handleMenuType();
   }
   }
+  function onVersionEnter() {
+    setShowVersionPopover(true)
+  }
+  function onVersionLeave() {
+    setShowVersionPopover(false)
+    setShowRenewPopover(false)
+  }
+  function onRenewClick() {
+    setShowRenewPopover(true)
+    setShowVersionPopover(false)
+  }
 
 
+  const versionPopoverClass = classNames({
+    'popover':true,
+    'popover-show':showVersionPopover
+  })
+  const renewPopoverClass = classNames({
+    'renew-popover': true,
+    'renew-popover-show': showRenewPopover
+  })
   return (
   return (
     <div 
     <div 
         id="left-container"
         id="left-container"
@@ -129,15 +151,15 @@ function Aside(props: any) {
       </div>
       </div>
       
       
       </div>
       </div>
-      <div className="version-info">
+      <div className="version-info" onMouseEnter={onVersionEnter} onMouseLeave={onVersionLeave}>
         <div className="row-1">
         <div className="row-1">
           <div className="version-name">{versionName}</div>
           <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 className="renew" onClick={onRenewClick}>去续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span>
+          <div className={renewPopoverClass}>sss</div>
           </div>
           </div>
         </div>
         </div>
         <div className="expiration-time">{`有效期至${expirationTime}`}</div>
         <div className="expiration-time">{`有效期至${expirationTime}`}</div>
-        <div className="popover">
+        <div className={versionPopoverClass}>
           <div className="title">版本信息</div><div className="expiration-tag">已过期</div>
           <div className="title">版本信息</div><div className="expiration-tag">已过期</div>
           <div className="content">
           <div className="content">
             <div className="widget" style={{marginRight:"40px",marginBottom:"16px"}}>
             <div className="widget" style={{marginRight:"40px",marginBottom:"16px"}}>

yarn.lock

@@ -3552,6 +3552,11 @@ classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classna
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npm.taobao.org/classnames/download/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha1-38+jiR4wbsHa0QXQ6I9EF7hTXo4=
+
 clean-css@^4.2.3:
 clean-css@^4.2.3:
   version "4.2.3"
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"