feat(结果模块): 新布局页面，完善效果展示

src/app/feature/result/fail/fail.component.html

@@ -1,3 +1,36 @@
-<p>
-  fail works!
-</p>
+<div class="page-header">
+  <sim-breadcrumb></sim-breadcrumb>
+</div>
+<div class="page-content">
+  <sim-card class="m-task">
+    <sim-card-content fxLayout="row" fxLayoutAlign="space-between center">
+      <div class="g-fail">
+        <div class="icon-box">
+          <i class="icon-close-circle text-danger"></i>
+        </div>
+        <h2 class="title">提交失败</h2>
+        <p class="description">请核对并修改以下信息后，再重新提交。</p>
+        <div class="extra">
+          <dl>
+            <dt>您提交的内容有如下错误：</dt>
+            <dd>
+              <i class="icon-close-circle-o text-danger"></i>您的账户已被冻结
+              <a>立即解冻
+                <i class="icon-right"></i>
+              </a>
+            </dd>
+            <dd>
+              <i class="icon-close-circle-o text-danger"></i>您的账户还不具备申请资格
+              <a>立即升级
+                <i class="icon-right"></i>
+              </a>
+            </dd>
+          </dl>
+        </div>
+        <div class="actions">
+          <button sim-button [color]="'primary'">返回列表</button>
+        </div>
+      </div>
+    </sim-card-content>
+  </sim-card>
+</div>

src/app/feature/result/fail/fail.component.scss

@@ -0,0 +1,50 @@
+.g-fail {
+  text-align: center;
+  width: 72%;
+  margin: 48px auto 16px;
+  .icon-box {
+    font-size: 72px;
+    line-height: 72px;
+    margin-bottom: 24px;
+  }
+  .title {
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 500;
+    line-height: 32px;
+    margin-bottom: 16px;
+  }
+  .description {
+    font-size: 14px;
+    line-height: 22px;
+    color: rgba(0, 0, 0, 0.45);
+    margin-bottom: 24px;
+  }
+  .extra {
+    background: #fafafa;
+    padding: 24px 40px;
+    border-radius: 2px;
+    text-align: left;
+    dt {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+    dd {
+      margin-bottom: 16px;
+      >i {
+        margin-right: 8px;
+      }
+      >a {
+        margin-left: 16px;
+      }
+    }
+  }
+  .actions {
+    margin-top: 32px;
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}