| @@ -0,0 +1,28 @@ | |||
| <?xml version="1.0" encoding="UTF-8"?> | |||
| <projectDescription> | |||
| <name>lottery</name> | |||
| <comment></comment> | |||
| <projects> | |||
| </projects> | |||
| <buildSpec> | |||
| <buildCommand> | |||
| <name>com.aptana.ide.core.unifiedBuilder</name> | |||
| <arguments> | |||
| </arguments> | |||
| </buildCommand> | |||
| </buildSpec> | |||
| <natures> | |||
| <nature>com.aptana.projects.webnature</nature> | |||
| </natures> | |||
| <filteredResources> | |||
| <filter> | |||
| <id>1539065383035</id> | |||
| <name></name> | |||
| <type>26</type> | |||
| <matcher> | |||
| <id>org.eclipse.ui.ide.multiFilter</id> | |||
| <arguments>1.0-name-matches-false-false-node_modules</arguments> | |||
| </matcher> | |||
| </filter> | |||
| </filteredResources> | |||
| </projectDescription> | |||
| @@ -0,0 +1,109 @@ | |||
| body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, input, select, button, textarea, table, th, td { | |||
| margin: 0; | |||
| padding: 0; | |||
| } | |||
| body { | |||
| position: relative; | |||
| font: 12px "Microsoft Yahei", "Arial", sans-serif; | |||
| } | |||
| ul, ol { | |||
| list-style: none; | |||
| } | |||
| img { | |||
| border: none; | |||
| vertical-align:top; | |||
| } | |||
| a { | |||
| outline: none; | |||
| text-decoration: none; | |||
| color: inherit; | |||
| } | |||
| a:hover { | |||
| text-decoration: none; | |||
| } | |||
| input { | |||
| outline: none; | |||
| } | |||
| button { | |||
| cursor: pointer; | |||
| } | |||
| .block { | |||
| display: block; | |||
| } | |||
| .none { | |||
| display: none; | |||
| } | |||
| .r { | |||
| position: relative; | |||
| } | |||
| .a { | |||
| position: absolute; | |||
| } | |||
| .fl { | |||
| float: left; | |||
| } | |||
| .fr { | |||
| float: right; | |||
| } | |||
| .clearfix:after { | |||
| content: ""; | |||
| clear: both; | |||
| display: block; | |||
| visibility: hidden; | |||
| height: 0; | |||
| } | |||
| /*字体大小*/ | |||
| .f-siz14 { | |||
| font-size: 14px; | |||
| } | |||
| .f-siz16 { | |||
| font-size: 16px; | |||
| } | |||
| .f-siz18 { | |||
| font-size: 18px; | |||
| } | |||
| .f-siz20 { | |||
| font-size: 20px; | |||
| } | |||
| .f-siz22 { | |||
| font-size: 22px; | |||
| } | |||
| .f-siz24 { | |||
| font-size: 24px; | |||
| } | |||
| .f-siz26 { | |||
| font-size: 26px; | |||
| } | |||
| .f-siz28 { | |||
| font-size: 28px; | |||
| } | |||
| .f-siz30 { | |||
| font-size: 30px; | |||
| } | |||
| .bor-none { | |||
| border: none !important; | |||
| } | |||
| @@ -0,0 +1,508 @@ | |||
| @charset "utf-8"; | |||
| body, | |||
| div, | |||
| p, | |||
| ul, | |||
| ol, | |||
| li, | |||
| dl, | |||
| dt, | |||
| dd, | |||
| h1, | |||
| h2, | |||
| h3, | |||
| h4, | |||
| h5, | |||
| h6, | |||
| pre, | |||
| form, | |||
| input, | |||
| select, | |||
| button, | |||
| textarea, | |||
| table, | |||
| th, | |||
| td, | |||
| a, | |||
| span, | |||
| canvas { | |||
| margin: 0; | |||
| padding: 0; | |||
| background: no-repeat center / contain; | |||
| cursor: default; | |||
| } | |||
| *{ | |||
| -webkit-overflow-scrolling: touch; | |||
| } | |||
| body { | |||
| display: block; | |||
| position: relative; | |||
| margin: auto; | |||
| max-width: 10rem; | |||
| min-width: 4.26666667rem; | |||
| font-size: 0.16rem; | |||
| font-family: "Microsoft Yahei", "Arial", sans-serif; | |||
| } | |||
| ul, | |||
| ol { | |||
| list-style: none; | |||
| } | |||
| img { | |||
| border: none; | |||
| } | |||
| a { | |||
| outline: none; | |||
| text-decoration: none; | |||
| color: inherit; | |||
| } | |||
| a:hover { | |||
| text-decoration: none; | |||
| } | |||
| input { | |||
| outline: none; | |||
| } | |||
| .block { | |||
| display: block; | |||
| } | |||
| .none { | |||
| display: none; | |||
| } | |||
| .r { | |||
| position: relative; | |||
| } | |||
| .a { | |||
| position: absolute; | |||
| } | |||
| .fl { | |||
| float: left; | |||
| } | |||
| .fr { | |||
| float: right; | |||
| } | |||
| .clearfix:after { | |||
| content: ""; | |||
| clear: both; | |||
| display: block; | |||
| visibility: hidden; | |||
| height: 0; | |||
| } | |||
| /*H5游戏共用类*/ | |||
| #wrap { | |||
| overflow: hidden; | |||
| position: relative; | |||
| width: 100%; | |||
| height: 16.01333333rem; | |||
| } | |||
| /*奖品展示*/ | |||
| .awards { | |||
| overflow: hidden; | |||
| position: absolute; | |||
| left: 50%; | |||
| } | |||
| .awards .swiper-slide { | |||
| margin: 0.06666667rem 0.26666667rem; | |||
| padding: 0.4rem; | |||
| width: 1rem; | |||
| height: 1rem; | |||
| background-image: url("../image/icon/drag/drag_box.png"); | |||
| } | |||
| .awards .swiper-slide img { | |||
| width: inherit; | |||
| height: inherit; | |||
| } | |||
| /*规则弹窗*/ | |||
| #mask-rule, | |||
| #mask { | |||
| display: none; | |||
| position: fixed; | |||
| left: 0; | |||
| top: 0; | |||
| z-index: 10; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-color: rgba(0, 0, 0, 0.85); | |||
| } | |||
| #mask-rule .box-rule { | |||
| position: relative; | |||
| margin: 20% auto; | |||
| padding-top: 0.53333333rem; | |||
| width: 90%; | |||
| height: 70%; | |||
| border-radius: 0.26666667rem; | |||
| } | |||
| #mask-rule .box-rule .star { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: -1.33333333rem; | |||
| margin-left: -1.73333333rem; | |||
| width: 3.45333333rem; | |||
| height: 1.16rem; | |||
| } | |||
| #mask-rule .box-rule h2 { | |||
| width: 100%; | |||
| text-align: center; | |||
| line-height: 0.45333333rem; | |||
| font-size: 0.45333333rem; | |||
| font-weight: normal; | |||
| color: #fff; | |||
| } | |||
| #mask-rule .box-rule h2::before, | |||
| #mask-rule .box-rule h2::after { | |||
| display: inline-block; | |||
| content: ""; | |||
| width: 0.24rem; | |||
| height: 0.24rem; | |||
| background-color: #fff; | |||
| border-radius: 50%; | |||
| } | |||
| #mask-rule .box-rule h2::before { | |||
| margin-right: 0.32rem; | |||
| } | |||
| #mask-rule .box-rule h2::after { | |||
| margin-left: 0.32rem; | |||
| } | |||
| #mask-rule #close-rule { | |||
| position: absolute; | |||
| right: 0.45333333rem; | |||
| top: 0.50666667rem; | |||
| width: 0.53333333rem; | |||
| height: 0.53333333rem; | |||
| background-image: url("../image/rule/close.png"); | |||
| } | |||
| /*内容盒子*/ | |||
| #mask-rule .con { | |||
| overflow: auto; | |||
| position: relative; | |||
| margin: 0.53333333rem auto; | |||
| padding-right: 0.2rem; | |||
| width: 7.73333333rem; | |||
| height: 82%; | |||
| line-height: 0.64rem; | |||
| font-size: 0.34666667rem; | |||
| color: #fff; | |||
| } | |||
| #mask-rule .con .text { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: inherit; | |||
| height: auto; | |||
| } | |||
| /*中奖提示*/ | |||
| #mask { | |||
| display: none; | |||
| position: fixed; | |||
| left: 0; | |||
| top: 0; | |||
| z-index: 10; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-color: rgba(0, 0, 0, 0.85); | |||
| } | |||
| #mask .blin { | |||
| width: 100%; | |||
| height: 100%; | |||
| background-image: url("../image/redPack/gold.png"); | |||
| -o-animation: circle 10s linear infinite; | |||
| -ms-animation: circle 10s linear infinite; | |||
| -moz-animation: circle 10s linear infinite; | |||
| -webkit-animation: circle 10s linear infinite; | |||
| animation: circle 10s linear infinite; | |||
| } | |||
| @keyframes circle { | |||
| 0% { | |||
| -o-transform: rotate(0deg); | |||
| -ms-transform: rotate(0deg); | |||
| -moz-transform: rotate(0deg); | |||
| -webkit-transform: rotate(0deg); | |||
| transform: rotate(0deg); | |||
| } | |||
| 100% { | |||
| -o-transform: rotate(360deg); | |||
| -ms-transform: rotate(360deg); | |||
| -moz-transform: rotate(360deg); | |||
| -webkit-transform: rotate(360deg); | |||
| transform: rotate(360deg); | |||
| } | |||
| } | |||
| #mask .caidai { | |||
| position: absolute; | |||
| left: 0; | |||
| top: 0; | |||
| z-index: 1; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-image: url("../image/redPack/dianzhui.png"); | |||
| -o-transform: scale(1.2); | |||
| -ms-transform: scale(1.2); | |||
| -moz-transform: scale(1.2); | |||
| -webkit-transform: scale(1.2); | |||
| transform: scale(1.2); | |||
| } | |||
| #mask .winning { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| z-index: 1; | |||
| width: 8rem; | |||
| height: 6.8rem; | |||
| margin: -3.46666667rem 0 0 -4rem; | |||
| -o-transform: scale(0.1); | |||
| -ms-transform: scale(0.1); | |||
| -moz-transform: scale(0.1); | |||
| -webkit-transform: scale(0.1); | |||
| transform: scale(0.1); | |||
| } | |||
| #mask .reback { | |||
| -o-animation: reback .5s linear forwards; | |||
| -ms-animation: reback .5s linear forwards; | |||
| -moz-animation: reback .5s linear forwards; | |||
| -webkit-animation: reback .5s linear forwards; | |||
| animation: reback .5s linear forwards; | |||
| } | |||
| @keyframes reback { | |||
| 100% { | |||
| -o-transform: scale(1); | |||
| -ms-transform: scale(1); | |||
| -moz-transform: scale(1); | |||
| -webkit-transform: scale(1); | |||
| transform: scale(1); | |||
| } | |||
| } | |||
| .winning .red-head { | |||
| position: relative; | |||
| top: -0.33333333rem; | |||
| width: 100%; | |||
| height: 4.46666667rem; | |||
| background-image: url("../image/redPack/top.png"); | |||
| } | |||
| .winning .red-body { | |||
| position: relative; | |||
| top: -2.33333333rem; | |||
| z-index: 2; | |||
| width: 100%; | |||
| height: 4.8rem; | |||
| background-image: url("../image/redPack/bottom.png"); | |||
| } | |||
| .winning .red-body p{ | |||
| width: 60%; | |||
| margin: 0 auto; | |||
| text-align: center; | |||
| padding-top: 2rem; | |||
| font-size: 0.34rem; | |||
| color: #ffee37; | |||
| } | |||
| .winning #card { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| z-index: 1; | |||
| margin-left: -3.2rem; | |||
| margin-top: -1.06666667rem; | |||
| width: 80%; | |||
| height: 4.26666667rem; | |||
| background-image: url("../image/redPack/middle.png"); | |||
| -o-transition: top .5s; | |||
| -ms-transition: top .5s; | |||
| -moz-transition: top .5s; | |||
| -webkit-transition: top .5s; | |||
| transition: top .5s; | |||
| } | |||
| #card .win { | |||
| display: block; | |||
| margin: 0.13333333rem auto; | |||
| width: 92%; | |||
| height: 3.86666667rem; | |||
| background-image: url("../image/prize/prize2.png"); | |||
| } | |||
| .winning .pull { | |||
| -o-animation: card .5s linear forwards; | |||
| -ms-animation: card .5s linear forwards; | |||
| -moz-animation: card .5s linear forwards; | |||
| -webkit-animation: card .5s linear forwards; | |||
| animation: card .5s linear forwards; | |||
| } | |||
| @keyframes card { | |||
| 100% { | |||
| margin-top: -3.2rem; | |||
| } | |||
| } | |||
| .winning .btn { | |||
| position: absolute; | |||
| left: 50%; | |||
| bottom: 10%; | |||
| z-index: 2; | |||
| width: 4.85333333rem; | |||
| height: 0.94666667rem; | |||
| margin-left: -2.42666667rem; | |||
| width: 4.85333333rem; | |||
| font-size: 0.4rem; | |||
| line-height: 0.94666667rem; | |||
| color: #fd4859; | |||
| text-align: center; | |||
| background-image: url("../image/redPack/button.png"); | |||
| -o-animation: shake .5s 2 linear alternate; | |||
| -ms-animation: shake .5s 2 linear alternate; | |||
| -moz-animation: shake .5s 2 linear alternate; | |||
| -webkit-animation: shake .5s 2 linear alternate; | |||
| animation: shake .5s 2 linear alternate; | |||
| } | |||
| @keyframes shake { | |||
| 50% { | |||
| -o-transform: rotate(-5deg); | |||
| -ms-transform: rotate(-5deg); | |||
| -moz-transform: rotate(-5deg); | |||
| -webkit-transform: rotate(-5deg); | |||
| transform: rotate(-5deg); | |||
| } | |||
| 100% { | |||
| -o-transform: rotate(5deg); | |||
| -ms-transform: rotate(5deg); | |||
| -moz-transform: rotate(5deg); | |||
| -webkit-transform: rotate(5deg); | |||
| transform: rotate(5deg); | |||
| } | |||
| } | |||
| #close { | |||
| opacity: 0; | |||
| position: absolute; | |||
| right: 0rem; | |||
| top: -1.06666667rem; | |||
| z-index: 10; | |||
| width: 0.85333333rem; | |||
| height: 0.85333333rem; | |||
| background-image: url("../image/redPack/close.png"); | |||
| -o-animation: fadein .5s .5s linear forwards; | |||
| -ms-animation: fadein .5s .5s linear forwards; | |||
| -moz-animation: fadein .5s .5s linear forwards; | |||
| -webkit-animation: fadein .5s .5s linear forwards; | |||
| animation: fadein .5s .5s linear forwards; | |||
| } | |||
| @keyframes fadein { | |||
| 100% { | |||
| opacity: 1; | |||
| -o-transform: rotate(360deg); | |||
| -ms-transform: rotate(360deg); | |||
| -moz-transform: rotate(360deg); | |||
| -webkit-transform: rotate(360deg); | |||
| transform: rotate(360deg); | |||
| } | |||
| } | |||
| /* 点击分享弹出的弹框样式 */ | |||
| .b1{ | |||
| position:fixed; | |||
| width:100%; | |||
| height:100%; | |||
| top:0px; | |||
| background:rgba(0,0,0,0.9); | |||
| overflow: hidden; | |||
| z-index: 100; | |||
| display: none; | |||
| } | |||
| .t_w{ | |||
| display: none; | |||
| position: fixed; | |||
| height: 100%; | |||
| left: 0%; | |||
| top: 0%; | |||
| width: 100%; | |||
| background: url(../image/mengceng.png) no-repeat; | |||
| background-size: 100%; | |||
| z-index: 1000; | |||
| padding: 0.8rem 0.4rem; | |||
| box-sizing: border-box; | |||
| } | |||
| .span-text{ | |||
| font-size: 0.4rem; | |||
| line-height: 0.8rem, | |||
| } | |||
| .span-blue{ | |||
| font-size: 0.4rem; | |||
| color: mediumorchid; | |||
| margin: 0 0.2rem; | |||
| line-height: 0.8rem; | |||
| } | |||
| .s-close{ | |||
| display: block; | |||
| position: absolute; | |||
| bottom: -1.3rem; | |||
| z-index: 500; | |||
| width: 1rem; | |||
| left: 50%; | |||
| margin-left: -0.6rem; | |||
| overflow: hidden; | |||
| } | |||
| #gotoindex{ | |||
| position: absolute; | |||
| top: 2.4rem; | |||
| right: 0; | |||
| background-color: #7184E2; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.74666667rem; | |||
| text-align: center; | |||
| line-height: 0.74666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| } | |||
| #warnning-box-bg{ | |||
| height: 100vh; | |||
| width: 100%; | |||
| position: fixed; | |||
| z-index: 100; | |||
| opacity: 0.7; | |||
| background: #000; | |||
| top: 0; | |||
| left: 0; | |||
| display: none; | |||
| } | |||
| #warnning-box{ | |||
| width: 70%; | |||
| background: #fff; | |||
| z-index: 200; | |||
| position: fixed; | |||
| top: 50%; | |||
| margin-top: -2rem; | |||
| left: 50%; | |||
| margin-left: -35%; | |||
| border-radius: 0.15rem; | |||
| padding: 0 0.3rem; | |||
| padding-top: 0.6rem; | |||
| box-sizing: border-box; | |||
| display: none; | |||
| } | |||
| #w-title{ | |||
| font-size: 0.26rem; | |||
| line-height: 0.32rem; | |||
| color: #000; | |||
| } | |||
| #w-button{ | |||
| font-size: 0.26rem; | |||
| line-height: 0.6rem; | |||
| color: #000; | |||
| width: 1.2rem; | |||
| height: 0.6rem; | |||
| margin: 0.4rem 0 0.2rem; | |||
| background: #50009f; | |||
| border-radius: 0.15rem; | |||
| text-align: center; | |||
| float: right; | |||
| color: #fff; | |||
| } | |||
| #w-cancel{ | |||
| font-size: 0.26rem; | |||
| line-height: 0.6rem; | |||
| color: #000; | |||
| width: 1.2rem; | |||
| height: 0.6rem; | |||
| margin: 0.4rem 0 0.3rem 0.3rem; | |||
| background: #50009f; | |||
| border-radius: 0.15rem; | |||
| text-align: center; | |||
| float: right; | |||
| color: #fff; | |||
| } | |||
| @@ -0,0 +1,397 @@ | |||
| @charset "utf-8"; | |||
| @rem:75rem; | |||
| body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, input, select, button, textarea, table, th, td,a,span,canvas{ | |||
| margin: 0; | |||
| padding: 0; | |||
| background: no-repeat center/contain; | |||
| cursor: default; | |||
| } | |||
| body { | |||
| display: block; | |||
| position: relative; | |||
| margin: auto; | |||
| max-width: 750/@rem; | |||
| min-width: 320/@rem; | |||
| font-size: 12/@rem; | |||
| font-family: "Microsoft Yahei", "Arial", sans-serif; | |||
| } | |||
| ul, ol { | |||
| list-style: none; | |||
| } | |||
| img { | |||
| border: none; | |||
| } | |||
| a { | |||
| outline: none; | |||
| text-decoration: none; | |||
| color: inherit; | |||
| } | |||
| a:hover { | |||
| text-decoration: none; | |||
| } | |||
| input { | |||
| outline: none; | |||
| } | |||
| .block { | |||
| display: block; | |||
| } | |||
| .none { | |||
| display: none; | |||
| } | |||
| .r { | |||
| position: relative; | |||
| } | |||
| .a { | |||
| position: absolute; | |||
| } | |||
| .fl { | |||
| float: left; | |||
| } | |||
| .fr { | |||
| float: right; | |||
| } | |||
| .clearfix:after { | |||
| content: ""; | |||
| clear: both; | |||
| display: block; | |||
| visibility: hidden; | |||
| height: 0; | |||
| } | |||
| /*H5游戏共用类*/ | |||
| #wrap { | |||
| overflow: hidden; | |||
| position: relative; | |||
| width: 100%; | |||
| height: 1201/@rem; | |||
| } | |||
| /*奖品展示*/ | |||
| .awards{ | |||
| overflow: hidden; | |||
| position: absolute; | |||
| left: 50%; | |||
| } | |||
| .awards .swiper-slide{ | |||
| margin: 5/@rem 20/@rem; | |||
| padding: 15/@rem; | |||
| width: 105/@rem; | |||
| height: 105/@rem; | |||
| background-image: url("../image/icon/drag/drag_box.png"); | |||
| } | |||
| .awards .swiper-slide img { | |||
| width: inherit; | |||
| height: inherit; | |||
| } | |||
| /*规则弹窗*/ | |||
| #mask-rule,#mask{ | |||
| display: none; | |||
| position: fixed; | |||
| left: 0; | |||
| top: 0; | |||
| z-index: 10; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-color: rgba(0, 0, 0, 0.85); | |||
| } | |||
| #mask-rule .box-rule{ | |||
| position: relative; | |||
| margin: 20% auto; | |||
| padding-top: 40/@rem; | |||
| width: 90%; | |||
| height: 70%; | |||
| border-radius: 20/@rem; | |||
| } | |||
| #mask-rule .box-rule .star{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: -100/@rem; | |||
| margin-left: -130/@rem; | |||
| width: 259/@rem; | |||
| height: 87/@rem; | |||
| } | |||
| #mask-rule .box-rule h2{ | |||
| width: 100%; | |||
| text-align: center; | |||
| line-height: 34/@rem; | |||
| font-size: 34/@rem; | |||
| font-weight: normal; | |||
| color: #fff; | |||
| } | |||
| #mask-rule .box-rule h2::before,#mask-rule .box-rule h2::after{ | |||
| display: inline-block; | |||
| content: ""; | |||
| width: 18/@rem; | |||
| height: 18/@rem; | |||
| background-color: #fff; | |||
| border-radius: 50%; | |||
| } | |||
| #mask-rule .box-rule h2::before{ | |||
| margin-right: 24/@rem; | |||
| } | |||
| #mask-rule .box-rule h2::after{ | |||
| margin-left: 24/@rem; | |||
| } | |||
| #mask-rule #close-rule{ | |||
| position: absolute; | |||
| right: 34/@rem; | |||
| top: 38/@rem; | |||
| width: 40/@rem; | |||
| height: 40/@rem; | |||
| background-image: url("../image/rule/close.png"); | |||
| } | |||
| /*内容盒子*/ | |||
| #mask-rule .con{ | |||
| overflow: auto; | |||
| position: relative; | |||
| margin: 40/@rem auto; | |||
| padding-right: 15/@rem; | |||
| width: 580/@rem; | |||
| height: 82%; | |||
| line-height: 48/@rem; | |||
| font-size: 26/@rem; | |||
| color: #fff; | |||
| } | |||
| #mask-rule .con .text{ | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: inherit; | |||
| height: auto; | |||
| } | |||
| /*中奖提示*/ | |||
| #mask { | |||
| display: none; | |||
| position: fixed; | |||
| left: 0; | |||
| top: 0; | |||
| z-index: 10; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-color: rgba(0, 0, 0, 0.85); | |||
| } | |||
| #mask .blin { | |||
| width: 100%; | |||
| height: 100%; | |||
| background-image: url("../image/redPack/gold.png"); | |||
| -o-animation: circle 10s linear infinite; | |||
| -ms-animation: circle 10s linear infinite; | |||
| -moz-animation: circle 10s linear infinite; | |||
| -webkit-animation: circle 10s linear infinite; | |||
| animation: circle 10s linear infinite; | |||
| } | |||
| @keyframes circle { | |||
| 0%{ | |||
| -o-transform: rotate(0deg); | |||
| -ms-transform: rotate(0deg); | |||
| -moz-transform: rotate(0deg); | |||
| -webkit-transform: rotate(0deg); | |||
| transform: rotate(0deg); | |||
| } | |||
| 100%{ | |||
| -o-transform: rotate(360deg); | |||
| -ms-transform: rotate(360deg); | |||
| -moz-transform: rotate(360deg); | |||
| -webkit-transform: rotate(360deg); | |||
| transform: rotate(360deg); | |||
| } | |||
| } | |||
| #mask .caidai{ | |||
| position: absolute; | |||
| left: 0; | |||
| top: 0; | |||
| z-index: 1; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-image: url("../image/redPack/dianzhui.png"); | |||
| -o-transform: scale(1.2); | |||
| -ms-transform: scale(1.2); | |||
| -moz-transform: scale(1.2); | |||
| -webkit-transform: scale(1.2); | |||
| transform: scale(1.2); | |||
| } | |||
| #mask .winning{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| z-index: 1; | |||
| width: 600/@rem; | |||
| height: 510/@rem; | |||
| margin: -260/@rem 0 0 -300/@rem; | |||
| -o-transform: scale(0.1); | |||
| -ms-transform: scale(0.1); | |||
| -moz-transform: scale(0.1); | |||
| -webkit-transform: scale(0.1); | |||
| transform: scale(0.1); | |||
| } | |||
| #mask .reback{ | |||
| -o-animation: reback .5s linear forwards; | |||
| -ms-animation: reback .5s linear forwards; | |||
| -moz-animation: reback .5s linear forwards; | |||
| -webkit-animation: reback .5s linear forwards; | |||
| animation: reback .5s linear forwards; | |||
| } | |||
| @keyframes reback{ | |||
| 100%{ | |||
| -o-transform: scale(1); | |||
| -ms-transform: scale(1); | |||
| -moz-transform: scale(1); | |||
| -webkit-transform: scale(1); | |||
| transform: scale(1); | |||
| } | |||
| } | |||
| .winning .red-head{ | |||
| position: relative; | |||
| top: -25/@rem; | |||
| width: 100%; | |||
| height: 335/@rem; | |||
| background-image: url("../image/redPack/top.png"); | |||
| } | |||
| .winning .red-body{ | |||
| position: relative; | |||
| top: -160/@rem; | |||
| z-index: 2; | |||
| width: 100%; | |||
| height: 360/@rem; | |||
| background-image: url("../image/redPack/bottom.png"); | |||
| } | |||
| .winning #card{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| z-index: 1; | |||
| margin-left: -240/@rem; | |||
| margin-top: -80/@rem; | |||
| width: 80%; | |||
| height: 320/@rem; | |||
| background-image: url("../image/redPack/middle.png"); | |||
| -o-transition: top .5s; | |||
| -ms-transition: top .5s; | |||
| -moz-transition: top .5s; | |||
| -webkit-transition: top .5s; | |||
| transition: top .5s; | |||
| } | |||
| #card .win{ | |||
| display: block; | |||
| margin: 10/@rem auto; | |||
| width: 92%; | |||
| height: 290/@rem; | |||
| background-image: url("../image/prize/prize2.png"); | |||
| } | |||
| .winning .pull{ | |||
| -o-animation: card .5s linear forwards; | |||
| -ms-animation: card .5s linear forwards; | |||
| -moz-animation: card .5s linear forwards; | |||
| -webkit-animation: card .5s linear forwards; | |||
| animation: card .5s linear forwards; | |||
| } | |||
| @keyframes card { | |||
| 100%{ | |||
| margin-top:-240/@rem; | |||
| } | |||
| } | |||
| .winning .btn{ | |||
| position: absolute; | |||
| left: 50%; | |||
| bottom: 10%; | |||
| z-index: 2; | |||
| width: 364/@rem; | |||
| height: 71/@rem; | |||
| margin-left: -182/@rem; | |||
| background-image: url("../image/redPack/button.png"); | |||
| -o-animation: shake .5s 2 linear alternate; | |||
| -ms-animation: shake .5s 2 linear alternate; | |||
| -moz-animation: shake .5s 2 linear alternate; | |||
| -webkit-animation: shake .5s 2 linear alternate; | |||
| animation: shake .5s 2 linear alternate; | |||
| } | |||
| @keyframes shake { | |||
| 50%{ | |||
| -o-transform: rotate(-5deg); | |||
| -ms-transform: rotate(-5deg); | |||
| -moz-transform: rotate(-5deg); | |||
| -webkit-transform: rotate(-5deg); | |||
| transform: rotate(-5deg); | |||
| } | |||
| 100%{ | |||
| -o-transform: rotate(5deg); | |||
| -ms-transform: rotate(5deg); | |||
| -moz-transform: rotate(5deg); | |||
| -webkit-transform: rotate(5deg); | |||
| transform: rotate(5deg); | |||
| } | |||
| } | |||
| #close{ | |||
| opacity: 0; | |||
| position: absolute; | |||
| right: 0/@rem; | |||
| top: -80/@rem; | |||
| z-index: 10; | |||
| width: 64/@rem; | |||
| height: 64/@rem; | |||
| background-image: url("../image/redPack/close.png"); | |||
| -o-animation: fadein .5s .5s linear forwards; | |||
| -ms-animation: fadein .5s .5s linear forwards; | |||
| -moz-animation: fadein .5s .5s linear forwards; | |||
| -webkit-animation: fadein .5s .5s linear forwards; | |||
| animation: fadein .5s .5s linear forwards; | |||
| } | |||
| @keyframes fadein { | |||
| 100%{ | |||
| opacity: 1; | |||
| -o-transform: rotate(360deg); | |||
| -ms-transform: rotate(360deg); | |||
| -moz-transform: rotate(360deg); | |||
| -webkit-transform: rotate(360deg); | |||
| transform: rotate(360deg); | |||
| } | |||
| } | |||
| @@ -0,0 +1,84 @@ | |||
| @charset "utf-8"; | |||
| #wrap { | |||
| overflow: hidden; | |||
| position: relative; | |||
| width: 100%; | |||
| height: auto; | |||
| } | |||
| #wrap header { | |||
| margin: 0.2rem auto; | |||
| width: 8.85333333rem; | |||
| height: 0.82666667rem; | |||
| background-color: #fd4c4c; | |||
| border-radius: 31px; | |||
| } | |||
| #wrap header .title { | |||
| margin: 0.2rem auto; | |||
| padding: 0 0.66666667rem; | |||
| width: 85%; | |||
| height: 0.82666667rem; | |||
| background-color: #fd4c4c; | |||
| line-height: 0.82666667rem; | |||
| font-size: 0.29333333rem; | |||
| color: #fff; | |||
| border-radius: 0.41333333rem; | |||
| } | |||
| #wrap header .title div { | |||
| float: right; | |||
| width: 85%; | |||
| } | |||
| #wrap header p { | |||
| float: left; | |||
| margin-right: 0.66666667rem; | |||
| } | |||
| #wrap header i { | |||
| font-size: 0.29333333rem; | |||
| } | |||
| /*主体*/ | |||
| .main { | |||
| padding: 0 0.4rem; | |||
| width: 92%; | |||
| height: auto; | |||
| } | |||
| .main li { | |||
| padding: 0.53333333rem 0; | |||
| width: 100%; | |||
| height: 1.86666667rem; | |||
| border-top: 1px solid #ddd; | |||
| } | |||
| .main li a { | |||
| display: block; | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .main li a img { | |||
| width: 35%; | |||
| height: inherit; | |||
| } | |||
| .main li div { | |||
| position: relative; | |||
| float: right; | |||
| margin-top: 0.32rem; | |||
| width: 60%; | |||
| height: 1.2rem; | |||
| } | |||
| .main li div p:nth-child(1) { | |||
| overflow: hidden; | |||
| margin-bottom: 0.32rem; | |||
| width: 4.66666667rem; | |||
| font-size: 0.37333333rem; | |||
| white-space: nowrap; | |||
| text-overflow: ellipsis; | |||
| color: #333; | |||
| } | |||
| .main li div p:nth-child(2) { | |||
| font-size: 0.32rem; | |||
| color: #999; | |||
| } | |||
| .main li div i { | |||
| position: absolute; | |||
| right: 0; | |||
| top: 0.4rem; | |||
| font-size: 0.45333333rem; | |||
| color: #999; | |||
| } | |||
| @@ -0,0 +1,102 @@ | |||
| @charset "utf-8"; | |||
| @rem:75rem; | |||
| #wrap { | |||
| overflow: hidden; | |||
| position: relative; | |||
| width: 100%; | |||
| height: auto; | |||
| } | |||
| #wrap header{ | |||
| margin: 15/@rem auto; | |||
| width: 664/@rem; | |||
| height: 62/@rem; | |||
| background-color: #fd4c4c; | |||
| border-radius: 31px; | |||
| } | |||
| #wrap header .title{ | |||
| margin: 15/@rem auto; | |||
| padding: 0 50/@rem; | |||
| width: 85%; | |||
| height: 62/@rem; | |||
| background-color: #fd4c4c; | |||
| line-height: 62/@rem; | |||
| font-size: 22/@rem; | |||
| color: #fff; | |||
| border-radius: 31/@rem; | |||
| } | |||
| #wrap header .title div{ | |||
| float: right; | |||
| width: 85%; | |||
| } | |||
| #wrap header p{ | |||
| float: left; | |||
| margin-right: 50/@rem; | |||
| } | |||
| #wrap header i{ | |||
| font-size: 22/@rem; | |||
| } | |||
| /*主体*/ | |||
| .main{ | |||
| padding: 0 30/@rem; | |||
| width: 92%; | |||
| height: auto; | |||
| } | |||
| .main li{ | |||
| padding: 40/@rem 0; | |||
| width: 100%; | |||
| height: 140/@rem; | |||
| border-top:1px solid #ddd; | |||
| } | |||
| .main li a{ | |||
| display: block; | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .main li a img{ | |||
| width: 35%; | |||
| height: inherit; | |||
| } | |||
| .main li div{ | |||
| position: relative; | |||
| float: right; | |||
| margin-top: 24/@rem; | |||
| width: 60%; | |||
| height: 90/@rem; | |||
| } | |||
| .main li div p:nth-child(1){ | |||
| overflow: hidden; | |||
| margin-bottom: 24/@rem; | |||
| width: 350/@rem; | |||
| font-size: 28/@rem; | |||
| white-space:nowrap; | |||
| text-overflow:ellipsis; | |||
| color: #333; | |||
| } | |||
| .main li div p:nth-child(2){ | |||
| font-size: 24/@rem; | |||
| color: #999; | |||
| } | |||
| .main li div i{ | |||
| position: absolute; | |||
| right: 0; | |||
| top: 30/@rem; | |||
| font-size: 34/@rem; | |||
| color: #999; | |||
| } | |||
| @@ -0,0 +1,370 @@ | |||
| *{margin: 0;padding: 0;list-style: none;} | |||
| /* | |||
| KISSY CSS Reset | |||
| 理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 | |||
| 2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 | |||
| 3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 | |||
| 特色:1. 适应中文;2. 基于最新主流浏览器。 | |||
| 维护:玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com> | |||
| */ | |||
| /** 清除内外边距 **/ | |||
| body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ | |||
| dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ | |||
| pre, /* text formatting elements 文本格式元素 */ | |||
| form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ | |||
| th, td /* table elements 表格元素 */ { | |||
| margin: 0; | |||
| padding: 0; | |||
| } | |||
| /** 设置默认字体 **/ | |||
| body, | |||
| button, input, select, textarea /* for ie */ { | |||
| font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; | |||
| } | |||
| h1, h2, h3, h4, h5, h6 { font-size: 100%; } | |||
| address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ | |||
| code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ | |||
| small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ | |||
| /** 重置列表元素 **/ | |||
| ul, ol { list-style: none; } | |||
| /** 重置文本格式元素 **/ | |||
| a { text-decoration: none; } | |||
| a:hover { text-decoration: underline; } | |||
| /** 重置表单元素 **/ | |||
| legend { color: #000; } /* for ie6 */ | |||
| fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ | |||
| button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ | |||
| /* 注:optgroup 无法扶正 */ | |||
| /** 重置表格元素 **/ | |||
| table { border-collapse: collapse; border-spacing: 0; } | |||
| /* 清除浮动 */ | |||
| .ks-clear:after, .clear:after { | |||
| content: '\20'; | |||
| display: block; | |||
| height: 0; | |||
| clear: both; | |||
| } | |||
| .ks-clear, .clear { | |||
| *zoom: 1; | |||
| } | |||
| .main { | |||
| padding: 30px 100px; | |||
| width: 960px; | |||
| margin: 0 auto; | |||
| } | |||
| .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} | |||
| .helps{margin-top:40px;} | |||
| .helps pre{ | |||
| padding:20px; | |||
| margin:10px 0; | |||
| border:solid 1px #e7e1cd; | |||
| background-color: #fffdef; | |||
| overflow: auto; | |||
| } | |||
| .icon_lists{ | |||
| width: 100% !important; | |||
| } | |||
| .icon_lists li{ | |||
| float:left; | |||
| width: 100px; | |||
| height:180px; | |||
| text-align: center; | |||
| list-style: none !important; | |||
| } | |||
| .icon_lists .icon{ | |||
| font-size: 42px; | |||
| line-height: 100px; | |||
| margin: 10px 0; | |||
| color:#333; | |||
| -webkit-transition: font-size 0.25s ease-out 0s; | |||
| -moz-transition: font-size 0.25s ease-out 0s; | |||
| transition: font-size 0.25s ease-out 0s; | |||
| } | |||
| .icon_lists .icon:hover{ | |||
| font-size: 100px; | |||
| } | |||
| .markdown { | |||
| color: #666; | |||
| font-size: 14px; | |||
| line-height: 1.8; | |||
| } | |||
| .highlight { | |||
| line-height: 1.5; | |||
| } | |||
| .markdown img { | |||
| vertical-align: middle; | |||
| max-width: 100%; | |||
| } | |||
| .markdown h1 { | |||
| color: #404040; | |||
| font-weight: 500; | |||
| line-height: 40px; | |||
| margin-bottom: 24px; | |||
| } | |||
| .markdown h2, | |||
| .markdown h3, | |||
| .markdown h4, | |||
| .markdown h5, | |||
| .markdown h6 { | |||
| color: #404040; | |||
| margin: 1.6em 0 0.6em 0; | |||
| font-weight: 500; | |||
| clear: both; | |||
| } | |||
| .markdown h1 { | |||
| font-size: 28px; | |||
| } | |||
| .markdown h2 { | |||
| font-size: 22px; | |||
| } | |||
| .markdown h3 { | |||
| font-size: 16px; | |||
| } | |||
| .markdown h4 { | |||
| font-size: 14px; | |||
| } | |||
| .markdown h5 { | |||
| font-size: 12px; | |||
| } | |||
| .markdown h6 { | |||
| font-size: 12px; | |||
| } | |||
| .markdown hr { | |||
| height: 1px; | |||
| border: 0; | |||
| background: #e9e9e9; | |||
| margin: 16px 0; | |||
| clear: both; | |||
| } | |||
| .markdown p, | |||
| .markdown pre { | |||
| margin: 1em 0; | |||
| } | |||
| .markdown > p, | |||
| .markdown > blockquote, | |||
| .markdown > .highlight, | |||
| .markdown > ol, | |||
| .markdown > ul { | |||
| width: 80%; | |||
| } | |||
| .markdown ul > li { | |||
| list-style: circle; | |||
| } | |||
| .markdown > ul li, | |||
| .markdown blockquote ul > li { | |||
| margin-left: 20px; | |||
| padding-left: 4px; | |||
| } | |||
| .markdown > ul li p, | |||
| .markdown > ol li p { | |||
| margin: 0.6em 0; | |||
| } | |||
| .markdown ol > li { | |||
| list-style: decimal; | |||
| } | |||
| .markdown > ol li, | |||
| .markdown blockquote ol > li { | |||
| margin-left: 20px; | |||
| padding-left: 4px; | |||
| } | |||
| .markdown code { | |||
| margin: 0 3px; | |||
| padding: 0 5px; | |||
| background: #eee; | |||
| border-radius: 3px; | |||
| } | |||
| .markdown pre { | |||
| border-radius: 6px; | |||
| background: #f7f7f7; | |||
| padding: 20px; | |||
| } | |||
| .markdown pre code { | |||
| border: none; | |||
| background: #f7f7f7; | |||
| margin: 0; | |||
| } | |||
| .markdown strong, | |||
| .markdown b { | |||
| font-weight: 600; | |||
| } | |||
| .markdown > table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0px; | |||
| empty-cells: show; | |||
| border: 1px solid #e9e9e9; | |||
| width: 95%; | |||
| margin-bottom: 24px; | |||
| } | |||
| .markdown > table th { | |||
| white-space: nowrap; | |||
| color: #333; | |||
| font-weight: 600; | |||
| } | |||
| .markdown > table th, | |||
| .markdown > table td { | |||
| border: 1px solid #e9e9e9; | |||
| padding: 8px 16px; | |||
| text-align: left; | |||
| } | |||
| .markdown > table th { | |||
| background: #F7F7F7; | |||
| } | |||
| .markdown blockquote { | |||
| font-size: 90%; | |||
| color: #999; | |||
| border-left: 4px solid #e9e9e9; | |||
| padding-left: 0.8em; | |||
| margin: 1em 0; | |||
| font-style: italic; | |||
| } | |||
| .markdown blockquote p { | |||
| margin: 0; | |||
| } | |||
| .markdown .anchor { | |||
| opacity: 0; | |||
| transition: opacity 0.3s ease; | |||
| margin-left: 8px; | |||
| } | |||
| .markdown .waiting { | |||
| color: #ccc; | |||
| } | |||
| .markdown h1:hover .anchor, | |||
| .markdown h2:hover .anchor, | |||
| .markdown h3:hover .anchor, | |||
| .markdown h4:hover .anchor, | |||
| .markdown h5:hover .anchor, | |||
| .markdown h6:hover .anchor { | |||
| opacity: 1; | |||
| display: inline-block; | |||
| } | |||
| .markdown > br, | |||
| .markdown > p > br { | |||
| clear: both; | |||
| } | |||
| .hljs { | |||
| display: block; | |||
| background: white; | |||
| padding: 0.5em; | |||
| color: #333333; | |||
| overflow-x: auto; | |||
| } | |||
| .hljs-comment, | |||
| .hljs-meta { | |||
| color: #969896; | |||
| } | |||
| .hljs-string, | |||
| .hljs-variable, | |||
| .hljs-template-variable, | |||
| .hljs-strong, | |||
| .hljs-emphasis, | |||
| .hljs-quote { | |||
| color: #df5000; | |||
| } | |||
| .hljs-keyword, | |||
| .hljs-selector-tag, | |||
| .hljs-type { | |||
| color: #a71d5d; | |||
| } | |||
| .hljs-literal, | |||
| .hljs-symbol, | |||
| .hljs-bullet, | |||
| .hljs-attribute { | |||
| color: #0086b3; | |||
| } | |||
| .hljs-section, | |||
| .hljs-name { | |||
| color: #63a35c; | |||
| } | |||
| .hljs-tag { | |||
| color: #333333; | |||
| } | |||
| .hljs-title, | |||
| .hljs-attr, | |||
| .hljs-selector-id, | |||
| .hljs-selector-class, | |||
| .hljs-selector-attr, | |||
| .hljs-selector-pseudo { | |||
| color: #795da3; | |||
| } | |||
| .hljs-addition { | |||
| color: #55a532; | |||
| background-color: #eaffea; | |||
| } | |||
| .hljs-deletion { | |||
| color: #bd2c00; | |||
| background-color: #ffecec; | |||
| } | |||
| .hljs-link { | |||
| text-decoration: underline; | |||
| } | |||
| pre{ | |||
| background: #fff; | |||
| } | |||
| @@ -0,0 +1,58 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8"/> | |||
| <title>IconFont</title> | |||
| <link rel="stylesheet" href="demo.css"> | |||
| <link rel="stylesheet" href="iconfont.css"> | |||
| </head> | |||
| <body> | |||
| <div class="main markdown"> | |||
| <h1>IconFont 图标</h1> | |||
| <ul class="icon_lists clear"> | |||
| <li> | |||
| <i class="icon iconfont icon-msnui-telephone"></i> | |||
| <div class="name">电话</div> | |||
| <div class="fontclass">.icon-msnui-telephone</div> | |||
| </li> | |||
| <li> | |||
| <i class="icon iconfont icon-qq"></i> | |||
| <div class="name">qq</div> | |||
| <div class="fontclass">.icon-qq</div> | |||
| </li> | |||
| <li> | |||
| <i class="icon iconfont icon-youjiantou-01"></i> | |||
| <div class="name">右箭头</div> | |||
| <div class="fontclass">.icon-youjiantou-01</div> | |||
| </li> | |||
| </ul> | |||
| <h2 id="font-class-">font-class引用</h2> | |||
| <hr> | |||
| <p>font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。</p> | |||
| <p>与unicode使用方式相比,具有如下特点:</p> | |||
| <ul> | |||
| <li>兼容性良好,支持ie8+,及所有现代浏览器。</li> | |||
| <li>相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。</li> | |||
| <li>因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。</li> | |||
| <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> | |||
| </ul> | |||
| <p>使用步骤如下:</p> | |||
| <h3 id="-fontclass-">第一步:引入项目下面生成的fontclass代码:</h3> | |||
| <pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre> | |||
| <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> | |||
| <pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre> | |||
| <blockquote> | |||
| <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> | |||
| </blockquote> | |||
| </div> | |||
| </body> | |||
| </html> | |||
| @@ -0,0 +1,87 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8"/> | |||
| <title>IconFont</title> | |||
| <link rel="stylesheet" href="demo.css"> | |||
| <script src="iconfont.js"></script> | |||
| <style type="text/css"> | |||
| .icon { | |||
| /* 通过设置 font-size 来改变图标大小 */ | |||
| width: 1em; height: 1em; | |||
| /* 图标和文字相邻时,垂直对齐 */ | |||
| vertical-align: -0.15em; | |||
| /* 通过设置 color 来改变 SVG 的颜色/fill */ | |||
| fill: currentColor; | |||
| /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 | |||
| normalize.css 中也包含这行 */ | |||
| overflow: hidden; | |||
| } | |||
| </style> | |||
| </head> | |||
| <body> | |||
| <div class="main markdown"> | |||
| <h1>IconFont 图标</h1> | |||
| <ul class="icon_lists clear"> | |||
| <li> | |||
| <svg class="icon" aria-hidden="true"> | |||
| <use xlink:href="#icon-msnui-telephone"></use> | |||
| </svg> | |||
| <div class="name">电话</div> | |||
| <div class="fontclass">#icon-msnui-telephone</div> | |||
| </li> | |||
| <li> | |||
| <svg class="icon" aria-hidden="true"> | |||
| <use xlink:href="#icon-qq"></use> | |||
| </svg> | |||
| <div class="name">qq</div> | |||
| <div class="fontclass">#icon-qq</div> | |||
| </li> | |||
| <li> | |||
| <svg class="icon" aria-hidden="true"> | |||
| <use xlink:href="#icon-youjiantou-01"></use> | |||
| </svg> | |||
| <div class="name">右箭头</div> | |||
| <div class="fontclass">#icon-youjiantou-01</div> | |||
| </li> | |||
| </ul> | |||
| <h2 id="symbol-">symbol引用</h2> | |||
| <hr> | |||
| <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> | |||
| 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:</p> | |||
| <ul> | |||
| <li>支持多色图标了,不再受单色限制。</li> | |||
| <li>通过一些技巧,支持像字体那样,通过<code>font-size</code>,<code>color</code>来调整样式。</li> | |||
| <li>兼容性较差,支持 ie9+,及现代浏览器。</li> | |||
| <li>浏览器渲染svg的性能一般,还不如png。</li> | |||
| </ul> | |||
| <p>使用步骤如下:</p> | |||
| <h3 id="-symbol-">第一步:引入项目下面生成的symbol代码:</h3> | |||
| <pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre> | |||
| <h3 id="-css-">第二步:加入通用css代码(引入一次就行):</h3> | |||
| <pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>> | |||
| .icon { | |||
| width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em; | |||
| vertical-align: <span class="hljs-number">-0.15</span>em; | |||
| fill: currentColor; | |||
| overflow: hidden; | |||
| } | |||
| <<span class="hljs-regexp">/style></span></code></pre> | |||
| <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> | |||
| <pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag"> | |||
| <<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span> | |||
| </span><<span class="hljs-regexp">/svg> | |||
| </span></code></pre> | |||
| </div> | |||
| </body> | |||
| </html> | |||
| @@ -0,0 +1,96 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8"/> | |||
| <title>IconFont</title> | |||
| <link rel="stylesheet" href="demo.css"> | |||
| <style type="text/css"> | |||
| @font-face {font-family: "iconfont"; | |||
| src: url('iconfont.eot'); /* IE9*/ | |||
| src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |||
| url('iconfont.woff') format('woff'), /* chrome, firefox */ | |||
| url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ | |||
| url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ | |||
| } | |||
| .iconfont { | |||
| font-family:"iconfont" !important; | |||
| font-size:16px; | |||
| font-style:normal; | |||
| -webkit-font-smoothing: antialiased; | |||
| -webkit-text-stroke-width: 0.2px; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| } | |||
| </style> | |||
| </head> | |||
| <body> | |||
| <div class="main markdown"> | |||
| <h1>IconFont 图标</h1> | |||
| <ul class="icon_lists clear"> | |||
| <li> | |||
| <i class="icon iconfont"></i> | |||
| <div class="name">电话</div> | |||
| <div class="code">&#xe622;</div> | |||
| </li> | |||
| <li> | |||
| <i class="icon iconfont"></i> | |||
| <div class="name">qq</div> | |||
| <div class="code">&#xe623;</div> | |||
| </li> | |||
| <li> | |||
| <i class="icon iconfont"></i> | |||
| <div class="name">右箭头</div> | |||
| <div class="code">&#xe60e;</div> | |||
| </li> | |||
| </ul> | |||
| <h2 id="unicode-">unicode引用</h2> | |||
| <hr> | |||
| <p>unicode是字体在网页端最原始的应用方式,特点是:</p> | |||
| <ul> | |||
| <li>兼容性最好,支持ie6+,及所有现代浏览器。</li> | |||
| <li>支持按字体的方式去动态调整图标大小,颜色等等。</li> | |||
| <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> | |||
| </ul> | |||
| <blockquote> | |||
| <p>注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式</p> | |||
| </blockquote> | |||
| <p>unicode使用步骤如下:</p> | |||
| <h3 id="-font-face">第一步:拷贝项目下面生成的font-face</h3> | |||
| <pre><code class="lang-js hljs javascript">@font-face { | |||
| font-family: <span class="hljs-string">'iconfont'</span>; | |||
| src: url(<span class="hljs-string">'iconfont.eot'</span>); | |||
| src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>), | |||
| url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>), | |||
| url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>), | |||
| url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>); | |||
| } | |||
| </code></pre> | |||
| <h3 id="-iconfont-">第二步:定义使用iconfont的样式</h3> | |||
| <pre><code class="lang-js hljs javascript">.iconfont{ | |||
| font-family:<span class="hljs-string">"iconfont"</span> !important; | |||
| font-size:<span class="hljs-number">16</span>px;font-style:normal; | |||
| -webkit-font-smoothing: antialiased; | |||
| -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| } | |||
| </code></pre> | |||
| <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> | |||
| <pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre> | |||
| <blockquote> | |||
| <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> | |||
| </blockquote> | |||
| </div> | |||
| </body> | |||
| </html> | |||
| @@ -0,0 +1,23 @@ | |||
| @font-face {font-family: "iconfont"; | |||
| src: url('iconfont.eot?t=1520581334903'); /* IE9*/ | |||
| src: url('iconfont.eot?t=1520581334903#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |||
| url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAc4AAsAAAAACogAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kgQY21hcAAAAYAAAABuAAABqjKz0rNnbHlmAAAB8AAAAy4AAAQk3WcNk2hlYWQAAAUgAAAALwAAADYQr/upaGhlYQAABVAAAAAcAAAAJAfeA4ZobXR4AAAFbAAAABMAAAAUE+kAAGxvY2EAAAWAAAAADAAAAAwCXgLabWF4cAAABYwAAAAeAAAAIAEUAQluYW1lAAAFrAAAAUUAAAJtPlT+fXBvc3QAAAb0AAAAQQAAAFJsEU/heJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s04gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxTZm7438AQw9zA0AAUZgTJAQAm7gySeJzFkNENgCAMRK+ChhjDEPDrAH46jF9OwMRdA4/CjxNw5MH10gApgBWAIyfxgLwQND1MxXKH3XKPi3XgWngWjZprHS6ZaxLrCOY8O3m3bJgmmff0X4ft96g4aZQBv6ix03JNnTZlzR24D3OGEmMAAHicNVNLjxtFEJ6q6u7qbvfMeMaeGa8fa3vN2kSb2Fl7bYMAmwguRES8TuQEYiW4wJFwCNJeECAhhDjnhCD8iUhInDlw5gQiZ34BGMoGelrTPfX4qr5PNZGOor9/o0fUihrRk9F59GL0ahSBOYOTBHswnFxM8QyKoS6qZkKT0WTIo5MpPQfViWmW89XFuDJsUkjgGBbD+WoyxQksLzb4DMzLHsBRp/1GftrN6SvwrcnxJ7vb+A0U/VE33dzYvXR925wPGvZeyPOjPP/CGq0tokoTeL8qnXbe7L7Vabt41L+GfQhHk/bLb8aDTv72Zxcf9E4rB3B1BY3OIPl+m7Uz2ffbZSM/4npsW+149EQT7j2utRqhN/49kgXC9Ud6QLeEZ6TPR1OYwRTWG1gfQyW74AT225R9obMuV+LaHjzHezv+oV//6b35u5ch/mhRFdg7RzBVSDOg4a3xC2uVFjVXZoTDD6ccbPrWRn95/9mPf33l6TsIdV5cDQnT3NisTtvXpnfOEENcyxHA3h6rTufG3f97fEyfUzf6M4pOZ365peVsMBIRUtzvKk2KquhTsdja5Xq5WBeLfihGLE/qCy76flEt1uKsFn31b8wMljM1mmz9os/i3Dqx0afIhBx06gKAkiYMESoNiCQOFWutGrHT5Jq1qhbX4ps3W6H0vvBtq4OzzGyV1sQKFGm5yZWIPRdc46A0g2JFAoZi07GEGYGWQkTKa7RdqwAweC1l9b4VJW4JEE2azrqeL553zCFNjGlq7TrcSqrNU2FMSZyggO+Rk+sawWvSXDN6X8wzybGv6kCo7E0S+VfcZ5u1Qjs0EbX2OtOVkeWhbls9oTK0bFuJ5OrYeEGgPYyg6job552t2YS844wtJ8cN9KXktLKAAlXYzDW8bTg/uBaUFyVkfIkSLwocOpF0dsLAd/k//sKRDLCW6ISMBAUvGmo6KI8kmXJqtsAob+UR2AmugLYJPRlvs6xuGQvRlUQ1SdTqgOc9Nw7z8wP+IjOeR5GT8Tal/CcJyDDDar0a48+7uyzNMzzYvcMYMgvfEYqQX8PDw+fucnfJeQ0YHhKZTEbyH76qZ5wAAHicY2BkYGAA4sqpW2Pi+W2+MnCzMIDAtRPR1xD0//0sDMyOQC4HAxNIFABKlwt+AHicY2BkYGBu+N/AEMPCAAJAkpEBFbACAEcLAm54nGNhYGBgfsnAwMKAwAAOmwD9AAAAAAAAdgDIAegCEnicY2BkYGBgZfgLxCDABMRcQMjA8B/MZwAAIfkCHgAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAlZGJkZmRhZGVkY2BsYI/tzivNFO3JDUntSAjPy+VqbCQtzK/NCszMa8kv1TXwJCBAQABYAymAAAA') format('woff'), | |||
| url('iconfont.ttf?t=1520581334903') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ | |||
| url('iconfont.svg?t=1520581334903#iconfont') format('svg'); /* iOS 4.1- */ | |||
| } | |||
| .iconfont { | |||
| font-family:"iconfont" !important; | |||
| font-size:16px; | |||
| font-style:normal; | |||
| -webkit-font-smoothing: antialiased; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| } | |||
| .icon-msnui-telephone:before { content: "\e622"; } | |||
| .icon-qq:before { content: "\e623"; } | |||
| .icon-youjiantou-01:before { content: "\e60e"; } | |||
| @@ -0,0 +1,99 @@ | |||
| var $maskRule = $("#mask-rule"),//规则遮罩层 | |||
| $mask = $("#mask"),//红包遮罩层 | |||
| $winning = $(".winning"),//红包 | |||
| $card = $("#card"), | |||
| $close = $("#close"); | |||
| //link = false;//判断是否在链接跳转中 | |||
| //规则 | |||
| $(".rule").click(function () { | |||
| $maskRule.show(); | |||
| }); | |||
| $('.b1').click(function(){ | |||
| $('.t_w').hide(); | |||
| $('.b1').hide(); | |||
| }) | |||
| $('#share').click(function(){ | |||
| $('.t_w').show(); | |||
| $('.b1').show(); | |||
| }) | |||
| $('.t_w').click(function(){ | |||
| $('.t_w').hide(); | |||
| $('.b1').hide(); | |||
| }) | |||
| $("#close-rule").click(function () { | |||
| $maskRule.hide(); | |||
| }); | |||
| $('#warnning-box-bg').click(function(){ | |||
| $('#warnning-box-bg').hide(); | |||
| $('#warnning-box').hide(); | |||
| }) | |||
| $("#w-button").click(function () { | |||
| $('#warnning-box-bg').hide(); | |||
| $('#warnning-box').hide(); | |||
| }); | |||
| /*获取地址栏参数*/ | |||
| function getQueryString(name) { | |||
| var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); | |||
| var r = window.location.search.substr(1).match(reg); | |||
| if (r != null) return unescape(r[2]); | |||
| return null; | |||
| } | |||
| /*权重计算*/ | |||
| function roll(args){ | |||
| let sum_weight = 0; | |||
| let result = null; | |||
| const items = args.slice().map(item => (sum_weight += item.weight) && item); // 计算总权重 | |||
| const random = Math.ceil(Math.random() * sum_weight); // 随机抽取的物品位置 | |||
| let start = 0; // 区间的开始,第一个是为0 | |||
| while (items.length) { | |||
| const item = items.shift(); // 取出第一个商品 | |||
| const end = start + item.weight; // 计算区间的结束 | |||
| if (random > start && random <= end) { // 如果随机数在这个区间内,说明抽中了该商品,终止循环 | |||
| result = item; | |||
| break; | |||
| } | |||
| start = end; // 当前区间的结束,作为下一个区间的开始 | |||
| } | |||
| return result ? result.item : null; | |||
| } | |||
| /*中奖信息提示*/ | |||
| function win() { | |||
| //遮罩层显示 | |||
| $mask.show(); | |||
| $winning.addClass("reback"); | |||
| setTimeout(function () { | |||
| $card.addClass("pull"); | |||
| }, 500); | |||
| //关闭弹出层 | |||
| $("#close,.win,.btn").click(function () { | |||
| //$close.click(function () { | |||
| $mask.hide(); | |||
| $winning.removeClass("reback"); | |||
| $card.removeClass("pull"); | |||
| }); | |||
| /*$(".win,.btn").click(function () { | |||
| link = true; | |||
| });*/ | |||
| } | |||
| //此处可以在commonjs中合并 | |||
| function queryString(name) { | |||
| name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); | |||
| var regexS = "[\\?&]" + name + "=([^&#]*)"; | |||
| var regex = new RegExp(regexS); | |||
| var results = regex.exec(window.location.search); | |||
| if(results === null) { | |||
| return ""; | |||
| } | |||
| else { | |||
| return decodeURIComponent(results[1].replace(/\+/g, " ")); | |||
| } | |||
| } | |||
| @@ -0,0 +1,117 @@ | |||
| /*! | |||
| * jQuery Cookie Plugin v1.4.1 | |||
| * https://github.com/carhartl/jquery-cookie | |||
| * | |||
| * Copyright 2013 Klaus Hartl | |||
| * Released under the MIT license | |||
| */ | |||
| (function (factory) { | |||
| if (typeof define === 'function' && define.amd) { | |||
| // AMD | |||
| define(['jquery'], factory); | |||
| } else if (typeof exports === 'object') { | |||
| // CommonJS | |||
| factory(require('jquery')); | |||
| } else { | |||
| // Browser globals | |||
| factory(jQuery); | |||
| } | |||
| }(function ($) { | |||
| var pluses = /\+/g; | |||
| function encode(s) { | |||
| return config.raw ? s : encodeURIComponent(s); | |||
| } | |||
| function decode(s) { | |||
| return config.raw ? s : decodeURIComponent(s); | |||
| } | |||
| function stringifyCookieValue(value) { | |||
| return encode(config.json ? JSON.stringify(value) : String(value)); | |||
| } | |||
| function parseCookieValue(s) { | |||
| if (s.indexOf('"') === 0) { | |||
| // This is a quoted cookie as according to RFC2068, unescape... | |||
| s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); | |||
| } | |||
| try { | |||
| // Replace server-side written pluses with spaces. | |||
| // If we can't decode the cookie, ignore it, it's unusable. | |||
| // If we can't parse the cookie, ignore it, it's unusable. | |||
| s = decodeURIComponent(s.replace(pluses, ' ')); | |||
| return config.json ? JSON.parse(s) : s; | |||
| } catch(e) {} | |||
| } | |||
| function read(s, converter) { | |||
| var value = config.raw ? s : parseCookieValue(s); | |||
| return $.isFunction(converter) ? converter(value) : value; | |||
| } | |||
| var config = $.cookie = function (key, value, options) { | |||
| // Write | |||
| if (value !== undefined && !$.isFunction(value)) { | |||
| options = $.extend({}, config.defaults, options); | |||
| if (typeof options.expires === 'number') { | |||
| var days = options.expires, t = options.expires = new Date(); | |||
| t.setTime(+t + days * 864e+5); | |||
| } | |||
| return (document.cookie = [ | |||
| encode(key), '=', stringifyCookieValue(value), | |||
| options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE | |||
| options.path ? '; path=' + options.path : '', | |||
| options.domain ? '; domain=' + options.domain : '', | |||
| options.secure ? '; secure' : '' | |||
| ].join('')); | |||
| } | |||
| // Read | |||
| var result = key ? undefined : {}; | |||
| // To prevent the for loop in the first place assign an empty array | |||
| // in case there are no cookies at all. Also prevents odd result when | |||
| // calling $.cookie(). | |||
| var cookies = document.cookie ? document.cookie.split('; ') : []; | |||
| for (var i = 0, l = cookies.length; i < l; i++) { | |||
| var parts = cookies[i].split('='); | |||
| var name = decode(parts.shift()); | |||
| var cookie = parts.join('='); | |||
| if (key && key === name) { | |||
| // If second argument (value) is a function it's a converter... | |||
| result = read(cookie, value); | |||
| break; | |||
| } | |||
| // Prevent storing a cookie that we couldn't decode. | |||
| if (!key && (cookie = read(cookie)) !== undefined) { | |||
| result[name] = cookie; | |||
| } | |||
| } | |||
| return result; | |||
| }; | |||
| config.defaults = {}; | |||
| $.removeCookie = function (key, options) { | |||
| if ($.cookie(key) === undefined) { | |||
| return false; | |||
| } | |||
| // Must not alter options, thus extending a fresh object... | |||
| $.cookie(key, '', $.extend({}, options, { expires: -1 })); | |||
| return !$.cookie(key); | |||
| }; | |||
| })); | |||
| @@ -0,0 +1,313 @@ | |||
| // VERSION: 2.2 LAST UPDATE: 13.03.2012 | |||
| /* | |||
| * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php | |||
| * | |||
| * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009 | |||
| * Website: http://code.google.com/p/jqueryrotate/ | |||
| */ | |||
| // Documentation removed from script file (was kinda useless and outdated) | |||
| (function($) { | |||
| var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); | |||
| for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a]; | |||
| // Bad eval to preven google closure to remove it from code o_O | |||
| // After compresion replace it back to var IE = 'v' == '\v' | |||
| var IE = eval('"v"=="\v"'); | |||
| jQuery.fn.extend({ | |||
| rotate:function(parameters) | |||
| { | |||
| if (this.length===0||typeof parameters=="undefined") return; | |||
| if (typeof parameters=="number") parameters={angle:parameters}; | |||
| var returned=[]; | |||
| for (var i=0,i0=this.length;i<i0;i++) | |||
| { | |||
| var element=this.get(i); | |||
| if (!element.Wilq32 || !element.Wilq32.PhotoEffect) { | |||
| var paramClone = $.extend(true, {}, parameters); | |||
| var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj; | |||
| returned.push($(newRotObject)); | |||
| } | |||
| else { | |||
| element.Wilq32.PhotoEffect._handleRotation(parameters); | |||
| } | |||
| } | |||
| return returned; | |||
| }, | |||
| getRotateAngle: function(){ | |||
| var ret = []; | |||
| for (var i=0,i0=this.length;i<i0;i++) | |||
| { | |||
| var element=this.get(i); | |||
| if (element.Wilq32 && element.Wilq32.PhotoEffect) { | |||
| ret[i] = element.Wilq32.PhotoEffect._angle; | |||
| } | |||
| } | |||
| return ret; | |||
| }, | |||
| stopRotate: function(){ | |||
| for (var i=0,i0=this.length;i<i0;i++) | |||
| { | |||
| var element=this.get(i); | |||
| if (element.Wilq32 && element.Wilq32.PhotoEffect) { | |||
| clearTimeout(element.Wilq32.PhotoEffect._timer); | |||
| } | |||
| } | |||
| } | |||
| }); | |||
| // Library agnostic interface | |||
| Wilq32=window.Wilq32||{}; | |||
| Wilq32.PhotoEffect=(function(){ | |||
| if (supportedCSS) { | |||
| return function(img,parameters){ | |||
| img.Wilq32 = { | |||
| PhotoEffect: this | |||
| }; | |||
| this._img = this._rootObj = this._eventObj = img; | |||
| this._handleRotation(parameters); | |||
| } | |||
| } else { | |||
| return function(img,parameters) { | |||
| // Make sure that class and id are also copied - just in case you would like to refeer to an newly created object | |||
| this._img = img; | |||
| this._rootObj=document.createElement('span'); | |||
| this._rootObj.style.display="inline-block"; | |||
| this._rootObj.Wilq32 = | |||
| { | |||
| PhotoEffect: this | |||
| }; | |||
| img.parentNode.insertBefore(this._rootObj,img); | |||
| if (img.complete) { | |||
| this._Loader(parameters); | |||
| } else { | |||
| var self=this; | |||
| // TODO: Remove jQuery dependency | |||
| jQuery(this._img).bind("load", function() | |||
| { | |||
| self._Loader(parameters); | |||
| }); | |||
| } | |||
| } | |||
| } | |||
| })(); | |||
| Wilq32.PhotoEffect.prototype={ | |||
| _setupParameters : function (parameters){ | |||
| this._parameters = this._parameters || {}; | |||
| if (typeof this._angle !== "number") this._angle = 0 ; | |||
| if (typeof parameters.angle==="number") this._angle = parameters.angle; | |||
| this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle); | |||
| this._parameters.step = parameters.step || this._parameters.step || null; | |||
| this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; } | |||
| this._parameters.duration = parameters.duration || this._parameters.duration || 1000; | |||
| this._parameters.callback = parameters.callback || this._parameters.callback || function(){}; | |||
| if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind); | |||
| }, | |||
| _handleRotation : function(parameters){ | |||
| this._setupParameters(parameters); | |||
| if (this._angle==this._parameters.animateTo) { | |||
| this._rotate(this._angle); | |||
| } | |||
| else { | |||
| this._animateStart(); | |||
| } | |||
| }, | |||
| _BindEvents:function(events){ | |||
| if (events && this._eventObj) | |||
| { | |||
| // Unbinding previous Events | |||
| if (this._parameters.bind){ | |||
| var oldEvents = this._parameters.bind; | |||
| for (var a in oldEvents) if (oldEvents.hasOwnProperty(a)) | |||
| // TODO: Remove jQuery dependency | |||
| jQuery(this._eventObj).unbind(a,oldEvents[a]); | |||
| } | |||
| this._parameters.bind = events; | |||
| for (var a in events) if (events.hasOwnProperty(a)) | |||
| // TODO: Remove jQuery dependency | |||
| jQuery(this._eventObj).bind(a,events[a]); | |||
| } | |||
| }, | |||
| _Loader:(function() | |||
| { | |||
| if (IE) | |||
| return function(parameters) | |||
| { | |||
| var width=this._img.width; | |||
| var height=this._img.height; | |||
| this._img.parentNode.removeChild(this._img); | |||
| this._vimage = this.createVMLNode('image'); | |||
| this._vimage.src=this._img.src; | |||
| this._vimage.style.height=height+"px"; | |||
| this._vimage.style.width=width+"px"; | |||
| this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position! | |||
| this._vimage.style.top = "0px"; | |||
| this._vimage.style.left = "0px"; | |||
| /* Group minifying a small 1px precision problem when rotating object */ | |||
| this._container = this.createVMLNode('group'); | |||
| this._container.style.width=width; | |||
| this._container.style.height=height; | |||
| this._container.style.position="absolute"; | |||
| this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE | |||
| this._container.appendChild(this._vimage); | |||
| this._rootObj.appendChild(this._container); | |||
| this._rootObj.style.position="relative"; // FIXES IE PROBLEM | |||
| this._rootObj.style.width=width+"px"; | |||
| this._rootObj.style.height=height+"px"; | |||
| this._rootObj.setAttribute('id',this._img.getAttribute('id')); | |||
| this._rootObj.className=this._img.className; | |||
| this._eventObj = this._rootObj; | |||
| this._handleRotation(parameters); | |||
| } | |||
| else | |||
| return function (parameters) | |||
| { | |||
| this._rootObj.setAttribute('id',this._img.getAttribute('id')); | |||
| this._rootObj.className=this._img.className; | |||
| this._width=this._img.width; | |||
| this._height=this._img.height; | |||
| this._widthHalf=this._width/2; // used for optimisation | |||
| this._heightHalf=this._height/2;// used for optimisation | |||
| var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width)); | |||
| this._widthAdd = _widthMax - this._width; | |||
| this._heightAdd = _widthMax - this._height; // widthMax because maxWidth=maxHeight | |||
| this._widthAddHalf=this._widthAdd/2; // used for optimisation | |||
| this._heightAddHalf=this._heightAdd/2;// used for optimisation | |||
| this._img.parentNode.removeChild(this._img); | |||
| this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width; | |||
| this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height; | |||
| this._canvas=document.createElement('canvas'); | |||
| this._canvas.setAttribute('width',this._width); | |||
| this._canvas.style.position="relative"; | |||
| this._canvas.style.left = -this._widthAddHalf + "px"; | |||
| this._canvas.style.top = -this._heightAddHalf + "px"; | |||
| this._canvas.Wilq32 = this._rootObj.Wilq32; | |||
| this._rootObj.appendChild(this._canvas); | |||
| this._rootObj.style.width=this._width+"px"; | |||
| this._rootObj.style.height=this._height+"px"; | |||
| this._eventObj = this._canvas; | |||
| this._cnv=this._canvas.getContext('2d'); | |||
| this._handleRotation(parameters); | |||
| } | |||
| })(), | |||
| _animateStart:function() | |||
| { | |||
| if (this._timer) { | |||
| clearTimeout(this._timer); | |||
| } | |||
| this._animateStartTime = +new Date; | |||
| this._animateStartAngle = this._angle; | |||
| this._animate(); | |||
| }, | |||
| _animate:function() | |||
| { | |||
| var actualTime = +new Date; | |||
| var checkEnd = actualTime - this._animateStartTime > this._parameters.duration; | |||
| // TODO: Bug for animatedGif for static rotation ? (to test) | |||
| if (checkEnd && !this._parameters.animatedGif) | |||
| { | |||
| clearTimeout(this._timer); | |||
| } | |||
| else | |||
| { | |||
| if (this._canvas||this._vimage||this._img) { | |||
| var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); | |||
| this._rotate((~~(angle*10))/10); | |||
| } | |||
| if (this._parameters.step) { | |||
| this._parameters.step(this._angle); | |||
| } | |||
| var self = this; | |||
| this._timer = setTimeout(function() | |||
| { | |||
| self._animate.call(self); | |||
| }, 10); | |||
| } | |||
| // To fix Bug that prevents using recursive function in callback I moved this function to back | |||
| if (this._parameters.callback && checkEnd){ | |||
| this._angle = this._parameters.animateTo; | |||
| this._rotate(this._angle); | |||
| this._parameters.callback.call(this._rootObj); | |||
| } | |||
| }, | |||
| _rotate : (function() | |||
| { | |||
| var rad = Math.PI/180; | |||
| if (IE) | |||
| return function(angle) | |||
| { | |||
| this._angle = angle; | |||
| this._container.style.rotation=(angle%360)+"deg"; | |||
| } | |||
| else if (supportedCSS) | |||
| return function(angle){ | |||
| this._angle = angle; | |||
| this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)"; | |||
| } | |||
| else | |||
| return function(angle) | |||
| { | |||
| this._angle = angle; | |||
| angle=(angle%360)* rad; | |||
| // clear canvas | |||
| this._canvas.width = this._width+this._widthAdd; | |||
| this._canvas.height = this._height+this._heightAdd; | |||
| // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. | |||
| this._cnv.translate(this._widthAddHalf,this._heightAddHalf); // at least center image on screen | |||
| this._cnv.translate(this._widthHalf,this._heightHalf); // we move image back to its orginal | |||
| this._cnv.rotate(angle); // rotate image | |||
| this._cnv.translate(-this._widthHalf,-this._heightHalf); // move image to its center, so we can rotate around its center | |||
| this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;) | |||
| this._cnv.drawImage(this._img, 0, 0); // First - we draw image | |||
| } | |||
| })() | |||
| } | |||
| if (IE) | |||
| { | |||
| Wilq32.PhotoEffect.prototype.createVMLNode=(function(){ | |||
| document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); | |||
| try { | |||
| !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); | |||
| return function (tagName) { | |||
| return document.createElement('<rvml:' + tagName + ' class="rvml">'); | |||
| }; | |||
| } catch (e) { | |||
| return function (tagName) { | |||
| return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); | |||
| }; | |||
| } | |||
| })(); | |||
| } | |||
| })(jQuery); | |||
| @@ -0,0 +1,288 @@ | |||
| @charset "utf-8"; | |||
| body { | |||
| background-color: #fae78d; | |||
| } | |||
| *{ | |||
| -webkit-overflow-scrolling: touch; | |||
| } | |||
| #share{ | |||
| position: absolute; | |||
| top: 1.2rem; | |||
| right: 0; | |||
| background-color: #34b202; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.64666667rem; | |||
| text-align: center; | |||
| line-height: 0.64666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| z-index: 10; | |||
| } | |||
| #wrap { | |||
| margin-top: -0.01333333rem; | |||
| height: 17.8rem; | |||
| background-image: url("../image/bg.png"); | |||
| } | |||
| .rule, | |||
| .my { | |||
| position: relative; | |||
| z-index: 3; | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.74666667rem; | |||
| background-color: #ff9d1b; | |||
| text-align: center; | |||
| line-height: 0.74666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| } | |||
| .rule { | |||
| border-top-right-radius: 0.13333333rem; | |||
| border-bottom-right-radius: 0.13333333rem; | |||
| } | |||
| .my { | |||
| background-color: #fe5362; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| } | |||
| /*游戏区域*/ | |||
| .main { | |||
| position: relative; | |||
| width: 100%; | |||
| height: 12.98666667rem; | |||
| } | |||
| .main .caidai { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 0; | |||
| z-index: 3; | |||
| margin-left: -4.29333333rem; | |||
| width: 8.58666667rem; | |||
| height: 11.64rem; | |||
| background-image: url("../image/caidai.png"); | |||
| } | |||
| .main .title { | |||
| position: relative; | |||
| z-index: 2; | |||
| width: 100%; | |||
| height: 4.18666667rem; | |||
| background-image: url("../image/title.png"); | |||
| } | |||
| .main .box { | |||
| position: relative; | |||
| margin-top: -1.6rem; | |||
| width: 100%; | |||
| height: 10.42666667rem; | |||
| background-image: url("../image/box.png"); | |||
| } | |||
| /*钩子*/ | |||
| .main .box #hook { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: -2.93333333rem; | |||
| z-index: 1; | |||
| margin-left: -0.86666667rem; | |||
| width: 1.73333333rem; | |||
| height: 5.73333333rem; | |||
| } | |||
| #hook .line { | |||
| margin: auto; | |||
| width: 0.58666667rem; | |||
| height: 4.56rem; | |||
| background-image: url("../image/line.png"); | |||
| } | |||
| #hook .left, | |||
| #hook .right { | |||
| position: absolute; | |||
| bottom: 0; | |||
| width: 0.74666667rem; | |||
| height: 1.34666667rem; | |||
| } | |||
| #hook .left { | |||
| left: 0; | |||
| background-image: url("../image/left.png"); | |||
| -o-transform-origin: right top; | |||
| -ms-transform-origin: right top; | |||
| -moz-transform-origin: right top; | |||
| -webkit-transform-origin: right top; | |||
| transform-origin: right top; | |||
| transform: rotate(-20deg); | |||
| } | |||
| #hook .right { | |||
| right: 0; | |||
| background-image: url("../image/right.png"); | |||
| -o-transform-origin: left top; | |||
| -ms-transform-origin: left top; | |||
| -moz-transform-origin: left top; | |||
| -webkit-transform-origin: left top; | |||
| transform-origin: left top; | |||
| -o-transform: rotate(20deg); | |||
| -ms-transform: rotate(20deg); | |||
| -moz-transform: rotate(20deg); | |||
| -webkit-transform: rotate(20deg); | |||
| transform: rotate(20deg); | |||
| } | |||
| #hook .up { | |||
| -o-animation: up .5s linear forwards; | |||
| -ms-animation: up .5s linear forwards; | |||
| -moz-animation: up .5s linear forwards; | |||
| -webkit-animation: up .5s linear forwards; | |||
| animation: up .5s linear forwards; | |||
| } | |||
| @keyframes up { | |||
| 100% { | |||
| -o-transform: rotate(0deg); | |||
| -ms-transform: rotate(0deg); | |||
| -moz-transform: rotate(0deg); | |||
| -webkit-transform: rotate(0deg); | |||
| transform: rotate(0deg); | |||
| } | |||
| } | |||
| /*传送带*/ | |||
| .behind, | |||
| .front { | |||
| overflow-x: hidden; | |||
| position: relative; | |||
| left: 50%; | |||
| top: 32%; | |||
| margin: -1.14666667rem 0 0 -4.13333333rem; | |||
| width: 8.26666667rem; | |||
| height: 2rem; | |||
| background-image: url("../image/behind.png"); | |||
| background-position: left bottom; | |||
| } | |||
| .front { | |||
| top: 43%; | |||
| width: 8.26666667rem; | |||
| height: 2.86666667rem; | |||
| background-image: url("../image/front.png"); | |||
| } | |||
| .behind ul, | |||
| .front ul { | |||
| width: 14rem; | |||
| } | |||
| .front ul { | |||
| position: absolute; | |||
| right: 0; | |||
| } | |||
| .behind li { | |||
| position: relative; | |||
| float: left; | |||
| height: 1.4rem; | |||
| } | |||
| .front li { | |||
| position: relative; | |||
| float: right; | |||
| height: 2.08rem; | |||
| } | |||
| .behind img { | |||
| position: absolute; | |||
| width: 1.21333333rem; | |||
| height: 1.36rem; | |||
| } | |||
| .front img { | |||
| position: absolute; | |||
| right: 0; | |||
| width: 1.85333333rem; | |||
| height: 2.08rem; | |||
| } | |||
| .box h3 { | |||
| margin: 4.73333333rem auto 0.24rem; | |||
| width: 3.81333333rem; | |||
| height: 0.69333333rem; | |||
| /* background-color: #ff9d1b; */ | |||
| text-align: center; | |||
| line-height: 0.69333333rem; | |||
| font-size: 0.26666667rem; | |||
| font-weight: normal; | |||
| color: #bc5700; | |||
| border-radius: 0.34666667rem; | |||
| } | |||
| /*按钮区域*/ | |||
| .box-btn { | |||
| width: 100%; | |||
| height: 1.85333333rem; | |||
| } | |||
| .box-btn li { | |||
| float: left; | |||
| } | |||
| .box-btn li:nth-child(1) { | |||
| width: 2.09333333rem; | |||
| height: 1.85333333rem; | |||
| background-image: url("../image/coin1.png"); | |||
| -o-transform-origin: center bottom; | |||
| -ms-transform-origin: center bottom; | |||
| -moz-transform-origin: center bottom; | |||
| -webkit-transform-origin: center bottom; | |||
| transform-origin: center bottom; | |||
| -o-animation: shak 3s ease-in-out infinite alternate; | |||
| -ms-animation: shak 3s ease-in-out infinite alternate; | |||
| -moz-animation: shak 3s ease-in-out infinite alternate; | |||
| -webkit-animation: shak 3s ease-in-out infinite alternate; | |||
| animation: shak 3s ease-in-out infinite alternate; | |||
| } | |||
| @keyframes shak { | |||
| 0%, | |||
| 100% { | |||
| -o-transform: rotate(0deg); | |||
| -ms-transform: rotate(0deg); | |||
| -moz-transform: rotate(0deg); | |||
| -webkit-transform: rotate(0deg); | |||
| transform: rotate(0deg); | |||
| } | |||
| 20%, | |||
| 60% { | |||
| -o-transform: rotate(-5deg); | |||
| -ms-transform: rotate(-5deg); | |||
| -moz-transform: rotate(-5deg); | |||
| -webkit-transform: rotate(-5deg); | |||
| transform: rotate(-5deg); | |||
| } | |||
| 40%, | |||
| 80% { | |||
| -o-transform: rotate(5deg); | |||
| -ms-transform: rotate(5deg); | |||
| -moz-transform: rotate(5deg); | |||
| -webkit-transform: rotate(5deg); | |||
| transform: rotate(5deg); | |||
| } | |||
| } | |||
| .box-btn li:nth-child(2) { | |||
| margin: 0 0.8rem; | |||
| width: 4.08rem; | |||
| height: 1.37333333rem; | |||
| background-image: url("../image/start.png"); | |||
| } | |||
| .box-btn li:nth-child(3) { | |||
| width: 2.2rem; | |||
| height: 1.66666667rem; | |||
| background-image: url("../image/coin2.png"); | |||
| } | |||
| /*奖品展示*/ | |||
| .awards { | |||
| position: static; | |||
| margin: 1.28rem auto; | |||
| width: 9.2rem; | |||
| height: 2.96rem; | |||
| background-image: url("../image/rect.png"); | |||
| } | |||
| .awards .swiper-container { | |||
| overflow: hidden; | |||
| margin: 0.21333333rem auto; | |||
| padding: 0.29333333rem 0; | |||
| width: 8.77333333rem; | |||
| height: 1.94666667rem; | |||
| background-color: #f5ae4f; | |||
| box-shadow: 0 0.26666667rem 0.26666667rem rgba(248, 131, 23, 0.7) inset; | |||
| border-radius: 0.21333333rem; | |||
| } | |||
| /*规则弹窗背景色*/ | |||
| #mask-rule .box-rule { | |||
| background-color: #fe5c51; | |||
| } | |||
| #mask-rule .box-rule .star { | |||
| background-image: url("../../common/image/rule/star2.png"); | |||
| } | |||
| @@ -0,0 +1,300 @@ | |||
| @charset "utf-8"; | |||
| @rem:75rem; | |||
| body{ | |||
| background-color: #feefab; | |||
| } | |||
| #wrap { | |||
| margin-top: -1/@rem; | |||
| height: 1335/@rem; | |||
| background-image: url("../image/bg.png"); | |||
| } | |||
| .rule, .my { | |||
| position: relative; | |||
| z-index: 3; | |||
| margin-top: 36/@rem; | |||
| width: 82/@rem; | |||
| height: 56/@rem; | |||
| background-color: #ff9d1b; | |||
| text-align: center; | |||
| line-height: 56/@rem; | |||
| font-size: 24/@rem; | |||
| color: #fff; | |||
| } | |||
| .rule { | |||
| border-top-right-radius: 10/@rem; | |||
| border-bottom-right-radius: 10/@rem; | |||
| } | |||
| .my { | |||
| background-color: #fe5362; | |||
| border-top-left-radius: 10/@rem; | |||
| border-bottom-left-radius: 10/@rem; | |||
| } | |||
| /*游戏区域*/ | |||
| .main{ | |||
| position: relative; | |||
| width: 100%; | |||
| height: 974/@rem; | |||
| } | |||
| .main .caidai{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 0; | |||
| z-index: 3; | |||
| margin-left: -322/@rem; | |||
| width: 644/@rem; | |||
| height: 873/@rem; | |||
| background-image: url("../image/caidai.png"); | |||
| } | |||
| .main .title{ | |||
| position: relative; | |||
| z-index: 2; | |||
| width: 100%; | |||
| height: 314/@rem; | |||
| background-image: url("../image/title.png"); | |||
| } | |||
| .main .box{ | |||
| position: relative; | |||
| margin-top: -120/@rem; | |||
| width: 100%; | |||
| height: 782/@rem; | |||
| background-image: url("../image/box.png"); | |||
| } | |||
| /*钩子*/ | |||
| .main .box #hook{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: -220/@rem; | |||
| z-index: 1; | |||
| margin-left: -65/@rem; | |||
| width: 130/@rem; | |||
| height: 430/@rem; | |||
| } | |||
| #hook .line{ | |||
| margin: auto; | |||
| width: 44/@rem; | |||
| height: 342/@rem; | |||
| background-image: url("../image/line.png"); | |||
| } | |||
| #hook .left,#hook .right{ | |||
| position: absolute; | |||
| bottom: 0; | |||
| width: 56/@rem; | |||
| height: 101/@rem; | |||
| } | |||
| #hook .left{ | |||
| left: 0; | |||
| background-image: url("../image/left.png"); | |||
| -o-transform-origin: right top; | |||
| -ms-transform-origin: right top; | |||
| -moz-transform-origin: right top; | |||
| -webkit-transform-origin: right top; | |||
| transform-origin: right top; | |||
| transform: rotate(-20deg); | |||
| } | |||
| #hook .right{ | |||
| right: 0; | |||
| background-image: url("../image/right.png"); | |||
| -o-transform-origin: left top; | |||
| -ms-transform-origin: left top; | |||
| -moz-transform-origin: left top; | |||
| -webkit-transform-origin: left top; | |||
| transform-origin: left top; | |||
| -o-transform: rotate(20deg); | |||
| -ms-transform: rotate(20deg); | |||
| -moz-transform: rotate(20deg); | |||
| -webkit-transform: rotate(20deg); | |||
| transform: rotate(20deg); | |||
| } | |||
| #hook .up{ | |||
| -o-animation: up .5s linear forwards; | |||
| -ms-animation: up .5s linear forwards; | |||
| -moz-animation: up .5s linear forwards; | |||
| -webkit-animation: up .5s linear forwards; | |||
| animation: up .5s linear forwards; | |||
| } | |||
| @keyframes up{ | |||
| 100%{ | |||
| -o-transform: rotate(0deg); | |||
| -ms-transform: rotate(0deg); | |||
| -moz-transform: rotate(0deg); | |||
| -webkit-transform: rotate(0deg); | |||
| transform: rotate(0deg); | |||
| } | |||
| } | |||
| /*传送带*/ | |||
| .behind,.front{ | |||
| overflow-x: hidden; | |||
| position: relative; | |||
| left: 50%; | |||
| top: 32%; | |||
| margin: -86/@rem 0 0 -310/@rem; | |||
| width: 620/@rem; | |||
| height: 150/@rem; | |||
| background-image: url("../image/behind.png"); | |||
| background-position: left bottom; | |||
| } | |||
| .front{ | |||
| top: 43%; | |||
| width: 620/@rem; | |||
| height: 215/@rem; | |||
| background-image: url("../image/front.png"); | |||
| } | |||
| .behind ul,.front ul{ | |||
| width: 14rem; | |||
| } | |||
| .front ul{ | |||
| position: absolute; | |||
| right: 0; | |||
| } | |||
| .behind li{ | |||
| position: relative; | |||
| float: left; | |||
| height: 105/@rem; | |||
| } | |||
| .front li{ | |||
| position: relative; | |||
| float: right; | |||
| height: 156/@rem; | |||
| } | |||
| .behind img{ | |||
| position: absolute; | |||
| width: 91/@rem; | |||
| height: 102/@rem; | |||
| } | |||
| .front img{ | |||
| position: absolute; | |||
| right: 0; | |||
| width: 139/@rem; | |||
| height: 156/@rem; | |||
| } | |||
| .box h3{ | |||
| margin: 355/@rem auto 18/@rem; | |||
| width: 286/@rem; | |||
| height: 52/@rem; | |||
| background-color: #ff9d1b; | |||
| text-align: center; | |||
| line-height: 52/@rem; | |||
| font-size: 20/@rem; | |||
| font-weight: normal; | |||
| color: #bc5700; | |||
| border-radius: 26/@rem; | |||
| } | |||
| /*按钮区域*/ | |||
| .box-btn{ | |||
| width: 100%; | |||
| height: 139/@rem; | |||
| } | |||
| .box-btn li{ | |||
| float: left; | |||
| } | |||
| .box-btn li:nth-child(1){ | |||
| width: 157/@rem; | |||
| height: 139/@rem; | |||
| background-image: url("../image/coin1.png"); | |||
| -o-transform-origin: center bottom; | |||
| -ms-transform-origin: center bottom; | |||
| -moz-transform-origin: center bottom; | |||
| -webkit-transform-origin: center bottom; | |||
| transform-origin: center bottom; | |||
| -o-animation: shak 3s ease-in-out infinite alternate; | |||
| -ms-animation: shak 3s ease-in-out infinite alternate; | |||
| -moz-animation: shak 3s ease-in-out infinite alternate; | |||
| -webkit-animation: shak 3s ease-in-out infinite alternate; | |||
| animation: shak 3s ease-in-out infinite alternate; | |||
| } | |||
| @keyframes shak{ | |||
| 0%,100%{ | |||
| -o-transform: rotate(0deg); | |||
| -ms-transform: rotate(0deg); | |||
| -moz-transform: rotate(0deg); | |||
| -webkit-transform: rotate(0deg); | |||
| transform: rotate(0deg); | |||
| } | |||
| 20%,60%{ | |||
| -o-transform: rotate(-5deg); | |||
| -ms-transform: rotate(-5deg); | |||
| -moz-transform: rotate(-5deg); | |||
| -webkit-transform: rotate(-5deg); | |||
| transform: rotate(-5deg); | |||
| } | |||
| 40%,80%{ | |||
| -o-transform: rotate(5deg); | |||
| -ms-transform: rotate(5deg); | |||
| -moz-transform: rotate(5deg); | |||
| -webkit-transform: rotate(5deg); | |||
| transform: rotate(5deg); | |||
| } | |||
| } | |||
| .box-btn li:nth-child(2){ | |||
| margin: 0 60/@rem; | |||
| width: 306/@rem; | |||
| height: 103/@rem; | |||
| background-image: url("../image/start.png"); | |||
| } | |||
| .box-btn li:nth-child(3){ | |||
| width: 165/@rem; | |||
| height: 125/@rem; | |||
| background-image: url("../image/coin2.png"); | |||
| } | |||
| /*奖品展示*/ | |||
| .awards { | |||
| position: static; | |||
| margin: 96/@rem auto; | |||
| width: 690/@rem; | |||
| height: 222/@rem; | |||
| background-image: url("../image/rect.png"); | |||
| } | |||
| .awards .swiper-container{ | |||
| overflow: hidden; | |||
| margin: 16/@rem auto; | |||
| padding: 22/@rem 0; | |||
| width: 658/@rem; | |||
| height: 146/@rem; | |||
| background-color: #f5ae4f; | |||
| box-shadow: 0 20/@rem 20/@rem rgba(248, 131, 23, .7) inset; | |||
| border-radius: 16/@rem; | |||
| } | |||
| /*规则弹窗背景色*/ | |||
| #mask-rule .box-rule{ | |||
| background-color: #fe5c51; | |||
| } | |||
| #mask-rule .box-rule .star{ | |||
| background-image: url("../../common/image/rule/star2.png"); | |||
| } | |||
| @@ -0,0 +1,146 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> | |||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |||
| <title>抓福袋</title> | |||
| <link rel="stylesheet" href="../common/css/swiper.min.css"> | |||
| <link rel="stylesheet" href="../common/css/common_mobile.css?version=1.0.0"> | |||
| <link rel="stylesheet" href="./css/index.css?version=1.0.0"> | |||
| <!-- | |||
| 清除缓存方法,对自定义的css文件 | |||
| --> | |||
| <script> | |||
| document.write("<l"+"ink rel='stylesheet' href='../common/css/common_mobile.css?version="+Math.random()+"'>"); | |||
| document.write("<l"+"ink rel='stylesheet' href='./css/index.css?version="+Math.random()+"'>"); | |||
| </script> | |||
| <!-- 移动端适配 --> | |||
| <script> | |||
| var html = document.querySelector('html'); | |||
| changeRem(); | |||
| window.addEventListener('resize', changeRem); | |||
| function changeRem() { | |||
| var width = html.getBoundingClientRect().width; | |||
| html.style.fontSize = width / 10 + 'px'; | |||
| } | |||
| </script> | |||
| <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> | |||
| </head> | |||
| <body> | |||
| <div id="wrap"> | |||
| <p class="rule fl">规则</p> | |||
| <a href="javascript:;" id="myWin" class="my fr">我的</a> | |||
| <a href="javascript:;" id="share" class="">分享</a> | |||
| <!-- 分享 --> | |||
| <div class="b1"> | |||
| </div> | |||
| <div class="t_w"> | |||
| </div> | |||
| <!-- <div class="t_w"> | |||
| <span class="span-text">请手动点击右上角</span> | |||
| <span class="span-blue">...</span> | |||
| <span class="span-text">选择</span> | |||
| <span class="span-blue">转发</span> | |||
| <span class="span-text">完成分享</span> | |||
| <img src="../../common/image/icon/close.png" class="s-close"> | |||
| </div> --> | |||
| <!--游戏区域--> | |||
| <div class="main"> | |||
| <div class="caidai"></div> | |||
| <div class="title"></div> | |||
| <div class="box"> | |||
| <!--钩子--> | |||
| <ul id="hook"> | |||
| <li class="line"></li> | |||
| <li class="left"></li> | |||
| <li class="right"></li> | |||
| </ul> | |||
| <!--传送带--> | |||
| <div class="behind"> | |||
| <ul class="clearfix"> | |||
| <li class="moveing-left"> | |||
| <img src="./image/small-bag.png"> | |||
| </li> | |||
| <li> | |||
| <img src="./image/small-bag.png"> | |||
| </li> | |||
| <li> | |||
| <img src="./image/small-bag.png"> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div class="front"> | |||
| <ul class="clearfix"> | |||
| <li class="moveing-right"> | |||
| <img src="./image/big-bag.png"> | |||
| </li> | |||
| <li> | |||
| <img src="./image/big-bag.png"> | |||
| </li> | |||
| <li> | |||
| <img src="./image/big-bag.png"> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <h3></h3> | |||
| <!--按钮区域--> | |||
| <ul class="box-btn clearfix"> | |||
| <li></li> | |||
| <li id="btn"></li> | |||
| <li></li> | |||
| </ul> | |||
| </div> | |||
| <!--奖品展示--> | |||
| <div class="awards"> | |||
| <div class="swiper-container"> | |||
| <ul class="swiper-wrapper"> | |||
| </ul> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div id="mask-card"></div> | |||
| <!--游戏规则弹窗--> | |||
| <div id="mask-rule"> | |||
| <div class="box-rule"> | |||
| <span class="star"></span> | |||
| <h2>活动规则说明</h2> | |||
| <span id="close-rule"></span> | |||
| <div class="con"> | |||
| <div class="text"> | |||
| <p>点击play会抓取一个福袋,若有中奖可以在小程序的“券包”里面进行查看使用,活动解释权归官方所有!</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--中奖提示--> | |||
| <div id="mask"> | |||
| <div class="blin"></div> | |||
| <div class="caidai"></div> | |||
| <div class="winning"> | |||
| <div class="red-head"></div> | |||
| <div class="red-body"> | |||
| <p></p> | |||
| </div> | |||
| <div id="card"> | |||
| <a href="" target="_self" class="win"></a> | |||
| </div> | |||
| <a href="javascript:;" target="_self" class="btn"></a> | |||
| <span id="close"></span> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--> | |||
| <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script> | |||
| <script src="../common/js/swiper.jquery.min.js"></script> | |||
| <!-- <script src="../common/js/h5_game_common.js?version=1.0.0"></script> | |||
| <script src="js/index.js?version=1.0.0"></script> --> | |||
| <script> | |||
| document.write("<s"+"cript type='text/javascript' src='../common/js/h5_game_common.js?version="+Math.random()+"'></scr"+"ipt>"); | |||
| document.write("<s"+"cript type='text/javascript' src='./js/index.js?version="+Math.random()+"'></scr"+"ipt>"); | |||
| </script> | |||
| </body> | |||
| </html> | |||
| @@ -0,0 +1,383 @@ | |||
| $(function () { | |||
| var WIDTH = Math.floor(document.documentElement.clientWidth * 0.45),//屏幕宽度*0.45来设置li的宽度 | |||
| $behindList = $(".behind ul li"),//福袋父级 | |||
| $frontList = $(".front ul li"), | |||
| $behindBag = $(".moveing-left"),//后方运动盒子 | |||
| $frontBag = $(".moveing-right"),//前方运动盒子 | |||
| $topBag = $(".behind img"),//后方每个福袋 | |||
| $bottomBag = $(".front img"),//前方每个福袋 | |||
| $btn = $("#btn"),//游戏按钮 | |||
| $hook = $("#hook"),//钩子 | |||
| data = {count: 0},//次数 | |||
| bool = true,//点击开关,ture为可点击 | |||
| rem = 75, | |||
| left, right, index,//福袋运动值,福袋下标 | |||
| times, timer, | |||
| dataList = [], | |||
| couponId=null, | |||
| errorMessge='', | |||
| playAble=true, | |||
| timer,//轮流提示定时器 | |||
| radomData=[]; | |||
| $(".behind li,.front li").css("width", WIDTH + "px");//设置li的宽度 | |||
| init(); | |||
| getCount() | |||
| let baseUrl='https://ciformall.youlane.cn/C'; | |||
| if(window.location.origin=='https://gametest.malls.iformall.com'){ | |||
| baseUrl='https://ctest.malls.iformall.com/C' | |||
| }else if(window.location.origin=='https://game.malls.iformall.com'){ | |||
| baseUrl='https://c.malls.iformall.com/C' | |||
| }else if(window.location.origin=='https://game.youlane.cn'){ | |||
| baseUrl='https://ciformall.youlane.cn/C' | |||
| } | |||
| $.ajax({ | |||
| url: baseUrl+"/api/game/getOneGame",//json文件位置 | |||
| type: "GET",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| headers: { | |||
| 'content-type':'application/json', | |||
| // "token":"6ded7930-5293-4e59-a207-73e1e78ce7cc", | |||
| "token":getQueryString('token') | |||
| }, | |||
| data:{ | |||
| id:getQueryString('id'), | |||
| // id:"214268965667471360" | |||
| }, | |||
| success: function(res) {//请求成功完成后要执行的方法 | |||
| // alert(JSON.stringify(res)) | |||
| // console.log(res) | |||
| var strHtml = ""; | |||
| dataList=res.data.couponIdsList; | |||
| id=res.data.id | |||
| let totalWeight=0; | |||
| dataList.forEach((item,index)=>{ | |||
| strHtml += '<li class="swiper-slide">'; | |||
| strHtml += '<img src="'+item.coverImg+'">'; | |||
| strHtml += '</li>'; | |||
| totalWeight+=Number(item.gameWeight) | |||
| for(var i=0;i<item.gameWeight;i++){ | |||
| radomData.push(item) | |||
| } | |||
| }) | |||
| let notWinweight=100-totalWeight; | |||
| let b={ | |||
| id:null | |||
| } | |||
| for(var i=0;i<notWinweight;i++){ | |||
| radomData.push(b) | |||
| } | |||
| $('.swiper-wrapper').html(strHtml); | |||
| //奖品展示 | |||
| var show = new Swiper(".swiper-container", { | |||
| direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动 | |||
| loop: false,//是否循环 | |||
| slidesPerView: "auto"//自动根据slides的宽度来设定数量 | |||
| }); | |||
| } | |||
| }) | |||
| function init() { | |||
| window.requestAnimationFrame = window.requestAnimationFrame || function (fn) { | |||
| return setTimeout(fn, 1000 / 60);//1000 / 60意思是一秒钟60帧 | |||
| }; | |||
| //cancelAnimationFrame是清除requestAnimationFrame | |||
| window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout; | |||
| (function move() { | |||
| //后方福袋的运动 | |||
| left = parseFloat($behindBag.css("margin-left"));//获取margin-left并去掉单位 | |||
| left = left - 1.5;//改变margin-left值 | |||
| $behindBag.css("margin-left", left + "px"); | |||
| left <= -WIDTH && $behindBag.css("margin-left", "0");//如果margin-left值到达屏幕宽度则归零 | |||
| //前方福袋的运动 | |||
| right = parseFloat($frontBag.css("margin-right"));//获取margin-right并去掉单位 | |||
| right = right - 1.5;//改变margin-right值 | |||
| $frontBag.css("margin-right", right + "px"); | |||
| right <= -WIDTH && $frontBag.css("margin-right", "0");//如果margin-right值到达屏幕宽度则归零 | |||
| timer = requestAnimationFrame(move); | |||
| })(); | |||
| } | |||
| /** | |||
| * 获取剩余中奖次数 | |||
| */ | |||
| function getCount(){ | |||
| $.ajax({ | |||
| url: baseUrl+"/api/game/getCount",//json文件位置 | |||
| type: "GET",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| headers: { | |||
| 'content-type':'application/json', | |||
| // "token":"b49fa2c4-a074-4147-afbe-6913c66705d6", | |||
| "token":getQueryString('token') | |||
| }, | |||
| data:{ | |||
| gameId:getQueryString('id'), | |||
| // id:"213206254531641344" | |||
| }, | |||
| success: function(res) {//请求成功完成后要执行的方法 | |||
| if(res.code==200){ | |||
| if(res.data.playAble){ | |||
| playAble=true; | |||
| data.count=res.data.playLimit-res.data.playCount; | |||
| $('#change').html(data.count); | |||
| if(res.data.playLimit==0){ | |||
| data.count=1000000; | |||
| $('#change').hide(); | |||
| } | |||
| }else{ | |||
| playAble=false; | |||
| if(res.data.AwardLimit==res.data.AwardCount){ | |||
| errorMessge='您的中奖次数已经达到上限!无法继续参加游戏!' | |||
| data.count=res.data.playLimit-res.data.playCount; | |||
| $('#change').html(data.count); | |||
| return; | |||
| }else if(res.data.playLimit==res.data.playCount){ | |||
| errorMessge='您的剩余次数为0!无法继续参加游戏!' | |||
| data.count=0; | |||
| $('#change').html(0); | |||
| return; | |||
| } | |||
| } | |||
| }else{ | |||
| errorMessge=res.message; | |||
| playAble=false; | |||
| $('#change').html(0); | |||
| } | |||
| } | |||
| }) | |||
| } | |||
| /** | |||
| * 记录游戏次数 | |||
| */ | |||
| function reduceCount(paramData){ | |||
| $.ajax({ | |||
| url: baseUrl+"/api/game/addActionLog",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async:true, | |||
| headers: { | |||
| 'content-type':'application/json;charset=UTF-8', | |||
| // "token":"025e5017-a268-4c21-98b3-d47b77b3ca54" | |||
| "token":getQueryString('token') | |||
| }, | |||
| data:JSON.stringify(paramData), | |||
| success: function(res) {//请求成功完成后要执行的方法 | |||
| // alert('成功了!') | |||
| getCount() | |||
| } | |||
| }) | |||
| } | |||
| //开始游戏 | |||
| $btn.click(function () { | |||
| if (!bool) return; | |||
| // if (data.count <= 0) { | |||
| // alert("没有次数了"); | |||
| // return; | |||
| // } | |||
| bool = false; | |||
| // data.count--; | |||
| // $("#change").html(data.count); | |||
| var random = Math.floor(Math.random() * 490 + 130);//130 - 620之间随机,因为这两个值是左右边界 | |||
| $(".left,.right").addClass("up");//张开钩子 | |||
| $hook.animate({left: random / rem + "rem"}, 1000);//左右值 | |||
| clearTimeout(times); | |||
| //上下值 | |||
| if (random > 380) {//上面 | |||
| $hook.animate({top: -100 / rem + "rem"}, 1000); | |||
| times = setTimeout(function () { | |||
| reback1(); | |||
| }, 2000); | |||
| } else {//下面 | |||
| $hook.animate({top: 50 / rem + "rem"}, 1000); | |||
| times = setTimeout(function () { | |||
| reback2(); | |||
| }, 2000); | |||
| } | |||
| }); | |||
| //判断钩子和福袋的距离 | |||
| function reback1() { | |||
| for (var i = 0; i < $behindList.length; i++) { | |||
| if ($hook.find("img").length) break;//如果钩子上已经有福袋跳出循环 | |||
| if ($hook.position().left - 130 <= $behindList.eq(i).position().left && $behindList.eq(i).position().left <= $hook.position().left - 50) { | |||
| //获取福袋 | |||
| !$hook.find("img").length && $hook.append($topBag.eq(i));//如果未抓取到福袋才抓取 | |||
| $topBag.eq(i).css({//重设福袋大小 | |||
| width: 91 / rem + "rem", | |||
| height: 102 / rem + "rem" | |||
| }); | |||
| saveData() | |||
| //钩子返回,弹出红包 | |||
| index = i; | |||
| $hook.animate({top: -220 / rem + "rem"}, 1000, function () { | |||
| win(); | |||
| $behindList.eq(index).append($topBag.eq(index));//把福袋放回原位 | |||
| index = undefined; | |||
| }); | |||
| } else { | |||
| setTimeout(function () { | |||
| return reback1(); | |||
| }); | |||
| } | |||
| } | |||
| } | |||
| function saveData(){ | |||
| let b = Math.floor(Math.random() * radomData.length) | |||
| console.log(radomData[b],radomData.length) | |||
| couponId=radomData[b].couponId | |||
| let params={ | |||
| couponId:couponId, | |||
| couponChannelId:radomData[b].id | |||
| } | |||
| if(playAble){ | |||
| if (data.count > 0) { | |||
| if(radomData[b].id!=null){ | |||
| let paramContData={ | |||
| gameId:getQueryString('id'), | |||
| orderId:'0' | |||
| } | |||
| //保存中奖信息 | |||
| $.ajax({ | |||
| url: baseUrl+"/api/order/save",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async:true, | |||
| headers: { | |||
| 'content-type':'application/json;charset=UTF-8', | |||
| // "token":"6ded7930-5293-4e59-a207-73e1e78ce7cc" | |||
| "token":getQueryString('token') | |||
| }, | |||
| data:JSON.stringify(params), | |||
| success: function(res) {//请求成功完成后要执行的方法 | |||
| console.log(res) | |||
| if(res.code==200){ | |||
| let postData={ | |||
| payOrderId: "0", | |||
| orderId: res.data.id, | |||
| status: 1, | |||
| reason: "" | |||
| } | |||
| var orderId=res.data.id; | |||
| //保存中奖信息 | |||
| $.ajax({ | |||
| url: baseUrl+"/api/pay/updatePayOrder",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async:true, | |||
| headers: { | |||
| 'content-type':'application/json;charset=UTF-8', | |||
| // "token":"6ded7930-5293-4e59-a207-73e1e78ce7cc" | |||
| "token":getQueryString('token') | |||
| }, | |||
| data:JSON.stringify(postData), | |||
| success: function(res) {//请求成功完成后要执行的方法 | |||
| // alert(JSON.stringify(res)) | |||
| // console.log(res) | |||
| if(res.code==200){ | |||
| var postData02={ | |||
| gameId:getQueryString('id'), | |||
| orderId:orderId | |||
| } | |||
| reduceCount(postData02); | |||
| $('#card .win').css({ | |||
| "background":'url('+radomData[b].coverImg+') no-repeat', | |||
| "background-size":"cover" | |||
| }); | |||
| $('.winning .red-body p').html(radomData[b].title+"(点击“我的”查看奖券)"); | |||
| $(".btn").html('再玩一把') | |||
| }else{ | |||
| reduceCount(paramContData); | |||
| $('#card .win').css({ | |||
| "background":'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size":"cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } | |||
| }) | |||
| }else{ | |||
| reduceCount(paramContData); | |||
| $('#card .win').css({ | |||
| "background":'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size":"cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } | |||
| }) | |||
| }else{ | |||
| reduceCount(paramContData); | |||
| $('#card .win').css({ | |||
| "background":'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size":"cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else { | |||
| alert(errorMessge); | |||
| } | |||
| }else{ | |||
| alert(errorMessge); | |||
| } | |||
| } | |||
| function reback2() { | |||
| for (var i = 0; i < $frontList.length; i++) { | |||
| if ($hook.find("img").length) break;//如果钩子上已经有福袋跳出循环 | |||
| var l = $frontList.eq(i).position().left - 200; | |||
| if ($hook.position().left - 130 <= l && l <= $hook.position().left) { | |||
| //获取福袋 | |||
| !$hook.find("img").length && $hook.append($bottomBag.eq(i));//如果未抓取到福袋才抓取 | |||
| $bottomBag.eq(i).css({//重设福袋大小 | |||
| width: 139 / rem + "rem", | |||
| height: 156 / rem + "rem" | |||
| }); | |||
| saveData() | |||
| //钩子返回,弹出红包 | |||
| index = i; | |||
| $hook.animate({top: -220 / rem + "rem"}, 1000, function () { | |||
| win(); | |||
| $frontList.eq(index).append($bottomBag.eq(index)); | |||
| index = undefined; | |||
| }); | |||
| } else { | |||
| setTimeout(function () { | |||
| return reback2(); | |||
| }); | |||
| } | |||
| } | |||
| } | |||
| //中奖信息提示 | |||
| $("#close,.win,.btn").click(function () { | |||
| bool = true; | |||
| $(".left,.right").removeClass("up"); | |||
| cancelAnimationFrame(timer); | |||
| init(); | |||
| }); | |||
| //点击跳回小程序奖券列表 | |||
| $('#myWin').click(function(){ | |||
| // alert(555) | |||
| wx.miniProgram.redirectTo({ | |||
| url:'/pages/couponorder/index/index' + "?token=" +getQueryString('token') + "&gameId=" + getQueryString('gameId') + "&id=" + getQueryString('id')+'&from=h5' | |||
| }) | |||
| }) | |||
| }); | |||
| @@ -0,0 +1 @@ | |||
| c1cb37869494dc371e7ea9ef8abecb16 | |||
| @@ -0,0 +1,190 @@ | |||
| @charset "utf-8"; | |||
| body { | |||
| background: #4c010e; | |||
| } | |||
| #share{ | |||
| position: absolute; | |||
| top: 1.2rem; | |||
| right: 0; | |||
| background-color: #34b202; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.64666667rem; | |||
| text-align: center; | |||
| line-height: 0.64666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| } | |||
| #wrap { | |||
| margin-top: -0.01333333rem; | |||
| background-image: url("../image/bg.png"); | |||
| background-size: cover; | |||
| } | |||
| .rule { | |||
| position: absolute; | |||
| left: 0.56rem; | |||
| top: 0; | |||
| width: 0.65333333rem; | |||
| height: 0.82666667rem; | |||
| background-image: url("../image/rule.png"); | |||
| text-align: center; | |||
| font-size: 0.24rem; | |||
| font-weight: bold; | |||
| color: #2078a9; | |||
| } | |||
| .my { | |||
| position: absolute; | |||
| right: 0; | |||
| top: 0.56rem; | |||
| width: 1.17333333rem; | |||
| min-width: 1.6rem; | |||
| background-color: #fdc434; | |||
| line-height: 0.64666667rem; | |||
| font-size: 0.24rem; | |||
| text-align: center; | |||
| color: #fff; | |||
| border-radius: 3px 0 0 3px; | |||
| } | |||
| /*砸蛋区域*/ | |||
| .box { | |||
| position: absolute; | |||
| left: 0; | |||
| top: 5rem; | |||
| width: 100%; | |||
| height: 10.93333333rem; | |||
| } | |||
| .tips { | |||
| width: 3.33333333rem; | |||
| margin: 0.4rem auto 0; | |||
| background-color: #ff6d69; | |||
| text-align: center; | |||
| font-size: 0.26666667rem; | |||
| line-height: 0.53333333rem; | |||
| color: #fff; | |||
| border-radius: 0.26666667rem; | |||
| } | |||
| #change { | |||
| margin: 0 0.06666667rem; | |||
| } | |||
| .egg { | |||
| width: 10rem; | |||
| } | |||
| .egg li { | |||
| position: relative; | |||
| float: left; | |||
| width: 1.68rem; | |||
| height: 2.61333333rem; | |||
| margin: 0.13333333rem 0.8rem; | |||
| } | |||
| .egg li img { | |||
| width: 1.68rem; | |||
| height: 0.54666667rem; | |||
| } | |||
| .egg li img.goldegg { | |||
| width: 1.46666667rem; | |||
| height: 2.01333333rem; | |||
| } | |||
| .egg .info { | |||
| display: none; | |||
| position: absolute; | |||
| left: -0.16rem; | |||
| top: 0.33333333rem; | |||
| width: 0.97333333rem; | |||
| height: 0.58666667rem; | |||
| background-image: url("../image/tips.png"); | |||
| } | |||
| .egg li img.goldegg { | |||
| position: relative; | |||
| left: 0.13333333rem; | |||
| top: 0.26666667rem; | |||
| width: 1.46666667rem; | |||
| height: 2.01333333rem; | |||
| -o-transform-origin: center bottom; | |||
| -ms-transform-origin: center bottom; | |||
| -moz-transform-origin: center bottom; | |||
| -webkit-transform-origin: center bottom; | |||
| transform-origin: center bottom; | |||
| -o-transition: .5s; | |||
| -ms-transition: .5s; | |||
| -moz-transition: .5s; | |||
| -webkit-transition: .5s; | |||
| transition: .5s; | |||
| } | |||
| .egg li img.jump { | |||
| -o-animation: jump .5s infinite alternate; | |||
| -ms-animation: jump .5s infinite alternate; | |||
| -moz-animation: jump .5s infinite alternate; | |||
| -webkit-animation: jump .5s infinite alternate; | |||
| animation: jump .5s infinite alternate; | |||
| } | |||
| @keyframes jump { | |||
| 100% { | |||
| top: 0.13333333rem; | |||
| } | |||
| } | |||
| #info { | |||
| position: absolute; | |||
| left: 0.53333333rem; | |||
| top: 1.53333333rem; | |||
| width: 1rem; | |||
| height: 0.53333333rem; | |||
| } | |||
| #hammer { | |||
| position: absolute; | |||
| left: 8.86666667rem; | |||
| top: 0.8rem; | |||
| width: 1.46666667rem; | |||
| height: 1.6rem; | |||
| background-image: url("../image/hammer.png"); | |||
| -o-transform-origin: right bottom; | |||
| -ms-transform-origin: right bottom; | |||
| -moz-transform-origin: right bottom; | |||
| -webkit-transform-origin: right bottom; | |||
| transform-origin: right bottom; | |||
| -o-transition: 1s ease-in-out; | |||
| -ms-transition: 1s ease-in-out; | |||
| -moz-transition: 1s ease-in-out; | |||
| -webkit-transition: 1s ease-in-out; | |||
| transition: 1s ease-in-out; | |||
| } | |||
| .shak { | |||
| -o-animation: hammer-move 0.5s linear infinite alternate; | |||
| -ms-animation: hammer-move 0.5s linear infinite alternate; | |||
| -moz-animation: hammer-move 0.5s linear infinite alternate; | |||
| -webkit-animation: hammer-move 0.5s linear infinite alternate; | |||
| animation: hammer-move 0.5s linear infinite alternate; | |||
| } | |||
| @keyframes hammer-move { | |||
| 100% { | |||
| -o-transform: rotate(-10deg); | |||
| -ms-transform: rotate(-10deg); | |||
| -moz-transform: rotate(-10deg); | |||
| -webkit-transform: rotate(-10deg); | |||
| transform: rotate(-10deg); | |||
| } | |||
| } | |||
| .hit { | |||
| -o-animation: hammer-hit 0.2s 3 alternate; | |||
| -ms-animation: hammer-hit 0.2s 3 alternate; | |||
| -moz-animation: hammer-hit 0.2s 3 alternate; | |||
| -webkit-animation: hammer-hit 0.2s 3 alternate; | |||
| animation: hammer-hit 0.2s 3 alternate; | |||
| } | |||
| @keyframes hammer-hit { | |||
| 100% { | |||
| -o-transform: rotate(-20deg); | |||
| -ms-transform: rotate(-20deg); | |||
| -moz-transform: rotate(-20deg); | |||
| -webkit-transform: rotate(-20deg); | |||
| transform: rotate(-20deg); | |||
| } | |||
| } | |||
| /*规则背景色*/ | |||
| #mask-rule .box-rule { | |||
| background-color: #f7b50b; | |||
| } | |||
| #mask-rule .box-rule .star { | |||
| background-image: url("../../common/image/rule/star1.png"); | |||
| } | |||
| @@ -0,0 +1,199 @@ | |||
| @charset "utf-8"; | |||
| @rem:75rem; | |||
| body{ | |||
| background: #5a1521; | |||
| } | |||
| #wrap{ | |||
| margin-top: -1/@rem; | |||
| background-image: url("../image/bg.png"); | |||
| } | |||
| .rule { | |||
| position: absolute; | |||
| left: 42/@rem; | |||
| top: 0; | |||
| width: 49/@rem; | |||
| height: 62/@rem; | |||
| background-image: url("../image/rule.png"); | |||
| text-align: center; | |||
| font-size: 18/@rem; | |||
| font-weight: bold; | |||
| color: #2078a9; | |||
| } | |||
| .my { | |||
| position: absolute; | |||
| right: 0; | |||
| top: 12/@rem; | |||
| width: 88/@rem; | |||
| min-width: 88/55rem; | |||
| background-color: #fdc434; | |||
| line-height: 36/@rem; | |||
| font-size: 18/@rem; | |||
| text-align: center; | |||
| color: #fff; | |||
| border-radius: 3px 0 0 3px; | |||
| } | |||
| /*砸蛋区域*/ | |||
| .box { | |||
| position: absolute; | |||
| left: 0; | |||
| bottom: 0; | |||
| width: 100%; | |||
| height: 820/@rem; | |||
| } | |||
| .tips { | |||
| width: 250/@rem; | |||
| margin: 30/@rem auto 0; | |||
| background-color: #ff6d69; | |||
| text-align: center; | |||
| font-size: 20/@rem; | |||
| line-height: 40/@rem; | |||
| color: #fff; | |||
| border-radius: 20/@rem; | |||
| } | |||
| #change { | |||
| margin: 0 5/@rem; | |||
| } | |||
| .egg { | |||
| width: 750/@rem; | |||
| } | |||
| .egg li { | |||
| position: relative; | |||
| float: left; | |||
| width: 126/@rem; | |||
| height: 196/@rem; | |||
| margin: 10/@rem 60/@rem; | |||
| } | |||
| .egg li img{ | |||
| width: 126/@rem; | |||
| height: 41/@rem; | |||
| } | |||
| .egg li img.goldegg{ | |||
| width: 110/@rem; | |||
| height: 151/@rem; | |||
| } | |||
| .egg .info { | |||
| display: none; | |||
| position: absolute; | |||
| left: -12/@rem; | |||
| top: 25/@rem; | |||
| width: 73/@rem; | |||
| height: 44/@rem; | |||
| background-image: url("../image/tips.png"); | |||
| } | |||
| .egg li img.goldegg { | |||
| position: relative; | |||
| left: 10/@rem; | |||
| top: 20/@rem; | |||
| width: 110/@rem; | |||
| height: 151/@rem; | |||
| -o-transform-origin: center bottom; | |||
| -ms-transform-origin: center bottom; | |||
| -moz-transform-origin: center bottom; | |||
| -webkit-transform-origin: center bottom; | |||
| transform-origin: center bottom; | |||
| -o-transition: .5s; | |||
| -ms-transition: .5s; | |||
| -moz-transition: .5s; | |||
| -webkit-transition: .5s; | |||
| transition: .5s; | |||
| } | |||
| .egg li img.jump { | |||
| -o-animation: jump .5s infinite alternate; | |||
| -ms-animation: jump .5s infinite alternate; | |||
| -moz-animation: jump .5s infinite alternate; | |||
| -webkit-animation: jump .5s infinite alternate; | |||
| animation: jump .5s infinite alternate; | |||
| } | |||
| @keyframes jump { | |||
| 100% { | |||
| top: 10/@rem; | |||
| } | |||
| } | |||
| #info { | |||
| position: absolute; | |||
| left: 40/@rem;; | |||
| top: 115/@rem;; | |||
| width: 75/@rem;; | |||
| height: 40/@rem;; | |||
| } | |||
| #hammer { | |||
| position: absolute; | |||
| left: 665/@rem; | |||
| top: 60/@rem; | |||
| width: 110/@rem; | |||
| height: 120/@rem; | |||
| background-image: url("../image/hammer.png"); | |||
| -o-transform-origin: right bottom; | |||
| -ms-transform-origin: right bottom; | |||
| -moz-transform-origin: right bottom; | |||
| -webkit-transform-origin: right bottom; | |||
| transform-origin: right bottom; | |||
| -o-transition: 1s ease-in-out; | |||
| -ms-transition: 1s ease-in-out; | |||
| -moz-transition: 1s ease-in-out; | |||
| -webkit-transition: 1s ease-in-out; | |||
| transition: 1s ease-in-out; | |||
| } | |||
| .shak{ | |||
| -o-animation: hammer-move .5s linear infinite alternate; | |||
| -ms-animation: hammer-move .5s linear infinite alternate; | |||
| -moz-animation: hammer-move .5s linear infinite alternate; | |||
| -webkit-animation: hammer-move .5s linear infinite alternate; | |||
| animation: hammer-move .5s linear infinite alternate; | |||
| } | |||
| @keyframes hammer-move { | |||
| 100% { | |||
| -o-transform: rotate(-10deg); | |||
| -ms-transform: rotate(-10deg); | |||
| -moz-transform: rotate(-10deg); | |||
| -webkit-transform: rotate(-10deg); | |||
| transform: rotate(-10deg); | |||
| } | |||
| } | |||
| .hit{ | |||
| -o-animation: hammer-hit .2s 3 alternate; | |||
| -ms-animation: hammer-hit .2s 3 alternate; | |||
| -moz-animation: hammer-hit .2s 3 alternate; | |||
| -webkit-animation: hammer-hit .2s 3 alternate; | |||
| animation: hammer-hit .2s 3 alternate; | |||
| } | |||
| @keyframes hammer-hit { | |||
| 100% { | |||
| -o-transform: rotate(-20deg); | |||
| -ms-transform: rotate(-20deg); | |||
| -moz-transform: rotate(-20deg); | |||
| -webkit-transform: rotate(-20deg); | |||
| transform: rotate(-20deg); | |||
| } | |||
| } | |||
| /*规则背景色*/ | |||
| #mask-rule .box-rule{ | |||
| background-color: #f7b50b; | |||
| } | |||
| #mask-rule .box-rule .star{ | |||
| background-image: url("../../common/image/rule/star1.png"); | |||
| } | |||
| @@ -0,0 +1,192 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8"> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |||
| <title>砸金蛋</title> | |||
| <link rel="stylesheet" href="../common/css/common_mobile.css?version=1.0.0"> | |||
| <link rel="stylesheet" href="./css/index.css?version=1.0.0"> | |||
| <!-- | |||
| 清除缓存方法,对自定义的css文件 | |||
| --> | |||
| <script> | |||
| document.write("<l"+"ink rel='stylesheet' href='../common/css/common_mobile.css?version="+Math.random()+"'>"); | |||
| document.write("<l"+"ink rel='stylesheet' href='./css/index.css?version="+Math.random()+"'>"); | |||
| </script> | |||
| <!-- 移动端适配--> | |||
| <script> | |||
| var html = document.querySelector('html'); | |||
| changeRem(); | |||
| window.addEventListener('resize', changeRem); | |||
| function changeRem() { | |||
| var width = html.getBoundingClientRect().width; | |||
| //console.log( width ); | |||
| html.style.fontSize = width / 10 + 'px'; | |||
| } | |||
| </script> | |||
| <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> | |||
| </head> | |||
| <body> | |||
| <div id="wrap"> | |||
| <div class="bg"></div> | |||
| <div class="rule"></div> | |||
| <a href="javascript:;" id="myWin"> | |||
| <div class="my">我的奖品</div> | |||
| </a> | |||
| <a href="javascript:;" id="share" class="">分享</a> | |||
| <a href="javascript:;" id="gotoindex" class="">返回</a> | |||
| <!-- 分享弹框 --> | |||
| <div class="b1"> | |||
| </div> | |||
| <div class="t_w"> | |||
| </div> | |||
| <!-- <div class="t_w"> | |||
| <span class="span-text">请手动点击右上角</span> | |||
| <span class="span-blue">...</span> | |||
| <span class="span-text">选择</span> | |||
| <span class="span-blue">转发</span> | |||
| <span class="span-text">完成分享</span> | |||
| <img src="../../common/image/icon/close.png" class="s-close"> | |||
| </div> --> | |||
| <!--砸蛋区域--> | |||
| <div class="box"> | |||
| <div id="explain" style="display: none;"> | |||
| <div style="font-size: 16px;color: #fff;text-align: center;margin-top: 20px;" id="integration"></div> | |||
| <div style="font-size: 16px;color: #fff;text-align: center;">查看我的积分余额请到积分商城查询</div> | |||
| </div> | |||
| <p class="tips" style="display:none;" id="change-box">今天剩余免费<span id="change">0</span>次</p> | |||
| <ul class="egg clearfix"> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| <li> | |||
| <img src="./image/egg.png" class="goldegg init"> | |||
| <img src="./image/base.png"> | |||
| <div class="info"></div> | |||
| </li> | |||
| </ul> | |||
| <div id="hammer" class="shak"></div> | |||
| </div> | |||
| <!--游戏规则弹窗--> | |||
| <div id="mask-rule"> | |||
| <div class="box-rule"> | |||
| <span class="star"></span> | |||
| <h2>活动规则说明</h2> | |||
| <span id="close-rule"></span> | |||
| <div class="con"> | |||
| <div class="text"> | |||
| <p>点击不同的金蛋会生成一份中奖结果,若有中奖可以在小程序的“券包”里面进行查看使用,活动解释权归官方所有!</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--中奖提示--> | |||
| <div id="mask"> | |||
| <div class="blin"></div> | |||
| <div class="caidai"></div> | |||
| <div class="winning"> | |||
| <div class="red-head"></div> | |||
| <div class="red-body"> | |||
| <p></p> | |||
| </div> | |||
| <div id="card"> | |||
| <a href="" target="_self" class="win"></a> | |||
| </div> | |||
| <a href="javascript:;" target="_self" class="btn replay"></a> | |||
| <span id="close" class="replay"></span> | |||
| </div> | |||
| </div> | |||
| <div id="warnning-box-bg" class="warnning-box-bg"></div> | |||
| <div id="warnning-box"> | |||
| <div id="w-title"></div> | |||
| <div id="w-cancel">取消</div> | |||
| <div id="w-button">确定</div> | |||
| </div> | |||
| </div> | |||
| <!--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--> | |||
| <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script> | |||
| <script src="../common/js/jquery.cookie.js"></script> | |||
| <script> | |||
| document.write("<s"+"cript type='text/javascript' src='../common/js/h5_game_common.js?version="+Math.random()+"'></scr"+"ipt>"); | |||
| document.write("<s"+"cript type='text/javascript' src='./js/index.js?version="+Math.random()+"'></scr"+"ipt>"); | |||
| </script> | |||
| <!--<script> | |||
| var data = ""; | |||
| //执行第一次 | |||
| clickData(true); | |||
| //请求回调,并且在ji中执行此代码,请加入防止连点措施 | |||
| function clickData(bool) { | |||
| $.ajaxSettings.async = false; | |||
| if (bool) {//若只请求次数 | |||
| $.getJSON(basePath + "api/browse/browseAeI?appKey=" + queryString("appKey") + "&pId=" + queryString("pId") + "&caId=" + queryString("caId") + "&index=0&isFirst=1", "", function (datac) { | |||
| if (null !== datac && "" !== datac) { | |||
| data = datac; | |||
| //设定中奖次数 | |||
| $("#change").html(data.count); | |||
| } | |||
| }); | |||
| } else { | |||
| $.getJSON(basePath + "api/browse/browseAeI?appKey=" + queryString("appKey") + "&pId=" + queryString("pId") + "&caId=" + queryString("caId") + "&index=0&isFirst=0", "", function (datac) { | |||
| if (null !== datac && "" !== datac) { | |||
| data = datac; | |||
| //设定中奖的图片 | |||
| $(".win").css("background-image", "url(" + data.adImgUrl + ")"); | |||
| //设定中奖次数 | |||
| $("#change").html(data.count); | |||
| //设定中奖的跳转链接 | |||
| $winning.find("a").attr("href", data.adUrl + "?appKey=" + queryString("appKey") + "&pId=" + queryString("pId") + "&caId=" + queryString("caId") + "&adId=" + data.adId + "&index=0"); | |||
| } | |||
| }); | |||
| } | |||
| } | |||
| </script>--> | |||
| </body> | |||
| </html> | |||
| @@ -0,0 +1,525 @@ | |||
| $(function () { | |||
| // console.log(location.host) | |||
| var $hammer = $("#hammer"), | |||
| explain = $("#explain"),//积分说明框 | |||
| playCreditLimit = '',//是否展示 积分说明框 | |||
| consumeTotal = '',//消耗积分 | |||
| falglimitType = '', | |||
| numFalg = false,//有次数=false | |||
| wcancel = $('#w-cancel'),//弹出消耗积分取消按钮 | |||
| $tips = $(".info"), | |||
| $eggList = $(".egg li"),//金蛋父级 | |||
| $egg = $(".goldegg"),//金蛋 | |||
| $change = $("#change"),//剩余次数 | |||
| length = $egg.length, | |||
| data = { count: 0 },//次数 | |||
| arr = [], | |||
| openArr,//记录被砸开的蛋的下标数组 | |||
| rem = 75, | |||
| dataList = [], | |||
| couponId = null, | |||
| timer,//轮流提示定时器 | |||
| errorMessge = '', | |||
| eggIndex = 0, | |||
| playAble = true, | |||
| radomData = []; | |||
| let baseUrl = 'https://ctest.malls.iformall.com/C'; | |||
| if (window.location.origin == 'https://gametest.malls.iformall.com') { | |||
| baseUrl = 'https://ctest.malls.iformall.com/C' | |||
| } else if (window.location.origin == 'https://game.malls.iformall.com') { | |||
| baseUrl = 'https://c.malls.iformall.com/C' | |||
| } else if (window.location.origin == 'https://game.youlane.cn') { | |||
| baseUrl = 'https://ciformall.youlane.cn/C' | |||
| } | |||
| /*轮流提示*/ | |||
| $(function () { | |||
| // if (!!$.cookie("eggIndex")) {//如果存在cookie,也就是有金蛋被砸开 | |||
| // openArr = $.cookie("eggIndex").split(",");//将cookie变为数组 | |||
| // for (var i = 0; i < openArr.length; i++) { | |||
| // arr.push(parseFloat(openArr[i]));//将上次cookie存入数组以免上次cookie被覆盖 | |||
| // $egg.eq(parseFloat(openArr[i])).prop("src", "../common/image/step3.png"); | |||
| // $egg.eq(parseFloat(openArr[i])).removeClass("init"); | |||
| // $egg.eq(parseFloat(openArr[i])).data("mark", false);//更改金蛋状态为已砸开 | |||
| // } | |||
| // } | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/getOneGame",//json文件位置 | |||
| type: "GET",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| headers: { | |||
| 'content-type': 'application/json', | |||
| // "token":"b49fa2c4-a074-4147-afbe-6913c66705d6", | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: { | |||
| id: getQueryString('id'), | |||
| }, | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| // alert(JSON.stringify(res)) | |||
| // console.log(res) | |||
| dataList = res.data.couponIdsList; | |||
| playCreditLimit = res.data.playCreditLimit | |||
| falglimitType = res.data.limitType | |||
| if (playCreditLimit >= '0') { | |||
| explain.show() | |||
| } | |||
| id = res.data.id | |||
| let totalWeight = 0; | |||
| dataList.forEach((item, index) => { | |||
| totalWeight += Number(item.gameWeight) | |||
| for (var i = 0; i < item.gameWeight; i++) { | |||
| radomData.push(item) | |||
| } | |||
| }) | |||
| let notWinweight = 100 - totalWeight; | |||
| // console.log(notWinweight) | |||
| let b = { | |||
| id: null | |||
| } | |||
| for (var i = 0; i < notWinweight; i++) { | |||
| radomData.push(b) | |||
| } | |||
| getCount() | |||
| } | |||
| }) | |||
| //初始跳动 | |||
| length = 9 | |||
| $egg.eq(length).addClass("jump"); | |||
| $tips.eq(length).show(); | |||
| setInterval(function () { | |||
| //金蛋跳动 | |||
| length++; | |||
| length %= 9; | |||
| $egg.eq(length - 1 < 0 && 8 || length - 1).removeClass("jump"); | |||
| $tips.eq(length - 1 < 0 && 8 || length - 1).hide(); | |||
| reback(); | |||
| $egg.eq(length).addClass("jump"); | |||
| $tips.eq(length).show(); | |||
| }, 1000); | |||
| }); | |||
| /** | |||
| * 获取剩余中奖次数 | |||
| */ | |||
| function getCount() { | |||
| console.log("我执行了"); | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/getCount",//json文件位置 | |||
| type: "GET",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| headers: { | |||
| 'content-type': 'application/json', | |||
| // "token":"b49fa2c4-a074-4147-afbe-6913c66705d6", | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: { | |||
| gameId: getQueryString('id'), | |||
| }, | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| if (res.code == 200) { | |||
| if (res.data.playAble) { | |||
| playAble = true; | |||
| data.count = res.data.playLimit - res.data.playCount; | |||
| $('#change').html(data.count); | |||
| consumeTotal = res.data.playCredit; | |||
| console.log(data.count); | |||
| if (data.count <= '0') { | |||
| $(integration).html(`${consumeTotal}积分/每次`); | |||
| } else { | |||
| $(integration).html(`当前游戏免费次数耗尽后${consumeTotal}积分/次`); | |||
| } | |||
| if (falglimitType == '0') { | |||
| if (data.count == -1) { | |||
| $('#change-box').hide(); | |||
| } else { | |||
| $('#change-box').html('您总共还有' + data.count + '免费刮奖机会') | |||
| } | |||
| } else if (falglimitType == '1') { | |||
| if (data.count == -1) { | |||
| $('#change-box').hide() | |||
| } else { | |||
| $('#change-box').html('您今天还有' + data.count + '免费刮奖机会') | |||
| } | |||
| } | |||
| if (res.data.playLimit < 0 && playCreditLimit >= '0') { | |||
| return// 不设置能免费次数且设置每次消耗积分 | |||
| } | |||
| if (res.data.playLimit < 0) { | |||
| data.count = 1000000; | |||
| $('#change-box').hide(); | |||
| } else { | |||
| $('#change-box').show(); | |||
| } | |||
| } else { | |||
| playAble = false; | |||
| if (res.data.playLimit <= 0) { | |||
| errorMessge = '您的中奖次数已经达到上限!无法继续参加游戏!' | |||
| data.count = 1000000; | |||
| $('#change-box').hide(); | |||
| return; | |||
| } else { | |||
| if (res.data.AwardLimit == res.data.AwardCount && res.data.AwardLimit != 0) { | |||
| errorMessge = '您的中奖次数已经达到上限!无法继续参加游戏!' | |||
| data.count = res.data.playLimit - res.data.playCount; | |||
| $('#change').html(data.count); | |||
| $('#change-box').html('您的中奖次数已经达到上限!无法继续参加游戏!') | |||
| $('#change-box').show(); | |||
| return; | |||
| } else if (res.data.playLimit == res.data.playCount) { | |||
| errorMessge = '您的剩余次数为0!无法继续参加游戏!' | |||
| data.count = 0; | |||
| $('#change').html(0); | |||
| $('#change-box').html('您的剩余次数为0!无法继续参加游戏!') | |||
| $('#change-box').show(); | |||
| return; | |||
| } | |||
| } | |||
| } | |||
| } else { | |||
| errorMessge = res.message; | |||
| playAble = false; | |||
| $('#change').html(0); | |||
| $('#change-box').hide(); | |||
| } | |||
| } | |||
| }) | |||
| } | |||
| /** | |||
| * 记录游戏次数 | |||
| */ | |||
| function reduceCount(paramData) { | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/addActionLog",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async: true, | |||
| headers: { | |||
| 'content-type': 'application/json;charset=UTF-8', | |||
| // "token":"025e5017-a268-4c21-98b3-d47b77b3ca54" | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: JSON.stringify(paramData), | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| // alert('成功了!') | |||
| getCount() | |||
| } | |||
| }) | |||
| } | |||
| //跳过砸开的金蛋 | |||
| function reback() { | |||
| if (!$egg.eq(length).hasClass("init")) {//若已砸开 | |||
| length++; | |||
| length %= 9; | |||
| reback(); | |||
| } | |||
| } | |||
| wcancel.click(function () { | |||
| $("#warnning-box").hide() | |||
| $("#warnning-box-bg").hide() | |||
| numFalg = false; | |||
| }) | |||
| $("#w-button").click(function () { | |||
| $("#warnning-box").hide() | |||
| $("#warnning-box-bg").hide() | |||
| numFalg = true; | |||
| }) | |||
| /*砸蛋事件*/ | |||
| for (var i = 0; i < length; i++) { | |||
| $eggList.eq(i).data("i", i); | |||
| // $egg.eq(i).data("mark", true); | |||
| $egg.eq(i).data("mark", true);//判断金蛋是否砸开,true表示可砸 | |||
| $eggList.eq(i).click(function () { | |||
| //设定剩余抽奖次数,判断用户是否还能点击 | |||
| // let paramContData = { | |||
| // gameId: getQueryString('id'), | |||
| // orderId: '0', | |||
| // time: (new Date()).valueOf() | |||
| // } | |||
| if (playAble) { | |||
| if (data.count > 0) { | |||
| // $egg.eq($(this).data("i")).data("mark") ? eggChange($(this).data("i")) : alert("这枚金蛋已经被您砸开了");//判断金蛋是否已砸开 | |||
| if ($egg.eq($(this).data("i")).data("mark")) { | |||
| eggChange($(this).data("i")) | |||
| //随机生成一个优惠券 | |||
| // let b = Math.floor(Math.random() * radomData.length) | |||
| // couponId = radomData[b].couponId | |||
| let params = { | |||
| // couponId: couponId, | |||
| // couponChannelId: radomData[b].id | |||
| gameId: getQueryString('id') | |||
| } | |||
| if (true) { | |||
| ///查询中奖结果 | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/freeGameGo",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async: true, | |||
| headers: { | |||
| 'content-type': 'application/json;charset=UTF-8', | |||
| // "token":"025e5017-a268-4c21-98b3-d47b77b3ca54" | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: JSON.stringify(params), | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| if (res.code == 200) { | |||
| if (res.data) { | |||
| var toemdata = res.data | |||
| if (res.data.prizeType == 1) { | |||
| $('#card .win').html('积分增加+' + toemdata.credit); | |||
| $('#card .win').css({ | |||
| 'font-size': ' 20px', | |||
| 'text-align': 'center', | |||
| 'color': '#FF6600', | |||
| 'line-height': '50px', | |||
| "background": 'url(../common/image/prize/prize2.png) no-repeat', | |||
| 'background-size': '6rem' | |||
| }) | |||
| $('.winning .red-body p').html('') | |||
| $(".btn").html('再玩一把') | |||
| } else { | |||
| $('#card .win').html('') | |||
| $('#card .win').css({ | |||
| "background": 'url(' + toemdata.coverImg + ') no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)"); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else { | |||
| $('#card .win').html('') | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| getCount() | |||
| } else if (res.code == 1013) { | |||
| // reduceCount(paramContData); | |||
| $('#card .win').html('') | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html(`${res.message}`); | |||
| $(".btn").html('再玩一把') | |||
| } else { | |||
| $('#card .win').html('') | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html(`未中奖!(点击“我的”查看奖券)`); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } | |||
| }) | |||
| } else { | |||
| reduceCount(paramContData); | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else { | |||
| // alert("这枚金蛋已经被您砸开了") | |||
| $('#warnning-box-bg').show(); | |||
| $('#warnning-box').show(); | |||
| $('#w-title').html("这枚金蛋已经被您砸开了"); | |||
| } | |||
| } else { | |||
| if (playCreditLimit >= '0') { | |||
| //可以使用积分玩 | |||
| if (!numFalg) {//消耗积分提示框只会弹出一次 | |||
| $('#warnning-box-bg').show(); | |||
| $('#warnning-box').show(); | |||
| if (data.count == -1) { | |||
| $('#w-title').html("将消耗" + consumeTotal + '积分'); | |||
| } else { | |||
| $('#w-title').html("免费次数已耗尽,将消耗" + consumeTotal + '积分'); | |||
| } | |||
| } else { | |||
| eggChange($(this).data("i")) | |||
| numFalg = true; | |||
| let b = Math.floor(Math.random() * radomData.length) | |||
| console.log(radomData[b]) | |||
| // couponId = radomData[b].couponId | |||
| let params = { | |||
| // couponId:couponId, | |||
| // couponChannelId:radomData[b].id | |||
| gameId: getQueryString('id') | |||
| } | |||
| //查询中奖结果 | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/freeCridetGameGo",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async: true, | |||
| headers: { | |||
| 'content-type': 'application/json;charset=UTF-8', | |||
| // "token":"025e5017-a268-4c21-98b3-d47b77b3ca54" | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: JSON.stringify(params), | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| if (res.code == 200) { | |||
| getCount() | |||
| // $canvasMask.hide(); | |||
| if (res.data) { | |||
| var toemdata = res.data | |||
| if (res.data.prizeType == 1) { | |||
| $('#card .win').html('积分增加+' + toemdata.credit); | |||
| $('.winning .red-body p').html('') | |||
| $('#card .win').css({ | |||
| 'font-size': ' 20px', | |||
| 'text-align': 'center', | |||
| 'color': '#FF6600', | |||
| 'line-height': '50px', | |||
| "background": 'url(../common/image/prize/prize2.png) no-repeat', | |||
| 'background-size': '6rem' | |||
| }) | |||
| } else { | |||
| $('#card .win').html('') | |||
| // $canvas.css("background-image", 'url(' + toemdata.coverImg + ')'); | |||
| $('#card .win').css({ | |||
| "background": 'url(' + toemdata.coverImg + ') no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)"); | |||
| } | |||
| $(".btn").html('再玩一把') | |||
| } else { | |||
| $('#card .win').html('') | |||
| // $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else if (res.code == 13101) { | |||
| // $canvasMask.hide(); | |||
| // $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/prize/prize2.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').css({ | |||
| "line-height": "1.5rem", | |||
| "font-size": "0.64rem" | |||
| }) | |||
| $('.winning .red-body p').html('积分不足!'); | |||
| $(".btn").hide() | |||
| } | |||
| } | |||
| }) | |||
| } | |||
| } else { | |||
| $('#warnning-box-bg').show(); | |||
| $('#warnning-box').show(); | |||
| $('#w-title').html("当前可用次数已耗尽"); | |||
| return | |||
| } | |||
| } | |||
| } else { | |||
| $('#warnning-box-bg').show(); | |||
| $('#warnning-box').show(); | |||
| $('#w-title').html(errorMessge); | |||
| } | |||
| }); | |||
| } | |||
| /*砸蛋事件的处理*/ | |||
| function eggChange(i) { | |||
| eggIndex = i; | |||
| //砸蛋次数的变化 | |||
| // data.count--; | |||
| // $change.html(data.count); | |||
| $hammer.removeClass("shak");//清除锤子晃动动画 | |||
| //锤子砸蛋的位置 | |||
| (i === 0 || i === 3 || i === 6) && ($hammer.css("left", 165 / rem + "rem")); | |||
| (i === 1 || i === 4 || i === 7) && ($hammer.css("left", 415 / rem + "rem")); | |||
| (i === 2 || i === 5 || i === 8) && ($hammer.css("left", 665 / rem + "rem")); | |||
| (i === 0 || i === 1 || i === 2) && ($hammer.css("top", 60 / rem + "rem")); | |||
| (i === 3 | i === 4 || i === 5) && ($hammer.css("top", 280 / rem + "rem")); | |||
| (i === 6 | i === 7 || i === 8) && ($hammer.css("top", 500 / rem + "rem")); | |||
| //锤子返回 | |||
| setTimeout(function () { | |||
| $hammer.css("left", 665 / rem + "rem"); | |||
| $hammer.css("top", 60 / rem + "rem"); | |||
| }, 1500); | |||
| //金蛋破裂及锤子动画 | |||
| setTimeout(function () { | |||
| $hammer.addClass("hit"); | |||
| $egg.eq(i).prop("src", "image/step1.png"); | |||
| setTimeout(function () { | |||
| $egg.eq(i).prop("src", "image/step2.png"); | |||
| }, 300); | |||
| setTimeout(function () { | |||
| $egg.eq(i).prop("src", "image/step3.png"); | |||
| $egg.eq(i).removeClass("init"); | |||
| //clickData(false);//ajax回调 | |||
| win(); | |||
| $hammer.removeClass("hit");//清除锤子砸蛋动画 | |||
| $hammer.addClass("shak"); | |||
| //记录被砸开的蛋 | |||
| arr.push(i);//存入每个砸开蛋的下标 | |||
| // $.cookie("eggIndex", arr, {expires: 1});//存入cookie | |||
| }, 600); | |||
| }, 600); | |||
| $egg.eq(i).data("mark", false);//更改金蛋状态为已砸开 | |||
| } | |||
| $('.replay').click(function () { | |||
| // alert(111) | |||
| $egg.eq(eggIndex).addClass("init"); | |||
| $egg.eq(eggIndex).prop("src", "image/egg.png"); | |||
| $egg.eq(eggIndex).data("mark", true); | |||
| }) | |||
| //点击跳回小程序奖券列表 | |||
| $('#myWin').click(function () { | |||
| // alert(555) | |||
| wx.miniProgram.redirectTo({ | |||
| url: '/pages/couponorder/index/index' + "?token=" + getQueryString('token') + "&gameId=" + getQueryString('gameId') + "&id=" + getQueryString('id') + '&from=h5' | |||
| }) | |||
| }) | |||
| //返回首页 | |||
| $("#gotoindex").click(function () { | |||
| wx.miniProgram.redirectTo({ | |||
| url: '/pages/index/index' | |||
| }) | |||
| }); | |||
| }); | |||
| @@ -0,0 +1,197 @@ | |||
| @charset "utf-8"; | |||
| body { | |||
| background: #99081c; | |||
| } | |||
| #wrap { | |||
| margin-top: -0.01333333rem; | |||
| background-image: url("../image/bg.png"); | |||
| } | |||
| /*三个不同的动画效果*/ | |||
| .caidai1, | |||
| .caidai2, | |||
| .caidai3 { | |||
| opacity: 1; | |||
| position: absolute; | |||
| left: 0.53333333rem; | |||
| top: 3.2rem; | |||
| width: 1.02666667rem; | |||
| height: 0.98666667rem; | |||
| background-image: url("../image/hongbao1.png"); | |||
| -o-animation: caidai1 1s ease-in-out infinite; | |||
| -ms-animation: caidai1 1s ease-in-out infinite; | |||
| -moz-animation: caidai1 1s ease-in-out infinite; | |||
| -webkit-animation: caidai1 1s ease-in-out infinite; | |||
| animation: caidai1 1s ease-in-out infinite; | |||
| } | |||
| @keyframes caidai1 { | |||
| 100% { | |||
| opacity: 0; | |||
| left: 1.86666667rem; | |||
| top: 4.53333333rem; | |||
| } | |||
| } | |||
| .caidai2 { | |||
| left: 8rem; | |||
| top: 1.86666667rem; | |||
| width: 1.26666667rem; | |||
| height: 1.06666667rem; | |||
| background-image: url("../image/hongbao2.png"); | |||
| -o-animation: caidai2 1s ease-in-out infinite; | |||
| -ms-animation: caidai2 1s ease-in-out infinite; | |||
| -moz-animation: caidai2 1s ease-in-out infinite; | |||
| -webkit-animation: caidai2 1s ease-in-out infinite; | |||
| animation: caidai2 1s ease-in-out infinite; | |||
| } | |||
| @keyframes caidai2 { | |||
| 100% { | |||
| opacity: 0; | |||
| left: 6.66666667rem; | |||
| top: 3.2rem; | |||
| } | |||
| } | |||
| .caidai3 { | |||
| left: 0; | |||
| top: 11.46666667rem; | |||
| width: 1.30666667rem; | |||
| height: 1.17333333rem; | |||
| background-image: url("../image/gold.png"); | |||
| -o-animation: caidai3 0.5s ease-in-out infinite alternate; | |||
| -ms-animation: caidai3 0.5s ease-in-out infinite alternate; | |||
| -moz-animation: caidai3 0.5s ease-in-out infinite alternate; | |||
| -webkit-animation: caidai3 0.5s ease-in-out infinite alternate; | |||
| animation: caidai3 0.5s ease-in-out infinite alternate; | |||
| } | |||
| @keyframes caidai3 { | |||
| 100% { | |||
| top: 12rem; | |||
| } | |||
| } | |||
| /*主体*/ | |||
| .box { | |||
| position: absolute; | |||
| left: 0; | |||
| bottom: 0; | |||
| width: 100%; | |||
| height: 10.53333333rem; | |||
| } | |||
| .rule, | |||
| .my { | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.74666667rem; | |||
| background-color: #ff9d1b; | |||
| text-align: center; | |||
| line-height: 0.74666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| } | |||
| .rule { | |||
| border-top-right-radius: 0.13333333rem; | |||
| border-bottom-right-radius: 0.13333333rem; | |||
| } | |||
| .my { | |||
| position: absolute; | |||
| right: 0; | |||
| top: 0.56rem; | |||
| width: 1.17333333rem; | |||
| min-width: 1.6rem; | |||
| background-color: #fdc434; | |||
| line-height: 0.64666667rem; | |||
| font-size: 0.24rem; | |||
| text-align: center; | |||
| color: #fff; | |||
| border-radius: 3px 0 0 3px; | |||
| } | |||
| #myWin{ | |||
| position: absolute; | |||
| top: 0; | |||
| right: 0; | |||
| background-color: #fe5362; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.74666667rem; | |||
| text-align: center; | |||
| line-height: 0.74666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| } | |||
| #share{ | |||
| position: absolute; | |||
| top: 1.2rem; | |||
| right: 0; | |||
| background-color: #34b202; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.64666667rem; | |||
| text-align: center; | |||
| line-height: 0.64666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| z-index: 10; | |||
| } | |||
| /*刮刮乐图层*/ | |||
| .panel { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 1.8rem; | |||
| z-index: 1; | |||
| margin-left: -4rem; | |||
| width: 8rem; | |||
| height: 4.66666667rem; | |||
| background-image: url("../image/panel.png"); | |||
| } | |||
| #canvas { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| margin: -2.05333333rem 0 0 -3.74666667rem; | |||
| } | |||
| #canvas-mask { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| z-index: 1; | |||
| width: 7.49333333rem; | |||
| height: 4.10666667rem; | |||
| margin: -2.05333333rem 0 0 -3.74666667rem; | |||
| } | |||
| #canvas-mask #btn { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| margin: -0.33333333rem 0 0 -1.28rem; | |||
| width: 2.56rem; | |||
| height: 0.66666667rem; | |||
| background-image: url("../image/start.png"); | |||
| } | |||
| #canvas-mask p { | |||
| margin-top: 3.04rem; | |||
| height: 0.29333333rem; | |||
| text-align: center; | |||
| line-height: 0.29333333rem; | |||
| font-size: 0.29333333rem; | |||
| color: #fff; | |||
| } | |||
| /*奖品展示*/ | |||
| .awards { | |||
| bottom: 0.32rem; | |||
| margin-left: -4.66666667rem; | |||
| width: 9.33333333rem; | |||
| height: 2.33333333rem; | |||
| background-color: #ee3c3a; | |||
| border-radius: 0.26666667rem; | |||
| } | |||
| .awards .swiper-slide { | |||
| margin: 0.26666667rem 0.4rem 0; | |||
| } | |||
| /*规则背景色*/ | |||
| #mask-rule .box-rule { | |||
| background-color: #fe5c51; | |||
| } | |||
| #mask-rule .box-rule .star { | |||
| background-image: url("../../common/image/rule/star2.png"); | |||
| } | |||
| @@ -0,0 +1,179 @@ | |||
| @charset "utf-8"; | |||
| @rem:75rem; | |||
| body{ | |||
| background: #ff605d; | |||
| } | |||
| #wrap{ | |||
| margin-top: -1/@rem; | |||
| background-image: url("../image/bg.png"); | |||
| } | |||
| /*三个不同的动画效果*/ | |||
| .caidai1, .caidai2, .caidai3 { | |||
| opacity: 1; | |||
| position: absolute; | |||
| left: 40/@rem; | |||
| top: 240/@rem; | |||
| width: 77/@rem; | |||
| height: 74/@rem; | |||
| background-image: url("../image/hongbao1.png"); | |||
| -o-animation: caidai1 1s ease-in-out infinite; | |||
| -ms-animation: caidai1 1s ease-in-out infinite; | |||
| -moz-animation: caidai1 1s ease-in-out infinite; | |||
| -webkit-animation: caidai1 1s ease-in-out infinite; | |||
| animation: caidai1 1s ease-in-out infinite; | |||
| } | |||
| @keyframes caidai1 { | |||
| 100% { | |||
| opacity: 0; | |||
| left: 140/@rem; | |||
| top: 340/@rem; | |||
| } | |||
| } | |||
| .caidai2 { | |||
| left: 600/@rem; | |||
| top: 140/@rem; | |||
| width: 95/@rem; | |||
| height: 80/@rem; | |||
| background-image: url("../image/hongbao2.png"); | |||
| -o-animation: caidai2 1s ease-in-out infinite; | |||
| -ms-animation: caidai2 1s ease-in-out infinite; | |||
| -moz-animation: caidai2 1s ease-in-out infinite; | |||
| -webkit-animation: caidai2 1s ease-in-out infinite; | |||
| animation: caidai2 1s ease-in-out infinite; | |||
| } | |||
| @keyframes caidai2 { | |||
| 100% { | |||
| opacity: 0; | |||
| left: 500/@rem; | |||
| top: 240/@rem; | |||
| } | |||
| } | |||
| .caidai3 { | |||
| left: 0; | |||
| top: 860/@rem; | |||
| width: 98/@rem; | |||
| height: 88/@rem; | |||
| background-image: url("../image/gold.png"); | |||
| -o-animation: caidai3 .5s ease-in-out infinite alternate; | |||
| -ms-animation: caidai3 .5s ease-in-out infinite alternate; | |||
| -moz-animation: caidai3 .5s ease-in-out infinite alternate; | |||
| -webkit-animation: caidai3 .5s ease-in-out infinite alternate; | |||
| animation: caidai3 .5s ease-in-out infinite alternate; | |||
| } | |||
| @keyframes caidai3 { | |||
| 100% { | |||
| top: 900/@rem; | |||
| } | |||
| } | |||
| /*主体*/ | |||
| .box { | |||
| position: absolute; | |||
| left: 0; | |||
| bottom: 0; | |||
| width: 100%; | |||
| height: 790/@rem; | |||
| } | |||
| .rule, .my { | |||
| position: absolute; | |||
| width: 165/@rem; | |||
| height: 50/@rem; | |||
| background-color: #e04b34; | |||
| text-align: center; | |||
| line-height: 50/@rem; | |||
| font-size: 22/@rem; | |||
| font-weight: bold; | |||
| color: #fff3f0; | |||
| border-radius: 20/@rem; | |||
| } | |||
| .rule { | |||
| left: 125/@rem; | |||
| } | |||
| .my { | |||
| right: 125/@rem; | |||
| } | |||
| /*刮刮乐图层*/ | |||
| .panel{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 135/@rem; | |||
| z-index: 1; | |||
| margin-left: -300/@rem; | |||
| width: 600/@rem; | |||
| height: 350/@rem; | |||
| background-image: url("../image/panel.png"); | |||
| } | |||
| #canvas{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| margin: -154/@rem 0 0 -281/@rem; | |||
| } | |||
| #canvas-mask{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| z-index: 1; | |||
| width: 562/@rem; | |||
| height: 308/@rem; | |||
| margin: -154/@rem 0 0 -281/@rem; | |||
| } | |||
| #canvas-mask #btn{ | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 50%; | |||
| margin: -25/@rem 0 0 -96/@rem; | |||
| width: 192/@rem; | |||
| height: 50/@rem; | |||
| background-image: url("../image/start.png"); | |||
| } | |||
| #canvas-mask p{ | |||
| margin-top: 228/@rem; | |||
| height: 22/@rem; | |||
| text-align: center; | |||
| line-height: 22/@rem; | |||
| font-size: 22/@rem; | |||
| color: #fff; | |||
| } | |||
| /*奖品展示*/ | |||
| .awards{ | |||
| bottom: 24/@rem; | |||
| margin-left: -350/@rem; | |||
| width: 700/@rem; | |||
| height: 175/@rem; | |||
| background-color: #ee3c3a; | |||
| border-radius: 20/@rem; | |||
| } | |||
| .awards .swiper-slide{ | |||
| margin: 20/@rem 30/@rem 0; | |||
| } | |||
| /*规则背景色*/ | |||
| #mask-rule .box-rule{ | |||
| background-color: #fe5c51; | |||
| } | |||
| #mask-rule .box-rule .star{ | |||
| background-image: url("../../common/image/rule/star2.png"); | |||
| } | |||
| @@ -0,0 +1,134 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8"> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |||
| <title>刮刮乐</title> | |||
| <link rel="stylesheet" href="../common/css/swiper.min.css"> | |||
| <!-- <link rel="stylesheet" href="../common/css/common_mobile.css?version=1.0.0"> | |||
| <link rel="stylesheet" href="css/index.css?version=1.0.0"> --> | |||
| <!-- 移动端适配 --> | |||
| <script> | |||
| var html = document.querySelector('html'); | |||
| changeRem(); | |||
| window.addEventListener('resize', changeRem); | |||
| function changeRem() { | |||
| var width = html.getBoundingClientRect().width; | |||
| html.style.fontSize = width / 10 + 'px'; | |||
| } | |||
| </script> | |||
| <script> | |||
| document.write("<l" + "ink rel='stylesheet' href='../common/css/common_mobile.css?version=" + Math.random() + "'>"); | |||
| document.write("<l" + "ink rel='stylesheet' href='./css/index.css?version=" + Math.random() + "'>"); | |||
| </script> | |||
| <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> | |||
| </head> | |||
| <body> | |||
| <div id="wrap"> | |||
| <div class="caidai1"></div> | |||
| <div class="caidai2"></div> | |||
| <div class="caidai3"></div> | |||
| <p class="rule fl">规则</p> | |||
| <a href="javascript:;" id="myWin">我的</a> | |||
| <a href="javascript:;" id="share" class="">分享</a> | |||
| <a href="javascript:;" id="gotoindex" class="">返回</a> | |||
| <div class="b1"> | |||
| </div> | |||
| <!-- <div class="t_w"> | |||
| <span class="span-text">请手动点击右上角</span> | |||
| <span class="span-blue">...</span> | |||
| <span class="span-text">选择</span> | |||
| <span class="span-blue">转发</span> | |||
| <span class="span-text">完成分享</span> | |||
| <img src="../../common/image/icon/close.png" class="s-close"> | |||
| </div> --> | |||
| <div class="t_w"> | |||
| </div> | |||
| <!--游玩区域--> | |||
| <div class="box"> | |||
| <div id="explain" style="display: none;"> | |||
| <div style="font-size: 16px;color: #fff;text-align: center;margin-top: 20px;" id="integration"></div> | |||
| <div style="font-size: 16px;color: #fff;text-align: center;">查看我的积分余额请到积分商城查询</div> | |||
| </div> | |||
| <div class="panel"> | |||
| <canvas id="canvas" width="562" height="308"></canvas> | |||
| <div id="canvas-mask"> | |||
| <a id="btn" href="javascript:;"></a> | |||
| <p id="change-box" style="display:none;"></p> | |||
| </div> | |||
| </div> | |||
| <!--奖品展示。--> | |||
| <div class="awards"> | |||
| <div class="swiper-container"> | |||
| <ul class="swiper-wrapper"> | |||
| <!-- <li class="swiper-slide"> | |||
| <img src="../common/image/icon/drag/drag1.png"> | |||
| </li> | |||
| <li class="swiper-slide"> | |||
| <img src="../common/image/icon/drag/drag2.png"> | |||
| </li> | |||
| <li class="swiper-slide"> | |||
| <img src="../common/image/icon/drag/drag3.png"> | |||
| </li> | |||
| <li class="swiper-slide"> | |||
| <img src="../common/image/icon/drag/drag4.png"> | |||
| </li> | |||
| <li class="swiper-slide"> | |||
| <img src="../common/image/icon/drag/drag5.png"> | |||
| </li> --> | |||
| </ul> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--游戏规则弹窗--> | |||
| <div id="mask-rule"> | |||
| <div class="box-rule"> | |||
| <span class="star"></span> | |||
| <h2>活动规则说明</h2> | |||
| <span id="close-rule"></span> | |||
| <div class="con"> | |||
| <div class="text"> | |||
| <p>刮取图片完成抽奖,若有中奖可以在小程序的“券包”里面进行查看使用,活动解释权归官方所有!</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--中奖提示--> | |||
| <div id="mask"> | |||
| <div class="blin"></div> | |||
| <div class="caidai"></div> | |||
| <div class="winning"> | |||
| <div class="red-head"></div> | |||
| <div class="red-body"> | |||
| <p></p> | |||
| </div> | |||
| <div id="card"> | |||
| <a href="" target="_self" class="win"></a> | |||
| </div> | |||
| <a target="_self" class="btn"></a> | |||
| <span id="close"></span> | |||
| </div> | |||
| </div> | |||
| <div id="warnning-box-bg" class="warnning-box-bg"></div> | |||
| <div id="warnning-box"> | |||
| <div id="w-title"></div> | |||
| <div id="w-cancel">取消</div> | |||
| <div id="w-button">确定</div> | |||
| </div> | |||
| </div> | |||
| <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>--> | |||
| <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script> | |||
| <script src="../common/js/swiper.jquery.min.js"></script> | |||
| <script> | |||
| document.write("<s" + "cript type='text/javascript' src='../common/js/h5_game_common.js?version=" + Math.random() + "'></scr" + "ipt>"); | |||
| document.write("<s" + "cript type='text/javascript' src='./js/index.js?version=" + Math.random() + "'></scr" + "ipt>"); | |||
| </script> | |||
| </body> | |||
| </html> | |||
| @@ -0,0 +1,606 @@ | |||
| $(function () { | |||
| var $canvas = $("#canvas"),//canvas | |||
| clientWidth = document.documentElement.clientWidth, | |||
| canvasWidth = Math.floor(clientWidth * 562 / 750),//canvas宽 = 屏幕宽 * 设计稿里canvas宽 / 750 | |||
| canvasHeight = Math.floor(clientWidth * 308 / 750),//canvas高 = 屏幕宽 * 设计稿里canvas高 / 750 | |||
| ctx = $canvas[0].getContext("2d"),//获取canvas的2d绘制对象 | |||
| $canvasMask = $("#canvas-mask"),//canvas遮罩层 | |||
| wcancel = $('#w-cancel'),//弹出消耗积分取消按钮 | |||
| $btn = $("#btn"),//刮奖按钮 | |||
| explain = $("#explain"),//积分说明框 | |||
| $change = $("#change"),//剩余次数 | |||
| data = { count: 0 },//次数 | |||
| playCreditLimit = '',//是否展示 积分说明框 | |||
| consumeTotal = '',//消耗积分 | |||
| empty = false, | |||
| dataList = [], | |||
| couponId = null, | |||
| falglimitType = '', | |||
| timer,//轮流提示定时器 | |||
| errorMessge = '', | |||
| playAble = true, | |||
| radomData = [], | |||
| numFalg = false,//有次数=false | |||
| bool = false;//判断是否按下去,true为按下,false未按下 | |||
| let baseUrl = 'https://ctest.malls.iformall.com/C'; | |||
| if (window.location.origin == 'https://gametest.malls.iformall.com') { | |||
| baseUrl = 'https://ctest.malls.iformall.com/C' | |||
| } else if (window.location.origin == 'https://game.malls.iformall.com') { | |||
| baseUrl = 'https://c.malls.iformall.com/C' | |||
| } else if (window.location.origin == 'https://game.youlane.cn') { | |||
| baseUrl = 'https://ciformall.youlane.cn/C' | |||
| } | |||
| //canvas初始化 | |||
| init(); | |||
| function init() { | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/getOneGame",//json文件位置 | |||
| type: "GET",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| headers: { | |||
| 'content-type': 'application/json', | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: { | |||
| id: getQueryString('id'), | |||
| // id:"215366414771421184" | |||
| }, | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| // alert(JSON.stringify(res)) | |||
| var strHtml = ""; | |||
| dataList = res.data.couponIdsList; | |||
| playCreditLimit = res.data.playCreditLimit | |||
| falglimitType = res.data.limitType | |||
| if (playCreditLimit >= '0') { | |||
| explain.show() | |||
| } | |||
| id = res.data.id | |||
| let totalWeight = 0; | |||
| dataList.forEach((item, index) => { | |||
| strHtml += '<li class="swiper-slide">'; | |||
| strHtml += '<img src="' + item.coverImg + '">'; | |||
| strHtml += '</li>'; | |||
| totalWeight += Number(item.gameWeight) | |||
| for (var i = 0; i < item.gameWeight; i++) { | |||
| radomData.push(item) | |||
| } | |||
| }) | |||
| let notWinweight = 100 - totalWeight; | |||
| let b = { | |||
| id: null | |||
| } | |||
| for (var i = 0; i < notWinweight; i++) { | |||
| radomData.push(b) | |||
| } | |||
| $('.swiper-wrapper').html(strHtml); | |||
| //奖品展示 | |||
| var show = new Swiper(".swiper-container", { | |||
| direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动 | |||
| loop: false,//是否循环 | |||
| slidesPerView: 'auto' //自动根据slides的宽度来设定数量 | |||
| }); | |||
| getCount(); | |||
| } | |||
| }) | |||
| $canvasMask.show(); | |||
| // $change.html(data.count);//显示剩余次数 | |||
| //设置canvas宽高 | |||
| $canvas.attr('width', canvasWidth); | |||
| $canvas.attr('height', canvasHeight); | |||
| //canvas绘图 | |||
| ctx.beginPath(); | |||
| ctx.fillStyle = '#999';//刮刮乐图层的填充色 | |||
| ctx.lineCap = "round";//绘制的线结束时为圆形 | |||
| ctx.lineJoin = "round";//当两条线交汇时创建圆形边角 | |||
| ctx.lineWidth = 20;//单次刮开面积 | |||
| ctx.fillRect(0, 0, canvasWidth, canvasHeight); | |||
| ctx.closePath(); | |||
| ctx.globalCompositeOperation = 'destination-out';//新图像和原图像重合部分变透明 | |||
| //下面3行代码是为了修复部分手机浏览器不支持destination-out | |||
| $canvas.css("display", "none"); | |||
| $canvas.outerHeight(); | |||
| $canvas.css("display", "inherit"); | |||
| } | |||
| /** | |||
| * 获取剩余中奖次数 | |||
| */ | |||
| function getCount() { | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/getCount",//json文件位置 | |||
| type: "GET",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| headers: { | |||
| 'content-type': 'application/json', | |||
| // "token":"b49fa2c4-a074-4147-afbe-6913c66705d6", | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: { | |||
| gameId: getQueryString('id'), | |||
| // id:"213206254531641344" | |||
| }, | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| if (res.code == 200) { | |||
| if (res.data.playAble) { | |||
| playAble = true; | |||
| data.count = res.data.playLimit - res.data.playCount; | |||
| $('#change').html(data.count); | |||
| consumeTotal = res.data.playCredit; | |||
| if (data.count <= '0') { | |||
| $(integration).html(`${consumeTotal}积分/每次`); | |||
| } else { | |||
| $(integration).html(`当前游戏免费次数耗尽后${consumeTotal}积分/次`); | |||
| } | |||
| if (falglimitType == '0') { | |||
| if (data.count == -1) { | |||
| $('#change-box').hide(); | |||
| } else { | |||
| $('#change-box').html('您总共还有' + data.count + '免费刮奖机会') | |||
| } | |||
| } else if (falglimitType == '1') { | |||
| if (data.count == -1) { | |||
| $('#change-box').hide() | |||
| } else { | |||
| $('#change-box').html('您今天还有' + data.count + '免费刮奖机会') | |||
| } | |||
| } | |||
| if (res.data.playLimit < '0' && playCreditLimit >= "0") { | |||
| return// 不设置能免费次数且设置每次消耗积分 | |||
| } | |||
| if (res.data.playLimit < '0') { | |||
| data.count = 1000000; | |||
| $('#change-box').hide(); | |||
| } else { | |||
| $('#change-box').show(); | |||
| } | |||
| } else { | |||
| playAble = false; | |||
| if (res.data.playLimit <= '0') { | |||
| errorMessge = '您的中奖次数已经达到上限!无法继续参加游戏!' | |||
| data.count = 1000000; | |||
| $('#change-box').hide(); | |||
| return; | |||
| } else { | |||
| if (res.data.AwardLimit == res.data.AwardCount && res.data.AwardLimit != 0) { | |||
| errorMessge = '您的中奖次数已经达到上限!无法继续参加游戏!' | |||
| data.count = res.data.playLimit - res.data.playCount; | |||
| $('#change').html(data.count); | |||
| $('#change-box').html('您的中奖次数已经达到上限!无法继续参加游戏!'); | |||
| $('#change-box').show(); | |||
| return; | |||
| } else if (res.data.playLimit == res.data.playCount) { | |||
| errorMessge = '您的剩余次数为0!无法继续参加游戏!' | |||
| data.count = 0; | |||
| $('#change').html(0); | |||
| $('#change-box').html('您的剩余次数为0!无法继续参加游戏!'); | |||
| $('#change-box').show(); | |||
| return; | |||
| } | |||
| } | |||
| } | |||
| } else { | |||
| errorMessge = res.message; | |||
| playAble = false; | |||
| $('#change').html(0); | |||
| $('#change-box').hide(); | |||
| } | |||
| } | |||
| }) | |||
| } | |||
| /** | |||
| * 记录游戏次数 | |||
| */ | |||
| function reduceCount(paramData) { | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/addActionLog",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async: true, | |||
| headers: { | |||
| 'content-type': 'application/json;charset=UTF-8', | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: JSON.stringify(paramData), | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| // alert('成功了!') | |||
| getCount() | |||
| } | |||
| }) | |||
| } | |||
| wcancel.click(function () { | |||
| $("#warnning-box").hide() | |||
| $("#warnning-box-bg").hide() | |||
| numFalg = false; | |||
| }) | |||
| $("#w-button").click(function () { | |||
| $("#warnning-box").hide() | |||
| $("#warnning-box-bg").hide() | |||
| numFalg = true; | |||
| let b = Math.floor(Math.random() * radomData.length) | |||
| console.log(radomData[b]) | |||
| // couponId = radomData[b].couponId | |||
| let params = { | |||
| // couponId:couponId, | |||
| // couponChannelId:radomData[b].id | |||
| gameId: getQueryString('id') | |||
| } | |||
| //查询中奖结果 | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/freeCridetGameGo",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async: true, | |||
| headers: { | |||
| 'content-type': 'application/json;charset=UTF-8', "token": getQueryString('token') | |||
| }, | |||
| data: JSON.stringify(params), | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| if (res.code == 200) { | |||
| getCount() | |||
| $canvasMask.hide(); | |||
| if (res.data) { | |||
| var toemdata = res.data | |||
| if (res.data.prizeType == 1) { | |||
| $('#card .win').html('积分增加+' + toemdata.credit); | |||
| $('.winning .red-body p').html('') | |||
| $('#card .win').css({ | |||
| 'font-size': ' 20px', | |||
| 'text-align': 'center', | |||
| 'color': '#FF6600', | |||
| 'line-height': '50px', | |||
| 'line-height': '50px', | |||
| "background": 'url(../common/image/prize/prize2.png) no-repeat', | |||
| 'background-size': '6rem' | |||
| }) | |||
| } else { | |||
| $('#card .win').html('') | |||
| $canvas.css("background-image", 'url(' + toemdata.coverImg + ')'); | |||
| $('#card .win').css({ | |||
| "background": 'url(' + toemdata.coverImg + ') no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)"); | |||
| } | |||
| $(".btn").html('再玩一把') | |||
| } else { | |||
| $('#card .win').html('') | |||
| $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else if (res.code == 13101) { | |||
| $canvasMask.hide(); | |||
| // $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| // "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').css({ | |||
| "line-height": "1.5rem", | |||
| "font-size": "0.64rem" | |||
| }) | |||
| $('.winning .red-body p').html('积分不足!'); | |||
| $(".btn").hide() | |||
| } | |||
| } | |||
| }) | |||
| }) | |||
| //点击开始刮奖按钮 | |||
| $btn.click(function () { | |||
| // data.count--;//设定中奖的图片 | |||
| let b = Math.floor(Math.random() * radomData.length) | |||
| console.log(radomData[b]) | |||
| // couponId = radomData[b].couponId | |||
| let params = { | |||
| gameId: getQueryString('id') | |||
| } | |||
| if (playAble) { | |||
| if (data.count > 0) { | |||
| if (true) { | |||
| //查询中奖结果 | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/freeGameGo",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async: true, | |||
| headers: { | |||
| 'content-type': 'application/json;charset=UTF-8', | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: JSON.stringify(params), | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| if (res.code == 200) { | |||
| getCount() | |||
| $canvasMask.hide(); | |||
| if (res.data) { | |||
| var toemdata = res.data | |||
| if (res.data.prizeType == 1) { | |||
| $('#card .win').html('积分增加+' + toemdata.credit); | |||
| $('.winning .red-body p').html('') | |||
| $('#card .win').css({ | |||
| 'font-size': ' 20px', | |||
| 'text-align': 'center', | |||
| 'color': '#FF6600', | |||
| 'line-height': '50px', | |||
| "background": 'url(../common/image/prize/prize2.png) no-repeat', | |||
| 'background-size': '6rem' | |||
| }) | |||
| $(".btn").html('再玩一把') | |||
| } else { | |||
| $('#card .win').html('') | |||
| $canvas.css("background-image", 'url(' + toemdata.coverImg + ')'); | |||
| $('#card .win').css({ | |||
| "background": 'url(' + toemdata.coverImg + ') no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)"); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else { | |||
| // reduceCount(paramContData); | |||
| $('#card .win').html('') | |||
| $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else { | |||
| // reduceCount(paramContData); | |||
| $('#card .win').html('') | |||
| $canvasMask.hide(); | |||
| $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } | |||
| }) | |||
| } else { | |||
| // reduceCount(paramContData); | |||
| $canvasMask.hide(); | |||
| $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else { | |||
| console.log(numFalg, "??"); | |||
| if (playCreditLimit >= '0') { | |||
| //可以使用积分玩 | |||
| if (!numFalg) {//消耗积分提示框只会弹出一次 | |||
| $('#warnning-box-bg').show(); | |||
| $('#warnning-box').show(); | |||
| if (data.count == -1) { | |||
| $('#w-title').html("将消耗" + consumeTotal + '积分'); | |||
| } else { | |||
| $('#w-title').html("免费次数已耗尽,将消耗" + consumeTotal + '积分'); | |||
| } | |||
| } else { | |||
| numFalg = true; | |||
| let b = Math.floor(Math.random() * radomData.length) | |||
| console.log(radomData[b]) | |||
| // couponId = radomData[b].couponId | |||
| let params = { | |||
| // couponId:couponId, | |||
| // couponChannelId:radomData[b].id | |||
| gameId: getQueryString('id') | |||
| } | |||
| //查询中奖结果 | |||
| $.ajax({ | |||
| url: baseUrl + "/api/game/freeCridetGameGo",//json文件位置 | |||
| type: "POST",//请求方式为get | |||
| dataType: "json", //返回数据格式为json | |||
| async: true, | |||
| headers: { | |||
| 'content-type': 'application/json;charset=UTF-8', | |||
| "token": getQueryString('token') | |||
| }, | |||
| data: JSON.stringify(params), | |||
| success: function (res) {//请求成功完成后要执行的方法 | |||
| if (res.code == 200) { | |||
| getCount() | |||
| $canvasMask.hide(); | |||
| if (res.data) { | |||
| var toemdata = res.data | |||
| if (res.data.prizeType == 1) { | |||
| $('#card .win').html('积分增加+' + toemdata.credit); | |||
| $('.winning .red-body p').html('') | |||
| $('#card .win').css({ | |||
| 'font-size': ' 20px', | |||
| 'text-align': 'center', | |||
| 'color': '#FF6600', | |||
| 'line-height': '50px', | |||
| "background": 'url(../common/image/prize/prize2.png) no-repeat', | |||
| 'background-size': '6rem' | |||
| }) | |||
| } else { | |||
| $('#card .win').html('') | |||
| $canvas.css("background-image", 'url(' + toemdata.coverImg + ')'); | |||
| $('#card .win').css({ | |||
| "background": 'url(' + toemdata.coverImg + ') no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)"); | |||
| } | |||
| $(".btn").html('再玩一把') | |||
| } else { | |||
| $('#card .win').html('') | |||
| $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); | |||
| $(".btn").html('再玩一把') | |||
| } | |||
| } else if (res.code == 13101) { | |||
| $canvasMask.hide(); | |||
| // $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); | |||
| $('#card .win').css({ | |||
| // "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', | |||
| "background-size": "cover" | |||
| }); | |||
| $('.winning .red-body p').css({ | |||
| "line-height": "1.5rem", | |||
| "font-size": "0.64rem" | |||
| }) | |||
| $('.winning .red-body p').html('积分不足!'); | |||
| $(".btn").hide() | |||
| } | |||
| } | |||
| }) | |||
| } | |||
| } else { | |||
| $('#warnning-box-bg').show(); | |||
| $('#warnning-box').show(); | |||
| $('#w-title').html("当前可用次数已耗尽"); | |||
| return | |||
| } | |||
| } | |||
| } else { | |||
| $('#warnning-box-bg').show(); | |||
| $('#warnning-box').show(); | |||
| $('#w-title').html(errorMessge); | |||
| } | |||
| }); | |||
| /*canvas事件*/ | |||
| //pc端 | |||
| $canvas.on({ | |||
| //鼠标按下 | |||
| mousedown: function (e) { | |||
| e = e || window.event; | |||
| e.preventDefault(); | |||
| bool = true; | |||
| var x = e.pageX - $(this).offset().left,//鼠标距离该页面left的值 - 元素左侧距离文档的left | |||
| y = e.pageY - $(this).offset().top; | |||
| ctx.moveTo(x, y); | |||
| //鼠标移动 | |||
| $canvas.on('mousemove', function (e) { | |||
| if (bool) { | |||
| var x = e.pageX - $(this).offset().left; | |||
| var y = e.pageY - $(this).offset().top; | |||
| ctx.lineTo(x, y); | |||
| ctx.stroke(); | |||
| clear(); | |||
| } | |||
| }); | |||
| }, | |||
| //鼠标按键抬起 | |||
| mouseup: function () { | |||
| bool = false; | |||
| } | |||
| }); | |||
| //移动端 | |||
| $canvas.on("touchstart", function (e) { | |||
| e = e || window.event; | |||
| e.preventDefault(); | |||
| if (typeof e.touches !== 'undefined') { | |||
| e = e.touches[0];//获取触点 | |||
| } | |||
| var x = e.pageX - $(this).offset().left, | |||
| y = e.pageY - $(this).offset().top; | |||
| ctx.moveTo(x, y); | |||
| //touchmove事件 | |||
| $canvas.on('touchmove', eventMove); | |||
| }); | |||
| //移动事件 | |||
| function eventMove(e) { | |||
| e = e || window.event; | |||
| e.preventDefault(); | |||
| if (typeof e.touches !== 'undefined') { | |||
| e = e.touches[0]; | |||
| } | |||
| var x = e.pageX - $(this).offset().left, | |||
| y = e.pageY - $(this).offset().top; | |||
| ctx.lineTo(x, y); | |||
| ctx.stroke(); | |||
| clear(); | |||
| } | |||
| //清除画布 | |||
| function clear() { | |||
| if (empty) return; | |||
| var data = ctx.getImageData(0, 0, canvasWidth, canvasHeight).data,//得到canvas的全部数据 | |||
| half = 0; | |||
| //length = canvasWidth * canvasHeight * 4,一个像素块是一个对象rgba四个值,a范围为0~255 | |||
| for (var i = 3, length = data.length; i < length; i += 4) {//因为有rgba四个值,下标0开始,所以初始i=3 | |||
| data[i] === 0 && half++;//存在imageData对象时half加1 PS:该像素区域透明即为不存在该对象 | |||
| } | |||
| //当刮开的区域大于等于20%时,则可以开始处理结果 | |||
| if (half >= canvasWidth * canvasHeight * 0.2) { | |||
| ctx.clearRect(0, 0, canvasWidth, canvasHeight);//清空画布 | |||
| empty = true; | |||
| win();//调用中奖信息 | |||
| //随机生成一个优惠券 | |||
| } | |||
| } | |||
| //点击跳回小程序奖券列表 | |||
| $('#myWin').click(function () { | |||
| wx.miniProgram.redirectTo({ | |||
| url: '/pages/couponorder/index/index' + "?token=" + getQueryString('token') + "&gameId=" + getQueryString('gameId') + "&id=" + getQueryString('id') + '&from=h5' | |||
| }) | |||
| }) | |||
| //中奖信息提示 | |||
| $("#close,.win,.btn").click(function () { | |||
| empty = false; | |||
| init(); | |||
| }); | |||
| //奖品展示 | |||
| var show = new Swiper(".swiper-container", { | |||
| direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动 | |||
| loop: false,//是否循环 | |||
| slidesPerView: "auto"//自动根据slides的宽度来设定数量 | |||
| }); | |||
| //返回首页 | |||
| $("#gotoindex").click(function () { | |||
| wx.miniProgram.redirectTo({ | |||
| url: '/pages/index/index' | |||
| }) | |||
| }); | |||
| }); | |||
| @@ -0,0 +1,203 @@ | |||
| @charset "utf-8"; | |||
| body { | |||
| background: #50009f; | |||
| } | |||
| #myWin{ | |||
| position: absolute; | |||
| top: 0; | |||
| right: 0; | |||
| background-color: #fe5362; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.74666667rem; | |||
| text-align: center; | |||
| line-height: 0.74666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| } | |||
| #share{ | |||
| position: absolute; | |||
| top: 1.2rem; | |||
| right: 0; | |||
| background-color: #34b202; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.74666667rem; | |||
| text-align: center; | |||
| line-height: 0.74666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| } | |||
| #wrap { | |||
| background-image: url("../image/bg.jpg"); | |||
| height: auto; | |||
| } | |||
| .rule, | |||
| .my { | |||
| margin-top: 0.48rem; | |||
| width: 1.09333333rem; | |||
| height: 0.74666667rem; | |||
| background-color: #ff9d1b; | |||
| text-align: center; | |||
| line-height: 0.74666667rem; | |||
| font-size: 0.32rem; | |||
| color: #fff; | |||
| } | |||
| .rule { | |||
| border-top-right-radius: 0.13333333rem; | |||
| border-bottom-right-radius: 0.13333333rem; | |||
| } | |||
| .my { | |||
| background-color: #fe5362; | |||
| border-top-left-radius: 0.13333333rem; | |||
| border-bottom-left-radius: 0.13333333rem; | |||
| } | |||
| /*主体*/ | |||
| .main { | |||
| margin-top: 4.4rem; | |||
| width: 100%; | |||
| } | |||
| .main h2 { | |||
| margin: 0.2rem auto 0; | |||
| width: 4rem; | |||
| height: 0.69333333rem; | |||
| /*background-color: #fee405;*/ | |||
| text-align: center; | |||
| line-height: 0.69333333rem; | |||
| font-size: 0.26666667rem; | |||
| font-weight: normal; | |||
| color: #bc5700; | |||
| border-radius: 0.34666667rem; | |||
| } | |||
| /*游戏区域*/ | |||
| .box { | |||
| position: relative; | |||
| width: 100%; | |||
| height: 7.2rem; | |||
| } | |||
| .box li { | |||
| position: absolute; | |||
| left: 6.82666667rem; | |||
| top: 3.57333333rem; | |||
| width: 2.73333333rem; | |||
| height: 3.57333333rem; | |||
| background-image: url("../image/card1.png"); | |||
| -o-transition: .3s; | |||
| -ms-transition: .3s; | |||
| -moz-transition: .3s; | |||
| -webkit-transition: .3s; | |||
| transition: .3s; | |||
| } | |||
| /*卡牌摆动动画*/ | |||
| .box li.active { | |||
| background-image: url("../image/card2.png"); | |||
| -o-animation: shaking 0.5s ease-in-out; | |||
| -ms-animation: shaking 0.5s ease-in-out; | |||
| -moz-animation: shaking 0.5s ease-in-out; | |||
| -webkit-animation: shaking 0.5s ease-in-out; | |||
| animation: shaking 0.5s ease-in-out; | |||
| } | |||
| @keyframes shaking { | |||
| 0%, | |||
| 100% { | |||
| -o-transform: rotateY(0deg); | |||
| -ms-transform: rotateY(0deg); | |||
| -moz-transform: rotateY(0deg); | |||
| -webkit-transform: rotateY(0deg); | |||
| transform: rotateY(0deg); | |||
| } | |||
| 33% { | |||
| -o-transform: rotateY(-20deg); | |||
| -ms-transform: rotateY(-20deg); | |||
| -moz-transform: rotateY(-20deg); | |||
| -webkit-transform: rotateY(-20deg); | |||
| transform: rotateY(-20deg); | |||
| } | |||
| 66% { | |||
| -o-transform: rotateY(20deg); | |||
| -ms-transform: rotateY(20deg); | |||
| -moz-transform: rotateY(20deg); | |||
| -webkit-transform: rotateY(20deg); | |||
| transform: rotateY(20deg); | |||
| } | |||
| } | |||
| /*卡牌翻开动画*/ | |||
| .box li.open-card { | |||
| left: 3.64rem !important; | |||
| top: 0 !important; | |||
| z-index: 10; | |||
| -o-transform: scale(1.5); | |||
| -ms-transform: scale(1.5); | |||
| -moz-transform: scale(1.5); | |||
| -webkit-transform: scale(1.5); | |||
| transform: scale(1.5); | |||
| -o-animation: openCard .5s .5s linear forwards; | |||
| -ms-animation: openCard .5s .5s linear forwards; | |||
| -moz-animation: openCard .5s .5s linear forwards; | |||
| -webkit-animation: openCard .5s .5s linear forwards; | |||
| animation: openCard .5s .5s linear forwards; | |||
| } | |||
| @keyframes openCard { | |||
| 10%, | |||
| 30%, | |||
| 50% { | |||
| -o-transform: scale(1.5) translateX(-10px); | |||
| -ms-transform: scale(1.5) translateX(-10px); | |||
| -moz-transform: scale(1.5) translateX(-10px); | |||
| -webkit-transform: scale(1.5) translateX-(10px); | |||
| transform: scale(1.5) translateX(-10px); | |||
| } | |||
| 20%, | |||
| 40%, | |||
| 60% { | |||
| -o-transform: scale(1.5) translateX(10px); | |||
| -ms-transform: scale(1.5) translateX(10px); | |||
| -moz-transform: scale(1.5) translateX(10px); | |||
| -webkit-transform: scale(1.5) translateX(10px); | |||
| transform: scale(1.5) translateX(10px); | |||
| } | |||
| 100% { | |||
| -o-transform: scale(1.5) translateX(90deg); | |||
| -ms-transform: scale(1.5) translateX(90deg); | |||
| -moz-transform: scale(1.5) translateX(90deg); | |||
| -webkit-transform: scale(1.5) translateX(90deg); | |||
| transform: scale(1.5) rotateY(90deg); | |||
| } | |||
| } | |||
| /*图案*/ | |||
| .box li img { | |||
| display: block; | |||
| margin: 0.46666667rem auto; | |||
| width: 1.73333333rem; | |||
| height: 2.53333333rem; | |||
| } | |||
| /*翻牌遮罩*/ | |||
| #mask-card { | |||
| display: none; | |||
| position: fixed; | |||
| z-index: 1; | |||
| width: 100%; | |||
| height: 100%; | |||
| /* background-color: rgba(0, 0, 0, 0.85); */ | |||
| } | |||
| /*奖品展示*/ | |||
| .awards { | |||
| position: static; | |||
| margin: 0.4rem auto; | |||
| width: 8.4rem; | |||
| height: 1.93333333rem; | |||
| background-color: #cb59fe; | |||
| box-shadow: 0 0.26666667rem 0.26666667rem rgba(135, 25, 187, 0.7) inset; | |||
| border-radius: 0.21333333rem; | |||
| } | |||
| /*规则弹窗背景色*/ | |||
| #mask-rule .box-rule { | |||
| background-color: #fe5c51; | |||
| } | |||
| #mask-rule .box-rule .star { | |||
| background-image: url("../../common/image/rule/star2.png"); | |||
| } | |||
| @@ -0,0 +1,189 @@ | |||
| @charset "utf-8"; | |||
| @rem:75rem; | |||
| body{ | |||
| background: #50009f; | |||
| } | |||
| #wrap { | |||
| background-image: url("../image/bg.png"); | |||
| } | |||
| .rule, .my { | |||
| margin-top: 36/@rem; | |||
| width: 82/@rem; | |||
| height: 56/@rem; | |||
| background-color: #ff9d1b; | |||
| text-align: center; | |||
| line-height: 56/@rem; | |||
| font-size: 24/@rem; | |||
| color: #fff; | |||
| } | |||
| .rule { | |||
| border-top-right-radius: 10/@rem; | |||
| border-bottom-right-radius: 10/@rem; | |||
| } | |||
| .my { | |||
| background-color: #fe5362; | |||
| border-top-left-radius: 10/@rem; | |||
| border-bottom-left-radius: 10/@rem; | |||
| } | |||
| /*主体*/ | |||
| .main { | |||
| position: absolute; | |||
| left: 0; | |||
| bottom: 0; | |||
| width: 100%; | |||
| height: 820/@rem; | |||
| } | |||
| .main h2 { | |||
| margin: 15/@rem auto 0; | |||
| width: 300/@rem; | |||
| height: 52/@rem; | |||
| background-color: #fee405; | |||
| text-align: center; | |||
| line-height: 52/@rem; | |||
| font-size: 20/@rem; | |||
| font-weight: normal; | |||
| color: #bc5700; | |||
| border-radius: 26/@rem; | |||
| } | |||
| /*游戏区域*/ | |||
| .box { | |||
| position: relative; | |||
| width: 100%; | |||
| height: 540/@rem; | |||
| } | |||
| .box li { | |||
| position: absolute; | |||
| left: 512/@rem; | |||
| top: 268/@rem; | |||
| width: 205/@rem; | |||
| height: 268/@rem; | |||
| background-image: url("../image/card1.png"); | |||
| -o-transition: .3s; | |||
| -ms-transition: .3s; | |||
| -moz-transition: .3s; | |||
| -webkit-transition: .3s; | |||
| transition: .3s; | |||
| } | |||
| /*卡牌摆动动画*/ | |||
| .box li.active { | |||
| background-image: url("../image/card2.png"); | |||
| -o-animation: shaking .5s ease-in-out; | |||
| -ms-animation: shaking .5s ease-in-out; | |||
| -moz-animation: shaking .5s ease-in-out; | |||
| -webkit-animation: shaking .5s ease-in-out; | |||
| animation: shaking .5s ease-in-out; | |||
| } | |||
| @keyframes shaking{ | |||
| 0%,100%{ | |||
| -o-transform: rotateY(0deg); | |||
| -ms-transform: rotateY(0deg); | |||
| -moz-transform: rotateY(0deg); | |||
| -webkit-transform: rotateY(0deg); | |||
| transform: rotateY(0deg); | |||
| } | |||
| 33%{ | |||
| -o-transform: rotateY(-20deg); | |||
| -ms-transform: rotateY(-20deg); | |||
| -moz-transform: rotateY(-20deg); | |||
| -webkit-transform: rotateY(-20deg); | |||
| transform: rotateY(-20deg); | |||
| } | |||
| 66%{ | |||
| -o-transform: rotateY(20deg); | |||
| -ms-transform: rotateY(20deg); | |||
| -moz-transform: rotateY(20deg); | |||
| -webkit-transform: rotateY(20deg); | |||
| transform: rotateY(20deg); | |||
| } | |||
| } | |||
| /*卡牌翻开动画*/ | |||
| .box li.open-card { | |||
| left: 273/@rem !important; | |||
| top: 0 !important; | |||
| z-index: 10; | |||
| -o-transform: scale(1.5); | |||
| -ms-transform: scale(1.5); | |||
| -moz-transform: scale(1.5); | |||
| -webkit-transform: scale(1.5); | |||
| transform: scale(1.5); | |||
| -o-animation: openCard .5s .5s linear forwards; | |||
| -ms-animation: openCard .5s .5s linear forwards; | |||
| -moz-animation: openCard .5s .5s linear forwards; | |||
| -webkit-animation: openCard .5s .5s linear forwards; | |||
| animation: openCard .5s .5s linear forwards; | |||
| } | |||
| @keyframes openCard{ | |||
| 10%,30%,50%{ | |||
| -o-transform: scale(1.5) translateX(-10px); | |||
| -ms-transform: scale(1.5) translateX(-10px); | |||
| -moz-transform: scale(1.5) translateX(-10px); | |||
| -webkit-transform: scale(1.5) translateX-(10px); | |||
| transform: scale(1.5) translateX(-10px); | |||
| } | |||
| 20%,40%,60%{ | |||
| -o-transform: scale(1.5) translateX(10px); | |||
| -ms-transform: scale(1.5) translateX(10px); | |||
| -moz-transform: scale(1.5) translateX(10px); | |||
| -webkit-transform: scale(1.5) translateX(10px); | |||
| transform: scale(1.5) translateX(10px); | |||
| } | |||
| 100%{ | |||
| -o-transform: scale(1.5) translateX(90deg); | |||
| -ms-transform: scale(1.5) translateX(90deg); | |||
| -moz-transform: scale(1.5) translateX(90deg); | |||
| -webkit-transform: scale(1.5) translateX(90deg); | |||
| transform: scale(1.5) rotateY(90deg); | |||
| } | |||
| } | |||
| /*图案*/ | |||
| .box li img { | |||
| display: block; | |||
| margin: 35/@rem auto; | |||
| width: 130/@rem; | |||
| height: 190/@rem; | |||
| } | |||
| /*翻牌遮罩*/ | |||
| #mask-card{ | |||
| display: none; | |||
| position: fixed; | |||
| z-index: 1; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-color: rgba(0, 0, 0, .85) | |||
| } | |||
| /*奖品展示*/ | |||
| .awards { | |||
| position: static; | |||
| margin: 30/@rem auto; | |||
| width: 630/@rem; | |||
| height: 145/@rem; | |||
| background-color: #cb59fe; | |||
| box-shadow: 0 20/@rem 20/@rem rgba(135, 25, 187, .7) inset; | |||
| border-radius: 16/@rem; | |||
| } | |||
| /*规则弹窗背景色*/ | |||
| #mask-rule .box-rule{ | |||
| background-color: #fe5c51; | |||
| } | |||
| #mask-rule .box-rule .star{ | |||
| background-image: url("../../common/image/rule/star2.png"); | |||
| } | |||