<template>
  <div class="error-container flex flex-col items-center justify-center w-full h-full">
    <SvgIcon name="error" class="w-[48px] h-[48px] text-red-500 mb-2"/>
    <div class="text-red-500 text-sm">加载失败</div>
    <button 
      class="mt-2 px-4 py-1 bg-[#45A2FF] text-white rounded hover:bg-[#3d8fe0] transition-colors"
      @click="retry"
    >
      重试
    </button>
  </div>
</template>

<script lang="ts" setup>
import SvgIcon from "@/components/svg-icon/SvgIcon.vue";

const emit = defineEmits(['retry']);

const retry = () => {
  emit('retry');
};
</script>

<style scoped lang="scss">
.error-container {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
</style> 