Home Explore Help
Register Sign In
FED
/
dwweb-pc
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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

DW-PC\DW 5 years ago
parent
c3b9ce27e2 5761f44ba3
commit
c313b51c9a
5 changed files with 256 additions and 334 deletions
Split View Show Diff Stats
  1. 95 248
      2019专题/多玩游戏MCN/src/_index.html
  2. 45 0
      2019专题/多玩游戏MCN/src/modules/page/index.js
  3. 0 19
      2019专题/多玩游戏MCN/src/modules/page/wap.js
  4. 89 67
      2019专题/多玩游戏MCN/src/sass/global.scss
  5. 27 0
      2019专题/多玩游戏MCN/src/tpl/mcnList.tmpl

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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>