Browse Source

Merge branch '2019zt' of http://svn.ouj.com:3000/FED/dwweb-pc into 2019zt

DW-PC\DW 5 years ago
parent
commit
c313b51c9a

+ 95 - 248
2019专题/多玩游戏MCN/src/_index.html

@@ -11,12 +11,13 @@
     <title>多玩游戏网 | 多玩游戏 多交朋友</title>
     <link href="sass/global.scss" rel="stylesheet">
     <script src="//www.duowan.com/assets/js/jquery.js"></script>
-    <script src="//pub.dwstatic.com/common/js/dwudbproxy.js "></script>
-    <base target="_blank"/>
+    <script src="//pub.dwstatic.com/common/js/dwudbproxy.js"></script>
+    <base target="_blank" />
 </head>
 
 <body>
-    <div class="g-head_top">
+    <script id="without-navplus" src="//pub.dwstatic.com/common/dwNavbar/navbar.js?type=ka"></script>
+    <!-- <div class="g-head_top">
         <div class="g-inner">
             <div class="g-head-left">
                 <h1 class="g-logo-title">
@@ -33,257 +34,16 @@
                 </ul>
             </div>
         </div>
-    </div>
+    </div> -->
     <div class="page-dwmcn">
         <div class="mod-primary" style="background-image: url(/src/img/bg-primary.jpg);"></div>
         <div class="mod-list">
             <div class="mod-title title1">游戏短视频矩阵</div>
-            <div class="mod-inner">
-                <ul class="mcn-list">
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                </ul>
-                <span class="mcn-more">查看更多</span>
-            </div>
+            <div class="mod-inner" data-render="videoMatrix"></div>
         </div>
         <div class="mod-list">
             <div class="mod-title title2">自媒体矩阵</div>
-            <div class="mod-inner">
-                <ul class="mcn-list">
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                    <li class="mcn-item"><a href="#" target="_blank">
-                        <p class="cover">
-                            <img src="" alt="" />
-                        </p>
-                        <div class="content">
-                            <h3 class="title">不可思议的游戏</h3>
-                            <div class="infos">
-                                <p class="tag">游戏领域 / 综合游戏</p>
-                                <p class="fans">粉丝200万</p>
-                            </div>
-                            <div class="text">抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频</div>
-                        </div>
-                    </a></li>
-                </ul>
-            </div>
+            <div class="mod-inner" data-render="mediaMatrix"></div>
         </div>
         <div class="mod-join">
             <div class="mod-inner">
@@ -310,7 +70,94 @@
     </div>
     <script id="dw-footer-without-gem" charset="utf-8" src="//pub.dwstatic.com/common/dwFoot/duowanFooter.js"></script>
     <script src="lib/mod.js"></script>
-    <script src="http://pub.dwstatic.com/zt2017/xajh//lib/clipboard_86b88c9.js"></script><!--ignore-->
+    <script>
+        // 游戏短视频矩阵
+        var videoMatrix = [
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+        ];
+        // 自媒体矩阵
+        var mediaMatrix = [
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+            {
+                title: '不可思议的游戏',
+                tag: '游戏领域 / 综合游戏',
+                desc: '抖音,快手,火山小视频,西瓜视频,B站微视,爱奇艺,全民小视频',
+                url: '',
+                fans: '200万',
+                cover: ''
+            },
+        ]
+    </script><!--ignore-->
     <script>
         require('modules/page/index.js');
     </script>

+ 45 - 0
2019专题/多玩游戏MCN/src/modules/page/index.js

