mj_firm_former/src/views/system/login/page.vue

<template>
    <div class="jbd-login-page-bg">
        <el-container class="login-container" @keyup.enter="handleLogin">
            <div class="official">
                <a href="https://www.mingjiantech.com" target="_blank">官网首页</a>
            </div>
            <el-main style="width: 80%; height: 100%; overflow: hidden; border: 0px">
                <div class="login-border">
                    <div class="login-main animated fadeIn jbd-login-page-main">
                        <!-- <span>{{ $t('login.userLogin') }}</span> -->
                        <div class="logo-box" style="width: 100%; margin: -0.0625rem">
                            <p>
                                <img src="../../../assets/images/login/bg.png" style="height: 80px; width: 387px; background-size: 100% 100%" />
                            </p>
                            <p class="txt">欢迎登录·明鉴细胞检测实验室信息管理系统</p>
                        </div>
                        <ibps-api-base-url-controller v-if="$nodeEnv === 'development'">
                            <el-tooltip effect="dark" :content="$t('navbar.switchEnvironment')" placement="bottom">
                                <el-button type="text" class="ibps-fr ibps-mr-5 btn-text can-hover">
                                    <ibps-icon name="wifi" style="font-size: 18px" />
                                </el-button>
                            </el-tooltip>
                        </ibps-api-base-url-controller>
                        <user-login />
                        <login-bottom />
                    </div>
                </div>
            </el-main>
            <el-footer style="width: 100%" height="40px">
                <div class="footer">
                    <hr />
                    <span style="display: flex; justify-content: space-between">
                        <a><i class="el-icon-s-platform" /> 深圳市金源信通科技有限公司开发</a>
                        <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备2022077950号</a>
                        <a></a>
                    </span>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
import '@/assets/styles/pages/login.scss'
import LoginBottom from './login-bottom'
import UserLogin from './user-login'
import IbpsPluginLanguage from '@/plugins/language'
import IbpsApiBaseUrlController from '@/plugins/api-base-url'

export default {
    name: 'login',
    components: {
        LoginBottom,
        UserLogin,
        IbpsPluginLanguage,
        IbpsApiBaseUrlController
    },
    data() {
        const date = new Date()
        return {
            activeName: 'user',
            year: date.getFullYear()
        }
    },
    methods: {
        handleLogin() {}
    }
}
</script>
<style lang="scss">
.jbd-login-page-bg {
    margin-top: 0px;
    height: 100%;
    width: 100%;
    background-color: #f0f3f5;
    //background-image: url("../../../assets/images/login/MJ02.jpg");
    //background-repeat:no-repeat;
    //background-size:100% ;
}

.jbd-login-page-main {
    //margin-top: 140px;
    //margin-right: 40%;
    margin-bottom: 20px;
    //box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
    height: 400px;
    width: 460px;
    //background-image: url('../../../assets/images/login/03.png');
    background-size: 100%;
    background-repeat: no-repeat;
    //border-radius: 5%;
    //box-sizing: border-box;
    // border: solid black;

    //opacity:0.9;
}

.logo-box {
    width: 460px;
    height: 120px;
    margin: 0;
    //margin: 150px auto;
    position: relative;
}

.txt {
    font-family: '微软雅黑';
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    color: grey;
    text-align: center;
}

.backindex {
    text-align: right;
    padding-right: 45px;
}

.backindexText {
    font-family: '微软雅黑';
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    color: #a73a3a;
}

// .jbd-login-page-main-img {
//     /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
//     margin-top: 70px;
//     height: 520px;
//     width: 650px;
//     margin-right: 3%;
//     background-image: url('../../../assets/images/login/MJ_login0.jpg');
//     background-size: 100%;
//     background-repeat: no-repeat;
// }

.footer {
    font-size: 12px;
    text-align: center;

    a {
        // color: #000;
        width: 200px;
        color: #8c92a4;
    }
}

.official {
    margin-left: 10px;
    font-size: 26px;
    font-weight: bold;
    position: fixed;
    left: 0;
    top: 0;
    a {
        // color: #8c92a4;
        color: black;
    }
}
</style>