| | |
| | | <template> |
| | | <div class="login"> |
| | | <div class="title"> |
| | | <div class="logo"> |
| | | <img class="pics2" :src="logoPng"> |
| | | <span style="font-size: 40px;color: black"></span> |
| | | <div style="width: 2px;height: 40px;background-color: #1C68A7;margin-top: 5px;margin-left: 15px;margin-right: 15px"></div> |
| | | <span style="font-size: 28px;color: white">危化品全生命周期管理系统</span> |
| | | </div> |
| | | <!-- <div class="logo">--> |
| | | <!-- <img class="pics2" :src="logoPng">--> |
| | | <!-- <span style="font-size: 40px;color: black"></span>--> |
| | | <!-- <div style="width: 2px;height: 40px;background-color: #1C68A7;margin-top: 5px;margin-left: 15px;margin-right: 15px"></div>--> |
| | | <!-- <span style="font-size: 28px;color: white">危化品全生命周期管理系统</span>--> |
| | | <!-- </div>--> |
| | | <div class="content"> |
| | | <div class="imgBox"> |
| | | <div class="imG"> |
| | | <img style="width: auto;height: 420px" :src="back"> |
| | | <img :src="back"> |
| | | </div> |
| | | </div> |
| | | <div class="formBox"> |
| | | <div class="loginTitle">账号登录</div> |
| | | <div style="padding: 20px 0;"> |
| | | <div class="loginTitle">危化品全生命周期<br/>管理系统</div> |
| | | <div style="padding: 25px 0;"> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <el-form-item> |
| | | <div class="fromRow"> |
| | |
| | | :loading="loading" |
| | | size="large" |
| | | type="primary" |
| | | style="width:100%;" |
| | | style="width:100%;height: 50px" |
| | | @click.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | |
| | | font-family: "microsoft yahei"; |
| | | font-size: 14px; |
| | | //background: #04C1F8; |
| | | background: #04C1F8 url(../assets/images/bgpag.png) no-repeat; |
| | | background: #04C1F8 url('../assets/images/bgpag.png') no-repeat; |
| | | //background-repeat: no-repeat; |
| | | background-size: cover; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | min-height: 931px; |
| | | :deep(.el-form-item__content .el-form-item) { |
| | | display: block; |
| | |
| | | |
| | | } |
| | | .content{ |
| | | position: relative; |
| | | display: flex; |
| | | min-width: 1200px; |
| | | min-height: 600px; |
| | | border-radius: 16px; |
| | | background: url("../assets/images/logbox.jpg") no-repeat center; |
| | | background-size: cover; |
| | | box-shadow: 0 10px 20px rgba(0,0,0,.1); |
| | | transform: translateY(-50px); |
| | | } |
| | | .imgBox { |
| | | width: 560px; |
| | | height: 560px; |
| | | margin-top: 80px; |
| | | float: left; |
| | | position: relative; |
| | | width: 50%; |
| | | min-height: 600px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .fromRow{ |
| | | width: 100%; |
| | | margin: 25px 0; |
| | | } |
| | | .imG{ |
| | | //width: 500px; |
| | | //height: 500px; |
| | | //background-image: url(../assets/images/logo11.jpg) ; |
| | | width: 90%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | background-repeat: no-repeat; |
| | | position: absolute; |
| | | left: -30px; |
| | | top: 30px; |
| | | } |
| | | .formBox{ |
| | | width: 370px; |
| | | height: 400px; |
| | | border-radius: 5px; |
| | | background: rgba(25,25,25,0.6); |
| | | margin-top: 130px; |
| | | padding: 20px; |
| | | float: right; |
| | | width: 50%; |
| | | height: 100%; |
| | | min-height: 600px; |
| | | border-radius: 0 16px 16px 0; |
| | | background: #fff; |
| | | padding: 30px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | } |
| | | .loginTitle{ |
| | | width: 100%; |
| | | text-align: center; |
| | | font-size: 16px; |
| | | color: #FFF; |
| | | line-height: 50px; |
| | | border-bottom: 1px solid #FFF; |
| | | font-size: 48px; |
| | | color: #2563eb; |
| | | line-height: 1.5; |
| | | font-weight: bolder; |
| | | letter-spacing: 12px; |
| | | text-shadow: 0 5px 10px rgba(0,0,0,.1); |
| | | } |
| | | .title { |
| | | width: 90%; |