欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序绑定手机号验证身份页面设计制作开发教程(2)

    2018-07-20 11:30 来源/作者:懒人模板 分类:小程序教程  « »
     
    二、wxss样式文件代码如下:
    /* pages/editphone/editphone.wxss */
    page {
      display: block;
      min-height: 100%;
      background-color: #f5f5f5;
    }
    .phone-box .title{
        font-size: 24rpx;
        color: #222;
        margin: 30rpx 0 20rpx 20rpx;
    }
    .phone-box .input{
        border: 1px #ddd solid;
        border-left: 0;
        border-right: 0;
        height: 88rpx;
        background-color: #fff;
        padding-left: 20rpx;
        font-size: 28rpx;
    }
    .phone-box .input.new-phone{
        border-bottom: 1px #ddd solid;
    }
    .phone-box .code-box{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        height: 88rpx;
        border-bottom: 1px #ddd solid;
    }
    .phone-box .code-box input{
        border: 0;
        flex: 1;
    }
    .phone-box .code-box button{
        border: 1px #e61773 solid;
        color: #e61773;
        border-radius: 99px;
        background-color: transparent!important;
        margin: 15rpx 20rpx 15rpx 0;
        font-size: 22rpx;
        height: 58rpx;
        width: 220rpx;
    }
    .phone-box .code-box button[disabled]{
        color: #ccc;
        border: 1px #ccc solid;
    }
    .bind-btn{
        margin-top: 50rpx;
    }

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议