deming/pageE/mine/UpdatePhone.vue

109 lines
2.4 KiB
Vue
Raw Normal View History

2020-06-08 15:23:23 +08:00
<template>
<view class="update-phone">
<view class="update-main">
<view class="old-phone">
<view class="phone-number">
<view class="title">原手机号</view>
<input type="text" placeholder="请输入手机号码" />
</view>
<view class="code">
<view class="title">验证码</view>
<input type="text" placeholder="请输入验证码" />
<view class="get-code">获取验证码</view>
</view>
</view>
<view class="new-phone">
<view class="phone-number">
<view class="title">新手机号</view>
<input type="text" placeholder="请输入手机号码" />
</view>
<view class="code">
<view class="title">验证码</view>
<input type="text" placeholder="请输入验证码" />
<view class="get-code">获取验证码</view>
</view>
</view>
</view>
<view class="tips">注意修改手机号需要原手机号获取验证码无原手机验证码请联系后台</view>
</view>
</template>
<script>
export default {
data() {
return {}
}
};
</script>
<style lang="scss" scoped>
.update-phone {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
padding-top: 1rpx;
.update-main {
@mixin update-General() {
> view {
display: flex;
align-items: center;
padding: 35rpx 30rpx;
background-color: #ffffff;
.title {
width: 156rpx;
font-size: 28rpx;
color: rgba(51,51,51,1);
}
.input {
flex: 1;
font-size: 26rpx;
}
.get-code {
font-size: 28rpx;
color: rgba(153,153,153,1);
position: relative;
padding: 0 25rpx;
margin-left: 20rpx;
&::after {
position: absolute;
content: "";
width: 2rpx;
height: 43rpx;
background: rgba(242,242,242,1);
left: 0;
top: 50%;
transform: translate(0, -50%);
}
}
}
// .phone-number::after {
// position: absolute;
// content: "";
// width: 2rpx;
// height: 43rpx;
// background: rgba(242,242,242,1);
// left: 0;
// top: 50%;
// transform: translate(0, -50%);
// }
.code {
display: flex;
align-items: center;
.title {
font-size: 28rpx;
color: rgba(51,51,51,1);
}
}
}
.old-phone {
@include update-General()
}
.new-phone {
@include update-General()
}
}
.tips {
padding: 20rpx 30rpx;
font-size: 24rpx;
color: rgba(102,102,102,1);
line-height: 40rpx;
}
}
</style>