zhaoshangyinziV3_UI/src/views/zhaoshang/Information/index.vue

<template>
  <div>

    <div class="addbox">
      <!-- 步骤条 -->
      <div class="steps">
        <div class="step" :class="{'finish':active>idx+1,'act':active==idx+1}" v-for="(ite,idx) in step" :key="idx" >
          <div class="tit flexc"><span>{{idx+1}}</span>{{ite.tit}}
            <div class="line"></div>
          </div>
          <div class="list" v-for="(aite,aidx) in ite.desc" :key="aidx">
            <span class="cir"></span>{{aite.tit}}
          </div>
        </div>
      </div>
      <!-- 标签页 -->
      <div class="tabs">
        <!-- <div class="flex1" style="overflow: hidden;"> -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane name="first">
                <div slot="label" class="tab flexc">
                  <img class="tabimg" v-if="activeName=='first'" src="@/assets/images/project/taba_.png"/>
                  <img class="tabimg" v-else src="@/assets/images/project/taba.png"/>
                  <span>签约环节
                  </span>
                </div>
                <first-info-form ref="firstInfo" :info="info"></first-info-form>
              </el-tab-pane>
              <el-tab-pane  name="second">
                <div slot="label" class="tab flexc">
                  <img class="tabimg" v-if="activeName=='second'" src="@/assets/images/project/tabb_.png"/>
                  <img class="tabimg" v-else src="@/assets/images/project/tabb.png"/>
                  <span>开工环节
                  </span>
                </div>
                <second-info-form ref="secondInfo" :info="info"></second-info-form>
              </el-tab-pane>
              <el-tab-pane  name="third">
                <div slot="label" class="tab flexc">
                  <img class="tabcimg" v-if="activeName=='third'" src="@/assets/images/project/tabc_.png"/>
                  <img class="tabcimg" v-else src="@/assets/images/project/tabc.png"/>
                  <span>建设环节
                  </span>
                </div>
                <third-info-form ref="thirdInfo" :info="info"></third-info-form>
                </el-tab-pane>
              <el-tab-pane  name="fourth">
                <div slot="label" class="tab flexc">
                  <img class="tabdimg" v-if="activeName=='fourth'" src="@/assets/images/project/tabd_.png"/>
                  <img class="tabdimg" v-else src="@/assets/images/project/tabd.png"/>
                  <span>投产环节
                  </span>
                </div>
                <fourth-info-form ref="fourthInfo" :info="info"></fourth-info-form>
                </el-tab-pane>
            </el-tabs>

           
        <!-- </div> -->


      </div>   
      
    </div>
  </div>
</template>

<script>
  import firstInfoForm from "./firstInfoForm"
  import secondInfoForm from "./secondInfoForm"
  import thirdInfoForm from "./thirdInfoForm"
  import fourthInfoForm from "./fourthInfoForm"
  export default{
    components:{
      firstInfoForm,secondInfoForm,thirdInfoForm,fourthInfoForm
    },
    data() {
      return{
        active:2,
        step:[
          {tit:'立项',desc:[{tit:'新建'},{tit:'审核'}]},
          {tit:'签约',desc:[{tit:'签约双方信息'},{tit:'签约项目信息'},{tit:'附件上传'}]},
          {tit:'开工',desc:[{tit:'开工前相关手续办理'},{tit:'开工信息'},{tit:'附件上传'}]},
          {tit:'建设',desc:[{tit:'建设信息'},{tit:'附件上传'}]},
          {tit:'投产',desc:[{tit:'投产信息'},{tit:'附件上传'}]},
          {tit:'完成',desc:[{tit:'提交'},{tit:'审核'}]},
        ],
        activeName:'first',
        // 表详细信息
        info: {}
      }
    },
    methods:{
      handleClick(){

      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep {
  .el-button{padding: 8px 14px;font-size: 14px;}
  .tabs{width: 100%;
    .el-button--small{background-color: #00A854;}

    .el-tabs__item{padding-right: 0;color: #666666;line-height: 45px;height: 45px;padding-left: 0;}
    .el-tabs__active-bar{background: #2777D0;}
    .is-active{color: #2777D0;font-weight: bold;}
  }

}
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.flex1{flex: 1;}
.addbox{padding: 14px 12px 25px;
  .steps{background: #FFFFFF;border-radius: 4px;padding: 30px 60px 24px 85px;display: flex;
    .step{flex-basis: 50%;position: relative;
      &.finish,&.act{
        .tit{color: #3D455B;
          span{background: #1890FF;color: #FFFFFF;border: none;}

        }
      }
      &.finish{
         .line{background-color: #1890FF !important;}
         .list{
           .cir{background: #00A854;}
         }
      }
      &:last-child{
        .line{display: none !important;}
      }
      .tit{font-weight: bold;font-size: 16px;color: #666666;margin-bottom: 10px;
        span{width: 24px;height: 24px;background: #FFFFFF;border-radius: 50%;border: 1px solid #DADADA;font-weight: bold;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;
font-size: 14px;color: #AAAAAA;margin-right: 12px;}
        .line{height: 2px;margin-left: 18px;margin-right: 18px;flex: 1;

background: #E6E6E6;}
      }
    }
    .list{font-weight: 500;font-size: 12px;color: #9B9B9B;line-height: 24px;padding-left: 8px;
      .cir{width: 8px;height: 8px;background: #BFBFBF;border-radius: 50%;display: inline-block;margin-right: 8px;}
    }
  }
}
.tabs{position: relative;
  .tab{padding: 0 21px;}
  .tabimg{width: 14px;height: 14px;margin-right: 8px;}
  .tabcimg{width: 13px;height: 13px;margin-right: 9px;}
  .tabdimg{width: 14px;height: 15px;margin-right: 8px;}
  .btns{height: 45px;border-bottom: 2px solid #dfe4ed;box-sizing: border-box;position: absolute;right: 0;top: 0;
  }
}
</style>