tangxijun 5 年之前
父節點
當前提交
70bf2197d7

+ 234 - 1
2019专题/1906lol自走棋专题/src/_index.html

@@ -12,11 +12,244 @@
 </head>
 
 <body>
+
     <div class="page-index">
-        
+        <div class="game-intro" id="section1">
+            <div class="title">
+                <span>游戏介绍</span>
+            </div>
+            <div class="describe">
+                <div class="video-box">
+                    <img src="/src/img/video_cover_bg.png" alt="">
+                    <i class="play-btn"></i>
+                </div>
+                <div class="desc-left">
+                        <div class="left"><span class="text">云顶之弈</span> </div>
+                        <div class="text-box">是英雄联盟的全新模式,你将与其他七个对手(或朋友)进行一场各自为战的博弈对抗。招兵买马,排兵布阵,融合英雄,提升战力,成为最终立于战场上的赢家。</div>
+                </div>
+             
+            </div>
+            <div class="classification" id="section2">
+                <div class="clsfi-detail news ">
+                    <div class="title-box">
+                        <span>资讯</span>
+                    </div>
+                    <ul class="content-box">
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                    </ul>
+                    <div class="more-info">更多资讯》</div>
+                </div>
+                <div class="clsfi-detail raiders">
+                    <div class="title-box">
+                        <span>攻略</span>
+                    </div>
+                    <ul class="content-box">
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                        <li><i class="square"></i><span>集美大学让一追二收获高校联赛冠军 </span> <span class="date">6-16</span></li>
+                    </ul>
+                    <div class="more-info">更多攻略》</div>
+                </div>
+
+                <div class="clsfi-detail game-video">
+                    <div class="title-box">
+                        <span>游戏视频</span>
+                    </div>
+                    <ul class="gv-box">
+                        <li> <img src="http://fed.webdev.ouj.com/156x87" alt=""> </li>
+                        <li> <img src="http://fed.webdev.ouj.com/156x87" alt=""> </li>
+                        <li> <img src="http://fed.webdev.ouj.com/156x87" alt=""> </li>
+                        <li> <img src="http://fed.webdev.ouj.com/156x87" alt=""> </li>
+                        <li> <img src="http://fed.webdev.ouj.com/156x87" alt=""> </li>
+                        <li> <img src="http://fed.webdev.ouj.com/156x87" alt=""> <span class="more-video">更多视频》</span></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="game-rule" id="section3">
+            <div class="title">
+                <span>游戏规则</span>
+            </div>
+            <div class="sub-title">
+                <i class="st-icon"></i>
+                <span class="st-text">棋盘及机制</span>
+                <span class="st-text-detail">六边形的棋盘,你在上面部署应战的英雄。</span>
+            </div>
+            <div class="gr-tab-box mechanism-box">
+                <ul class="tab-box">
+                    <li class="tab-item one " >战场</li>
+                    <li class="tab-item one">板凳</li>
+                    <li class="tab-item one ">商店</li>
+                    <li class="tab-item one">金币</li>
+                    <li class="tab-item one">升级</li>
+                </ul>
+                <ul class="content-wrap">
+                    <li class="content-item">全玩家共享的英雄池随机向各位玩家的商店发放可选购的英雄。如果没有你想要的,可以花费金币进行重新随机,或者等待每回合开始前的免费英雄池
+                            刷新。</li>
+                    <li class="content-item">content2</li>
+                    <li class="content-item">content3</li>
+                    <li class="content-item">content4</li>
+                    <li class="content-item">content5</li>
+                </ul>
+            </div>
+            <div class="sub-title">
+                <i class="st-icon"></i>
+                <span class="st-text">游戏过程</span>
+            </div>
+            <div class="gr-tab-box process-box">
+                <ul class="tab-box">
+                    <li class="tab-item one">购物阶段</li>
+                    <li class="tab-item one">战斗阶段</li>
+                    <li class="tab-item one">特殊阶段</li>
+                </ul>
+                <ul class="content-wrap">
+                    <li class="content-item">每次战斗开始前,你的小小英雄和出战的英雄们都将被传送到对手的棋盘上(或者对手传送到你的棋盘)并展开战斗。如果40秒内没有决出胜负,则双方玩家都将根据对手剩余英雄的数量而受到伤害。PVE:每局开始,玩家们将首先面对三个回合的野怪,然后再彼此对局。击败野怪有几率掉落物品,可以在准备阶段装备给英雄。PVP:你将和其他七名玩家进行随机匹配对局。你和对手的军队将直接碰撞。</li>
+                    <li class="content-item">content2</li>
+                    <li class="content-item">content3</li>
+                </ul>
+            </div>
+            <div class="sub-title">
+                <i class="st-icon"></i>
+                <span class="st-text">物品</span>
+            </div>
+            <div class="gr-tab-box goods-box">
+                <ul class="tab-box">
+                    <li class="tab-item one">购物阶段</li>
+                    <li class="tab-item one">战斗阶段</li>
+                    <li class="tab-item one">特殊阶段</li>
+                </ul>
+                <ul class="content-wrap">
+                    <li class="content-item">每次战斗开始前,你的小小英雄和出战的英雄们都将被传送到对手的棋盘上(或者对手传送到你的棋盘)并展开战斗。如果40秒内没有决出胜负,则双方玩家都将根据对手剩余英雄的数量而受到伤害。PVE:每局开始,玩家们将首先面对三个回合的野怪,然后再彼此对局。击败野怪有几率掉落物品,可以在准备阶段装备给英雄。PVP:你将和其他七名玩家进行随机匹配对局。你和对手的军队将直接碰撞。</li>
+                    <li class="content-item">content2</li>
+                    <li class="content-item">content3</li>
+                </ul>
+            </div>
+            <div class="preview-wrap" id="dg-container-slide">
+                <div class="preview-slider dg-wrapper">
+                    <a href="javascript:;">
+                        <img src="http://fed.webdev.ouj.com/420x276" alt="" />
+                    </a>
+                    <a href="javascript:;">
+                        <img src="http://fed.webdev.ouj.com/420x276" alt="" />
+                    </a>
+                    <a href="javascript:;">
+                        <img src="http://fed.webdev.ouj.com/420x276" alt="" />
+                    </a>
+                </div>
+                <nav>
+                    <span class="preview-switch prev dg-prev"></span>
+                    <span class="preview-switch next dg-next"></span>
+                </nav>
+            </div>
+        </div>
+
+        <div class="tab-wrap-two camp" id="section4">
+            <div class="title">
+                <span>阵营</span>
+            </div>
+            <ul class="tab-box">
+                <li class="tab-item active">浪人</li>
+                <li class="tab-item">虚空生物</li>
+                <li class="tab-item">帝国</li>
+                <li class="tab-item">贵族</li>
+                <li class="tab-item">忍者</li>
+                <li class="tab-item">幻影</li>
+                <li class="tab-item">海盗</li>
+                <li class="tab-item">机器人</li>
+                <li class="tab-item">冰川生物</li>
+                <li class="tab-item">野性生物</li>
+                <li class="tab-item">龙</li>
+                <li class="tab-item">元素</li>
+                <li class="tab-item">恶魔</li>
+                <li class="tab-item">约德尔人</li>
+            </ul>
+            <ul class="content-wrap">
+                <li class="content-item">在战斗开始时,如果一个浪人的临近格子没有友军,那么该棋子会获得一层相当于其百分比最大生命值的护盾</li>
+                <li class="content-item">content2</li>
+                <li class="content-item">content3</li>
+                <li class="content-item">content4</li>
+                <li class="content-item">content5</li>
+                <li class="content-item">content6</li>
+                <li class="content-item">content7</li>
+                <li class="content-item">content8</li>
+                <li class="content-item">content9</li>
+                <li class="content-item">content10</li>
+                <li class="content-item">content11</li>
+                <li class="content-item">content12</li>
+                <li class="content-item">content13</li>
+                <li class="content-item">content14</li>
+           
+            </ul>
+        </div>
+        <div class="tab-wrap-two career" id="section5">
+            <div class="title">
+                <span>职业</span>
+            </div>
+            <ul class="tab-box">
+                    <li class="tab-item active">射手</li>
+                    <li class="tab-item">刺客</li>
+                    <li class="tab-item">战士</li>
+                    <li class="tab-item">坦克</li>
+                    <li class="tab-item">法师</li>
+                    <li class="tab-item">剑客</li>
+                    <li class="tab-item">游侠</li>
+                    <li class="tab-item">换形师</li>
+                    <li class="tab-item">骑士</li>
+                </ul>
+                <ul class="content-wrap">
+                    <li class="content-item">在攻击之后,射手们有几率打出额外的攻击。N个射手:攻击距离内所有其他敌人</li>
+                    <li class="content-item">content2</li>
+                    <li class="content-item">content3</li>
+                    <li class="content-item">content4</li>
+                    <li class="content-item">content5</li>
+                    <li class="content-item">content6</li>
+                    <li class="content-item">content7</li>
+                    <li class="content-item">content8</li>
+                    <li class="content-item">content9</li>
+                </ul>
+        </div>
+        <div class="game-info" id="section6">
+            <div class="title">
+                <span>游戏资料</span>
+            </div>
+        </div>
+        <div class="left-side-box">
+            <div class="side-title">专区首页</div>
+            <ul class="side-content-box">
+                <li class="item active"><a href="#section1" target="_self" class="label" id="a1">游戏介绍</a></li>
+                <li class="item"><a href="#section2" target="_self" class="label" id="a2">攻略视频</a></li>
+                <li class="item"><a href="#section3" target="_self" class="label" id="a3">游戏规则</a></li>
+                <li class="item"><a href="#section4" target="_self" class="label" id="a4">阵营</a></li>
+                <li class="item"><a href="#section5" target="_self" class="label" id="a5">职业</a></li>
+                <li class="item"><a href="#section6" target="_self" class="label" id="a6">游戏资料</a></li>
+            </ul>
+        </div>
+
         <link rel="import" href="./modules/hero/hero.html?__inline" />
     </div>
