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

超梦西游h5、德玛西亚杯h5

PC-20180523CIYM\Administrator 6 years ago
parent
56f3f781b1
commit
5c37045baf
25 changed files with 1272 additions and 69 deletions
Unified View Show Diff Stats
  1. 30 0
      2018专题/1812超梦西游/src/_wap.html
  2. 0 0
      2018专题/1812超梦西游/src/img/bg-star.png
  3. BIN
      2018专题/1812超梦西游/src/img/mp/bg-bottom.jpg
  4. 1 1
      2018专题/1812超梦西游/src/sass/global.scss
  5. 64 0
      2018专题/1812超梦西游/src/sass/wap.scss
  6. 63 10
      2018专题/德玛西亚杯/src/_wap.html
  7. BIN
      2018专题/德玛西亚杯/src/img/video_play.png
  8. BIN
      2018专题/德玛西亚杯/src/img/wap/bg-banner.jpg
  9. BIN
      2018专题/德玛西亚杯/src/img/wap/bg-main-bottom.jpg
  10. BIN
      2018专题/德玛西亚杯/src/img/wap/bg-main-bottom.png
  11. BIN
      2018专题/德玛西亚杯/src/img/wap/bg-main-top.jpg
  12. BIN
      2018专题/德玛西亚杯/src/img/wap/bg-more-news.png
  13. BIN
      2018专题/德玛西亚杯/src/img/wap/bg.jpg
  14. 86 57
      2018专题/德玛西亚杯/src/sass/wap.scss
  15. 36 0
      2018专题/赛事通用竞猜面板/src/_deMarcia.html
  16. BIN
      2018专题/赛事通用竞猜面板/src/img/deMarcia/guess-tag.png
  17. BIN
      2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-next-disabled.png
  18. BIN
      2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-next-hover.png
  19. BIN
      2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-next.png
  20. BIN
      2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-prev-disabled.png
  21. BIN
      2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-prev-hover.png
  22. BIN
      2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-prev.png
  23. 447 0
      2018专题/赛事通用竞猜面板/src/modules/page/deMarcia.js
  24. 544 0
      2018专题/赛事通用竞猜面板/src/sass/deMarcia.scss
  25. 1 1
      2018专题/赛事通用竞猜面板/src/tpl/share/matchSlider.tmpl

+ 30 - 0
2018专题/1812超梦西游/src/_wap.html
View File 

@@ -19,6 +19,9 @@
 
 
 
 <body>
 
 <body>
 
     <div class="page-wap">
 
     <div class="page-wap">
 
+        <div class="mod-download">
 
+            <a href="#" target="_blank" class="btn-download">下载游戏</a>
 
+        </div>
 
         <div class="mod-banner">
 
         <div class="mod-banner">
 
             <img src="/src/img/mp/bg-banner1.jpg" alt="" />
 
             <img src="/src/img/mp/bg-banner1.jpg" alt="" />
 
             <img src="/src/img/mp/bg-banner2.jpg" alt="" class="hide" />
 
             <img src="/src/img/mp/bg-banner2.jpg" alt="" class="hide" />
 
@@ -64,28 +67,55 @@
 
                             <img src="/src/img/gift-img1.png" alt="" />
 
                             <img src="/src/img/gift-img1.png" alt="" />
 
                         </div>
 
                         </div>
 
                         <p class="item-text">贵族20</p>
 
                         <p class="item-text">贵族20</p>
 
+                        <a href="#" class="btn-change">兑换</a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
 
                         <div class="item-cover">
 
                         <div class="item-cover">
 
                             <img src="/src/img/gift-img2.png" alt="" />
 
                             <img src="/src/img/gift-img2.png" alt="" />
 
                         </div>
 
                         </div>
 
                         <p class="item-text">元宝</p>
 
                         <p class="item-text">元宝</p>
 
+                        <a href="#" class="btn-change">兑换</a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
 
                         <div class="item-cover">
 
                         <div class="item-cover">
 
                             <img src="/src/img/gift-img3.png" alt="" />
 
                             <img src="/src/img/gift-img3.png" alt="" />
 
                         </div>
 
                         </div>
 
                         <p class="item-text">银币无限</p>
 
                         <p class="item-text">银币无限</p>
 
+                        <a href="#" class="btn-change">兑换</a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
 
                         <div class="item-cover">
 
                         <div class="item-cover">
 
                             <img src="/src/img/gift-img4.png" alt="" />
 
                             <img src="/src/img/gift-img4.png" alt="" />
 
                         </div>
 
                         </div>
 
                         <p class="item-text">赤鲲</p>
 
                         <p class="item-text">赤鲲</p>
 
+                        <a href="#" class="btn-change">兑换</a>
 
                     </li>
 
                     </li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
+        <div class="mod-special">
 
+            <div class="special-inner">
 
+                <ul>
 
+                    <li>开局送稀有宠物-绝世赤鲲，无限银币，绝对真实不忽悠；</li>
 
+                    <li>上线赠送贵族20专属特权，元宝18888(过完新手获得)；</li>
 
+                    <li>充值比例：1:10（西游币）=200元宝</li>
 
+                    <li>首充任意金额送炫酷时装渣小辉，无限金币，鲲进化丹，大量水晶等；</li>
 
+                    <li>累计登录送鲲，登录二天送炫酷火箭坐骑，登录第三天100%获得“轮子魔女”，第八天送神品渣小辉时装；</li>
 
+                    <li>新增无限资源阁，一次购买，终身有效！各种档次任君选择！每日资源不断,体验无限的快感！</li>
 
+                    <li>每天在线都可以8次抽奖，领取豪华大礼</li>
 
+                    <li>全球首创回合制跨服排位赛；</li>
 
+                    <li>新增官职系统，加官进爵</li>
 
+                    <li>宠物进化：进化全靠吞</li>
 
+                    <li>每天登录送大礼，天天有惊喜！</li>
 
+                    <li>更多PVP，PVE玩法等你来体验；</li>
 
+                    <li>新增副本，挑战渣小辉得大量经验&功勋</li>
 
+                    <li>新增boss，巨鲲长安城来袭</li>
 
+                    <li>新增宠物玩法，进化觉醒功能开放，造型百变</li>
 
+                    <li>经典回合，战斗数值体现重做</li>
 
+                </ul>
 
+                <p class="tip">返利方式：邮件到账</p>
 
+            </div>
 
+        </div>
 
     </div>
 
     </div>
 
     <script src="lib/mod.js"></script>
 
     <script src="lib/mod.js"></script>
 
 </body>
 
 </body>

+ 0 - 0
2018专题/1812超梦西游/src/img/pc/bg-star.png → 2018专题/1812超梦西游/src/img/bg-star.png
View File


BIN
2018专题/1812超梦西游/src/img/mp/bg-bottom.jpg
View File


+ 1 - 1
2018专题/1812超梦西游/src/sass/global.scss
View File 

