帮助中心

用法

Class类 描述
.baie-desc-list 父元素,创建容器。
.baie-desc-list-table 父元素,内置表格。
.baie-desc-list-inside 父元素,内置列表。

示例

HTML

<div class="baie-desc-list">
    <dl>
        <dt>什么是自有积分?</dt>
        <dd>自有积分是由你本人直接向百e国际公司订货获得的对应积分。</dd>
    </dl>
    <dl>
        <dt>月度等级规则</dt>
        <dd><table class="baie-desc-list-table">
            <thead>
            <tr>
                <th>月度等级</th>
                <th>自有积分</th>
                <th>一阶积分</th>
                <th>二阶积分</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th>总经销</th>
                <td>3.6W</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <th>白晶玫瑰</th>
                <td>3.6W</td>
                <td>2.7W</td>
                <td>0</td>
            </tr>
            </tbody>
        </table></dd>
    </dl>
    <dl>
        <dt>月度市场补贴结算规则</dt>
        <dd>
            <div class="baie-desc-list-inside">
                <dl>
                    <dt>玫瑰皇后市场补贴</dt>
                    <dd>
                        玫瑰皇后市场补贴=您的玫瑰皇后一阶有效积分*全网自有积分之和*0.8% /所有符合要求的玫瑰皇后一阶积分之和。<br>
                        当二阶积分/一阶积分>=7, 一阶有效积分=一阶积分;<br>
                        当二阶积分/一阶积分<7, 一阶有效积分=二阶积分/7。<br>
                        <em>*同时能获得玫瑰皇后以下等级市场补贴。</em>
                    </dd>
                </dl>
            </div>
        </dd>
    </dl>
</div>

CSS

.baie-desc-list {
    padding: .04rem .30rem;
    background-color: #ffffff;
}
.baie-desc-list>dl {
    padding: .30rem 0 .30rem;
    border-bottom: 1px solid #e4e4e4;
}
.baie-desc-list>dl:last-child {
    border:none;
}
.baie-desc-list>dl>dt {
    margin-bottom: .16rem;
    font-size: .32rem;
    color: #161616;
}
.baie-desc-list>dl>dt:before {
    content:'';
    display: inline-block;
    width: .18rem;
    height: .18rem;
    background-color: #ea5504;
    border-radius: 50%;
    position: relative;
    top: -.02rem;
    margin-right: .14rem;
}
.baie-desc-list>dl>dd {
    padding-left: .32rem;
    font-size: .28rem;
    color: #838383;
}
.baie-desc-list>dl>dd p {
    margin-bottom: .08rem;
}
.baie-desc-list-table {
    width: 100%;
    margin-top: .22rem;
}
.baie-desc-list-table tr th, .baie-desc-list-table tr td {
    padding: .20rem .06rem;
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    text-align: center;
    font-size: .28rem;
    color: #838383;
}
.baie-desc-list-table tr th {
    color: #161616;
    font-weight: normal;
}
.baie-desc-list-inside {
    color: #838383;
}
.baie-desc-list-inside dl {
    margin: .34rem 0;
}
.baie-desc-list-inside dl:last-child {
    margin-bottom: 0;
}
.baie-desc-list-inside dl dt {
    margin-bottom: .12rem;
    font-size: .28rem;
    color: #161616;
}
.baie-desc-list-inside dl dd {
    line-height: .42rem;
}
.baie-desc-list-inside dl dd em {
    color: #ea5503;
}

results matching ""

    No results matching ""