body {
      margin: 0;
      padding: 0;
      background: linear-gradient(45deg, #000, #434343); /* 黑金色渐变背景 */
      min-height: 100vh; /* 设置最小高度为视口高度 */
    }
    
    html {
      margin: 0;
      padding: 0;
    }

  
  /* 模拟手机尺寸的容器 */
  .mobile-container {
    width: 375px; /* 假设的手机屏幕宽度 */
    max-width: 100%; /* 确保不会超过屏幕宽度 */
    margin: auto; /* 在大屏幕上居中 */
    background: linear-gradient(45deg, #000, #434343); /* 黑金色渐变背景 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 为容器添加阴影以增强立体感 */
    overflow: auto; /* 内容超过时允许滚动 */
    min-height: 100vh; /* 使容器至少与视口的高度一致 */
    
    position: relative; /* 这是新添加的，用于 uni-tabbar 的绝对定位 */
    padding-bottom: 50px; /* 确保内容不会被底部导航栏遮挡 */
  }

  .container {
    display: flex; /* 使用flex布局使块并排显示 */
    justify-content: space-around; /* 块之间均匀间隔 */
    flex-wrap: wrap; /* 确保块能在容器内自动换行 */
    padding: 20px; /* 容器内边距 */
    
    
  }

  /* 直接使用您提供的样式 */
  .block {
    width: 6.46875rem;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: #20202b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
    cursor: pointer;
  }

    .content {
      width: 100%; /* 使内容填满块 */
      display: flex; /* 这里应用flex布局 */
      flex-direction: column; /* 子元素垂直排列 */
      justify-content: center; /* 垂直居中 */
      align-items: center; /* 水平居中 */
    }

  .block img {
    max-width: 50%; /* logo大小限制 */
    height: auto;
  }

  .block h2 {
    text-align: center;
    color: #fff;
    font-size: 0.7em; /* 调整标题大小 */
  }
    .uni-tabbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 375px;
      margin: auto;
      background-color: rgb(0, 0, 0);
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 50px;
      z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
    
    }
    .login-title{
        color:#fff;
    }
    
    
    
    
    .uni-tabbar-border {
      height: 1px;
      background-color: rgba(255, 255, 255, 0.33);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    
    
    .uni-tabbar__item {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; /* 确保上下居中对齐 */
      /* 移除 height 属性 */
      padding: 5px 0; /* 根据需要调整以优化对齐 */
    }
    
    .uni-tabbar__bd {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .uni-tabbar__icon {
      width: 24px;
      height: 24px;
    }
    
    .uni-tabbar__icon img {
      width: 100%;
      height: auto;
    }
    
    .uni-tabbar__label {
      color: rgb(255, 255, 255);
      font-size: 10px;
      margin-top: 3px;
    }
    
    .login-form-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      width: 100%; /* 设置容器的宽度为100% */
      box-sizing: border-box; /* 确保内边距包含在宽度内 */
    }
    
    .login-input,
    .login-button {
      width: 100%; /* 设置宽度为父容器的100% */
      padding: 10px; /* 设置内边距 */
      margin-bottom: 10px; /* 设置下外边距 */
      border-radius: 5px; /* 设置边角的圆滑程度 */
      border: 1px solid #ccc; /* 设置边框 */
      box-sizing: border-box; /* 重要: 内边距和边框包含在宽度内 */
    }
    
    .login-input {
      background-color: #fff; /* 输入框的背景颜色 */
      color: #333; /* 输入框的文字颜色 */
    }
    
    .login-button {
      border: none; /* 按钮无边框 */
      background-color: #007bff; /* 按钮的背景颜色 */
      color: white; /* 按钮的文字颜色 */
      cursor: pointer; /* 鼠标悬浮时的光标形状 */
      margin-bottom: 0; /* 按钮的下外边距设置为0 */
    }
    
    /* 确保所有元素的外边距都已正确设置 */
    .login-form-container > *:last-child {
      margin-bottom: 0;
    }

    .login-button:disabled {
      background-color: #ccc;
    }

    
    
    /* 响应式设计，适应更小的屏幕尺寸 */
    @media (max-width: 375px) {
    .block {
      width: calc(100% / 3 - 20px); /* 使块占据1/3的宽度 */
      margin-right: 10px;
      margin-left: 10px;
    }
    
    .container {
      justify-content: flex-start; /* 在小屏幕上调整布局 */
    }
    }