跑跑卡丁车专题

2019专题/1906跑跑卡丁车专题/src/_index.html

@@ -20,7 +20,7 @@
     <div class="page-index">
         <div class="mod-primary">
             <div class="btns">
-                <a href="javascript:;" class="btn btn-bookgame"></a>
+                <span class="btn btn-bookgame"></span>
                 <a href="#" target="_blank" class="btn btn-welfare"></a>
             </div>
         </div>
@@ -34,7 +34,7 @@
                             <div class="cover">
                                 <img src="/src/img/bg-Qbi.png" alt="" />
                             </div>
-                            <p>50QB</p>
+                            <p class="tip">50QB</p>
                         </div>
                     </li>
                     <li class="lottery-item item2 right" data-order="1" data-score="0.05" title="">
@@ -42,7 +42,7 @@
                             <div class="cover">
                                 <img src="/src/img/bg-jianpan.png" alt="" />
                             </div>
-                            <p>键盘</p>
+                            <p class="tip">键盘</p>
                         </div>
                     </li>
                     <li class="lottery-item item3 right" data-order="2" data-score="0.2" title="">
@@ -50,7 +50,7 @@
                             <div class="cover">
                                 <img src="/src/img/bg-Qbi.png" alt="" />
                             </div>
-                            <p>50QB</p>
+                            <p class="tip">50QB</p>
                         </div>
                     </li>
                     <li class="lottery-item item4 right" data-order="3" data-score="0.5" title="">
@@ -58,15 +58,16 @@
                             <div class="cover">
                                 <img src="/src/img/bg-Qbi.png" alt="" />
                             </div>
-                            <p>50QB</p>
+                            <p class="tip">50QB</p>
                         </div>
                     </li>
-                    <li class="btn-lottery" data-id="9" title="开启宝库"><span></span></li>
+                    <li class="btn-lottery" data-id="9" title="开启宝库"><span class="bg"></span><span class="text"></span></li>
                     <li class="lottery-item item5 left" data-order="4" data-score="0" title="">
                         <div class="content-wrap">
                             <div class="cover">
                                 <img src="/src/img/bg-lottery-thank.png" alt="" />
                             </div>
+                            <p class="tip">谢谢参与</p>
                         </div>
                     </li>
                     <li class="lottery-item item6 left" data-order="5" data-score="0.5" title="">
@@ -74,7 +75,7 @@
                             <div class="cover">
                                 <img src="/src/img/bg-Qbi.png" alt="" />
                             </div>
-                            <p>50QB</p>
+                            <p class="tip">50QB</p>
                         </div>
                     </li>
                     <li class="lottery-item item7 left" data-order="6" data-score="0.5" title="">
@@ -82,7 +83,7 @@
                             <div class="cover">
                                 <img src="/src/img/bg-Qbi.png" alt="" />
                             </div>
-                            <p>50QB</p>
+                            <p class="tip">50QB</p>
                         </div>
                     </li>
                     <li class="lottery-item item8 left" data-order="7" data-score="0.5" title="">
@@ -90,7 +91,7 @@
                             <div class="cover">
                                 <img src="/src/img/bg-Qbi.png" alt="" />
                             </div>
-                            <p>50QB</p>
+                            <p class="tip">50QB</p>
                         </div>
                     </li>
                 </ul>
@@ -100,11 +101,25 @@
             <div class="mod-inner">
                 <div class="swiper-container swiper-preview">
                     <ul class="swiper-wrapper">
-                        <li class="swiper-slide"></li>
-                        <li class="swiper-slide"></li>
-                        <li class="swiper-slide"></li>
+                        <li class="swiper-slide"><img src="/src/img/img-preview1.jpg" alt="" /></li>
+                        <li class="swiper-slide"><img src="/src/img/img-preview2.jpg" alt="" /></li>
+                        <li class="swiper-slide"><img src="/src/img/img-preview3.jpg" alt="" /></li>
                     </ul>
                 </div>