@@ -187,7 +187,7 @@ body {
 
                     font-size: 16px;
 
                     font-size: 16px;
 
                     line-height: 36px;
 
                     line-height: 36px;
 
                     padding-left: 18px;
 
                     padding-left: 18px;
 
-                    background: url(../img/pc/bg-star.png) left center no-repeat;
 
+                    background: url(../img/bg-star.png) left center no-repeat;
 
                 }
 
                 }
 
                 .tip{
 
                 .tip{
 
                     font-size: 14px;
 
                     font-size: 14px;

+ 64 - 0
2018专题/1812超梦西游/src/sass/wap.scss
View File 

@@ -50,6 +50,27 @@ img{
 
 
 
 .page-wap{
 
 .page-wap{
 
     font-family: '微软雅黑';
 
     font-family: '微软雅黑';
 
+    padding-bottom: px2rem(100);
 
+    background: #090D15;
 
+    .mod-download{
 
+        height: px2rem(100);
 
+        width: 100%;
 
+        background: #860000;
 
+        position: fixed;
 
+        z-index: 999;
 
+        bottom: 0;
 
+        left: 0;
 
+        a{
 
+            height: 100%;
 
+            width: 100%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: px2rem(32);
 
+            color: #ffd37f;
 
+            font-weight: bold;
 
+        }
 
+    }
 
     .gift-wrap{
 
     .gift-wrap{
 
         position: relative;
 
         position: relative;
 
         .list-gift{
 
         .list-gift{
 
@@ -84,8 +105,51 @@ img{
 
                         text-align: center;
 
                         text-align: center;
 
                         margin-top: px2rem(13);
 
                         margin-top: px2rem(13);
 
                     }
 
                     }
 
+                    .btn-change{
 
+                        height: px2rem(60);
 
+                        display: flex;
 
+                        align-items: center;
 
+                        justify-content: center;
 
+                        background: -webkit-linear-gradient(#c53232, #710000);
 
+                        background: -o-linear-gradient(#c53232, #710000);
 
+                        background: linear-gradient(#c53232, #710000);
 
+                        border-radius: px2rem(20);
 
+                        font-size: px2rem(24);
 
+                        color: #ffd28c;
 
+                        font-weight: bold;
 
+                        text-shadow: 0 1px 2px rgba(#210c00, 0.75);
 
+                        margin-top: px2rem(12);
 
+                        box-shadow: px2rem(2) px2rem(4) 0 #410000, -px2rem(2) px2rem(4) 0 #410000;
 
+                        &:hover{
 
+                            text-decoration: none;
 
+                        }
 
+                    }
 
                 }
 
                 }
 
             }
 
             }
 
         }
 
         }
 
     }
 
     }
 
+    .mod-special{
 
+        background: url(../img/mp/bg-bottom.jpg) top center no-repeat;
 
+        background-size: 100% 100%;
 
+        color: #b3b3b3;
 
+        padding: px2rem(10) 0 px2rem(51);
 
+        overflow: hidden;
 
+        ul{
 
+            width: 90.66%;
 
+            margin: 0 auto;
 
+            font-size: px2rem(24);
 
+            line-height: px2rem(40);
 
+            li{
 
+                padding-left: px2rem(27);
 
+                background: url(../img/bg-star.png) left px2rem(11) no-repeat;
 
+                background-size: px2rem(19) px2rem(17);
 
+            }
 
+        }
 
+        .tip{
 
+            font-size: px2rem(20);
 
+            line-height: px2rem(30);
 
+            text-align: center;
 
+            margin-top: px2rem(47);
 
+        }
 
+    }
 
 }
 
 }

+ 63 - 10
2018专题/德玛西亚杯/src/_wap.html
View File 

@@ -247,10 +247,10 @@
 
     
     
     <!-- banner -->
 
     <!-- banner -->
 
     <div class="mod-banner">
 
     <div class="mod-banner">
 
-        <img src="/src/img/wap/bg.jpg" alt="" />
 
+        <img src="/src/img/wap/bg-banner.jpg" alt="" />
 
     </div>
 
     </div>
 
     
     
-    
+    <div class="mod-main">
 
     <div class="page-stake-main">
 
     <div class="page-stake-main">
 
   <div class="page-stake" data-group="day" data-match="LPL">
 
   <div class="page-stake" data-group="day" data-match="LPL">
 
   <div class="week-select clearfix">
 
   <div class="week-select clearfix">
 
@@ -510,9 +510,9 @@
 
    
    
     <div class="wap-page-main">
 
     <div class="wap-page-main">
 
         <!-- 置顶新闻 -->
 
         <!-- 置顶新闻 -->
 
-        <div class="mod-hot-new">
 
-            <h2><a href="#">亚运会中国队定妆照公布 香锅：我很方</a></h2>
 
-            <p>
 
+        <div class="top-new">
 
+            <h2 class="top-new-tit"><a href="#">亚运会中国队定妆照公布 香锅：我很方</a></h2>
 
+            <p class="top-new-sub">
 
                 <a href="#">[全球总决赛票务信息公布]</a>
 
                 <a href="#">[全球总决赛票务信息公布]</a>
 
                 <span>|</span>
 
                 <span>|</span>
 
                 <a href="#">[JDG全员真情告白]</a>
 
                 <a href="#">[JDG全员真情告白]</a>
 
@@ -526,35 +526,30 @@
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <div class="txtbox">
 
                         <div class="txtbox">
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
-                            <p>赛程紧密恐怕影响选手状态</p>
 
                         </div>
 
                         </div>
 
                     </a></li>
 
                     </a></li>
 
                     <li class="swiper-slide"><a href="#">
 
                     <li class="swiper-slide"><a href="#">
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <div class="txtbox">
 
                         <div class="txtbox">
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
-                            <p>赛程紧密恐怕影响选手状态</p>
 
                         </div>
 
                         </div>
 
                     </a></li>
 
                     </a></li>
 
                     <li class="swiper-slide"><a href="#">
 
                     <li class="swiper-slide"><a href="#">
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <div class="txtbox">
 
                         <div class="txtbox">
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
-                            <p>赛程紧密恐怕影响选手状态</p>
 
                         </div>
 
                         </div>
 
                     </a></li>
 
                     </a></li>
 
                     <li class="swiper-slide"><a href="#">
 
                     <li class="swiper-slide"><a href="#">
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <div class="txtbox">
 
                         <div class="txtbox">
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
-                            <p>赛程紧密恐怕影响选手状态</p>
 
                         </div>
 
                         </div>
 
                     </a></li>
 
                     </a></li>
 
                     <li class="swiper-slide"><a href="#">
 
                     <li class="swiper-slide"><a href="#">
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <img src="/src/img/slider-img1.jpg" alt="" />
 
                         <div class="txtbox">
 
                         <div class="txtbox">
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
                             <h3>LPL为亚运会调整赛程 网友称别影响SB</h3>
 
-                            <p>赛程紧密恐怕影响选手状态</p>
 
                         </div>
 
                         </div>
 
                     </a></li>
 
                     </a></li>
 
                 </ul>
 
                 </ul>
 
@@ -659,8 +654,66 @@
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
         </div>
 
         </div>
 
+        <div class="more-news">
 
+            <a href="#">点击查看更多</a>
 
+        </div>
 
+        <div class="mod-video">
 
+            <div class="mod-inner">
 
+                <ul>
 
+                    <li>
 
+                        <a href="#">
 
+                            <div class="imgbox">
 
+                                <img src="../img/video-img1.jpg" alt="" />
 
+                                <div class="float-info">
 
+                                    <span></span>
 
+                                    <em>14:18</em>
 
+                                </div>
 
+                            </div>
 
+                            <div class="txtbox">阿布谈出征德玛西亚：尽自己最大的努力，阿布谈出征德玛西亚：尽自己最大的努力阿布谈出征德玛西亚：尽自己最大的努力，阿布谈出征德玛西亚：尽自己最大的努力</div>
 
+                        </a>
 
+                    </li>
 
+                    <li>
 
+                        <a href="#">
 
+                            <div class="imgbox">
 
+                                <img src="../img/video-img1.jpg" alt="" />
 
+                                <div class="float-info">
 
+                                    <span></span>
 
+                                    <em>14:18</em>
 
+                                </div>
 
+                            </div>
 
+                            <div class="txtbox">阿布谈出征德玛西亚：尽自己最大的努力，阿布谈出征德玛西亚：尽自己最大的努力阿布谈出征德玛西亚：尽自己最大的努力，阿布谈出征德玛西亚：尽自己最大的努力</div>
 
+                        </a>
 
+                    </li>
 
+                    <li>
 
+                        <a href="#">
 
+                            <div class="imgbox">
 
+                                <img src="../img/video-img1.jpg" alt="" />
 
+                                <div class="float-info">
 
+                                    <span></span>
 
+                                    <em>14:18</em>
 
+                                </div>
 
+                            </div>
 
+                            <div class="txtbox">阿布谈出征德玛西亚：尽自己最大的努力，阿布谈出征德玛西亚：尽自己最大的努力阿布谈出征德玛西亚：尽自己最大的努力，阿布谈出征德玛西亚：尽自己最大的努力</div>
 
+                        </a>
 
+                    </li>
 
+                    <li>
 
+                        <a href="#">
 
+                            <div class="imgbox">
 
+                                <img src="../img/video-img1.jpg" alt="" />
 
+                                <div class="float-info">
 
+                                    <span></span>
 
+                                    <em>14:18</em>
 
+                                </div>
 
+                            </div>
 
+                            <div class="txtbox">阿布谈出征德玛西亚：尽自己最大的努力，阿布谈出征德玛西亚：尽自己最大的努力阿布谈出征德玛西亚：尽自己最大的努力，阿布谈出征德玛西亚：尽自己最大的努力</div>
 
+                        </a>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
     </div>
 
     </div>
 
    
    
+    </div>
 
     <script src="lib/mod.js"></script>
 
     <script src="lib/mod.js"></script>
 
     <script>
 
     <script>
 
         require('modules/page/wap.js');
 
         require('modules/page/wap.js');

BIN
2018专题/德玛西亚杯/src/img/video_play.png
View File


BIN
2018专题/德玛西亚杯/src/img/wap/bg-banner.jpg
View File


BIN
2018专题/德玛西亚杯/src/img/wap/bg-main-bottom.jpg
View File


BIN
2018专题/德玛西亚杯/src/img/wap/bg-main-bottom.png
View File


BIN
2018专题/德玛西亚杯/src/img/wap/bg-main-top.jpg
View File


BIN
2018专题/德玛西亚杯/src/img/wap/bg-more-news.png
View File


BIN
2018专题/德玛西亚杯/src/img/wap/bg.jpg
View File


+ 86 - 57
2018专题/德玛西亚杯/src/sass/wap.scss
View File 

@@ -1,3 +1,4 @@
 
+@import "base/mixins";
 
 .dw-common-nav{
 
 .dw-common-nav{
 
     .nav-list__item a{
 
     .nav-list__item a{
 
         font-size: 0.6rem;
 
         font-size: 0.6rem;
 
@@ -8,54 +9,9 @@
 
         font-size: 0.6rem;
 
         font-size: 0.6rem;
 
     }
 
     }
 
 }
 
 }
 
-.page-stake-main{
 
-    background: #270303 !important;
 
-    .page-stake{
 
-        .top-swiper-slide{
 
-            background: #fff;
 
-        }
 
-        .match-guess-btn{
 
-            background: #232323;
 
-            .arrow-down-icon{
 
-                display: none;
 
-            }
 
-        }
 
-        .team-btn-wrap{
 
-            overflow: hidden;
 
-            .team-btn{
 
-                border-radius: 2px;
 
-                &:first-child{
 
-                    float: left;
 
-                }
 
-            }
 
-        }
 
-        .week-select{
 
-            .btn{
 
-                background: #402828;
 
-                color: #836c6c;
 
-                &.active{
 
-                    background: #E54747;
 
-                    color: #fff;
 
-                }
 
-            }
 
-        }
 
-        .match-precent{
 
-            .progress{
 
-                .num{
 
-                    vertical-align: middle;
 
-                }
 
-            }
 
-        }
 
-    }
 
-}
 
 
 
-@mixin ellipsis{
 
-    max-width: 100%;
 
-    text-overflow: ellipsis;
 
-    -ms-text-overflow: ellipsis;
 
-    overflow: hidden;
 
-    white-space: nowrap;
 
-    display: block;
 
+body{
 
+    background: #081929;
 
 }
 
 }
 
 .mod-banner{
 
 .mod-banner{
 
     img{
 
     img{
 
@@ -63,9 +19,13 @@
 
         display: block;
 
         display: block;
 
     }
 
     }
 
 }
 
 }
 
+.mod-main{
 
+    background: url(../img/wap/bg-main-bottom.png) bottom center no-repeat, url(../img/wap/bg-main-top.jpg) top center no-repeat, url(../img/wap/bg-main-bottom.jpg) bottom center no-repeat;
 
+    overflow: hidden;
 
+    background-size: 100% auto;
 
+}
 
 .wap-page-main{
 
 .wap-page-main{
 
     overflow: hidden;
 
     overflow: hidden;
 
-    background: #400707;
 
     padding: 0 4%;
 
     padding: 0 4%;
 
     color: #fff;
 
     color: #fff;
 
     a{
 
     a{
 
@@ -79,7 +39,7 @@
 
             font-size: 18px;
 
             font-size: 18px;
 
             font-weight: bold;
 
             font-weight: bold;
 
             a{
 
             a{
 
-                color: #E54747;
 
+                color: #eeeff1;
 
             }
 
             }
 
         }
 
         }
 
         .top-new-sub{
 
         .top-new-sub{
 
@@ -87,9 +47,13 @@
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
             margin-top: 0.2rem;
 
             margin-top: 0.2rem;
 
+            color: #118cb4;
 
             span{
 
             span{
 
                 margin: 0 0.21333rem;
 
                 margin: 0 0.21333rem;
 
             }
 
             }
 
+            a{
 
+                color: #118cb4;
 
+            }
 
         }
 
         }
 
     }
 
     }
 
     .mod-slider{
 
     .mod-slider{
 
@@ -112,7 +76,7 @@
 
                         text-align: left;
 
                         text-align: left;
 
                         padding: 10px 3.6% 5px;
 
                         padding: 10px 3.6% 5px;
 
                         line-height: 1.5;
 
                         line-height: 1.5;
 
-                        background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
 
+                        background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
 
                         h3{
 
                         h3{
 
                             @include ellipsis;
 
                             @include ellipsis;
 
                             font-size: 16px;
 
                             font-size: 16px;
 
@@ -134,14 +98,14 @@
 
                 width: 100%;
 
                 width: 100%;
 
                 border-radius: 0;
 
                 border-radius: 0;
 
                 opacity: 1;
 
                 opacity: 1;
 
-                background: #fff;
 
+                background: #0B2540;
 
                 display: block;
 
                 display: block;
 
                 margin-left: 2px;
 
                 margin-left: 2px;
 
                 &:first-child{
 
                 &:first-child{
 
                     margin-left: 0;
 
                     margin-left: 0;
 
                 }
 
                 }
 
                 &.is-active{
 
                 &.is-active{
 
-                    background: #E54747;
 
+                    background: #13D5D3;
 
                 }
 
                 }
 
             }
 
             }
 
         }
 
         }
 
@@ -150,29 +114,94 @@
 
         font-size: 14px;
 
         font-size: 14px;
 
         ul{
 
         ul{
 
             padding: 16px 0;
 
             padding: 16px 0;
 
-            border-top: 1px #683C3C solid;
 
-            &:first-child{
 
-                border-top: none;
 
-            }
 
+            border-bottom: 1px #0D516D solid;
 
             li{
 
             li{
 
                 a{
 
                 a{
 
                     display: flex;
 
                     display: flex;
 
                     align-items: center;
 
                     align-items: center;
 
                     line-height: 1.75;
 
                     line-height: 1.75;
 
+                    color: #118cb4;
 
                     h3{
 
                     h3{
 
                         flex: 1;
 
                         flex: 1;
 
                         @include ellipsis;
 
                         @include ellipsis;
 
                         margin-right: 0.5rem;
 
                         margin-right: 0.5rem;
 
                     }
 
                     }
 
+                    span{
 
+                        color: #0d516d;
 
+                    }
 
                     &::before{
 
                     &::before{
 
                         content: '';
 
                         content: '';
 
                         height: 3px;
 
                         height: 3px;
 
                         width: 3px;
 
                         width: 3px;
 
-                        background: #fff;
 
+                        background: #0D516D;
 
                         margin-right: 0.4rem;
 
                         margin-right: 0.4rem;
 
                     }
 
                     }
 
                 }
 
                 }
 
             }
 
             }
 
         }
 
         }
 
     }
 
     }
 
