dy-admin-manager/src/views/teamBuild/index.vue

<template>
  <div class='m-container'>
    <div class="line"></div>
    <h2>
      <div class='squrt'></div> 建团申请
    </h2>
    <div class="m-core">
      <div class="stepbox">
        <span class='stepspan  stepspan1'
              @click="activeIndex=0">
          <div class="step1 sptep"
               :class="activeIndex >= 0?'activestep':''">
            基本信息
          </div>
          <img :src="activeIndex >= 0?stepImgs.nol:stepImgs.active"
               alt=""
               class="arrow">
        </span>
        <span class='stepspan  stepspan2'
              @click="activeIndex=1">
          <!--   -->
          <div class="step2 sptep"
               v-if="activeIndex>=1"
               :class="activeIndex >= 1?'activestep':''">
            声部费用
          </div>
          <img :src="activeIndex >= 1?stepImgs.nol:stepImgs.active"
               alt=""
               class="
               arrow">
        </span>
      </div>
      <!-- 下面显示的内容 -->
      <div class="stepcontent">
        <div v-show='activeIndex==0'>
          <teamBaseInfo @chiosetab='chiosetab' />
        </div>
        <div v-if='activeIndex==1'>
          <teamSoundMoney @chiosetab='chiosetab' />
        </div>
      </div>
      <!-- <el-tabs type="border-card"
               v-model="activeIndex">
        <el-tab-pane label="基本信息"
                     name='1'>
          <teamBaseInfo />
        </el-tab-pane>
        <el-tab-pane label="声部费用"
                     name='2'>
          <teamSoundMoney />
        </el-tab-pane>
      </el-tabs> -->
    </div>
  </div>
</template>
<script>
import teamBaseInfo from '@/views/teamBuild/components/teamBaseInfo'
import teamSoundMoney from '@/views/teamBuild/components/teamSoundMoney'
export default {
  components: { teamBaseInfo, teamSoundMoney },
  name: 'teamBuild',
  data () {
    return {
      activeIndex: '0',
      stepImgs: {
        nol: require('@/assets/images/base/step-arrow-active.png'),
        active: require('@/assets/images/base/step-arrow.png')
      }
    }
  },
  methods: {
    chiosetab (val) {
      this.activeIndex = val;
    }
  },
}
</script>
<style lang="scss" scoped>
.stepbox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .stepspan {
    cursor: pointer;
    font-size: 14px;
    display: block;
    line-height: 40px;
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .sptep {
      width: 110px;
      height: 40px;
      border: 1px solid #dcdfe6;
      border-right: none;
      border-bottom: none;
      padding-left: 25px;
      border-radius: 4px 0 0 0;
    }
    .arrow {
      height: 40px;
      width: 17px;
      position: relative;
      top: 1px;
    }
  }
  .stepspan.stepspan2 {
    position: relative;
    z-index: 10;
    left: -17px;
    padding-right: 33px;
    .sptep {
      padding-left: 30px !important;
      border-radius: 0 !important;
    }
  }
  .sptep.activestep {
    color: #fff;
    font-weight: bold;
    background-color: #4eada7;
  }
}
.stepcontent {
  border-top: 1px solid #dcdfe6;
  padding-top: 30px;
}
</style>