'登录页'

Your Name

2022-03-21 0bbc5abeab6a1cb504b36bcd620fcb55e496d989

 src/views/login/index.vue

@@ -1,41 +1,36 @@
<template>
    <div :class="logincontainer">
        <div v-title :data-title="titleName" class="main"/>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="login-logo">
                    <div>
                        <i class="el-icon-logo" />
                    </div>
                </div>
                <div class="login-font">
                    <div v-if="isSafe">
            <span>
              {{ safeLoginTitle }}
            </span>
                    </div>
                    <div v-else>
            <span>
              特殊作业综合监管平台
            </span>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="left-container">
                    <div v-if="action==='login'" class="login-component">
                        <login-form
                            @on-success-valid="handleLogin"
                        />
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-col :xs="24" :sm="24" :lg="12">
            <div class="bottom-container">
                <span>Copyright©2017 中国科学院苏州纳米技术与纳米仿生研究所 苏ICP备10220403号-6</span>
    <div class="login-container">
        <div class="title-one">
            <span>拜城县众泰煤焦化有限公司</span>
        </div>
        <div class="title-two">
            <span>智能化安全管理技术平台</span>
        </div>
        <div class="login-main">
            <div class="login-main-pic"></div>
            <div class="login-main-form">
                <login-form
                    @on-success-valid="handleLogin"
                />
            </div>
        </el-col>
        </div>
        <div class="bottom-container">
            <span style="text-align: center">Copyright©2022 新疆阿克苏拜城众泰煤焦化有限公司 版权所有</span>
        </div>
<!--        <el-row>-->
<!--            <el-col :xs="24" :sm="24" :lg="12">-->
<!--                <div class="left-container">-->
<!--                    <div v-if="action==='login'" class="login-component">-->

<!--                    </div>-->
<!--                </div>-->
<!--            </el-col>-->
<!--        </el-row>-->
<!--        <el-col :xs="24" :sm="24" :lg="12">-->
<!--            <div class="bottom-container">-->
<!--                <span>Copyright©2017 中国科学院苏州纳米技术与纳米仿生研究所 苏ICP备10220403号-6</span>-->
<!--            </div>-->
<!--        </el-col>-->
    </div>
</template>

@@ -138,7 +133,7 @@
                            _this.$store.commit('SET_USER_TYPE', data.type)
                            // 加载菜单
                            initRouter(_this)
                            _this.$router.replace('/mapManage/mapManage/map/index')
                            _this.$router.replace('/')
                        } else {
                            _this.$message({
                                showClose: true,
@@ -172,100 +167,63 @@
    .login-container {
        min-height: 100%;
        width: 100%;
        background: url("../../assets/bg_pic.png") center no-repeat;
        background: url("../../assets/bg_login.png") center no-repeat;
        //background-size: auto 100%;
        background-size: cover;
        background-position: center;
        position: relative;
        background-color: #fff;
        // background-color: #2d3a4b;
        overflow: hidden;
        .login-logo {
            position: relative;
            color: #fff;
            text-align: center;
            padding: 0 35px 0 35px;
            margin: 0 auto;
            margin-top: 25%;
            margin-left: -100px;
        }
        .login-font {
            position: relative;
            text-align: center;
            margin-left: -10%;
            margin-top: -20%;
        }

        .login-font span {
            display: inline-block;
            width: 500px;
            height: 72px;
            font-size: 45px;
            font-family: PingFangSC-Semibold;
        background-size:cover;
        .title-one{
            width: 360px;
            height: 42px;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: white;
            line-height: 60px;
            vertical-align: middle;
            margin-top:50px;
            //padding: 20px 0; /* 撑开高度 */
        }
        .login-logo span {
            display: inline-block;
            width: 500px;
            height: 72px;
            font-size: 45px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 60px;
            vertical-align: middle;
            margin-top: 50px;
            //padding: 20px 0; /* 撑开高度 */
        }
        //使用图片来替换
        //before属性中的content文本是用来占位的,必须有
        //可以设置字体大小来确定大小
        //使用visibility: hidden;来隐藏文字
        .el-icon-logo {
            /*background: url("../../assets/logo.png") center no-repeat;*/
            background-size: cover;
            height: 10px;
            width: 128px;
            color: #fff;
            vertical-align: middle;
        }
        .el-icon-logo:before {
            content: "替";
            font-size: 25px;
            visibility: hidden;
        }
        .left-container {
            color: #FFFFFF;
            line-height: 42px;
            text-shadow: 0px 8px 10px rgba(16, 57, 193, 0.3);
            margin: 0 auto;
            margin-top: 8%;
            .login-component {
                background-color: white;
                position: relative;
                width: 600px;
                max-width: 100%;
                padding: 40px 35px 0 30px;
                margin: 0 auto;
                margin-top: 25%;
                overflow: hidden;
            margin-top: 120px;
        }
        .title-two{
            width: 473px;
            height: 61px;
            font-size: 43px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 61px;
            text-shadow: 0px 8px 10px rgba(16, 57, 193, 0.3);
            margin: 0 auto;
            margin-top: 5px;
        }
        .login-main{
            display: flex;
            background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 100%);
            box-shadow: 0px 20px 40px 0px rgba(34, 0, 255, 0.7);
            width:1036px;
            min-height: 474px;
            margin:0 auto;
            margin-top: 60px;
            .login-main-pic{
                display: inline-block;
                height: 474px;
                width: 572px;
                background: url("../../assets/img_bg_login.png") center no-repeat;
            }
            .register-component {
                position: relative;
                width: 600px;
                max-width: 100%;
                padding: 40px 35px 0 35px;
                margin: 0 auto;
                overflow: hidden;
                background-color: #fff;
            .login-main-form{
                display: inline-block;
                height:100%;
                width:464px;
            }
        }
        .bottom-container{
            position: absolute;
            bottom: 0;
            left: 30%;
            width:600px;
            height: 42px;
            font-family: PingFangSC-Semibold, PingFang SC;
            line-height: 42px;
            text-shadow: 0px 8px 10px rgba(16, 57, 193, 0.3);
            margin: 0 auto;
            margin-top: 150px;
        }
    }