• 任务结果提示和警告框一样,拥有基类和四个有特殊意思的情景应用类,适应不用的用户场景,在 .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>
            
          

组合案例

实例

おめでとう!君には人生の大賞が!

あなたの選択:

  • 寝て、本当に呼び覚まして呼び覚まして、本当に起こされて、本当に呼び覚まして。
  • 起きて、良い服を着て現場に行く。
助けを求める

世界が終わって!

舞いあがるは終焉の地,あなたの号泣のは演奏鎮魂の楽章。