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{ background-color: #2B1910; } .main{ width: 10rem; height: 10.666rem; background-color: #2B1910; margin: 0 auto; position: relative; font-size: 0; } .ranking{ width: 2.386rem; height: 1.013rem; position: absolute; left: .2rem; top: .333rem; z-index: 50; } .history{ width: 2.386rem; height: 1.013rem; position: absolute; left: 6.713rem; top: .333rem; z-index: 50; } .explain{ width: 0.72rem; height: 0.72rem; position: absolute; right: .133rem; top: .493rem; z-index: 50; } .rotarytable{ width: 8.453rem; height: 8.506rem; position: absolute; left: 50%; margin-left: -4.226rem; top: .787rem; z-index: 10; } .light{ width: 6.426rem; height: 6.426rem; position: absolute; top: .95rem; left: 50%; margin-left: -3.213rem; z-index: 20; } .btnBox{ width: 6.426rem; height: 6.426rem; position: absolute; top: .95rem; left: 50%; margin-left: -3.213rem; z-index: 15; } .rotaryBtn,.rotaryBtn2{ width: 5.466rem; height: 5.466rem; position: absolute; left: 50%; top: 50%; margin-left: -2.733rem; margin-top: -2.733rem; z-index: 30; } .selectLight{ position: absolute; left: 50%; top: 1.5rem; margin-left: -.306rem; width: 0.613rem; height: 2.72rem; z-index: 25; } .startImg{ z-index: 50; width: 1.653rem; height: 0.493rem; position: absolute; left: 50%; top: 3.753rem; margin-left: -.826rem; } .startImg2,.startImg3{ z-index: 50; width: 1.13rem; height: 0.586rem; position: absolute; left: 50%; top: 3.653rem; margin-left: -.606rem; } .rotaryTitle{ font-size: .373rem; font-weight: bold; color:#FFF; width: 2rem; text-align: center; position: absolute; left: 50%; top:4.28rem; margin-left: -1rem; z-index: 50; } .rotaryTitle img{ width: 40%; } .multiple{ width: 2rem; height: 1.45rem; position: absolute; left: .96rem; top: 7.67rem; z-index: 200; background-color: transparent; } .multiple.check{ background-color: rgba(0, 0, 0, 0.6); } .multiple2{ left: 2.96rem; } .multiple3{ left: 4.96rem; } .multiple4{ left: 6.96rem; } .rotaryNum,.peopleNum{ position: absolute; left: 1.947rem; top: 8.2rem; font-size: .3rem; z-index: 50; color:#FFF; } .peopleNum{ top: 8.63rem; } .rotaryNum3,.peopleNum3{ left: 3.96rem; } .rotaryNum7,.peopleNum7{ left: 5.987rem; } .rotaryNum18,.peopleNum18{ left: 8rem; } .bottom{ position: absolute; bottom: 0; left: 0; width: 10rem; height: 1.2rem; line-height: 1.2rem; border-top: 1px solid #626262; } .gem{ width: 0.44rem; height: 0.533rem; position: absolute; left: .24rem; top: 50%; margin-top: -.266rem; } .bottomNum{ position: absolute; left: .813rem; top: 0; height: 1.2rem; font-size: .453rem; font-weight: bold; color:#FFF; width: 1.5rem; letter-spacing: -.05rem; } .ticketList{ position: absolute; left: 2.333rem; top: 0; height: 1.2rem; line-height: 1.2rem; width: 7.6rem; } .ticketDetail{ background: url(https://app.ixiulive.com/static/superTurn/img/unselected.png) no-repeat; background-size: 100% 100%; width: 1.96rem; height: 0.906rem; position: absolute; left: 0; top: 50%; margin-top: -.453rem; } .ticketDetail.check{ background: url(https://app.ixiulive.com/static/superTurn/img/selected.png) no-repeat; background-size: 100% 100%; } .ticketDetail span{ position: absolute; right: .513rem; top: 0; font-size: .4rem; font-weight: bold; color:#FFF; text-align: center; line-height: .906rem; letter-spacing: -.05rem; } .ticketList .ticketDetail:nth-child(2){ left: 1.9rem; } .ticketList .ticketDetail:nth-child(2) span{ right: .413rem; } .ticketList .ticketDetail:nth-child(3){ left: 3.8rem; } .ticketList .ticketDetail:nth-child(3) span{ right: .313rem; } .ticketList .ticketDetail:nth-child(4){ left: 5.7rem; } .ticketList .ticketDetail:nth-child(4) span{ right: .213rem; } /*歷史記錄彈窗*/ .historyMask,.listMask,.ruleMask{ position: relative; width: 7.626rem; height: 6.853rem; padding-top: 1.133rem; } .historyImg,.listImg,.ruleImg{ width: 7.626rem; height: 6.853rem; position: absolute; left: 0; top: .6rem; } .historyTitle,.listTitle,.ruleTitle{ width: 3.92rem; height: 1.133rem; position: absolute; left: 50%; margin-left: -1.86rem; top: 0; z-index: 10; } .listTitle{ width: 3.026rem; height: 1.12rem; margin-left: -1.513rem; } .historyTitleList,.listTItleList{ position: absolute; left: 0.533rem; top: 2.106rem; width: 6.6rem; } .historyTitleList span,.listTItleList span{ font-size: 0.48rem; position: absolute; left: 0; top: 0; width: 1.65rem; text-align: center; color:#f78efd; text-shadow: 0 0 0.4em #4942e8,0 0 0.4em #4942e8; font-weight:bolder; } .listTItleList span{ width: 1.4rem; } .historyTitleList span[data-content]::after,.listTItleList span[data-content]::after{ content:attr(data-content); display: block; position:absolute; color:#26fbf8; left:0; top:0; width: 100%; text-align: center; z-index:2; -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(#26fbf8), to(rgba(0, 0, 255, 0))); } .historyTitleList span:nth-child(2){ left: 1.65rem; } .historyTitleList span:nth-child(3){ left: 3.3rem; } .historyTitleList span:nth-child(4){ left: 4.95rem; } .listTItleList span:nth-child(2){ left: 1.4rem; width: 3rem; } .listTItleList span:nth-child(3){ left: 4.44rem; width: 2.1rem; } .historyCon,.listCon{ position: absolute; height: 4rem; width: 6.6rem; left: .533rem; top: 2.8rem; overflow-y: auto; } .listCon .notData,.historyCon .notData{ position: absolute; width: 100%; height: 4rem; line-height: 4rem; left: 0; top: 0; font-size: .4rem; text-align: center; color:#9B4BE1; } .historyNow{ position: absolute; left: 0; top: 2.88rem; width: 1.013rem; height: 0.586rem; } .historyDetail,.listDetail{ position: relative; height: .8rem; line-height: .8rem; } .historyDetail span,.listDetail span{ font-size: 0.4rem; position: absolute; left: 0; top: 0; width: 1.65rem; text-align: center; color:#9B4BE1; height: .8rem; } .listDetail span{ width: 1.4rem; } .historyDetail span img{ width: 0.44rem; height: 0.44rem; vertical-align: middle; margin-top: -.1rem; } .historyDetail span:nth-child(2){ left: 1.65rem; } .historyDetail span:nth-child(3){ left: 3.3rem; } .historyDetail span:nth-child(4){ left: 4.95rem; } .listDetail span:nth-child(2){ left: 1.4rem; width: 3rem; } .listDetail span:nth-child(3){ left: 4.44rem; width: 2.1rem; } .successMask{ width: 8.386rem; height: 9.493rem; position: relative; } .successImg{ width: 8.386rem; height: 9.493rem; position: absolute; left: 0; top: 0; } .successImgTicket{ position: absolute; left: 2.5rem; top: 6rem; width: 0.8rem; height: 0.8rem; z-index: 999999999; } .successNum{ font-size: 0.48rem; position: absolute; left: 3.7rem; top: 5.85rem; width: 2.5rem; color:#f78efd; text-shadow: 0 0 0.4em #4942e8,0 0 0.4em #4942e8; font-weight:bolder; } .successNum[data-content]::after{ content:attr(data-content); display: block; position:absolute; color:#26fbf8; left:0; top:0; width: 100%; z-index:2; -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(#26fbf8), to(rgba(0, 0, 255, 0))); } .successDesc{ font-size: .347rem; color:#9B4BE1; position: absolute; left: 0; bottom: 1.866rem; width: 100%; text-align: center; } .ruleMask p{ color:#9B4BE1; font-size: .347rem; position: absolute; left: .833rem; } .ruleTitle1{ top: 2.2rem; } .ruleTitle2{ top: 2.8rem; color:#3A0CA6; font-weight: bold; } .ruleTitle3{ top: 3.8rem; } .ruleTitle4{ top: 4.4rem; } .ruleTitle5{ top: 4.9rem; } .ruleTitle6{ top: 6rem; } .maskingBox{ width: 7rem; height: 6.6rem; position: absolute; top: .85rem; left: 50%; margin-left: -3.5rem; z-index: 40; background-color: rgba(0,0,0,.6); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .maskingBoxImg{ width: 3.733rem; height: 1.466rem; position: absolute; left: 50%; top: .7rem; margin-left: -1.866rem; } .maskingBoxImg2{ width: 1.381rem; height: 1.536rem; position: absolute; left: 50%; margin-left: -.69rem; top: 2.4rem; } .maskingBoxTime1,.maskingBoxTime2{ width: 0.466rem; height: 0.533rem; position: absolute; top: 2.95rem; left: 3.1rem; } .maskingBoxTime2{ left: 3.4rem; } .victory{ position: absolute; left: 1.8rem; top: 7.7rem; z-index: 400; width: 0.44rem; height: 0.44rem; display: none; } .victory3{ left: 3.9rem; } .victory7{ left: 5.8rem; } .victory18{ left: 7.8rem; } .animate{ position: absolute; left: 0; bottom: 0; z-index: 500; width: 0.666rem; height: 0.666rem; display: none; } .animate3{ left: 2.1rem; } .animate7{ left: 4.2rem; } .animate18{ left: 6.3rem; } .animateHead{ width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .animateTick{ width: 100%; height: 100%; position: absolute; left: 0; bottom:3rem; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; display: none; } .L_En .ruleTitle{ width: 2.826rem; height: 0.906rem; margin-left: -1.413rem; } .L_En .ruleMask p{ width: 6.2rem; } .L_En .ruleTitle1{ top: 2rem; } .L_En .ruleTitle2{ top: 3.1rem; } .L_En .ruleTitle3{ top: 3.7rem; } .L_En .ruleTitle4{ top: 4.7rem; } .L_En .ruleTitle5{ top: 5.2rem; } .L_En .ruleTitle6{ top: 6.2rem; } .L_En .historyTitle{ width: 3.653rem; height: 0.906rem; margin-left: -1.826rem; } .L_En .historyDetail span img{ width: 0.8rem; height: 0.457rem; } .L_En .historyNow{ width: 0.8rem; height: 0.463rem; } .L_En .listTitle{ width: 2.826rem; height: 0.906rem; margin-left: -1.413rem; } .L_En .victory{ width: 0.933rem; height: 0.533rem; top: 7.6rem; } .L_En .startImg2{ width: 1.4rem; height: 0.44rem; margin-left: -.7rem; } .L_En .startImg3{ width: 1.72rem; height: 0.466rem; margin-left: -.86rem; } .L_En .rotaryTitle img{ width: 30%; } .L_En .successDesc{ width: 4.4rem; left: 50%; margin-left: -1.8rem; bottom: 1.3rem; } .L_En .successMask{ width: 7.586rem; } .L_En .successImg{ width: 7.586rem; }