新闻列表、侧边栏、footer

新闻列表、侧边栏、footer

• 31.新闻列表tab栏布局完成
• 32.新闻列表页布局完成
• 33.加载更多按钮的布局和样式
• 34.侧边栏-标题和广告位布局完成
• 35.侧边栏-关注第三方平台盒子布局和样式
• 36.侧边栏-热门推荐完成
• 37.footer布局和样式（1）
• 38.footer布局和样式（2）

新闻列表tab栏布局完成

 <div class="list-outer-group">
                    <ul class="list-tab">
                        <li class="active"><a href="#">最新资讯</a></li>
                        <li><a href="#">热点</a></li>
                        <li><a href="#">深度报道</a></li>
                        <li><a href="#">干货分享</a></li>
                        <li><a href="#">投资人说</a></li>
                    </ul>
</div>

.main{
    .wrapper{
        .main-content-wrapper{
            .list-outer-group{
                background: #fff;
                margin-top: 14px;

                .list-tab{
                    width: 100%;
                    height: 66px;
                    overflow: hidden;   //比较重要
                    border: 1px solid #eeeeee;
                    border-left: none;
                    border-right: none;

                    li{
                        float: left;
                        padding: 0 10px;
                        margin-top: 20px;
                        a{
                            color: #878787;
                        }
                        &:first-of-type{ 
                            border-left: 5px solid $themeColor;    //加个竖线
                        }
                        &.active{
                            a{
                                color: #212121;
                            }
                        }
                    }
                }

           
            }
        }
    }
}

新闻列表页布局完成

                    <ul class="list-inner-group">
                        <li>
                            <div class="thumbnail-group">
                                <a href="#">
                                    <img src="http://static-image.xfz.cn/1516169692_914.jpg-website.news.list" alt="">
                                </a>
                            </div>
                            <div class="news-group">
                                <p class="title">
                                    <a href="#">王健林卖掉进军海外首个项目:17亿售伦敦ONE六成股权</a>
                                </p>
                                <p class="desc">
                                    外界关于万达要出售此前在海外投资项目的消息一直不断。
                                </p>
                                <p class="more">
                                   <span class="category">深度报道</span>
                                    <span class="pub-time">1小时前</span>
                                    <span class="author">知了课堂</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="thumbnail-group">
                                <a href="#">
                                    <img src="http://static-image.xfz.cn/1516010894_546.jpg-website.news.list" alt="">
                                </a>
                            </div>
                            <div class="news-group">
                                <p class="title">
                                    <a href="#">
张小龙演讲全文：小程序、公众号将会有哪些变化？</a>
                                </p>
                                <p class="desc">
                                    我认为探索线下的精彩生活，这是我们下一步想要尝试的一个方向。
                                </p>
                                <p class="more">
                                   <span class="category">热点</span>
                                    <span class="pub-time">2小时前</span>
                                    <span class="author">知了课堂</span>
                                </p>
                            </div>
                        </li>
                    </ul>

     .list-inner-group{
                    @include news_list;
                }

               

加载更多按钮的布局和样式

 <div class="load-more-group">
            <button class="load-more">查看更多</button>
 </div>

 .load-more-group{
                    padding: 20px 0;
                    text-align: center;
                    .load-more{
                        width: 402px;
                        height: 40px;
                        background: #d2dcea;
                        color: #6d85ac;  //字体颜色
                        border: none;    // 去除边框
                        outline: none;
                        cursor: pointer;
                    }
                }

侧边栏-标题和广告位布局完成

<div class="sidebar-wrapper">
                <div class="title-group">
                    <span class="title">在线课堂</span>
                    <a class="more" href="#">更多</a>
                </div>
                <div class="advertise-group">
                    <a href="#">
                        <img src="http://www.xfz.cn/static/build/images/side-gift-banner.png" alt="">
                    </a>
                </div>
</div>

