<template>
  <div class="alert-demo-container">
    <!-- 主要警告 -->
    <el-alert title="主要警告" type="primary" />
    
    <!-- 成功警告 -->
    <el-alert title="成功警告" type="success" />
    
    <!-- 信息警告 -->
    <el-alert title="信息警告" type="info" />
    
    <!-- 警告提醒 -->
    <el-alert title="警告提醒" type="warning" />
    
    <!-- 错误警告 -->
    <el-alert title="错误警告" type="error" />
  </div>
</template>

<style scoped>
/* 警告框演示容器样式 */
.alert-demo-container {
  max-width: 600px;
}

/* 警告框样式 */
.alert-demo-container .el-alert {
  margin: 20px 0 0;
  transition: all 0.3s ease;
}

/* 第一个警告框的特殊样式（移除顶部外边距） */
.alert-demo-container .el-alert:first-child {
  margin: 0;
}

/* 警告框悬浮效果 */
.alert-demo-container .el-alert:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .alert-demo-container {
    max-width: 100%;
    margin: 0 10px;
  }
  
  .alert-demo-container .el-alert {
    margin: 15px 0 0;
  }
}
</style>