.lottery-content{ background: url("../images/bg-pan.png"); background-size: 100% 100%; } .lottery-title{ height: 3rem; } .lottery{ font-family: '微软雅黑'; position: relative; overflow: hidden; } .wheel * { margin: 0; padding: 0; } .wheel { position: relative; padding: 1.2rem; width: 14rem; height: 14rem; background: #fe6869; border-radius: 50%; transition: transform 6s; margin:0 auto; webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial; margin-bottom: 3rem; } .wheel ul { list-style: none; } .wheel-light li { position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; right: 0; } .wheel-light li i { position: absolute; display: block; width: 10px; height: 10px; background: #fbf087; border-radius: 50%; } .wheel-light li:nth-child(2) { -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } .wheel-light li:nth-child(3) { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .wheel-light li:nth-child(4) { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .wheel-light li:nth-child(5) { -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .wheel-light li:nth-child(6) { -moz-transform: rotate(75deg); -webkit-transform: rotate(75deg); -o-transform: rotate(75deg); -ms-transform: rotate(75deg); transform: rotate(75deg); } .wheel-light li i:nth-child(1) { top: 10px; left: 0; right: 0; margin: 0 auto; } .wheel-light li i:nth-child(2) { top: 0; bottom: 0; right: 10px; margin: auto 0; } .wheel-light li i:nth-child(3) { bottom: 10px; left: 0; right: 0; margin: 0 auto; } .wheel-light li i:nth-child(4) { top: 0; bottom: 0; left: 10px; margin: auto 0; } .wheel-light li:nth-child(2n) i { background: #ffffff; } .wheel-list { position: relative; z-index: 20; display: block; width: 14rem; height: 14rem; overflow: hidden; background: #fff; border-radius: 50%; transition: transform 6s; } .wheel-list li { position: absolute; top: 0; left: 0; width: 14rem; height: 7.1rem; -moz-transform-origin: center bottom; -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } .wheel-list li i { position: absolute; top: 0; left: 0; margin-left: -50%; display: block; width: 100%; height: 100%; background: #fe6869; content: ''; -moz-transform-origin: right bottom; -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } .wheel-list li:nth-child(2n) i { background: #ff8584; } .wheel-list .prize { position: relative; margin: 0 auto; padding-top: 10px; width: 50%; overflow: hidden; text-align: center; line-height: 25px; } .wheel-list .prize h3 { height: 25px; overflow: hidden; color: #FFFFFF; font-size: 18px; font-weight: 700; } .wheel-list .prize p { height: 25px; color: #FFFFFF; font-size: 14px; font-weight: 700; } .icon { width: 50%; padding-top: 30px; } .icon img { width: 38px; position: relative; top: 50%; left: 50%; } .wheel-pointer { position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 3.5rem; height: 3.5rem; box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1); border-radius: 50%; } .wheel-pointer:before { position: absolute; top: -1.5rem; left: 50%; display: block; width: 2rem; height: 2rem; border: 1px solid #fcef86; background: #fcef86; content: ''; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5); -moz-transform-origin: left top; -webkit-transform-origin: left top; -o-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -moz-transform: rotate(30deg) skewY(30deg); -webkit-transform: rotate(30deg) skewY(30deg); -o-transform: rotate(30deg) skewY(30deg); -ms-transform: rotate(30deg) skewY(30deg); transform: rotate(30deg) skewY(30deg); } .wheel-pointer:after { position: relative; display: block; width: 100%; height: 100%; background: #fcef86; content: ''; border-radius: 50%; filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ffcc00', GradientType=1); } .wheel-pointer i { width: 3rem; height: 3rem; background: #ffdc44; z-index: 100; position: absolute; top: 7%; left: 7%; border-radius: 50%; color: #fe5b5c; text-align: center; font-size: 2.1rem; font-style: normal; /*font-family: fantasy;*/ } .mytabrow{ width: 100%; margin-top: 20px; } .mytab{ font-family: 微软雅黑; width: 80%; margin: 0 auto; } .mytab .fui-tab{ margin: 0; background: #1695a4; color: #ffffff; } .fui-tab.fui-tab-default a { color: #ffffff; } .fui-tab.fui-tab-default a.active { color: #ffffff; background: #0c7784; border: none; z-index: 100; } .reward_p{ color: #ff5c5d; } .lottery-info{ text-align: center; background-color: #ffffff; min-height: 10rem; margin-bottom: 15px; } .rewardinfo{ display: none; } .myreward{ display: none; } /*弹出层*/ .task-model{ margin: 0 auto; margin-bottom: 12rem; background: #ffffff; width: 12rem; border-radius: 0.5rem; } .task-model-content{ background: url("../images/success.png") no-repeat; background-size: 100%; height: 10rem; background-color: #F2F3F8; border-radius: 0.5rem; padding-top: 7rem; color: gray; } .task-model-faile-content{ background: url("../images/fail.png") no-repeat; background-size: 50%; background-position: 3rem 1rem; height: 10rem; background-color: #F2F3F8; border-radius: 0.5rem; padding-top: 7rem; color: gray; } .task-model-faile-content p,.task-model-content p{ text-align: center; font-size: 0.5rem; margin-top:0.2rem; } .task-model-faile-content h4,.task-model-content h4{ text-align: center; font-size: 0.65rem; } .task-model-footer{ color: #ffffff; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; background-color: #ef5e14; border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .reward-left{ width: 28%; height: 1.2rem; text-align: left; padding-left: 1rem; float: left; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .reward-right{ width: 40%; text-align: right; float: left; margin-top: 2px; position: relative; overflow: hidden; } .reward-center{ width: 28%; float: left; text-align: right; position: relative; white-space: nowrap; text-overflow: ellipsis; } .lottery_footer{ position: absolute; padding-top: 1rem; height: 6rem; top: 22rem; background: #ffffff; width: 80%; left: 10%; border-radius: 10px; } .lottery_footer p{ text-align: center; } .lottery_row{ width:100%; } .lottery_col_6{ width: 50%; text-align: center; float: left; } .lottery_memberhead{ width: 3rem; height: 3rem; border-radius: 90px; border: 2px #fff solid; position: absolute; top: -2rem; left: 42%; }