login.vue
<view>
<view class="lg-main">
<view class="u-f-sbc">
<view class="lg-title" style="margin-top: 80upx;font-size: 44upx;color: #384A65;">{{title1}}</view>
<view class="lg-title" style="margin-top: 80upx;font-size: 30upx;" @click="changeLoginType()">
<text style="border: solid 2upx #21C2BC;font-size: 25upx;font-weight:bold;padding: 10upx;border-radius: 5upx;">切换登录方式</text>
</view>
</view>
<view class="">
<view class="lg-input2" style="">
<input type="text" v-model="account" class="lg-it-c2" placeholder="输入手机号/邮箱地址" placeholder-style="color:#B8C0C9;font-size:32upx;"/>
</view>
<view class="lg-input2">
<input type="text" password="true" v-model="pwd"
class="lg-it-c2" placeholder="输入登录密码"
placeholder-style="color:#B8C0C9;font-size:32upx;"
@confirm="handleLogin()"
/>
</view>
</view>
</view>
<view class="for-lg u-f-c">
<view class="forget-pwd u-f u-f-ac" @tap="goForget">
<image src="/static/image/user/forget.png"></image>
<text>忘记密码</text>
</view>
<view class="login-bs u-f-c u-f-ajc">
<view class="u1"><button class="btn1" :class="{loginok:loginok}" @tap="handleLogin()" :loading="loading" :disabled="disabled">登录</button></view>
<view class="u1"><button class="btn2" hover-class="hc2" @tap="goReg">注册</button></view>
</view>
</view>
</view>
login.css
.for-lg{
position: fixed;
bottom: 80upx;
}
.forget-pwd{
margin-left: 56upx;
margin-bottom: 40upx;
}
.forget-pwd>image{
width: 36upx;
height: 42upx;
vertical-align: middle;
margin-right: 16upx;
}
.forget-pwd>text{
color: #21C2BC;
font-size: 26upx;
}
.login-bs{
width: 100%;
}
.btn1,.btn2{
width: 99vw;
margin-bottom: 40upx;
font-weight: bold;
font-size: 34upx;
}
.btn1{
color: #FFFFFF;
background-color: #ced4da;
}
.loginok{
background-color: #21C2BC !important;
color: #FFFFFF !important;
}
.btn2{
color: #21C2BC;
background-color: #FFFFFF;
}
.btn1:after{
border: none;
}
.btn2:after{
border: none;
}
.u1{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 90upx;
width: 70%;
line-height: 90upx;
border-radius: 16upx;
margin: 20upx auto 0px;
}
.hc2{
background-color: #F1F1F1;
}
0 个回复