页面样式改一下 改一个你觉得好看的样式

为了提升页面的美观度，可以对现有样式进行一些调整。以下是改进后的样式代码：

<style scoped>
  .upload-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
  }

  .upload-area {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .ant-upload-hint {
    margin-top: 16px;
    color: #666666;
  }

  .table-container {
    margin-top: 20px;
  }

  .modal-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .button-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }

  .button-group button {
    width: 150px;
  }
</style>

<template>
  <div class="upload-container">
    <div class="upload-area">
      <a-upload drag multiple :customRequest="handleUpload" :fileList="fileList" :showUploadList="false" @change="handleChange">
        <div>
          <a-icon type="inbox" style="font-size: 64px; color: #999;" />
          <p class="ant-upload-hint">点击或拖拽文件到这里进行上传</p>
        </div>
      </a-upload>
    </div>
  </div>

  <div class="table-container">
    <!-- 图片列表表格 -->
    <a-table :columns="columns" :dataSource="imageList" rowKey="id" :style="{ width: '80%', margin: '0 auto' }">
      <template slot="customThumb" slot-scope="text, record">
        <img style="width: 80px; height: 80px; border-radius: 5px" :src="record.thumb" @click="showImage(record.url)" />
      </template>
      <template slot="customUrl" slot-scope="text, record">
        <a :href="record.url" style="width: 376px;">{{ text }}</a> &nbsp;
        <a-button type="primary" size="small" @click="downloadImage(record.url)">下载</a-button>
      </template>
      <template slot="customDel" slot-scope="text, record">
        <a-popconfirm title="确定要删除吗？" ok-text="是" cancel-text="否" @confirm="deleteImage(record)">
          <a-button type="danger" size="small">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </div>

  <a-modal :bodyStyle="{ width: '520px', height: '450px', display: 'flex', justifyContent: 'center', alignItems: 'center' }" v-model="visible" :footer="null" :centered="true">
    <img alt="example" :src="selectedImageUrl" style="max-width: 100%; max-height: 100%; border-radius: 5px; object-fit: contain;" />
  </a-modal>

  <div class="button-group">
    <a-button type="primary" @click="checkTestApi">get测试接口</a-button>
    <a-button type="primary" @click="checkTestApi2">post测试接口</a-button>
    <a-button type="primary" @click="checkTestApi3">patch测试接口</a-button>
    <a-button type="primary" @click="checkTestApi4">put测试接口</a-button>
    <a-button type="primary" @click="checkTestApi5">delete测试接口</a-button>
  </div>
</template>

### 主要改动点：
1. **背景颜色**：将整个页面的背景颜色改为浅灰色（`#f0f2f5`），使页面看起来更清爽。
2. **上传区域**：为上传区域添加了背景色、内边距、圆角和阴影，使其更加突出。
3. **按钮组**：将按钮组居中排列，并增加了一些间距，使按钮之间的间隔更合理。
4. **文字提示**：调整了上传提示的文字颜色，使其更柔和。

这些改动可以使页面整体看起来更加现代和美观。希望你喜欢这个新样式！