<!-- 
 * @description: 
 * @fileName: index.vue 
 * @author: lh 
 * @date: 2021-08-05 19:11:55 
 * @后台人员:  
 * @path:  
 * @version: V1.0.5 
!-->
<template>
  <div class="page-container">
      <div class="button-item">
          <p>Notice Single</p>
          <el-rrf-alert
                title="成功提示的文案"
                type="success"
                show-icon>
            </el-rrf-alert>
             <el-rrf-alert
                title="消息提示的文案"
                type="default"
                show-icon>
            </el-rrf-alert>
            <el-rrf-alert
                title="消息提示的文案"
                type="info"
                show-icon>
            </el-rrf-alert>
            <el-rrf-alert
                title="警告提示的文案"
                type="warning"
                show-icon>
            </el-rrf-alert>
            <el-rrf-alert
                title="错误提示的文案"
                type="error"
                show-icon>
            </el-rrf-alert>
      </div>
      <div class="button-item">
          <p>Notice</p>
           <el-rrf-alert
            title="成功提示的文案"
            type="success"
            description="文字说明文字说明文字说明文字说明文字说明文字说明"
            show-icon>
            </el-rrf-alert>
            <el-rrf-alert
                title="消息提示的文案"
                type="default"
                description="文字说明文字说明文字说明文字说明文字说明文字说明"
                show-icon>
            </el-rrf-alert>
            <el-rrf-alert
                title="消息提示的文案"
                type="info"
                description="文字说明文字说明文字说明文字说明文字说明文字说明"
                show-icon>
            </el-rrf-alert>
            <el-rrf-alert
                title="警告提示的文案"
                type="warning"
                description="文字说明文字说明文字说明文字说明文字说明文字说明"
                show-icon>
            </el-rrf-alert>
            <el-rrf-alert
                title="错误提示的文案"
                type="error"
                description="文字说明文字说明文字说明文字说明文字说明文字说明"
                show-icon>
            </el-rrf-alert>
      </div>
  </div>
</template>

<script>
import ElRrfAlert from "pkgs/RfAlert/src"
export default {
    components: {
        ElRrfAlert,
    },
    data() {
        return {
        }
    },
    methods: {}
}
</script>

<style lang="css" scoped>
    .page-container{
        display: flex;
        flex-direction: column;
    }
    .page-container .button-item{
        margin: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>