万王之王

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

@@ -72,7 +72,24 @@
                     <i class="circle"></i>
                     <span class="line"></span>
                     <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
+                        <img data-src="./img/gif/human-pic1.gif" alt="">
+                    </div>
+                </div>
+                <div class="box-icon bg1-icon2 bg1-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img data-src="./img/gif/human-pic2.gif" alt="">
+                    </div>
+                </div>
+                <div class="box-icon bg1-icon3 bg1-location">
+                    <i class="modal-circle" data-href="#bg1-modal"></i>
+                </div>
+                <div class="box-icon bg1-icon4 bg1-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img data-src="./img/gif/human-pic3.gif" alt="">
                     </div>
                 </div>
                 <!-- bg2 -->
@@ -80,7 +97,7 @@
                     <i class="circle"></i>
                     <span class="line"></span>
                     <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
+                        <img data-src="./img/gif/sou-pic1.gif" alt="">
                     </div>
                 </div>
                 <div class="box-icon bg2-icon2 bg2-location">
@@ -90,67 +107,109 @@
                     <i class="circle"></i>
                     <span class="line"></span>
                     <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
+                        <img data-src="./img/gif/sou-pic2.gif" alt="">
                     </div>
                 </div>
                 <div class="box-icon bg2-icon4 bg2-location">
                     <i class="circle"></i>
                     <span class="line"></span>
                     <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
+                        <img data-src="./img/gif/sou-pic3.gif" alt="">
                     </div>
                 </div>
                 <!-- bg3 -->
                 <div class="box-icon bg3-icon1 bg3-location">
-                    <i class="circle"></i>
-                    <span class="line"></span>
-                    <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
-                    </div>
+                    <i class="video-circle" data-href="#bg3-video1"></i>
                 </div>
                 <div class="box-icon bg3-icon2 bg3-location">
+                    <i class="modal-circle" data-href="#bg3-modal"></i>
+                </div>
+                <div class="box-icon bg3-icon3 bg3-location">
+                    <i class="video-circle" data-href="#bg3-video2"></i>
+                </div>
+                <div class="box-icon bg3-icon4 bg3-location">
+                    <i class="video-circle" data-href="#bg3-video3"></i>
+                </div>
+                
+                <!-- bg4 -->
+                <div class="box-icon bg4-icon1 bg4-location">
                     <i class="circle"></i>
                     <span class="line"></span>
                     <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
+                        <img data-src="./img/gif/sprite-pic1.gif" alt="">
                     </div>
                 </div>
-                <div class="box-icon bg3-icon3 bg3-location">
+                <div class="box-icon bg4-icon2 bg4-location">
                     <i class="circle"></i>
                     <span class="line"></span>
                     <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
+                        <img data-src="./img/gif/sprite-pic2.gif" alt="">
                     </div>
                 </div>
-                <div class="box-icon bg3-icon4 bg3-location">
+                <div class="box-icon bg4-icon3 bg4-location">
+                    <i class="modal-circle" data-href="#bg4-modal"></i>
+                </div>
+                <div class="box-icon bg4-icon4 bg4-location">
                     <i class="circle"></i>
                     <span class="line"></span>
                     <div class="gif-cover">
-                        <img src="./img/p2-bg.jpg" alt="">
+                        <img data-src="./img/gif/sprite-pic3.gif" alt="">
                     </div>
                 </div>
                 
                 <!-- 弹窗 -->
+                <div class="p2-modal" id="bg1-modal">
+                    <i class="modal-close-icon"></i>
+                    <img class="top-img" src="./img/p3-name1.png" alt="">
+                    <h3 class="title">以剑之名，不惧不退</h3>
+                    <p class="text">《因黑暗诅咒而被迫外迁的精灵部族，历经无数磨难后，蜕变为信仰圣光的“人类”一族，创造了繁荣文明。</p>
+                    <h3 class="title">以剑之名，不惧不退</h3>
+                    <p class="text">黑暗，自上古战争后，便从未停止过对这个世界的侵袭。总有坠入黑暗的堕落者，试图为黑暗找寻新的代理人。</p>
+                    <p class="text">当精灵族创建了繁荣的文明，黑暗的爪牙将目光投向了这个高贵而文明的种族。黑暗力量的诅咒，在一支精灵部族中悄然扎根，折磨着他们的精神与肉体。他们与自然的联系越来越弱，被精灵族视为异类，最终只能举族迁徙，在冰雪覆盖的大陆上寻求新的生机。</p>
+                    <p class="text">这批外迁的精灵族人，最终定居在坦格拉美亚大陆的东部平原。尽管环境残酷，凭借着坚强、毅力与努力，逐渐分散到大陆各地的他们，终于顽强地生存了下来。他们的体型不再修长，寿命不再长久，他们开始自称――“人类”</p>
+                </div>
                 <div class="p2-modal" id="bg2-modal">
                     <i class="modal-close-icon"></i>