+                <p class="swiper-btns swiper-button-prev"></p>
+                <p class="swiper-btns swiper-button-next"></p>
+                <div class="swiper-pagination pagination-preview"></div>
+            </div>
+        </div>
+        <div class="mod-video">
+            <div class="mod-inner">
+                <div class="video-wrap">
+                    <span class="cover" style="background-image: url(/src/img/img-video-cover.png);"><i class="btn-play"></i></span>
+                    <span class="video">
+                        <i class="btn-close"></i>
+                        <embed id="8818379" name="8818379" src="http://assets.dwstatic.com/video/vpp.swf" wmode="transparent" allowfullscreen="true" quality="high" height="100%" width="100%" align="middle" allowscriptaccess="always" flashvars="uu=a04808d307&amp;vu=&amp;continous_play=0&amp;auto_play=1&amp;videoId=0&amp;vid=8818379&amp;width=640&amp;height=360&amp;channelId=cr&amp;sdk=&amp;no_ad=1" type="application/x-shockwave-flash">
+                    </span>
+                </div>
             </div>
         </div>
     </div>

2019专题/1906跑跑卡丁车专题/src/modules/page/index.js

@@ -1,6 +1,8 @@
 var seaLoader = require('seaLoader');
 var dialog = require('dialog.js');
 
+var Swiper = require('swiper');
+
 var codeTpl = __inline("/src/tpl/code.tmpl"); //验证码
 var comfirmTpl = __inline("/src/tpl/comfirm.tmpl"); //消耗金币确认框
 var bindWxTpl = __inline("/src/tpl/bindWx.tmpl");//绑定微信弹框
