spring-cloud
/
404.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> New Document </title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <style>
        .error404-body-con {
            width: 700px;
            height: 500px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .el-card {
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            -webkit-transition: .3s;
            transition: .3s;
        }

        .box-card {

        }

        .is-always-shadow {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        }

        .el-card, .el-message {
            border-radius: 4px;
            overflow: hidden;
        }

        .box-card .el-card__body {
            padding: 20px 20px 0;
        }

        .error404-body-con-title[data-v-2eb098b8] {
            text-align: center;
            font-size: 240px;
            font-weight: 700;
            color: #2d8cf0;
            height: 260px;
            line-height: 260px;
            margin-top: 40px;
        }

        .error404-body-con-message[data-v-2eb098b8] {
            display: block;
            text-align: center;
            font-size: 30px;
            font-weight: 500;
            letter-spacing: 12px;
            color: #dddde2;
        }

        .error404-btn-con[data-v-2eb098b8] {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 40px;
        }

        .error404-body-con-title span[data-v-2eb098b8] {
            display: inline-block;
            color: #19be6b;
            font-size: 230px;
            animation: error404animation-data-v-2eb098b8 3s ease 0s infinite alternate;
            -webkit-animation: error404animation-data-v-2eb098b8 3s ease 0s infinite alternate;
        }

        .el-button--text {
            color: #409EFF;
            background: 0 0;
            padding-left: 0;
            padding-right: 0;
        }

        .el-button {
            width: 200px;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            outline: 0;
            margin: 0;
            -webkit-transition: .1s;
            transition: .1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
        }

        .el-button--primary {
            color: #fff;
            background-color: #409EFF;
            border-color: #409EFF;
        }

        @keyframes error404animation-data-v-2eb098b8 {
            0% {
                transform: rotate(0deg)
            }
            20% {
                transform: rotate(-60deg)
            }
            40% {
                transform: rotate(-10deg)
            }
            60% {
                transform: rotate(50deg)
            }
            80% {
                transform: rotate(-20deg)
            }
            to {
                transform: rotate(0deg)
            }
        }

        .error404-body-con[data-v-2eb098b8] {
            width: 700px;
            height: 500px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .error404-body-con-title[data-v-2eb098b8] {
            text-align: center;
            font-size: 240px;
            font-weight: 700;
            color: #2d8cf0;
            height: 260px;
            line-height: 260px;
            margin-top: 40px
        }

        .error404-body-con-title span[data-v-2eb098b8] {
            display: inline-block;
            color: #19be6b;
            font-size: 230px;
            animation: error404animation-data-v-2eb098b8 3s ease 0s infinite alternate
        }


        /*当屏幕大于320px，并小于1156px时执行下面的css*/
        @media screen and (min-width: 250px) and (max-width: 600px) {

            .error404-body-con {
                width: 350px !important;
                height: 300px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .el-card {
                border: 1px solid #ebeef5;
                background-color: #fff;
                color: #303133;
                -webkit-transition: .3s;
                transition: .3s;
            }

            .box-card {

            }

            .is-always-shadow {
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            }

            .el-card, .el-message {
                border-radius: 4px;
                overflow: hidden;
            }

            .box-card .el-card__body {
                padding: 20px 20px 0;
            }

            .error404-body-con-title[data-v-2eb098b8] {
                text-align: center;
                font-size: 130px;
                font-weight: 700;
                color: #2d8cf0;
                height: 240px;
                line-height: 240px;
                margin-top: 40px;
            }

            .error404-body-con-message[data-v-2eb098b8] {
                display: block;
                text-align: center;
                font-size: 20px;
                font-weight: 500;
                letter-spacing: 8px;
                color: #dddde2;
            }

            .error404-btn-con[data-v-2eb098b8] {
                text-align: center;
                padding: 20px 0;
                margin-bottom: 40px;
            }

            .error404-body-con-title span[data-v-2eb098b8] {
                display: inline-block;
                color: #19be6b;
                font-size: 130px;
                animation: error404animation-data-v-2eb098b8 3s ease 0s infinite alternate;
                -webkit-animation: error404animation-data-v-2eb098b8 3s ease 0s infinite alternate;
            }

            .el-button--text {
                color: #409EFF;
                background: 0 0;
                padding-left: 0;
                padding-right: 0;
            }

            .el-button {
                width: 125px;
                display: inline-block;
                line-height: 1;
                white-space: nowrap;
                cursor: pointer;
                background: #fff;
                border: 1px solid #dcdfe6;
                color: #606266;
                -webkit-appearance: none;
                text-align: center;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                outline: 0;
                margin: 0;
                -webkit-transition: .1s;
                transition: .1s;
                font-weight: 500;
                padding: 12px 18px;
                font-size: 14px;
                border-radius: 4px;
            }

            .el-button--primary {
                color: #fff;
                background-color: #409EFF !important;
                border-color: #409EFF;
            }
        }

        /*

        /*
        大屏幕 ：大于等于1200px
        @media (min-width: 1200px) { ... }

        @media (min-width: 980px){...}

        平板电脑和小屏电脑之间的分辨率
        @media (min-width: 768px) and (max-width: 979px) { ... }

        横向放置的手机和竖向放置的平板之间的分辨率
        @media (max-width: 767px) { ... }

        横向放置的手机及分辨率更小的设备
        @media (max-width: 480px) { ... }
        */
    </style>
</head>

<body style="width: 100%;height: 100%;margin: 0;padding: 0;">
<div data-v-2eb098b8="" class="error404-body-con">
    <div data-v-2eb098b8="" class="el-card box-card is-always-shadow">
        <div class="el-card__body">
            <div data-v-2eb098b8="" class="error404-body-con-title">4<span data-v-2eb098b8="">0</span>4</div>
            <p data-v-2eb098b8="" class="error404-body-con-message">YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST</p>
            <div data-v-2eb098b8="" class="error404-btn-con">
                <button data-v-2eb098b8="" type="button" class="el-button el-button--text el-button--large"><!---->
                    <!----><span>返回首页</span></button>
                <button data-v-2eb098b8="" type="button" class="el-button el-button--primary el-button--large"
                        style="margin-left: 40px;" onclick="window.history.back()"><!----><!----><span>返回上一页</span>
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>