You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

149 lines
2.5 KiB

<template>
<view class="content">
<view class="padding">
<view class="logoCon">
<view class="logo">
<image src="@/static/images/logo.png" mode=""></image>
</view>
<view class="name">事务通</view>
</view>
<view class="from">
<view class="formItem flex">
<view class="prefix">+86</view>
<view class="line"></view>
<view class="inputBox">
<up-input v-model="FormData.phone" border="none" placeholder="请输入手机号"></up-input>
</view>
</view>
<view class="formItem flex">
<view class="inputBox">
<up-input v-model="FormData.code" border="none" placeholder="输入验证码"></up-input>
</view>
<view class="sedCode">发送验证码</view>
</view>
<view class="oneBtn">
<oneBtn text="登 录"></oneBtn>
</view>
</view>
<privacyRadion style="margin-top: 20rpx;"/>
<view class="other">
<view class="lineTxt">其它登录方式</view>
<view class="icon">
<image src="@/static/images/loginicon.png" mode=""></image>
</view>
<view class="txt">快捷登录</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
FormData: {
phone: '',
code: ''
}
}
}
}
</script>
<style lang="scss" scoped>
image {
display: block;
width: 100%;
height: 100%;
}
.other {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #9C9C9C;
.lineTxt {
position: relative;
&::before {
content: '';
position: absolute;
width: 256rpx;
height: 1px;
top: 50%;
left: 0;
transform: translateY(50%);
z-index: 99;
}
}
.icon {
width: 80rpx;
height: 80rpx;
margin: 20rpx 0;
}
.txt {
}
}
.content {
.logoCon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 50rpx;
.logo {
width: 160rpx;
height: 160rpx;
}
.name {
font-size: 32rpx;
margin-top: 20rpx;
font-weight: 700;
}
}
.from {
margin-top: 20rpx;
.formItem {
height: 108rpx;
border-bottom: 1px solid #EFEFEF;
.prefix {
font-size: 28rpx;
color: #333;
width: 120rpx;
text-align: center;
}
.line {
width: 1px;
height: 40rpx;
background: #EFEFEF;
margin-right: 30rpx;
}
.inputBox {
flex: 1;
width: 0;
}
.sedCode {
font-size: 28rpx;
color: $themC;
}
}
.oneBtn {
margin-top: 40rpx;
}
}
}
</style>