Skip to content

X
xiaomai-cloud-class-web
Commit 0d915384 by maolipeng
Options

feat:添加首页弹窗

parent 0638c2b8
Showing with 118 additions and 2 deletions
src/modules/root/CollegeManagePage.jsx
......@@ -14,6 +14,26 @@ const roleMap = {
CloudOperator: '运营师',
};
function ExpirationPopover(props) {
return (
<div className="expirationpopover">
<div className="dialog">
<div className="title">服务到期提醒</div>
<div className="tip-text">当前企业购买的小麦企学院服务已于 到期，到期后仍可访问，但功能不可使用，建议尽快续费购买哦~</div>
<div className="qrcode">
<img src="https://image.xiaomaiketang.com/xm/HPTEsZf5DQ.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 className="button">我知道了</div>
</div>
</div>
)
}
export default class CollegeManagePage extends React.Component {
constructor(props) {
super(props);
......@@ -132,6 +152,7 @@ export default class CollegeManagePage extends React.Component {
} = this.state;
return (
<div className="college-manage-page">
<ExpirationPopover />
<div className="college-header">
<div className="box">
<img className="box-image" src="https://image.xiaomaiketang.com/xm/fe4NCjr7XF.png" />
......
src/modules/root/CollegeManagePage.less
......@@ -183,4 +183,78 @@
}
}
}
.expirationpopover {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.7);
z-index: 1000;
.dialog {
width: 560px;
height: 486px;
background: #FFFFFF;
border-radius: 4px;
.title {
text-align: center;
font-size: 20px;
color: #333333;
font-weight: 500;
margin-top: 40px;
}
.tip-text {
font-size: 16px;
color: #666666;
font-weight: 400;
margin-top: 16px;
margin-right: 40px;
margin-left: 40px;
}
.qrcode {
width: 182px;
height: 204px;
background: #F1F3F6;
border-radius: 2px;
margin-top: 16px;
margin-left: auto;
margin-right: auto;
img {
width: 150px;
height: 150px;
margin: 16px 16px 8px 16px;
}
.des {
text-align: center;
font-size: 14px;
color: #333333;
font-weight: 400;
}
}
.phone {
text-align: center;
font-size: 14px;
color: #333333;
font-weight: 400;
margin-top: 16px;
}
.button {
width: 80px;
height: 32px;
background: #2966FF;
cursor: pointer;
margin-left: auto;
margin-right: auto;
margin-top: 24px;
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 32px;
text-align: center;
}
}
}
}
\ No newline at end of file
src/modules/root/Menu.less
......@@ -167,6 +167,25 @@
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
......@@ -20,7 +20,7 @@ function Aside(props: any) {
const [versionName,setVersionName] = useState("标准版")
const [expirationTime,setExpirationTime] = useState("2021-06-10")
const [showVersionPopover, setShowVersionPopover] = useState(false)
const [showRenewPopover, setShowRenewPopover] = useState(false)
const [showRenewPopover, setShowRenewPopover] = useState(true)
const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
useEffect(() => {
const link = props.location.pathname;
......@@ -160,7 +160,8 @@ function Aside(props: any) {
<img src="https://image.xiaomaiketang.com/xm/HPTEsZf5DQ.png" alt=""></img>
<div className="des">微信/企业微信扫码续费</div>
</div>
<div className="phone"><span className="icon iconfont">&#59440;</span>咨询电话：19157875632</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>
</div>
......
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