写一个好看的 vue-upload-component 样式

以下是一个简单的 vue-upload-component 样式示例：

<template>
  <div class="upload">
    <vue-upload-component
      ref="upload"
      :url="uploadUrl"
      :options="{params: {id: 123}}"
      @uploaded="onUpload"
      @failed="onUploadFailed"
      @input-filter="onInputFilter"
    >
      <div class="upload__dropzone">
        <div class="upload__icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </div>
        <div class="upload__text">
          Drag and drop files here or click to select
        </div>
      </div>
    </vue-upload-component>
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    VueUploadComponent
  },
  data() {
    return {
      uploadUrl: 'https://api.example.com/upload'
    }
  },
  methods: {
    onUpload(response) {
      console.log(response.data)
    },
    onUploadFailed(err) {
      console.log(err)
    },
    onInputFilter(newFile, oldFile, prevent) {
      if (newFile && newFile.size > 10 * 1024 * 1024) {
        prevent()
        alert('File size exceeds 10MB limit')
      }
    }
  }
}
</script>

<style scoped>
.upload {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.upload__dropzone {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #ccc;
  border-radius: 5px;
  transition: border-color 0.2s ease-in-out;
}

.upload__dropzone.dragover {
  border-color: #0070f3;
}

.upload__icon {
  font-size: 2em;
  margin-bottom: 10px;
}

.upload__text {
  font-size: 1.2em;
  color: #666;
  text-align: center;
}
</style>

在上面的示例中，我们使用了 flex 布局来使 upload 组件垂直居中，并使用 border 和 border-radius 属性来创建一个漂亮的边框。同时，我们也为上传区域添加了一个拖动和放置的效果，当用户将文件拖动到上传区域上方时，边框颜色会改变。您可以根据您的需要进行自定义更改。