<template>
  <div class="container">
    <div class="topBanner">
      <div class="width1200">
        <div class="btnWrap">
          <img src="@/assets/images/project/ios.png"
               @click="openIos"
               width="136px"
               height="40px"
               alt="">
          <img src="@/assets/images/project/ard.png"
               width="136px"
               height="40px"
               @click="openArd"
               alt="">
          <el-popover placement="top"
                      trigger="hover"
                      popper-class="Mopopver">
            <div>
              <div class="code-item">
                <img src="@/assets/images/download.png"
                     width="111px"
                     height="111px"
                     alt />
                <p>扫码下载APP</p>
              </div>
            </div>
            <div class="silderItem"
                 slot="reference">
              <img class="code"
                   src="@/assets/images/project/2code.png"
                   width="23px"
                   height="23px"
                   alt="">
            </div>
          </el-popover>

        </div>
      </div>

    </div>
    <div class='projectWrap'
         v-if="activeRow">
      <div class="projectList width1200">
        <div class="left">
          <div class="projectInfoWrap">
            <section>
              <p class="title">酷乐秀考生APP <i class="el-icon-arrow-right"></i></p>
              <p v-for="(item,index) in vaidoJson.app"
                 :key="index"
                 :class="activeRow.id===item.id?'active':''"
                 @click='activeRow = item'>{{item.title}} </p>

            </section>
            <section>
              <p class="title">酷乐秀管理端 <i class="el-icon-arrow-right"></i></p>
              <p v-for="(item,index) in vaidoJson.admin"
                 :key="index"
                 :class="activeRow.id===item.id?'active':''"
                 @click='activeRow = item'>{{item.title}}</p>
            </section>
            <section>
              <p class="title">酷乐秀评委端 <i class="el-icon-arrow-right"></i></p>
              <p v-for="(item,index) in vaidoJson.teacher"
                 :key="index"
                 :class="activeRow.id===item.id?'active':''"
                 @click='activeRow = item'>{{item.title}}</p>
            </section>

          </div>
        </div>
        <div class="right">
          <h2>{{activeRow.title}}</h2>
          <video :src="activeRow.src"
                 :width="activeRow.width"
                 autoplay
                 controls
                 loop></video>
        </div>
      </div>
    </div>

    <silder />
  </div>
</template>
<script>
import { vaidoJson } from './video'
import "@/animate/animate.min.css"
import silder from '@/components/silder.vue'
export default {
  components: { silder },
  data () {
    return {
      activeNum: 1,
      vaidoJson,
      activeRow: null
    }
  },
  mounted () {
    this.activeRow = vaidoJson.app[0]
  },
  methods: {
    change (num) {
      this.activeNum = num;
    },
    changeStatus () { },
    openIos () {
      window.open('https://apps.apple.com/cn/app/%E9%85%B7%E4%B9%90%E7%A7%80/id1528132269', '_blank')
    },
    openArd () {
      window.open('https://sj.qq.com/myapp/detail.htm?apkName=com.jinmingyunle.colexiu', '_blank')
    }

  }
}
</script>
<style lang="less" >
.container {
  background-color: #f6f7f9;
}
.silderItem {
  .code {
    position: relative;
    top: 4px;
  }
}
.topBanner {
  background: url("../../assets/images/project/projectBanner.png") center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 470px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .btnWrap {
    width: 320px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    top: 257px;
    position: relative;
    img {
      cursor: pointer;
    }
  }
}
// .projectWrap {
//   margin: 24px 0;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   .tab {
//     display: flex;
//     flex-direction: row;
//     justify-content: space-around;
//     height: 76px;
//     line-height: 76px;
//     border-bottom: 1px solid #ccc;
//     font-size: 18px;
//     .tabItem {
//       cursor: pointer;
//       color: #808080;
//       text-decoration: none;
//       line-height: 76px;
//       height: 76px;
//       position: relative;
//       // display: block;
//       text-decoration: none;
//       text-transform: uppercase;
//       transition: 0.5s;
//       &::after {
//         position: absolute;
//         content: "";
//         top: 96%;
//         left: -10%;
//         width: 120%;
//         height: 2px;
//         background-color: #2dc7aa;
//         z-index: 100;
//         transform: scaleX(0);
//         transform-origin: right;
//         transition: transform 0.5s;
//       }
//       &:hover,
//       &.hover {
//         color: #1a1a1a;
//         font-weight: 600;
//       }
//       &:hover::after {
//         transform: scaleX(1);
//         transform-origin: left;
//       }
//     }
//     .tabItem.active {
//       color: #1a1a1a !important;
//       font-weight: 600;
//       &::after {
//         position: absolute;
//         content: "";
//         top: 96%;
//         left: -10%;
//         width: 120%;
//         height: 2px;
//         background-color: #2dc7aa;
//         z-index: 100;
//         transform: scaleX(1);
//         transform-origin: left;
//       }
//     }
//   }
// }
.videoList {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
  h2 {
    width: 820px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #788393;
    line-height: 29px;
  }

  .infoItem {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 704px;
    h3 {
      text-align: center;
      width: 100%;
    }
  }
}
.serversList {
  .serverItem {
    margin-top: 30px;
    h3 {
      margin-bottom: 30px;
      height: 40px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 40px;
    }
  }
}
// 新版本
.projectWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  section {
    border-top: 1px solid #dedede;
    &:nth-child(1) {
      border-top: none;
    }
  }
}
.projectList {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 80px 0 60px;
  .left {
    background-color: #fff;
    margin-right: 50px;
    width: 220px;
    border-top: none;
    .title {
      height: 70px;
      line-height: 70px;
      border-top: 1px solid #dedede;
      border-bottom: 1px solid #dedede;
      cursor: pointer;
      font-size: 20px;
      font-weight: 500;
      text-align: left;
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-weight: 600;
      color: #1a1a1a;
      &:nth-child(1) {
        border-top: none;
      }
      .el-icon-arrow-right {
        line-height: 70px;
      }
    }
    .active {
      background-color: #2dc7aa;
      color: #fff;
      font-size: 16px;
    }
    p {
      height: 60px;
      line-height: 60px;
      cursor: pointer;
      padding-left: 30px;
      text-align: left;
    }
  }
  .right {
    background-color: #fff;
    width: 800px;
    padding: 0 30px 30px;
    h2 {
      color: #1a1a1a;
      margin-bottom: 50px;
      line-height: 70px;
      text-align: left;
      font-size: 20px;
      border-bottom: 1px solid #dedede;
    }
  }
}
</style>