仿QQ登录界面---微信小程序

前提：需要自己提前准备image里的图片，下面图标可去iconfont网站下载。

iconfont网站链接：https://www.iconfont.cn

目录

第一版代码

wxml

wxss

效果图

---

#达成效果图

第一版代码

wxml

  
  QQ9
  
    
    
    登录
  
  已阅读并同意服务协议和QQ隐私保护指引
  
    
      
        
      
      {{item}}
    
  

wxss

/**index.wxss**/
.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center; 
  padding: 80rpx 32rpx 160rpx;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
}  

.bg {  
  position: fixed;
  top: 0;                  
  left: 0;                 
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0.95;
}  

.logo {  
  font-size: 72rpx;
  background: linear-gradient(
    110deg,
    #62c9f1 20%,   
    #8cbaff 60%,   
    #eb94e8 100%   
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: 240rpx;
  text-align: center;
}  

.input-group {
  width: 100%;
  max-width: 500rpx;
  transform: translateY(-40rpx); 
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.input {
  width: 100%;
  max-width: 500rpx; 
  height: 96rpx;
  margin-bottom: 32rpx;
  background: #ffffff;
  border: 1rpx solid #ebedf0;
  border-radius: 16rpx; 
  font-size: 28rpx;
  
}

.input-pla{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn {  
  margin: 50rpx auto 0; 
  color: white !important; 
  width: 100%; 
  max-width: 500rpx; 
  max-width: 600rpx; 
  height: 96rpx !important;
  margin-top: 20rpx; 
  background: #00a3ff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}  

.agreement {
  margin: 30rpx auto;
  display: flex;
  justify-content: center; 
  align-items: center; 
  position: relative;
  top: -10rpx; 
}

.agreement {
  margin: 40rpx 0;
  font-size: 24rpx;
  color: #666;
  display: flex;
  align-items: center;
}

.agreement text {
  color: #00a3ff; 
}

.agreement .wx-checkbox-input {
  border-radius: 50% !important; 
  width: 40rpx !important;       
  height: 40rpx !important;
  background: transparent !important;
}

.agreement .wx-checkbox-input.wx-checkbox-input-checked {
  background: #00a3ff !important; 
  border-color: #00a3ff !important;
}

.agreement .wx-checkbox-input.wx-checkbox-input-checked::before {
  content: '';
  width: 20rpx;                 
  height: 10rpx;
  border: 2rpx solid white;     
  border-top: none;
  border-right: none;
  transform: rotate(-45deg) translate(-20%, -110%);
  position: absolute;
  top: 50%;
  left: 50%;
  background: transparent !important;
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
}

.icon-container {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #999;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  margin-bottom: 16rpx;
}

.bottom-nav {
  bottom: 200rpx !important; 
  width: 80%; 
  position: fixed;
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-label {
  font-size: 24rpx;
  color: #666;
}

效果图