用vue实现注册页效果|用vue实现注册页效果 vue实现短信验证码登录用vue实现注册页效果vue实现短

【用vue实现注册页效果|用vue实现注册页效果 vue实现短信验证码登录】本文实例为大家分享了vue实现注册页效果的具体代码，供大家参考，具体内容如下
一、实现效果图
文章图片

文章图片

二、实现代码 1、实现头部

.box1 {width: 100%; height: 0.5rem; margin-bottom: 0.19rem; } span {font-size: 0.18rem; line-height: 0.5rem; font-size: 0.2rem; } .back {font-size: 0.25rem; } .box6 {width: 100%; height: 0.66rem; margin: auto; }b {font-size: 0.24rem; font-weight: normal; }p {font-size: 0.13rem; color: gray; margin-top: 0.11rem; }

2、实现注册内容

.box1 {width: 100%; height: 0.7rem; } .box1 b {margin-top: 0.25rem; font-weight: normal; } .phone-container {width: 100%; padding: 0.1rem 0; margin-bottom: 0.4rem; position: relative; }.phone-container > span {position: absolute; font-size: 0.16rem; color: #666; top: 0.21rem; }input {border: none; outline: none; } input::-webkit-input-placeholder {font-size: 0.2rem; color: rgb(216, 214, 214); }.userphone {display: block; width: 100%; height: 0.4rem; box-sizing: border-box; padding: 0 0.3rem; padding-left: 0.4rem; font-size: 0.2rem; border-bottom: 0.01rem solid #eee; }.box2 {width: 100%; height: 0.5rem; margin-top: 0.2rem; } .box2 h3 {width: 100%; height: 0.4rem; background-color: yellow; border-radius: 0.15rem; font-size: 0.18rem; text-align: center; line-height: 0.3rem; margin-top: 0.1rem; font-weight: 600; line-height: 0.4rem; letter-spacing: 0.02rem; color: rgba(87, 42, 42, 0.623); } .box3 {width: 100%; height: 0.3rem; margin-top: 3.4rem; font-size: 0.12rem; } .box3 b {font-weight: normal; color: deepskyblue; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。