<template>
  <div>
    <div class="modul1">
      <ul class="tap-btn">
        <li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">项目背景</li>
        <li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">项目特色</li>
      </ul>
    </div>
    <div class="tap-item-box">
      <div class="t-item2 con970" v-show="showIndex === 1">
        <news :data="newsData"></news>
      </div>
      <div class="t-item3" v-show="showIndex === 2">
        <div class="new-style">
          <div class="top-cont">
            <div class="left">
              <div class="txt">
                项目设计以学术导师+实践导师双导师制，以国际前沿+金融实操为内容设计导向，融多元培养手段为一体，旨在立足全球视野，扎根本土实践，从产业到金融，从学习到就业一站式、无缝衔接人才培养计划。
              </div>
            </div>
            <ul>
              <template v-for="(item, index) in projectFeatures">
                <li :key="index">
                  <div class="dis-b">
                    <div class="d"></div>
                    <div class="txt">{{ item.title }}</div>
                  </div>
                  <div class="dis-n">
                    <div class="title">{{ item.title }}</div>
                    <div class="txt" v-html="item.text"></div>
                  </div>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="content">
          <div class="title">面向人群</div>
          <div class="txt-box">
            <div class="pp1">1.全日制本硕就读于中国985大学</div>
            <div class="pp1">2.在读全日制硕士研究生研一、研二的学生</div>
            <div class="pp1">3.本硕就读专业背景为非金融/财经类专业</div>
          </div>
        </div>
        <div class="zs-cont">
          <img class="new-img" src="https://zws-imgs-pub.ezijing.com/static/public/5a12d8046451cb9ad751aa6af19b18c2.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cAction from '@action'