@@ -0,0 +1,45 @@
+var mcnListTmpl = __inline("/src/tpl/mcnList.tmpl");
+var mcnData = { videoMatrix: videoMatrix, mediaMatrix: mediaMatrix };
+
+var V = {
+    init: function () {
+        this.renderList();
+        this.addMoreBtn();
+        $('body').on('click', '.mcn-more', function () {
+            var $this = $(this),
+                $parent = $this.parent(),
+                $hideItems = $parent.find('.mcn-list .mcn-item.ui-hide'),
+                $hideCover = $hideItems.find('.cover img');
+            $hideItems.show();
+            $this.hide();
+            $hideCover.each(function () {
+                $(this).attr('src', $(this).attr('data-src'));
+                $(this).removeAttr('data-src');
+            });
+        })
+    },
+    renderList: function () {
+        $('[data-render]').each(function () {
+            var $this = $(this),
+                dataList = mcnData[$this.attr('data-render')],
+                dom = mcnListTmpl({ data: dataList });
+            $this.append(dom);
+        });
+    },
+    addMoreBtn: function () {
+        $('.mcn-list').each(function () {
+            var $this = $(this),
+                $mcnListParent = $this.parent(),
+                $mcnItems = $this.find('.mcn-item'),
+                itemLength = $mcnItems.length;
+            if (itemLength > 9) {
+                $mcnListParent.append('<span class="mcn-more">查看更多</span>');
+            }
+        });
+    }
+}
+
+$(function () {
+    V.init();
+    // console.log(mcnData);
+});

+ 0 - 19
2019专题/多玩游戏MCN/src/modules/page/wap.js

@@ -1,19 +0,0 @@
-$(function(){
- 	var type = 1;
-    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
-    	type = 2;
-	}
-	$('.btn-download').click(function(){
-		$.ajax({
-	        type: 'GET',
-	        url: 'http://sy.duowan.com/game/download/',
-	        data: {
-	        	game_id: '73208',
-	        	type: type
-	        },
-	        success: function(ret){
-	        	document.location.href = ret.data.download_url;
-	        }
-	    })
-	});
-})

+ 89 - 67
2019专题/多玩游戏MCN/src/sass/global.scss

@@ -44,71 +44,80 @@ body {
     float: right;
 }
 
