主要代码
<style>
body,html{
background-color: #f2f2f2;
}
/* 固定写法，图形在云端。 Iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/*/
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.listNone{
display: block;
}
.listEmpty{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<body>
<div class="listNone">
<div class="listEmpty">
<span>
<svg class="icon" aria-hidden="true" style="width:120px;height:100px;">
<use xlink:href="#icon-zanwuxiaoxi"></use>
</svg>
</span>
<span style="font-size: 13px;color: #999;">暂无相关通知</span>
</div>
</div>
</body>
核心代码
image.png
效果展示
image.png
转载于:https://www.jianshu.com/p/e9de9b8f2dbb