+    .more-news{
 
+        font-size: 16px;
 
+        a{
 
+            display: table;
 
+            padding-right: 20px;
 
+            margin: 0 auto;
 
+            background: url(../img/wap/bg-more-news.png) right center no-repeat;
 
+            background-size: 12px auto;
 
+            line-height: 43px;
 
+            color: #118cb4;
 
+        }
 
+    }
 
+    .mod-video{
 
+        padding: 11px 0 25px;
 
+        ul{
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            li{
 
+                width: 48.26%;
 
+                margin-right: 3.48%;
 
+                padding-bottom: 12px;
 
+                &:nth-child(2n){
 
+                    margin-right: 0;
 
+                }
 
+                .imgbox{
 
+                    width: 100%;
 
+                    position: relative;
 
+                    img{
 
+                        width: 100%;
 
+                        display: block;
 
+                    }
 
+                    .float-info{
 
+                        height: 25px;
 
+                        width: 100%;
 
+                        position: absolute;
 
+                        bottom: 0;
 
+                        left: 0;
 
+                        right: 0;
 
+                        padding: 0 8px;
 
+                        box-sizing: border-box;
 
+                        color: #eeeff1;
 
+                        font-size: 12px;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        justify-content: space-between;
 
+                        background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
 
+                        span{
 
+                            height: 13px;
 
+                            width: 10px;
 
+                            background: url(../img/video_play.png) center no-repeat;
 
+                            background-size: 100% 100%;
 
+                        }
 
+                    }
 
+                }
 
+                .txtbox{
 
+                    font-size: 14px;
 
+                    line-height: 21px;
 
+                    color: #118cb4;
 
+                    margin-top: 7px;
 
+                    @include ellipsis-column(2);
 
+                }
 
+            }
 
+        }
 
+    }
 
 }
 
 }

