Skip to content

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

fix:首页多个tip

parent d28359ab
Showing with 125 additions and 58 deletions
src/modules/home/Home.jsx
import React, { useEffect, useState } from 'react';
import { Select, Tooltip } from 'antd';
import { Select, Tooltip, Carousel, Popover } from 'antd';
import DataSet from "@antv/data-set";
import { Chart as G2Chart } from '@antv/g2';
import {
......@@ -25,9 +25,23 @@ 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)
const [tipType, setTipType] = useState(0) //0不显示1即将过期2已过期
useEffect(()=> {
BaseService.getLesseeVersionMsg()
......@@ -37,24 +51,22 @@ function HomeTip() {
},[])
return isOverNum ? (
return (
<div className="home-tip">
<div className="tip">
<Carousel dotPosition="left" dots={false} autoplay={true}>
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>温馨提示：企业使用人数已达上限，将无法新增员工、学员，如需增加人数限制，请联系小麦企学院服务平台。
<div className="renew-btn">立即续费
<div className="renew-popover">
<div className="popover-arrow"><span class="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 className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>温馨提示：企业使用人数已达上限，将无法新增员工、学员，如需增加人数限制，请联系小麦企学院服务平台。
<Popover placement="bottom" content={RenewPopover}><div className="renew-btn">立即续费</div></Popover>
</div>
</Carousel>
</div>
</div>
) : ("")
)
}
class Home extends React.Component {
......
src/modules/home/Home.less
......@@ -28,36 +28,11 @@
font-family: 'number';
src: url('https://image.xiaomaiketang.com/xm/n2sADd2jY6.TTF');
}
.home-tip {
height: 40px;
background: #FFE7E7;
margin-bottom: 16px;
.content {
font-size: 14px;
color: #666666;
font-weight: 400;
line-height: 40px;
padding-left: 16px;
.renew-btn {
display: inline-block;
width: 80px;
height: 28px;
background: #FF4F4F;
border-radius: 2px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 28px;
text-align: center;
cursor: pointer;
.renew-popover {
display: none;
position: absolute;
z-index: 1000;
#renew-popover {
width: 276px;
height: 294px;
transform: translate(-98px,13px);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
// 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;
......@@ -67,24 +42,24 @@
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;
}
// 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;
......@@ -97,11 +72,39 @@
}
}
}
.home-tip {
display: flex;
.tip {
height: 40px;
background: #FFE7E7;
margin-bottom: 16px;
.content {
font-size: 14px;
color: #666666;
font-weight: 400;
line-height: 40px;
padding-left: 16px;
.renew-btn {
display: inline-block;
width: 80px;
height: 28px;
background: #FF4F4F;
border-radius: 2px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 28px;
text-align: center;
cursor: pointer;
&:hover .renew-popover {
display: block;
}
}
}
}
}
.data-wrap{
background: #FFF;
......@@ -473,3 +476,54 @@
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
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