后台UI规范

1.会员头像统一样式

头像是圆形在左边，会员昵称在头像的左边，手机号码在昵称的下面头像左边

<div class="table-info-img-text">
    <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
        <div slot="error" class="image-slot">
            <el-image class="table-info-img" src="/resources/img/common/default-avatar.png"></el-image>
        </div>
    </el-image>
    <div class="table-info-text">
        <div>{{scope.row.user.nickname}}<span style="color:blue">({{scope.row.user.id}})</span></div>
        <div>{{scope.row.user.mobile}}</div>
    </div>
</div>

2.列表表格样式

表格统一使用下划线，去掉表格左右边框

3.配置分段

配置分段使用一下样式

css样式

font-size: 17px;
margin-bottom: 20px;
border-left: 5px solid #1479F0;
padding-left: 15px;

4.排序、库存样式

排序、库存等容易编辑的字段，在列表中也可以进行编辑，无需进行调转页面在编辑

5.排行榜样式

排行榜统一使用下面的样式，第一名和第三名使用图片显示名次

6.数据统计样式

样式代码

.items {
    font-family: serif;
    width: 25%;
    color: white;
    margin-left: 2%;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}