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,.6); } body{ background-color: #EBD2FB; } .main{ width: 10rem; margin: 0 auto; position: relative; height: auto; font-size: 0; background: url(../img/bg.png?v=202104151141111111) repeat-y; background-size: 100% auto; padding-bottom: 0.4rem; } .mCon{ padding-top: 7rem; } .rule{ width: 1.573rem; height: 1.466rem; position: fixed; right: 0.12rem; top: 6.386rem; z-index: 1000; } .ruleMasking{ background: url(../img/rulebg.png?v=202004201221) no-repeat; background-size: 100% 100%; width: 9.2rem; height: 9.04rem; position: relative; } .closeMasking{ width: 0.906rem; height: 0.906rem; position: absolute; right: 0.4rem; top: 0.933rem; } .ruleTime{ font-size: 0.373rem; color: #4C66C9; position: absolute; top: 3rem; left:1.8rem; width: 6.2rem; } .noMasking,.yesMasking{ background: url(../img/bg1.png) no-repeat; background-size: 100% 100%; width: 9.2rem; height: 6.2rem; position: relative; } .noMasking .closeMasking,.yesMasking .closeMasking,.onlyMasking1 .closeMasking,.successMasking .closeMasking,.successMasking2 .closeMasking{ top: 0.426rem; } .noMaskTitle{ font-size: 0.346rem; color: #4C66C9; position: absolute; top: 2rem; left: 0; width: 100%; text-align: center; } .noSubmit{ position: absolute; bottom: 0.733rem; left: 50%; margin-left: -1.6rem; width: 3.2rem; height: 1.066rem; } .yesT1,.yesT2{ font-size: 0.346rem; color: #4C66C9; position: absolute; top: 2rem; left: 0; width: 100%; text-align: center; } .yesT2{ top: 2.4rem; } .line{ position: absolute; left: 50%; top: 3.85rem; width: 8.666rem; margin-left: -4.333rem; height: 0.026rem; } .yesBtn{ position: absolute; bottom: 0.733rem; left: 0.8rem; width: 3.2rem; height: 1.066rem; } .yesSubmit2{ left: auto; right: .8rem; } .onlyMasking1,.onlyMasking2,.onlyMasking3,.successMasking,.successMasking2{ width: 9.2rem; position: relative; padding-top: 1.26rem; } .onlyMaskingBg{ background: url(../img/bg1.png) no-repeat; background-size: 100% 100%; width: 9.2rem; height: 6.2rem; position: relative; } .successMasking{ height: 8.533rem; } .successMasking2{ height: 10.4rem; } .successMaskingBg{ background: url(../img/bg2.png) no-repeat; background-size: 100% 100%; width: 9.2rem; height: 8.533rem; position: relative; } .successMasking2 .successMaskingBg{ background: url(../img/mbg2.png) no-repeat; background-size: 100% 100%; height: 10.4rem; } .successMaskingBg .line{ top: 8rem; } .successMasking .line{ top: 6rem; } .successMasking2 .giftBox{ top: 2rem; height: auto; } .successMasking2 .giftDetailName1,.successMasking2 .giftDetailName2{ margin-top: 0.1rem; } .successMasking2 .giftDetail{ width: 2.45rem; } .successMasking2 .giftDetailImg{ margin: 0 auto; } .maskingTitle{ background: url(../img/title.png) no-repeat; background-size: 100% 100%; width: 6.613rem; height: 2.013rem; line-height: 3.1rem; font-size: 0.373rem; font-weight: bold; color: #FFF; text-align: center; position: absolute; left: 50%; margin-left: -3.306rem; top: 0; z-index: 1; } .onlyMaskingBtn{ width: 3.24rem; height: 1.066rem; position: absolute; left: 50%; margin-left: -1.62rem; bottom: 0.733rem; } .only2MaskTitle{ font-size: 0.346rem; color: #FF7D7D; position: absolute; top: .773rem; left: 0; width: 100%; text-align: center; } .only2Msg{ font-size: 0.346rem; color: #9790E0; position: absolute; top: 1.35rem; left: 0; width: 100%; text-align: center; } .onlyId,.onlyName{ position: absolute; left: 3.44rem; top: 2.066rem; font-size: .346rem; color: #FF7D7D; font-weight: bold; } .onlyId input{ width: 2rem; margin-left: 0.266rem; text-shadow:none; color:#9790E0; background-color: transparent; margin-top: -.05rem; } .onlyId input::-webkit-input-placeholder { color:#9790E0; } .onlyId input:-ms-input-placeholder { color:#9790E0; } .onlyId input:-moz-placeholder { color:#9790E0; } .onlyId input::-moz-placeholder { color:#9790E0; } .onlyName{ top: 2.666rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 4rem; } .onlyName span{ width: 2rem; color:#FFF; text-shadow:none; -webkit-text-stroke: 0.5px #f59bef; margin-left: 0.04rem; } .giftBox{ position: absolute; left: 0; top: 2rem; width: 100%; text-align: center; height: 2.8rem; font-size: 0; } .giftDetail{ position: relative; display: inline-block; width: 2rem; height: 2.8rem; text-align: center; } .giftDetailImg{ width: 1.6rem; height: 1.6rem; position: relative; background: url(../img/imgBg.png) no-repeat; background-size: 100% 100%; text-align: center; margin: 0 auto; } .giftDetailImg img{ width: 100%; } .giftDetailName1,.giftDetailName2{ margin-top: 0.266rem; font-size: .346rem; color: #4C66C9; width: 100%; } .giftDetailName2{ margin-top: 0.1rem; } .mHead{ width: 10rem; height: 7.866rem; position: relative; } .smallBg,.bigBg{ width: 9.2rem; height: 7.533rem; position: relative; padding-top: 1.26rem; margin: 0.133rem auto 0; } .bgBox:first-child{ margin-top: 0; } .bigBg{ height: 10.2rem; } .smallTitle,.bigTitle{ background: url(../img/title.png) no-repeat; background-size: 100% 100%; width: 6.613rem; height: 2.013rem; line-height: 3.1rem; font-size: 0.373rem; font-weight: bold; color:#FFF; text-align: center; position: absolute; left: 50%; margin-left: -3.306rem; top: 0; z-index: 1; } .smallTitle2,.bigTitle2{ font-size: 0.373rem ; font-weight: bold; color:#9790E0; position: absolute; top: 2.3rem; left: 0; width: 100%; text-align: center; z-index: 1; } .smallTitle2 span,.bigTitle2 span{ font-weight: bold; font-size: 0.55rem; color: #4C66C9; } .smallBg1,.bigBg1{ width: 100%; height: 100%; position: relative; } .smallBox{ width: 8.4rem; height: 3.3rem; position: absolute; left: 50%; top: 3.2rem; margin-left: -4.2rem; } .smallDetail{ width: 2.1rem; position: relative; text-align: center; display: inline-block; font-size: 0; } .smallDetail img{ width: 1.986rem; height: 1.986rem; position: relative; } .smallDetail p{ font-size: 0.346rem; color: #9790E0; width: 100%; text-align: center; margin-top: 0.133rem; } .smallLine,.bigLine{ width: 8.666rem; height: 0.026rem; position: absolute; left: 50%; margin-left: -4.333rem; top: 7rem; } .bigLine{ top: 9.75rem; } .mCharge{ position: absolute; left: 0.906rem; bottom: 0.64rem; font-size: 0.346rem; font-weight: bold; color:#9790E0; } .mCharge font.mNum{ font-size: 0.48rem; vertical-align: -.02rem; color:#4C66C9; } .mBtn{ width:3.04rem; height: 0.986rem; position: absolute; right: 0.533rem; bottom: 0.413rem; } .bigBox{ width: 7.5rem; height: 6.5rem; position: absolute; left: 50%; top: 3rem; margin-left: -3.75rem; text-align: center; } .bigDetail{ width: 2.5rem; position: relative; text-align: center; display: inline-block; font-size: 0; } .bigDetail:nth-child(n+3){ margin-top: 0.133rem; } .bigDetailBg{ width: 1.986rem; height: 1.986rem; position: relative; background: url(../img/imgBg.png) no-repeat; background-size: 100% 100%; text-align: center; margin: 0 auto; } .bigDetailBg img { width:100%; } .bigDetail p { font-size: 0.346rem; color: #9790E0; width: 100%; text-align: center; margin-top: 0.1rem; } .ruleMaskBox{ position: absolute; left: 0.593rem; top: 2.533rem; width: 8rem; height: auto; } .ruleMaskInfo{ display:flex; justify-content:flex-start; align-items:flex-start; } .ruleMaskInfo1{ align-items:center; } .ruleMaskTitle{ font-size: 0.4rem; font-weight: bold; color:#ff7d7d; min-width: 1.15rem; height: .5rem; line-height: .5rem; } .ruleMaskDesc{ font-size: 0.346rem; color:#4c66d8; } .ruleMaskInfo2 .ruleMaskDesc,.ruleMaskInfo3 .ruleMaskDesc{ vertical-align: middle; margin-top: .03rem; } .ruleMaskDesc p{ line-height: 1.2; } .ruleMaskInfo2,.ruleMaskInfo3{ margin-top: 0.2rem; }