+ 36 - 0
2018专题/赛事通用竞猜面板/src/_deMarcia.html
View File 

@@ -0,0 +1,36 @@
 
+<!doctype html>
 
+<html>
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="renderer" content="webkit">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <meta name="Keywords" content="多玩游戏">
 
+    <meta name="description" content="">
 
+    <title>多玩游戏网 | 多玩游戏 多交朋友</title>
 
+    <link href="sass/deMarcia.scss" rel="stylesheet">
 
+    <script src="//www.duowan.com/assets/js/jquery.js"></script><!--ignore-->
 
+    <script src="http://pub.dwstatic.com/common/js/dwudbproxy.js"></script><!--ignore-->
 
+</head>
 
+
 
+<body>
 
+    <!-- 助力竞猜分享 模板 -->
 
+
 
+    <!-- 参数
 
+        data-group: week => 按周分组， day => 按天分组
 
+        data-acid: 活动接口的参数ID
 
+    -->
 
+    <div class="page-stake-main">
 
+        <div class="page-stake page-stake-zm" data-group="day" data-acid="25" ind="">
 
+            <a class="guess-tag">西安德杯专题</a>
 
+        </div>
 
+    </div>
 
+    <script src="lib/mod.js"></script>
 
+    <script src="lib/qrcode.js"></script>
 
+    <script>
 
+        require('modules/page/deMarcia.js');
 
+    </script>
 
+</body>
 
+
 
+</html>

BIN
2018专题/赛事通用竞猜面板/src/img/deMarcia/guess-tag.png
View File


BIN
2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-next-disabled.png
View File


BIN
2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-next-hover.png
View File


BIN
2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-next.png
View File


BIN
2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-prev-disabled.png
View File


BIN
2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-prev-hover.png
View File


BIN
2018专题/赛事通用竞猜面板/src/img/deMarcia/icon-prev.png
View File


+ 447 - 0
2018专题/赛事通用竞猜面板/src/modules/page/deMarcia.js
View File 

@@ -0,0 +1,447 @@
 
+// ---- 助力竞猜分享模板js ----
 
+var Swiper = require('swiper.min.js');//轮播
 
+var matchListTpl = __inline("/src/tpl/share/matchSlider.tmpl"); //比赛列表
 
+var matchWeekTpl = __inline("/src/tpl/share/matchWeek.tmpl"); //比赛周列表
 
+var modalTpl = __inline("/src/tpl/share/modal.tmpl"); //弹窗模板
 
+var QRcodeTpl = __inline("/src/tpl/share/QRcode.tmpl");
 
+
 
+var MatchList = []; //比赛信息
 
+var swiper = null;
 
+var mobileFlag = false //移动端标识 true => 移动端 默认pc端
 
+var btnMoreFlag = true //展开更多按钮点击标识
 
+var API = '//match-guess.duowan.com';
 
+var AC_ID = $('.page-stake').attr('data-acid') //活动ID
 
+
 
+var C = {
 
+    init: function() {
 
+        this.guessShow();
 
+        this.weekSelect();
 
+        this.showMore();
 
+        this.submitWin();
 
+        this.liveQueSubmit();
 
+        this.maskClick();
 
+    },
 
+    guessShow: function() {
 
+        // 更多竞猜
 
+        $(document).on('click', '.match-guess-btn', function(){
 
+            if($(this).prev().hasClass('match-guess-wrap')){
 
+                $(this).prev().slideToggle();
 
+                $(this).find('.arrow-down-icon').toggleClass('rotate')
 
+            }
 
+            else{
 
+                alert('没有更多竞猜了')
 
+            }
 
+        })
 
+    },
 
+    weekSelect: function() {
 
+        $(document).on('click', '.week-btn-wrap .btn', function() {
 
+            $('.week-btn-wrap').find('.btn').removeClass('active');
 
+            $(this).addClass('active');
 
+
 
+            var weekVal = $(this).attr('data-week');
 
+            V.renderMatchList(MatchList.data[weekVal], mobileFlag);
 
+        })
 
+    },
 
+    showMore: function() {
 
+        // 点击更多
 
+        $(document).on('click', '.btn-more', function() {
 
+            var $btnWrap = $('.week-select').find('.week-btn-wrap');
 
+            $btnWrap.toggleClass('showmore');
 
+            $btnWrap.hasClass('showmore') ? $(this).text('收起更多') : $(this).text('展开更多');
 
+        })
 
+    },
 
+    // 胜负提交
 
+    submitWin: function(){
 
+        $(document).on('click', '.guess-submit', function() {
 
+            var guessId = $(this).attr('data-guess');
 
+            var optionId = $(this).attr('data-option');
 
+            var matchId = $(this).parents('.top-swiper-slide').attr('data-match');
 
+            var param = {
 
+                guess_id: guessId,
 
+                option_id: optionId,
 
+                match_id: matchId
 
+            };
 
+            M.submitAnswer(param, $(this));
 
+        })
 
+    },
 
+    // 实况问题提交
 
+    liveQueSubmit: function() {
 
+        $(document).on('click', '.live-que-submit', function() {
 
+            var param = [];
 
+            var $quewrap = $(this).parent('.match-guess-wrap');
 
+            var matchId = $(this).parents('.top-swiper-slide').attr('data-match');
 
+            // var step = 0;
 
+            var queSum = $quewrap.find('.que-radio').length;
 
+            var guessId= '';
 
+            var optionId = '';
 
+            $quewrap.find('.que-radio').each(function() {
 
+                // var guessId = $(this).attr('data-guess');
 
+                var $radio = $(this).find('input[type="radio"]');
 
+                $radio.each(function() {
 
+                    // 选中
 
+                    if($(this).is(':checked')){
 
+                        // step++;
 
+                        guessId = $(this).attr('data-guess');
 
+                        optionId = $(this).attr('data-option');
 
+                        param.push({
 
+                            guess_id: guessId,
 
+                            option_id: optionId,
 
+                            match_id: matchId
 
+                        })
 
+                    }
 
+                })
 
+            })
 
+            if(param.length != queSum){
 
+                alert('还有竞猜没完成哦');
 
+                // V.showModal('还有竞猜没完成哦')
 
+                return;
 
+            }
 
+            M.liveQueSubmit(param,$(this));
 
+        })
 
+    },
 
+    maskClick() {
 
+        $(document).on('click', '.pub-guess-masker', function() {
 
+            $(this).remove()
 
+        })
 
+        $(document).on('click', '.pub-guess-modal', function(e) {
 
+            return false
 
+        })
 
+    }
 
+}
 
