<template>
  <div>
    <div class="topBanner">
      <!-- <img src="@/assets/images/topBanner.png"
           alt=""
           width="100%"> -->
      <div class="width1200 goinWrap">
        <div class="goinBox"
             @click="showForm = true">立即入驻</div>
      </div>

    </div>
    <div class="inner width1200">
      <div class="goodList">
        <div class="listItem">
          <img src="@/assets/images/good2.png"
               alt="">
          <p class="title">生源拓展</p>
          <p class="subTitle">线上化招考全流程<br /> 不受地域限制扩张生源地</p>
        </div>
        <div class="listItem">
          <img src="@/assets/images/good1.png"
               alt="">
          <p class="title">高效管理</p>
          <p class="subTitle">覆盖考级生命周期<br /> 极大的提升管理效率</p>
        </div>
        <div class="listItem">
          <img src="@/assets/images/good3.png"
               alt="">
          <p class="title">节省成本</p>
          <p class="subTitle">全线上运营模式<br /> 节省支出成本</p>
        </div>
      </div>
      <div class="titleWrap">
        <img src="@/assets/images/title1.png"
             width="100%"
             alt="">
      </div>
      <div class="suggest">
        <div class="suggestList">
          <div class="suggestItem "
               :class="suggestIndex ===1?'active':''"
               @mouseover="suggestIndex=1">
            <div class="suggestTitle">在线报名</div>
            <div class="msg"
                 style="width:200px">考生在线报名，考级信息一手掌握</div>
          </div>
          <div class="suggestItem"
               :class="suggestIndex ===2?'active':''"
               @mouseover="suggestIndex=2">
            <div class="suggestTitle">高品质直播考场</div>
            <div class="msg"
                 style="width:200px">高保真、高品质的音视频输出， 最大限度还原真实考场</div>
          </div>
          <div class="suggestItem"
               :class="suggestIndex ===3?'active':''"
               @mouseover="suggestIndex=3">
            <div class="suggestTitle">在线录播</div>
            <div class="msg"
                 style="width:200px">录播考试兼容各种考试场景</div>
          </div>
        </div>
        <div class="suggestImgList">
          <div class="suggestImg"
               v-show="suggestIndex ===1">
            <img src="@/assets/images/phone1.png"
                 alt=""
                 width="100%">
          </div>
          <div class="suggestImg"
               v-show="suggestIndex ===2">
            <img src="@/assets/images/phone2.png"
                 alt=""
                 width="100%">
          </div>
          <div class="suggestImg"
               v-show="suggestIndex ===3">
            <img src="@/assets/images/phone3.png"
                 alt=""
                 width="100%">
          </div>
        </div>
      </div>
    </div>
    <div class="inner2">
      <div class="width1200">
        <div class="titleWrap">
          <img src="@/assets/images/title2.png"
               width="100%"
               alt="">
        </div>
        <div class="suggest">
          <div class="suggestList"
               style="width:700px;">
            <div class="suggestItem"
                 :class="mapIndex ===1?'active':''"
                 @mouseover="mapIndex=1">
              <div class="suggestTitle">考级生命周期</div>
              <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
            </div>
            <div class="suggestItem "
                 :class="mapIndex ===2?'active':''"
                 @mouseover="mapIndex=2">
              <div class="suggestTitle">生源拓展</div>
              <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
            </div>

          </div>
          <div class="suggestImgList">
            <div class="suggestImg"
                 v-show="mapIndex ===2">
              <img src="@/assets/images/map.png"
                   alt=""
                   width="100%">
              <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
            </div>
            <div class="suggestImg"
                 v-show="mapIndex ===1">
              <img src="@/assets/images/map1.png"
                   alt=""
                   width="1092">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="inner width1200 inner3">
      <div class="titleWrap">
        <img src="@/assets/images/title3.png"
             width="100%"
             alt="">
      </div>
      <div class="suggest"
           style="margin-top:40px">
        <div class="suggestList">
          <div class="suggestItem "
               :class="onlineIndex ===1?'active':''"
               @mouseover="onlineIndex=1">
            <div class="suggestTitle">直播互动</div>
            <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
          </div>
          <div class="suggestItem"
               :class="onlineIndex ===2?'active':''"
               @mouseover="onlineIndex=2">
            <div class="suggestTitle">在线评审</div>
            <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
          </div>
        </div>
        <div class="suggestImgList"
             style="margin-top:40px">
          <div class="suggestImg"
               v-show="onlineIndex ===1">
            <img src="@/assets/images/look.png"
                 alt=""
                 width="712px">
            <p class="mapMsg">直播考试<span>视频互动</span>，还原线下考场真实氛围</p>
          </div>
          <div class="suggestImg"
               v-show="onlineIndex ===2">
            <img src="@/assets/images/look1.png"
                 alt=""
                 width="712px">
            <p class="mapMsg">考官<span>在线评审</span>，考级视频<span>录像回放</span> ，最大限度保证考试公正</p>
          </div>
        </div>
      </div>
    </div>
    <div class="inner inner4">
      <!-- <img src="@/assets/images/index-bg.png"
           width="100%"
           alt=""> -->
      <div class="textwrap">
        <h2>技术赋能考级，为行业带来崭新一页</h2>
        <p class="desc">酷乐秀是武汉市景明云乐网络科技有限公司专为全国音乐等级考试和音乐类比赛研发的服务平台。为合作机构提供远程视频直播、录播考级的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。同步还原线下考级场景，让合作机构和考生公平公正，省时省力的通过酷乐秀实现考级完整生命周期。</p>
        <div class="cardList">
          <div class="cardItem">
            <img src="@/assets/images/card1.png"
                 width="110px"
                 height="88px"
                 alt="">
            <h4>技术保障</h4>
            <p>资深技术团队开发</p>
          </div>
          <div class="cardItem">
            <img src="@/assets/images/card2.png"
                 width="110px"
                 height="88px"
                 alt="">
            <h4>深度融合</h4>
            <p>全面深入音乐教育行业</p>
          </div>
          <div class="cardItem">
            <img src="@/assets/images/card3.png"
                 width="110px"
                 height="88px"
                 alt="">
            <h4>节省成本</h4>
            <p>全线上运营模式节省支出成本</p>
          </div>
        </div>
      </div>

    </div>
    <silder :showForm='showForm'
            @changeStatus='changeStatus' />

  </div>
