|
|
@@ -1,71 +1,49 @@
|
|
|
<template>
|
|
|
<div class="page-login">
|
|
|
- <div class="page-login--layer page-login--layer-area">
|
|
|
- <ul class="circles">
|
|
|
- <li v-for="n in 10" :key="n"></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
<div class="page-login--wrapper">
|
|
|
- <div class="page-login--content">
|
|
|
- <div class="page-login--logo-title">
|
|
|
- <p style="font-size: 30px">始宁农业</p>
|
|
|
+ <el-form
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="loginForm"
|
|
|
+ label-position="top">
|
|
|
+ <div class="box">
|
|
|
+ <img class="logo-0" src="/image/common/logo_0.png">
|
|
|
+ <img class="logo-1" src="/image/common/logo_1.png">
|
|
|
+ <div class="title">
|
|
|
+ <img src="/image/common/linear.png">
|
|
|
+ <span>使宁农业后台欢迎您的登录</span>
|
|
|
+ <img src="/image/common/linear.png">
|
|
|
+ </div>
|
|
|
+ <el-form-item
|
|
|
+ prop="user_name"
|
|
|
+ :rules="rules.required">
|
|
|
+ <el-input
|
|
|
+ placeholder="用户名"
|
|
|
+ v-model="loginForm.user_name"
|
|
|
+ size="default">
|
|
|
+ <i slot="prepend" class="el-icon-user-solid"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="user_password"
|
|
|
+ :rules="rules.required">
|
|
|
+ <el-input
|
|
|
+ show-password
|
|
|
+ placeholder="密码"
|
|
|
+ v-model="loginForm.user_password"
|
|
|
+ size="default"
|
|
|
+ @keydown.enter.native="handleSubmit">
|
|
|
+ <i slot="prepend" class="el-icon-lock"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
</div>
|
|
|
- <el-card shadow="never" class="login-form">
|
|
|
- <el-form
|
|
|
- :model="loginForm"
|
|
|
- :rules="rules"
|
|
|
- ref="loginForm"
|
|
|
- label-position="top">
|
|
|
- <el-form-item
|
|
|
- prop="user_name"
|
|
|
- :rules="rules.required">
|
|
|
- <el-input
|
|
|
- placeholder="用户名"
|
|
|
- v-model="loginForm.user_name"
|
|
|
- size="default">
|
|
|
- <i slot="prepend" class="el-icon-user-solid"></i>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- prop="user_password"
|
|
|
- :rules="rules.required">
|
|
|
- <el-input
|
|
|
- show-password
|
|
|
- placeholder="密码"
|
|
|
- v-model="loginForm.user_password"
|
|
|
- size="default"
|
|
|
- @keydown.enter.native="handleSubmit">
|
|
|
- <i slot="prepend" class="el-icon-lock"></i>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- prop="locale"
|
|
|
- v-if="false">
|
|
|
- <el-select
|
|
|
- class="language-select"
|
|
|
- style="display: block;"
|
|
|
- v-model="locale"
|
|
|
- placeholder="Languages"
|
|
|
- @change="handleLanguageSelect">
|
|
|
- <el-option
|
|
|
- :label="item.name"
|
|
|
- :value="item.value"
|
|
|
- v-for="item in languageList"
|
|
|
- :key="item.value"></el-option>
|
|
|
- <div class="icon-language-wrap" slot="prefix">
|
|
|
- <i class="icon-language"></i>
|
|
|
- </div>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-button
|
|
|
- @click="handleSubmit"
|
|
|
- type="primary"
|
|
|
- class="button-login"
|
|
|
- size="default">Submit
|
|
|
- </el-button>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
+ <el-button
|
|
|
+ @click="handleSubmit"
|
|
|
+ type="primary"
|
|
|
+ class="button-login"
|
|
|
+ size="default">登录
|
|
|
+ </el-button>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -161,147 +139,11 @@ export default {
|
|
|
.page-login {
|
|
|
user-select: none;
|
|
|
cursor: pointer;
|
|
|
- $backgroundColor: #f0f2f5;
|
|
|
- background-color: $backgroundColor;
|
|
|
+ background-image: url("/image/login/bg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
|
|
|
- .page-login--layer {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- &-area {
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .circles {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- li {
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- list-style: none;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- background: #ffffff;
|
|
|
- bottom: -200px;
|
|
|
- animation: animate 25s linear infinite;
|
|
|
- @keyframes animate {
|
|
|
- 0% {
|
|
|
- transform: translateY(0) rotate(0);
|
|
|
- opacity: 1;
|
|
|
- border-radius: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(-1000px) rotate(720deg);
|
|
|
- opacity: 0;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- left: 15%;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- animation-delay: 0s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- left: 5%;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- animation-delay: 2s;
|
|
|
- animation-duration: 12s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(3) {
|
|
|
- left: 70%;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- animation-delay: 4s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(4) {
|
|
|
- left: 40%;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- animation-delay: 0s;
|
|
|
- animation-duration: 18s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(5) {
|
|
|
- left: 65%;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- animation-delay: 0s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(6) {
|
|
|
- left: 75%;
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- animation-delay: 3s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(7) {
|
|
|
- left: 35%;
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- animation-delay: 7s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(8) {
|
|
|
- left: 50%;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- animation-delay: 15s;
|
|
|
- animation-duration: 45s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(9) {
|
|
|
- left: 20%;
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- animation-delay: 2s;
|
|
|
- animation-duration: 35s;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(10) {
|
|
|
- left: 85%;
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- animation-delay: 0s;
|
|
|
- animation-duration: 11s;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-time {
|
|
|
- align-items: baseline;
|
|
|
- padding-top: 0.5em;
|
|
|
- font-size: 11em;
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(0, 0, 0, 0.03);
|
|
|
- overflow: hidden;
|
|
|
- font-family: 'Arial';
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- /* align-items: center; */
|
|
|
- flex-direction: row;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.page-login--wrapper {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -312,79 +154,72 @@ export default {
|
|
|
right: 0;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
+ }
|
|
|
|
|
|
- .page-login--content {
|
|
|
- width: 360px;
|
|
|
-
|
|
|
- ::v-deep .el-card {
|
|
|
- margin-bottom: 15px;
|
|
|
- opacity: 0.9;
|
|
|
-
|
|
|
- .el-card__body {
|
|
|
- padding: 30px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .button-login {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- // 输入框左边的图表区域缩窄
|
|
|
- .el-input-group__prepend {
|
|
|
- padding: 0px 14px;
|
|
|
- }
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 0;
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ box-shadow: 0 5.33px 10px 0 rgba(0, 0, 0, 0.25);
|
|
|
+ }
|
|
|
|
|
|
- .login-code {
|
|
|
- height: 32px - 2px;
|
|
|
- display: block;
|
|
|
- margin: 0px -20px;
|
|
|
- border-top-right-radius: 2px;
|
|
|
- border-bottom-right-radius: 2px;
|
|
|
- // cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ .logo-0 {
|
|
|
+ display: block;
|
|
|
+ width: 132px;
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
|
|
|
- .page-login--logo-title {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: row;
|
|
|
- font-size: 36px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .logo-1 {
|
|
|
+ display: block;
|
|
|
+ width: 82px;
|
|
|
+ height: 82px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 24px;
|
|
|
+ margin-bottom: 22px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin: 0 10px;
|
|
|
+ line-height: 26px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(107, 133, 89, 1);
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.language-select {
|
|
|
- ::v-deep input {
|
|
|
- padding-left: 58px;
|
|
|
- }
|
|
|
+ ::v-deep .el-form {
|
|
|
+ width: 428px;
|
|
|
|
|
|
- ::v-deep .el-input__prefix {
|
|
|
- left: 1px;
|
|
|
- height: 38px;
|
|
|
- }
|
|
|
+ .el-form-item {
|
|
|
+ width: 348px;
|
|
|
+ }
|
|
|
|
|
|
- .icon-language-wrap {
|
|
|
- background-color: #F5F7FA;
|
|
|
- color: #909399;
|
|
|
- vertical-align: middle;
|
|
|
- height: 38px;
|
|
|
- padding: 0 14px;
|
|
|
- margin-top: 1px;
|
|
|
- border-right: 1px solid #DCDFE6;
|
|
|
- border-top-left-radius: 4px;
|
|
|
- border-bottom-left-radius: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .el-input-group__append, .el-input-group__prepend {
|
|
|
+ border: none;
|
|
|
+ background-color: rgba(242, 242, 242, 1);
|
|
|
+ }
|
|
|
|
|
|
- .icon-language {
|
|
|
- font-size: 14px;
|
|
|
+ .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ color: rgba(112, 112, 112, 1);
|
|
|
+ background-color: rgba(242, 242, 242, 1);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ ::v-deep .el-button {
|
|
|
+ width: 312px;
|
|
|
+ height: 48px;
|
|
|
+ margin-top: 34px;
|
|
|
+ margin-left: 58px;
|
|
|
+ border-radius: 24px;
|
|
|
+ border: none;
|
|
|
+ background-color: rgba(66, 84, 54, 1);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
panyong