import news from '@/components/news/news.vue'
export default {
  components: {
    news
  }, 
  data() {
    return {
      projectFeatures: [
        {
          title: '项目学制',
          text: '学制18个月'
        },
        {
          title: '授课方式',
          text: '线上：紫荆/KELLEY商学院学习平台 线下：北京、上海、深圳'
        },
        {
          title: '课程语言',
          text: '中方课程为五道口教授和业界金融专家中文授课<br/>美方课程为美国印第安纳大学Kelley商学院教授英文授课'
        },
        {
          title: '招生人数',
          text: '2021年计划招收中国大陆地区考生200人'
        },
        {
          title: '主要上课地点',
          text: '线上：紫荆/KELLEY商学院学习平台<br/>线下：北京、上海、深圳'
        },
        {
          title: '开学日期',
          text: '每年6月、11月'
        },
        {
          title: '获得证书',
          text: '清控紫荆教育结业证书<br/>Kelley商学院学位证书'
        }
      ],
      newsData: [],
      showIndex: 1
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    tap(n) {
      this.showIndex = n
    },
    getData() {
      const requestType = [
        {
          name: '紫荆教育',
          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img1.fc81eacb.png'
        },
        {
          name: 'Kelley商学院',
          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img1.fc81eacb.png'
        },
        {
          name: '联合培养背景',
          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img1.fc81eacb.png'
        }
      ]
      requestType.map((item, index) => {
        this.request(item, index)
      })
    },
    request(item, index) {
      cAction.reportAction.getContent(item.name).then(json => {
        this.newsData.push({
          id: index,
          title: item.name,
          content: json === null ? '' : json[0].content,
          image: item.image
        })
        this.newsData = this.newsData.sort((a, b) => a.id - b.id)
      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.con970{
  width: 970px;
  margin: 0 auto;
}
.modul1{
  position: relative;
  width: 100%;
  height: 190px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
  background-size: cover;
  .tap-btn{
    width: 970px;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    display: flex;
    li{
      width: 128px;
      height: 36px;
      background: #BF0927;
      margin-right: 2px;
      font-size: 16px;
      line-height: 36px;
      text-align: center;
      color: #fff;
      &.active{
        color: #BF0927;
        background: #fff;
      }
    }
  }
}
.tap-item-box{
  .t-item1{
    li{
      border-bottom: 1px solid #CCCCCC;
      padding: 30px 0 40px;
      display: flex;
      .info{
        .img{
          background: #F5F7F8;
          padding: 21px;
          img{
            width: 178px;
            height: 248px;
            display: block;
          }
        }
        p{
          width: 100%;
          color: #000;
          font-size: 14px;
          line-height: 30px;
          margin: 0;
          text-align: center;
          &.name{
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
      .msg{
        margin-left: 30px;
        .title{
          font-size: 23px;
          color: #000;
          line-height: 32px;
        }
        p{
          margin-top: 28px;
          line-height: 30px;
          color: #000;
          font-size: 14px;
        }
      }
    }
  }
  .new-items{
    display: flex;
  }
  .child-tabs{
    width: 670px;
    margin-bottom: 40px;
  }
  .t-item2{
    // display: flex;
    padding: 60px 0;
    .article{
      width: 670px;
      .title{
        line-height: 100%;
        font-size: 23px;
        font-weight: bold;
      }
      .t2{
        line-height: 25px;
        font-size: 18px;
        font-weight: bold;
        margin-top: 5px;
      }
      .txt{
        padding-top: 30px;
        p{
          line-height: 30px;
          font-size: 14px;
          color: #000;
          // text-indent: 2em;
          &.martop{
            margin-top: 30px;
          }
        }
      }
    }
    .right-img{
      position: relative;
      margin-left: auto;
    }
    .photo{
      position: relative;
      z-index: 9;
      width: 235px;
      height: 300px;
      display: flex;
      position: relative;
    }
    .line{
      position: absolute;
      top: 35px;
      right: 35px;
      width: 213px;
      height: 280px;
      border: 1px solid #979797;
    }
  }
  .t-item3{
    padding-top: 60px;
    position: relative;
    .t1{
      line-height: 32px;
      font-size: 23px;
      font-weight: bold;
    }
    .t2{
      margin-top: 5px;
      line-height: 25px;
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 30px;
    }
    .new-img{
      width: 891px;
      margin: 0 auto 60px auto;
      display: block;
      // position: absolute;
      // top: 60px;
      // left: 50%;
      // -webkit-transform: translateX(-50%);
    }
    ul{
      li{
        padding: 40px 0;
        .con970{
          overflow: hidden;
        }
        img{
          display: block;
          width: 140px;
          height: 140px;
          float: left;
        }
        .wenb{
          float: left;
          width: 510px;
          .title{
            font-size: 18px;
            font-weight: bold;
            color: #262626;
            line-height: 25px;
            margin-bottom: 25px;
          }
          p{
            margin-bottom: 10px;
            font-size: 14px;
            color: #2B2B2B;
            line-height: 20px;
          }
        }
        &.type-l{
          background: #F3F3F3;
          img{
            margin-right: 60px;
          }
        }
        &.type-r{
          .con970{
            justify-content: right;
          }
          img{
            float: right;
          }
          .wenb{
            text-align: right;
            margin-right: 60px;
            float: right;
          }
        }
      }
    }
  }
}
.new-style{
  padding-bottom: 60px;
  .top-cont{
    width: 970px;
    margin: 0 auto;
    display: flex;
    .left{
      width: 434px;
      height: 496px;
      background: url(https://zws-imgs-pub.ezijing.com/static/public/9ca050bb75b08a232433f570bcac652d.png);
      background-size: 100% 100%;
      .txt{
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 29px;
        width: 353px;
        margin: 180px auto 0;
        text-indent: 2em;
      }
    }
    ul{
      margin-left: auto;
      li{
        transition: all .5s;
        width: 464px;
        height: 50px;
        background: #F1F2F3;
        padding: 0;
        margin-bottom: 14px;
        &.br{
          &:hover{
            height: 163px;
          }
        }
        &:hover{
          height: 143px;
          background: #D83C56;
          .dis-b{
            display: none;
          }
          .dis-n{
            display: block;
          }
        }
        .dis-b{
          display: flex;
          align-items: center;
          height: 100%;
          .d{
            width: 8px;
            height: 8px;
            background: #BF0927;
            margin-left: 30px;
            border-radius: 50%;
          }
          .txt{
            font-size: 18px;
            color: #BF0927;
            line-height: 25px;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .dis-n{
    margin-left: 50px;
    display: none;
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 33px;
      padding-top: 30px;
      margin-bottom: 36px;
    }
    .txt{
      font-size: 14px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 20px;
    }
  }
}
.content{
  position: relative;
  width: 100%;
  height: 350px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/3ec70f7e95c722cc38d5b38749768b87.png);
  background-size: 100% 100%;
  .title{
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 33px;
    padding-top: 60px;
    text-align: center;
  }
  .p1{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 20px;
    margin-top: 10px;
  }
  .box-cont{
    width: 1000px;
    height: 155px;
    border: 1px solid rgba(216,60,86,.5);
    // border: 1px solid #D83C56;
    margin: 35px auto 0;
    position: relative;
    .le-tj{
      position: absolute;
      top: 0;
      left: 0;
      width: 198px;
      height: 155px;
      background: rgba(255,255,255,.2);
      font-size: 18px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 155px;
      text-align: center;
    }
    // .txt-box{
    //   position: absolute;
    //   top: 0;
    //   left: 50%;
    //   -webkit-transform: translateX(-50%);
    //   padding-top: 33px;
    //   .pp1{
    //     font-size: 14px;
    //     font-weight: bold;
    //     color: #FFFFFF;
    //     line-height: 20px;
    //     margin-bottom: 15px;
    //   }
    // }
  }
  .txt-box{
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    padding-top: 33px;
    .pp1{
      font-size: 20px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 20px;
      margin-bottom: 30px;
    }
  }
}
.zs-cont{
  padding-top: 60px;
}
</style>