-.g-head_top {
-    height: 90px;
-    background: #1e2023;
-    position: relative;
-    z-index: 11;
-    .g-inner {
-        height: 100%;
-        width: 1200px;
-        margin: 0 auto;
-        padding: 0 10px;
-        position: relative;
-        .g-head-left {
-            height: 100%;
-            width: 410px;
-            position: absolute;
-            z-index: 11;
-            top: 0;
-            left: 10px;
-            overflow: hidden;
-            .g-logo-title {
-                height: 100%;
-                width: 162px;
-                margin-right: 15px;
-                float: left;
-                background: url(http://pub.dwstatic.com/p/2017dw/1.5.0/img/g-logo_1bad311.png) left center no-repeat;
-                text-indent: -9999px;
-            }
-            .g-logo-subtitle {
-                height: 100%;
-                width: 132px;
-                float: left;
-                background: url(http://pub.dwstatic.com/p/2017dw/1.5.0/img/g-subtitle_c7b7712.png) left center no-repeat;
-                text-indent: -9999px;
-            }
-        }
-        .g-head-nav {
-            padding-top: 50px;
-            padding-left: 363px;
-            overflow: hidden;
-            ul {
-                li {
-                    float: left;
-                    padding: 0 34px;
-                    position: relative;
-                    &:hover, &.is-active {
-                        a {
-                            color: #fff;
-                            border-bottom: 2px #fff solid;
-                        }
-                    }
-                    a {
-                        font-size: 14px;
-                        color: #929292;
-                        line-height: 28px;
-                        display: block;
-                        &:hover {
-                            text-decoration: none;
-                        }
-                    }
-                }
-            }
-        }
-    }
+.ui-hide {
+    display: none;
 }
 
+// .g-head_top {
+//     height: 90px;
+//     background: #1e2023;
+//     position: relative;
+//     z-index: 11;
+//     .g-inner {
+//         height: 100%;
+//         width: 1200px;
+//         margin: 0 auto;
+//         padding: 0 10px;
+//         position: relative;
+//         .g-head-left {
+//             height: 100%;
+//             width: 410px;
+//             position: absolute;
+//             z-index: 11;
+//             top: 0;
+//             left: 10px;
+//             overflow: hidden;
+//             .g-logo-title {
+//                 height: 100%;
+//                 width: 162px;
+//                 margin-right: 15px;
+//                 float: left;
+//                 background: url(http://pub.dwstatic.com/p/2017dw/1.5.0/img/g-logo_1bad311.png) left center no-repeat;
+//                 text-indent: -9999px;
+//                 a {
+//                     height: 100%;
+//                     width: 100%;
+//                     display: block;
+//                 }
+//             }
+//             .g-logo-subtitle {
+//                 height: 100%;
+//                 width: 132px;
+//                 float: left;
+//                 background: url(http://pub.dwstatic.com/p/2017dw/1.5.0/img/g-subtitle_c7b7712.png) left center no-repeat;
+//                 text-indent: -9999px;
+//             }
+//         }
+//         .g-head-nav {
+//             padding-top: 50px;
+//             padding-left: 363px;
+//             overflow: hidden;
+//             ul {
+//                 li {
+//                     float: left;
+//                     padding: 0 34px;
+//                     position: relative;
+//                     &:hover, &.is-active {
+//                         a {
+//                             color: #fff;
+//                             border-bottom: 2px #fff solid;
+//                         }
+//                     }
+//                     a {
+//                         font-size: 14px;
+//                         color: #929292;
+//                         line-height: 28px;
+//                         display: block;
+//                         &:hover {
+//                             text-decoration: none;
+//                         }
+//                     }
+//                 }
+//             }
+//         }
+//     }
+// }
+
 .page-dwmcn {
     overflow: hidden;
     font-family: '微软雅黑';
@@ -147,6 +156,7 @@ body {
         .mod-inner {
             padding-top: 25px;
             .mcn-list {
+                // max-height: 411px;
                 margin-right: -87px;
                 overflow: hidden;
                 .mcn-item {
@@ -155,6 +165,10 @@ body {
                     float: left;
                     margin: 37px 87px 0 0;
                     overflow: hidden;
+                    transition: transform 0.3s;
+                    &:hover {
+                        transform: translate(0, -5px);
+                    }
                     .cover {
                         height: 100px;
                         width: 100px;
@@ -203,6 +217,12 @@ body {
                             line-height: 18px;
                             text-align: justify;
                             @include ellipsis-column(2);
+                            a {
+                                color: #999;
+                                &:hover {
+                                    text-decoration: underline;
+                                }
+                            }
                         }
                     }
                 }
@@ -231,19 +251,21 @@ body {
         padding: 23px 0 20px;
         overflow: hidden;
         .mod-inner {
+            width: 1199px;
+            padding-left: 1px;
             .join-item {
-                width: 50%;
-                box-sizing: border-box;
+                width: 599px;
+                // box-sizing: border-box;
                 float: left;
                 border-left: 1px #DEDEDE solid;
                 &:first-child {
                     border-left: none;
                 }
                 .wrap {
-                    max-width: 540px;
+                    max-width: 500px;
                     display: table;
                     margin: 0 auto;
-                    padding: 6px 0 0;
+                    padding: 6px 0 10px;
                     .title {
                         font-size: 16px;
                         font-weight: bold;

+ 27 - 0
2019专题/多玩游戏MCN/src/tpl/mcnList.tmpl

@@ -0,0 +1,27 @@
+<ul class="mcn-list">
+    <% for (var i = 0; i < data.length; i++) { %>
+    <% if (i >= 9) { %>
+    <li class="mcn-item ui-hide">
+    <% } else { %>
+    <li class="mcn-item">
+    <% } %>
+        <p class="cover">
+            <a href="<%= data[i].url %>" target="_blank">
+                <% if (i >= 9) { %>
+                <img src="" data-src="<%= data[i].cover %>" alt="" />
+                <% } else { %>
+                <img src="<%= data[i].cover %>" alt="" />
+                <% } %>
+            </a>
+        </p>
+        <div class="content">
+            <h3 class="title"><a href="<%= data[i].url %>" target="_blank"><%= data[i].title %></a></h3>
+            <div class="infos">
+                <p class="tag"><%= data[i].tag %></p>
+                <p class="fans">粉丝<%= data[i].fans %></p>
+            </div>
+            <div class="text"><%= data[i].desc %></div>
+        </div>
+    </li>
+    <% } %>
+</ul>