侧边栏-关注第三方平台盒子布局和样式

                <div class="platform-group">
                    <div class="title-group">
                        <span class="title">关注小饭桌</span>
                    </div>
                    <div class="focus-group">
                        <ul class="left-group">
                           <li class="zhihu">
                               <a href="#" target="_blank">小饭桌创业课堂</a>
                           </li>
                            <li class="weibo">
                               <a href="#" target="_blank">小饭桌创业课堂</a>
                           </li>
                            <li class="toutiao">
                               <a href="#" target="_blank">小饭桌</a>
                           </li>
                        </ul>
                        <div class="right-group">
                            <p class="desc">扫码关注小饭桌微信公众平台xfz008</p>
                        </div>
                    </div>
                </div>

侧边栏-热门推荐完成

footer布局和样式（1）

 <footer class="footer">
        <div class="top-group">
            <div class="top-inner-group">
                <div class="logo-box"></div>
                <div class="detail-group">
                    <div class="line1">
                        <ul class="links">
                            <li><a href="#">关于小饭桌</a></li>
                            <li><a href="#">创业课堂</a></li>
                            <li><a href="#">寻求报道</a></li>
                            <li><a href="#">创业礼包</a></li>
                        </ul>
                        <div class="about-us">
                            <span class="title">关于我们：</span>
                            <ul class="social-group">
                                <li class="weixin">
                                    <div class="wx-qrcode"></div>
                                    <span class="text">xfz008
                                    </span>
                                </li>
                                <li class="weibo">
                                    <a class="text" href="#">小饭桌创业课堂</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="line2">
                        <p class="address">地址：北京市朝阳区东三环北路38号院1号楼17层2001内1、16室</p>
                        <p class="contact">联系方式：400-810-1090（工作日10点-18点）</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-group">
            ©2017 北京子木投资顾问有限公司 京ICP备15051289号-1
        </div>
    </footer>

@import "constants.scss";