+
 
+var V = {
 
+    init: function() {
 
+        this.screenInit();
 
+        this.setPrecent();
 
+
 
+        M.getMatchList();
 
+    },
 
+    screenInit: function() {
 
+        // 页面初始化设置
 
+        var winWidth = $(window).width();
 
+        if(winWidth > 750) {
 
+            this.initSwiper(4);
 
+        }else {
 
+            this.initSwiper(2);
 
+            mobileFlag = true;
 
+        }
 
+        var btnLen = $('.week-btn-wrap').find('.btn').length;
 
+        if(btnLen > 9 && !mobileFlag && btnMoreFlag){
 
+            btnMoreFlag = false
 
+            $('.week-select').find('.btn-more').trigger('click');
 
+        }
 
+    },
 
+    // 轮播
 
+    initSwiper: function(num) {
 
+        swiper = new Swiper('.top-swiper-container', {
 
+            slidesPerView: num,
 
+            centeredSlides: false,
 
+            spaceBetween: 2,
 
+            slideClass : 'top-swiper-slide',
 
+            navigation: {
 
+              nextEl: '.swiper-button-next',
 
+              prevEl: '.swiper-button-prev',
 
+            }
 
+        });
 
+    },
 
+    setPrecent: function() {
 
+        // 设置百分比进度条
 
+        var prencetWidth = $('.match-precent').find('.progress').width();
 
+        var progressAll = prencetWidth - 40;
 
+        $('.progress').find('.num').each(function() {
 
+            var num = $(this).html().replace('%','');
 
+            var length = progressAll * (num/100);
 
+            $(this).parent().find('.length').width(length);
 
+        })
 
+    },
 
+    // 参数灵活配置按天分组还是按周分组
 
+    // 确认第几周
 
+    confirmWeek: function(data) {
 
+        var flag = false;
 
+        var keyArr = [];
 
+        for(var i in data) {
 
+            keyArr.push(i);
 
+            var startTime = data[i][0]["start_time"];
 
+            if(Week.getWeekTime(startTime)){
 
+                flag = true;
 
+                return i;
 
+            }
 
+            // debugger
 
+        }
 
+        // 没匹配，默认显示第一个key
 
+        if(!flag) {
 
+            return keyArr[0];
 
+        }
 
+    },
 
+    // 确认第几天
 
+    confirmDay: function(data) {
 
+        var flag = false;
 
+        var keyArr = [];
 
+        for(var i in data) {
 
+            keyArr.push(i);
 
+            var startTime = data[i][0]["start_time_md"];
 
+            if(Day.getDayTime(startTime)){
 
+                flag = true;
 
+                return i;
 
+            }
 
+            // debugger
 
+        }
 
+        // 没匹配，默认显示第一个key
 
+        if(!flag) {
 
+            return keyArr[0];
 
+        }
 
+    },
 
+    // 比赛列表 新增移动端判断参数 moblie
 
+    renderMatchList: function(obj, moblie) {
 
+        var dom = matchListTpl({data: obj,moblie: moblie});
 
+        $('.match-slider-wrap').remove();
 
+        $('.page-stake').append(dom);
 
+        V.screenInit();
 
+        V.setPrecent();
 
+    },
 
+    // 日期选择
 
+    // 参数: 比赛列表 当前显示日期索引 分组规则 移动端显示规则
 
+    renderWeekSel: function(obj,i,group,moblie) {
 
+        var dom = matchWeekTpl({data: obj,curWeek: i, group: group, moblie: moblie});
 
+        $('.page-stake').append(dom);
 
+    },
 
+    // 弹窗显示
 
+    showModal: function(data) {
 
+        var dom = modalTpl({data})
 
+        $('body').append(dom)
 
+    },
 
+    // 显示弹窗类型
 
+    showQRcode: function(defalutMsg){
 
+        if(dwUDBProxy.isLogin()){
 
+            $.ajax({
 
+                dataType: 'jsonp',
 
+                url: API + '/encour/getTodayAllot?ac_id=' + AC_ID,
 
+                success: function(data){
 
+                    if(data.rs){
 
+                        if(data.needTip != false){
 
+
 
+                            new Image().src = 'http://clickstats.duowan.com/index.php?r=stats/index&event=match_guess_encour_allot'
 
+
 
+                            var dom = QRcodeTpl(),
 
+                                codeUrl = 'http://hdzt.duowan.com/s/zljc.html?code=',
 
+                                codeEle,qrcode;
 
+                            if($('.QRcode-guess-masker').length < 1){
 
+                                $('body').append(dom);
 
+                                codeEle = document.getElementById('guess-QRcode');
 
+                                qrcode = new QRCode(codeEle,{
 
+                                    text: codeUrl + data.progress.progress_code,
 
+                                    height: 160,
 
+                                    width: 160
 
+                                });
 
+                                $('.QRcode-guess-masker').on('click','.close',function(){
 
+                                    $('.QRcode-guess-masker').remove();
 
+                                })
 
+                            }
 
+                        }else{
 
+                            alert(defalutMsg);
 
+                        }
 
+                    }else{
 
+                        alert(data.msg);
 
+                    }
 
+                },
 
+                error: function(){
 
+                    // alert('请先登录')
 
+                    dwUDBProxy.login("") //登录成功地址，默认当前页
 
+                }
 
+            });
 
+        } else{
 
+            dwUDBProxy.login("")
 
+        }
 
+    }
 
+}
 
+
 
