# 后台UI规范

##### 1.会员头像统一样式

​	头像是圆形在左边，会员昵称在头像的左边，手机号码在昵称的下面头像左边
```html
<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>
```

![](../img/ui1.png)

##### 2.列表表格样式

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

![](../img/ui2.png)

##### 3.配置分段	

​		配置分段使用一下样式

css样式

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

![](../img/ui3.png)

##### 4.排序、库存样式

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

![](../img/ui4.png)



##### 5.排行榜样式

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

![](../img/ui6.png)

##### 6.数据统计样式

![](../img/tongji1.png)

##### 	 样式代码

```css
.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%);
}

```

##### 7.选择商品选择样式

![](../img/goods1.png)



显示选中的商品样式

显示商品图片+商品名称+价格（价格字体红色）

![](../img/goods2.png)

##### 8.搜索栏样式

​	先放时间，先放不重要的选项到重要的选项

![](../img/search1.png)

9.曲线图片使用样式

​		该样式可以显示和隐藏指定曲线，数据简洁明了

![](../img/juxiantu.png)

10.列表中的操作按钮样式 ,样式都是 

![](../img/caozuo.png)

11.删除操作

​		删除操作必须有询问会话

![](../img/delete.png)