css代码:
/**************************遮罩****************************/
.mui-backdrop {
position: fixed;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
/*遮罩里面的内容块*/
.mui-backdrop .backdrop-content {
width: 90%;
height: auto;
background-color: white;
position: relative;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.mui-backdrop .backdrop-content .mui-icon-close {
font-size: 30px;
position: absolute;
top: -70px;
color: white;
right: 10px;
}
/**************************自定义遮罩-结束***********************/
/**********************优惠劵样式************************/
/*优惠劵的背景色*/
.youhuiquan-one-type {
height: 80px;
clear: both;
margin-top: 7px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: #FEDFA9;
}
/*.youhuiquan-one-type:first-child {
margin-top: 0;
background: #FEDFA9;
}*/
/*锯齿效果*/
.sawtooth {
/* 相对定位,方便让before和after伪元素绝对定位偏移 */
position: relative;
/* 把超出div的部分隐藏起来 */
overflow: hidden;
}
.sawtooth:before,
.sawtooth:after {
content: ' ';
width: 0;
height: 100%;
/* 绝对定位进行偏移 */
position: absolute;
top: 10px;
}
.sawtooth:before {
/* 圆点型的border */
border-right: 6px dotted white;
/* 偏移一个半径,让圆点的一半覆盖div */