+var M = {
 
+    // 比赛列表
 
+    getMatchList: function() {
 
+        var type = $('.page-stake').attr('data-group');
 
+        $.ajax({
 
+            dataType: 'jsonp',
 
+            url: API+'/matches/list?ac_id='+AC_ID,
 
+            data: {
 
+                groupMode: type
 
+            },
 
+            success: function(data){
 
+                var matchList = []
 
+                var data = data.data
 
+                for(var i in data){
 
+                    matchList = matchList.concat(data[i])
 
+                }
 
+
 
+                var index = 0;
 
+                var pIndex = $('.page-stake-zm').attr('ind')
 
+                $.each(matchList, function(i,e) {
 
+                    if(e.status == 1){
 
+                        index = i;
 
+                        return false;
 
+                    }
 
+                })
 
+
 
+                index = pIndex ? pIndex : index
 
+
 
+                V.renderMatchList(matchList, mobileFlag);
 
+                // 自动滚动到进行中的位置
 
+                swiper.slideTo(index, 0, false)
 
+
 
+                /*MatchList = data;
 
+                MatchList.length =  Object.keys(data.data).length;
 
+                if(type == "week") {
 
+                    var i = V.confirmWeek(MatchList.data);
 
+                }
 
+                if(type == "day") {
 
+                    var i = V.confirmDay(MatchList.data);
 
+                }
 
+                V.renderWeekSel(Object.keys(data.data),i,type,mobileFlag);
 
+                // var testArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
+                // V.renderWeekSel(testArr,i,type,mobileFlag);
 
+
 
+                var matchTemp = MatchList.data[i];
 
+                var index = 0; //进行中的索引
 
+                $.each(matchTemp, function(i ,e) {
 
+                    if(e.status == 1) {
 
+                        index = i;
 
+                        return false;
 
+                    }
 
+                })
 
+                V.renderMatchList(MatchList.data[i], mobileFlag);
 
+                // 自动滚动到进行中的位置
 
+                swiper.slideTo(index, 0, false)*/
 
+            },
 
+            error: function(){
 
+                // 登录态失效
 
+                // data.isLogin = false;
 
+                // V.renderGuessModal(data);
 
+            }
 
+        });
 
+    },
 
+    // 胜负竞猜提交
 
+    submitAnswer: function(obj, $this) {
 
+        if(dwUDBProxy.isLogin()){
 
+            $.ajax({
 
+                dataType: 'jsonp',
 
+                url: API+'/guess/SubmitWin?ac_id='+AC_ID,
 
+                data: obj,
 
+                success: function(data){
 
+                    if(data.rs){
 
+                        V.showQRcode(data.msg);
 
+
 
+                        $this.parents('.top-swiper-slide').find('.match-precent').removeClass('pre-hidden');
 
+                        if($this.hasClass('red-team')){
 
+                            $this.parent().find('.blue-team').addClass('team-unselect');
 
+                        } else if($this.hasClass('blue-team')){
 
+                            $this.parent().find('.red-team').addClass('team-unselect');
 
+                        }
 
+                    } else {
 
+                        alert(data.msg)
 
+                    }
 
+                },
 
+                error: function(){
 
+                    // alert('请先登录')
 
+                    dwUDBProxy.login("") //登录成功地址，默认当前页
 
+                }
 
+            });
 
+        } else{
 
+            dwUDBProxy.login("") //登录成功地址，默认当前页
 
+        }
 
+    },
 
+    // 实况问题提交
 
+    liveQueSubmit: function(param,$this) {
 
+        if(dwUDBProxy.isLogin()){
 
+            $.ajax({
 
+                dataType: 'jsonp',
 
+                url: API+'/guess/SubmitLives?ac_id='+AC_ID,
 
+                data: {args: param},
 
+                success: function(data){
 
+                    if(data.rs) {
 
+                        V.showQRcode(data.msg);
 
+                    } else {
 
+                        alert(data.msg)
 
+                    }
 
+                },
 
+                error: function() {
 
+                    // alert('请先登录');
 
+                    dwUDBProxy.login("") //登录成功地址，默认当前页
 
+                }
 
+            });
 
+        } else {
 
+            dwUDBProxy.login("") //登录成功地址，默认当前页
 
+        }
 
+    }
 
+}
 
+
 
+
 
+var Week = {
 
+    getWeekTime: function(curTimes) {
 
+        var now = new Date();
 
+        var nowTime = now.getTime() ;
 
+        var day = now.getDay();
 
+        if(day == 0) {
 
+            day = 7;
 
+        }
 
+        var oneDayLong = 24*60*60*1000 ;
 
+        var MondayTime = nowTime - (day-1)*oneDayLong  ;
 
+        var SundayTime =  nowTime + (7-day)*oneDayLong ;
 
+        //本周年份
 
+        var yearMonday = new Date(MondayTime).getFullYear();
 
+        var yearSunday = new Date(SundayTime).getFullYear();
 
+        // 本周月份
 
+        var monMonday = new Date(MondayTime).getMonth()+1;
 
+        var monSunday = new Date(SundayTime).getMonth()+1;
 
+        // 本周日期
 
+        var dayMonday = new Date(MondayTime).getDate();
 
+        var daySunday = new Date(SundayTime).getDate();
 
+        function getTime(year,month,day){
 
+            return year+'/'+month+'/'+day
 
+        }
 
+        // 一周开始时间截
 
+        var timesStart = (new Date(getTime(yearMonday,monMonday,dayMonday)+' 00:00:00').getTime())/1000;
 
+        // 一周结束时间截
 
+        var timesEnd = (new Date(getTime(yearSunday,monSunday,daySunday)+' 23:59:59').getTime())/1000;
 
+        // debugger
 
+
 
+        if(curTimes > timesStart && curTimes < timesEnd){
 
+            return true;
 
+        }
 
+        else{
 
+            return false;
 
+        }
 
+    }
 
+}
 
+
 
+var Day = {
 
+    getDayTime: function(curDay) {
 
+        var now = new Date();
 
+        var month = now.getMonth() + 1;
 
+        var day = now.getDate();
 
+        var year = now.getFullYear();
 
+
 
+        var mathchMon = curDay.split('-')[0]
 
+        var mathchDay = curDay.split('-')[1]
 
+
 
+        if(month < 10) {
 
+            month = '0' + month
 
+        }
 
+        if(day < 10) {
 
+            day = '0' + day
 
+        }
 
+        // var dayStr = month+'-'+day
 
+
 
+        var nowTime = new Date(year+'/'+month+'/'+day+' 00:00:00').getTime()
 
+        var matchTime = new Date(year+'/'+mathchMon+'/'+mathchDay+' 00:00:00').getTime()
 
+
 
+        if(nowTime == matchTime || nowTime < matchTime) {
 
+            return true;
 
+        } else {
 
+            return false;
 
+        }
 
+    }
 
+}
 
+
 
+C.init();
 
+V.init();
 
+
 
+// Day.getDayTime()

+ 544 - 0
2018专题/赛事通用竞猜面板/src/sass/deMarcia.scss
View File 

@@ -0,0 +1,544 @@
 
+@import "media.scss";
 
+@import "base/base.scss";
 
+
 
+@import "swiper.css";
 
+
 
+.page-stake-main{
 
+    width: 1136px;
 
+    margin: 0 auto;
 
+    word-break: normal;
 
+    position: relative;
 
+    .swiper-button-prev, .swiper-button-next{
 
+        height: 24px;
 
+        width: 17px;
 
+        outline: none;
 
+        background: center no-repeat;
 
+        background-size: 100% 100%;
 
+    }
 
+    .swiper-button-prev{
 
+        left: 4px;
 
+        background-image: url(../img/deMarcia/icon-prev.png);
 
+        &:hover{
 
+            background-image: url(../img/deMarcia/icon-prev-hover.png);
 
+        }
 
+        &.swiper-button-disabled{
 
+            background-image: url(../img/deMarcia/icon-prev-disabled.png);
 
+        }
 
+    }
 
+    .swiper-button-next{
 
+        right: 4px;
 
+        background-image: url(../img/deMarcia/icon-next.png);
 
+        &:hover{
 
+            background-image: url(../img/deMarcia/icon-next-hover.png);
 
+        }
 
+        &.swiper-button-disabled{
 
+            background-image: url(../img/deMarcia/icon-next-disabled.png);
 
+        }
 
+    }
 
+}
 
+// 押注
 
