结果页

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/



404

不好意思，您访问的页面不存在~

HTML SCSS CSS

<div class="hui-result hui-result-info">
  <div class="hui-result-icon"><i class="hui-iconfont va-m">&#xe688;</i></div>
  <div class="hui-result-title">404</div>
  <div class="hui-result-extra">
    <p>不好意思，您访问的页面不存在~</p>
    <p>您可以：<a href="/" class="c-primary ml-20">去首页 &gt;</a></p>
  </div>
</div>

$primary-color:#5a98de;
  $success-color:#5eb95e;
  $warning-color: #f37b1d;
  $error-color: #c00;
  
  .hui-result {
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
  .hui-result-icon {
    .Hui-iconfont {
      font-size: 72px; 
    }
  }
  .hui-result-title {
    font-size: 24px;
    color: #afb5bf;
  }
  .hui-result-extra {
    font-size: 14px;
    color: #afb5bf;
  }
  &.hui-result-success {
    .Hui-iconfont {
      color: $success-color;
    }
  }
  &.hui-result-info {
    .Hui-iconfont {
      color: $primary-color;
    }
  }
  &.hui-result-warning {
    .Hui-iconfont {
      color: $warning-color;
    }
  }
  &.hui-result-error {
    .Hui-iconfont {
      color: $error-color;
    }
  }
}

.hui-result {
  padding-top: 60px;
  padding-bottom: 60px;
}
.hui-result .hui-result-icon {
  text-align: center;
}
.hui-result .hui-result-icon .hui-iconfont {
  font-size: 72px;
}
.hui-result .hui-result-title {
  font-size: 24px;
  color: #afb5bf;
}
.hui-result .hui-result-extra {
  font-size: 14px;
  color: #afb5bf;
}
.hui-result.hui-result-success .hui-iconfont {
  color: #5eb95e;
}
.hui-result.hui-result-info .hui-iconfont {
  color: #5a98de;
}
.hui-result.hui-result-warning .hui-iconfont {
  color: #f37b1d;
}
.hui-result.hui-result-error .hui-iconfont {
  color: #c00;
}