| | |
| | | <template> |
| | | <div class="login"> |
| | | <img class="pics1" :src="dataPng"> |
| | | <img class="pics2" :src="searchPng"> |
| | | <div class="login-panel"> |
| | | <!-- <div class="login-img">--> |
| | | <!-- <img :src="loginImgPng">--> |
| | | <!-- </div>--> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title">安全在线教育平台</h3> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | | type="text" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="账号" |
| | | > |
| | | <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter="handleLogin" |
| | | show-password |
| | | > |
| | | <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="code" v-if="captchaEnabled"> |
| | | <el-input |
| | | v-model="loginForm.code" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="验证码" |
| | | style="width: 63%" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img"/> |
| | | <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="content"> |
| | | <div class="imgBox"> |
| | | <div class="imG"></div> |
| | | </div> |
| | | <div class="formBox"> |
| | | <div class="loginTitle">账号登录</div> |
| | | <div style="padding: 20px 0;"> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <el-form-item> |
| | | <div class="fromRow"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | | type="text" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="请输入用户名" |
| | | style="height: 50px" |
| | | > |
| | | <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <div class="fromRow"> |
| | | <el-input |
| | | style="height: 50px" |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="请输入密码" |
| | | @keyup.enter="handleLogin" |
| | | show-password |
| | | > |
| | | <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <div class="fromRow"> |
| | | <el-input |
| | | v-model="loginForm.code" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="验证码" |
| | | style="height: 50px;width:63%" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img"/> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <div class="fromRow"> |
| | | <el-button |
| | | :loading="loading" |
| | | size="large" |
| | | type="primary" |
| | | style="width:100%;" |
| | | @click.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">--> |
| | | <!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>--> |
| | | <!-- <div v-if="isRegister">--> |
| | | <!-- <el-button link type="primary" @click="openRegist">立即注册</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <el-form-item style="width:100%;"> |
| | | <el-button |
| | | :loading="loading" |
| | | size="large" |
| | | type="primary" |
| | | style="width:100%;" |
| | | @click.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | <!-- 底部 --> |
| | | <!-- <div class="el-login-footer">--> |
| | | <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>--> |
| | | <!-- </div>--> |
| | | <!-- <img class="pics1" :src="dataPng">--> |
| | | <!-- <img class="pics2" :src="searchPng">--> |
| | | |
| | | |
| | | <!-- <div class="login-panel">--> |
| | | <!-- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">--> |
| | | <!-- <h3 class="title">安全在线教育平台</h3>--> |
| | | <!-- <el-form-item prop="username">--> |
| | | <!-- <el-input--> |
| | | <!-- v-model="loginForm.username"--> |
| | | <!-- type="text"--> |
| | | <!-- size="large"--> |
| | | <!-- auto-complete="off"--> |
| | | <!-- placeholder="账号"--> |
| | | <!-- >--> |
| | | <!-- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>--> |
| | | <!-- </el-input>--> |
| | | <!-- </el-form-item>--> |
| | | <!-- <el-form-item prop="password">--> |
| | | <!-- <el-input--> |
| | | <!-- v-model="loginForm.password"--> |
| | | <!-- type="password"--> |
| | | <!-- size="large"--> |
| | | <!-- auto-complete="off"--> |
| | | <!-- placeholder="密码"--> |
| | | <!-- @keyup.enter="handleLogin"--> |
| | | <!-- show-password--> |
| | | <!-- >--> |
| | | <!-- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>--> |
| | | <!-- </el-input>--> |
| | | <!-- </el-form-item>--> |
| | | <!-- <el-form-item prop="code" v-if="captchaEnabled">--> |
| | | <!-- <el-input--> |
| | | <!-- v-model="loginForm.code"--> |
| | | <!-- size="large"--> |
| | | <!-- auto-complete="off"--> |
| | | <!-- placeholder="验证码"--> |
| | | <!-- style="width: 63%"--> |
| | | <!-- @keyup.enter="handleLogin"--> |
| | | <!-- >--> |
| | | <!-- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>--> |
| | | <!-- </el-input>--> |
| | | <!-- <div class="login-code">--> |
| | | <!-- <img :src="codeUrl" @click="getCode" class="login-code-img"/>--> |
| | | <!-- </div>--> |
| | | <!-- </el-form-item>--> |
| | | <!-- <el-form-item style="width:100%;">--> |
| | | <!-- <el-button--> |
| | | <!-- :loading="loading"--> |
| | | <!-- size="large"--> |
| | | <!-- type="primary"--> |
| | | <!-- style="width:100%;"--> |
| | | <!-- @click.prevent="handleLogin"--> |
| | | <!-- >--> |
| | | <!-- <span v-if="!loading">登 录</span>--> |
| | | <!-- <span v-else>登 录 中...</span>--> |
| | | <!-- </el-button>--> |
| | | <!-- </el-form-item>--> |
| | | <!-- </el-form>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | 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/logo1.png" |
| | | |
| | | const userStore = useUserStore() |
| | | const route = useRoute(); |
| | |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const loginForm = ref({ |
| | | username: "admin", |
| | | password: "Gkhy@c413", |
| | | username: "", |
| | | password: "", |
| | | code: "", |
| | | uuid: "" |
| | | }); |
| | |
| | | |
| | | <style lang='scss' scoped> |
| | | .login { |
| | | display: flex; |
| | | position: relative; |
| | | justify-content: center; |
| | | align-items: center; |
| | | margin: 0; |
| | | padding: 0; |
| | | font-family: "microsoft yahei"; |
| | | font-size: 14px; |
| | | //background: #04C1F8; |
| | | background: #04C1F8 url(../assets/images/bgpag.png) no-repeat; |
| | | //background-repeat: no-repeat; |
| | | background-size: cover; |
| | | height: 100%; |
| | | background-image: url("../assets/images/login-bg.jpg"); |
| | | :deep(.el-form-item__content .el-form-item) { |
| | | display: block; |
| | | } |
| | | :deep(.el-form-item--default) { |
| | | margin-bottom: -25px; |
| | | } |
| | | } |
| | | .logo { |
| | | display: flex; |
| | | align-items: center; |
| | | padding-top: 80px; |
| | | } |
| | | .pics1{ |
| | | position: absolute; |
| | |
| | | opacity: 0.5; |
| | | } |
| | | .pics2{ |
| | | width:60px; |
| | | //top: 20px; |
| | | //left: 20px; |
| | | |
| | | } |
| | | .content{ |
| | | position: relative; |
| | | } |
| | | .imgBox { |
| | | width: 560px; |
| | | height: 560px; |
| | | margin-top: 80px; |
| | | float: left; |
| | | position: relative; |
| | | } |
| | | .fromRow{ |
| | | width: 100%; |
| | | margin: 25px 0; |
| | | } |
| | | .imG{ |
| | | width: 500px; |
| | | height: 500px; |
| | | background-image: url(../assets/images/ad.png) ; |
| | | background-repeat: no-repeat; |
| | | position: absolute; |
| | | width: 420px; |
| | | top: 20px; |
| | | left: 20px; |
| | | opacity: 0.5; |
| | | 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; |
| | | } |
| | | .loginTitle{ |
| | | width: 100%; |
| | | text-align: center; |
| | | font-size: 16px; |
| | | color: #FFF; |
| | | line-height: 50px; |
| | | border-bottom: 1px solid #FFF; |
| | | } |
| | | .title { |
| | | margin: 0px auto 30px auto; |
| | | text-align: center; |
| | | color: #333; |
| | | font-size: 1.4rem; |
| | | width: 90%; |
| | | height: auto; |
| | | max-width: 1200px; |
| | | margin: 0 auto; |
| | | } |
| | | .login-panel{ |
| | | border-radius: 1.2rem; |
| | |
| | | width: 80%; |
| | | } |
| | | } |
| | | .login-form { |
| | | flex: 1; |
| | | padding: 25px; |
| | | .el-input { |
| | | height: 44px; |
| | | input { |
| | | height: 44px; |
| | | } |
| | | } |
| | | .input-icon { |
| | | height: 39px; |
| | | width: 14px; |
| | | margin-left: 0px; |
| | | } |
| | | } |
| | | //.login-form { |
| | | // flex: 1; |
| | | // padding: 25px; |
| | | // .el-input { |
| | | // height: 44px; |
| | | // input { |
| | | // height: 44px; |
| | | // } |
| | | // } |
| | | // .input-icon { |
| | | // height: 39px; |
| | | // width: 14px; |
| | | // margin-left: 0px; |
| | | // } |
| | | //} |
| | | .login-tip { |
| | | font-size: 13px; |
| | | text-align: center; |
| | |
| | | letter-spacing: 1px; |
| | | } |
| | | .login-code-img { |
| | | margin-top: 5px; |
| | | width: 90px; |
| | | height: 40px; |
| | | padding-left: 12px; |
| | | padding-left: 7px; |
| | | } |
| | | |
| | | @media screen and (max-width: 980px) { |
| | | .imG { |
| | | display: none; |
| | | } |
| | | .imgBox { |
| | | width: 0; |
| | | } |
| | | .formBox{ |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | |
| | | </style> |