列表

用法

示例1

示例2

示例3

HTML

//不带跳转的列表
<div class="baie-cells">
    <div class="baie-cell">
        <div class="baie-cell__hd">
            <img src="" alt="" style="width:.40rem;margin-right:.10rem;display:block">
        </div>

        <div class="baie-cell__bd">
            <p>cell standard</p>
        </div>

        <div class="baie-cell__ft">说明文字</div>
    </div>
</div>

//带跳转的列表
<div class="baie-cells">
    <a class="baie-cell baie-cell_access" href="javascript:;">
        <div class="baie-cell__hd">
            <img src="" alt="" style="width:.40rem;margin-right:.10rem;display:block">
        </div>

        <div class="baie-cell__bd">
            <p>cell standard</p>
        </div>

        <div class="baie-cell__ft">说明文字</div>
    </a>
</div>

//用户设置
<div class="baie-cells">
    <div class="baie-cell baie-cell_avatar baie-cell_access">
        <div class="baie-cell__bd">用户头像</div>
        <div class="baie-cell__ft">
            <img src="./images/avatar.png" alt="" class="baie-cell_avatar-img"/>
        </div>
    </div>

    <a class="baie-cell baie-cell_access" href="javascript:;">
        <div class="baie-cell__bd">
            <p>微信解绑</p>
        </div>
        <div class="baie-cell__ft"></div>
    </a>

    <a class="baie-cell baie-cell_access" href="javascript:;">
        <div class="baie-cell__bd">
            <p>联系我们</p>
        </div>
        <div class="baie-cell__ft"></div>
    </a>
</div>

CSS

/* 列表 START */
.baie-cells + .baie-cells {
    margin-top: .32rem;
}
.baie-cells {
    background-color: #FFFFFF;
    font-size: .30rem;
    overflow: hidden;
    position: relative;
}
.baie-cells__title {
    margin-top: .24rem;
    margin-bottom: .08rem;
    padding-left: .30rem;
    padding-right: .30rem;
    color: #838383;
    font-size: .28rem;
}
.baie-cells__title + .baie-cells {
    margin-top: 0;
}
.baie-cells__tips {
    margin-top: .08rem;
    color: #838383;
    padding-left: .30rem;
    padding-right: .30rem;
    font-size: .28rem;
}
.baie-cell {
    padding: .20rem .30rem;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.baie-cell:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #eaeaea;
    color: #eaeaea;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: .30rem;
}
.baie-cell:first-child:before {
    display: none;
}
.baie-cell_primary {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.baie-cell__bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.baie-cell__ft {
    text-align: right;
    color: #838383;
}
.baie-cell_access {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    color: inherit;
}
.baie-cell_access:active {
    background-color: #ECECEC;
}
.baie-cell_access .baie-cell__ft {
    padding-right: .26rem;
    position: relative;
}
.baie-cell_access .baie-cell__ft:after {
    content: " ";
    display: inline-block;
    height: .18rem;
    width: .18rem;
    border-width: 1px 1px 0 0;
    border-color: #a1a1a1;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -.10rem;
    right: .04rem;
}
.baie-cell_link {
    color: #586C94;
    font-size: .28rem;
}
.baie-cell_link:first-child:before {
    display: block;
}
.baie-cell_avatar {  /* 头像 */
    padding-top:.12rem;
    padding-bottom:.12rem;
}
.baie-cell_avatar .baie-cell__ft img {
    width: 1.14rem;
    height: 1.14rem;
    border-radius: 50%;
}
.baie-cell_avatar .baie-cell__ft span {
    margin-left: .10rem;
    color: #161616;
}
.baie-cell_avatar-small { /* 小头像 + 文字 */
    padding-top:.04rem;
    padding-bottom:.04rem;
}
.baie-cell_avatar-small .baie-cell__ft img {
    width: .80rem;
    height: .80rem;
}
/* 列表 END */