万王之王

2018专题/1808万王之王专题-商务/src/_index.html

@@ -7,8 +7,8 @@
     <meta name="force-rendering" content="webkit">
     <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,chrome=1">
-    <meta name="description" content="多玩游戏，多玩图库，图库小程序，囧图，搞笑GIF">
-    <meta name="keywords" content="图库小程序，囧图，搞笑GIF">
+    <meta name="description" content="万王之王">
+    <meta name="keywords" content="万王之王">
     <script src="/src/lib/rem.js"></script><!--ignore-->
     <link href="sass/global.scss" rel="stylesheet">
 </head>
@@ -58,10 +58,12 @@
         <div class="swiper-wrapper">
             <div class="swiper-slide p1">
                 <img class="main-text" src="./img/p1-logo.png" alt="">
-                <video class="full-video" autoplay loop id="game-video"></video>
+                <video class="p1-video" autoplay loop id="game-video"></video>
                 <div class="arrow-down-icon"></div>
             </div>
             <div class="swiper-slide p2 tab1-bg">
+                <!-- 喇叭 -->
+                <i class="audio-icon on" id="audio-control"></i>
                 <!-- 遮罩 -->
                 <div class="mask"></div>
                 <!-- 坐标 -->
@@ -82,11 +84,7 @@
                     </div>
                 </div>
                 <div class="box-icon bg2-icon2 bg2-location">
-                    <i class="circle"></i>
-                    <span class="line"></span>
-                    <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
-                    </div>
+                    <i class="modal-circle" data-href="#bg2-modal"></i>
                 </div>
                 <div class="box-icon bg2-icon3 bg2-location">
                     <i class="circle"></i>
@@ -133,7 +131,7 @@
                 </div>
                 
                 <!-- 弹窗 -->
-                <div class="p2-modal">
+                <div class="p2-modal" id="bg2-modal">
                     <i class="modal-close-icon"></i>
                     <h3 class="title">简介</h3>
                     <p class="text">《万王之王3D》不删档即将在本月下旬到来，魔幻新世界即将开启，史诗盛宴即将呈现，勇士们准备好踏入
@@ -444,20 +442,94 @@
             <div class="swiper-slide p4">
                 <div class="cartoon-box">
                     <div class="cartoon1 animated delay-200"></div>
-                    <div class="cartoon2 animated delay-400"></div>
+                    <div class="cartoon2 animated delay-800"></div>
                     <div class="cartoon3 animated delay-600"></div>
-                    <div class="cartoon4 animated delay-800"></div>
+                    <div class="cartoon4 animated delay-400"></div>
                 </div>
                 <div class="cover-bg"></div>
                 <div class="p4-video-wrapper">
-                    <video id="p4-video" preload="metadata"></video>
+                    <video class="animated delay-1000" id="p4-video" preload="metadata"></video>
                 </div>
                 <div class="control-box">
                     <div class="play-icon"></div>
                 </div>
             </div>
             <div class="swiper-slide p5">