-                    <h3 class="title">简介</h3>
-                    <p class="text">《万王之王3D》不删档即将在本月下旬到来，魔幻新世界即将开启，史诗盛宴即将呈现，勇士们准备好踏入
-                            坦格拉美亚组队开荒了吗？话说，游戏不删档开启在即，在不删档前我们能参加游戏各渠道开启的哪些福利
-                            活动，领取丰厚的活动礼包、在游戏开测时先人一步呢？
-                            在此活动中，勇士们仅需通过上述链接预约游戏，预约成功即可获得价值200元的预约礼包。礼包包含克朗*
-                            10w、绒布包*1、坐骑：地狱战马*1。除此之外，在此活动中还可通过邀请好友、签到、关注兴趣部落、绑
-                            定手机等方式获得史诗点，集齐一定史诗点即可在史诗商城兑换精通升级礼包、圣印礼包、高级宝石礼包等
-                            游戏珍稀道具礼包，史诗点还可用于抽奖。
-                            除了官网，QQ游戏中心同样开启了《万王之王3D》的游戏福利活动，点击上述链接即可进入此活动中。活
-                            动界面可以预约游戏，预约成功即可获取包含克朗*10w、绒布包*1、坐骑：地狱战马*1、时装皇家卫兵（白
-                            霜)*1的礼包一份。分享此活动并成功邀请好友预约也可在此活动界面领取赤蔷薇*5、佣兵战斗要诀*4、伙伴
-                            ：小企鹅（手Q专属）*1等专享好礼，邀请越多奖励越多。
-                    </p>
-                    <h3 class="title">简介</h3>
-                    <p class="text">《万王之王3D》不删档即将在本月下旬到来，魔幻新世界即将开启，史诗盛宴即将呈现，勇士们准备好踏入
-                            坦格拉美亚组队开荒了吗？话说，游戏不删档开启在即，在不删档前我们能参加游戏各渠道开启的哪些福利
-                            活动，领取丰厚的活动礼包、在游戏开测时先人一步呢？
-                    </p>
+                    <img class="top-img" src="./img/p3-name2.png" alt="">
+                    <h3 class="title">荣耀所指，斧刃所向</h3>
+                    <p class="text">于不毛之地孕育而出的兽人一族，信仰着大地的力量，为了生存，他们唯有不断的战斗，成为真正的强者。</p>
+                    <h3 class="title">人物背景</h3>
+                    <p class="text">上古战争中，巨大的爆炸，令整块古大陆崩裂破碎。虽然火种的力量源源不断地滋润着这个星球，但是远离火种的东部大陆却恢复缓慢。只是，随着岁月的流逝，贫瘠而荒芜的东部大陆――塔米提亚大陆上，兽人悄然诞生。</p>
+                    <p class="text">他们信仰天空，信仰大地，更信仰力量――绝对的力量。要生存下去，就要有充足的资源。东部大陆上资源稀少，为了生存，兽人们早已习惯了长年的战斗。对他们来说，唯有强者，才有资格在这个世界上生存下去……更好地生存下去。</p>
+                    <p class="text">只是，对强大力量的极度推崇，令一批兽人悄然坠入黑暗。从此，塔米提亚大陆陷入了与黑暗的战争中。</p>
+                </div>
+                <div class="p2-modal" id="bg3-modal">
+                    <i class="modal-close-icon"></i>
+                    <img class="top-img" src="./img/p3-name3.png" alt="">
+                    <h3 class="title">赞美火神的胡子</h3>
+                    <p class="text">生来与矿物为伍的矮人一族，在火神的引领下，逐渐掌握了先进的蒸汽科技，试图重现矮人文明的辉煌时代。</p>
+                    <h3 class="title">人物背景</h3>
+                    <p class="text">上古战争，改变了大陆的地貌，山脉隆起，山峦叠生。自群山中，诞生了一批与矿物结下不解之缘的物种――矮人。</p>
+                    <p class="text">矮人们拥有强健的体魄，喜欢石矿，喜欢金属，对黄金有着疯狂的热爱，更是天生对冶炼拥有极高的天赋。凭借群山中寻找到的矿脉以及高超的冶炼技艺，他们曾创造出伟大的矮人文明。</p>
+                    <p class="text">但是，随着巨大龙晶矿脉的发现，矮人的疯狂开采，惊醒了沉睡在矿脉下的上古巨兽――泰丰。虽然最终，矮人们团结一致战胜了泰丰，但矮人原有的文明，也在与泰丰的对抗中破坏殆尽。“泰丰的血脉诅咒”亦成为矮人无法摆脱的重担――男矮人将拥有极不对称的四肢与躯体，而女矮人，她们的身体，将永远停留在14岁。</p>
+                </div>
+                <div class="p2-modal" id="bg4-modal">
+                    <i class="modal-close-icon"></i>
+                    <img class="top-img" src="./img/p3-name4.png" alt="">
+                    <h3 class="title">捍卫风的信仰</h3>
+                    <p class="text">崇尚自然与元素的精灵一族诞生于北方丛林，文明日益衰退的精灵部族，在风神的庇佑下，寻求复兴。</p>
+                    <h3 class="title">人物背景</h3>
+                    <p class="text">自上古战争之后，时间过去万年。世界初火的力量，令整个星球渐渐从战争的创伤中恢复。北方林地重现生机，并越发繁茂。在林地中，诞生了崇尚自然与元素的物种――精灵。</p>
+                    <p class="text">精灵族世代在自然中寻求共处与平衡，并曾经创造了无比繁荣的精灵文明。但随着气候变迁，迷雾渐渐笼罩，精灵族与自然元素的联系逐渐减弱。在从冰封的坦格拉美亚大陆寻找并迎回火种后，精灵族终于迎来了恢复的契机。然而，由于盗火者出现，试图盗取火种，最终不幸引发了巨大的爆炸。爆炸使精灵所在的陆地再次分崩离析，只有风神阿蒂诺斯守护下的轻语森林，得以从中幸免。</p>
+                </div>
+
+                <!-- video -->
+                <div class="p2-video" id="bg3-video1">
+                    <i class="video-close-icon"></i>
+                    <video preload="metadata" controls class="bg3-video" id="p2-video1"></video>
+                </div>
+                <div class="p2-video" id="bg3-video2">
+                    <i class="video-close-icon"></i>
+                    <video preload="metadata" controls class="bg3-video" id="p2-video2"></video>
+                </div>
+                <div class="p2-video" id="bg3-video3">
+                    <i class="video-close-icon"></i>
+                    <video preload="metadata" controls class="bg3-video" id="p2-video3"></video>
                 </div>
                 <div class="p2-bottom-tab">
                     <div class="two-line"></div>

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