+    <div class="video-cover">
+        <div class="video-wrap">
+            <span class="close">X</span>
+            <embed src="http://assets.dwstatic.com/video/vpp.swf" type="" id="1558406038823" name="1558406038823"  width="100%" height="100%">
+        </div>
+    </div>
+   <div style='height:150px;width:1300px;'></div>
     <script src="lib/mod.js"></script>
+    <script src="lib/jquery.js"></script>
+    <script src="./modules/page/jquery.gallery.js"></script>
+
     <script>
         require('./modules/page/index.js')
     </script>

二進制
2019专题/1906lol自走棋专题/src/img/icon-arrow-left.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-arrow-right.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-circle.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-play.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-side-box.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-side-title.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-title-left-small.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-title-left.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-title-right-small.png


二進制
2019专题/1906lol自走棋专题/src/img/icon-title-right.png


二進制
2019专题/1906lol自走棋专题/src/img/video_cover_bg.png


+ 107 - 0
2019专题/1906lol自走棋专题/src/modules/page/index.js

@@ -0,0 +1,107 @@
+
+require('jquery.gallery.js');
+
+//swiper
+ var dgRollLength = $('#dg-container-slide .dg-wrapper a').length,
+    dgRollHtml = $('#dg-container-slide .dg-wrapper').html();
+    if (dgRollLength < 3) {
+    $('#dg-container-slide .dg-wrapper').append(dgRollHtml);
+    }
+    $('#dg-container-slide').gallery({
+        support2d: true,
+        supportTrans: true
+    });
+
+
+// 机制
+$('.mechanism-box .tab-item').hover(function(){
+    var index = $(this).index()
+    $(this).addClass('active').siblings().removeClass('active')
+    $('.mechanism-box .content-wrap .content-item').eq(index).show().siblings().hide()
+},function(){
+    var index = $(this).index()
+    $(this).removeClass('active')
+    $('.mechanism-box .content-wrap .content-item').eq(index).hide().siblings().hide()
+})
+
+
+// 过程
+$('.process-box .tab-item').hover(function(){
+    var index = $(this).index()
+    $(this).addClass('active').siblings().removeClass('active')
+    $('.process-box .content-wrap .content-item').eq(index).show().siblings().hide()
+},function(){
+    var index = $(this).index()
+    $(this).removeClass('active')
+    $('.process-box .content-wrap .content-item').eq(index).hide().siblings().hide()
+})
+
+
+// 物品
+$('.goods-box .tab-item').hover(function(){
+    var index = $(this).index()
+    $(this).addClass('active').siblings().removeClass('active')
+    $('.goods-box .content-wrap .content-item').eq(index).show().siblings().hide()
+},function(){
+    var index = $(this).index()
+    $(this).removeClass('active')
+    $('.goods-box .content-wrap .content-item').eq(index).hide().siblings().hide()
+})
+
+// 阵营
+$('.camp .tab-item').hover(function(){
+    var index = $(this).index()
+    $(this).addClass('active').siblings().removeClass('active')
+    $('.camp .content-wrap .content-item').eq(index).show().siblings().hide()
+},function(){
+    var index = $(this).index()
+    $(this).removeClass('active')
+    $('.camp .content-wrap .content-item').eq(index).hide().siblings().hide()
+})
+
+
+// 职业
+$('.career .tab-item').hover(function(){
+    $('tab-item').clearQueue()
+    var index = $(this).index()
+    $(this).addClass('active').siblings().removeClass('active')
+    $('.career .content-wrap .content-item').eq(index).show().siblings().hide()
+},function(){
+    var index = $(this).index()
+    $(this).removeClass('active')
+    $('.career .content-wrap .content-item').eq(index).hide().siblings().hide()
+})
+
+//视频播放
+$('.play-btn').on('click',function(){
+    $('.video-cover').show()
+})
+$('.close').on('click',function(){
+    $('.video-cover').hide()
+})
+var isClickLoading = false;
+//锚点
+$(".label").bind("click",function(e){
+    e.preventDefault();
+    if (isClickLoading) {
+        return
+    }
+    isClickLoading = true;
+    $('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top -50 )},500, function() {
+        isClickLoading = false;
+    });
+    $(this).parent().addClass('active').siblings().removeClass('active')
+});
+
+$(window).scroll(function(){
+    if (isClickLoading) {
+        return;
+    }
+    var wst =  $(window).scrollTop() 
+    for (i=1; i<7; i++){          
+        if($("#section"+i).offset().top<=wst+50){ 
+            $('.item').removeClass("active");
+            $("#a"+i).parent().addClass("active");
+        }
+    }
+})

