优化

2019专题/1906lol自走棋专题/src/_index.html

@@ -67,10 +67,30 @@
                         <span>游戏视频</span>
                     </div>
                     <ul class="content-box gv-box">
-                        <li> <a href=""><img src="http://fed.webdev.ouj.com/156x87" alt="" class="gv-img"><p class="gv-title">集美大学让一追二收获高校联赛冠军</p></a></li>
-                        <li> <a href=""><img src="http://fed.webdev.ouj.com/156x87" alt=""  class="gv-img"><p class="gv-title">集美大学让一追二</p></a> </li>
-                        <li> <a href=""><img src="http://fed.webdev.ouj.com/156x87" alt=""  class="gv-img"><p class="gv-title">集美大学让一追二收获高校联赛冠军</p></a> </li>
-                        <li> <a href=""><img src="http://fed.webdev.ouj.com/156x87" alt=""  class="gv-img"><p class="gv-title">集美大学让一追二收获</p></a> </li>
+                        <li> 
+                            <a href="#"><img src="http://fed.webdev.ouj.com/156x87" alt="" class="gv-img">
+                                <p class="gv-title">集美大学让一追二收获高校联赛冠军</p>
+                                <div class="icon-play"><i></i></div>
+                            </a>
+                        </li>
+                        <li> 
+                            <a href=""><img src="http://fed.webdev.ouj.com/156x87" alt="" class="gv-img">
+                                <p class="gv-title">集美大学让一追二收获高校联赛冠军</p>
+                                <div class="icon-play"><i></i></div>
+                            </a>
+                        </li>
+                        <li> 
+                            <a href=""><img src="http://fed.webdev.ouj.com/156x87" alt="" class="gv-img">
+                                <p class="gv-title">集美大学让一追二收获高校联赛冠军</p>
+                                <div class="icon-play"><i></i></div>
+                            </a>
+                        </li>
+                        <li> 
+                            <a href=""><img src="http://fed.webdev.ouj.com/156x87" alt="" class="gv-img">
+                                <p class="gv-title">集美大学让一追二收获高校联赛冠军</p>
+                                <div class="icon-play"><i></i></div>
+                            </a>
+                        </li>
                     </ul>
                     <div class="more-info"><a href="">更多视频》</a></div>
                 </div>

2019专题/1906lol自走棋专题/src/modules/hero/hero.js

@@ -11,7 +11,6 @@ class Hero {
         var self = this
         $.ajax({
             url: 'http://lol.duowan.com/s/zzqdata.js',
-            // url: 'http://lol.duowan.com/s/testData.js',
             dataType: 'jsonp',
             jsonpCallback: 'zzqjsonp',
             success: function(ret) {

2019专题/1906lol自走棋专题/src/modules/page/index.js

@@ -119,21 +119,19 @@
                     }
                 }
             })
+
+            // 视频
+            $('.gv-box').find('li').hover(function(){
+                console.log($(this))
+                $(this).addClass('activeLi')
+                $(this).find('a').addClass('activeA')
+
+            },function(){
+                $(this).removeClass('activeLi')
+                $(this).find('a').removeClass('activeA')
+            })
         }
-        // // 获取主题距离顶部距离
-        // getMainInstance() {
-        //     this.instance = $('[data-name="gameIntro"]').offset().top;
-        //     this.handleScrollChange(this.instance); // 处理页面滚动时候对应右侧固定栏位置
-        // },
-        // // 处理右侧固定栏位置
-        // handleScrollChange (instance) {
-        //     var scrollToTopInstance = $(window).scrollTop(); // 目前页面滚动距离
-        //     if (instance < scrollToTopInstance) {
-        //         $('[data-name="leftSideBox"]').css('top', scrollToTopInstance - instance); // 设置位置
-        //     } else {
-        //         $('[data-name="leftSideBox"]').css('top', 0); // 重置位置为顶部
-        //     }
-        // }
+       
     }
     C.init()
 });

2019专题/1906lol自走棋专题/src/page1.html

@@ -7,12 +7,14 @@
     <base target="_blank" />
     <title>lol自走棋</title>
     <link href="sass/page1.scss" rel="stylesheet">
+    <script src="lib/jquery.js"></script><!--ignore-->
+
 </head>
 <body>
   <div class="container">
     <div class="content-box">
       <div class="bread">
-          <a href="http://lol.duowan.com/">英雄联盟专区</a> > <a href="http://lol.duowan.com/1906/m_425042631560.html">云顶之弈</a> >  <span class="text">小小英雄幽灵系列</span>
+          <a href="http://lol.duowan.com/">英雄联盟专区</a> > <a href="http://lol.duowan.com/1906/m_425042631560.html" >云顶之弈</a> >  <span class="text">小小英雄幽灵系列</span>
       </div>
       <h1 class="title">
         鬼魂系列
@@ -110,9 +112,19 @@
 
 
   <script src="lib/mod.js"></script>
-  <script src="lib/jquery.js"></script>
 
   <script id="dw-footer-without-gem" charset="utf-8" src="//pub.dwstatic.com/common/dwFoot/duowanFooter.js?201809"></script><!--ignore-->
 
+    <script>
+    $(function(){
+      $('.bread').find('a').hover(function(){
+        $(this).addClass('hoverStyle')
+        console.log($(this))
+      },function(){
+        $(this).removeClass('hoverStyle')
+      })
+    })
+      
+      </script>
 </body>
 </html>    

