Home Explore Help
Register Sign In
FED
/
dwweb-pc
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

古剑奇谭专题、跑跑卡丁车专题修改调整

PC-20180523CIYM\Administrator 5 years ago
parent
9b40c18940
commit
59225c94cd
8 changed files with 357 additions and 41 deletions
Split View Show Diff Stats
  1. 8 8
      2019专题/1906古剑奇谭专题/src/_index.html
  2. 5 5
      2019专题/1906古剑奇谭专题/src/sass/global.scss
  3. 6 2
      2019专题/1906跑跑卡丁车专题/src/_index.html
  4. BIN
      2019专题/1906跑跑卡丁车专题/src/img/bg-primary.jpg
  5. BIN
      2019专题/1906跑跑卡丁车专题/src/img/logo-ppkdc.png
  6. 27 12
      2019专题/1906跑跑卡丁车专题/src/modules/page/index.js
  7. 50 14
      2019专题/1906跑跑卡丁车专题/src/sass/global.scss
  8. 261 0
      2019专题/1906跑跑卡丁车专题/src/sass/wap.scss

+ 8 - 8
2019专题/1906古剑奇谭专题/src/_index.html
View File 

@@ -212,7 +212,7 @@
 
                 </div>
 
                 <div class="content-wrap">
 
                     <ul>
 
-                        <li class="item1">
 
+                        <li class="item1" style="background: url(/src/img/bg-preview1.jpg);">
 
                             <!-- <div class="skill">
 
                                 <div class="item">
 
                                     <p class="title">花非花[法攻]</p>
 
@@ -236,13 +236,13 @@
 
                                 </div>
 
                             </div> -->
 
                         </li>
 
-                        <li class="item2"></li>
 
-                        <li class="item3"></li>
 
-                        <li class="item4"></li>
 
-                        <li class="item5"></li>
 
-                        <li class="item6"></li>
 
-                        <li class="item7"></li>
 
-                        <li class="item8"></li>
 
+                        <li class="item2" style="background: url(/src/img/bg-preview2.jpg);"></li>
 
+                        <li class="item3" style="background: url(/src/img/bg-preview3.jpg);"></li>
 
+                        <li class="item4" style="background: url(/src/img/bg-preview4.jpg);"></li>
 
+                        <li class="item5" style="background: url(/src/img/bg-preview5.jpg);"></li>
 
+                        <li class="item6" style="background: url(/src/img/bg-preview6.jpg);"></li>
 
+                        <li class="item7" style="background: url(/src/img/bg-preview7.jpg);"></li>
 
+                        <li class="item8" style="background: url(/src/img/bg-preview8.jpg);"></li>
 
                     </ul>
 
                 </div>
 
             </div>

+ 5 - 5
2019专题/1906古剑奇谭专题/src/sass/global.scss
View File 