-                5
+                <video class="full-video" id="p5-video1" loop preload="metadata"></video>
+                <video style="display: none;" class="full-video" id="p5-video2" loop preload="metadata"></video>
+                <video style="display: none;" class="full-video" id="p5-video3" loop preload="metadata"></video>
+                <div class="p5-bottom-tab">
+                    <div class="two-line"></div>
+                    <div class="tab-item cur-tab" data-video="1">家园建造</div>
+                    <div class="tab-item" data-video="2">自由飞行</div>
+                    <div class="tab-item" data-video="3">指尖开荒</div>
+                </div>
+            </div>
+            <div class="swiper-slide p6">
+                <div class="scroll-main" id="scroll-main">
+                    <div class="main-banner clearfix">
+                        <img class="poster" src="./img/p3-bg2.jpg" alt="">
+                        <div class="main-info">
+                            <h3 class="title">十八年经典，共造新世界</h3>
+                            <p class="text">在游戏中，第一重要的自然要数经验了，只有经验值够了，才能让我们快速升级，
+                                进而解锁游戏的一些其他功能。所以初入<span>游戏的萌新</span>，首先不能错过的就是主线
+                                任务，主线任务不仅可以给萌新带来巨额的游戏经验，还会帮助<span>萌新</span>快速了解整
+                                个游戏世界。其次就是日常任务中的各种活动啦，参加活动既可以获得经验，还
+                                可以获得游戏中必须的珍贵道具和装备。</p>
+                        </div>
+                    </div>
+                    <div class="main-intro">
+                        <h3 class="title">一级标题</h3>
+                        <div class="text">除了<span>经验等级</span>，萌新在游戏中的战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。</div>
+                        <img src="./img/example-pic.jpg" class="center-img" alt="">
+                        <div class="text">
+                            除了经验等级，萌新在游戏中的战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备<span>经验等级</span>上的属性洗炼到等级高的装备上，这样才能算是物尽其用。除了经验等级，萌新在游戏中的
+                            战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中.
+                            装备等级由低至高分别是白色、绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴
+                            导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。除了经验等级，萌新在游戏中的
+                            战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                        </div>
+                        <h3 class="title">一级标题</h3>
+                        <div class="text">除了<span>经验等级</span>，萌新在游戏中的战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。</div>
+                        <img src="./img/example-pic.jpg" class="center-img" alt="">
+                        <div class="text">
+                            绿色、蓝色、紫色、橙色，了解了这些<span>经验等级</span>颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，除了经验等级，萌新在游戏中的战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等<span>经验等级</span>装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。除了经验等级，萌新在游戏中的
+                            战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中.
+                            装备等级由低至高分别是白色、绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴
+                            导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。除了经验等级，萌新在游戏中的
+                            战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide p7">
+                <div class="animBox">
+                    <img src="./img/p7-circle1.png" alt="" class="dial1">
+                    <img src="./img/p7-circle2.png" alt="" class="dial2">
+                    <img src="./img/p7-logo.png" alt="" class="slogan">
+                    <div class="kv-order-box">
+                        <div class="order-kv-num">
+                            <span id="Show_allRsvtNum">5119843</span>
+                        </div>
+                        <p>|当前官网预约人数|</p>
+                    </div>
+                </div>
+                <div class="btn-box">
+                    <a href="javascript:" class="game-btn game-btn-web"></a>
+                    <a href="javascript:" class="game-btn game-btn-test"></a>
+                    <a href="javascript:" class="game-btn game-btn-back"></a>
+                </div>
             </div>
         </div>
         <!-- Add Pagination -->

2018专题/1808万王之王专题-商务/src/modules/page/index.js

@@ -5,6 +5,10 @@ __inline('../../json/skill.js');
 
 var swiper 
 
+var p5Video1 = document.getElementById('p5-video1')
+var p5Video2 = document.getElementById('p5-video2')
+var p5Video3 = document.getElementById('p5-video3')
+
 var V = {
   init() {
     this.getVideoSource()
@@ -12,7 +16,6 @@ var V = {
   },
   initSwiper() {
     swiper = new Swiper('.swiper-container', {
-      initialSlide :3,
       direction: 'vertical',
       mousewheel: true,
       allowTouchMove: false,
@@ -33,31 +36,48 @@ var V = {
           }
 
           if(this.activeIndex == 3) {
-            document.getElementById('p4-video').play()
-            // if(!$('.cartoon1').hasClass('bounceInLeft')){
-            //   $('.cartoon1').addClass('bounceInLeft')
-            //   $('.cartoon2').addClass('bounceInUp')
-            //   $('.cartoon3').addClass('bounceInRight')
-            //   $('.cartoon4').addClass('bounceInDown')
-            // }
+            // document.getElementById('p4-video').play()
+
+            C.handleP4()
           } else {
             document.getElementById('p4-video').pause()
           }
+
+          if(this.activeIndex == 4) {
+            var p5Ind = $('.p5-bottom-tab').find('.cur-tab').attr('data-video')
+            console.log(p5Ind)
+            switch (Number(p5Ind)) {
+              case 1: p5Video1.play()
+                      break;
+              case 2: p5Video2.play()
+                      break;
+              case 3: p5Video3.play()
+                      break;
+            }
+          } else {
+            p5Video1.pause()
+            p5Video2.pause()
+            p5Video3.pause()
+          }
         },
       },  
     })
   },
   getVideoSource() {
-    let vids = ['8889311','8896635']
+    let vids = ['8889311','8891835','8896619','8896621','8896623']
     let videoMap = {
         '8889311': 'game-video',
-        '8896635': 'p4-video',
+        '8891835': 'p4-video',
+        '8896619': 'p5-video1',
+        '8896621': 'p5-video2',
+        '8896623': 'p5-video3',
     }
     $.ajax({
         type: "GET",
         dataType: "json",
         url: `//video.duowan.com/jsapi/playPageVideoInfo/?vids=${vids.join(',')}`,
         success: function(data) {
+            // console.log(data)
             for(var i in data) {
                 let resouce = deCodeArg(data[i].c).all,
                     source = resouce.yuanhua || resouce[1300] || resouce[1000] || resouce[350]
@@ -67,10 +87,6 @@ var V = {
             }
         }
     })
-
-      // document.getElementById('bg-video').addEventListener('play', function() {
-        
-      // })
   }
 }
 