.footer{
    font-size: 14px;
    color: #c9c9c9;
    padding-top: 20px;
    .top-group{
        background: #555e67;
        height: 100px;
        padding-top: 26px;
        box-sizing: border-box;

        .top-inner-group{
            width: $pageWidth;
            margin: 0 auto;
            //overflow: hidden;
            position: relative;

            .logo-box{
                width: 168px;
                height: 54px;
                float: left;
                background: url("http://xfz.cn/static/build/images/foot-logo.png");
                background-repeat: no-repeat;
                background-size: 100%;
            }
            .detail-group{
                float: left;
                margin-left: 84px;

                .line1{
                    overflow: hidden;
                    .links{
                        float: left;
                        overflow: hidden;
                        li{
                            float: left;
                            padding: 0 10px;
                            a{
                                color: #c9c9c9;
                            }
                            &:first-of-type{
                                padding-left: 0;
                            }
                            &:last-of-type{
                                border-right: none;
                            }
                            border-right:1px solid #c9c9c9;
                        }
                    }
                    .about-us{
                        float: left;
                        margin-left: 40px;
                        .title{
                            float: left;
                        }

                        .social-group{
                            float: left;
                            overflow: hidden;
                            li{
                                float: left;
                                color: #fff;
                                .text{
                                    margin-left: 24px;
                                }
                            }
                            .weixin{
                                background: url("https://www.xfz.cn/static/build/images/wx-icon.png");
                                background-repeat: no-repeat;
                                background-size: 30%;
                                cursor: pointer;
                                &:hover .wx-qrcode{
                                    display: block;
                                }
                                .wx-qrcode{
                                    width: 204px;
                                    height: 204px;
                                    background: url("https://www.xfz.cn/static/build/images/wxQr.jpg");
                                    background-size: 100%;
                                    position: absolute;
                                    right: 360px;
                                    top: -220px;
                                    display: none;
                                }
                            }
                            .weibo{
                                margin-left: 20px;
                                background: url("https://www.xfz.cn/static/build/images/xl-icon.png");
                                background-repeat: no-repeat;
                                background-size: 18%;
                                a{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }

                .line2{
                    overflow: hidden;
                    margin-top: 20px;
                    .address{
                        float: left;
                    }
                    .contact{
                        float: left;
                        margin-left: 40px;
                    }
                }
            }
        }
    }

    .bottom-group{
        background: #383e44;
        height: 60px;
        text-align: center;
        line-height: 60px;
    }
}

footer布局和样式（2）

 <footer class="footer">
        <div class="top-group">
            <div class="top-inner-group">
                <div class="logo-box"></div>
                <div class="detail-group">
                    <div class="line1">
                        <ul class="links">
                            <li><a href="#">关于小饭桌</a></li>
                            <li><a href="#">创业课堂</a></li>
                            <li><a href="#">寻求报道</a></li>
                            <li><a href="#">创业礼包</a></li>
                        </ul>
                        <div class="about-us">
                            <span class="title">关于我们：</span>
                            <ul class="social-group">
                                <li class="weixin">
                                    <div class="wx-qrcode"></div>
                                    <span class="text">xfz008
                                    </span>
                                </li>
                                <li class="weibo">
                                    <a class="text" href="#">小饭桌创业课堂</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="line2">
                        <p class="address">地址：北京市朝阳区东三环北路38号院1号楼17层2001内1、16室</p>
                        <p class="contact">联系方式：400-810-1090（工作日10点-18点）</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-group">
            ©2017 北京子木投资顾问有限公司 京ICP备15051289号-1
        </div>
    </footer>

@import "constants.scss";

.footer{
    font-size: 14px;
    color: #c9c9c9;
    padding-top: 20px;
    .top-group{
        background: #555e67;
        height: 100px;
        padding-top: 26px;
        box-sizing: border-box;

        .top-inner-group{
            width: $pageWidth;
            margin: 0 auto;
            //overflow: hidden;
            position: relative;

            .logo-box{
                width: 168px;
                height: 54px;
                float: left;
                background: url("http://xfz.cn/static/build/images/foot-logo.png");
                background-repeat: no-repeat;
                background-size: 100%;
            }
            .detail-group{
                float: left;
                margin-left: 84px;

                .line1{
                    overflow: hidden;
                    .links{
                        float: left;
                        overflow: hidden;
                        li{
                            float: left;
                            padding: 0 10px;
                            a{
                                color: #c9c9c9;
                            }
                            &:first-of-type{
                                padding-left: 0;
                            }
                            &:last-of-type{
                                border-right: none;
                            }
                            border-right:1px solid #c9c9c9;
                        }
                    }
                    .about-us{
                        float: left;
                        margin-left: 40px;
                        .title{
                            float: left;
                        }

                        .social-group{
                            float: left;
                            overflow: hidden;
                            li{
                                float: left;
                                color: #fff;
                                .text{
                                    margin-left: 24px;
                                }
                            }
                            .weixin{
                                background: url("https://www.xfz.cn/static/build/images/wx-icon.png");
                                background-repeat: no-repeat;
                                background-size: 30%;
                                cursor: pointer;
                                &:hover .wx-qrcode{
                                    display: block;
                                }
                                .wx-qrcode{
                                    width: 204px;
                                    height: 204px;
                                    background: url("https://www.xfz.cn/static/build/images/wxQr.jpg");
                                    background-size: 100%;
                                    position: absolute;
                                    right: 360px;
                                    top: -220px;
                                    display: none;
                                }
                            }
                            .weibo{
                                margin-left: 20px;
                                background: url("https://www.xfz.cn/static/build/images/xl-icon.png");
                                background-repeat: no-repeat;
                                background-size: 18%;
                                a{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }

                .line2{
                    overflow: hidden;
                    margin-top: 20px;
                    .address{
                        float: left;
                    }
                    .contact{
                        float: left;
                        margin-left: 40px;
                    }
                }
            }
        }
    }

    .bottom-group{
        background: #383e44;
        height: 60px;
        text-align: center;
        line-height: 60px;
    }
}