|
|
|
<template>
|
|
|
|
<view class="loginWrap">
|
|
|
|
<view class="loginTitle">
|
|
|
|
企业登录
|
|
|
|
</view>
|
|
|
|
<view class="loginInp">
|
|
|
|
<view class="loginItem">
|
|
|
|
<text>账号</text>
|
|
|
|
<input type="text" placeholder="请输入手机号" placeholder-class="itemPh"/>
|
|
|
|
</view>
|
|
|
|
<view class="loginItem" v-if="loginType == 'password'">
|
|
|
|
<text>密码</text>
|
|
|
|
<input type="password" placeholder="请输入密码" placeholder-class="itemPh"/>
|
|
|
|
</view>
|
|
|
|
<view class="loginItem" v-if="loginType == 'code'">
|
|
|
|
<text>验证码</text>
|
|
|
|
<input type="text" placeholder="请输入验证码" placeholder-class="itemPh"/>
|
|
|
|
<view class="codeBtn">
|
|
|
|
获取验证码
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="loginBtnWrap">
|
|
|
|
<view class="loginBtn">
|
|
|
|
登录
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="loginOther">
|
|
|
|
<text v-if="loginType == 'password'">忘记密码？</text>
|
|
|
|
<text v-if="loginType == 'password'" @click="loginType = 'code'">短信登录</text>
|
|
|
|
<text v-if="loginType == 'code'" @click="loginType = 'password'">密码登录</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default{
|
|
|
|
data(){
|
|
|
|
return{
|
|
|
|
loginType:'password'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.loginWrap{
|
|
|
|
background: url(../../static/image/index/ic_1@2x.png) no-repeat;
|
|
|
|
background-size: 100%;
|
|
|
|
height: 100vh;
|
|
|
|
padding: 0 100rpx;
|
|
|
|
.loginTitle{
|
|
|
|
padding-top: 202rpx;
|
|
|
|
font-size: 72rpx;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.loginInp{
|
|
|
|
padding-top: 100rpx;
|
|
|
|
.loginItem{
|
|
|
|
height: 119rpx;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
border-bottom: 1rpx solid rgba(242,243,245,0.50);
|
|
|
|
text{width: 164rpx;font-size: $uni-font-size-32;color: $uni-text-color-bai;}
|
|
|
|
input{font-size: $uni-font-size-32;color: $uni-text-color-bai;flex: 1;}
|
|
|
|
.itemPh{
|
|
|
|
color: rgba(242,243,245,0.60);
|
|
|
|
font-size: $uni-font-size-26;
|
|
|
|
}
|
|
|
|
.codeBtn{
|
|
|
|
width: 148rpx;
|
|
|
|
height: 50rpx;
|
|
|
|
border: 1rpx solid #ffffff;
|
|
|
|
border-radius: 21rpx;
|
|
|
|
font-size: $uni-font-size-26;
|
|
|
|
color: $uni-text-color-bai;
|
|
|
|
line-height: 50rpx;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.loginBtnWrap{
|
|
|
|
padding-top: 141rpx;
|
|
|
|
.loginBtn{
|
|
|
|
width: 548rpx;
|
|
|
|
height: 88rpx;
|
|
|
|
background: #f7f8fa;
|
|
|
|
border-radius: 96rpx;
|
|
|
|
text-align: center;
|
|
|
|
color: $uni-bg-main-color;
|
|
|
|
line-height: 88rpx;
|
|
|
|
font-size: $uni-font-size-32;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.loginOther{
|
|
|
|
padding-top: 12rpx;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
color: $uni-text-color-bai;
|
|
|
|
font-size: $uni-font-size-26;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
