reagent_manage/vue/src/views/app/404.vue

<template functional>
    <div class="error-container">
        <div>
            <div class="pic">
                <img alt="404" class="pic__parent" src="@/assets/404_images/404.png">
                <img alt="404" class="pic__child left" src="@/assets/404_images/404_cloud.png">
                <img alt="404" class="pic__child mid" src="@/assets/404_images/404_cloud.png">
                <img alt="404" class="pic__child right" src="@/assets/404_images/404_cloud.png">
            </div>
            <div class="bullshit">
                <div class="bullshit__oops">Oops!</div>
                <div class="bullshit__headline">没有找到该页面...</div>
                <div class="bullshit__info">
                    请检查链接地址是否正确，或者点击下方按钮返回
                </div>
                <router-link class="bullshit__return-home" to="/index">返回首页</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Page404'
    }
</script>

<style lang="scss" scoped>
    .error-container {
        transform: translate(-50%, -50%);
        position: absolute;
        top: 40%;
        left: 50%;

        > div {
            position: relative;
            width: 1200px;
            padding: 0 50px;
            overflow: hidden;

            .pic {
                position: relative;
                float: left;
                width: 600px;
                overflow: hidden;

                &__parent {
                    width: 100%;
                }

                &__child {
                    position: absolute;

                    &.left {
                        width: 80px;
                        top: 17px;
                        left: 220px;
                        opacity: 0;
                        animation: cloudLeft 2s linear 1s infinite forwards;
                    }

                    &.mid {
                        width: 46px;
                        top: 10px;
                        left: 420px;
                        opacity: 0;
                        animation: cloudMid 2s linear 1.2s infinite forwards;
                    }

                    &.right {
                        width: 62px;
                        top: 100px;
                        left: 500px;
                        opacity: 0;
                        animation: cloudRight 2s linear 1s infinite forwards;
                    }

                    @keyframes cloudLeft {
                        0% {
                            top: 17px;
                            left: 220px;
                            opacity: 0;
                        }
                        20% {
                            top: 33px;
                            left: 188px;
                            opacity: 1;
                        }
                        80% {
                            top: 81px;
                            left: 92px;
                            opacity: 1;
                        }
                        100% {
                            top: 97px;
                            left: 60px;
                            opacity: 0;
                        }
                    }
                    @keyframes cloudMid {
                        0% {
                            top: 10px;
                            left: 420px;
                            opacity: 0;
                        }
                        20% {
                            top: 40px;
                            left: 360px;
                            opacity: 1;
                        }
                        70% {
                            top: 130px;
                            left: 180px;
                            opacity: 1;
                        }
                        100% {
                            top: 160px;
                            left: 120px;
                            opacity: 0;
                        }
                    }
                    @keyframes cloudRight {
                        0% {
                            top: 100px;
                            left: 500px;
                            opacity: 0;
                        }
                        20% {
                            top: 120px;
                            left: 460px;
                            opacity: 1;
                        }
                        80% {
                            top: 180px;
                            left: 340px;
                            opacity: 1;
                        }
                        100% {
                            top: 200px;
                            left: 300px;
                            opacity: 0;
                        }
                    }
                }
            }

            .bullshit {
                position: relative;
                float: left;
                width: 300px;
                padding: 30px 0;
                overflow: hidden;

                &__oops {
                    font-size: 32px;
                    font-weight: bold;
                    line-height: 40px;
                    color: #1482f0;
                    opacity: 0;
                    margin-bottom: 20px;
                    animation-name: slideUp;
                    animation-duration: 0.5s;
                    animation-fill-mode: forwards;
                }

                &__headline {
                    font-size: 20px;
                    line-height: 24px;
                    color: #222;
                    font-weight: bold;
                    opacity: 0;
                    margin-bottom: 10px;
                    animation-name: slideUp;
                    animation-duration: 0.5s;
                    animation-delay: 0.1s;
                    animation-fill-mode: forwards;
                }

                &__info {
                    font-size: 13px;
                    line-height: 21px;
                    color: grey;
                    opacity: 0;
                    margin-bottom: 30px;
                    animation-name: slideUp;
                    animation-duration: 0.5s;
                    animation-delay: 0.2s;
                    animation-fill-mode: forwards;
                }

                &__return-home {
                    display: block;
                    float: left;
                    width: 110px;
                    height: 36px;
                    background: #1482f0;
                    border-radius: 100px;
                    text-align: center;
                    color: #ffffff;
                    opacity: 0;
                    font-size: 14px;
                    line-height: 36px;
                    cursor: pointer;
                    animation-name: slideUp;
                    animation-duration: 0.5s;
                    animation-delay: 0.3s;
                    animation-fill-mode: forwards;
                }

                @keyframes slideUp {
                    0% {
                        transform: translateY(60px);
                        opacity: 0;
                    }
                    100% {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }
            }
        }
    }
</style>