/* 容器样式 */
.con {
  background: #fff; /* 设置容器的背景颜色为白色 */
  height: 100%; /* 容器的高度占满父元素的100% */
  margin-top: 50px; /* 容器与页面顶部的距离为50像素 */
}

/* 图像样式 */
image {
  display: block; /* 确保图像作为块级元素显示，避免与其他元素在同一行 */
  width: 150rpx; /* 图像宽度为150响应式像素 */
  height: 150rpx; /* 图像高度为150响应式像素 */
  margin: auto; /* 使图像水平居中 */
  border-radius: 50%; /* 将图像设置为圆形（50%创建一个圆形） */
  width: 150rpx; /* 重复定义图像宽度为150响应式像素 */
  height: 150rpx; /* 重复定义图像高度为150响应式像素 */
  margin-bottom: 8%; /* 图像底部外边距为父元素高度的8% */
}

/* 登录表单样式 */
.login-form {
  width: 90%; /* 表单宽度为父元素宽度的90% */
  margin: 0 auto; /* 表单左右外边距自动，实现水平居中 */
  margin-bottom: 20%; /* 表单底部外边距为父元素高度的20%，确保与下方内容有足够的间距 */
}

/* 授权按钮样式 */
.authorized-btn {
  width: 90%; /* 按钮宽度为父元素宽度的90% */
  margin: 0 auto; /* 按钮左右外边距自动，实现水平居中 */
  text-align: center; /* 按钮内的文本居中对齐 */
  background-color: #0ab906; /* 按钮背景颜色设置为绿色 */
  border: 1rpx solid #0ab906; /* 按钮边框为1响应式像素宽，颜色为绿色 */
  color: #fff; /* 按钮文字颜色设置为白色 */
  border-radius: 6rpx; /* 按钮边角圆滑度，半径为6响应式像素 */
  font-size: 26rpx; /* 按钮文字大小设置为26响应式像素 */
  padding: 8rpx; /* 按钮内边距，即文字与按钮边缘之间的距离 */
  margin-top: 80rpx; /* 按钮顶部外边距为80响应式像素 */
  border: 1rpx solid #0ab906; /* 重复定义按钮边框为1响应式像素宽，颜色为绿色 */
  border-radius: 6rpx; /* 重复定义按钮边角圆滑度，半径为6响应式像素 */
  font-size: 26rpx; /* 重复定义按钮文字大小为26响应式像素 */
  padding: 8rpx; /* 重复定义按钮内边距 */
  margin-top: 80rpx; /* 重复定义按钮顶部外边距 */
}

/* 返回首页按钮样式 */
.to-idx-btn {
  width: 90%; /* 按钮宽度为父元素宽度的90% */
  margin: 0 auto; /* 按钮左右外边距自动，实现水平居中 */
  text-align: center; /* 按钮内的文本居中对齐 */
  background-color: #eeeeee; /* 按钮背景颜色设置为浅灰色 */
  color: #333; /* 按钮文字颜色设置为深灰色 */
  border-radius: 6rpx; /* 按钮边角圆滑度，半径为6响应式像素 */
  font-size: 26rpx; /* 按钮文字大小设置为26响应式像素 */
  padding: 8rpx; /* 按钮内边距，即文字与按钮边缘之间的距离 */
  margin-top: 30rpx; /* 按钮顶部外边距为30响应式像素 */
  border-radius: 6rpx; /* 重复定义按钮边角圆滑度，半径为6响应式像素 */
  font-size: 26rpx; /* 重复定义按钮文字大小为26响应式像素 */
  padding: 8rpx; /* 重复定义按钮内边距 */
  margin-top: 30rpx; /* 重复定义按钮顶部外边距 */
}

