|
@@ -6,7 +6,89 @@
|
|
|
:rules="loginRules"
|
|
|
class="login-form"
|
|
|
>
|
|
|
- <img src="../assets/images/comlo.png" class="comlogo" />
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12" class="comlogo"></el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple-dark title">
|
|
|
+ 智能制造平台
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ <el-row class="rowww">
|
|
|
+ <el-col :span="12" class="text" prop="username">用户名</el-col>
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.username"
|
|
|
+ type="text"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="账号"
|
|
|
+ show-password
|
|
|
+ class="inputt"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ <el-row class="roww">
|
|
|
+ <el-col :span="12" class="text" prop="password">密码</el-col>
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.password"
|
|
|
+ type="password"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="密码"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ show-password
|
|
|
+ class="inputt"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="roww">
|
|
|
+ <el-row>
|
|
|
+ <el-col class="text" prop="code">验证码</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.code"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="验证码"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ class="inputt"
|
|
|
+ show-password
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" :offset="1">
|
|
|
+ <div class="login-code">
|
|
|
+ <img :src="codeUrl" @click="getCode" class="login-code-img" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row class="bottomtext">
|
|
|
+ <!-- <div class="login-code">
|
|
|
+ <img :src="codeUrl" @click="getCode" class="login-code-img" />
|
|
|
+ </div> -->
|
|
|
+ <el-checkbox
|
|
|
+ v-model="loginForm.rememberMe"
|
|
|
+ class="aaa"
|
|
|
+ >在这个设备上记住我</el-checkbox
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col class="logg" :loading="loading"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+
|
|
|
+ >登录</el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- <el-form
|
|
|
+ ref="loginForm"
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ class="login-form"
|
|
|
+ >
|
|
|
+ <img src="../assets/images/comp.png" class="comlogo" />
|
|
|
<span class="title">智能制造平台</span>
|
|
|
<el-form-item prop="username">
|
|
|
<p style="line-height: 12px">用户名</p>
|
|
@@ -17,7 +99,7 @@
|
|
|
placeholder="账号"
|
|
|
show-password
|
|
|
>
|
|
|
- <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
|
|
|
+
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="password">
|
|
@@ -30,7 +112,7 @@
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
show-password
|
|
|
>
|
|
|
- <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
|
|
|
+
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
|
|
@@ -44,7 +126,7 @@
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
show-password
|
|
|
>
|
|
|
- <!-- <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" />
|
|
@@ -52,17 +134,15 @@
|
|
|
</el-form-item>
|
|
|
<el-checkbox
|
|
|
v-model="loginForm.rememberMe"
|
|
|
- style="margin: 0px 0px 25px 0px"
|
|
|
class="a"
|
|
|
>在这个设备上记住我</el-checkbox
|
|
|
>
|
|
|
|
|
|
- <el-form-item style="width: 100%">
|
|
|
+ <el-form-item >
|
|
|
<el-button
|
|
|
:loading="loading"
|
|
|
size="medium"
|
|
|
type="primary"
|
|
|
- style="width: 100%"
|
|
|
@click.native.prevent="handleLogin"
|
|
|
>
|
|
|
<span v-if="!loading">登 录</span>
|
|
@@ -75,10 +155,10 @@
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <!-- 底部 -->
|
|
|
+
|
|
|
<div class="el-login-footer">
|
|
|
<span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -187,82 +267,128 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
+.logg{
|
|
|
+ margin-top:42px ;
|
|
|
+ margin-left:196px ;
|
|
|
+ width: 240px;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ text-align: center;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 27px;
|
|
|
+ background: linear-gradient(135deg, rgba(79, 138, 255, 1) 0%, rgba(75, 94, 255, 1) 100%);
|
|
|
+ box-shadow: 0px 4px 16px rgba(179, 192, 231, 1);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.aaa{
|
|
|
+ width: 248px;
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px !important;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgba(58, 63, 99, 1);
|
|
|
+ text-align: left;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+.bottomtext {
|
|
|
+ margin-top: -5px !important;
|
|
|
+ margin-left: 58px !important;
|
|
|
+}
|
|
|
+.rowww {
|
|
|
+ width: 522px;
|
|
|
+ height: 80px;
|
|
|
+ margin-top: 25px;
|
|
|
+ margin-left: 55px;
|
|
|
+}
|
|
|
+.roww {
|
|
|
+ width: 522px;
|
|
|
+ height: 80px;
|
|
|
+ margin-top: 16px;
|
|
|
+ margin-left: 55px;
|
|
|
+}
|
|
|
+.ppp {
|
|
|
+ width: 522px;
|
|
|
+ height: 24px;
|
|
|
+ opacity: 1;
|
|
|
+ /** 文本1 */
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgba(58, 63, 99, 1);
|
|
|
+ text-align: left;
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
+.el-input__inner{
|
|
|
+ width: 522px;
|
|
|
+ height: 54px !important;
|
|
|
+}
|
|
|
+.inputt {
|
|
|
+ /* width: 522px; */
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border: 1px solid rgba(218, 224, 242, 1);
|
|
|
+ margin-top: 2px;
|
|
|
+}
|
|
|
+.inputt input{
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
.comlogo {
|
|
|
- width: 90px;
|
|
|
- margin-right: 15px;
|
|
|
+ margin-left: 28px;
|
|
|
+ margin-top: 57px;
|
|
|
+ width: 194px;
|
|
|
+ height: 64px;
|
|
|
+ background: url(../assets/images/comp.png);
|
|
|
+ /* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); */
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
.login {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 100%;
|
|
|
- background-image: url("../assets/images/one.jpg");
|
|
|
+ background-image: url("../assets/images/background.jpg");
|
|
|
background-size: cover;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
- margin: 0px 30px 30px auto;
|
|
|
- text-align: center;
|
|
|
- color: #07448a;
|
|
|
- font-size: 26px;
|
|
|
- font-weight: bolder;
|
|
|
+ width: 212px;
|
|
|
+ height: 35px;
|
|
|
+ margin-top: 69px;
|
|
|
+ margin-left: 17px;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ line-height: 38.4px;
|
|
|
+ color: rgba(7, 68, 138, 1);
|
|
|
+ text-align: left;
|
|
|
+ vertical-align: top;
|
|
|
+ float: left;
|
|
|
}
|
|
|
|
|
|
.login-form {
|
|
|
- border-radius: 20px;
|
|
|
- background: #ffffff;
|
|
|
- width: 400px;
|
|
|
- padding: 25px 25px 5px 25px;
|
|
|
-
|
|
|
- .el-input {
|
|
|
- height: 38px;
|
|
|
+ margin-left: 677px;
|
|
|
+ margin-top:48px ;
|
|
|
+ width: 621px;
|
|
|
+ height: 624px;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 39px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ float: left;
|
|
|
|
|
|
- input {
|
|
|
- height: 38px;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .input-icon {
|
|
|
- height: 39px;
|
|
|
- width: 14px;
|
|
|
- margin-left: 2px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
-.login-tip {
|
|
|
- font-size: 13px;
|
|
|
- text-align: center;
|
|
|
- color: #bfbfbf;
|
|
|
-}
|
|
|
-
|
|
|
-.login-code {
|
|
|
- width: 33%;
|
|
|
- height: 38px;
|
|
|
- float: right;
|
|
|
-
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
+.login-code{
|
|
|
+ height: 54px;
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
|
|
|
-.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;
|
|
|
-}
|
|
|
|
|
|
-.login-code-img {
|
|
|
- height: 38px;
|
|
|
-}
|
|
|
-.a {
|
|
|
- float: left;
|
|
|
-}
|
|
|
</style>
|