src/views/exception/404.vue

@@ -1,5 +1,37 @@
<template>
   <div>404</div>
   <div class="my404">
      <div class="ele-container">
         <div class="ele-wrapper">
            <div class="ele-tail"></div>
            <div class="ele-body">
               <div class="ele-head">
                  <div class="ele-eyebrows"></div>
                  <div class="ele-eyes"></div>
                  <div class="ele-mouth"></div>
                  <div class="ele-fang-front"></div>
                  <div class="ele-fang-back"></div>
                  <div class="ele-ear"></div>
               </div>
            </div>
            <div class="ele-leg-1 ele-leg-back">
               <div class="ele-foot"></div>
            </div>
            <div class="ele-leg-2 ele-leg-front">
               <div class="ele-foot"></div>
            </div>
            <div class="ele-leg-3 ele-leg-back">
               <div class="ele-foot"></div>
            </div>
            <div class="ele-leg-4 ele-leg-front">
               <div class="ele-foot"></div>
            </div>
         </div>
      </div>
      <div style="text-align: center;">
         <span>啊噢,404了..</span>
         <h1>你要找的东西丢失咯..</h1>
      </div>
   </div>
</template>

<script>
@@ -8,6 +40,15 @@
   }
</script>

<style scoped>
<style scoped lang="less">
   @import '../../assets/404/styles.less';

   .my404 {
      margin-top: 30%;
      min-height: 700px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
   }
</style>