miniProgram/subpages/login/login.wxss

.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh; /* 占据整个视窗高度 */  
  background-color: #f4f4f4; /* 浅灰色背景 */  
  padding: 40rpx;  
  box-sizing: border-box; /* 边框盒模型，使内边距不影响总宽度 */  
}  
  
/* 输入框组件样式 */  
.input-group {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%; /* 设置固定宽度 */  
  margin-left:5%;
  margin-bottom: 40rpx; /* 底部外边距 */  
  background-color: #fff; /* 白色背景 */  
  border-radius: 16rpx; /* 圆角边框 */  
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */  
  overflow: hidden; /* 隐藏溢出的内容 */  
  position: relative; /* 相对定位，用于后续子元素的绝对定位 */  
}  
  
/* 输入框内部标签样式 */  
.input-group .label {  
  color: #666; /* 深灰色字体 */  
  font-size: 28rpx; /* 字体大小 */  
  font-weight: bold; /* 加粗 */  
  padding: 20rpx 0 10rpx 32rpx; /* 内边距 */  
  background-color: #f9f9f9; /* 浅灰色背景 */  
  width:30%;
}  
  
/* 输入框样式 */  
.input-group .input {  
  width: calc(100% - 32rpx); /* 减去左右内边距 */  
  padding: 20rpx 32rpx; /* 内边距 */  
  border: none; /* 无边框 */  
  outline: none; /* 去除聚焦时的轮廓 */  
  font-size: 32rpx; /* 字体大小 */  
  color: #333; /* 字体颜色 */  
  background-color: transparent; /* 透明背景，显示父容器的背景 */  
}  
  
/* 验证码发送按钮样式 */  
.input-group .send-code {
  position: absolute; /* 绝对定位 */  
  right: 0; /* 右侧对齐 */  
  top: 0; /* 顶部对齐 */  
  padding: 10rpx 40rpx; /* 内边距 */  
  background-color: #007aff; /* 蓝色背景 */  
  color: white; /* 白色字体 */  
  border: none; /* 无边框 */  
  border-radius: 0 16rpx 16rpx 0; /* 圆角仅在右侧 */  
  font-size: 32rpx; /* 字体大小 */  
  cursor: pointer; /* 鼠标悬停时显示指针 */  
}

.input-group .send-code-1 {  
  font-size: 25rpx; /* 字体大小 */  
}
  
/* 验证码发送按钮禁用状态样式 */  
.input-group .send-code[disabled] {  
  background-color: #ccc; /* 灰色背景 */  
  color: #999; /* 灰色字体 */  
  cursor: not-allowed; /* 鼠标悬停时显示禁止符号 */  
}  
  
/* 登录按钮样式 */  
.login-btn {  
  width: 500rpx; /* 宽度与输入框组件一致 */  
  padding: 6rpx 0; /* 上下内边距，左右由子元素控制 */  
  background-color: #007aff; /* 蓝色背景 */  
  color: white; /* 白色字体 */  
  border: none; /* 无边框 */  
  border-radius: 16rpx; /* 圆角边框 */  
  font-size: 36rpx; /* 字体大小 */  
  cursor: pointer; /* 鼠标悬停时显示指针 */  
  text-align: center; /* 文本居中 */  
  display: flex; /* 弹性布局 */  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
}  

.login-out {  
  width: 500rpx; /* 宽度与输入框组件一致 */  
  padding: 6rpx 0; /* 上下内边距，左右由子元素控制 */  
  background-color: #007aff; /* 蓝色背景 */  
  color: white; /* 白色字体 */  
  border: none; /* 无边框 */  
  border-radius: 16rpx; /* 圆角边框 */  
  font-size: 36rpx; /* 字体大小 */  
  cursor: pointer; /* 鼠标悬停时显示指针 */  
  text-align: center; /* 文本居中 */  
  display: flex; /* 弹性布局 */  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */
  margin-top:20rpx;
} 
  
/* 登录按钮禁用状态样式 */  
.login-btn[disabled] {  
  background-color: #ccc; /* 灰色背景 */  
  color: #999; /* 灰色字体 */  
  cursor: not-allowed;
  }

 .title{
  text-align: center;
  font-size: 38rpx;
  color: #000000;
  font-weight: bold;
  margin: auto;
  margin-top: 100rpx;
}