496_dongfengqichen_wxsmall/496_dongfengqichen/pages/luckyStar/luckyStar.wxss

/* pages/luckyStar/luckyStar.wxss */
image{
  display: block;
}
view{
  -webkit-overflow-scrolling: touch;
}
.main{
  height: calc(100vh - 120rpx);
  overflow: auto;
}
.gameRuleBtn{
  width:81rpx;
  height:81rpx;
  position: fixed;
  right: 17rpx;
  top: 216rpx;
}
.gameRuleBtn2{
  background-color: #28568B;
}
.gameTip{
  width:81rpx;
  height:81rpx;
  position: fixed;
  right: 17rpx;
  top: 331rpx;
}
.gameRuleDesc{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100vh - 120rpx);
  background-color: rgba( 000, 000, 000, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.ruleGroup{
  position: relative;
  width: 549rpx;
  height: 736rpx;
}
.gameRuleIcon{
  width: 100%;
  height: 100%;
}
.gameRuleClose{
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  height: 40rpx;
  width: 40rpx;
  z-index: 9;
}
.gameStrat{
  width:277rpx;
  height:50rpx;
  padding-top: 37rpx;
}
.gameMain{
  position: relative;
  width: 750rpx;
}
.gameStarBg{
  width: 750rpx;
  height: 1038rpx;
}
.gameTitle{
  position: absolute;
  left: 49%;
  top: 0;
  transform: translateX(-50%);
  width: 343rpx;
  height: 97rpx;
  z-index: 10;
}
.downTime{
  position: absolute;
  top: 20rpx;
  right: 80rpx;
  font-size:34rpx;
  line-height: 34rpx;
  font-family:NissanBrand;
  color:rgba(35,33,34,1);
  font-weight: 500;
}
.gameClaw{
  position: absolute;
  left: 268rpx;
  top: -440rpx;
  width: 224rpx;
  height: 800rpx;
  transition: top 0.8s linear;
  transform: scale(2);
  transform-origin:50% 0 0;
}
.gameClaw2{
  transition: all 0.8s linear;
}
.prizeIcon2{
  position: absolute;
  left: 74rpx;
  top: 558rpx;
  width: 561rpx;
  height: 187rpx;
}
.prizeIcon1{
  position: absolute;
  left: 77rpx;
  top: 571rpx;
  width: 673rpx;
  height: 288rpx;
}
.gameGetBtn{
  position: absolute;
  right: 70rpx;
  top: 920rpx;
  width: 304rpx;
  height: 80rpx;
}
.gameControlFrame{
  position: absolute;
  left: 110rpx;
  top: 895rpx;
  width: 224rpx;
  height: 127rpx;
}
.gameControlGroup{
  widows: 100%;
  height: 100%;
  position: relative;
}
.btnControlL{
  position: absolute;
  left: 0;
  top: 39rpx;
  width: 71rpx;
  height: 51rpx;
}
.btnControlR{
  position: absolute;
  right: 0;
  top: 39rpx;
  width: 71rpx;
  height: 51rpx;
}
.btnControlT{
  position: absolute;
  left: 75rpx;
  top: 4rpx;
  width: 71rpx;
  height: 51rpx;
}
.btnControlB{
  position: absolute;
  left: 75rpx;
  bottom: 0;
  width: 71rpx;
  height: 51rpx;
}
.successPop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 120rpx);
  background-color: rgba( 000, 000, 000, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.successGroup{
  position: relative;
  width:488rpx;
  height:475rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.successIcon{
  position: absolute;
  top: -33rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 114rpx;
  height: 114rpx;
}
.titleGroup{
  width: 100%;
  height: 63rpx;
  background-color: #355485;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}
.startRegister{
  width:296rpx;
  height:50rpx;
  position: relative;
}
.prizePic{
  width: 310rpx;
  height: 116rpx;
  margin-bottom: 10rpx;
}
.successTip{
  font-size:28rpx;
  font-family:PingFangSC;
  font-weight:bold;
  color:rgba(52,84,132,1);
  line-height: 28rpx;
  text-align: center;
  margin-top: 50rpx;
  margin-bottom: 13rpx;
}
.prizeName{
  font-size:21rpx;
  font-family:PingFangSC;
  font-weight:400;
  color:rgba(0,0,0,1);
  line-height:21rpx;
  text-align: center;
  margin-bottom: 30rpx;
}
.failText{
  font-size:28rpx;
  font-family:PingFangSC;
  font-weight:bold;
  color:rgba(52,84,132,1);
  line-height:28rpx;
  text-align: center;
}
.getPrizeTip{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50rpx;
  margin-bottom: 16rpx;
}
.prizeTipLine{
  width:80rpx;
  height:5rpx;
  background-color: #1F4C76;
}
.prizeTipLine:first-child{
  margin-right: 20rpx;
}
.prizeTipLine:last-child{
  margin-left: 20rpx;
}
.prizeTipText{
  font-size:24rpx;
  font-family:PingFangSC;
  font-weight:600;
  color:rgba(21,83,136,1);
  line-height:24rpx;
}
.tipContentGroup{
  width:712rpx;
  height:72rpx;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1rpx solid #4B6782;
  padding: 0 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
}
.tipContentGroup>view::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}
.tipContent{
  position: absolute;
  top:0;
  left: 100%;
  font-size:21rpx;
  font-family:PingFangSC;
  font-weight:400;
  color:rgba(21,83,136,1);
  line-height:72rpx;
  white-space: nowrap;
}
.prizeLookGroup{
  padding-top:40rpx;
  padding-bottom: 45rpx; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.prizeLook{
  width:710rpx;
  height:70rpx;
}
.shareBtn{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
}
.getUserMsgBtn{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding:0;
}
.scrollSty{
  margin-top: 10rpx;
  width:672rpx;
  height:72rpx;
  white-space: nowrap;
}
.tipContent{
  display:inline-block;
}
.scrollMask{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.scrollFirstView{
  width:712rpx;
  height:72rpx;
}
.luckyClaw{
  width: 304rpx;
  height: 80rpx;
  margin-left: -2rpx;
}
.luckyLeft{
  width: 71rpx;
  height: 51rpx;
}
.luckyRight{
  width: 71rpx;
  height: 51rpx;
}
.luckyTop{
  width: 71rpx;
  height: 51rpx;
}
.luckyBottom{
  width: 71rpx;
  height: 51rpx;
}
.downTimeGroup{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100vh - 120rpx);
  background-color: rgba( 000, 000, 000, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.luckyNum{
  width: 221rpx;
  height: 131rpx;
}
.luckyPizeType{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.textFrame{
  width:100%;
  height:100%;
  overflow: auto;
  position:relative;
}
.btnsGroup{
  height: 110rpx;
  position: absolute;
  top: 301rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  z-index: 9;
}
.luckyBtns{
  width: 296rpx;
  height: 50rpx;
}
.luckyBtnsGap{
  height: 13rpx;
}
.prizeContent{
  position: absolute;
  top: 200rpx;
  z-index: 9;
}
.gameOpen{
  position: absolute;
  left: 370rpx;
  top: 939rpx;
  width: 139rpx;
  height: 61rpx;
}
.newImages24{
  position: absolute;
  left: 533rpx;
  top: 920rpx;
  width: 147rpx;
  height: 105rpx;
}
.chanceGroup{
  position: relative;
  width: 489rpx;
  height: 460rpx;
}
.newImages44{
  width: 100%;
  height: 100%;
}
.newImages45{
  position: absolute;
  bottom: 58rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 278rpx;
  height: 51rpx;
}
.gameRuleGroup{
  position: absolute;
  top: 115rpx;
  left:0;
  width: 100%;
  height: 570rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
.newImages2-22{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 369rpx;
  width: 247rpx;
  height: 91rpx;
}
.operationExample{
  position: relative;
  width: 489rpx;
  height: 460rpx;
}
.newImages2-29{
  width: 100%;
  height: 100%;
}
.newImages2-28{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom:58rpx;
  width: 277rpx;
  height: 51rpx;
}
.newImages2-30{
  position: absolute;
  left: 72rpx;
  top: 183rpx;
  width: 164rpx;
  height: 93rpx;
}
.newImages24-2{
  top: 180rpx;
  right: 71rpx;
  left: auto;
}
.luckyLeft-2{
  position: absolute;
  top: 208rpx;
  left: 74rpx;
  width: 53rpx;
  height: 39rpx;
  opacity: 0;
}
.luckyRight-2{
  position: absolute;
  top: 208rpx;
  left: 182rpx;
  width: 53rpx;
  height: 39rpx;
  opacity: 0;
}
.luckyTop-2{
  position: absolute;
  top: 182rpx;
  left: 126rpx;
  width: 53rpx;
  height: 39rpx;
  opacity: 0;
}
.luckyBottom-2{
  position: absolute;
  top: 236rpx;
  left: 126rpx;
  width: 53rpx;
  height: 39rpx;
  opacity: 0;
}
.ani{
  animation:mymove 800ms linear;
}
.ani2{
  animation:mymove 2s linear;
}
@keyframes mymove{
  25% {opacity:1;}
  50% {opacity:0;}
  75% {opacity:1;}
  100% {opacity:0;}
}