@@ -78,18 +94,39 @@ var C = {
   init() {
     this.circleClick()
     this.handleP3()
+    this.handleP5()
+    this.handleP6()
   },
   // p2相关
   circleClick() {
+    // 喇叭
+    $('#audio-control').click(function() {
+      var $this = $(this)
+      var classOn = $this.hasClass('on')
+      if(classOn) {
+        $this.removeClass('on').addClass('off')
+      } else {
+        $this.removeClass('off').addClass('on')
+      }
+    })
+
+    // gif出现
     $('.circle').click(function() {
       $(this).parent().addClass('on').css('zIndex', '6')
       $('.mask').show()
       return false
     })
 
+    // 弹窗出现
+    $('.modal-circle').click(function() {
+      var id = $(this).attr('data-href')
+      $(id).fadeIn()
+      $('.mask').show()
+    })
+
     $('.modal-close-icon').click(function() {
       $('.mask').hide()
-      $('.box-icon').removeClass('on')
+      $('.p2-modal').fadeOut()
     })
     
     // p2底部tab
@@ -116,15 +153,17 @@ var C = {
     $('.mask').click(function() {
       $('.mask').hide()
       $('.box-icon').removeClass('on').css('zIndex', '1')
+      $('.p2-modal').fadeOut()
     })
-    $('.box-icon').click(function() {
-      $('.mask').hide()
-      $('.box-icon').removeClass('on').css('zIndex', '1')
-    })
+
+    // $('.box-icon').click(function() {
+    //   $('.mask').hide()
+    //   $('.box-icon').removeClass('on').css('zIndex', '1')
+    // })
   },
   // p3相关
   handleP3() {
-    $('.human-tab').on('mouseenter', '.human-tab-item', function() {
+    $('.human-tab').on('click', '.human-tab-item', function() {
 
       var ind = $('.human-tab-item').index(this)
       var classInd = ind + 1
@@ -232,6 +271,75 @@ var C = {
       // PTTSendClick('btn', 'skill_' + indexRole + '_job_' + index, '技能_' + indexRole + '_职业_' + index);
     }
 
+  },
+  // p4相关
+  handleP4() {
+    $('.cartoon1').addClass('bounceInLeft')
+    $('.cartoon2').addClass('bounceInUp')
+    $('.cartoon3').addClass('bounceInRight')
+    $('.cartoon4').addClass('bounceInDown')
+    $('#p4-video').addClass('fadeIn')
+
+    var playFlag = false // p4播放标识
+    var p4Video = document.getElementById('p4-video')
+    p4Video.play()
+    $('.play-icon').hide()
+    playFlag = true
+
+    $('.control-box').click(function() {
+      if(playFlag) {
+        p4Video.pause()
+        $('.play-icon').show()
+      } else {
+        p4Video.play()
+        $('.play-icon').hide()
+      }
+      playFlag = !playFlag
+    })
+
+    p4Video.addEventListener('ended', function() {
+      p4Video.currenttime = 0
+      playFlag = false
+      $('.play-icon').show()
+    })
+  },
+  // p5相关
+  handleP5() {
+    function videoPause() {
+      p5Video1.pause()
+      p5Video2.pause()
+      p5Video3.pause()
+    }
+    // p5底部tab
+    $('.p5-bottom-tab').on('click', '.tab-item', function() {
+      $(this).addClass('cur-tab').siblings().removeClass('cur-tab')
+      var ind = $(this).attr('data-video')
+      videoPause()
+      $('.full-video').hide()
+      if(ind == 1) {
+        $(p5Video1).show()
+        p5Video1.play()
+      }      
+      if(ind == 2) {
+        $(p5Video2).show()
+        p5Video2.play()
+      }      
+      if(ind == 3) {
+        $(p5Video3).show()
+        p5Video3.play()
+      }      
+    })
+  },
+  // p6相关
+  handleP6() {
+    var scrollMain = document.getElementById('scroll-main')
+    scrollMain.addEventListener('mousewheel', function(e) {
+      if (e) {
+        e.stopPropagation();
+      } else {
+        window.event.cancelBubble = true;
+      }
+    })
   }
 }
 

2018专题/1808万王之王专题-商务/src/sass/global.scss

@@ -15,6 +15,9 @@ $pingfan:PingFangSC-Regular;
 @import "module/page2";
 @import "module/page3";
 @import "module/page4";
+@import "module/page5";
+@import "module/page6";
+@import "module/page7";
 
 html {
     height: 100%; // overflow-y: scroll;

2018专题/1808万王之王专题-商务/src/sass/module/page1.scss

@@ -3,13 +3,13 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        width: px2rem(896);
-        height: px2rem(173);
-        margin-left: -px2rem(498);
-        margin-top: -px2rem(87);
+        width: px2rem(1344);
+        height: px2rem(260);
+        margin-left: -px2rem(672);
+        margin-top: -px2rem(130);
     }
 }
-.full-video{
+.p1-video{
     width: 100%;
     height: auto;
     object-fit: fill;

2018专题/1808万王之王专题-商务/src/sass/module/page2.scss

@@ -1,6 +1,20 @@
 .p2{
     position: relative;
     transition: all .3s ease-in-out;
+    .audio-icon{
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 57px;
+        height: 56px;
+        cursor: pointer;
+        &.on{
+            background: url('../../img/audio-normal-icon.png?__sprite') center center no-repeat;
+        }
+        &.off{
+            background: url('../../img/audio-disable-icon.png?__sprite') center center no-repeat;
+        }
+    }
 }
 .tab1-bg{
     background: url('../../img/p2-bg1.jpg') top center no-repeat;
@@ -36,20 +50,35 @@
             box-shadow: #37ced4;
         }
     }
+    .modal-circle {
+        position: absolute;
+        width: px2rem(20);
+        height: px2rem(20);
+        background-color: #ffffff;
+        border-radius: 50%;
+        border: 1px solid #141414;
+        cursor: pointer;
+        &:hover{
+            background-color: #37ced4;
+            box-shadow: #37ced4;
+        }
+    }
     .gif-cover{
+        display: none;
         position: absolute;
         z-index: 5;
         opacity: 0;
         width: px2rem(430);
         border: 2px solid #cfb370;
         left: px2rem(140);
-        top: px2rem(-40);
+        top: px2rem(-100);
         img{
             width: 100%;
             height: auto;
         }
     }
     .line{
+        display: none;
         width: 0;
         border-top: 2px dotted #cfb370;
         position: absolute;
@@ -58,16 +87,22 @@
     }
     &.on{
         .gif-cover{
+            display: block;
             animation: opaAnima .5s linear forwards;
             animation-delay: .5s;
         }
         .line{
+            display: block;
             animation: widthAnima .5s linear forwards;
         }
         .circle{
             background-color: #37ced4;
             box-shadow: #9ee5e7;
         }
+        .modal-circle{
+            background-color: #37ced4;
+            box-shadow: #9ee5e7;
+        }
     }
 }
 .bg1-icon1{
@@ -78,6 +113,9 @@
 .bg2-icon1{
     left: px2rem(490);
     top: px2rem(750);
+    .gif-cover{
+        top: -px2rem(200);
+    }
 }
 .bg2-icon2{
     left: px2rem(627);
@@ -86,10 +124,20 @@
 .bg2-icon3{
     left: px2rem(1027);
     top: px2rem(612);
+    .gif-cover{
+        top: -px2rem(200);
+    }
 }
 .bg2-icon4{
     left: px2rem(1390);
     top: px2rem(677);
+    .line{
+        left: -px2rem(120);
+    }
+    .gif-cover{
+        left: -px2rem(550);
+        top: -px2rem(200);
+    }
 }
 
 .bg3-icon1{
@@ -184,12 +232,14 @@
 
 .p2-bottom-tab{
     position: absolute;
-    z-index: 10;
+    z-index: 1;
     left: 0;
     right: 0;
-    bottom: px2rem(18);
+    bottom: 0;
     text-align: center;
     font-size: 0;
+    background-color: #272725;
+    opacity: .8;
     .two-line{
         width: 100%;
         height: 4px;
@@ -211,16 +261,23 @@
             content: '';
             display: none;
             position: absolute;
-            width: px2rem(52);
-            height: px2rem(26);
-            background: url('../../img/p2-current-icon.png') center center no-repeat;
+            width: px2rem(67);
+            height: px2rem(42);
+            background: url('../../img/p2-select-icon.png') center center no-repeat;
             background-size: 100%;
-            top: -6px;
+            top: -12px;
             left: 50%;
-            margin-left: -px2rem(26);
+            margin-left: -px2rem(33);
+        }
+        &:hover::after{
+            display: block;
+            background-image: url('../../img/p2-current-icon1.png');
         }
         &.cur-tab:after{
             display: block;
         }
+        &.cur-tab{
+            color: #ffcf85;
+        }
     }
 }

2018专题/1808万王之王专题-商务/src/sass/module/page3.scss

@@ -32,7 +32,10 @@
         cursor: pointer;
         transition: .3s all linear;
         &.hover{
-            transform: scale(1.2);
+            transform: scale(1.3);
+        }
+        &:hover{
+            transform: scale(1.3);
         }
     }
     #changeBg1{

2018专题/1808万王之王专题-商务/src/sass/module/page4.scss

@@ -76,6 +76,7 @@
     right: px2rem(410);
     height: px2rem(674);
     z-index: 10;
+    cursor: pointer;
     .play-icon{
         display: none;
         position: absolute;
@@ -103,3 +104,6 @@
 .delay-800 {
     animation-delay: .8s;
 }
+.delay-1000 {
+    animation-delay: 1s;
+}

2018专题/1808万王之王专题-商务/src/sass/module/page5.scss

@@ -0,0 +1,56 @@
+.p5-bottom-tab{
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    font-size: 0;
+    background-color: #272725;
+    opacity: .8;
+    .two-line{
+        width: 100%;
+        height: 4px;
+        border-top: 1px solid #a19676;
+        border-bottom: 1px solid #a19676;
+    }
+    .tab-item{
+        display: inline-block;
+        vertical-align: top;
+        width: px2rem(160);
+        height: px2rem(60);
+        line-height: px2rem(60);
+        font-size: px2rem(16);
+        color: #efd4ac;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+        &:after{
+            content: '';
+            display: none;
+            position: absolute;
+            width: px2rem(67);
+            height: px2rem(42);
+            background: url('../../img/p2-select-icon.png') center center no-repeat;
+            background-size: 100%;
+            top: -12px;
+            left: 50%;
+            margin-left: -px2rem(33);
+        }
+        &:hover::after{
+            display: block;
+            background-image: url('../../img/p2-current-icon1.png');
+        }
+        &.cur-tab:after{
+            display: block;
+        }
+        &.cur-tab{
+            color: #ffcf85;
+        }
+    }
+}
+.full-video{
+    width: 100%;
+    height: auto;
+    object-fit: fill;
+}

2018专题/1808万王之王专题-商务/src/sass/module/page6.scss

@@ -0,0 +1,82 @@
+.p6{
+    background: url('../../img/p6-bg.jpg') center top no-repeat;
+    .main-banner{
+        padding: px2rem(15);
+        border: 2px solid #cfb370;
+        background-color: #212121;
+        .poster{
+            float: left;
+            width: px2rem(430);
+        }
+        .main-info{
+            float: right;
+            width: px2rem(680);
+            margin-right: px2rem(20);
+            .title{
+                color: #ceb86c;
+                font-size: px2rem(46);
+                margin-bottom: px2rem(26);
+                text-align: center;
+                padding-top: px2rem(15);
+            }
+            .text{
+                font-size: px2rem(18);
+                color: #cac5bb;
+                line-height: 1.6;
+                span{
+                    color: #bd9466;
+                }
+            }
+        }
+    }
+    .main-intro{
+        .title{
+            color: #eed1a0;
+            font-size: px2rem(20);
+            font-weight: bold;
+            margin-bottom: px2rem(26);
+            margin-top: px2rem(46);
+        }
+        .text{
+            font-size: px2rem(18);
+            margin-bottom: px2rem(20);
+            color: #cac5bb;
+            line-height: 1.7;
+            span{
+                color: #bd9466;
+            }
+        }
+        .center-img{
+            display: block;
+            width: px2rem(330);
+            margin: px2rem(30) auto;
+        }
+    }
+}
+.scroll-main{
+    position: absolute;
+    top: px2rem(50);
+    bottom: px2rem(50);
+    width: px2rem(1280);
+    padding: 0 px2rem(40);
+    left: 50%;
+    margin-left: -px2rem(600);
+    box-sizing: border-box;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+        width: px2rem(10);
+        height: 1px;
+        cursor: pointer
+    }
+    &::-webkit-scrollbar-thumb {
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
+        background: #bd9466
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: #bd9466
+    }
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
+        background: #212121
+    }
+}

2018专题/1808万王之王专题-商务/src/sass/module/page7.scss

@@ -0,0 +1,110 @@
+.p7{
+    background: url('../../img/p7-bg.jpg') center center no-repeat;
+}
+.animBox{
+    width: 36%;
+    margin: 4% auto;
+    height: auto;
+    position: relative;
+}
+.animBox img{position: absolute;}
+.animBox .dial1{
+    top: 0px;
+    width: 100%;
+    animation: animaShun 20s linear infinite;
+    position: relative;
+}
+.animBox .dial2{
+    left: 0%;
+    top: 0%;
+    width: 100%;
+    animation: animaNi 20s linear infinite;
+    transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+}
+.animBox .slogan{
+    width: 100%;
+    top: 22%;
+    left: 0%;
+}
+
+.animBox .kv-order-box{
+    display: block;
+    width: 100%;
+    height: 30%;
+    position: absolute;
+    top: 61%;
+    text-align: center;
+    color: #ffe5ab;
+}
+.animBox .order-kv-num{
+    display: block;
+    background: url('../../img/p7-number-box.png') no-repeat;
+    width: 365px;
+    height: 63px;
+    margin: 0 auto 10px;
+}
+.animBox .order-kv-num span{
+    font-size: 45px;
+    letter-spacing: 26.6px;
+    display: block;
+    position: relative;
+    left: 12px;
+    top: 8px;
+}
+.animBox .kv-order-box p{font-size: 23px;letter-spacing: 4px;font-weight: 700;margin-bottom: 12px;}
+@keyframes animaShun{
+    form{
+        transform: rotate(0deg);
+    }
+    to{
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes animaNi{
+    form{
+        transform: rotate(360deg);
+    }
+    to{
+        transform: rotate(0deg);
+    }
+}
+
+.btn-box{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: px2rem(50);
+    text-align: center;
+    .game-btn{
+        display: inline-block;
+        width: px2rem(210);
+        height: px2rem(71);
+        margin: 0 px2rem(50);
+    }
+    .game-btn-web {
+        background: url('../../img/game-web-btn.jpg') center center no-repeat;
+        background-size: px2rem(198) px2rem(59);
+        &:hover{
+            background: url('../../img/game-web-btn-hover.png') no-repeat;
+            background-size: 100%;
+        }
+    }
+    .game-btn-test {
+        background: url('../../img/game-test-btn.jpg') center center no-repeat;
+        background-size: px2rem(198) px2rem(59);
+        &:hover{
+            background: url('../../img/game-test-btn-hover.png') no-repeat;
+            background-size: 100%;
+        }
+    }
+    .game-btn-back {
+        background: url('../../img/game-back-btn.jpg') center center no-repeat;
+        background-size: px2rem(198) px2rem(59);
+        &:hover{
+            background: url('../../img/game-back-btn-hover.png') no-repeat;
+            background-size: 100%;
+        }
+    }
+}