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

feat:登录页样式调整

Browse Source
This commit is contained in:
李想 2025-04-16 16:25:46 +08:00
parent 1035eb9f33
commit b3b0c538f2
3 changed files with 85 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

198
src/views/login.vue
View File

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