Web/digital-agriculture-admin
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Web:7c2330039f8f01034cf6e7d1cf4f92cf7c5925eb
Branches Tags
Web:main
..
compare: Web:1438e67f5d703049c67e318fe44c7555414d4608
Branches Tags
Web:main

No commits in common. "7c2330039f8f01034cf6e7d1cf4f92cf7c5925eb" and "1438e67f5d703049c67e318fe44c7555414d4608" have entirely different histories.
7c2330039f ... 1438e67f5d

3 changed files with 114 additions and 87 deletions
Show Stats Expand all files Collapse all files

BIN
src/assets/login/loginBG.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 MiB

BIN
src/assets/login/loginText.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

201
src/views/login.vue
View File

@ -1,52 +1,65 @@
<template> <template>
<div class="login"> <div class="login">
<section class="system_name">数字农业平台</section> <el-row>
<div class="login_content"> <el-col :span="14">
<section class="login_text"></section> <div class="left">
<div> <div class="login-title">{{ loginTitle }}</div>
<el-form label-position="top"> <div class="login-subTitle">专注于农业，面向未来，自主创新</div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules"> <div class="login-bgImage">
<el-form-item label="账号" prop="username"> <img src="@/assets/images/loginBg.svg" alt="" />
<el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input> </div>
</el-form-item> </div>
<el-form-item label="密码" prop="password"> </el-col>
<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码" show-password></el-input> <el-col :span="10">
</el-form-item> <div class="right">
<el-form-item label="验证码" prop="code" v-if="captchaOnOff"> <div class="loginForm-title">系统登录</div>
<el-row class="login-captchaBox"> <div class="loginForm-subTitle">SYSTEM LOGIN</div>
<el-col :span="15"> <div class="loginForm-form">
<el-input <el-form label-position="top">
v-model="loginForm.code" <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
auto-complete="off" <el-form-item label="账号" prop="username">
placeholder="验证码" <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
prefix-icon="el-icon-circle-check" </el-form-item>
@keyup.enter.native="handleLogin" <el-form-item label="密码" prop="password">
/> <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码" show-password></el-input>
</el-col> </el-form-item>
<el-col :span="8" :offset="1" style="display: flex"> <el-form-item label="验证码" prop="code" v-if="captchaOnOff">
<div class="login-code"> <el-row class="login-captchaBox">
<img :src="codeUrl" @click="getCode" /> <el-col :span="15">
</div> <el-input
</el-col> v-model="loginForm.code"
</el-row> auto-complete="off"
</el-form-item> placeholder="验证码"
prefix-icon="el-icon-circle-check"
@keyup.enter.native="handleLogin"
/>
</el-col>
<el-col :span="8" :offset="1" style="display: flex">
<div class="login-code">
<img :src="codeUrl" @click="getCode" />
</div>
</el-col>
</el-row>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 25px; color: #000; transform: scale(1.6)">记住密码</el-checkbox> <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px; color: #000">记住密码</el-checkbox>
<el-form-item class="login_btn" style="width: 100%"> <el-form-item style="width: 100%">
<el-button v-if="!bindAccount" :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleLogin"> <el-button v-if="!bindAccount" :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
<el-button v-else :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleLogin"> <el-button v-else :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
<span v-if="!loading">绑定</span> <span v-if="!loading">绑定</span>
<span v-else>绑 定 中...</span> <span v-else>绑 定 中...</span>
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-form> </el-form>
</div> </div>
</div> </div>
</el-col>
</el-row>
</div> </div>
</template> </template>
@ -253,59 +266,73 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.login { .login {
padding: 14vh 6vw 0; .left {
display: flex; height: 100vh;
justify-content: space-between; background: #109b5e;
width: 100vw; overflow: hidden;
height: 100vh; .login-title {
overflow: hidden; display: flex;
background: url('../assets/login/loginBG.png') no-repeat fixed center / cover; align-items: center;
.system_name { justify-content: center;
padding-top: 8vh; padding-bottom: 26px;
font-size: 100px; color: #fff;
font-weight: bold; letter-spacing: 11px;
color: #fff; font-size: 50px;
font-family: '黑体'; font-weight: 500;
transform: skew(-16deg); margin-top: 15vh;
} }
.login_content { .login-subTitle {
.login_text { display: flex;
margin: 0 auto 60px; align-items: center;
width: 128px; justify-content: center;
height: 78px; padding-bottom: 26px;
background: url('../assets/login/loginText.png') no-repeat; color: #fff;
background-size: 100% 100%; font-size: 20px;
} }
padding: 60px 40px; .login-bgImage {
width: 640px; display: flex;
height: 72vh; align-items: center;
background-color: rgba(0, 0, 0, 0.2); justify-content: center;
backdrop-filter: blur(18px); margin-top: 15vh;
img {
width: 75%;
}
}
}
.right {
height: 100vh;
overflow: hidden; overflow: hidden;
border-radius: 40px;
.loginForm-title { .loginForm-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
margin-top: 20vh;
}
.loginForm-subTitle {
display: flex;
align-items: center;
justify-content: center;
color: rgba(22, 23, 26, 0.1);
font-size: 23px;
white-space: nowrap;
letter-spacing: 2px;
margin-top: -10px;
}
.loginForm-form {
padding: 0 25%;
}
.login-captchaBox {
display: flex;
img {
height: 50px;
}
} }
//组件样式修改 //组件样式修改
::v-deep { ::v-deep {
.el-form-item {
margin-bottom: 40px;
}
.el-form-item__label {
color: #fff;
}
.login_btn {
margin-top: 40px;
span {
font-family: '黑体';
font-weight: bold;
}
}
.el-input__inner { .el-input__inner {
height: 50px; height: 50px;
border-radius: 25px; border-radius: 25px;