项目banner组件

使用了banner组件的页面有:

新上榜,7日热门,30日热门,推荐热门专题,推荐热门作者,推荐热门问答,我的收藏,我的问答.


添加了三个字体图标:

2018-02-27 14-22-15屏幕截图.png2018-02-27 14-22-05屏幕截图.png2018-02-27 14-21-58屏幕截图.png


banner组件html结构:

如:

<p class="page-banner">
    <p class="banner-img new-list">
        <p>
            <i class="iconfont icon-paihangbang"></i>
            <span>新上榜</span>
        </p>
    </p>
</p>

banner组件sass:

如:

.page-banner {
      position: relative;
      width: 100%;
      margin-bottom: 20px;
      .banner-img {
           width: 100%;
           height: 80px;
           color: $theme-skin;
           border-radius: 6px;
           background: url(/images/banner.png) no-repeat;
           background-size: 100% 100%;
           &>p  {
                display: inline-block;
                position: absolute;
                top: 18%;
                left: 3%;
                i {
                    font-size: 30px;
                    margin-right: 8px;
                 }
                 span {
                      font-size: 23px;
                      font-weight: 400;
                 }
            }
            // 新上榜
            &.new-list {
              background-color: #c094fe;
            }
             // 7日热门
            &.seven-list {
              background-color: #feb247;
            }
             // 30日热门
            &.thirty-list {
              background-color: #f58a76;
            }
             // 热门专题
            &.recommend-banner {
              background-color: #feb347;
            }
              // 热门作者
            &.recommend-author {
              background-color: #6ecafa;
            }
              // 我的收藏文章
            &.collect-note {
              background-color: #f59581;
            }
              // 我的问题
            &.question-note {
              background-color: #f2a08f;
            }
              // 热门问答
            &.recommend-question {
              background-color:#3fb7f6;
            }
        }
}

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容