@@ -36,8 +36,6 @@ var V = {
           }
 
           if(this.activeIndex == 3) {
-            // document.getElementById('p4-video').play()
-
             C.handleP4()
           } else {
             document.getElementById('p4-video').pause()
@@ -45,7 +43,6 @@ var V = {
 
           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;
@@ -62,15 +59,24 @@ var V = {
         },
       },  
     })
+
+    $('.pub-nav-box').on('click', '.nav-item', function() {
+      var navInd = $('.nav-item').index(this)
+      $(this).addClass('current').siblings().removeClass('current')
+      swiper.slideTo(navInd)
+    })
   },
   getVideoSource() {
-    let vids = ['8889311','8891835','8896619','8896621','8896623']
+    let vids = ['8939171','8891835','8939265','8896621','8939173','8888909','8889311','8886755']
     let videoMap = {
-        '8889311': 'game-video',
+        '8939171': 'game-video',
         '8891835': 'p4-video',
-        '8896619': 'p5-video1',
+        '8939265': 'p5-video1',
         '8896621': 'p5-video2',
-        '8896623': 'p5-video3',
+        '8939173': 'p5-video3',
+        '8888909': 'p2-video1',
+        '8889311': 'p2-video2',
+        '8886755': 'p2-video3',
     }
     $.ajax({
         type: "GET",
@@ -110,8 +116,33 @@ var C = {
       }
     })
 
+    // video-circle
+    function pauseVideo() {
+      $('.bg3-video').each(function() {
+        $(this)[0].pause()
+      })
+    }
+
+    $('.video-circle').click(function() {
+      var id = $(this).attr('data-href')
+      $(id).fadeIn()
+      $('.mask').show()
+      $(id).find('video')[0].play()
+    })
+
+    $('.video-close-icon').click(function() {
+      $('.mask').hide()
+      $('.p2-video').fadeOut()
+      pauseVideo()
+    })
+
     // gif出现
     $('.circle').click(function() {
+
+      var $img = $(this).parent().find('img')
+      var imgSrc = $img.attr('data-src')
+      $img.attr('src', imgSrc)
+
       $(this).parent().addClass('on').css('zIndex', '6')
       $('.mask').show()
       return false
@@ -154,12 +185,9 @@ var C = {
       $('.mask').hide()
       $('.box-icon').removeClass('on').css('zIndex', '1')
       $('.p2-modal').fadeOut()
+      $('.p2-video').fadeOut()
+      pauseVideo()
     })
-
-    // $('.box-icon').click(function() {
-    //   $('.mask').hide()
-    //   $('.box-icon').removeClass('on').css('zIndex', '1')
-    // })
   },
   // p3相关
   handleP3() {

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

@@ -75,6 +75,7 @@ body {
         font-size: 0;
         line-height: px2rem(20);
         margin-bottom: px2rem(40);
+        cursor: pointer;
         &:last-child{
             margin-bottom: 0;
             &::after{

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

@@ -34,7 +34,7 @@
 }
 .box-icon{
     position: absolute;
-    z-index: 4;
+    z-index: 1;
     // width: px2rem(500);
     // height: px2rem(200);
     .circle{
@@ -63,6 +63,19 @@
             box-shadow: #37ced4;
         }
     }
+    .video-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;
@@ -106,8 +119,33 @@
     }
 }
 .bg1-icon1{
-    left: px2rem(579);
-    top: px2rem(640);
+    left: px2rem(580);
+    top: px2rem(75);
+    .gif-cover{
+        top: -px2rem(20);
+    }
+}
+.bg1-icon2{
+    left: px2rem(1475);
+    top: px2rem(422);
+    .line{
+        left: -px2rem(120);
+    }
+    .gif-cover{
+        left: -px2rem(550);
+        top: -px2rem(200);
+    }
+}
+.bg1-icon3{
+    left: px2rem(360);
+    top: px2rem(743);
+}
+.bg1-icon4{
+    left: px2rem(654);
+    top: px2rem(730);
+    .gif-cover{
+        top: -px2rem(200);
+    }
 }
 
 .bg2-icon1{
@@ -157,6 +195,29 @@
     top: px2rem(381);
 }
 
+.bg4-icon1{
+    left: px2rem(658);
+    top: px2rem(694);
+    .gif-cover{
+        top: -px2rem(200);
+    }
+}
+.bg4-icon2{
+    left: px2rem(1130);
+    top: px2rem(620);
+    .gif-cover{
+        top: -px2rem(200);
+    }
+}
+.bg4-icon3{
+    left: px2rem(1038);
+    top: px2rem(490);
+}
+.bg4-icon4{
+    left: px2rem(404);
+    top: px2rem(440);
+}
+
 .bg2-location{
     display: none;
 }
@@ -207,7 +268,17 @@
     background-size: 100%;
     width: px2rem(650);
     height: px2rem(700);
+    // width: 522px;
+    // height: 560px;
     padding: px2rem(40);
+    .top-img{
+        display: block;
+        width: px2rem(300);
+        // width: 300px;
+        position: relative;
+        left: -px2rem(30);
+        // left: 30px;
+    }
     .title{
         font-size: 20px;
         color: #eed1a0;
@@ -215,8 +286,9 @@
     }
     .text{
         font-size: 14px;
-        line-height: 1.6;
+        line-height: 1.7;
         color: #cac5bb;
+        text-indent: 2em;
     }
     .modal-close-icon{
         position: absolute;
@@ -280,4 +352,33 @@
             color: #ffcf85;
         }
     }
+}
+
+.p2-video{
+   display: none;
+   position: absolute;
+   z-index: 10;
+   left: 50%;
+   top: 50%;
+   border: 2px solid #ffcf85;
+   width: px2rem(1000);
+//    height: px2rem(600);
+   transform: translate(-50%, -50%);
+   background-color: #141414;
+   .video-close-icon{
+        position: absolute;
+        z-index: 20;
+        top: px2rem(10);
+        right: px2rem(10);
+        background: url('../../img/modal-close-icon.png') center center no-repeat;
+        background-size: 100%;
+        width: px2rem(48);
+        height: px2rem(48);
+        cursor: pointer;
+    }
+}
+
+.bg3-video{
+    width: 100%;
+    height: auto;
 }