ioc-admin-ui/src/views/deviceManagement/messageDailog/dataImport.vue

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="dialog"
      title="批量导入数据"
      :visible.sync="dialogVisible"
      width="500px"
      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;
              color: #2ea8e6;
            "
            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" style="background: #2ea8e6;">选择文件</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>