优化登录页面验证码显示效果

This commit is contained in:
RuoYi 2022-12-28 13:32:49 +08:00
parent 55fb5c5f61
commit 1c5aefbf4f

View File

@ -14,11 +14,13 @@
<view class="iconfont icon-password icon"></view> <view class="iconfont icon-password icon"></view>
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" /> <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
</view> </view>
<view class="input-item flex align-center" v-if="captchaEnabled"> <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
<view class="iconfont icon-code icon"></view> <view class="iconfont icon-code icon"></view>
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" /> <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
<view class="login-code">
<image :src="codeUrl" @click="getCode" class="login-code-img"></image> <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
</view > </view >
</view>
<view class="action-btn"> <view class="action-btn">
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button> <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
</view> </view>
@ -168,14 +170,19 @@
color: #333; color: #333;
margin-top: 20px; margin-top: 20px;
} }
}
.easyinput { .login-code {
width: 100%; height: 38px;
} float: right;
}
.login-code-img { .login-code-img {
height: 45px; height: 38px;
position: absolute;
margin-left: 10px;
width: 200rpx;
} }
}
}
}
</style> </style>