From edef6ae8f59823258ce610c9074d32e698958b51 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 28 七月 2022 15:30:44 +0800
Subject: [PATCH] 本地图片适配
---
src/views/register/components/BaseInfo.vue | 44 ++++++++++++++++++++++++--------------------
1 files changed, 24 insertions(+), 20 deletions(-)
diff --git a/src/views/register/components/BaseInfo.vue b/src/views/register/components/BaseInfo.vue
index 1a0fbad..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">
@@ -176,6 +174,7 @@
isWrong: false,
countdown: 60,
gotCode: false,
+ phoneFocus: false,
};
},
methods: {
@@ -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