DNF专题

2019专题/1906DNF专题/src/_index.html

@@ -36,10 +36,15 @@
 				<span class="to-top">TOP</span>
 			</div>
 			<div class="mod-primary" id="video-primary">
-				<div class="mod-logo"></div>
+        <div class="mod-logo"></div>
+        <div class="btn-group">
+          <a href="" class="b1"></a>
+          <a href="" class="b2"></a>
+          <a href="" class="b3"></a>
+        </div>
 				<video
 					id="bg-video"
-					src="/src/video/v-primary.mp4"
+					src="/src/video/11.mp4"
 					muted
 					autoplay="autoplay"
 					loop="loop"
@@ -100,19 +105,129 @@
 							</li>
 						</ul>
 						<a href="#" target="_blank" class="item-btn"></a>
-					</div>
+          </div>
+        </div>
+        <div class="btn-lq">
+
+        </div>
+        <div class="tips">
+          <h6>
+            地下城与勇士 新职业礼包 送什么？
+          </h6>
+          <p>
+            兑换礼包后随机获得以下道具其中一种：
+          </p>
+          <p>
+            魔界抗疲劳秘药（20点）*1、厄伽勒变身药水（5个）礼盒*1、远古精灵的秘药（3倍 30分钟）*1、便携式锻造器*1、成长胶囊（20% Lv90~95）*1、
+          </p>
+          <p>
+            精炼的时空石（5个）礼盒*1、异形结晶（30个）礼盒*1、天空之愿（50个）礼盒*1
+          </p>
         </div>
         <div class="mod-title title2"></div>
         <div class="mod-video">
-            <i class="play" data-video='https://v.qq.com/txp/iframe/player.html?vid=x08573848ms'></i>
+            <i class="play" data-video='http://assets.dwstatic.com/video/vpp.swf?uu=a04808d307&vu=&videoId=0&vid=9039375&continous_play=1&auto_play=0&channelId=5253video'></i>
+        </div>
+        <div class="mod-title title3"></div>
+        <div class="mod-news">
+          <div class="news-left">
+            <div class="news-title">
+              <span>游戏视频</span>
+            </div>
+            <div class="video-list">
+              <a href="" class="video-item">
+                <img src="./img//banner.png" alt="">
+                <i class="play"></i>
+                <span>
+                    韩服主播打造成型号一身红三
+                </span>
+              </a>
+              <a href="" class="video-item">
+                  <img src="./img//banner.png" alt="">
+                  <i class="play"></i>
+                  <span>
+                      韩服主播打造成型号一身红三
+                  </span>
+                </a>
+              <a href="" class="video-item">
+                    <img src="./img//banner.png" alt="">
+                    <i class="play"></i>
+                    <span>
+                        韩服主播打造成型号一身红三
+                    </span>
+              </a>
+              <a href="" class="video-item">
+                <img src="./img//banner.png" alt="">
+                <i class="play"></i>
+                <span>
+                    韩服主播打造成型号一身红三韩服主播打造成型号一身红三
+                </span>
+            </a>
+            <a href="" class="video-item">
+                <img src="./img//banner.png" alt="">
+                <i class="play"></i>
+                <span>
+                    韩服主播打造成型号一身红三韩服主播打造成型号一身红三
+                </span>
+            </a>
+            <a href="" class="video-item">
+                <img src="./img//banner.png" alt="">
+                <i class="play"></i>
+                <span>
+                    韩服主播打造成型号一身红三韩服主播打造成型号一身红三
+                </span>
+            </a>
+            </div>
+          </div>
+          <div class="news-right">
+            <div class="news-title">
+              <span>
+                  最新资讯
+              </span>
+            </div>
+            <div class="news-list">
+              <a href="">
+                <span>韩服主播打造成型号一身红三韩服主播打造成型号一身红三</span>
+                <span>06-16</span>
+              </a>
+              <a href="">
+                  <span>韩服主播打造成型号一身红三韩服主播打造成型号一身红三</span>
+                  <span>06-16</span>
+              </a>
+              <a href="">
+                  <span>韩服主播打造成型号一身红三韩服主播打造成型号一身红三</span>
+                  <span>06-16</span>
+              </a>
+              <a href="">
+                <span>韩服主播打造成型号一身红三韩服主播打造成型号一身红三</span>
+                <span>06-16</span>
+               </a>
+
+            </div>
+          </div>
         </div>
 			</div>
     </div>
-    <div class="cover">
+    <div class="cover" id="video">
       <div class="video-wrapper">
           <i class="close">X</i>
       </div>
     </div>
+    <div class="cover" id="lq">
+      <div class="lq-box">
+          <i class="x"></i>
+          <p>多玩独家特权码</p>
+          <div class="lq-code">
+            <input type="text" value="SGDAOAKG7CS" id="lq-code" readonly>
+            <button data-clipboard-target="#lq-code" id="clip-button" data-clipboard-action="copy">
+              复制
+            </button>
+            <a href="">
+              领取
+            </a>
+          </div>
+      </div>
+    </div>
 		<script
 			id="dw-footer-without-gem"
 			charset="utf-8"