/* 表单标题样式 */
.form-title {
  width: 100%; /* 标题宽度为100%，即占满整个父元素的宽度 */
  margin-bottom: 50rpx; /* 标题底部外边距为50响应式像素 */
  font-size: 32rpx; /* 标题字体大小设置为32响应式像素 */
  text-align: center; /* 标题文本居中对齐 */
  color: #00a0e9; /* 标题文字颜色设置为蓝色 */
  margin-bottom: 50rpx; /* 重复定义标题底部外边距为50响应式像素 */
  font-size: 32rpx; /* 重复定义标题字体大小为32响应式像素 */
}

/* 表单项样式 */
.item {
  display: block; /* 确保每个表单项作为一个单独的块级元素显示 */
  margin-bottom: 30rpx; /* 每个表单项底部外边距为30响应式像素 */
  margin-bottom: 30rpx; /* 重复定义每个表单项底部外边距为30响应式像素 */
}

/* 账号输入框样式 */
.account {
  display: flex; /* 使用弹性布局来排列子元素 */
  background: #f8f8f8; /* 输入框背景颜色设置为浅灰色 */
  padding: 15rpx; /* 输入框内边距为15响应式像素 */
  box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
  font-size: 26rpx; /* 输入框内的字体大小设置为26响应式像素 */
  align-items: center; /* 子元素垂直居中对齐 */

  input {
    padding-left: 20rpx; /* 输入框内部左侧留出20响应式像素的空间 */
    width: 75%; /* 输入框宽度为父元素宽度的75% */
    padding-left: 20rpx; /* 重复定义输入框内部左侧留出20响应式像素的空间 */
  }
}

/* 移除按钮默认边框 */
button::after {
  border: 0 !important; /* 移除按钮点击时出现的默认边框，使用!important确保覆盖其他样式 */
}

/* 操作区域样式 */
.operate {
  display: flex; /* 使用弹性布局来排列子元素 */
  justify-content: space-between; /* 子元素之间均匀分布，两端对齐 */
  align-items: center; /* 子元素垂直居中对齐 */
}

/* 注册链接样式 */
.to-register {
  font-size: 28rpx; /* 链接字体大小设置为28响应式像素 */
  color: #00AAFF; /* 链接文字颜色设置为蓝色 */
  font-size: 28rpx; /* 重复定义链接字体大小为28响应式像素 */
}

/* 错误提示样式 */
.error {
  .error-text {
    display: block; /* 错误信息作为块级元素显示 */
    width: 100%; /* 错误信息宽度为100%，即占满整个父元素的宽度 */
    font-size: 28rpx; /* 错误信息字体大小设置为28响应式像素 */
    color: #e43130; /* 错误信息文字颜色设置为红色 */
    text-align: left; /* 错误信息文本左对齐 */
    margin-top: 10rpx; /* 错误信息顶部外边距为10响应式像素 */
    font-size: 28rpx; /* 重复定义错误信息字体大小为28响应式像素 */
    margin-top: 10rpx; /* 重复定义错误信息顶部外边距 */

    .warning-icon {
      display: inline-block; /* 警告图标作为行内块级元素显示 */
      color: #fff; /* 警告图标文字颜色设置为白色 */
      width: 26rpx; /* 警告图标宽度为26响应式像素 */
      height: 26rpx; /* 警告图标高度为26响应式像素 */
      line-height: 26rpx; /* 警告图标行高设置为26响应式像素，以确保文字垂直居中 */
      background: #e43130; /* 警告图标背景颜色设置为红色 */
      border-radius: 50%; /* 警告图标边角设置为圆形 */
      text-align: center; /* 警告图标文字居中对齐 */
      margin-right: 12rpx; /* 警告图标右侧留出12响应式像素的空间 */
      font-size: 22rpx; /* 警告图标内的字体大小设置为22响应式像素 */
      width: 26rpx; /* 重复定义警告图标宽度为26响应式像素 */
      height: 26rpx; /* 重复定义警告图标高度为26响应式像素 */
      line-height: 26rpx; /* 重复定义警告图标行高 */
      margin-right: 12rpx; /* 重复定义警告图标右侧留出12响应式像素的空间 */
      font-size: 22rpx; /* 重复定义警告图标内的字体大小 */
    }
  }
}