@@ -627,11 +627,11 @@ body{
 
                         &:first-child {
 
                             display: block;
 
                         }
 
-                        @for $i from 1 through 8 {
 
-                            &.item#{$i} {
 
-                                background-image: url(../img/bg-preview#{$i}.jpg);
 
-                            }
 
-                        }
 
+                        // @for $i from 1 through 8 {
 
+                        //     &.item#{$i} {
 
+                        //         background-image: url(../img/bg-preview#{$i}.jpg);
 
+                        //     }
 
+                        // }
 
                         // .skill {
 
                         //     width: 465px;
 
                         //     background: #fff;

+ 6 - 2
2019专题/1906跑跑卡丁车专题/src/_index.html
View File 

@@ -12,6 +12,7 @@
 
     <link href="sass/global.scss" rel="stylesheet">
 
     <script src="//www.duowan.com/assets/js/jquery.js"></script><!--ignore-->
 
     <script src="//pub.dwstatic.com/common/js/dwudbproxy.js "></script><!--ignore-->
 
+    <script>!function(d,a){var e=d.documentElement,c="orientationchange"in window?"orientationchange":"resize",v=function(){var f=e.clientWidth;f&&(e.style.fontSize=20*(f/320)+"px")};d.addEventListener&&(a.addEventListener(c,v,!1),d.addEventListener("DOMContentLoaded",v,!1))}(document,window);</script>
 
 </head>
 
 
 <body>
 
@@ -19,9 +20,13 @@
 
     <script id="without-navplus" src="//pub.dwstatic.com/common/dwNavbar/navbar.js?type=ka"></script><!--ignore-->
 
     <div class="page-index">
 
         <div class="mod-primary">
 
+            <span class="logo"></span>
 
             <div class="btns">
 
                 <span class="btn btn-bookgame"></span>
 
-                <a href="#" target="_blank" class="btn btn-welfare"></a>
 
+                <div class="btn-wrap welfare-wrap">
 
+                    <a href="#" target="_blank" class="btn btn-welfare"></a>
 
+                    <p class="tip">玩游戏瓜分 <b>10000</b> Q币</p>
 
+                </div>
 
             </div>
 
         </div>
 
         <div class="mod-luckdraw">
 
@@ -116,7 +121,6 @@
 
                 <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>

BIN
2019专题/1906跑跑卡丁车专题/src/img/bg-primary.jpg
View File


BIN
2019专题/1906跑跑卡丁车专题/src/img/logo-ppkdc.png
View File


+ 27 - 12
2019专题/1906跑跑卡丁车专题/src/modules/page/index.js
View File 

@@ -19,12 +19,14 @@ var $lotterys = $('.lottery-item')
 
 var $lotteryBtn = $('.btn-lottery')
 
 var lotteryTimer, lotteryIndex, lottering = false;
 
 
+var isH5 = /Android|webOS|iPhone|Windows Phone|iPod|BlackBerry|SymbianOS/i.test(window.navigator.userAgent) && !/[\?&]pc(?:[=&].*|$)/.test(window.location.href)
 
+
 
 var domain = "http://ka.duowan.com";
 
 
 var M = {
 
     getReservedState: function () {
 
         $.ajax({
 
-            url: 'http://kapcdev.webdev2.duowan.com/game/GetZtBook',
 
+            url: 'http://ka.duowan.com/game/GetZtBook',
 
             dataType: 'jsonp',
 
             data: { lottery_id: parseInt(lottery_id) },
 
             jsonp: 'callback',
 
@@ -42,7 +44,7 @@ var M = {
 
     },
 
     reservedGame: function () {
 
         $.ajax({
 
-            url: 'http://kapcdev.webdev2.duowan.com/game/ZtBook',
 
+            url: 'http://ka.duowan.com/game/ZtBook',
 
             dataType: 'jsonp',
 
             data: { lottery_id: parseInt(lottery_id) },
 
             jsonp: 'callback',
 
@@ -158,8 +160,7 @@ var M = {
 
     },
 
     getCount: function (callback) {
 
         $.ajax({
 
-            // url: 'http://ka.duowan.com/lottery/count',
 
-            url: 'http://kapcdev.webdev2.duowan.com/lottery/count',
 
+            url: 'http://ka.duowan.com/lottery/count',
 
             data: { lottery_id: lottery_id },
 
             dataType: 'jsonp',
 
             success: function (ret) {
 
@@ -177,8 +178,7 @@ var M = {
 
         V.startLottery()
 
 
         $.ajax({
 
-            // url: 'http://ka.duowan.com/lottery/gacha',
 
-            url: 'http://kapcdev.webdev2.duowan.com/lottery/gacha',
 
+            url: 'http://ka.duowan.com/lottery/gacha',
 
             data: { lottery_id: lottery_id },
 
             dataType: 'jsonp',
 
             success: function (ret) {
 
@@ -350,7 +350,7 @@ var V = {
 
         var d = dialog({
 
             title: "提示",
 
             content: msg,
 
-            skin: "base-ui"
 
+            skin: "base-ui popup-tips"
 
         }).showModal();
 
 
         //2秒后自动关闭
 
@@ -450,8 +450,8 @@ var C = {
 
 
         // 弹窗video
 
         $('body').on('click', '.mod-video .btn-play', function () {
 
-            $(this).closest('.mod-video').find('.cover').fadeOut();
 
-            $(this).closest('.mod-video').find('.video').fadeIn();
 
+            $(this).closest('.mod-video').find('.cover').css('display', 'none');
 
+            $(this).closest('.mod-video').find('.video').css('display', 'block');
 
         })
 
 
         //弹框绑定微信
 
@@ -475,19 +475,34 @@ var C = {
 
                         M.reservedGame();
 
                     }
 
                 } else {
 
-                    dwUDBProxy.kaLogin();
 
+                    if (isH5 || $('body').width() <= 750) {
 
+                        dwUDBProxy.login();
 
+                    } else {
 
+                        dwUDBProxy.kaLogin();
 
+                    }
 
                 }
 
             })
 
         })
 
 
         // 轮播图
 
         if ($('.swiper-preview').length > 0) {
 
-            new Swiper('.swiper-preview', {
 
+            var unit = 'px',
 
+                // halfWidth = 654,
 
+                halfWidth = 855,
 
+                previewSwiper = null;
 
+            if(isH5 || $('body').width() <= 750 ) {
 
+                unit = 'rem';
 
+                // halfWidth = 9.08;
 
+                halfWidth = 10.8;
 
+            }
 
+            previewSwiper = new Swiper('.swiper-preview', {
 
                 watchSlidesProgress: true,
 
                 slidesPerView: 'auto',
 
                 centeredSlides: true,
 
                 loop: true,
 
                 loopedSlides: 5,
 
+                observer: true,
 
+                observeParents: true,
 
                 autoplay: {
 
                     disableOnInteraction: false
 
                 },
 
@@ -509,7 +524,7 @@ var C = {
 
                             if (Math.abs(slideProgress) > 1) {
 
                                 modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
 
                             }
 
-                            var translate = slideProgress * modify * 654 + 'px';
 
+                            var translate = slideProgress * modify * halfWidth + unit;
 
                             var scale = 1 - Math.abs(slideProgress) / 3;
 
                             var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
 
                             slide.transform('translateX(' + translate + ') scale(' + scale + ')');

+ 50 - 14
2019专题/1906跑跑卡丁车专题/src/sass/global.scss
View File 

@@ -100,6 +100,7 @@ body{
 
     padding: 0;
 
 }
 
 .page-index {
 
+    // min-width: 1200px;
 
     overflow: hidden;
 
     position: relative;
 
     a{
 
@@ -115,26 +116,53 @@ body{
 
         height: 938px;
 
         position: relative;
 
         background: url(../img/bg-primary.jpg) top center no-repeat;
 
+        .logo {
 
+            height: 97px;
 
+            width: 272px;
 
+            position: absolute;
 
+            top: 34px;
 
+            left: 50%;
 
+            margin-left: -726px;
 
+            background: url(../img/logo-ppkdc.png) top center no-repeat;
 
+        }
 
         .btns {
 
             padding-top: 663px;
 
             font-size: 0;
 
             text-align: center;
 
+            .btn-wrap {
 
+                display: inline-block;
 
+                vertical-align: top;
 
+                &.welfare-wrap {
 
+                    margin-left: 80px;
 
+                }
 
+                .tip {
 
+                    font-size: 18px;
 
+                    font-weight: bold;
 
+                    color: #fff;
 
+                    line-height: 1;
 
+                    text-align: center;
 
+                    margin-top: 12px;
 
+                    b {
 
+                        color: #f9af44;
 
+                    }
 
+                }
 
+            }
 
             .btn {
 
                 height: 74px;
 
                 width: 333px;
 
                 display: inline-block;
 
                 background: top center no-repeat;
 
                 transition: transform 0.3s;
 
+                vertical-align: top;
 
                 cursor: pointer;
 
                 &:hover {
 
                     transform: translate(0, -5px);
 
                 }
 
                 &.btn-bookgame {
 
-                    background-image: url(../img/btn-bookgame.png?__sprite);
 
+                    background-image: url(../img/btn-bookgame.png);
 
                 }
 
                 &.btn-welfare {
 
-                    margin-left: 80px;
 
-                    background-image: url(../img/btn-welfare.png?__sprite);
 
+                    background-image: url(../img/btn-welfare.png);
 
                 }
 
             }
 
         }
 
@@ -162,8 +190,6 @@ body{
 
                 margin: 16px auto 0;
 
                 background: url(../img/bg-lottery.png) center no-repeat;
 
                 li{
 
-                    height: 200px;
 
-                    width: 200px;
 
                     position: absolute;
 
                     z-index: 1;
 
                     display: table;
 
@@ -234,7 +260,7 @@ body{
 
                             &.bg {
 
                                 height: 100%;
 
                                 width: 100%;
 
-                                background: url(../img/btn-lottery.png?__sprite) center no-repeat;
 
+                                background: url(../img/btn-lottery.png) center no-repeat;
 
                                 transform-origin: 173.5px 195.5px;
 
                             }
 
                             &.text {
 
@@ -244,7 +270,7 @@ body{
 
                                 top: 141px;
 
                                 left: 51px;
 
                                 transform: rotate(0deg);
 
-                                background: url(../img/btn-lottery-text.jpg?__sprite) center no-repeat;
 
+                                background: url(../img/btn-lottery-text.jpg) center no-repeat;
 
                             }
 
                         }
 
                     }
 
@@ -281,18 +307,26 @@ body{
 
         background: url(../img/bg-preview.jpg) top center no-repeat;
 
         .mod-inner{
 
             width: 1180px;
 
-            margin-top: 358px;
 
+            // margin-top: 358px;
 
+            margin-top: 200px;
 
             position: relative;
 
             .swiper-preview {
 
                 ul {
 
                     li {
 
-                        height: 416px;
 
-                        width: 932px;
 
+                        // height: 416px;
 
+                        // width: 932px;
 
+                        height: 597px;
 
+                        width: 1083px;
 
                         box-sizing: border-box;
 
                         border: 2px #69e1ff solid;
 
                         border-radius: 18px;
 
                         overflow: hidden;
 
                         background: #FFD920;
 
+                        img {
 
+                            height: 100%;
 
+                            width: 100%;
 
+                            display: block;
 
+                        }
 
                     }
 
                 }
 
             }
 
@@ -306,11 +340,11 @@ body{
 
                 }
 
                 &.swiper-button-prev {
 
                     left: -9px;
 
-                    background: url(../img/bg-preview-prev.png?__sprite) center no-repeat;
 
+                    background: url(../img/bg-preview-prev.png) center no-repeat;
 
                 }
 
                 &.swiper-button-next {
 
                     right: -9px;
 
-                    background: url(../img/bg-preview-next.png?__sprite) center no-repeat;
 
+                    background: url(../img/bg-preview-next.png) center no-repeat;
 
                 }
 
             }
 
             .pagination-preview {
 
@@ -365,7 +399,7 @@ body{
 
                             top: 50%;
 
                             left: 50%;
 
                             margin: -74px 0 0 -66px;
 
-                            background: url(../img/btn-play.png?__sprite) center no-repeat;
 
+                            background: url(../img/btn-play.png) center no-repeat;
 
                             transition: transform 0.3s;
 
                             cursor: pointer;
 
                             &:hover {
 
@@ -377,6 +411,7 @@ body{
 
                         height: 100%;
 
                         width: 100%;
 
                         display: none;
 
+                        overflow: hidden;
 
                         embed {
 
                             height: 100% !important;
 
                             width: 100%;
 
@@ -581,4 +616,5 @@ body{
 
             outline: none;
 
         }
 
     }
 
-}
 
+}
 
+@import "./wap";

+ 261 - 0
2019专题/1906跑跑卡丁车专题/src/sass/wap.scss
View File 

@@ -0,0 +1,261 @@
 
+@import "base/_mMixins";
 
+@media screen and (max-width: 750px) {
 
+    html body {
 
+        padding-top: 0 !important;
 
+    }
 
+    #dw-topbar, .dwCommonFooter {
 
+        display: none;
 
+    }
 
+    .page-index {
 
+        min-width: 320px;
 
+        .mod-inner {
 
+            width: 100%;
 
+        }
 
+        .mod-primary {
 
+            height: px2rem(700);
 
+            background-size: cover;
 
+            .logo {
 
+                height: px2rem(75);
 
+                width: px2rem(210);
 
+                top: px2rem(10);
 
+                left: px2rem(5);
 
+                margin-left: 0;
 
+                background-size: 100% 100%;
 
+            }
 
+            .btns {
 
+                padding-top: px2rem(490);
 
+                .btn-wrap {
 
+                    &.welfare-wrap {
 
+                        margin-left: px2rem(50);
 
+                    }
 
+                    .tip {
 
+                        margin-top: px2rem(20);
 
+                        font-size: px2rem(24);
 
+                    }
 
+                }
 
+                .btn {
 
+                    height: px2rem(72);
 
+                    width: px2rem(325);
 
+                    background-size: 100% 100%;
 
+                    &:hover {
 
+                        transform: none;
 
+                    }
 
+                    // &.btn-welfare {
 
+                    //     margin-left: px2rem(50);
 
+                    // }
 
+                }
 
+            }
 
+        }
 
+        .mod-luckdraw {
 
+            height: px2rem(840);
 
+            background-size: cover;
 
+            background-position-x: 50.6%;
 
+            .mod-tip {
 
+                font-size: px2rem(16);
 
+                padding-top: px2rem(140);
 
+            }
 
+            .mod-inner {
 
+                .lottery-cot {
 
+                    height: px2rem(615);
 
+                    width: px2rem(615);
 
+                    margin-top: px2rem(6);
 
+                    background-size: 100% 100%;
 
+                    li {
 
+                        &.lottery-item {
 
+                            height: px2rem(150);
 
+                            width: px2rem(150);
 
+                            &.item1 {
 
+                                top: px2rem(15);
 
+                                margin-left: -px2rem(75);
 
+                            }
 
+                            &.item2 {
 
+                                top: px2rem(75);
 
+                                margin-right: -px2rem(235);
 
+                            }
 
+                            &.item3 {
 
+                                top: 50%;
 
+                                right: px2rem(12);
 
+                                margin: -px2rem(75) 0 0 0;
 
+                            }
 
+                            &.item4 {
 
+                                bottom: px2rem(75);
 
+                                margin-right: -px2rem(232);
 
+                            }
 
+                            &.item5 {
 
+                                height: px2rem(120);
 
+                                width: px2rem(120);
 
+                                bottom: px2rem(28);
 
+                                margin-left: -px2rem(60);
 
+                            }
 
+                            &.item6 {
 
+                                bottom: px2rem(75);
 
+                                margin-left: -px2rem(235);
 
+                            }
 
+                            &.item7 {
 
+                                top: 50%;
 
+                                left: px2rem(12);
 
+                                margin: -px2rem(75) 0 0 0;
 
+                            }
 
+                            &.item8 {
 
+                                top: px2rem(75);
 
+                                margin-left: -px2rem(235);
 
+                            }
 
+                        }
 
+                        &.btn-lottery {
 
+                            height: px2rem(267);
 
+                            width: px2rem(251);
 
+                            top: 50%;
 
+                            margin-left: 0;
 
+                            transform: translate(-50%, -px2rem(142));
 
+                            span {
 
+                                &.bg {
 
+                                    background-size: 100% 100%;
 
+                                    transform-origin: 50% px2rem(142);
 
+                                }
 
+                                &.text {
 
+                                    height: px2rem(81);
 
+                                    width: px2rem(179);
 
+                                    background-size: 100% 100%;
 
+                                    top: 50%;
 
+                                    left: 50%;
 
+                                    transform: translate(-50%, -37%);
 
+                                    border-radius: px2rem(15);
 
+                                }
 
+                            }
 
+                        }
 
+                        .content-wrap {
 
+                            .cover {
 
+                                width: px2rem(100);
 
+                                margin: 0 auto;
 
+                                img {
 
+                                    max-width: 95%;
 
+                                    display: block;
 
+                                    margin: 0 auto;
 
+                                }
 
+                            }
 
+                            p {
 
+                                font-size: 12px;
 
+                                margin-top: px2rem(10);
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        }
 
+        .mod-preview {
 
+            height: px2rem(700);
 
+            background-size: cover;
 
+            .mod-inner {
 
+                width: 100%;
 
+                // margin-top: px2rem(280);
 
+                // margin-top: px2rem(260);
 
+                margin-top: px2rem(250);
 
+                .swiper-preview {
 
+                    ul {
 
+                        li {
 
+                            // height: px2rem(300);
 
+                            // width: px2rem(600);
 
+                            height: px2rem(364);
 
+                            width: px2rem(660);
 
+                        }
 
+                    }
 
+                }
 
+                .swiper-btns {
 
+                    height: px2rem(38);
 
+                    width: px2rem(58);
 
+                    margin-top: -px2rem(19);
 
+                    background-size: 100% 100% !important;
 
+                    &.swiper-button-prev {
 
+                        left: px2rem(6);
 
+                    }
 
+                    &.swiper-button-next {
 
+                        right: px2rem(6);
 
+                    }
 
+                }
 
+                .pagination-preview {
 
+                    bottom: -px2rem(38);
 
+                    span {
 
+                        height: px2rem(16);
 
+                        width: px2rem(16);
 
+                        margin: 0 px2rem(8);
 
+                    }
 
+                }
 
+            }
 
+        }
 
+        .mod-video {
 
+            display: none;
 
+            height: px2rem(670);
 
+            background-size: auto px2rem(750);
 
+            .mod-inner {
 
+                padding-top: px2rem(180);
 
+                .video-wrap {
 
+                    height: px2rem(368);
 
+                    width: px2rem(684);
 
+                    margin: 0 auto;
 
+                    span {
 
+                        &.cover {
 
+                            height: px2rem(389);
 
+                            width: px2rem(706);
 
+                            background-size: 100% 100%;
 
+                            top: -px2rem(11);
 
+                            left: -px2rem(11);
 
+                            .btn-play {
 
+                                height: px2rem(97);
 
+                                width: px2rem(86);
 
+                                background-size: 100% 100%;
 
+                                margin: -px2rem(48.5) 0 0 -px2rem(43);
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .ui-popup {
 
+        max-width: 90%;
 
+    }
 
+    .ui-dialog {
 
+        width: 100%;
 
+    }
 
+    // .ui-popup-modal {
 
+    //     width: 90%;
 
+    // }
 
+    .ui-dialog-grid {
 
+        width: 100%;
 
+    }
 
+    .ui-dialog {
 
+        &.popup-tips {
 
+            .ui-dialog-body {
 
+                padding: px2rem(20) px2rem(50);
 
+            }
 
+        }
 
+        &:not(.popup-tips) {
 
+            .ui-dialog-body {
 
+                padding: px2rem(20) px2rem(80);
 
+            }
 
+        }
 
+    }
 
+    // .ui-dialog-body {
 
+    //     // padding: px2rem(20) px2rem(40);
 
+    //     padding: px2rem(20) px2rem(80);
 
+    // }
 
+    .ui-dialog-close {
 
+        width: 36px;
 
+        line-height: 36px;
 
+    }
 
+    .lottery-tip-wrap {
 
+        width: 100%;
 
+        padding-bottom: px2rem(40);
 
+        a {
 
+            font-size: 12px;
 
+        }
 
+        .tip-title {
 
+            font-size: 16px;
 
+            text-align: center;
 
+            line-height: 1.4;
 
+        }
 
+        .lottery-tips {
 
+            margin-top: px2rem(20);
 
+        }
 
+    }
 
+}