<template>
  <div class="container">
    <div class="infos width1200">
      <header class="headers">
        <span @click="setActive(0)"
              :class="{active: active === 0}">考级生命周期</span>
        <span @click="setActive(1)"
              :class="{active: active === 1}">生源拓展</span>
        <span @click="setActive(2)"
              :class="{active: active === 2}">高效管理</span>
        <span @click="setActive(3)"
              :class="{active: active === 3}">节省成本</span>
        <span @click="setActive(4)"
              :class="{active: active === 4}">零投入使用</span>
      </header>
      <div class="content">
        <transition name="fade">
          <template v-if="active === 0">
            <div>
              <p class="desc first">信息化赋能打造<strong>全流程线上考级模式</strong><br />随时随地保证用户数据安全，<strong>打破时间空间限制</strong>将考级生命周期完整呈现</p>
              <lifecycle />
            </div>
          </template>
        </transition>
        <transition name="fade">
          <template v-if="active === 1">
            <div>
              <p class="desc">招考<strong>不受地域限制</strong>，支持多层级代理单位，拓展生源</p>
              <viewmap />
            </div>
          </template>
        </transition>
        <transition name="fade">
          <template v-if="active === 2">
            <div>
              <p class="desc">考级全流程节点跟进，<strong>极大提升管理效率</strong></p>
              <efficient />
            </div>
          </template>
        </transition>
        <transition name="fade">
          <template v-if="active === 3">
            <div>
              <p class="desc">线上化招考流程极大<strong>节省考级成本</strong></p>
              <safe />
            </div>
          </template>
        </transition>
        <transition name="fade">
          <template v-if="active === 4">
            <div>
              <p class="desc"><strong>零投入</strong>，平台研发完善可立即使用</p>
              <zero />
            </div>
          </template>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import viewmap from '@/components/map'
import lifecycle from '@/components/lifecycle'
import safe from '@/components/safe'
import efficient from '@/components/efficient'
import zero from '@/components/zero'

export default {
  name: 'infos',
  components: {
    viewmap,
    lifecycle,
    safe,
    efficient,
    zero,
  },
  data () {
    return {
      active:  0
    }
  },
  methods: {
    setActive (index) {
      this.active = index
    }
  }
}
</script>
<style lang="less" scoped>
.fade-enter {
  visibility: hidden;
  opacity: 0;
}
.fade-leave-to {
  display: none;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-to,
.fade-leave {
  visibility: visible;
  opacity: 1;
}
.container {
  height: 958px;
  background-color: #f6f7f9;
}
.desc {
  position: relative;
  font-size: 16px;
  line-height: 30px;
  color: #696969;
  display: inline-block;
  margin: 50px 0;
  > strong {
    color: #2dc7aa;
    font-weight: normal;
  }
  &.first::before {
    left: 105px;
  }
  &::before {
    top: -8px;
    left: -25px;
    position: absolute;
    display: block;
    content: "";
    background: url("../images/icon.png") no-repeat center;
    background-size: cover;
    width: 40px;
    height: 40px;
  }
}
.infos {
  min-height: 500px;
  .headers {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    padding-top: 50px;
    border-bottom: 2px solid #eaeaea;
    > span {
      margin-left: 50px;
      color: #242424;
      cursor: pointer;
      display: inline-block;
      padding: 10px 15px;
      text-decoration: none;
      position: relative;
      // display: block;
      text-decoration: none;
      text-transform: uppercase;
      transition: 0.5s;
      font-size: 18px;
      &::after {
        position: absolute;
        content: "";
        top: 145%;
        left: 12%;
        width: 80%;
        height: 2px;
        background-color: #2dc7aa;
        z-index: 100;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s;
      }
      &.active {
        color: #2dc7aa;
        &::after {
          transform: scaleX(1);
          transform-origin: left;
        }
      }
    }
  }
  // .content {
  // }
}
</style>