</template>
<script>
import silder from '@/components/silder.vue'
export default {
  components: {
    silder
  },
  data () {
    return {
      suggestIndex: 1,
      mapIndex: 1,
      onlineIndex: 1,
      showForm: false

    }
  },
  methods: {
    changeStatus (val) {
      this.showForm = val;
    }
  }
}
</script>
<style lang="less" scoped>
img {
  vertical-align: middle;
}
.topBanner {
  background: url("../../assets/images/topBanner.png") center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 465px;
  .goinWrap {
    position: relative;
    height: 465px;
    .goinBox {
      width: 150px;
      height: 44px;
      background: #2dc7aa;
      border-radius: 4px;
      line-height: 44px;
      font-size: 16px;
      color: #ffffff;
      position: absolute;
      left: 0;
      bottom: 167px;
      cursor: pointer;
      &:hover {
        background-color: #2ac0a3;
      }
    }
  }
}
.inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  .goodList {
    margin-top: 92px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 1062px;
    .listItem {
      padding: 33px 80px 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 320px;
      height: 350px;
      background: #ffffff;
      cursor: pointer;
      border-radius: 8px;
      border: 1px solid #dedede;
      img {
        border-radius: 4px;
      }
      &:hover {
        box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.06);
      }
      .title {
        margin: 13px 0;
        height: 33px;
        font-size: 24px;
        font-weight: 500;
        color: #2c2c2c;
        line-height: 33px;
        font-weight: 500;
        width: 180px;
      }
      .subTitle {
        font-weight: 400;
        color: #788393;
        line-height: 20px;
        font-size: 14px;
        width: 180px;
      }
    }
  }
  .titleWrap {
    margin-top: 85px;
  }
}
.suggest {
  margin-top: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // width: 740px;
  .suggestList {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    // margin-bottom: 71px;
    .suggestItem {
      width: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      .suggestTitle {
        height: 38px;
        line-height: 38px;
        font-size: 22px;
        color: #2c2c2c;
        margin-bottom: 28px;
        border-radius: 4px;
        display: inline-block;
        padding: 0 21px;
      }
      .msg {
        color: #788393;
        line-height: 24px;
        font-size: 15px;
      }
    }
    .suggestItem.active {
      .suggestTitle {
        height: 38px;
        line-height: 38px;
        font-size: 22px;
        color: #fff;
        margin-bottom: 28px;
        background-color: #2dc7aa;
      }
    }
  }
}
.inner2 {
  background: #f6f7f9;
  padding-bottom: 150px;
  .width1200 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .titleWrap {
    padding-top: 84px;
  }
}
.mapMsg {
  margin-top: 73px;
  color: #333;
  font-size: 16px;
  span {
    color: #2dc7aa;
  }
}
.inner3 {
  padding-bottom: 190px;
}
.inner4 {
  background: url("../../assets/images/index-bg.png") center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
  height: 900px;
  .textwrap {
    position: absolute;
    width: 1074px;
    top: 132px;
    left: 50%;
    margin-left: -537px;
    text-align: left;
    h2 {
      font-size: 34px;
      margin-bottom: 66px;
      text-align: center;
      font-weight: 400;
    }
    .desc {
      line-height: 44px;
      font-size: 18px;
      text-indent: 36px;
    }
    .cardList {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 100px;
      width: 1020px;
      .cardItem {
        width: 312px;
        height: 298px;
        background: #ffffff;
        box-shadow: 0px 7px 9px 0px rgba(107, 107, 107, 0.11);
        border-radius: 6px;
        border: 1px solid #d1d1d1;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          margin-top: 50px;
        }
        h4 {
          color: #2c2c2c;
          font-size: 24px;
          line-height: 33px;
          margin-bottom: 14px;
          font-weight: 500;
        }
        p {
          color: #788393;
          font-size: 14px;
        }
      }
    }
  }
}
</style>