vue慕课网音乐项目手记:13-歌曲列表的布局

样式

wrapper:为了固定盒子的高度,使用betterscroll

.listview
    overflow hidden
    position: fixed
    top 88px
    left 0
    bottom 0
    background: $color-background
.list-group
   padding-bottom: 30px

标题样式

.list-group-title
        height: 30px
        line-height: 30px
        padding-left: 20px
        font-size: $font-size-small
        color: $color-text-l
        background: $color-highlight-background

每一行的样式:

.list-group-item
        display: flex
        align-items: center
        padding: 20px 0 0 30px
        .avatar
          width: 50px
          height: 50px
          border-radius: 50%
        .name
          margin-left: 20px
          color: $color-text-l
          font-size: $font-size-medium


猜你喜欢

转载自blog.csdn.net/weixin_40814356/article/details/80327606