Skip to content

X
xiaomai-cloud-class-web
Commit ee671dd0 by maolipeng
Options

fix:联系我们弹窗封装

parent 9b368a77
Showing with 84 additions and 178 deletions
src/components/ContactWidget.less 0 → 100644
.ant-popover .ant-popover-content .ant-popover-inner {
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
.ant-popover-inner-content {
padding: 0;
}
}
.contact-widget {
width: 276px;
height: 294px;
overflow: hidden;
background-color: white;
background-image: url(https://image.xiaomaiketang.com/xm/CZ4a752jzi.png);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 22px;
.qrcode {
width: 182px;
height: 204px;
background-color: white;
margin: 28px auto 16px auto;
img {
width: 150px;
height: 150px;
margin: 16px 16px 8px 16px;
}
}
}
\ No newline at end of file
src/components/ContactWidget.tsx 0 → 100644
import React, { ReactElement } from "react";
import { Popover } from "antd";
import { TooltipPlacement } from "antd/lib/tooltip";
import { ActionType } from "rc-trigger/lib/interface";
import "./ContactWidget.less"
interface ContactWidgetProps {
placement: TooltipPlacement
children: React.ReactElement
visible?: boolean
trigger: ActionType | ActionType[]
}
function Content() {
return (
<div className="contact-widget">
<div className="qrcode">
<img src="https://cdn.xiaomai5.com/qixueyuankehu.png" alt=""></img>
<div className="des">微信/企业微信扫码续费</div>
</div>
<div className="phone"><svg style={{position:"relative",top:"2px",marginRight:"4px"}} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M512.651 3.78c-281.433 0-509.21 228.324-509.21 509.209 0 281.43 228.325 509.203 509.21 509.203 281.427 0 509.202-228.317 509.202-509.203 0.55-280.885-227.775-509.21-509.202-509.21z m198.205 743.553c-36.14 36.136-169.737 1.641-302.24-130.312-131.953-131.959-165.902-266.104-129.768-301.695 31.211-31.21 68.99-85.417 125.939-14.782 56.943 70.629 29.016 90.34-3.291 122.647-22.449 22.448 24.642 79.392 73.37 128.125 49.283 48.73 105.678 95.818 128.126 73.368 32.306-32.305 52.017-60.23 122.646-3.288 71.182 56.949 16.426 95.276-14.782 125.937z" p-id="4409" fill="#999999"></path></svg>
咨询电话：19157875632</div>
</div>
)
}
export default function ContactWidget(props:ContactWidgetProps) {
return <Popover
placement={props.placement}
arrowPointAtCenter
content={Content}
visible={props.visible}
trigger={props.trigger}
>
{props.children}
</Popover>
}
\ No newline at end of file
src/modules/college-manage/LimitTip.less
......@@ -14,56 +14,6 @@
display: inline-block;
color: #2966FF;
cursor: pointer;
.renew-popover {
display: none;
position: absolute;
z-index: 1000;
width: 276px;
height: 294px;
transform: translate(-98px,13px);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
background-color: white;
background-image: url(https://image.xiaomaiketang.com/xm/CZ4a752jzi.png);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 22px;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
.popover-arrow {
position: absolute;
display: block;
width: 8.48528137px;
height: 8.48528137px;
background: 0 0;
border-style: solid;
border-width: 4.24264069px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
top: -4px;
border-top-color: #fff;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #fff;
box-shadow: -2px -2px 5px #0000000f;
}
.qrcode {
width: 182px;
height: 204px;
background-color: white;
margin: 28px auto 16px auto;
img {
width: 150px;
height: 150px;
margin: 16px 16px 8px 16px;
}
}
}
&:hover .renew-popover {
display: block;
}
}
}
......
src/modules/college-manage/LimitTip.tsx
import React, { useEffect, useState } from "react";
import BaseService from "@/domains/basic-domain/baseService";
import { Tooltip } from "antd"
import ContactWidget from "@/components/ContactWidget";
import "./LimitTip.less"
export default function LimitTip(props:{total:number,type:string,tip:() => React.ReactNode}) {
......@@ -26,17 +27,9 @@ export default function LimitTip(props:{total:number,type:string,tip:() => React
isOver ? (
<>
<div style={{marginLeft:"14px",display:"inline-block"}}>当前企业使用人数已达到上限 (<span style={{color:"#333333",fontWeight:"bold"}}>{limitUser}</span>人)，将无法添加新员工、新学员，如需增加人数限制，请联系小麦企学院服务平台。</div>
<div className="renew-text">立即续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span>
<div className="renew-popover">
<div className="popover-arrow"><span className="popover-arrow-content"></span></div>
<div className="qrcode">
<img src="https://cdn.xiaomai5.com/qixueyuankehu.png" alt=""></img>
<div className="des">微信/企业微信扫码续费</div>
</div>
<div className="phone"><svg style={{position:"relative",top:"2px",marginRight:"4px"}} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M512.651 3.78c-281.433 0-509.21 228.324-509.21 509.209 0 281.43 228.325 509.203 509.21 509.203 281.427 0 509.202-228.317 509.202-509.203 0.55-280.885-227.775-509.21-509.202-509.21z m198.205 743.553c-36.14 36.136-169.737 1.641-302.24-130.312-131.953-131.959-165.902-266.104-129.768-301.695 31.211-31.21 68.99-85.417 125.939-14.782 56.943 70.629 29.016 90.34-3.291 122.647-22.449 22.448 24.642 79.392 73.37 128.125 49.283 48.73 105.678 95.818 128.126 73.368 32.306-32.305 52.017-60.23 122.646-3.288 71.182 56.949 16.426 95.276-14.782 125.937z" p-id="4409" fill="#999999"></path></svg>
咨询电话：19157875632</div>
</div>
</div>
<ContactWidget trigger="hover" placement="bottom">
<div className="renew-text">立即续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span></div>
</ContactWidget>
</>
) : ("")
}
......
src/modules/home/Home.jsx
......@@ -21,23 +21,11 @@ import moment from 'moment'
import Service from "@/common/js/service";
import BaseService from "@/domains/basic-domain/baseService";
import User from '@/common/js/user';
import ContactWidget from '@/components/ContactWidget';
import './Home.less';
const Option = Select.Option;
function RenewPopover() {
return (
<div id="renew-popover">
<div className="qrcode" >
<img src="https://cdn.xiaomai5.com/qixueyuankehu.png" alt=""></img>
<div className="des">微信/企业微信扫码续费</div>
</div>
<div className="phone"><svg style={{position:"relative",top:"2px",marginRight:"4px"}} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M512.651 3.78c-281.433 0-509.21 228.324-509.21 509.209 0 281.43 228.325 509.203 509.21 509.203 281.427 0 509.202-228.317 509.202-509.203 0.55-280.885-227.775-509.21-509.202-509.21z m198.205 743.553c-36.14 36.136-169.737 1.641-302.24-130.312-131.953-131.959-165.902-266.104-129.768-301.695 31.211-31.21 68.99-85.417 125.939-14.782 56.943 70.629 29.016 90.34-3.291 122.647-22.449 22.448 24.642 79.392 73.37 128.125 49.283 48.73 105.678 95.818 128.126 73.368 32.306-32.305 52.017-60.23 122.646-3.288 71.182 56.949 16.426 95.276-14.782 125.937z" p-id="4409" fill="#999999"></path></svg>
咨询电话：19157875632</div>
</div>
)
}
function HomeTip() {
const [isOverNum, setIsOverNum] = useState(false)
......@@ -71,7 +59,7 @@ function HomeTip() {
isOverNum && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>温馨提示：企业使用人数已达上限，将无法新增员工、学员，如需增加人数限制，请联系小麦企学院服务平台。
<Popover placement="bottom" content={RenewPopover}><div className="renew-btn">立即续费</div></Popover>
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
......@@ -79,7 +67,7 @@ function HomeTip() {
tipType === 2 && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>温版本到期提醒：当前企业购买的小麦企学院服务已于{expirationTime}到期，到期后仍可访问，但功能不可使用，建议尽快续费购买哦~
<Popover placement="bottom" content={RenewPopover}><div className="renew-btn">立即续费</div></Popover>
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
......@@ -87,7 +75,7 @@ function HomeTip() {
tipType === 1 && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>当前企业购买的小麦企学院服务仅剩{surplusDay}天（于{expirationTime}到期），为了不影响使用，建议尽快续费购买哦~
<Popover placement="bottom" content={RenewPopover}><div className="renew-btn">立即续费</div></Popover>
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
......
src/modules/home/Home.less
......@@ -429,54 +429,3 @@
max-width: none !important;
}
}
.ant-popover .ant-popover-content .ant-popover-inner {
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
.ant-popover-inner-content {
padding: 0;
#renew-popover {
width: 276px;
height: 294px;
overflow: hidden;
// transform: translate(-98px,13px);
// box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
background-color: white;
background-image: url(https://image.xiaomaiketang.com/xm/CZ4a752jzi.png);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 22px;
// box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
// .popover-arrow {
// position: absolute;
// display: block;
// width: 8.48528137px;
// height: 8.48528137px;
// background: 0 0;
// border-style: solid;
// border-width: 4.24264069px;
// left: 50%;
// transform: translateX(-50%) rotate(45deg);
// top: -4px;
// border-top-color: #fff;
// border-right-color: transparent;
// border-bottom-color: transparent;
// border-left-color: #fff;
// box-shadow: -2px -2px 5px #0000000f;
// }
.qrcode {
width: 182px;
height: 204px;
background-color: white;
margin: 28px auto 16px auto;
img {
width: 150px;
height: 150px;
margin: 16px 16px 8px 16px;
}
}
}
}
}
\ No newline at end of file
src/modules/root/Menu.less
......@@ -170,41 +170,6 @@
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);
background-color: white;
background-image: url(https://image.xiaomaiketang.com/xm/CZ4a752jzi.png);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 22px;
.qrcode {
width: 182px;
height: 204px;
background-color: white;
margin: 28px auto 16px auto;
img {
width: 150px;
height: 150px;
margin: 16px 16px 8px 16px;
}
.des {
}
}
}
.renew-popover-show {
display: block;
}
}
}
......
src/modules/root/Menu.tsx
......@@ -14,6 +14,7 @@ import _ from 'underscore';
import "./Menu.less";
import { display } from 'html2canvas/dist/types/css/property-descriptors/display';
import moment from 'moment';
import ContactWidget from '@/components/ContactWidget';
const { SubMenu } = Menu;
......@@ -72,25 +73,14 @@ function VersionPanel(props:any) {
'popover':true,
'popover-show':showVersionPopover
})
const renewPopoverClass = classNames({
'renew-popover': true,
'renew-popover-show': showRenewPopover
})
return (
<div className="version-info" onMouseEnter={onVersionEnter} onMouseLeave={onVersionLeave}>
<div className="row-1">
<div className="version-name">{versionName}</div>
<div className="renew" onClick={onRenewClick}>去续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span>
<div className={renewPopoverClass}>
<div className="qrcode">
<img src="https://cdn.xiaomai5.com/qixueyuankehu.png" alt=""></img>
<div className="des">微信/企业微信扫码续费</div>
</div>
<div className="phone"><svg style={{position:"relative",top:"2px",marginRight:"4px"}} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M512.651 3.78c-281.433 0-509.21 228.324-509.21 509.209 0 281.43 228.325 509.203 509.21 509.203 281.427 0 509.202-228.317 509.202-509.203 0.55-280.885-227.775-509.21-509.202-509.21z m198.205 743.553c-36.14 36.136-169.737 1.641-302.24-130.312-131.953-131.959-165.902-266.104-129.768-301.695 31.211-31.21 68.99-85.417 125.939-14.782 56.943 70.629 29.016 90.34-3.291 122.647-22.449 22.448 24.642 79.392 73.37 128.125 49.283 48.73 105.678 95.818 128.126 73.368 32.306-32.305 52.017-60.23 122.646-3.288 71.182 56.949 16.426 95.276-14.782 125.937z" p-id="4409" fill="#999999"></path></svg>
咨询电话：19157875632</div>
</div>
</div>
<ContactWidget trigger="click" placement="rightBottom" visible={showRenewPopover}>
<div className="renew" onClick={onRenewClick}>去续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span></div>
</ContactWidget>
</div>
<div className="expiration-time">有效期至{versionInfo.validEndTime}{isExpiration ? "(已过期)" : ""}</div>
<div className={versionPopoverClass}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment