body .layui-layer { background-color: transparent; box-shadow: none; border-radius: 0; } body .layui-layer.layui-layer-hui { background-color: #000; filter: alpha(opacity=60); background-color: rgba(0, 0, 0, 0.6); } body{ line-height: 1.1; font-family: "微软雅黑"; } .main{ background-color: #FFF; width: 10rem; position: relative; font-size: 0; margin: 0 auto; } .mBox{ position: relative; width: 100%; margin: 0 auto; font-size: 0; } .mDetail{ width: 10rem; height: 1.733rem; border-bottom: 0.013rem solid #F0F0F0; position: relative; font-size: 0; } .mDetailImg{ position: absolute; left: 0.306rem; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); width: 0.586rem; height: 0.586rem; } .mDetail:nth-child(2) .mDetailImg{ width: 0.666rem; height: 0.426rem; left: 0.253rem; } .mDetail:nth-child(3) .mDetailImg{ width: 0.52rem; height: 0.6rem; left: 0.333rem; } .mDetailInfo{ position: absolute; left: 1.253rem; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); font-size: 0; } .mDetailInfo p{ font-size: 0.4rem; color:#333; } .mDetailInfo p:nth-child(2){ font-size: 0.32rem; color:#999; margin-top: 0.16rem; } .mDetailSelect{ background: url(../img/btn1.png) no-repeat; background-size: 100% 100%; width: 0.613rem; height: 0.613rem; position: absolute; right: 0.533rem; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); } .mDetailSelect.check{ background: url(../img/btn2.png?v=202004031902) no-repeat; background-size: 100% 100%; } .mBtn{ width: 8.533rem; height: 1.28rem; line-height: 1.28rem; text-align: center; font-size: 0.48rem; color:#FFF; background-color: #E62E74; border-radius: 0.64rem; -webkit-border-radius: 0.64rem; -moz-border-radius: 0.64rem; -ms-border-radius: 0.64rem; -o-border-radius: 0.64rem; margin: 2.48rem auto 0; } .mask{ width: 7.2rem; background: #F7F7F7; font-size: 0; border-radius: 0.213rem; -webkit-border-radius: 0.213rem; -moz-border-radius: 0.213rem; -ms-border-radius: 0.213rem; -o-border-radius: 0.213rem; position: relative; } .maskTitle{ width: 100%; position: relative; text-align: center; color: #000; font-size: 0.453rem; padding: 0.88rem 0 0.72rem; } .maskBox{ position: relative; width: 100%; text-align: center; font-size: 0; } .maskBox p{ width: 100%; height: 1.173rem; line-height: 1.173rem; font-size: 0.453rem; color:#007AFF; border-top: 1px solid #DDD; } .mask1Title{ padding: .8rem 0; position: relative; font-size: 0; } .mask1Title p{ width: 100%; text-align: center; font-size: 0.4rem; color:#000; margin-top: 0.133rem; font-weight: bold; } .mask1Title p:nth-child(1){ margin-top: 0; } .mask1Btn{ position: relative; width: 100%; text-align: center; height: 1.16rem; line-height: 1.16rem; border-top: 1px solid #DDD; font-size: 0.453rem; color:#007AFF; font-weight: bold; }