+.page-stake{
 
+    padding: 0 34px;
 
+    position: relative;
 
+    .top-swiper-container{
 
+        margin-top: 6px;
 
+    }
 
+    .match-container{
 
+        padding: 20px 20px 28px 20px;
 
+        box-sizing: border-box;
 
+        border: 1px solid #0B3C53;
 
+        border-bottom: none;
 
+        .match-title-hidden{
 
+            visibility: hidden;
 
+        }
 
+    }
 
+    .top-swiper-slide{
 
+        // height: 300px;
 
+        box-sizing: border-box;
 
+        background-color: #0B2540;
 
+        .title{
 
+            font-size: 18px;
 
+            color: #fff;
 
+            line-height: 1.4;
 
+            font-weight: bold;
 
+            text-align: center;
 
+            overflow: hidden;
 
+            white-space: nowrap;
 
+            text-overflow: ellipsis;
 
+        }
 
+        .info{
 
+            padding: 15px 0 10px 0;
 
+            border-bottom: 2px solid #0B3C53;
 
+            .date{
 
+                font-size: 12px;
 
+                color: #fff;
 
+                display: inline-block;
 
+                margin-right: 16px;
 
+            }
 
+            .status{
 
+                float: right;
 
+                font-size: 14px;
 
+                font-weight: bold;
 
+            }
 
+            .start{
 
+                color: #3cc234;
 
+            }
 
+            .unstart{
 
+                color: #118cb4;
 
+            }
 
+            .end{
 
+                color: #0d516d;
 
+            }
 
+            .pause{
 
+                color: #1f77fb;
 
+            }
 
+            .cancel{
 
+                color: #009944;
 
+            }
 
+        }
 
+    }
 
+    .match{
 
+        .match-item{
 
+            float: left;
 
+            width: 33.33%;
 
+            text-align: center;
 
+            img{
 
+                width: 56px;
 
+                height: auto;
 
+            }
 
+        }
 
+        .score{
 
+            padding-top: 54px;
 
+            text-align: center;
 
+            font-size: 30px;
 
+            color: #0d516d;
 
+            font-weight: bold;
 
+            span{
 
+                &.light, &.right{
 
+                    color: #13d5d3;
 
+                }
 
+            }
 
+        }
 
+        .title{
 
+            color: #fff;
 
+            font-size: 16px;
 
+            padding: 14px 0 8px 0;
 
+        }
 
+    }
 
+    .match-precent{
 
+        display: none;
 
+        height: 26px;
 
+        &.pre-hidden{
 
+            visibility: hidden;
 
+        }
 
+        .progress{
 
+            margin-top: 10px;
 
+            width: 50%;
 
+            .length{
 
+                height: 4px;
 
+                display: inline-block;
 
+                vertical-align: middle;
 
+                &.red{
 
+                    background-color: #ba0632;
 
+                    // width: 80px;
 
+                }
 
+                &.blue{
 
+                    background-color: #39b932;
 
+                    // width: 20px;
 
+                }
 
+            }
 
+            .num{
 
+                display: inline-block;
 
+                color: #fff;
 
+                font-size: 12px;
 
+                width: 32px;
 
+            }
 
+        }
 
+        .left{
 
+            float: left;
 
+        }
 
+        .right{
 
+            float: right;
 
+            text-align: right;
 
+            .num{
 
+                text-align: left;
 
+            }
 
+        }
 
+    }
 
+    .match-res-title{
 
+        &.hidden{
 
+            visibility: hidden;
 
+        }
 
+        color: #fff;
 
+        font-size: 12px;
 
+        padding-left: 12px;
 
+        border-left: 4px solid #ba0632;
 
+        margin-top: 3px;
 
+    }
 
+    .team-btn-wrap{
 
+        margin-top: 10px;
 
+        .team-btn{
 
+            display: inline-block;
 
+            width: 104px;
 
+            height: 34px;
 
+            color: #ffffff;
 
+            font-size: 12px;
 
+            text-align: center;
 
+            line-height: 34px;
 
+            &:last-child{
 
+                float: right;
 
+            }
 
+            &.team-unselect{
 
+                background-color: #807d8c;
 
+                &:hover{
 
+                    background-color: #807d8c;
 
+                }
 
+            }
 
+        }
 
+        .red-team{
 
+            background-color: #d90639;
 
+            &:hover{
 
+                background-color: #b7052f;
 
+            }
 
+        }
 
+        .blue-team{
 
+            background-color: #39b932;
 
+            &:hover{
 
+                background-color: #29a922;
 
+            }
 
+        }
 
+        .end-team{
 
+            &:nth-child(1){
 
+                border: 1px #13D5D3 solid;
 
+                color: #13d5d3;
 
+                &:hover{
 
+                    background-color: #0C3A52;
 
+                    text-decoration: none;
 
+                }
 
+            }
 
+            &:nth-child(2){
 
+                border: 1px #13D5D3 solid;
 
+                background-color: #13D5D3;
 
+                color: #0b2540;
 
+                &:hover{
 
+                    border-color: #16F0EC;
 
+                    background-color: #16F0EC;
 
+                    text-decoration: none;
 
+                }
 
+            }
 
+            &:hover{
 
+                background-color: #65636f;
 
+            }
 
+        }
 
+    }
 
+    .match-guess-btn{
 
+        display: none;
 
+        height: 30px;
 
+        line-height: 30px;
 
+        color: #47b7e9;
 
+        font-size: 12px;
 
+        text-align: center;
 
+        cursor: pointer;
 
+        border-top: 1px solid #3364b0;
 
+        &:hover{
 
+            filter: brightness(2);
 
+        }
 
+    }
 
+    .match-guess-btn_m{
 
+        display: none;
 
+        height: 30px;
 
+        line-height: 30px;
 
+        background-color: #807d8c;
 
+        color: #ffffff;
 
+        font-size: 12px;
 
+        text-align: center;
 
+        cursor: pointer;
 
+    }
 
+}
 
+.week-select{
 
+    .week-btn-wrap{
 
+        float: left;
 
+        width: 90%;
 
+        // display: flex;
 
+        height: 38px;
 
+        overflow: hidden;
 
+        .btn{
 
+            float: left;
 
+            margin-right: 3px;
 
+            margin-bottom: 3px;
 
+            width: 104px;
 
+        }
 
+        &.showmore{
 
+            height: auto;
 
+        }
 
+    }
 
+    .btn-more{
 
+        float: left;
 
+        width: 10%;
 
+    }
 
+    .btn {
 
+        height: 38px;
 
+        line-height: 38px;
 
+        cursor: pointer;
 
+        text-align: center;
 
+        font-size: 14px;
 
+        color: #47b7e9;
 
+        font-weight: 500;
 
+        background-color: #111d43;
 
+        border-radius: 3px;
 
+        transition: all 0.3s ease;
 
+        &:hover{
 
+            background-color: #47b7e9;
 
+            color: #111d43;
 
+        }
 
+        &.active{
 
+            background-color: #47b7e9;
 
+            color: #111d43;
 
+        }
 
+    }
 
+}
 