2019专题/1906DNF专题/src/modules/page/index.js

@@ -1,4 +1,5 @@
 require('jquery.gallery.js');
+var ClipboardJS = require('clipboard.min.js')
 var V = {
     init: function () {
         // 点击滚动到页面顶部
@@ -11,25 +12,48 @@ var V = {
             supportTrans: true
         });
         this.initVideo()
+        this.initClipBoard()
     },
     initVideo: function(){
 
       $('.mod-video i.play').on('click', function(){
         var src = $(this).attr('data-video')
-        $('.cover .video-wrapper').append(
-          `<iframe frameborder="0" src="${src}" allowFullScreen="true" width="1366" height="768"></iframe>`
+        $('.cover#video .video-wrapper').append(
+          ` <embed id="1558406038823" name="1558406038823" src="${src}"
+          wmode="transparent" allowfullscreen="true"
+          quality="high" height="100%" width="100%" align="middle"
+          allowscriptaccess="always"
+          flashvars="uu=a04808d307&vu=&continous_play=0&auto_play=1&videoId=0&vid=9039375&width=640&height=360&channelId=5253video&sdk=&no_ad=1"
+          type="application/x-shockwave-flash">`
         )
-        M.$cover.show()
+        M.$videoCover.show()
       })
-      $('.cover i.close').on('click', function(){
+      $('.cover#video i.close').on('click', function(){
+        console.log($('.cover .video-wrapper').children())
         $('.cover .video-wrapper').children()[1].remove()
-        M.$cover.hide()
+        $('.cover .video-wrapper').children()[1].remove()
+        M.$videoCover.hide()
+      })
+    },
+    initClipBoard(){
+      var clipboard = new ClipboardJS('#clip-button')
+      clipboard.on('success', function(e) {
+        if(e.action === 'copy'){
+          alert('复制成功')
+        }
+      })
+      $('.btn-lq').on('click', function(){
+        M.$codeCover.show()
+      })
+      $('.lq-box i.x').on('click', function(){
+        M.$codeCover.hide()
       })
     }
 }
 
 var M = {
-  $cover: $('.cover')
+  $videoCover: $('.cover#video'),
+  $codeCover: $('.cover#lq'),
 }
 
 $(function () {

2019专题/1906DNF专题/src/sass/global.scss

@@ -13,6 +13,9 @@ html {
     font: 12px/1.5 PingFang sc, "Helvetica Neue", Helvetica, Tahoma, Arial, SimSun, TW-Sung, "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", serif; // font-family: $yahei;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
+    &::-webkit-scrollbar{
+      display: none;
+    }
 }
 
 body {
@@ -43,7 +46,7 @@ body {
     .mod-title {
         height: 68px;
         background: top center no-repeat;
-        @for $i from 1 through 2{
+        @for $i from 1 through 3{
             &.title#{$i}{
                 background-image: url(../img/bg-title#{$i}.png?1);
             }
@@ -205,16 +208,36 @@ body {
             }
         }
         video {
-            height: 1080px;
-            width: 1920px;
             display: block;
             margin: 0 auto;
         }
+        .btn-group{
+          position: absolute;
+          top: -4px;
+          right: 20px;
+          z-index: 9;
+          a{
+            display: inline-block;
+            width: 300px;
+            height: 105px;
+            cursor: pointer;
+            transform: scale(0.75);
+            transition: all 0.3s ease;
+            &:hover{
+              filter: brightness(1.3);
+            }
+            @for $i from 1 through 3{
+              &.b#{$i}{
+                background: url(../img/b#{$i}.png) no-repeat 100% / 100%;
+              }
+            }
+          }
+        }
     }
     .mod-gift {
-        height: 1570px;
+        height: 2250px;
         background: url(../img/bg.png) top center no-repeat;
-        margin-top: -94px;
+        margin-top: -135px;
         position: relative;
         z-index: 1;
         box-sizing: border-box;
@@ -223,7 +246,7 @@ body {
             width: 860px;
             height: 382px;
             background: url('../img/box-bg.png?__sprite') no-repeat 100% / 100%;
-            margin: 26px auto 160px auto;
+            margin: 26px auto 0px auto;
             .mod-list {
                 ul {
                     height: 379px;
@@ -255,8 +278,8 @@ body {
                                 text-align: center;
                                 overflow: hidden;
                                 img {
-                                    height: 56px;
-                                    width: 56px;
+                                    height: 90px;
+                                    width: 90px;
                                     max-height: 100%;
                                     max-width: 100%;
                                     display: inline-block;
@@ -293,6 +316,31 @@ body {
                 }
             }
         }
+        .btn-lq{
+          width: 274px;
+          height: 75px;
+          background: url('../img/btn-lq.png') no-repeat 100% / 100%;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          margin: 26px auto;
+          &:hover{
+            filter: brightness(1.2);
+          }
+        }
+        .tips{
+          text-align: center;
+          margin-bottom: 115px;
+          h6{
+            font-weight: bolder;
+            font-size: 18px;
+            color: #d7daf9;
+            line-height: 32px;
+          }
+          p{
+            font-size: 14px;
+            color: #b8bef9;
+          }
+        }
     }
     .mod-version {
         overflow: hidden;
@@ -459,7 +507,7 @@ body {
       width: 864px;
       height: 448px;
       background: url('../img/video-img.png') no-repeat 100% / 100%;
-      margin: 49px auto 0 auto;
+      margin: 49px auto 90px auto;
       position: relative;
       i.play{
         width: 88px;
@@ -477,6 +525,72 @@ body {
         }
       }
     }
+    .mod-news{
+      display: flex;
+      width: 860px;
+      margin: 20px auto 0 auto;
+      .news-left{
+        width: 65%;
+        margin-right: 3%;
+      }
+      .news-right{
+        width: 32%
+      }
+      .news-title{
+        width: 100%;
+        border-bottom: 1px solid #646fbf;
+        height: 43px;
+        margin-bottom: 18px;
+        margin-top: 25px;
+        span{
+          color: #fff;
+          font-size: 18px;
+          padding-bottom: 16px;
+          border-bottom: 2px #646fbf solid;
+        }
+      }
+      .video-list{
+        display: flex;
+        flex-wrap: wrap;
+      }
+      .video-list .video-item{
+        width: calc(33.33% - 10px);
+        margin-right: 15px;
+        margin-bottom: 15px;
+        height: 140px;
+        transition: all 0.3s ease;
+        &:hover{
+          text-decoration: none;
+          transform: translateY(-5px);
+        }
+        &:nth-child(3n) {
+          margin-right: 0px;
+        }
+        span{
+          color: #6678d1;
+          line-height: 1.1;
+        }
+        img{
+          width: 100%;
+        }
+      }
+      .news-list{
+        a{
+          display: flex;
+          white-space: nowrap;
+          justify-content: space-between;
+          color: #6678d1;
+          margin-bottom: 8px;
+        }
+        span:first-child{
+          display: inline-block;
+          width: 80%;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
 }
 
 
@@ -506,4 +620,127 @@ body {
       cursor: pointer;
     }
   }
+  .lq-box{
+    position: absolute;
+    width: 850px;
+    height: 184px;
+    background-color: #121537;
+    border: 1px solid #3147a3;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    box-sizing: border-box;
+    padding: 28px 56px;
+    p{
+      font-size: 16px;
+      color: #556fd6;
+    }
+    i.x{
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      background: url('../img/close.png?__sprite') no-repeat 100% / 100%;
+      cursor: pointer;
+    }
+    .lq-code{
+      display: flex;
+      margin-top: 20px;
+      input{
+        width: 480px;
+        height: 65px;
+        background-color: #0e112f;
+        color: #556fd6;
+        font-size: 16px;
+        line-height: 65px;
+        border: none;
+        outline: none;
+        box-sizing: border-box;
+        padding-left: 20px;
+      }
+      button{
+        outline: none;
+        border: none;
+        width: 120px;
+        height: 65px;
+        background-color: #1f2563;
+        color: #556fd6;
+        margin-left: 15px;
+        font-size: 16px;
+        font-weight: bolder;
+      }
+      a:last-child{
+        width: 120px;
+        height: 65px;
+        background-color: #d4b138;
+        color: #fff;
+        margin-left: 15px;
+        font-size: 16px;
+        font-weight: bolder;
+        line-height:65px;
+        text-align: center;
+        &:hover{
+          text-decoration: none;
+        }
+      }
+    }
+  }
 }
+
+
+@media screen and (max-width: 800px) {
+  #bg-video{
+    display: none;
+  }
+  .page-index .mod-primary .btn-group{
+    display: none;
+  }
+  .page-index .mod-primary{
+    background: url('../img/banner.png') no-repeat center;
+  }
+  .page-index .mod-gift{
+    padding-top: 141px;
+  }
+  .page-index .mod-gift .mod-inner{
+    width: 100%;
+    height: auto;
+    background: none  !important;
+  }
+  .page-index .mod-gift .mod-inner .mod-list ul{
+    height: auto;
+    padding: 0;
+  }
+  .page-index .mod-gift .mod-inner .mod-list ul li{
+    margin: 10px;
+  }
+  .page-index .mod-video{
+    width: 100%;
+    height: 30vh;
+  }
+  .page-index .mod-news{
+    width: 100%;
+    display: block;
+  }
+  .page-index .mod-news .news-left{
+    width: 100%;
+    margin-right: 0;
+  }
+  .page-index .mod-news .news-right{
+    width: 100%;
+  }
+  .cover .lq-box{
+    width: 100%;
+    padding: 14px 10px;
+    height: auto;
+  }
+  .dwCommonFooter{
+    display: none;
+  }
+  #dw-topbar{
+    display: none;
+  }
+  body{
+    padding: 0 !important;
+  }
+}