完成部分静态页面

“dzb”

2022-09-26 eba69a5d895497c37990f15abfb083474ca037da

 src/views/info/Fail/index.vue

@@ -1,38 +1,151 @@
<template>
    <div class="fail">
        <header>
            <div class="header-img">
                <img src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__fe57e10f2714b3e5e553a2c6469510de.png"
                    alt="">
        <el-main>
            <div class="main-header">
                <div class="img">
                    X
                </div>
                <div class="header-title">
                    <span>提交失败</span>
                </div>
                <div class="header-tip">
                    <span>请核对并修改以下信息，再重新提交</span>
                </div>
            </div>
            <div class="header-tip">
                <span>请核对并修改以下信息，再重新提交</span>
            <div class="main-content">
                <h4>您提交的内容有如下错误:</h4>
                <div class="main-tip">
                    <div class="img">
                        X
                    </div>
                    <span>您的账户已被冻结</span>
                    <el-link>立即解冻<i class="el-icon-arrow-right"></i></el-link>
                </div>
                <div class="main-tip">
                    <div class="img">
                        X
                    </div>
                    <span>您的账户还不具备申请资格</span>
                    <el-link>立即升级<i class="el-icon-arrow-right"></i></el-link>
                </div>
            </div>
        </header>
        <main>
            <h4>您提交的内容有如下错误:</h4>
            <div class="main-tip">
                <img src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__fe57e10f2714b3e5e553a2c6469510de.png"
                    alt="">
                <span>您的账户已被冻结</span>
                <el-link>立即解冻</el-link>
            <div class="main-footer">
                <el-button type="primary">返回修改</el-button>
            </div>
            <div class="main-tip">
                <img src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__fe57e10f2714b3e5e553a2c6469510de.png"
                    alt="">
                <span>您的账户还不具备申请资格</span>
                <el-link>立即升级</el-link>
            </div>
        </main>
        <footer>
            <el-button type="primary">返回修改</el-button>
        </footer>
        </el-main>
        <el-footer>
            <myFooter></myFooter>
        </el-footer>
    </div>
</template>
<script>
    import myFooter from '@/components/Footer'
    export default {
        components:{
            myFooter,
        },
        data(){
            return{

            }
        },
    }
</script>
<style lang="scss" scoped>
    .fail{
.fail {
    min-width: 960px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .img {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }

    .el-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .main-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            .img {
                font-size: 50px;
                width: 80px;
                height: 80px;
                background-color: #f95e5a;
                color: #fff;
            }

            .header-title {
                line-height: 60px;
                font-weight: 650;
                font-size: 24px;
                color: #666;
            }

            .header-tip {
                color: #b39999;
            }
        }

        .main-content {
            margin-top: 20px;
            margin-left: -400px;
            h4 {
                color: #666;
            }

            .main-tip {
                display: flex;
                align-items: center;
                line-height: 30px;

                .img {
                    width: 14px;
                    height: 14px;
                    font-size: 10px;
                    border: 2px solid #f95e5a;
                    color: #f95e5a;
                    font-weight: 650;
                }

                span {
                    margin-left: 5px;
                    color: #666666;
                }

                .el-link {
                    margin-left: 20px;
                    color: #0079fe;
                    font-weight: 650;

                    i {
                        font-weight: 650;
                    }
                }
            }
        }

        .main-footer {
            margin-top: 60px;

            .el-button {
                width: 140px;
                height: 40px;
                background-color: #0079fe;

                &:hover {
                    background-color: rgba(0, 121, 254, 0.7);
                }
            }
        }
    }
}
</style>