sso-ssr/assets/scss/mobileCommon.scss

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
.mobile{
  .mobile-content {
    color:#333;
    min-height:100vh;
    width: 100%;
    background: #eaeaea;
    .mobile-opacity {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .mobile-opacity-active {
      background: rgba(0,0,0,.3)
    }
    .login {
      width: 100%;
      padding:0 15px;
    }
  }
  .mobile-background-null {
    background: #eaeaea !important;
  }
}
.page-part{
  margin-bottom:.4rem;
  .img-list{
    .item{
      display:inline-block;
      width:44%;
      height: 2.2rem;
      text-align: center;
      margin:0 .15rem .15rem;
      box-shadow: .05rem .05rem .2rem rgba(0,0,0,.7);
      border-radius: .1rem;
      padding: .25rem;
      img{
        width:90%;
        height:1.3rem;
        padding:.2rem;
      }
      p{
        font-size: 14px;
        color: #999;
      }
    }
  }
  img{
    margin-left:.1rem;
  }
  a.thumbnail{
    img {
      margin-left: 0!important;
    }
  }
}
.mint-cell-wrapper{
  border:1px solid #b5b5b5;
}
.page-part a{
  transition: all .2s ease;
  color:#333;
  &:hover{
    color:#666;
  }
}
.f-main{
  background: #fff;
  padding:0.55rem .3rem 1.1rem;
  .content-top{
    border-bottom:1px solid #b5b5b5;
    position:relative;
    p{
      font-size: .4rem;
      color:#787878;
      margin-bottom:.35rem;
    }
    a.go{
      transition: all .2s ease;
      position: absolute;
      top: 0;
      right: 0;
      font-size: .28rem;
      i{
        margin-right: .06rem;
      }
    }
    a.back{
      transition: all .2s ease;
      &:hover{
        border:.02rem solid #f44336;
      }
      position: absolute;
      top: 0;
      right: 0;
      display:inline-block;
      border:.02rem solid #2d8cf0;
      padding: .05rem;
      border-radius:50%;
      i{
        font-size: .3rem;
        font-weight: bold;
      }
    }
  }
  .f-form{
    padding-top:.6rem;
    .security{
      font-size: .32rem;
      color:#666;
    }
    .pwd{
      font-size: .14rem;
      color:#a0a0a0;
      margin: .2rem auto;
      em{
        display: inline-block;
        line-height: .14rem;
        margin:.05rem .2rem;
        width: .45rem;
        height: .1rem;
        background: #999;
      }
      .sm{background:#ff4e00}
      .md{background: #22ac38}
      .ld{background: #00a0e9}
      .smstep{color:#ff4e00}
      .mdstep{color: #22ac38}
      .ldstep{color: #00a0e9}
    }
    .token{
      display:inline-block;
      padding: 0 .5rem;
      text-align: center;
      border-left:1px solid #b5b5b5;
      margin-left: .1rem;
      color:#2d8cf0;
    }
    .token-no{
      display:inline-block;
      padding: 0 .5rem;
      text-align: center;
      border-left:1px solid #b5b5b5;
      margin-left: .1rem;
      color:#666;
    }
  }
}

.page-last{
  text-align: center;
  margin-bottom:1.3rem;
  h4{
    margin:.65rem auto;
    font-weight: normal;
    span{
      font-size: .7rem;
      margin-left:.2rem;
      color:#29b300;
    }
  }
  p{
    font-size: .28rem;
    color:#8b8b8b;
  }
}

::-webkit-scrollbar {
  width: 0;
  height: 1px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.passwd {
  font-size: .14rem;
  color: #a0a0a0;
  margin: .2rem auto;
  text-align: right;
}
.itemgreen{
  color:#2d8cf0;
}
.listitem {
  height: 1rem;
  line-height: 1rem;
  border-bottom: solid 1px #eee;
  text-align: center;
  &:first-child {
    border-top: solid 1px #eee;
  }
}
.mint-popup {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.mint-popup .mint-button {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}

.mint-button .mint-button-text{
  margin: 0;
  font-weight: normal;
}
.login-btn{
  margin-top:.9rem;
  border-top:1px solid #bfbfbf;
  text-align: center;
  padding-top:.3rem;
  p{
    color:#a1a1a1;
    font-size: .26rem;
    margin-bottom:.4rem;
  }
}

//未验证手机弹框
.valid-phone .el-dialog {
  position: absolute;
  width: 5rem;
  height: 2rem;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  margin-left: -2.5rem;
  margin-top: -1rem !important;
}
.valid-phone .el-dialog .el-dialog__header {
  display: none;
}
.valid-phone .el-dialog .el-dialog__body .set-tip{
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100%;
}
.valid-phone .el-dialog .el-dialog__body .set-tip p{
  margin-bottom: .2rem;
  margin-top: 0;
  font-size: .24rem;
  color: #000;
}
.valid-phone .el-dialog .el-dialog__body .set-tip a{
  display: inline-block;
  width: 1rem;
  height: .5rem;
  line-height: .5rem;
  text-align: center;
  font-size: .24rem;
  color: #fff;
  background: #00a0e9;
  border-radius: 0.06rem;
}

//上传图片

.phone-btn-blank{
  position: relative;
  display: inline-block;
  width: 100%;
  line-height: .94rem;
  height: 48px;
  text-align: left;
  border: 1px solid #b5b5b5;
  overflow: hidden;
  cursor: pointer;
}
.phone-btn-blank .fa {
  margin-left: .2rem;
  font-size: .4rem;
}
.phone-btn-blank span.upload {
  margin-left: .15rem;
  line-height: 48px;
  font-size: 16px;
  color: #999;
}
.phone-btn-blank input[type='file']{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  min-height: 48px;
  opacity: 0;
  border: none;
}
.phone-btn-blank:hover, .phone-btn-blank[disabled] {
  border-color: #c0c4cc;
  background: #e6e6e6;
  color: #333;
}
.phone-btn-blank.isEmpty{
  border-color: #c0c4cc;
  background: #e6e6e6;
  color: #333;
}
.phone-btn-blank:hover span.upload{
  color: #000;
}

//地址选择小图标
.fa.fa-p {
  position: absolute;
  right: .42rem;
  bottom: 12px;
  font-size: 20px;
  color: #888;
}
.fa.fa-picture-o{
  right: .3rem;
}

//地址选择弹出框
.mint-popup-bottom {
  top: 50%;
}


//等待审核中

.page-last.page-wait {
  h4 {
    span{
      font-size: .45rem;
      color: #323232;
      font-weight: normal;
    }
  }
  p{
    text-align: left;
    font-size: .3rem;
    color: #8b8b8b;
  }
}

//复选框
.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #a1a1a1;
}

//下拉选择框

.page-part select{
  padding-left: .22rem;
  width: 100%;
  height: 48px;
  border: 1px solid #b5b5b5;
  appearance:none;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari 和 Chrome */
}

//查看大图
#image-box .x-floating img, .image-box .x-floating img {
  margin: auto auto;
  max-width: 5.5rem !important;
  max-height: 6rem !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mint-toast.is-placemiddle {
  z-index: 10000;
}

//地址选择弹框
.mobile .distpicker-address-wrapper .address-container ul {
  height: 4.3rem;
  overflow-y: auto;
}


//碧合
.user-info {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  .img{
    width: 1rem;
    height: 1rem;
    margin: 0 auto;
    text-align: center;
  }
  img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
  }
  .user-name {
    margin: .3rem 0;
    font-size: .26rem;
    color: #3c3c3c;
  }
}
.go-register{
  margin-top: .2rem;
  text-align: right;
  a.go{
    font-size: .30rem;
    color: #3c3c3c;
  }
}

//短信快捷登录
.page-part .handle{
  overflow: hidden;
  margin-top: .14rem;
  span{
    font-size: .28rem;
    color: #50a0f7;
    &.fast-login{
      float: left;
    }
    &.pwd{
      float: right;
    }
  }
}

.mint-field-other .token{
  display: inline-block;
  padding: 0 .5rem;
  text-align: center;
  border-left: 1px solid #b5b5b5;
  margin-left: .1rem;
  color: #2d8cf0;
}