zoukankan      html  css  js  c++  java
  • VUE--404页面

    <一 404 动态页面>
    <!-- 2017/5/26- yyy-404页面-->
    <template>
      <section class="page__404" :style="{height:height+'px'}">
        <div class="error-container">
          <div class="page__error">
            <div id="pacman"></div>
          </div>
          <div class="page__container">
            <div class="page__title">
              <h1>对不起, 你访问的页面不存在!</h1>
            </div>
            <div class="page__content clearfix">
              <div class="left">
                <p>可能是如下原因引起了这个错误:</p>
                <ol type="I">
                  <li>URL输入错误</li>
                  <li>链接已失效</li>
                  <li>其他原因...</li>
                </ol>
              </div>
              <div class="right">
                <p>推荐您通过以下链接继续访问本网站:</p>
                <ol class="links" type="I">
                  <li><a href="http://www.huamoe.com">» 画萌官网</a></li>
                  <li><a href="http://weibo.com/punion">» 画萌微博</a></li>
                  <li><a href="http://www.chinarising.com.cn/">» 美盛文化</a></li>
                </ol>
              </div>
            </div>
            <div class="page__footer">
              浙ICP备16022393号-1 浙公网安备 33010802006150号
            </div>
          </div>
        </div>
      </section>
    </template>
    
    <script>
    
      export default {
        data:()=>{
          return {
            height:"",
          }
        },
        mounted(){
          this.icon();
          let ele = document.getElementById("pacman");
          this.toggleClass(ele, "pacman_eats");
        },
        methods:{
          icon(){
            let _this = this;
            _this.height = window.innerHeight;
            window.onresize=function(){ // 屏幕变化时,高度自适应
              _this.height = window.innerHeight;
            };
            setInterval(function(){
              let ele = document.getElementById("pacman");
              _this.toggleClass(ele, "pacman_eats");
            }, 300);
            let current = 0;
            let errAll = document.getElementsByClassName("page__404")[0];
            setInterval(function(){
              current -= 1;
              errAll.style.backgroundPosition = current + "px";
            }, 50);
          },
          hasClass(ele, cls) {
            return ele.className.match(new RegExp("(\s|^)" + cls + "(\s|$)"));
          },
          addClass(ele, cls) {
            let _this = this;
            if(!_this.hasClass(ele, cls)) ele.className += " " + cls;
          },
          removeClass(ele, cls) {
            let _this = this;
            if (_this.hasClass(ele, cls)) {
              let reg = new RegExp("(\s|^)" + cls + "(\s|$)");
              ele.className = ele.className.replace(reg, " ");
            }
          },
          toggleClass(ele, cls) {
            let _this = this;
            if(_this.hasClass(ele, cls)) {
              _this.removeClass(ele, cls);
            } else {
              _this.addClass(ele, cls);
            }
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
      @import "../../common/css/reset.css";
      @import "../../common/css/define";
      .page__404 {
        width: 100%;
        height: 100%;
        text-shadow: 0 1px 0 #ffffff;
        filter: dropshadow(color=#ffffff, offx=0, offy=1);
        text-align: center;
        background-color:#aaa;
        background-image:url('./images/maze_bg.png');
        overflow: hidden;
      }
      .page__error {
        background:transparent url('./images/404e.png') right 35px no-repeat;
      }
      .page__error #pacman {
        background:transparent url('./images/pacman_eats.png') 0 0 no-repeat;
      }
      .pacman_eats {
        background:transparent url('./images/pacman_eats.png') 0 -207px no-repeat!important;
      }
      .page__container {
        width:760px;
        margin:0 auto;
        border:1px solid #E0E0E0;
        border-top:1px solid #fff;
        border-bottom:1px solid #ccc;
        background-color:#E5E5E5;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.7);
      }
      .page__container .page__title {
        border-bottom:1px solid #aaa;
        overflow:hidden;
        background-color:#E7E7E7;
        text-align: center;
      }
      .page__container .page__content {
        border-top:1px solid #fff;
        border-bottom:1px solid #aaa;
      }
      .page__container .page__content ol{
        margin-top: 10px;
        li {
          font-size: 16px;
          margin: 8px 0;
          a {
            color: #000000;
            font-weight: bold;
            transition: all 0.1s linear;
            &:hover {
              color: #f9798e;
            }
          }
        }
      }
      .page__container .page__footer {
         padding:10px 20px 10px 20px;
         border-top:1px solid #f5f5f5;
         font-size:14px;
         color: #555;
         background-color:#D5D5D5;
       }
      .page__container .left {
        padding:30px 10px 20px 50px;
        width:350px;
        float:left;
      }
      .page__container .right {
        padding:30px 20px 20px 10px;
        width:320px;
        float:right;
      }
    
      .error-container {
        display:block;
        text-align: left;
        width: 960px;
        margin: 0 auto;
        padding-top:40px;
        padding-bottom:40px;
      }
      .page__error {
        background:transparent url('./images/404e.png') right 35px no-repeat;
        width:680px;
        height:280px;
        position:relative;
        margin:0 auto;
      }
      .page__error #pacman {
        width:207px;
        height:207px;
        position:absolute;
        left:0px;
        top:16px;
        background:transparent url('./images/pacman_eats.png') 0 0 no-repeat;
        animation:eats 2s linear 0s infinite alternate;
      }
      .pacman_eats {
        background:transparent url('./images/pacman_eats.png') 0 -207px no-repeat!important;
      }
      @keyframes eats {
        from {
          left:0px; top:16px;
        }
        to {
          left:200px; top:16px;
        }
      }
    
    </style>

  • 相关阅读:
    使用mybatis如果类属性名和数据库中的属性名不一样取值就会为null
    学习mybatis时出现了java.io.IOException: Could not find resource EmployeeMapper.xml
    配置mybatis-config.xml出现过很诡异的现象
    mybatis学习(一)
    报错cannot be cast to javassist.util.proxy.Proxy
    列车调度
    三角形
    土豪聪要请客(stol)
    Jams倒酒(pour)
    Data
  • 原文地址:https://www.cnblogs.com/yyy6/p/6908958.html
Copyright © 2011-2022 走看看