| | |
| | | <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"></div> |
| | | <div class="imG"> |
| | | <img :src="back"> |
| | | </div> |
| | | </div> |
| | | <div class="formBox"> |
| | | <div class="loginTitle">账号登录</div> |
| | | <div class="loginTitle"><span>国泰新华</span><br/>安全教育平台</div> |
| | | <div style="padding: 20px 0;"> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <el-form-item> |
| | |
| | | :loading="loading" |
| | | size="large" |
| | | type="primary" |
| | | style="width:100%;" |
| | | style="width:100%;height: 50px" |
| | | @click.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | |
| | | import menu from "@/layout/components/Sidebar/menu"; |
| | | import dataPng from "@/assets/images/login-data.png" |
| | | import searchPng from "@/assets/images/login-search.png" |
| | | import logoPng from "@/assets/logo/logo3.png" |
| | | |
| | | import back from "@/assets/images/logo22.png" |
| | | const userStore = useUserStore() |
| | | const route = useRoute(); |
| | | const router = useRouter(); |
| | |
| | | //background-repeat: no-repeat; |
| | | background-size: cover; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | :deep(.el-form-item__content .el-form-item) { |
| | | display: block; |
| | | } |
| | |
| | | |
| | | } |
| | | .content{ |
| | | display: flex; |
| | | min-width: 1200px; |
| | | min-height: 560px; |
| | | border-radius: 80px 40px 80px 40px; |
| | | border: 2px solid #fff; |
| | | background: url("../assets/images/logbox.jpg") no-repeat center; |
| | | background-size: cover; |
| | | box-shadow: 0 10px 20px rgba(0,0,0,.15); |
| | | transform: translateY(-50px); |
| | | position: relative; |
| | | } |
| | | @keyframes float { |
| | | 100% { |
| | | transform: translateX(0); |
| | | opacity: 100%; |
| | | -webkit-opacity: 100% |
| | | } |
| | | } |
| | | .imgBox { |
| | | width: 560px; |
| | | height: 560px; |
| | | margin-top: 80px; |
| | | float: left; |
| | | position: relative; |
| | | width: 50%; |
| | | min-height: 560px; |
| | | opacity: 0; |
| | | -webkit-opacity: 0; |
| | | transform: translateX(50px); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | animation: float ease 0.6s 0.6s forwards; |
| | | .imG{ |
| | | width: 90%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | background-repeat: no-repeat; |
| | | } |
| | | } |
| | | .fromRow{ |
| | | width: 100%; |
| | | margin: 25px 0; |
| | | } |
| | | .imG{ |
| | | width: 500px; |
| | | height: 500px; |
| | | background-image: url(../assets/images/ad.png) ; |
| | | background-repeat: no-repeat; |
| | | position: absolute; |
| | | left: 30px; |
| | | top: 30px; |
| | | |
| | | @keyframes showForm { |
| | | 100% { |
| | | transform: translateY(0); |
| | | opacity: 100%; |
| | | -webkit-opacity: 100% |
| | | } |
| | | } |
| | | .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%; |
| | | position: absolute; |
| | | right: 0; |
| | | top: 0; |
| | | transform: translateY(30px); |
| | | opacity: 0; |
| | | -webkit-opacity: 0; |
| | | min-height: 560px; |
| | | border-radius: 16px; |
| | | padding: 20px 30px 30px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | z-index: 999; |
| | | animation: showForm ease-in-out 0.6s forwards; |
| | | } |
| | | .loginTitle{ |
| | | width: 100%; |
| | | text-align: center; |
| | | font-size: 16px; |
| | | color: #FFF; |
| | | line-height: 50px; |
| | | border-bottom: 1px solid #FFF; |
| | | font-size: 56px; |
| | | color: #2563eb; |
| | | line-height: 1.2; |
| | | font-weight: bolder; |
| | | letter-spacing: 12px; |
| | | text-shadow: 0 5px 10px rgba(0,0,0,.1); |
| | | |
| | | span{ |
| | | font-size: 32px; |
| | | font-weight: normal; |
| | | } |
| | | } |
| | | .title { |
| | | width: 90%; |
| | |
| | | letter-spacing: 1px; |
| | | } |
| | | .login-code-img { |
| | | margin-top: 5px; |
| | | width: 90px; |
| | | height: 40px; |
| | | height: 50px; |
| | | padding-left: 7px; |
| | | } |
| | | |