<template>
    <div>
        <el-dialog v-dialog-drag class="dialog" title="批量导入数据" :visible.sync="dialogVisible" width="25%" center>
            <el-divider></el-divider>
            <el-timeline>
                <el-timeline-item>下载 Excel 模板
                    <el-button
                        style="width: 200px;height: 30px;text-align: center;margin:0px; margin-top: 10px;padding: 5px;"
                        type="text">点击下载《A设备导入模板》</el-button>
                </el-timeline-item>
                <el-timeline-item>编辑 Excel 模板</el-timeline-item>
                <el-timeline-item>上传已编辑好的 Excel 模板</el-timeline-item>
            </el-timeline>
            <div slot="footer" class="dialog-footer">
                <el-input v-model="input" placeholder="文件名称"></el-input>
                <el-upload :action="action">
                    <el-button type="primary">选择文件</el-button>
                </el-upload>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            input: '',
            action: '',
            steps: [{
                content: '下载 Excel 模板',
            }, {
                content: '编辑 Excel 模板',
            }, {
                content: '上传已编辑好的 Excel 模板'
            }]
        }
    },
    methods: {

    }

}
</script>
<style lang="less" scoped>
/deep/.el-dialog {
    height: 500px !important;
}

/deep/.el-dialog {
    height: 30vh;
}

/deep/.el-dialog__title {
    margin-right: 330px;
}

/deep/.el-dialog__headerbtn {
    font-size: 25px;
}

/deep/.el-dialog__body {
    padding: 0;
}

/deep/.el-dialog__footer {
    margin-top: -40px;
}

.el-timeline {
    margin: 40px 0 0 80px;
    list-style: none;
    font-size: 18px;

    .el-timeline-item {
        position: relative;
        padding-bottom: 80px;
    }

    /deep/.el-timeline-item__content {
        display: grid;
    }
}

/deep/.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 95%;
    margin: 0;
    margin-left: 2.5%;
}

.dialog-footer {
    display: flex;
    margin-left: 10px;

    /deep/.el-input {
        height: 40px;
        width: 300px;
        margin-right: 10px;
    }

    /deep/.el-button {
        margin: 0;
        height: 40px;
        width: 100px;
    }
}

.el-button {
    width: 100px;
    height: 30px;
    text-align: center;
    margin: 30px;
    padding: 5px;
}
</style>