+ 523 - 0
2019专题/1906lol自走棋专题/src/modules/page/jquery.gallery.js

@@ -0,0 +1,523 @@
+/**
+ * jquery.gallery.js
+ * http://www.codrops.com
+ *
+ * Copyright 2011, Pedro Botelho / Codrops
+ * Free to use under the MIT license.
+ *
+ * Date: Mon Jan 30 2012
+ */
+require('./modernizr.custom.53451');
+
+(function( $, undefined ) {
+	
+	/*
+	 * Gallery object.
+	 */
+	$.Gallery 				= function( options, element ) {
+	
+		this.$el	= $( element );
+		this._init( options );
+		
+	};
+	
+	$.Gallery.defaults 		= {
+		current		: 0,	// index of current item
+		autoplay	: false,// slideshow on / off
+		interval	: 2000  // time between transitions
+    };
+	
+	$.Gallery.prototype 	= {
+		_init 				: function( options ) {
+			
+			this.options 		= $.extend( true, {}, $.Gallery.defaults, options );
+			
+			// support for 3d / 2d transforms and transitions
+			// this.support3d		= Modernizr.csstransforms3d;
+			this.support2d		= Modernizr.csstransforms;
+			this.supportTrans	= Modernizr.csstransitions;
+			
+			this.$wrapper		= this.$el.find('.dg-wrapper');
+			
+			this.$items			= this.$wrapper.children();
+			this.itemsCount		= this.$items.length;
+			
+			this.$nav			= this.$el.find('nav');
+			this.$navPrev		= this.$nav.find('.dg-prev');
+			this.$navNext		= this.$nav.find('.dg-next');
+			
+            // minimum of 3 items
+			if( this.itemsCount < 3 ) {
+				
+				this.$nav.remove();
+                return false;
+                
+			}	
+			
+			this.current		= this.options.current;
+			
+			this.isAnim			= false;
+			
+			this.$items.css({
+				'opacity'	: 0,
+				'visibility': 'hidden'
+			});
+			
+			this._validate();
+			
+			this._layout();
+			
+			// load the events
+			this._loadEvents();
+			
+			// slideshow
+			if( this.options.autoplay ) {
+			
+				this._startSlideshow();
+			
+			}
+			
+		},
+		_validate			: function() {
+		
+			if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {
+				
+				this.current = 0;
+			
+			}	
+		
+		},
+		_layout				: function() {
+			
+			// current, left and right items
+			this._setItems();
+			
+			// current item is not changed
+			// left and right one are rotated and translated
+			var leftCSS, rightCSS, currentCSS;
+			
+			if( this.support3d && this.supportTrans ) {
+			
+				leftCSS 	= {
+					'-webkit-transform'	: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+					'-moz-transform'	: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+					'-o-transform'		: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+					'-ms-transform'		: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+					'transform'			: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)'
+				};
+				
+				rightCSS	= {
+					'-webkit-transform'	: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+					'-moz-transform'	: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+					'-o-transform'		: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+					'-ms-transform'		: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+					'transform'			: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)'
+				};
+				
+				leftCSS.opacity		= 1;
+				leftCSS.visibility	= 'visible';
+				rightCSS.opacity	= 1;
+				rightCSS.visibility	= 'visible';
+			
+			}
+			else if( this.support2d && this.supportTrans ) {
+				
+				leftCSS 	= {
+					'-webkit-transform'	: 'translate(-200px) scale(0.8)',
+					'-moz-transform'	: 'translate(-200px) scale(0.8)',
+					'-o-transform'		: 'translate(-200px) scale(0.8)',
+					'-ms-transform'		: 'translate(-200px) scale(0.8)',
+					'transform'			: 'translate(-200px) scale(0.8)'
+				};
+				
+				rightCSS	= {
+					'-webkit-transform'	: 'translate(200px) scale(0.8)',
+					'-moz-transform'	: 'translate(200px) scale(0.8)',
+					'-o-transform'		: 'translate(200px) scale(0.8)',
+					'-ms-transform'		: 'translate(200px) scale(0.8)',
+					'transform'			: 'translate(200px) scale(0.8)'
+				};
+				
+				currentCSS	= {
+					'z-index'			: 999
+				};
+				
+				leftCSS.opacity		= 1;
+				leftCSS.visibility	= 'visible';
+				rightCSS.opacity	= 1;
+				rightCSS.visibility	= 'visible';
+			
+			}
+			
+			this.$leftItm.css( leftCSS || {} );
+			this.$rightItm.css( rightCSS || {} );
+			
+			this.$currentItm.css( currentCSS || {} ).css({
+				'opacity'	: 1,
+				'visibility': 'visible'
+			}).addClass('dg-center');
+			
+		},
+		_setItems			: function() {
+			
+			this.$items.removeClass('dg-center');
+			
+			this.$currentItm	= this.$items.eq( this.current );
+			this.$leftItm		= ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );
+			this.$rightItm		= ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );
+			
+			if( !this.support3d && this.support2d && this.supportTrans ) {
+			
+				this.$items.css( 'z-index', 1 );
+				this.$currentItm.css( 'z-index', 999 );
+			
+			}
+			
+			// next & previous items
+			if( this.itemsCount > 3 ) {
+			
+				// next item
+				this.$nextItm		= ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();
+				this.$nextItm.css( this._getCoordinates('outright') );
+				
+				// previous item
+				this.$prevItm		= ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();
+				this.$prevItm.css( this._getCoordinates('outleft') );
+			
+			}
+			
+		},
+		_loadEvents			: function() {
+			
+			var _self	= this;
+			
+			this.$navPrev.on( 'click.gallery', function( event ) {
+				
+				if( _self.options.autoplay ) {
+				
+					clearTimeout( _self.slideshow );
+					_self.options.autoplay	= false;
+				
+				}
+				
+				_self._navigate('prev');
+				return false;
+				
+			});
+			
+			this.$navNext.on( 'click.gallery', function( event ) {
+				
+				if( _self.options.autoplay ) {
+				
+					clearTimeout( _self.slideshow );
+					_self.options.autoplay	= false;
+				
+				}
+				
+				_self._navigate('next');
+				return false;
+				
+			});
+			
+			this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {
+				
+				_self.$currentItm.addClass('dg-center');
+				_self.$items.removeClass('dg-transition');
+				_self.isAnim	= false;
+				
+			});
+			
+		},
+		_getCoordinates		: function( position ) {
+			
+			if( this.support3d && this.supportTrans ) {
+			
+				switch( position ) {
+					case 'outleft':
+						return {
+							'-webkit-transform'	: 'translateX(-250px) translateZ(-300px) rotateY(45deg) scale(0.82)',
+							'-moz-transform'	: 'translateX(-250px) translateZ(-300px) rotateY(45deg) scale(0.82)',
+							'-o-transform'		: 'translateX(-250px) translateZ(-300px) rotateY(45deg) scale(0.82)',
+							'-ms-transform'		: 'translateX(-250px) translateZ(-300px) rotateY(45deg) scale(0.82)',
+							'transform'			: 'translateX(-250px) translateZ(-300px) rotateY(45deg) scale(0.82)',
+							'opacity'			: 0,
+							'visibility'		: 'hidden'
+						};
+						break;
+					case 'outright':
+						return {
+							'-webkit-transform'	: 'translateX(250px) translateZ(-300px) rotateY(-45deg) scale(0.82)',
+							'-moz-transform'	: 'translateX(250px) translateZ(-300px) rotateY(-45deg) scale(0.82)',
+							'-o-transform'		: 'translateX(250px) translateZ(-300px) rotateY(-45deg) scale(0.82)',
+							'-ms-transform'		: 'translateX(250px) translateZ(-300px) rotateY(-45deg) scale(0.82)',
+							'transform'			: 'translateX(250px) translateZ(-300px) rotateY(-45deg) scale(0.82)',
+							'opacity'			: 0,
+							'visibility'		: 'hidden'
+						};
+						break;
+					case 'left':
+						return {
+							'-webkit-transform'	: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+							'-moz-transform'	: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+							'-o-transform'		: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+							'-ms-transform'		: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+							'transform'			: 'translateX(-250px) translateZ(-200px) rotateY(45deg) scale(0.82)',
+							'opacity'			: 1,
+							'visibility'		: 'visible'
+						};
+						break;
+					case 'right':
+						return {
+							'-webkit-transform'	: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+							'-moz-transform'	: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+							'-o-transform'		: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+							'-ms-transform'		: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+							'transform'			: 'translateX(250px) translateZ(-200px) rotateY(-45deg) scale(0.82)',
+							'opacity'			: 1,
+							'visibility'		: 'visible'
+						};
+						break;
+					case 'center':
+						return {
+							'-webkit-transform'	: 'translateX(0px) translateZ(0px) rotateY(0deg)',
+							'-moz-transform'	: 'translateX(0px) translateZ(0px) rotateY(0deg)',
+							'-o-transform'		: 'translateX(0px) translateZ(0px) rotateY(0deg)',
+							'-ms-transform'		: 'translateX(0px) translateZ(0px) rotateY(0deg)',
+							'transform'			: 'translateX(0px) translateZ(0px) rotateY(0deg)',
+							'opacity'			: 1,
+							'visibility'		: 'visible'
+						};
+						break;
+				};
+			
+			}
+			else if( this.support2d && this.supportTrans ) {
+			
+				switch( position ) {
+					case 'outleft':
+						return {
+							'-webkit-transform'	: 'translate(-450px) scale(0.7)',
+							'-moz-transform'	: 'translate(-450px) scale(0.7)',
+							'-o-transform'		: 'translate(-450px) scale(0.7)',
+							'-ms-transform'		: 'translate(-450px) scale(0.7)',
+							'transform'			: 'translate(-450px) scale(0.7)',
+							'opacity'			: 0,
+							'visibility'		: 'hidden'
+						};
+						break;
+					case 'outright':
+						return {
+							'-webkit-transform'	: 'translate(450px) scale(0.7)',
+							'-moz-transform'	: 'translate(450px) scale(0.7)',
+							'-o-transform'		: 'translate(450px) scale(0.7)',
+							'-ms-transform'		: 'translate(450px) scale(0.7)',
+							'transform'			: 'translate(450px) scale(0.7)',
+							'opacity'			: 0,
+							'visibility'		: 'hidden'
+						};
+						break;
+					case 'left':
+						return {
+							'-webkit-transform'	: 'translate(-200px) scale(0.8)',
+							'-moz-transform'	: 'translate(-200px) scale(0.8)',
+							'-o-transform'		: 'translate(-200px) scale(0.8)',
+							'-ms-transform'		: 'translate(-200px) scale(0.8)',
+							'transform'			: 'translate(-200px) scale(0.8)',
+							'opacity'			: 1,
+							'visibility'		: 'visible'
+						};
+						break;
+					case 'right':
+						return {
+							'-webkit-transform'	: 'translate(200px) scale(0.8)',
+							'-moz-transform'	: 'translate(200px) scale(0.8)',
+							'-o-transform'		: 'translate(200px) scale(0.8)',
+							'-ms-transform'		: 'translate(200px) scale(0.8)',
+							'transform'			: 'translate(200px) scale(0.8)',
+							'opacity'			: 1,
+							'visibility'		: 'visible'
+						};
+						break;
+					case 'center':
+						return {
+							'-webkit-transform'	: 'translate(0px) scale(1)',
+							'-moz-transform'	: 'translate(0px) scale(1)',
+							'-o-transform'		: 'translate(0px) scale(1)',
+							'-ms-transform'		: 'translate(0px) scale(1)',
+							'transform'			: 'translate(0px) scale(1)',
+							'opacity'			: 1,
+							'visibility'		: 'visible'
+						};
+						break;
+				};
+			
+			}
+			else {
+			
+				switch( position ) {
+					case 'outleft'	: 
+					case 'outright'	: 
+					case 'left'		: 
+					case 'right'	:
+						return {
+							'opacity'			: 0,
+							'visibility'		: 'hidden'
+						};
+						break;
+					case 'center'	:
+						return {
+							'opacity'			: 1,
+							'visibility'		: 'visible'
+						};
+						break;
+				};
+			
+			}
+		
+		},
+		_navigate			: function( dir ) {
+			
+			if( this.supportTrans && this.isAnim )
+				return false;
+				
+			this.isAnim	= true;
+			
+			switch( dir ) {
+			
+				case 'next' :
+					
+					this.current	= this.$rightItm.index();
+					
+					// current item moves left
+					this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );
+					
+					// right item moves to the center
+					this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') );	
+					
+					// next item moves to the right
+					if( this.$nextItm ) {
+						
+						// left item moves out
+						this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );
+						
+						this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );
+						
+					}
+					else {
+					
+						// left item moves right
+						this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );
+					
+					}
+					break;
+					
+				case 'prev' :
+				
+					this.current	= this.$leftItm.index();
+					
+					// current item moves right
+					this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );
+					
+					// left item moves to the center
+					this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );
+					
+					// prev item moves to the left
+					if( this.$prevItm ) {
+						
+						// right item moves out
+						this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );
+					
+						this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );
+						
+					}
+					else {
+					
+						// right item moves left
+						this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );
+					
+					}
+					break;	
+					
+			};
+			
+			this._setItems();
+			
+			if( !this.supportTrans )
+				this.$currentItm.addClass('dg-center');
+			
+		},
+		_startSlideshow		: function() {
+		
+			var _self	= this;
+			
+			this.slideshow	= setTimeout( function() {
+				
+				_self._navigate( 'next' );
+				
+				if( _self.options.autoplay ) {
+				
+					_self._startSlideshow();
+				
+				}
+			
+			}, this.options.interval );
+		
+		},
+		destroy				: function() {
+			
+			this.$navPrev.off('.gallery');
+			this.$navNext.off('.gallery');
+			this.$wrapper.off('.gallery');
+			
+		}
+	};
+	
+	var logError 			= function( message ) {
+		if ( this.console ) {
+			console.error( message );
+		}
+	};
+	
+	$.fn.gallery			= function( options ) {
+	
+		if ( typeof options === 'string' ) {
+			
+			var args = Array.prototype.slice.call( arguments, 1 );
+			
+			this.each(function() {
+			
+				var instance = $.data( this, 'gallery' );
+				
+				if ( !instance ) {
+					logError( "cannot call methods on gallery prior to initialization; " +
+					"attempted to call method '" + options + "'" );
+					return;
+				}
+				
+				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
+					logError( "no such method '" + options + "' for gallery instance" );
+					return;
+				}
+				
+				instance[ options ].apply( instance, args );
+			
+			});
+		
+		} 
+		else {
+		
+			this.each(function() {
+			
+				var instance = $.data( this, 'gallery' );
+				if ( !instance ) {
+					$.data( this, 'gallery', new $.Gallery( options, this ) );
+				}
+			});
+		
+		}
+		
+		return this;
+		
+	};
+	
+})( jQuery );

