结果页

在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。

规则

用作非常重要的操作反馈，eg：支付成功，无网络状态。
个性化且优美的插画，可以提升品牌形象。
对于错误类型的结果页，页面中需要提供明确的行动点，eg：重新加载。

代码演示

结果页

操作中

提示文字

成功

操作成功

提示文字

等待

等待处理

提示文字

操作失败

提示文字

警告

无法完成操作

提示文字

在组件中使用

无法完成操作

提示文字

结果页


<div class="result-wrapper result-loading">
	<div class="result">
		<div class="result-icon"></div>
		<div class="result-title">操作中</div>
		<div class="result-msg">提示文字</div>
	</div>
</div>
<div class="result-wrapper result-success">
	<div class="result">
		<div class="result-icon"></div>
		<div class="result-title">操作成功</div>
		<div class="result-msg">提示文字</div>
	</div>
</div>
<div class="result-wrapper result-error">
	<div class="result">
		<div class="result-icon"></div>
		<div class="result-title">等待处理</div>
		<div class="result-msg">提示文字</div>
	</div>
</div>
<div class="result-wrapper result-waiting">
	<div class="result">
		<div class="result-icon"></div>
		<div class="result-title">操作失败</div>
		<div class="result-msg">提示文字</div>
	</div>
</div>
<div class="result-wrapper result-warning">
	<div class="result">
		<div class="result-icon"></div>
		<div class="result-title">无法完成操作</div>
		<div class="result-msg">提示文字</div>
	</div>
</div>

在组件中使用

为组件的父元素添加属性position:relative 并为组件添加 result-absolute


	<div style="position:relative;height:700px;">
	<div class="result-wrapper result-absolute result-warning">
		<div class="result">
			<div class="result-icon"></div>
			<div class="result-title">无法完成操作</div>
			<div class="result-msg">提示文字</div>
		</div>
	</div>
</div>