登录页修改

suerprisePlus

2024-10-17 78c7b6c6dfe40761e7b8eb60498f2eb73c0aaad1

 src/views/login.vue

@@ -5,37 +5,46 @@
                <div class="logImg"></div>
            </div>

            <div class="titleItem">
            <!-- <div class="titleItem">
                <div class="logText">数字孪生智能配网巡检系统</div>
            </div>
            </div> -->
        </div>
        <div class="logContent">
            <div class="contFrom">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                    <!-- <div style="margin-bottom: 10px; font-size: 14px; font-family: '微软雅黑'; color: #f78e21">演示账号：fastbee 123456</div> -->
                    <el-form-item prop="username" >
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                            <svg-icon slot="prefix" icon-class="user" class="input-icon" />
                    <el-form-item label="用户名"></el-form-item>
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="Admin">
                            <template slot="prefix">
                                <img src="../assets/logo/形状 4.png" alt="Custom Icon" style="width: 1rem; height: 1rem;">
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码"></el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
                            @keyup.enter.native="handleLogin">
                            <svg-icon slot="prefix" icon-class="password" class="input-icon" />
                            <template slot="prefix">
                                <img src="../assets/logo/形状 5.png" alt="Custom Icon" style="width: 1rem; height: 1rem;">
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="验证码"></el-form-item>
                    <el-form-item v-if="captchaOnOff" prop="code">
                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
                            @keyup.enter.native="handleLogin">
                            <svg-icon slot="prefix" icon-class="validCode" class="input-icon" />
                            <template slot="prefix">
                                <img src="../assets/logo/形状 6.png" alt="Custom Icon" style="width: 1rem; height: 1rem;">
                            </template>
                        </el-input>

                        <div class="login-code">
                            <img :src="codeUrl" @click="getCode" />
                        </div>
                    </el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe"
                        style="margin: 0px 0px 25px 0px; color: #000">记住密码</el-checkbox>
                    <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px;   font-family: Source Han Sans SC;
    color: #ffffff;">记住密码</el-checkbox>

                    <el-form-item style="width: 100%">
                        <div style="margin-bottom: 10px">
@@ -336,13 +345,13 @@
    // overflow: auto;
    width: 100%;
    position: absolute;
    background: url('../assets/logo/sdw.png') no-repeat;
    background: url('../assets/logo/图层 3.png') no-repeat;
    background-size: 100% 100%;


    .logoTitle {
        height: 266px;
        background: rgba(51, 132, 198, 1);
        height: 100%;
        background: #368ED5;
        width: 100%;
        z-index: -1;
        position: absolute;
@@ -353,12 +362,13 @@
            height: 100%;
            display: flex;
            align-items: center;
            height: 266px;
        }

        .logImg {
            width: 89px;
            height: 89px;
            background: url('../assets/logo/logo2.png') no-repeat;
            width: 570px;
            height: 90px;
            background: url('../assets/logo/Login3.png') no-repeat;
            background-size: 100% 100%;
        }

@@ -381,6 +391,8 @@

        .contFrom {
            flex: 1;


        }

        .contMessage {
@@ -388,6 +400,8 @@
            display: flex;
            justify-content: center;
            line-height: 40px;
            font-family: Source Han Sans SC;
            color: #ffffff;
        }

    }
@@ -434,5 +448,20 @@
        }
    }

    ::v-deep .el-form-item__label {
        line-height: 0px !important;
        font-family: Source Han Sans SC;
        color: #ffffff;
        font-weight: 300;
        margin-top: 10px;
        font-size: 16px;
        line-height: 10px;
    }

    ::v-deep .el-button {
        background: transparent !important;
        border-color: #ffffff;
        height: 52px;
    }
}
</style>