+ 389 - 0
2019专题/1906lol自走棋专题/src/modules/page/modernizr.custom.53451.js

@@ -0,0 +1,389 @@
+/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
+ * Build: http://www.modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-iepp-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load
+ */
+;
+window.Modernizr = function(a, b, c) {
+    function C(a, b) {
+        var c = a.charAt(0).toUpperCase() + a.substr(1),
+            d = (a + " " + o.join(c + " ") + c).split(" ");
+        return B(d, b)
+    }
+    function B(a, b) {
+        for (var d in a) if (k[a[d]] !== c) return b == "pfx" ? a[d] : !0;
+        return ! 1
+    }
+    function A(a, b) {
+        return !! ~ ("" + a).indexOf(b)
+    }
+    function z(a, b) {
+        return typeof a === b
+    }
+    function y(a, b) {
+        return x(n.join(a + ";") + (b || ""))
+    }
+    function x(a) {
+        k.cssText = a
+    }
+    var d = "2.0.6",
+        e = {},
+        f = !0,
+        g = b.documentElement,
+        h = b.head || b.getElementsByTagName("head")[0],
+        i = "modernizr",
+        j = b.createElement(i),
+        k = j.style,
+        l,
+        m = Object.prototype.toString,
+        n = " -webkit- -moz- -o- -ms- -khtml- ".split(" "),
+        o = "Webkit Moz O ms Khtml".split(" "),
+        p = {},
+        q = {},
+        r = {},
+        s = [],
+        t = function(a, c, d, e) {
+            var f, h, j, k = b.createElement("div");
+            if (parseInt(d, 10)) while (d--) j = b.createElement("div"),
+                j.id = e ? e[d] : i + (d + 1),
+                k.appendChild(j);
+            f = ["&shy;", "<style>", a, "</style>"].join(""),
+                k.id = i,
+                k.innerHTML += f,
+                g.appendChild(k),
+                h = c(k, a),
+                k.parentNode.removeChild(k);
+            return !! h
+        },
+        u,
+        v = {}.hasOwnProperty,
+        w; ! z(v, c) && !z(v.call, c) ? w = function(a, b) {
+        return v.call(a, b)
+    }: w = function(a, b) {
+        return b in a && z(a.constructor.prototype[b], c)
+    };
+    var D = function(a, c) {
+        var d = a.join(""),
+            f = c.length;
+        t(d,
+            function(a, c) {
+                var d = b.styleSheets[b.styleSheets.length - 1],
+                    g = d.cssRules && d.cssRules[0] ? d.cssRules[0].cssText: d.cssText || "",
+                    h = a.childNodes,
+                    i = {};
+                while (f--) i[h[f].id] = h[f];
+                e.csstransforms3d = i.csstransforms3d.offsetLeft === 9
+            },
+            f, c)
+    } ([, ["@media (", n.join("transform-3d),("), i, ")", "{#csstransforms3d{left:9px;position:absolute}}"].join("")], [, "csstransforms3d"]);
+    p.csstransforms = function() {
+        return !! B(["transformProperty", "WebkitTransform", "MozTransform", "OTransform", "msTransform"])
+    },
+        p.csstransforms3d = function() {
+            var a = !!B(["perspectiveProperty", "WebkitPerspective", "MozPerspective", "OPerspective", "msPerspective"]);
+            a && "webkitPerspective" in g.style && (a = e.csstransforms3d);
+            return a
+        },
+        p.csstransitions = function() {
+            return C("transitionProperty")
+        };
+    for (var E in p) w(p, E) && (u = E.toLowerCase(), e[u] = p[E](), s.push((e[u] ? "": "no-") + u));
+    x(""),
+        j = l = null,
+    a.attachEvent &&
+    function() {
+        var a = b.createElement("div");
+        a.innerHTML = "<elem></elem>";
+        return a.childNodes.length !== 1
+    } () &&
+    function(a, b) {
+        function s(a) {
+            var b = -1;
+            while (++b < g) a.createElement(f[b])
+        }
+        a.iepp = a.iepp || {};
+        var d = a.iepp,
+            e = d.html5elements || "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
+            f = e.split("|"),
+            g = f.length,
+            h = new RegExp("(^|\\s)(" + e + ")", "gi"),
+            i = new RegExp("<(/*)(" + e + ")", "gi"),
+            j = /^\s*[\{\}]\s*$/,
+            k = new RegExp("(^|[^\\n]*?\\s)(" + e + ")([^\\n]*)({[\\n\\w\\W]*?})", "gi"),
+            l = b.createDocumentFragment(),
+            m = b.documentElement,
+            n = m.firstChild,
+            o = b.createElement("body"),
+            p = b.createElement("style"),
+            q = /print|all/,
+            r;
+        d.getCSS = function(a, b) {
+            if (a + "" === c) return "";
+            var e = -1,
+                f = a.length,
+                g, h = [];
+            while (++e < f) {
+                g = a[e];
+                if (g.disabled) continue;
+                b = g.media || b,
+                q.test(b) && h.push(d.getCSS(g.imports, b), g.cssText),
+                    b = "all"
+            }
+            return h.join("")
+        },
+            d.parseCSS = function(a) {
+                var b = [],
+                    c;
+                while ((c = k.exec(a)) != null) b.push(((j.exec(c[1]) ? "\n": c[1]) + c[2] + c[3]).replace(h, "$1.iepp_$2") + c[4]);
+                return b.join("\n")
+            },
+            d.writeHTML = function() {
+                var a = -1;
+                r = r || b.body;
+                while (++a < g) {
+                    var c = b.getElementsByTagName(f[a]),
+                        d = c.length,
+                        e = -1;
+                    while (++e < d) c[e].className.indexOf("iepp_") < 0 && (c[e].className += " iepp_" + f[a])
+                }
+                l.appendChild(r),
+                    m.appendChild(o),
+                    o.className = r.className,
+                    o.id = r.id,
+                    o.innerHTML = r.innerHTML.replace(i, "<$1font")
+            },
+            d._beforePrint = function() {
+                p.styleSheet.cssText = d.parseCSS(d.getCSS(b.styleSheets, "all")),
+                    d.writeHTML()
+            },
+            d.restoreHTML = function() {
+                o.innerHTML = "",
+                    m.removeChild(o),
+                    m.appendChild(r)
+            },
+            d._afterPrint = function() {
+                d.restoreHTML(),
+                    p.styleSheet.cssText = ""
+            },
+            s(b),
+            s(l);
+        d.disablePP || (n.insertBefore(p, n.firstChild), p.media = "print", p.className = "iepp-printshim", a.attachEvent("onbeforeprint", d._beforePrint), a.attachEvent("onafterprint", d._afterPrint))
+    } (a, b),
+        e._version = d,
+        e._prefixes = n,
+        e._domPrefixes = o,
+        e.testProp = function(a) {
+            return B([a])
+        },
+        e.testAllProps = C,
+        e.testStyles = t,
+        g.className = g.className.replace(/\bno-js\b/, "") + (f ? " js " + s.join(" ") : "");
+    return e
+} (window, document,undefined),
+    function(a, b, c) {
+        function k(a) {
+            return ! a || a == "loaded" || a == "complete"
+        }
+        function j() {
+            var a = 1,
+                b = -1;
+            while (p.length - ++b) if (p[b].s && !(a = p[b].r)) break;
+            a && g()
+        }
+        function i(a) {
+            var c = b.createElement("script"),
+                d;
+            c.src = a.s,
+                c.onreadystatechange = c.onload = function() { ! d && k(c.readyState) && (d = 1, j(), c.onload = c.onreadystatechange = null)
+                },
+                m(function() {
+                        d || (d = 1, j())
+                    },
+                    H.errorTimeout),
+                a.e ? c.onload() : n.parentNode.insertBefore(c, n)
+        }
+        function h(a) {
+            var c = b.createElement("link"),
+                d;
+            c.href = a.s,
+                c.rel = "stylesheet",
+                c.type = "text/css";
+            if (!a.e && (w || r)) {
+                var e = function(a) {
+                    m(function() {
+                            if (!d) try {
+                                a.sheet.cssRules.length ? (d = 1, j()) : e(a)
+                            } catch(b) {
+                                b.code == 1e3 || b.message == "security" || b.message == "denied" ? (d = 1, m(function() {
+                                        j()
+                                    },
+                                    0)) : e(a)
+                            }
+                        },
+                        0)
+                };
+                e(c)
+            } else c.onload = function() {
+                d || (d = 1, m(function() {
+                        j()
+                    },
+                    0))
+            },
+            a.e && c.onload();
+            m(function() {
+                    d || (d = 1, j())
+                },
+                H.errorTimeout),
+            !a.e && n.parentNode.insertBefore(c, n)
+        }
+        function g() {
+            var a = p.shift();
+            q = 1,
+                a ? a.t ? m(function() {
+                        a.t == "c" ? h(a) : i(a)
+                    },
+                    0) : (a(), j()) : q = 0
+        }
+        function f(a, c, d, e, f, h) {
+            function i() { ! o && k(l.readyState) && (r.r = o = 1, !q && j(), l.onload = l.onreadystatechange = null, m(function() {
+                    u.removeChild(l)
+                },
+                0))
+            }
+            var l = b.createElement(a),
+                o = 0,
+                r = {
+                    t: d,
+                    s: c,
+                    e: h
+                };
+            l.src = l.data = c,
+            !s && (l.style.display = "none"),
+                l.width = l.height = "0",
+            a != "object" && (l.type = d),
+                l.onload = l.onreadystatechange = i,
+                a == "img" ? l.onerror = i: a == "script" && (l.onerror = function() {
+                    r.e = r.r = 1,
+                        g()
+                }),
+                p.splice(e, 0, r),
+                u.insertBefore(l, s ? null: n),
+                m(function() {
+                        o || (u.removeChild(l), r.r = r.e = o = 1, j())
+                    },
+                    H.errorTimeout)
+        }
+        function e(a, b, c) {
+            var d = b == "c" ? z: y;
+            q = 0,
+                b = b || "j",
+                C(a) ? f(d, a, b, this.i++, l, c) : (p.splice(this.i++, 0, a), p.length == 1 && g());
+            return this
+        }
+        function d() {
+            var a = H;
+            a.loader = {
+                load: e,
+                i: 0
+            };
+            return a
+        }
+        var l = b.documentElement,
+            m = a.setTimeout,
+            n = b.getElementsByTagName("script")[0],
+            o = {}.toString,
+            p = [],
+            q = 0,
+            r = "MozAppearance" in l.style,
+            s = r && !!b.createRange().compareNode,
+            t = r && !s,
+            u = s ? l: n.parentNode,
+            v = a.opera && o.call(a.opera) == "[object Opera]",
+            w = "webkitAppearance" in l.style,
+            x = w && "async" in b.createElement("script"),
+            y = r ? "object": v || x ? "img": "script",
+            z = w ? "img": y,
+            A = Array.isArray ||
+                function(a) {
+                    return o.call(a) == "[object Array]"
+                },
+            B = function(a) {
+                return Object(a) === a
+            },
+            C = function(a) {
+                return typeof a == "string"
+            },
+            D = function(a) {
+                return o.call(a) == "[object Function]"
+            },
+            E = [],
+            F = {},
+            G,
+            H;
+        H = function(a) {
+            function f(a) {
+                var b = a.split("!"),
+                    c = E.length,
+                    d = b.pop(),
+                    e = b.length,
+                    f = {
+                        url: d,
+                        origUrl: d,
+                        prefixes: b
+                    },
+                    g,
+                    h;
+                for (h = 0; h < e; h++) g = F[b[h]],
+                g && (f = g(f));
+                for (h = 0; h < c; h++) f = E[h](f);
+                return f
+            }
+            function e(a, b, e, g, h) {
+                var i = f(a),
+                    j = i.autoCallback;
+                if (!i.bypass) {
+                    b && (b = D(b) ? b: b[a] || b[g] || b[a.split("/").pop().split("?")[0]]);
+                    if (i.instead) return i.instead(a, b, e, g, h);
+                    e.load(i.url, i.forceCSS || !i.forceJS && /css$/.test(i.url) ? "c": c, i.noexec),
+                    (D(b) || D(j)) && e.load(function() {
+                        d(),
+                        b && b(i.origUrl, h, g),
+                        j && j(i.origUrl, h, g)
+                    })
+                }
+            }
+            function b(a, b) {
+                function c(a) {
+                    if (C(a)) e(a, h, b, 0, d);
+                    else if (B(a)) for (i in a) a.hasOwnProperty(i) && e(a[i], h, b, i, d)
+                }
+                var d = !!a.test,
+                    f = d ? a.yep: a.nope,
+                    g = a.load || a.both,
+                    h = a.callback,
+                    i;
+                c(f),
+                    c(g),
+                a.complete && b.load(a.complete)
+            }
+            var g, h, i = this.yepnope.loader;
+            if (C(a)) e(a, 0, i, 0);
+            else if (A(a)) for (g = 0; g < a.length; g++) h = a[g],
+                C(h) ? e(h, 0, i, 0) : A(h) ? H(h) : B(h) && b(h, i);
+            else B(a) && b(a, i)
+        },
+            H.addPrefix = function(a, b) {
+                F[a] = b
+            },
+            H.addFilter = function(a) {
+                E.push(a)
+            },
+            H.errorTimeout = 1e4,
+        b.readyState == null && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", G = function() {
+                b.removeEventListener("DOMContentLoaded", G, 0),
+                    b.readyState = "complete"
+            },
+            0)),
+            a.yepnope = d()
+    } (window, document,undefined),
+    Modernizr.load = function() {
+        yepnope.apply(window, [].slice.call(arguments, 0))
+    };

