console
window.onload = function () {
function getRem(pwidth, prem) {
var html = document.getElementsByTagName('html')[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = (oWidth / pwidth) * prem + 'px';
console.log(oWidth, html.style.fontSize);
}
getRem(750, 10);
window.addEventListener('resize', function () {
getRem(750, 10);
});
$('.testBtn').click(function () {
$('.coupon-modal').removeClass('hide');
$('.coupon-modal-mask').removeClass('hide');
$('.coupon-modal-close').removeClass('hide');
});
$('.coupon-modal-close').click(function () {
$('.coupon-modal').addClass('hide');
$('.coupon-modal-mask').addClass('hide');
$('.coupon-modal-close').addClass('hide');
});
$('.coupon-use-btn').click(function(){
console.log("使用优惠卷")
})
}
<div class="coupon-modal hide">
<div class="coupon-content">
<div class="coupon-item-box">
<div class="coupon-item">
<div class="coupon-item-left">
<div class="coupon-item-left-box">
<span class="coupon-item-pre">¥</span>
<span class="coupon-item-price">100</span>
</div>
<div class="coupon-item-round-top"></div>
<div class="coupon-item-round-bottom"></div>
</div>
<div class="coupon-item-right">
<p class="coupon-item-right-topLine">代理记账立减券</p>
<p class="coupon-item-right-bottomLine">满1000元可用</p>
</div>
</div>
<div class="coupon-item">
<div class="coupon-item-left">
<div class="coupon-item-left-box">
<span class="coupon-item-pre">¥</span>
<span class="coupon-item-price">100</span>
</div>
<div class="coupon-item-round-top"></div>
<div class="coupon-item-round-bottom"></div>
</div>
<div class="coupon-item-right">
<p class="coupon-item-right-topLine">代理记账立减券</p>
<p class="coupon-item-right-bottomLine">满1000元可用</p>
</div>
</div>
<div class="coupon-item">
<div class="coupon-item-left">
<div class="coupon-item-left-box">
<span class="coupon-item-pre">¥</span>
<span class="coupon-item-price">100</span>
</div>
<div class="coupon-item-round-top"></div>
<div class="coupon-item-round-bottom"></div>
</div>
<div class="coupon-item-right">
<p class="coupon-item-right-topLine">代理记账立减券</p>
<p class="coupon-item-right-bottomLine">满1000元可用</p>
</div>
</div>
<div class="coupon-item">
<div class="coupon-item-left">
<div class="coupon-item-left-box">
<span class="coupon-item-pre">¥</span>
<span class="coupon-item-price">100</span>
</div>
<div class="coupon-item-round-top"></div>
<div class="coupon-item-round-bottom"></div>
</div>
<div class="coupon-item-right">
<p class="coupon-item-right-topLine">代理记账立减券</p>
<p class="coupon-item-right-bottomLine">满1000元可用</p>
</div>
</div>
</div>
<div class="coupon-use-btn">立即使用</div>
</div>
<img src="http://cdn.jsrun.top/res/jimegnkui/close.png" class="coupon-modal-close hide" />
</div>
<div class="coupon-modal-mask hide"></div>
<div class="testBtn">点击</div>
.coupon-modal *{
padding:0;
margin:0;
}
.hide{
display: none;
}
.coupon-modal {
width: 65rem;
height: 95.6rem;
position: fixed;
flex-direction: column;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -65%);
background-image: url('http://cdn.jsrun.top/res/jimegnkui/coupon-bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.coupon-modal-mask {
width: 100vw;
height: 100vh;
background: #adaaad;
opacity: 0.5;
z-index: 99998;
position: fixed;
top: 0;
left: 0;
transition: all 0.3s;
}
.coupon-modal-close {
transition: all 0.3s;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 6rem);
width: 6rem;
height: 6rem;
}
.testBtn {
position: fixed;
right: 3rem;
bottom: 4rem;
width: 80px;
height: 40px;
}
.coupon-content{
position: relative;
box-sizing: border-box;
top:30rem;
left:1.4rem;
width:62.3rem;
padding:0 5rem;
margin:0;
}
.coupon-item-box{
margin-bottom: 3rem;
height:48rem;
overflow: auto;
}
.coupon-item-box::-webkit-scrollbar {
width: 0px;
}
.coupon-item {
width: 100%;
height: 14rem;
background: #fff;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 1.5rem;
}
.coupon-item:nth-of-type(n+2){
margin-top: 3rem;
}
.coupon-item-left {
position: relative;
color: #f74847;
font-weight: bold;
}
.coupon-item-left-box {
display: flex;
align-items: center;
justify-content: center;
height: 14rem;
width: 14rem;
border-right: .1rem dashed #ffcdc5;
text-align: center;
}
.coupon-item-round-top {
position: absolute;
top: 0;
right: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: #FA6751;
transform: translate(50%, -50%);
}
.coupon-item-round-bottom {
position: absolute;
bottom: 0;
right: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: #FA6751;
transform: translate(50%, 50%);
}
.coupon-item-pre {
font-size: 4rem;
line-height: 4rem;
transform: scale(0.6);
transform-origin: center bottom;
}
.coupon-item-price {
font-size: 4rem;
line-height: 4rem;
transform: scale(1);
transform-origin: center bottom;
}
.coupon-item-right {
flex: 1;
display: flex;
flex-direction: column;
padding: 1rem 1.5rem;
align-items: flex-start;
letter-spacing: .3rem;
}
.coupon-item-right-topLine {
color: #333333;
font-weight: bold;
line-height: 4.5rem;
font-size: 2.5rem;
margin: 0;
}
.coupon-item-right-bottomLine {
color: #666666;
-webkit-text-size-adjust: none;
line-height: 4.5rem;
font-size: 2.5rem;
margin: 0;
transform: scale(0.65);
transform-origin: left center;
}
.coupon-use-btn{
width: 100%;
height: 10rem;
line-height: 10rem;
text-align: center;
font-size: 3.7rem;
font-weight: 400;
letter-spacing: .5rem;
color:#805908;
background: linear-gradient(360deg, #FEF160 0%, #FFF379 100%);
border-radius: 1rem;
}