修改样式现在文件中的代码样式是乱的在电脑后台屏幕上的表单严重错误

为了修复当前表单样式混乱的问题，您可以按照以下建议对代码进行调整：

### HTML结构调整

1. **确保结构清晰**：确认 `<a-row>` 和 `<a-col>` 容器内的元素排列合理，避免出现嵌套过深或缺少闭合标签的情况。
2. **使用合理的栅格布局**：Ant Design 的栅格系统可以灵活地控制不同设备下的显示效果，适当调整 `span` 属性以适应不同的屏幕尺寸。

### CSS样式优化

1. **设置容器宽度和高度**：确保 `.all` 和 `.ant-row` 容器具有合适的宽度和高度，并且居中对齐。
2. **增加响应式设计**：通过媒体查询（media query）来适配不同分辨率的屏幕。
3. **简化样式**：减少冗余的样式定义，使代码更加简洁易读。

### 示例代码

以下是经过调整后的示例代码，包括HTML和CSS部分：

#### HTML 部分

<template>
  <div class="all">
    <a-row type="flex" justify="center" align="middle">
      <a-col :span="6" style="text-align: center;">
        <h2>欢迎使用智慧社区商城后台管理系统</h2>
        <a-image style="width: 190px; height: 190px;" :src="require('@/assets/logo1.jpg')" />
        <p>万里学院大数据与软件工程学院提供技术支持</p>
        <p>基于Vue+Spring Boot技术实现</p>
      </a-col>
      <a-col :span="1" style="text-align: center;">
        <a-divider direction="vertical" />
      </a-col>
      <a-col :span="6" style="text-align: center;">
        <a-form ref="loginForm" :model="loginObject" :rules="rules" @submit="handleSubmit">
          <a-form-item label="用户名" prop="username">
            <a-input v-model="loginObject.username" placeholder="请输入用户名" />
          </a-form-item>
          <a-form-item label="密码" prop="password">
            <a-input type="password" v-model="loginObject.password" placeholder="请输入密码" />
          </a-form-item>
          <a-form-item label="验证码" prop="code">
            <a-input v-model="loginObject.code" style="width: 140px; float: left;" maxLength="5" />
            <img :src="captchaImg" class="captchImg" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">提交</a-button>
            <a-button>忘记密码</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>

#### CSS 部分

<style scoped>
.all {
  height: 100vh;
  display: flex;
  background-color: #FBAB7E;
  background-image: linear-gradient(315deg, #FBAB7E 0%, #f9dc8e 100%);
  padding: 20px;
  box-sizing: border-box;
}

.ant-row {
  background: #fafafa;
  width: 88%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 2px 5px 5px 5px rgba(0, 0, 0, .1);
  border-radius: 10px;
  padding: 20px;
}

.ant-col-6 {
  text-align: center;
  padding: 20px;
}

.ant-col-1 {
  text-align: center;
  padding: 20px;
}

.ant-divider {
  height: 200px;
}

.captchImg {
  float: left;
  margin-left: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
}
</style>

### 注意事项

1. **测试效果**：调整后，请在不同设备上进行测试，确保页面在各种屏幕尺寸下都能正确显示。
2. **调试工具**：使用浏览器开发者工具（如 Chrome DevTools）检查元素，查看实际渲染效果并进行微调。
3. **保持一致**：确保表单元素之间的间距和对齐方式一致，提升用户体验。

希望这些改动能够帮助您解决表单样式混乱的问题。如果有其他具体需求或问题，请随时告知。