ioc-admin-ui/src/views/dataManagement/basicInfo/accessedSystem.vue

<template>
  <div class="basic-inner">
    <div class="info-outer">
      <div class="info">底层接入系统</div>
    </div>
    <div class="center">
      <el-upload action="#" list-type="picture-card" :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style lang="less" scoped>
.basic-inner {
  width: 100%;
  height: 100%;
  .info-outer {
    width: 95%;
    margin: 0 auto;
    height: 80px;
    .info {
      font-size: 20px;
      width: 200px;
      height: 80px;
      display: flex;
      align-items: center;
    }
  }
  .center {
    width: 98%;
    margin: 0 auto;
    height: calc(100% - 80px);
    /deep/.el-upload--picture-card {
      width: 300px;
      height: 200px;
      border: 1px solid #c0ccda;
    //   margin-right: 1000px;
    //   margin-top: 20px;
    }

    /deep/.el-upload--picture-card i {
      display: flex;
      padding-right: 20px;
      font-size: 50px;
      padding: 75px 120px;
    }
  }
}
</style>