<template> 
 | 
  <div class="errPage-container"> 
 | 
    <el-button icon="arrow-left" class="pan-back-btn" @click="back"> 
 | 
      返回 
 | 
    </el-button> 
 | 
    <el-row> 
 | 
      <el-col :span="12"> 
 | 
        <h1 class="text-jumbo text-ginormous"> 
 | 
          401错误! 
 | 
        </h1> 
 | 
        <h2>您没有访问权限!</h2> 
 | 
        <h6>对不起,您没有访问权限,请不要进行非法操作!您可以返回主页面</h6> 
 | 
        <ul class="list-unstyled"> 
 | 
          <li class="link-type"> 
 | 
            <router-link to="/"> 
 | 
              回首页 
 | 
            </router-link> 
 | 
          </li> 
 | 
        </ul> 
 | 
      </el-col> 
 | 
      <el-col :span="12"> 
 | 
        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream."> 
 | 
      </el-col> 
 | 
    </el-row> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import errGif from '@/assets/401_images/401.gif' 
 | 
  
 | 
export default { 
 | 
  name: 'Page401', 
 | 
  data() { 
 | 
    return { 
 | 
      errGif: errGif + '?' + +new Date() 
 | 
    } 
 | 
  }, 
 | 
  methods: { 
 | 
    back() { 
 | 
      if (this.$route.query.noGoBack) { 
 | 
        this.$router.push({ path: '/' }) 
 | 
      } else { 
 | 
        this.$router.go(-1) 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
  .errPage-container { 
 | 
    width: 800px; 
 | 
    max-width: 100%; 
 | 
    margin: 100px auto; 
 | 
    .pan-back-btn { 
 | 
      background: #008489; 
 | 
      color: #fff; 
 | 
      border: none!important; 
 | 
    } 
 | 
    .pan-gif { 
 | 
      margin: 0 auto; 
 | 
      display: block; 
 | 
    } 
 | 
    .pan-img { 
 | 
      display: block; 
 | 
      margin: 0 auto; 
 | 
      width: 100%; 
 | 
    } 
 | 
    .text-jumbo { 
 | 
      font-size: 60px; 
 | 
      font-weight: 700; 
 | 
      color: #484848; 
 | 
    } 
 | 
    .list-unstyled { 
 | 
      font-size: 14px; 
 | 
      li { 
 | 
        padding-bottom: 5px; 
 | 
      } 
 | 
      a { 
 | 
        color: #008489; 
 | 
        text-decoration: none; 
 | 
        &:hover { 
 | 
          text-decoration: underline; 
 | 
        } 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
</style> 
 |