+.arrow-down-icon{
 
+    display: inline-block;
 
+    margin-left: 4px;
 
+    width: 9px;
 
+    height: 6px;
 
+    background: url(//pub.dwstatic.com/zt2018/lolrise//img/down.png);
 
+    vertical-align: middle;
 
+    &.rotate{
 
+        transform: rotate(180deg);
 
+    }
 
+}
 
+.match-guess-wrap{
 
+    padding: 0 20px 20px 20px;
 
+    display: none;
 
+    border-left: 1px solid #3364b0;
 
+    border-right:1px solid #3364b0 ;
 
+    .que-item{
 
+        .que-title{
 
+            font-size: 12px;
 
+            color: #fff;
 
+            font-weight: bold;
 
+            padding-left: 16px;
 
+            position: relative;
 
+            line-height: 1.6;
 
+            span{
 
+                display: block;
 
+                color: #3364b0;
 
+            }
 
+            ::before{
 
+                content: '';
 
+                position: absolute;
 
+                width: 2px;
 
+                height: 4px;
 
+                background-color: #fff;
 
+                left: 0;
 
+                top: 8px;
 
+            }
 
+        }
 
+        .tips{
 
+            font-size: 12px;
 
+            color: #8c8b94;
 
+        }
 
+    }
 
+    .que-radio{
 
+        margin-top: 10px;
 
+        padding-left: 16px;
 
+        label{
 
+            display: flex;
 
+            align-items: center;
 
+            color: #ddd;
 
+            font-size: 12px;
 
+            margin-right: 15px;
 
+            margin-bottom: 6px;
 
+            input[type="radio"]{
 
+                -webkit-appearance: none;
 
+                width: 18px;
 
+                height: 18px;
 
+                border: 1px solid #3364B0;
 
+                border-radius: 2px;
 
+                margin-right: 10px;
 
+            }
 
+            input[type="radio"]:checked{
 
+                background: url(//pub.dwstatic.com/zt2018/lolrise//img/ok.png) no-repeat;
 
+            }
 
+        }
 
+    }
 
+    .submit-btn{
 
+        display: inline-block;
 
+        width: 100%;
 
+        height: 34px;
 
+        color: #111d43;
 
+        font-size: 14px;
 
+        text-align: center;
 
+        line-height: 34px;
 
+        background-color: #47B7E9;
 
+        margin-top: 10px;
 
+        cursor: pointer;
 
+        outline: 0;
 
+        border: 0;
 
+        position: relative;
 
+        &::before{
 
+            content: '';
 
+            position: absolute;
 
+            left: 3px;
 
+            top: 6px;
 
+            display: block;
 
+            width: 2px;
 
+            height: 22px;
 
+            background-color: #111d43;
 
+        }
 
+        &::after{
 
+            content: '';
 
+            position: absolute;
 
+            right: 3px;
 
+            top: 6px;
 
+            display: block;
 
+            width: 2px;
 
+            height: 22px;
 
+            background-color: #111d43;
 
+        }
 
+        &:hover{
 
+            background-color: #B3E2F4;;
 
+        }
 
+        &.disabled{
 
+            pointer-events: none;
 
+            cursor: default;
 
+            opacity: 0.6;
 
+        }
 
+    }
 
+}
 
+
 
+@media screen and (max-width: 750px){
 
+    .page-stake{
 
+        padding: 0 30px;
 
+    }
 
+    .page-stake-main .page-stake .week-select .btn{
 
+        width: 60px;
 
+        color: #47b7e9;
 
+        margin-bottom: 10px;
 
+        &.active{
 
+            background-color: #47b7e9;
 
+            color: #333;
 
+        }
 
+    }
 
+    .week-select .btn{
 
+        height: 28px;
 
+        line-height: 28px;
 
+    }
 
+    .btn-more{
 
+        font-size: 12px !important;
 
+    }
 
+    .week-select{
 
+        display: flex;
 
+    }
 
+    .page-stake .match-container{
 
+        padding: 10px;
 
+        background: #111d43;
 
+        border: none;
 
+    }
 
+    .page-stake .top-swiper-slide .title{
 
+        color: #fff;
 
+    }
 
+    .page-stake .top-swiper-slide .info .date{
 
+        color: #ddd;
 
+    }
 
+    .page-stake .top-swiper-slide .info{
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: space-between;
 
+        border-bottom: 1px solid #0B3C53;
 
+    }
 
+    .page-stake .top-swiper-slide .info .date{
 
+        margin-right: 1vw;
 
+    }
 
+    .page-stake .match .score{
 
+        font-size: 22px;
 
+        text-indent: 1vw;
 
+        margin-left: 1vw;
 
+    }
 
+    .page-stake .match-res-title{
 
+        padding-left: 1vw;
 
+        border-left: 2px solid #fff;
 
+        color: #fff;
 
+    }
 
+    .page-stake-main .page-stake .team-btn-wrap .team-btn{
 
+        width: 46%;
 
+    }
 
+    .page-stake .match-precent .progress .length.blue{
 
+        background-color: #39b932;
 
+    }
 
+    .page-stake-main .page-stake .match-guess-btn{
 
+        background-color: #111d43;
 
+    }
 
+    .page-stake .top-swiper-slide{
 
+        border: 1px solid #3364b0;
 
+    }
 
+    .swiper-container-android .top-swiper-slide, .swiper-wrapper{
 
+        background-color: transparent;
 
+    }
 
+    .match-guess-wrap{
 
+        background-color: #111d43;
 
+        padding: 10px;
 
+        border: none;
 
+    }
 
+    .match-guess-wrap .que-item .que-title{
 
+        color: #fff;
 
+        padding-left: 1vw;
 
+    }
 
+    .match-guess-wrap .que-item .que-title ::before{
 
+        width: 2px;
 
+        height: 12px;
 
+        background-color: #fff;
 
+        top: 4px;
 
+    }
 
+    .match-guess-wrap .que-item .tips{
 
+        display: block;
 
+    }
 
+    .match-guess-wrap .que-radio{
 
+        padding-left: 1vw;
 
+    }
 
+    .match-guess-wrap .que-radio label{
 
+        color: #fff;
 
+    }
 
+    .match-guess-wrap .submit-btn{
 
+        width: 100%;
 
+        background-color: #47b7e9;
 
+        color: #111d43;
 
+        border-radius: 3px;
 
+    }
 
+    .page-stake-main .page-stake .top-swiper-slide{
 
+        background-color: #111d43;
 
+    }
 
+    .page-stake .team-btn-wrap .end-team:nth-child(1){
 
+        background-image: none;
 
+    }
 
+}
 
+
 
+.guess-tag {
 
+    position: absolute;
 
+    height: 109px;
 
+    width: 34px;
 
+    padding: 0 7px 0 9px;
 
+    background: url(../img/deMarcia/guess-tag.png) no-repeat;
 
+    background-size: 100% 100%;
 
+    box-sizing: border-box;
 
+    color: #13d5d3;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    text-align: center;
 
+    font-size: 13px;
 
+    line-height: 16px;
 
+    cursor: pointer;
 
+    transition: all 0.3s ease;
 
+    z-index: 2;
 
+    left: 0;
 
+    bottom: 0;
 
+    &:hover{
 
+        transform: translate3d(-1px, -5px, 0);
 
+        text-decoration: none;
 
+    }
 
+    @media screen and (max-width: 750px) {
 
+        display: none;
 
+    }
 
+}

+ 1 - 1
2018专题/赛事通用竞猜面板/src/tpl/share/matchSlider.tmpl
View File 

@@ -28,7 +28,7 @@
 
                         <img src='<%=data[i]["left_team_logo"]%>' alt="">
 
                         <img src='<%=data[i]["left_team_logo"]%>' alt="">
 
                     </div>
 
                     </div>
 
                     <div class="match-item">
 
                     <div class="match-item">
 
-                        <div class="score"><%=data[i].left_win%>:<%=data[i].right_win%></div>
 
+                        <div class="score"><span class="left"><%=data[i].left_win%></span>:<span class="right"><%=data[i].right_win%></span></div>
 
                     </div>
 
                     </div>
 
                     <div class="match-item">
 
                     <div class="match-item">
 
                         <div class="title"><%=data[i].right_team_name%></div>
 
                         <div class="title"><%=data[i].right_team_name%></div>