+ 437 - 2
2019专题/1906lol自走棋专题/src/sass/index.scss

@@ -7,6 +7,8 @@ $pingfan:PingFangSC-Regular;
 @import "base/base";
 @import "base/mixins";
 @import "module/\ hero";
+@import "module/gallery";
+
 
 /*通用变量*/
 
@@ -27,10 +29,443 @@ body {
     color: #333333;
     background: url(/src/img/bg.jpg) no-repeat center top #2e1230;
 }
-
+.video-cover{
+    display: none;
+    width:100%;
+    height:100%;
+    position: fixed;
+    left:0;
+    top:0;
+    background:rgba(0,0,0,0.6);
+    z-index:10;
+    .video-wrap{
+        width: 1366px;
+        height: 768px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%,-50%,0);
+        position: relative;
+        span{
+            display: inline-block;
+            font-size: 40px;
+            color: #fff;
+            position: absolute;
+            right: -30px;
+            top: -40px;
+            font-style: inherit;
+            cursor: pointer;
+            z-index:11
+        }
+    }
+}
 .page-index {
     margin: 486px auto 0;
     width: 1000px;
     background: #fff;
     min-height: 500px;
-}
+    padding:0 20px;
+    box-sizing: border-box;
+    padding-bottom:20px;
+    position: relative;
+    .title{
+        display: flex;
+        &::before{
+            content:'';
+            display: inline-block;
+            width:401px;
+            height:13px;
+            background:url(/src/img/icon-title-left.png) center;
+            background-size:cover; 
+            margin:auto 0 ;     
+        }
+        &::after{
+            content:'';
+            display: inline-block;
+            width:401px;
+            height:13px;
+            background:url(/src/img/icon-title-right.png) center;
+            background-size:cover;   
+            margin:auto 0 ;     
+        }
+        span{
+            font-size:24px;
+            color:#000;
+            font-weight: bold;
+            line-height: 24px;   
+            padding:0 24px;
+        }
+    }
+    .game-intro{
+        padding-top:43px;
+        .describe{
+            margin-top:34px;
+        }  
+        .video-box{
+            width:391px;
+            height:221px;
+            position: relative;
+            display: inline-block;
+            .play-btn{
+                display: inline-block;
+                width:64px;
+                height: 64px;
+                background:url(/src/img/icon-play.png);
+                position: absolute;
+                left:0;
+                right:0;
+                top:0;
+                bottom:0;
+                margin:auto;
+                cursor: pointer;
+            }
+        }
+        .desc-left{
+            font-size:0;
+            vertical-align: top;
+            display: inline-block;
+            width:566px;
+            height:221px;
+            border:1px  solid #E7E7E7;
+            border-left:0;
+            box-sizing: border-box;
+            text-align: center;
+            line-height: 221px;
+            margin-left:-3px;
+            .left{
+                vertical-align: middle;
+                width:76px;
+                height:76px;
+                line-height: 76px;
+                border:1px solid #C49C3C;
+                text-align: center;
+                display: inline-block;
+                .text{
+                    display: inline-block;
+                    width:48px;
+                    height:48px;
+                    font-size:24px;
+                    color:#C49C3C;
+                    font-weight: bold;
+                    padding-top:14px;
+                    line-height: 1;
+                }
+            }
+            .text-box{
+                vertical-align: middle;
+                width:364px;
+                line-height:30px;
+                font-size:14px;
+                color:#000;
+                display: inline-block;
+                margin-left:29px;
+                text-align: left;
+            }
+        }
+        .classification{
+            margin-top:41px;
+            .title-box{
+                &::before{
+                    content:'';
+                    display: inline-block;
+                    width:93px;
+                    height:13px;
+                    background:url(/src/img/icon-title-left-small.png) center;
+                    background-size:cover; 
+                    margin:auto 0 ;     
+                }
+                &::after{
+                    content:'';
+                    display: inline-block;
+                    width:104px;
+                    height:13px;
+                    background:url(/src/img/icon-title-right-small.png) center;
+                    background-size:cover;   
+                    margin:auto 0 ;     
+                }
+                span{
+                    font-size:24px;
+                    color:#000;
+                    font-weight: bold;
+                    line-height: 24px;   
+                    padding:0 13px 0 16px;
+                }
+            }
+            .clsfi-detail{
+                display: inline-block;
+                vertical-align: top;
+            }
+            .raiders,.game-video{
+                margin-left:27px;
+            }
+            .content-box{
+                margin-top:15px;
+                .square{
+                    display: inline-block;
+                    width:4px;
+                    height:4px;
+                    background:#bdbdbd;
+                    vertical-align: middle;
+                    margin-right:4px;
+                }
+                li{
+                    font-size:14px;
+                    color:#000;
+                    line-height: 30px;
+                    cursor: pointer;
+                    span{
+                        color:#000;
+                    }
+                    .date{
+                        color:#999;
+                        margin-left:13px;
+                    }
+                    &:nth-child(5){
+                        margin-top:5px;
+                    }
+                }
+            }
+            .more-info{
+                width:283px;
+                height:35px;
+                background:#f6f6f6;
+                font-size:12px;
+                color:#999;
+                text-align: center;
+                line-height: 35px;
+                margin-top:9px;
+                cursor: pointer;
+            }
+            .gv-box{
+                width:323px;
+                display: inline-block;
+                margin-top:11px;
+                li{
+                    display: inline-block;
+                    margin-top:11px;
+                    position: relative;
+                    cursor: pointer;
+                    .more-video{
+                        width:62px;
+                        height:14px;
+                        display: inline-block;
+                        position: absolute;
+                        left:0;
+                        right: 0;
+                        bottom: 0;
+                        top: 0;
+                        margin: auto;
+                        vertical-align: middle;
+                        font-size:12px;
+                        color:#fff;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+    }
+    .game-rule{
+        margin-top:43px;
+        .sub-title{
+           width:958px;
+           height:47px;
+           background:rgba(231,231,231,0.39);
+           line-height: 47px;
+           margin-top:30px;
+           .st-icon{
+               display: inline-block;
+               width:11px;
+               height:11px;
+               background:url(/src/img/icon-circle.png);
+               margin-left:8px;
+           } 
+           .st-text{
+               font-size:18px;
+               color:#c49c3c;
+               font-weight: bold;
+               margin:0 17px 0 3px;
+           }
+           .st-text-detail{
+               font-size:14px;
+               color:#adacac;
+           }
+        }
+        .gr-tab-box{
+            margin-top:20px;
+            .tab-box{
+                .tab-item{
+                    display: inline-block;
+                    width:76px;
+                    height:39px;
+                    text-align: center;
+                    line-height: 39px;
+                    position: relative;
+                    border:1px solid #fff;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                }
+                .active{
+                    border:1px solid #E7E7E7;
+                    color:#C49C3C ;
+                    font-weight: bold;
+                    &::after{
+                        content:'';
+                        position: absolute;
+                        left:0;
+                        width:74px;
+                        height:2px;
+                        bottom:-2px;
+                        background:#fff;
+                    }
+                }
+            }
+            .content-wrap{
+                .content-item{
+                    display: none;
+                    border:1px solid #E7E7E7;
+                    padding:17px;
+                    font-size:14px;
+                    color:#000;
+                    line-height:24px;
+                }
+            }
+        }
+      
+        .preview-wrap {
+            margin-top:40px;
+            position: relative;
+            .preview-slider {
+                width:420px;
+                height:276px;
+                margin: 0 auto;
+                padding-bottom: 50px;
+                position: relative;
+                a {
+                    width:420px;
+                    height:276px;
+                    padding: 2px;
+                    position: absolute;
+                    z-index: 3;
+                    top: 0;
+                    left: 0;
+                    display: block;
+                    img {
+                        height: 100%;
+                        width: 100%;
+                        display: block;
+                    }
+                }
+            }
+            nav {
+                .preview-switch {
+                    height: 60px;
+                    width: 30px;
+                    position: absolute;
+                    top: 50%;
+                    margin: -55px 0 0;
+                    background: center no-repeat;
+                    font-size:50px;
+                    color:red;
+                    &.prev {
+                        left: 50%;
+                        margin-left: -200px;
+                        background-image: url(/src/img/icon-arrow-left.png);
+                    }
+                    &.next {
+                        right: 50%;
+                        margin-right: -200px;
+                        background-image: url(/src/img/icon-arrow-right.png);
+                    }
+                }
+            }
+        }
+    }
+    .tab-wrap-two{
+        margin-top:50px;
+        .tab-box{
+            margin-top:31px;
+            .tab-item{
+                display: inline-block;
+                width:62px;
+                height:33px;
+                line-height:33px;
+                border:1px solid #fff;
+                margin:0 0 0 27px;
+                text-align: center;
+                box-sizing: border-box;
+                cursor: pointer;
+                &:nth-child(1),&:nth-child(11){
+                    margin-left:0;
+                }
+            }
+            .active{
+                border:1px solid #c49c3c;
+                color:#c49c3c;
+            }
+        }
+        .content-wrap{
+            margin-top:19px;
+            .content-item{
+                border:1px solid #E7E7E7;
+                display: none;
+                padding:17px;
+                font-size:14px;
+                color:#000;
+                line-height:24px;
+            }
+        }
+    }
+    .game-info{
+        margin-top:43px;
+    }
+
+}
+    .left-side-box{
+        position: fixed;
+        top:140px;
+        right:20px;
+        z-index:124;
+        // margin:100px 0 0 -100px;
+        .side-title{
+            width:130px;
+            height:45px;
+            background:url(/src/img/icon-side-title.png) no-repeat;
+            background-size:cover;
+            font-size:16px;
+            color:#000;
+            font-weight: bold;
+            line-height: 45px;
+            text-align: center;
+            padding-right:3px;
+        }
+        .side-content-box{
+            margin-top:8px;
+            width:131px;
+            height:276px;
+            background:url(/src/img/icon-side-box.png) no-repeat;
+            text-align: center;
+            padding: 14px 11px;
+            box-sizing: border-box;
+            .item{
+                width:109px;
+                height:37px;
+                line-height: 37px;
+                padding-bottom:5px;
+                
+            }
+            .active{
+                background:#C49C3C;
+                a{
+                    color: #fff;
+                }
+            }
+            a{
+                text-decoration:none;
+                outline: none;
+                font-size:16px;
+                color:#000;
+
+            }
+        }
+      
+    }

+ 110 - 0
2019专题/1906lol自走棋专题/src/sass/module/gallery.scss

@@ -0,0 +1,110 @@
+.dg-container{
+    width: 100%;
+    height: 463px;
+    margin-top: 64px;
+    position: relative;
+}
+.dg-cont{
+    position: absolute;
+    font-size: 18px;
+    color: #fff;
+    font-weight: bold;
+    bottom: 15px;
+    left: 27px;
+}
+.dg-wrapper{
+    height: 100%;
+    margin: 0 auto;
+    position: relative;
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    -o-transform-style: preserve-3d;
+    -ms-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-perspective: 1000px;
+    -moz-perspective: 1000px;
+    -o-perspective: 1000px;
+    -ms-perspective: 1000px;
+    perspective: 1000px;
+}
+.dg-wrapper a{
+    width: 100%;
+    height: 100%;
+    display: block;
+    // position: absolute;
+    // left: 0;
+    // top: 0;
+    // box-shadow: 0px 14px 38px rgba(0,0,0,0.25);
+}
+.dg-wrapper a.dg-transition{
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+}
+.dg-wrapper a img{
+    display: block;
+}
+.dg-wrapper a div{
+    font-style: italic;
+    text-align: center;
+    line-height: 50px;
+    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
+    color: #333;
+    font-size: 16px;
+    width: 100%;
+    bottom: -55px;
+    display: none;
+    position: absolute;
+}
+.dg-wrapper a.dg-center div{
+    display: block;
+}
+//����
+.dg-container nav{
+    z-index: 1000;
+}
+.dg-prev,.dg-next{
+    // position: absolute;
+    // left: 50%;
+    // top: 50%;
+    // margin-top: -50px;
+    // width: 44px;
+    // height: 100px;
+    cursor: pointer;
+    // background: #ffba3a;
+    i{
+        position: absolute;
+        top: 50%;
+        margin-top: -8px;
+        display: block;
+        width: 0; 
+        height: 0;
+        border: 8px solid #FFF;
+    }
+}
+.dg-prev{
+    margin-left: -610px;
+    i{
+        left: 8px;
+        border-color: transparent #FFF transparent  transparent;
+    }
+    &:hover{
+        i{
+            border-color: transparent #563c09 transparent  transparent;
+        }
+    }
+}
+.dg-next{
+    // margin-left: 566px;
+    i{
+        right: 8px;
+        border-color: transparent transparent  transparent #FFF;
+    }
+    &:hover{
+        i{
+            border-color: transparent transparent  transparent #563c09;
+        }
+    }
+}

+ 10 - 10
2019专题/1906武魂2专题/src/modules/page/index.js

@@ -1,4 +1,4 @@
-var seaLoader = require('seaLoader');
+// var seaLoader = require('seaLoader');
 var dialog = require('dialog.js');
 require('jquery.gallery.js');
 
@@ -257,15 +257,15 @@ var V = {
             V.renderClock($("#taskClock"));
         }, 1000);
 
-        var dgRollLength = $('#dg-container-slide .dg-wrapper a').length,
-            dgRollHtml = $('#dg-container-slide .dg-wrapper').html();
-        if (dgRollLength < 3) {
-            $('#dg-container-slide .dg-wrapper').append(dgRollHtml);
-        }
-        $('#dg-container-slide').gallery({
-            support2d: true,
-            supportTrans: true
-        });
+        // var dgRollLength = $('#dg-container-slide .dg-wrapper a').length,
+        //     dgRollHtml = $('#dg-container-slide .dg-wrapper').html();
+        // if (dgRollLength < 3) {
+        //     $('#dg-container-slide .dg-wrapper').append(dgRollHtml);
+        // }
+        // $('#dg-container-slide').gallery({
+        //     support2d: true,
+        //     supportTrans: true
+        // });
     },
     renderLogin: function () {
         dwUDBProxy.isKaLogin(function (ret) {