industrial-deposit-website/src/views/fids/enterpriseManagement/enterpriseCertification/Index.vue

<template>
    <div class="enterpriseCertification_wrap">
        <div class="enterpriseCertification_info">
          <!-- <step3 @child-event="parentEvent"/> -->
          <component v-bind:is="stepComponent" @child-event="parentEvent"></component>
        </div>
    </div>
</template>
<script>
import show from "./components/show"
import step1 from "./components/step1"
import step2 from "./components/step2"
import step3 from "./components/step3"

export default {
  name: "EnterpriseCertification",
  components: {
    show,
    step1,
    step2,
    step3
  },
  props: {},
  data(){
    return {
      stepComponent:"show"
    }
  },
  methods:{
    parentEvent(data){
      console.log(data);
      this.stepComponent = data
    }
  },
  directives: {}
}
</script>
<style lang="scss">
.enterpriseCertification_wrap {
  margin: 10px;

  .enterpriseCertification_info {
    display: inline-block;
    padding: 20px;
    width: 100%;
    background: #fff;
    .title {
      border-bottom: 1px solid #e2e2e2;
      line-height: 30px;
      margin-bottom: 24px;
      color: #444;
      &::before {
        content: " ";
        position: relative;
        display: inline-block;
        margin-right: 15px;
        width: 2px;
        top: 2px;
        height: 15px;
        background-color: rgb(74, 125, 190);
      }
      
    }
    .step-title {
      height: 40px;
      margin-bottom: 23px;
      padding: 0 13px;
      line-height: 40px;
      background-color: #f2f2f2;
      font-weight: 500;
    }
    .upload-tip {
        display: inline-block;
        width: 150px;
        line-height: 20px;
        font-size: 12px;
        color: #999;
        margin-top: 10px;
        margin-left: 20px;
    }
    .text_div {
      text-align: center;

      span {
        text-align: center;
        margin-bottom: 40px;
        background: #f9f0b3;
        line-height: 40px;
        padding: 0 100px;
        display: inline-block;

        em {
          color: #ff0000;
          display: inline-block;
          padding: 0 5px;
          font-size: 18px;
          font-style: normal;
        }
      }
    }

    .btn_group {
      text-align: center;

      button {
          width: 120px;
        margin-right: 20px;
      }
    }
    .el-form-item__content {
      .el-upload-list__item img {
        width: 100%;
        // max-width: 100%;
        // height: auto;
        // border-radius: 0;
        // border: 0;
        // padding: 0;
        // margin: 0;
      }
    }
    .upload-demo {
      line-height: 25px;
    }
  }
}

</style>
<style lang="scss">
.hide .el-upload--picture-card {
  display: none;
}
.enterpriseCertification_info .el-upload-list--picture-card .el-upload-list__item ,.enterpriseCertification_info .el-upload--picture-card{
    width: 130px;
    height: 110px;
    line-height: 110px;
}
.linkage {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  .el-form-item.linkageItem {
    min-width: 130px;

    .el-form-item__content {
      margin-left: 10px !important;
    }
  }

  .el-form-item.linkageItem:nth-child(2) {
    .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
</style>