- 任务结果提示和警告框一样,拥有基类和四个有特殊意思的情景应用类,适应不用的用户场景,在
.result-wrap
这一层(基类)叠加.result-success
,.result-wait
,.result-fail
,.result-info
中的一种,得到相应的特殊场景内容。 这个组件多数是作为一个完整的页面内容呈现的,所以它必须有固定的 html 结构,详情请参考代码示例。 - 基类没用吗?未必,看你怎么用。
实例
我只引用了任务结果提示组件的基类!内容很简单是不是?但结构不是!
.result-success,我代表积极,正确,鼓励性质的行为结果!
.result-wait,看到我,就是说你需要等待,给我点时间!
.result-fail,你失败了,You are a loser of life!
.result-info,看我,有些事情你是需要知道的!
<div class="result-wrap ( result-success / result-info / result-wait / alert-fail )">
<div class="result-box">
<div class="result-icon"></div>
<div class="result-content">
<div class="result-inner">
<h1>
...
</h1>
...
</div>
</div>
</div>
</div>
- 组件在1024分辨率屏幕下,会缩小图标和标题的尺寸。另外还提供
.result-s
的尺寸类(暂时仅提供一种),适应不同的结构容器宽度。 -
.result-s
的尺寸类和1024分辨率下的组件尺寸,调整参数是一样的,即,一样(除了内补边距,内补边距的缩小只会在1024分辨率下会触发)。
实例
おめでとう!君には人生の大賞が!
<div class="result-wrap result-s">
</div>
垂直排列
- 在
.result-wrap
这一层引用.result-vertical
,就能得到一个垂直排版的 result notice。
实例
おめでとう!君には人生の大賞が!
<div class="result-wrap result-vertical">
</div>