<!-- #ifndef APP-NVUE -->
<view>
<view class="login-bg">
<!-- #endif-->
<view class="wrap" style="display: flex;background-color: #000;;flex-direction:column; justify-content:space-between;" >
<ul class="input-wrap w-bg">
<li class="li phone">
<text class="name" style="font-size: 14px;color: rgb(168, 123, 56);">登录账号</text>
<input type="number" style="width: 320rpx;margin-left: 20px;color: #FFFFFF;" placeholder-style="font-size:13px" v-model="form.phone" maxlength="11" placeholder="请输入手机号/账号">
</li>
<li class="li pwd" v-if="form.loginType !=1">
<text class="name" style="font-size: 14px;color: rgb(168, 123, 56);">登录密码</text>
<input v-if="form.loginType !=1" v-model="form.password" type="password" style="width: 300rpx;margin-left: 20px;color: #FFFFFF;" placeholder-style="font-size:13px" placeholder="请输入密码">
<text class="new-theme-color forget" style="font-size: 14px;color: rgb(168, 123, 56);padding-right: 10px;" tapmode >忘记密码?</text>
</li>
<li class="li code" v-if=" form.loginType==1">
<text class="name" style="font-size: 14px;color: rgb(168, 123, 56);">验证码</text>
<input v-if="form.loginType==1" style="width: 300rpx;margin-left: 20px;color: #FFFFFF;" placeholder-style="font-size:13px" maxlength="6" type="number" v-model="form.code" placeholder="请输入收到的验证码">
<text class="get-code new-theme-color forget" style="font-size: 14px;color: rgb(168, 123, 56);" data-status=0 @click="sendSmsCode">{{text}}</text>
</li>
<view style="display: flex;align-self:center;">
<text @click="qiehuan" style="margin: 0 auto;border-radius: 20px; border: 1px solid #5D5C60;color: #FFFFFF; padding-left: 10px; padding-right: 10px; padding-top:10px;padding-bottom:10px;font-weight: bold;font-size: 14px;">
{{form.loginType==1?"密码登录":"验证码登录"}}
</text>
</view>
</ul>
</view>
<!-- #ifndef APP-NVUE -->
</view>
</view>
<!-- #endif-->
</template>
<script>
var time;
export default {
data() {
return {
form:{
phone:"",
password:"",
device_id:"",
code:"",
loginType:0
},
not_allowed:false,
text:"发送验证码",
msgtext:"",
mobileInfo:{}
}
},
created() {
},
methods: {
qiehuan(){
this.form.code = '';
this.form.password = '';
this.form.loginType=this.form.loginType == 0 ? 1:0;
},
}
}
</script>
<style lang="scss">
.login-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
/* background-image: url('../image/login_bg.jpg'); */
/* background-color: #EEEFF1; */
/* background-repeat: no-repeat;
background-size: 100%; */
padding: 10px;
font-size: 14px;
overflow-y: auto;
box-sizing: border-box;
}
.input-wrap {
background: rgba(0, 0, 0, 0);
width: calc(100% - 20px) !important;
margin-left: 10px !important;
;
}
input {
color: #fff !important;
}
.new-btn {
/* border: 1px solid #03A9F4;; */
/* border: 1px solid #AAA;; */
font-size: 14px;
}
/* 第三方登录 */
.other-login {
position: fixed;
bottom: 10vw;
width: calc(100vw - 20px);
}
.line-wrap {
position: relative;
}
.line {
width: 30%;
height: 1px;
background: #CCCCCC;
}
.line-wrap .tip {
color: #999999;
font-size: 12px;
padding: 0 20px;
}
.login-img img {
width: 36px;
margin: 15px 10px;
}
.input-wrap {
margin-top: 50vw;
}
/* 登录input */
.input-wrap .li {
/* color: #eee; */
color: #253B3E;
padding: 12px 20px;
margin-right: 12px;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
border-radius: 60px;
margin-bottom: 20px;
background: rgba(153, 149, 149, 0.466);
}
.input-wrap .li span {
width: 80px;
}
.input-wrap .li span.name {
font-weight: bold;
}
.input-wrap .li input {
padding-left: 10px;
/* color: #eee; */
color: #253B3E;
}
.input-wrap .li input::placeholder {
color: #AEB3B7;
}
.input-wrap .li.footer {
background: #AAA;
border-bottom: none;
padding: 5px 10px;
}
.input-wrap .li.footer span {
width: auto;
}
/* 忘记密码 */
.input-wrap .forget {
position: absolute;
right: 10px;
text-align: right;
font-size: 12px;
}
/* 协议 */
.xieyi {
/* color: #eee; */
/* color: #253B3E; */
color: #999999;
font-size: 12px;
/* margin: 20px 0; */
}
.xieyi a {
color: #2196f3;
}
.box {
width: 15px;
height: 15px;
margin-right: 10px;
}
.check .box {
background-image: url('@/static/image/select.png');
background-repeat: no-repeat;
background-color: #A87B38;
background-size: 100% 100%;
}
/* 下一步 */
.next-btn {
background: rgba(250, 159, 202, 0.2);
/* color: #fff; */
color: #253B3E;
border: 1px solid;
}
input{color: #FFFFFF;}
.login-bg {
background-color: #000;
padding: 10px 0;
width: 100vw;
/* #ifndef APP-PLUS */
padding-top: 40px;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: 20px;
/* #endif */
image{width: 120px;height: 120px;}
}
.logo{width: 100%;justify-self: center;align-items: center;}
.input-wrap {
margin-top: 10px;
}
</style>
- 发布:2022-10-15 17:12
- 更新:2022-10-31 16:25
- 阅读:229
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.6.4
手机系统: Android
手机系统版本号: Android 9.0
手机厂商: OPPO
手机机型: cph2015
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
点击验证码切换
点击验证码切换
预期结果:
清空input输入方式。重新填写
清空input输入方式。重新填写
实际结果:
没有清空Input
没有清空Input
bug描述:
我想点验证码登录就取消掉上一个input。结果取消不掉。也改不了。没有注销掉上一个input。用v-show v-if都不行