From 0bbc5abeab6a1cb504b36bcd620fcb55e496d989 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期一, 21 三月 2022 10:32:50 +0800 Subject: [PATCH] '登录页' --- src/views/login/index.vue | 202 ++++++++++++++++++++------------------------------ 1 files changed, 80 insertions(+), 122 deletions(-) diff --git a/src/views/login/index.vue b/src/views/login/index.vue index f1194f9..d35ac25 100644 --- a/src/views/login/index.vue +++ b/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; } } -- Gitblit v1.9.2