@@ -23,10 +25,10 @@ var M = {
     getReservedState: function () {
         $.ajax({
             url: 'http://kapcdev.webdev2.duowan.com/game/GetZtBook',
-            type: 'post',
+            dataType: 'jsonp',
             data: { lottery_id: parseInt(lottery_id) },
+            jsonp: 'callback',
             success: function (ret) {
-                console.log(ret);
                 if (ret.result == 1) {
                     var status = ret.data.status;
                     if (status == 1) {
@@ -41,11 +43,12 @@ var M = {
     reservedGame: function () {
         $.ajax({
             url: 'http://kapcdev.webdev2.duowan.com/game/ZtBook',
-            type: 'post',
+            dataType: 'jsonp',
             data: { lottery_id: parseInt(lottery_id) },
+            jsonp: 'callback',
             success: function (ret) {
-                console.log(ret);
                 if (ret.result == 1) {
+                    $count.text(1);
                     V.showTip('预订成功');
                 } else {
                     V.showTip(ret.msg);
@@ -155,7 +158,8 @@ var M = {
     },
     getCount: function (callback) {
         $.ajax({
-            url: 'http://ka.duowan.com/lottery/count',
+            // url: 'http://ka.duowan.com/lottery/count',
+            url: 'http://kapcdev.webdev2.duowan.com/lottery/count',
             data: { lottery_id: lottery_id },
             dataType: 'jsonp',
             success: function (ret) {
@@ -173,7 +177,8 @@ var M = {
         V.startLottery()
 
         $.ajax({
-            url: 'http://ka.duowan.com/lottery/gacha',
+            // url: 'http://ka.duowan.com/lottery/gacha',
+            url: 'http://kapcdev.webdev2.duowan.com/lottery/gacha',
             data: { lottery_id: lottery_id },
             dataType: 'jsonp',
             success: function (ret) {
@@ -308,10 +313,10 @@ var V = {
             $lotterys.removeClass('active')
 
             var $current = $lotterys.filter('[data-order=' + lotteryIndex + ']').addClass('active')
-            $lotteryBtn.css({'transform': 'rotate(' + (45 * lotteryIndex + 45) + 'deg)'});
-
+            $lotteryBtn.find('.bg').css({'transform': 'rotate(' + (45 * lotteryIndex) + 'deg)'});
+            
             if (scoreRet && $current.data('score') == scoreRet.gold) {
-                V.showLottery(scoreRet, $current.children('p').text())
+                V.showLottery(scoreRet, $current.find('p.tip').text())
                 $count.text(parseInt($count.text()) - 1)
                 lottering = false
                 clearInterval(lotteryTimer)
@@ -335,7 +340,6 @@ var V = {
         M.getCount(function (ret) {
             $count.text(ret)
         })
-
     },
     showTip: function (msg, timeout) {
         if (!msg) {
@@ -445,11 +449,9 @@ var C = {
 
 
         // 弹窗video
-        $('body').on('click', '.mod-primary .btn-play', function () {
-            $(this).parent().find('.video').fadeIn();
-        })
-        $('body').on('click', '.mod-primary .video .icon-close', function () {
-            $(this).parent().fadeOut();
+        $('body').on('click', '.mod-video .btn-play', function () {
+            $(this).closest('.mod-video').find('.cover').fadeOut();
+            $(this).closest('.mod-video').find('.video').fadeIn();
         })
 
         //弹框绑定微信
@@ -479,6 +481,54 @@ var C = {
         })
 
         // 轮播图
+        if ($('.swiper-preview').length > 0) {
+            new Swiper('.swiper-preview', {
+                watchSlidesProgress: true,
+                slidesPerView: 'auto',
+                centeredSlides: true,
+                loop: true,
+                loopedSlides: 5,
+                autoplay: {
+                    disableOnInteraction: false
+                },
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                },
+                pagination: {
+                    el: '.swiper-pagination',
+                    bulletActiveClass: 'is-active',
+                    clickable: true
+                },
+                on: {
+                    progress: function(progress) {
+                        for (i = 0; i < this.slides.length; i++) {
+                            var slide = this.slides.eq(i);
+                            var slideProgress = this.slides[i].progress;
+                            var modify = 1;
+                            if (Math.abs(slideProgress) > 1) {
+                                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
+                            }
+                            var translate = slideProgress * modify * 654 + 'px';
+                            var scale = 1 - Math.abs(slideProgress) / 3;
+                            var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
+                            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
+                            slide.css('zIndex', zIndex);
+                            slide.css('opacity', 1);
+                            if (Math.abs(slideProgress) > 3) {
+                                slide.css('opacity', 0);
+                            }
+                        }
+                    },
+                    setTransition: function(transition) {
+                        for (var i = 0; i < this.slides.length; i++) {
+                            var slide = this.slides.eq(i)
+                            slide.transition(transition);
+                        }
+                    }
+                }
+            })
+        }
 
         //复制
         if (window.clipboardData) {

2019专题/1906跑跑卡丁车专题/src/sass/global.scss

@@ -24,6 +24,7 @@ sans-serif;
 @import "base/ui-dialog";
 @import "page/gallery";
 @import "page/bindWx";
+@import "./swiper.css";
 $yellow: #CEBE95;
 $yellow-lighter: #CAB98D;
 html{
@@ -98,7 +99,7 @@ body{
 .wrapper{
     padding: 0;
 }
-.page-index{
+.page-index {
     overflow: hidden;
     position: relative;
     a{
@@ -106,11 +107,11 @@ body{
             outline: none;
         }
     }
-    .mod-inner{
+    .mod-inner {
         width: 1200px;
         margin: 0 auto;
     }
-    .mod-primary{
+    .mod-primary {
         height: 938px;
         position: relative;
         background: url(../img/bg-primary.jpg) top center no-repeat;
@@ -124,6 +125,7 @@ body{
                 display: inline-block;
                 background: top center no-repeat;
                 transition: transform 0.3s;
+                cursor: pointer;
                 &:hover {
                     transform: translate(0, -5px);
                 }
@@ -137,7 +139,7 @@ body{
             }
         }
     }
-    .mod-luckdraw{
+    .mod-luckdraw {
         height: 1130px;
         background: url(../img/bg-luckdraw.jpg) top center no-repeat;
         .mod-tip {
@@ -197,6 +199,9 @@ body{
                         .cover {
                             transform: rotate(-180deg);
                         }
+                        .content-wrap p {
+                            display: none;
+                        }
                     }
                     &.item6{
                         bottom: 105px;
@@ -223,18 +228,24 @@ body{
                         top: 211px;
                         left: 50%;
                         margin-left: -173px;
-                        background: url(../img/btn-lottery.png?__sprite) center no-repeat;
-                        transform-origin: 173.5px 195.5px;
                         cursor: pointer;
                         span {
-                            height: 111px;
-                            width: 246px;
                             display: block;
-                            position: absolute;
-                            top: 141px;
-                            left: 51px;
-                            transform: rotate(0deg);
-                            background: url(../img/btn-lottery-text.jpg?__sprite) center no-repeat;
+                            &.bg {
+                                height: 100%;
+                                width: 100%;
+                                background: url(../img/btn-lottery.png?__sprite) center no-repeat;
+                                transform-origin: 173.5px 195.5px;
+                            }
+                            &.text {
+                                height: 111px;
+                                width: 246px;
+                                position: absolute;
+                                top: 141px;
+                                left: 51px;
+                                transform: rotate(0deg);
+                                background: url(../img/btn-lottery-text.jpg?__sprite) center no-repeat;
+                            }
                         }
                     }
                     .content-wrap{
@@ -264,17 +275,20 @@ body{
             }
         }
     }
-    .mod-preview{
+    .mod-preview {
         height: 904px;
+        overflow: hidden;
         background: url(../img/bg-preview.jpg) top center no-repeat;
         .mod-inner{
-            padding-top: 358px;
+            width: 1180px;
+            margin-top: 358px;
             position: relative;
             .swiper-preview {
                 ul {
                     li {
-                        height: 412px;
-                        width: 928px;
+                        height: 416px;
+                        width: 932px;
+                        box-sizing: border-box;
                         border: 2px #69e1ff solid;
                         border-radius: 18px;
                         overflow: hidden;
@@ -282,6 +296,98 @@ body{
                     }
                 }
             }
+            .swiper-btns {
+                height: 67px;
+                width: 103px;
+                margin-top: -33px;
+                background-size: auto;
+                &:focus {
+                    outline: none;
+                }
+                &.swiper-button-prev {
+                    left: -9px;
+                    background: url(../img/bg-preview-prev.png?__sprite) center no-repeat;
+                }
+                &.swiper-button-next {
+                    right: -9px;
+                    background: url(../img/bg-preview-next.png?__sprite) center no-repeat;
+                }
+            }
+            .pagination-preview {
+                width: 100%;
+                font-size: 0;
+                margin-top: 32px;
+                position: absolute;
+                bottom: -52px;
+                left: 0;
+                span {
+                    height: 20px;
+                    width: 20px;
+                    background: #fff;
+                    margin: 0 11px;
+                    @include opacity(0.46);
+                    &:focus {
+                        outline: none;
+                    }
+                    &.is-active, &:hover {
+                        background: #FF0000;
+                        @include opacity(0.15);
+                    }
+                }
+            }
+        }
+    }
+    .mod-video {
+        height: 943px;
+        background: url(../img/bg-video.jpg) top center no-repeat;
+        .mod-inner {
+            padding-top: 234px;
+            .video-wrap {
+                height: 566px;
+                width: 1056px;
+                background: #336CDD;
+                border: 2px #69E1FF solid;
+                position: relative;
+                span {
+                    display: block;
+                    overflow: hidden;
+                    &.cover {
+                        height: 597px;
+                        width: 1083px;
+                        background: top center no-repeat;
+                        position: absolute;
+                        top: -15px;
+                        left: -14px;
+                        .btn-play {
+                            height: 149px;
+                            width: 132px;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            margin: -74px 0 0 -66px;
+                            background: url(../img/btn-play.png?__sprite) center no-repeat;
+                            transition: transform 0.3s;
+                            cursor: pointer;
+                            &:hover {
+                                transform: rotate(180deg);
+                            }
+                        }
+                    }
+                    &.video {
+                        height: 100%;
+                        width: 100%;
+                        display: none;
+                        embed {
+                            height: 100% !important;
+                            width: 100%;
+                            display: block;
+                        }
+                    }
+                    i {
+                        display: block;
+                    }
+                }
+            }
         }
     }
 }
@@ -466,7 +572,8 @@ body{
             @include reset;
             @include inline-block;
             line-height: 35px;
-            background-color: #3434AE;
+            // background-color: #3434AE;
+            background-color: #346bae;
             padding: 0 40px;
             font-size: 14px;
             color: #fff;

2019专题/1906跑跑卡丁车专题/src/tpl/comfirm.tmpl

@@ -6,6 +6,6 @@
     </div>
     <div class="btn-wrap">
         <span class="btn btn-cancel" i="close">取消</span>
-        <span class="btn btn-submit" data-giftid="<%= data.gift_id %>"> 确定</span>
+        <span class="btn btn-submit" data-giftid="<%= data.gift_id %>">确定</span>
     </div>
 </div>