德玛西亚

2018专题/德玛西亚杯/src/_index.html

@@ -88,9 +88,9 @@
 
         <div class="page-inner">
             <!-- 比赛开始 -->
-                <div class="game_live">
+            <div class="game_live">
 
-                </div>
+            </div>
             <!-- 比赛结束 -->
             <!-- start主体内容 -->
             <div class="mod-main">
@@ -348,7 +348,25 @@
                                             <a href="#" target="_blank">LPL今日首发：Pepper携957对阵AlexLPL</a>
                                             <span>08-20</span>
                                         </li>
+                                        <li>
+                                            <i></i>
+                                            <a href="#" target="_blank">LPL今日首发：Pepper携957对阵AlexLPL</a>
+                                            <span>08-20</span>
+                                        </li>
+                                        <li>
+                                            <i></i>
+                                            <a href="#" target="_blank">LPL今日首发：Pepper携957对阵AlexLPL</a>
+                                            <span>08-20</span>
+                                        </li>
+                                        <li>
+                                            <i></i>
+                                            <a href="#" target="_blank">LPL今日首发：Pepper携957对阵AlexLPL</a>
+                                            <span>08-20</span>
+                                        </li>
                                     </ul>
+                                    <div class="main-news-more">
+                                        <a href="">更多新闻</a>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -358,6 +376,69 @@
                 </div>
             </div>
             <!-- end主体内容 -->
+            <!-- 赛事进度开始 -->
+            <div class="tournament_schedule">
+                <div class="mod-title">
+                    <h2><span>赛事进度</span></h2>
+                    
+                </div>
+                <div class="match-map">
+                    
+                </div>
+
+
+            </div>
+            <!-- 赛事进度结束 -->
+            <!-- 精彩图集开始 -->
+            <div class="wonderful_atlas">
+                <div class="mod-title">
+                     <h2><span>精彩图集</span></h2>
+                </div>
+                <div class="allstar-pic__bd">
+                    <div class="allstar-pic__left">
+                        <a href="http://lol.duowan.com/1810/404077990015.html">
+                            <img src="http://img5.dwstatic.com/lol/1810/404078385861/1540123244017.jpg" alt="淘汰赛第二日图集：EDG已经精疲力竭">
+                            <!-- <div class="pic-hover">
+                                <div class="pic-title">淘汰赛第二日图集：EDG已经精疲力竭</div>
+                                <span class="pic-ver"></span>
+                            </div> -->
+                        </a>
+                    </div>
+                    <div class="allstar-pic__mid">
+                        <a href="http://lol.duowan.com/1811/405200109477.html" class="pic-top">
+                            <img src="http://img3.dwstatic.com/lol/1811/405200811135/1541245615379.jpg" alt="S8全球总决赛决赛日图集：我们是冠军">
+                            <!-- <div class="pic-hover">
+                                <div class="pic-title">S8全球总决赛决赛日图集：我们是冠军</div>
+                                <span class="pic-ver"></span>
+                            </div> -->
+                        </a>
+                        <a href="http://lol.duowan.com/1810/404682790990.html" class="pic-bot ">
+                            <img src="http://img2.dwstatic.com/lol/1810/404684014949/1540728818923.jpg" alt="S8总决赛出征仪式：FNC与IG相约决赛">
+                            <!-- <div class="pic-hover">
+                                <div class="pic-title">S8总决赛出征仪式：FNC与IG相约决赛</div>
+                                <span class="pic-ver"></span>
+                            </div> -->
+                        </a>
+                    </div>
+                    <div class="allstar-pic__rig">
+                        <a href="http://lol.duowan.com/1810/403717335947.html" class="pic-top">
+                            <img src="http://img3.dwstatic.com/lol/1810/403717454799/1539762257571.jpg" alt="C组出线之争图集：大师兄赛后掩面哭泣">
+                            <!-- <div class="pic-hover">
+                                <div class="pic-title">C组出线之争图集：大师兄赛后掩面哭泣</div>
+                                <span class="pic-ver"></span>
+                            </div> -->
+                        </a>
+                        <a href="http://lol.duowan.com/1810/403990985860.html" class="pic-bot">
+                            <img src="http://img5.dwstatic.com/lol/1810/403991263551/1540036066663.jpg" alt="淘汰赛第一日图集：IG的华丽成长之路">
+                            <!-- <div class="pic-hover">
+                                <div class="pic-title">淘汰赛第一日图集：IG的华丽成长之路</div>
+                                <span class="pic-ver"></span>
+                            </div> -->
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- 精彩图集结束 -->
         </div>
     </div>
     <script>

2018专题/德玛西亚杯/src/sass/global.scss

