body{background-color: #FFF;} .main{ position: relative; width: 10rem; margin: 0 auto; font-size: 0; min-height: 100%; background-color: #FFF; } .mBg{ position: absolute; left: 50%; top: 0; width: 5.28rem; height: 3.48rem; transform: translate(-50%,0); z-index: 1; opacity: .6; } .mList{ position: relative; width: 10rem; margin: 0 auto; padding: .64rem 0 1.866rem; z-index: 10; } .mDetail{ width: 10rem; position: relative; font-size: 0; height: 1.813rem; } .mDetailNum{ position: absolute; left: 0; top: 0; width: 1.4rem; text-align: center; height: 1.813rem; line-height: 1.813rem; font-size: 0.373rem; color:#666; } .mDetailNum img{ width: 0.88rem; height: 0.88rem; position: relative; vertical-align: middle; margin-top: -.05rem; } .mDetail .mDetailBg{ width: 1.24rem; height: 1.813rem; position: absolute; left: 1.27rem; top: 0; } .mDetail .mDetailBg.mDetailFirst { background: url(../images/bg1.png) no-repeat; background-size: 100% 100%; } .mDetail .mDetailBg.mDetailTwo{ background: url(../images/bg2.png) no-repeat; background-size: 100% 100%; } .mDetail .mDetailBg.mDetailThree{ background: url(../images/bg3.png) no-repeat; background-size: 100% 100%; } .mDetail .mDetailImg{ width: 1.066rem; height: 1.066rem; position: absolute; left: 1.4rem; top: 50%; transform: translate(0,-50%); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .mDetail .mDetailImg img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .mDetail .mDetailBg img{ width: 1.066rem; height: 1.066rem; position: absolute; left: 0.146rem; top: 50%; transform: translate(0,-50%); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; object-fit: cover; } .liveCheck{ position: absolute; top: .2rem; left: 2.3rem; width: 0.32rem; } .mDetail .mName{ position: absolute; left: 2.933rem; top: 0; height: 1.813rem; line-height: 1.813rem; width: 3.5rem; font-size: 0.373rem; color:#333; } .mDetail .mNum{ position: absolute; right: 0.533rem; top: 0; height: 1.813rem; line-height: 1.813rem; font-size: 0.373rem; color:#EB5E9B; text-align: right; width: 3rem; } .mDetail .mNum img{ width: 0.4rem; height: 0.4rem; position: relative; vertical-align: middle; margin-top: -.13rem; margin-left: 0.24rem; } .mBotton{ position: fixed; left: 50%; bottom: 0; z-index: 20; background: url(../images/bgbottom.png) no-repeat; background-size: 100% 100%; width: 10rem; height: 1.866rem; margin-left: -5rem; } .mBotton a{ position: absolute; left: 0.333rem; top: 50%; transform: translate(0,-50%); width: 1.066rem; height: 1.066rem; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .mBotton a img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .mBottomInfo{ width: 5.2rem; position: absolute; left: 1.653rem; top: 50%; transform: translate(0,-50%); font-size: 0; } .mBottomInfo p:first-child{ font-size: 0.373rem; color:#333; } .mBottomInfo p:last-child{ font-size: 0.293rem; color:#777; margin-top: 0.066rem; } .mBottomInfo p:last-child span{ margin-left: .066rem; } .mBottomInfo p:last-child span.mBottomNum{ margin-left: 0; margin-right: .066rem; } .mBottomInfo p:last-child span.mBottomInter{ color:#777; } .mBottomInfo p img{ width: .52rem; height: .52rem; vertical-align: middle; margin-top: -.05rem; } .mBottomBtn{ position: absolute; right: 0.4rem; top: 50%; transform: translate(0,-50%); width: 2.586rem; height: 0.853rem; line-height: 0.853rem; font-size: 0.346rem; color:#FFF; text-align: center; background-color: rgba(229,57,133,1); border-radius: 0.426rem; -webkit-border-radius: 0.426rem; -moz-border-radius: 0.426rem; -ms-border-radius: 0.426rem; } .mBottomBtn.L_En{ line-height: 1.2; } .notCon{ position: relative; text-align: center; font-size: 0; } .notImg{ margin-top: 1.066rem; width: 2.666rem; height: 2.666rem; } .notTitlt{ font-size: 0.373rem; color:#999; margin-top: 0.226rem; } .notTitlt.notTitlt2{ margin-top: 0.133rem; } body.L_Ar{ direction:rtl; } .L_Ar .mDetailNum{ left: auto; right: 0; } .L_Ar .mDetail .mDetailBg{ left: auto; right: 1.32rem; } .L_Ar .mDetail .mDetailImg{ left: auto; right: 1.4rem; } .L_Ar .mDetail .mName{ left: auto; right: 2.933rem; } .L_Ar .mDetail .mNum{ right: auto; left: .533rem; text-align: left; } .L_Ar .mBotton a{ left: auto; right: .333rem; } .L_Ar .mBottomInfo{ left: auto; right: 1.653rem; } .L_Ar .mBottomBtn{ right: auto; left: .4rem; } .L_Ar .liveCheck{ left: auto; right: 2.5rem; top: .3rem; } .L_Ar .mBotton{ background: url(../images/bgbottom2.png) no-repeat; background-size: 100% 100%; }