vue 实现404 500页面

 

 

项目结构：

404图片

代码：

<template>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="ht-not-found not-found-default">
          <div class="content">
            <img src="./404.png" alt="404 image" width="560" height="428" />
            <h2>噢！找不到页面。</h2>
          </div>
          <div id="clouds">
            <div class="cloud cloud-1"></div>
            <div class="cloud cloud-2"></div>
            <div class="cloud cloud-3"></div>
            <div class="cloud cloud-4"></div>
            <div class="cloud cloud-5"></div>
            <div class="cloud cloud-6"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

 500图片

 

代码

<template>
  <div style="display: table;height: 100%;width: 80%;margin: 0 auto;">
    <div style="display: table-cell;height: 100%;vertical-align: middle;width: 50%;padding: 0 30px;">
      <div style="display: inline-block;">
        <h2 class="error-subtitle">服务异常！！！请联系管理员</h2>
        <div>
        </div>
      </div>
    </div>
    <div style="display: table-cell;height: 100%;vertical-align: middle;width: 50%;padding: 0 30px;">
      <img src="./500_2.png" alt="error" style="width: 100%;">
    </div>
  </div>
</template>