@charset "UTF-8"; //二维码样式 .google-code { // margin-top: .6rem; // margin-bottom: .2rem; // display: flex; // justify-content: center; // img { // width: 2.06rem !important; // height: 2.06rem; // } background-color: #FFFFFF; width: 240px; height: 240px; margin: .6rem auto; padding: 20px; text-align: center; } //谷歌验证文本 .google-address-box { width: 90%; margin: 0 auto; p { width: 100%; color: #333333; font-size: .24rem; padding: .2rem 0; } .google-address { display: flex; justify-content: space-between; align-items: center; span { width: 70%; color: #666666; font-size: .2rem; word-break: break-all; } img { width: .27rem !important; height: .32rem; } } } //注意事项样式 .google-note { width: 90%; margin: .5rem auto; p { width: 100%; color: #888; } } //实现验证码输入框的样式 @keyframes animate { 100% { opacity: 13; } } .vcode { position: relative; width: 100%; overflow: hidden; } .code { width: 100%; padding: 0; height: 40px; font-size: .43rem; overflow: hidden; border: none; outline: none; opacity: 0; margin-left: -100%; // ios上透明度为0时依然有光标 -webkit-tap-highlight-color: transparent; } .labels { display: flex; display: -webkit-flex; width: 100%; justify-content: space-between; -webkit-justify-content: space-between; margin-top: -.68rem; -webkit-tap-highlight-color: transparent; // 解决ios点击灰色阴影的问题 } .label { height: .58rem; width: 8%; border-bottom: solid 2px #4489FF; float: left; color: #4489FF; font-size: .43rem; text-align: center; padding-bottom: 4px; } .active:after { // 伪类实现光标效果 content: ' '; display: inline-block; height: 100%; width: 2px; background: #4489FF; animation: .8s animate infinite; } //验证按钮样式 .verification{ width:90%; height:.75rem; background:linear-gradient(90deg,rgba(255,157,0,1) 0%,rgba(255,205,52,1) 100%); border-radius:4px; margin: .8rem auto; text-align: center; line-height: .75rem; color: #FFFFFF; }