@@ -86,7 +86,19 @@ $titleFont: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans
             line-height: 60px;
             float: left;
             span{
+                position: relative;
                 color: $showColor;
+                padding-left: 20px;
+                &::before{
+                    position: absolute;
+                    content: '';
+                    height: 28px;
+                    width: 6px;
+                    background: $showColor;
+                    left: -3px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
             }
         }
         .more-link{
@@ -345,6 +357,10 @@ $titleFont: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans
                             line-height: 34px;
                             p{
                                 @include ellipsis;
+                               
+                            }
+                            a {
+                                color: #fff;
                             }
                         }
                         .top-new-sub{
@@ -369,31 +385,43 @@ $titleFont: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans
                         
                         .tab-switch{
                             overflow: hidden;
-                            li{
-                                height: 39px;
-                                width: 88px;
-                                float: left;
-                                background: #363636;
-                                margin-left: 4px;
-                                font-size: 14px;
-                                line-height: 39px;
-                                text-align: center;
-                                cursor: pointer;
-                                &:first-child{
-                                    margin-left: 0;
-                                }
-                                &:hover,&.is-active{
-                                    background: #E54747;
+                            ul{
+                                display: flex;
+                                justify-content: space-around;
+                                
+                                li {
+                                    flex: 1;
+                                    height: 30px;
+                                    font-size: 14px;
+                                    color: $maincolor;
+                                    line-height: 30px;
+                                    text-align: center;
+                                    cursor: pointer;
+                                    border: 1px solid #0b3c53;
+                                    &:not(:first-child) {
+                                        border-left: none;
+                                    }
+
+                                    
+                                    &.is-active {
+                                        color: $showColor;
+                                        border:{
+                                            top:2px solid $showColor;
+                                            left: 1px solid $showColor;
+                                            right: 1px solid $showColor;
+                                            bottom: none;
+                                        }
+                                    }
                                 }
                             }
                         }
                         .tab-content{
                             ul{
-                                padding: 14px 0;
+                               
                                 li{
                                     overflow: hidden;
                                     font-size: 14px;
-                                    line-height: 28px;
+                                    line-height: 30px;
                                     &:hover{
                                         i{
                                             background: $showColor;
@@ -420,7 +448,7 @@ $titleFont: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans
                                     span{
                                         float: right;
                                         display: block;
-                                         color: $maincolor;
+                                         color: #0b384e;
                                     }
                                     &:nth-child(6n+1) {
                                         &::before {
@@ -429,12 +457,33 @@ $titleFont: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans
                                             border-top: 1px #0b3c53 solid;
                                             width: 100%;
                                             //    height: 1px;
-                                            padding-top: 14px;
-                                            margin-top: 14px;
+                                            padding-top: 24px;
+                                            margin-top: 24px;
                                         }
                                     }
+                                    &:first-child{
+                                       &::before{
+                                           padding-top: 15px;
+                                       } 
+                                    }
                                 }
                             }
+                            .main-news-more{
+                                margin: 15px auto 0;
+                                padding-top:15px; 
+                                text-align: center;
+                                border-top: 1px solid #0b3c53;
+                                a {
+                                    font-size: 14px;
+                                    padding-right: 17px;
+                                    background: url(/src/img/more.png) center right no-repeat;
+
+                                    &:hover {
+                                        color: $showColor;
+                                        background: url(/src/img/more_active.png) center right no-repeat;
+                                    }
+                                }   
+                            }
                         }
                     }
                 }
@@ -463,5 +512,64 @@ $titleFont: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans
                 }
             }
         }
+        .tournament_schedule{
+            width: 1136px;
+            margin: 0 auto;
+            margin-top: 80px;
+        }
+        .wonderful_atlas{
+            width: 1136px;
+            margin: 80px auto 0px;
+           
+            .allstar-pic__bd{
+                height: 476px;
+                overflow: hidden;
+                display: flex;
+               padding-bottom: 120px;
+                a{
+                    display: block;
+                    overflow: hidden;
+                      background: #f5f5f5;
+                       img {
+                           width: 100%;
+                           height: 100%;
+                       }
+                }
+                .allstar-pic__left{
+                    flex: 0 0 283px;
+                   a{
+                        height: 476px;
+                       
+                       
+                   }
+                }
+                .allstar-pic__mid {
+                    flex: 0 0 547px;
+                    margin: 0 15px;
+                    .pic-top{
+                        height: 230px;
+                        
+                    }
+                    .pic-bot{
+                       height: 230px; 
+                       margin-top: 16px;
+                     
+                    }
+                }
+                .allstar-pic__rig{
+                    flex: 275px;
+                    .pic-top {
+                        height: 346px;
+
+                    }
+
+                    .pic-bot {
+                        height: 114px;
+                        margin-top: 16px;
+
+                    }
+                }
+            }
+        }
     }
 }