提示页
用法
| Class类 |
描述 |
| .baie-msg |
父元素，创建容器。 |
| .baie-msg__icon-area |
子元素，图标。 |
| .baie-msg__text-area |
子元素，文本。 |
| .baie-msg__title |
次子元素，标题。 |
| .baie-msg__desc |
次子元素，描述。 |
| .baie-msg__opr-area |
子元素，按钮。 |
| .baie-btn-area |
次子元素，按钮外层，调整外边距。 |
| .baie-msg__extra-area |
子元素，附加区域。 |
示例
HTML
<div class="baie-msg">
<div class="baie-msg__icon-area"><i class="baie-icon_success baie-icon_msg"></i></div>
<div class="baie-msg__text-area">
<h2 class="baie-msg__title">操作成功</h2>
<p class="baie-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:;">文字链接</a></p>
</div>
<div class="baie-msg__opr-area">
<p class="baie-btn-area">
<a href="javascript:;" class="baie-btn baie-btn_orange">推荐操作</a>
<a href="javascript:;" class="baie-btn baie-btn_default">辅助操作</a>
</p>
</div>
<div class="baie-msg__extra-area">
<a href="javascript:;">其它操作</a>
</div>
</div>
CSS
.baie-msg {
padding-top: .72rem;
text-align: center;
}
.baie-msg__icon-area {
margin-bottom: .36rem;
}
.baie-msg__text-area {
margin-bottom: .50rem;
padding: 0 .40rem;
}
.baie-msg__text-area a {
color: #108ee9;
}
.baie-msg__title {
margin-bottom: .10rem;
font-weight: 400;
font-size: .40rem;
}
.baie-msg__desc {
font-size: .28rem;
color: #9e9e9e;
}
.baie-msg__opr-area {
margin-bottom: .50rem;
}
.baie-msg__extra-area {
margin-bottom: .30rem;
font-size: .28rem;
color: #838383;
}
.baie-msg__extra-area a {
color: #586C94;
}
@media screen and (min-height: 438px) {
.baie-msg__extra-area {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
}