From c3bb35b20d6e076f73a1cad50fd6b9b94ca399a7 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期一, 06 一月 2025 16:15:05 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/assets/styles/AlimamaShuHeiTi-Bold.ttf | 0 src/views/login.vue | 302 ++++++++++++++++++++++++++++++++++---------------- src/assets/images/login-background.jpg | 0 3 files changed, 205 insertions(+), 97 deletions(-) diff --git a/src/assets/images/login-background.jpg b/src/assets/images/login-background.jpg index dc05211..9bc0d27 100644 --- a/src/assets/images/login-background.jpg +++ b/src/assets/images/login-background.jpg Binary files differ diff --git a/src/assets/styles/AlimamaShuHeiTi-Bold.ttf b/src/assets/styles/AlimamaShuHeiTi-Bold.ttf new file mode 100644 index 0000000..4c9f3cc --- /dev/null +++ b/src/assets/styles/AlimamaShuHeiTi-Bold.ttf Binary files differ diff --git a/src/views/login.vue b/src/views/login.vue index 8ceb629..b7ff677 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -1,65 +1,75 @@ <template> - <div class="login"> - <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> - <h3 class="title">新疆维吾尔自治区特种作业<br/>安全生产知识和管理能力考核系统</h3> - <el-form-item prop="username"> - <el-input - v-model="loginForm.username" - type="text" - auto-complete="off" - placeholder="账号" - > - <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> - </el-input> - </el-form-item> - <el-form-item prop="password"> - <el-input - v-model="loginForm.password" - type="password" - auto-complete="off" - placeholder="密码" - show-password - @keyup.enter.native="handleLogin" - > - <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> - </el-input> - </el-form-item> - <el-form-item prop="code" v-if="captchaEnabled"> - <el-input - v-model="loginForm.code" - auto-complete="off" - placeholder="验证码" - style="width: 63%" - @keyup.enter.native="handleLogin" - > - <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> - </el-input> - <div class="login-code"> - <img :src="codeUrl" @click="getCode" class="login-code-img"/> - </div> - </el-form-item> - <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> - <el-form-item style="width:100%;"> - <el-button - :loading="loading" - size="medium" - type="primary" - style="width:100%;" - @click.native.prevent="handleLogin" - > - <span v-if="!loading">登 录</span> - <span v-else>登 录 中...</span> - </el-button> - <div style="float: right;" v-if="register"> - <router-link class="link-type" :to="'/register'">立即注册</router-link> - </div> - </el-form-item> - </el-form> + <el-row class="login"> + <el-col :sm="24" :md="12" class="login-name"> + 新疆维吾尔自治区特种作业<br/>安全生产知识和管理能力考核平台 + </el-col> + <el-col :sm="24" :md="12" class="login-box"> + <div class="login-card"> + <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> + <h3 class="title">登录系统</h3> + <el-form-item prop="username"> + <el-input + v-model="loginForm.username" + type="text" + auto-complete="off" + placeholder="账号" + > + <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> + </el-input> + </el-form-item> + <el-form-item prop="password"> + <el-input + v-model="loginForm.password" + type="password" + auto-complete="off" + placeholder="密码" + show-password + @keyup.enter.native="handleLogin" + > + <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> + </el-input> + </el-form-item> + <el-form-item prop="code" v-if="captchaEnabled"> + <el-input + v-model="loginForm.code" + auto-complete="off" + placeholder="验证码" + style="width: 63%" + @keyup.enter.native="handleLogin" + > + <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> + </el-input> + <div class="login-code"> + <img :src="codeUrl" @click="getCode" class="login-code-img"/> + </div> + </el-form-item> + <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;color: #ccc">记住密码</el-checkbox> + <div style="display: flex;justify-content: space-between;align-items: center"> + <div style="width: 100%"> + <el-button + class="btn-cont" + :loading="loading" + size="medium" + type="primary" + @click.native.prevent="handleLogin" + > + <span v-if="!loading">登 录</span> + <span v-else>登 录 中...</span> + </el-button> + </div> + </div> + <div style="float: right;" v-if="register"> + <router-link class="link-type" :to="'/register'">立即注册</router-link> + </div> + + </el-form> + </div> + </el-col> <!-- 底部 --> <!-- <div class="el-login-footer">--> <!-- <span>技术支持:中国科学院</span>--> <!-- </div>--> - </div> + </el-row> </template> <script> @@ -159,38 +169,117 @@ </script> <style rel="stylesheet/scss" lang="scss"> -.login { - display: flex; - justify-content: center; - align-items: center; +@font-face { + font-family: "AliMa"; + src: url("../assets/styles/AlimamaShuHeiTi-Bold.ttf"); + font-style: normal; + font-weight: normal; +} +.login{ + width: 100%; height: 100%; background: url("../assets/images/login-background.jpg") no-repeat center; background-size: cover; -} -.title { - margin: 0 auto 30px; - text-align: center; - color: #707070; - line-height: 28px; + justify-content: center; + align-items: center; + display: flex; + flex-wrap: wrap; + position: relative; + box-sizing: border-box; } -.login-form { - border-radius: 6px; - background: #ffffff; - width: 400px; - padding: 25px 25px 5px 25px; - .el-input { - height: 38px; - input { - height: 38px; - } - } - .input-icon { - height: 39px; - width: 14px; - margin-left: 2px; +@keyframes floatDown { + 100% { + transform: translateY(-80px); + opacity: 100%; + -webkit-opacity: 100% } } + +.login-name{ + display: flex; + opacity: 0; + -webkit-opacity: 0; + animation: floatDown ease 0.6s forwards; + justify-content: center; + align-items: center; + font-family: 'AliMa'; + color: #fff; + font-size: 3rem; + text-align: center; + line-height: 1.6; + transform: translateY(-120px); + text-shadow: -10px 10px 20px rgba(0,0,0,.4); +} + +@keyframes floatUp { + 100% { + transform: translateY(-40px); + opacity: 100%; + -webkit-opacity: 100% + } +} + +.login-box{ + display: flex; + justify-content: center; + align-items: center; + + .login-card{ + width: 500px; + padding: 30px; + border-radius: 16px; + background-color: rgba(40,40,40,.4); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border: 1px solid rgba(255,255,255,.6); + max-width: 100%; + box-sizing: border-box; + box-shadow: 0 10px 20px rgba(0,0,0,.05); + opacity: 0; + -webkit-opacity: 0; + animation: floatUp ease 0.6s forwards; + } + .login-form { + width: 100%; + box-sizing: border-box; + + .title{ + margin: 0 0 30px; + text-align: center; + color: #fff; + font-size: 1.4rem; + letter-spacing: 8px; + } + + .el-form-item{ + margin-bottom: 30px; + } + + .el-input { + height: 48px; + input { + height: 48px; + } + .el-input__prefix{ + display: flex; + left: 15px; + align-items: center; + } + } + + .el-input__inner{ + padding-left: 45px; + } + + .input-icon { + height: 42px; + width: 16px; + margin-left: 0; + } + } +} + .login-tip { font-size: 13px; text-align: center; @@ -198,26 +287,45 @@ } .login-code { width: 33%; - height: 38px; + height: 48px; float: right; - img { + .login-code-img { + display: inline-block; + width: 100%; + padding-left: 12px; cursor: pointer; vertical-align: middle; } } -.el-login-footer { - height: 40px; - line-height: 40px; - position: fixed; - bottom: 0; - width: 100%; - text-align: center; - color: #fff; - font-family: Arial; - font-size: 12px; - letter-spacing: 1px; + +.el-form-item--default{ + margin-bottom: 15px; } -.login-code-img { - height: 38px; + +::v-deep(.el-form-item__content){ + display: flex; + justify-content: space-between; +} + +.login-btn { + width: 100%; + font-size: 1.2em; + padding: 0.6em 0.8em; + border-radius: 0.5em; + border: none; + background-color: #2563EB; + color: #fff; + cursor: pointer; + box-shadow: 2px 2px 3px #000000b4; +} + +.btn-cont { + width: 100%; + height: 48px; + padding: 3px; + background: #03a9f4; + border-radius: 0.6em; + box-sizing: border-box; + font-size: 18px; } </style> -- Gitblit v1.9.2