From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/register/components/BaseInfo.vue | 48 ++++++++++++++++++++++++++----------------------
1 files changed, 26 insertions(+), 22 deletions(-)
diff --git a/src/views/register/components/BaseInfo.vue b/src/views/register/components/BaseInfo.vue
index 9bb62f1..a72ead8 100644
--- a/src/views/register/components/BaseInfo.vue
+++ b/src/views/register/components/BaseInfo.vue
@@ -13,26 +13,24 @@
</el-form-item>
<el-form-item prop="password">
- <el-input show-password v-model="user.password" placeholder="瀵嗙爜">
- </el-input>
+ <PwInput show-password v-model="user.password" placeholder="瀵嗙爜">
+ </PwInput>
</el-form-item>
<el-form-item prop="repassword">
- <el-input
- show-password
- v-model="user.repassword"
- placeholder="纭瀵嗙爜"
- >
- </el-input>
+ <PwInput show-password v-model="user.repassword" placeholder="纭瀵嗙爜">
+ </PwInput>
</el-form-item>
<el-form-item prop="phoneNum">
- <div class="phoneNum">
+ <div class="phoneNum" :class="{ isFocus: phoneFocus }">
<el-input
placeholder="鎵嬫満鍙�"
v-model="user.phoneNum"
class="input-with-select"
+ @focus="phoneFocus = true"
+ @blur="phoneFocus = false"
>
- <div slot="prepend" class="teleSlot">+86(涓浗)</div>
</el-input>
+ <div slot="prepend" class="teleSlot">+86(涓浗)</div>
</div>
</el-form-item>
<el-form-item prop="verifyCode">
@@ -82,7 +80,7 @@
import { validUser, validPassword, isPhone } from "@/scripts/validate"; // 姝ｅ垯鏂囦欢
import {
register,
- getVerifyCode,
+ makeVerifyCode,
// getAreas,
// getDic,
// entireUserInfo,
@@ -176,6 +174,7 @@
isWrong: false,
countdown: 60,
gotCode: false,
+ phoneFocus: false,
};
},
methods: {
@@ -204,7 +203,7 @@
this.codeDisabled = true;
this.getValidStr();
this.timer = setInterval(this.getValidStr, 1000);
- getVerifyCode({ phoneNum: this.user.phoneNum, type: 1 })
+ makeVerifyCode({ phoneNum: this.user.phoneNum, type: 1 })
.then(() => {
this.gotCode = true;
})
@@ -324,11 +323,22 @@
&.is-error ::v-deep .el-input__inner:focus {
border-color: #ff4b33;
}
+
+ .PwInput {
+ ::v-deep .iconfont {
+ margin-right: 5px;
+ font-size: 18px;
+ }
+ }
}
::v-deep .el-input__inner {
padding: 10px 20px;
border-color: #c0c5cc;
+
+ &:focus {
+ border-color: #0065ff;
+ }
&::-webkit-input-placeholder {
font-size: 14px;
@@ -337,19 +347,13 @@
}
.phoneNum {
- ::v-deep .el-input-group__prepend {
- margin: 0 4px;
- padding: 0pt;
- background-color: rgba($color: #fff, $alpha: 0);
- border-right: none;
- border-color: #c0c5cc;
- }
-
+ position: relative;
::v-deep .el-input__inner {
- border-left: none;
+ padding-left: 120px;
}
-
.teleSlot {
+ position: absolute;
+ top: 7px;
width: 103px;
height: 28px;
line-height: 28px;
--
Gitblit v1.8.0