2019专题/1906lol自走棋专题/src/page2.html

@@ -8,6 +8,7 @@
     <base target="_blank" />
     <title>lol自走棋</title>
     <link href="sass/page2.scss" rel="stylesheet">
+    <script src="lib/jquery.js"></script><!--ignore-->
     
 </head>
 
@@ -111,13 +112,26 @@
         </div>
     </div>
 
+    <div class="left-side-box" >
+            <div class="side-title"><a href="http://lol.duowan.com/">专区首页</a> </div>
+            <ul class="side-content-box">
+                <li class="item active"><a href="http://lol.duowan.com/1906/m_425042631560.html" target="_self" class="label" id="a1">云顶之弈</a></li>
+            </ul>
+        </div>
     <link rel="import" href="./modules/footer/footer.html?__inline" />
 
     <script src="lib/mod.js"></script>
-    <script src="lib/jquery.js"></script>
 
     <script>
-        // require('./modules/page/index.js')
+        $(function(){
+            $('.crumb').find('a').hover(function(){
+                $(this).addClass('hoverStyle')
+                console.log($(this))
+            },function(){
+                $(this).removeClass('hoverStyle')
+            })
+        })
+      
     </script>
     <script id="dw-footer-without-gem" charset="utf-8" src="//pub.dwstatic.com/common/dwFoot/duowanFooter.js?201809"></script><!--ignore-->
 

2019专题/1906lol自走棋专题/src/sass/index.scss

@@ -289,27 +289,9 @@ body {
                     margin-top:11px;
                     position: relative;
                     cursor: pointer;
-                vertical-align: top;
-
-                    .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;
-                        display: none;
-                        a{
-                            color:#fff;
-                        }
-                    }
+                    vertical-align: top;
+                 
+                    
                     &:nth-child(even){
                         margin-left:5px;
                     }
@@ -320,7 +302,7 @@ body {
                     .gv-img{
                         width:156px;
                         height:87px;
-                    }
+                     }
                     .gv-title{
                         width:154px;
                         font-size:12px;
@@ -329,6 +311,38 @@ body {
                         margin-top:2px;
                     }
                 }
+                .activeLi{
+                    .icon-play{
+                        border:2px solid #C49C3C ;
+
+                        width:156px;
+                        height:87px;
+                        position: absolute;
+                        background:rgba(0,0,0,0.6);
+                        top:0;
+                        left:0;
+                        i{
+                            display: inline-block;
+                            width:50px;
+                            height:50px;
+                            position: absolute;
+                            top:50%;
+                            left:50%;
+                            margin-top:-25px;
+                            margin-left:-25px;
+                           background:url(/src/img/icon-video-play.png) no-repeat;
+                           background-size:cover; 
+                        }
+                    }
+                    .activeA{
+                        text-decoration: underline;
+                        color:#C49C3C;
+                        .gv-title{
+                            color:#C49C3C;
+                        }
+                    }
+                    
+                }
             }
         }
     }

2019专题/1906lol自走棋专题/src/sass/page1.scss

@@ -46,6 +46,10 @@ body{
         color: #999;
       }
     }
+    .hoverStyle{
+        text-decoration:underline ;
+        color:#551a8b;
+    }
 
     .title{
       font-size: 18px;
@@ -156,9 +160,9 @@ body{
       .side-content-box{
           margin-top:8px;
           width:174px;
-          height:366px;
-          background:url(/src/img/icon-side-box.png) no-repeat;
-          background-size:cover;
+          height:100px;
+          background:url(/src/img/side-small.png) no-repeat;
+          background-size:contain;
           text-align: center;
           padding: 23px 11px;
           box-sizing: border-box;
@@ -178,7 +182,6 @@ body{
               outline: none;
               font-size:16px;
               color:#000;
-  
           }
       }
     

2019专题/1906lol自走棋专题/src/sass/page2.scss

@@ -53,10 +53,14 @@ body {
         .text{
             color:#999;
         }
-        a{
-            text-decoration: none;
-            color:#333;
-        }
+        // a{
+        //     text-decoration: none;
+        //     color:#333;
+        // }
+    }
+    .hoverStyle{
+        text-decoration:underline ;
+        color:#551a8b;
     }
     .hero-intro{
         position: relative;
@@ -310,4 +314,49 @@ body {
             box-sizing: border-box;
         }
     }
+}
+.left-side-box{
+    position: fixed;
+    top:174px;
+    right:84px;
+    z-index:124;
+    .side-title{
+        width:174px;
+        height:57px;
+        background:url(/src/img/icon-side-title.png) no-repeat;
+        background-size:cover;
+        font-size:16px;
+        color:#000;
+        font-weight: bold;
+        line-height: 59px;
+        text-align: center;
+    }
+    .side-content-box{
+        margin-top:8px;
+        width:174px;
+        height:366px;
+        background:url(/src/img/side-small.png) no-repeat;
+        background-size:contain;
+        text-align: center;
+        padding: 23px 11px;
+        box-sizing: border-box;
+        .item{
+            width:151px;
+            height:55px;
+            line-height: 55px;
+        }
+        .active{
+            background:#C49C3C;
+            a{
+                color: #fff;
+            }
+        }
+        a{
+            text-decoration:none;
+            outline: none;
+            font-size:16px;
+            color:#000;
+        }
+    }
+  
 }