body{ font-family: PingFang-SC-Medium; background-color: #F5F6F6; } .main{ width: 10rem; position: relative; margin: 0 auto; background-color: #F5F6F6; border-radius:0.32rem 0.32rem 0px 0px; -webkit-border-radius:0.32rem 0.32rem 0px 0px; -moz-border-radius:0.32rem 0.32rem 0px 0px; padding-bottom: 0.533rem; padding-top: 0.266rem; } .mTop{ width: 9.5rem; overflow: hidden; height: 1rem; position: relative; transition: 0.5s all; margin-left: .5rem; } .mTop span{ background: url(../images/i1.png) no-repeat; background-size: 100% 100%; width: 1rem; height: 1rem; position: absolute; left: 0; top: 0; transition: 0.5s all; } .mTop span:nth-child(2){ left: 2rem; background: url(../images/i2.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(3){ left: 4rem; background: url(../images/i3.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(4){ left: 6rem; background: url(../images/i4.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(5){ left: 8rem; background: url(../images/i5.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(6){ left: 10rem; background: url(../images/i6.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(7){ left: 12rem; background: url(../images/i7.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(8){ left: 14rem; background: url(../images/i8.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(9){ left: 16rem; background: url(../images/i9.png?v=20190910091109) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(10){ left: 18rem; background: url(../images/i10.png?v=20190910091109) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(11){ left: 20rem; background: url(../images/i11.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(1).check{ background: url(../images/i1_check.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(2).check{ background: url(../images/i2_check.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(3).check{ background: url(../images/i3_check.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(4).check{ background: url(../images/i4_check.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(5).check{ background: url(../images/i5_check.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(6).check{ background: url(../images/i6_check.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(7).check{ background: url(../images/i7_check.png) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(8).check{ background: url(../images/i8_check.png?v=201909241451) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(9).check{ background: url(../images/i9_check.png?v=20190910091109) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(10).check{ background: url(../images/i10_check.png?v=20190910091109) no-repeat; background-size: 100% 100%; } .mTop span:nth-child(11).check{ background: url(../images/i11_check.png) no-repeat; background-size: 100% 100%; } .mBottom{ position: relative; width: 10rem; height: 12.5rem; overflow: hidden; margin-top: 0.466rem; } .mDesc{ position: absolute; left: 0; top: 0; width: 10rem; height: 12.5rem; color:#FFF; font-size: .4rem; font-size: 0; } .mDesc2{ left: 10rem; } .mDesc3{ left: 20rem; } .mDesc4{ left: 30rem; } .mDesc5{ left: 40rem; } .mDesc6{ left: 50rem; } .mDesc7{ left: 60rem; } .mDesc8{ left: 70rem; } .mDesc9{ left: 80rem; } .mDesc10{ left: 90rem; } .mDesc11{ left: 100rem; } .mDescTitle{ font-size: 0; padding-left: 0.426rem; } .mDescTitle span:first-child{ /*width: 0.133rem; height: 0.133rem; background-color: #6CCDE6; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; display: inline-block; line-height: .133rem; vertical-align: middle; margin-top: -.2rem;*/ width: 0.08rem; height: 0.266rem; background-color: #999; display: inline-block; border-radius: 0.04rem; -webkit-border-radius: 0.04rem; -moz-border-radius: 0.04rem; } .mDescTitle span:last-child{ color:#333; font-size: 0.426rem; display: inline-block; margin-left: 0.133rem; } .mDescT1{ color:#E64E92; font-size: 0.346rem; padding-left: 0.533rem; margin-top: 0.433rem; } .mDescD1{ color:#666; font-size: 0.32rem; margin-top: 0.266rem; padding-left: 0.533rem; width: 8.933rem; } .mDescT2{ margin-top: 0.533rem; padding-left: 0.533rem; color:#E64E92; font-size: 0.346rem; } .mDescBtn{ width: 5.626rem; height: 1.16rem; line-height: 1.16rem; text-align: center; background:#E64E92; border-radius:0.586rem; -webkit-border-radius:0.586rem; -moz-border-radius:0.586rem; font-size: 0.4rem; color:#FFF; margin: 0.933rem auto 0; z-index: 100; } .mDescLook{ width: 100%; text-align: center; font-size: 0.346rem; color:#666; text-decoration:underline; margin-top: 0.533rem; } .mDesc1 .mDescImg{ background: url(../images/d1.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 3.6rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc2 .mDescImg{ background: url(../images/d2.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 5.306rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc2 .mDescBtn{ margin-top: 0.6rem; } .mDesc3 .mDescImg{ background: url(../images/d3.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 3.626rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc4 .mDescImg{ background: url(../images/d4.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 3.04rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc5 .mDescImg{ background: url(../images/d5.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 3.04rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc6 .mDescImg{ background: url(../images/d6.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 5.2rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc6,.mDesc7,.mDesc8{ overflow-x: auto; height: 12rem; } .mDesc7 .mDescImg{ background: url(../images/d7.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 9.093rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc8 .mDescImg{ background: url(../images/d8.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 10.36rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc9 .mDescImg{ background: url(../images/d10.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 3.906rem; position: relative; margin: 0.533rem 0 0 0.533rem; } .mDesc11 .mDescImg{ background: url(../images/d11.png) no-repeat; background-size: 100% 100%; width: 8.933rem; height: 3.906rem; position: relative; margin: 0.533rem 0 0 0.533rem; }