<template>
  <div class="mian">
    <div class="content">
      <div class="title">我的考试</div>
      <div class="card-box">
        <ul>
          <li v-for="(item, index) in examinaList" :key="index" @click="popShow">
            <img :src="item.img" alt="">
            <div class="txt">{{ item.text }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="dialog" v-show="dialogVisible">
      <div class="click-pop" @click="popHide"></div>
      <div class="scroll" :style="{height:(popHeight-50)+'px'}">
        <div class="cont" :style="{height:(popHeight-130)+'px'}">
          <div class="tit">考试须知</div>
          <div class="text">省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿斯科利大数据的卢卡斯教练卡升级阿斯科利队将阿斯科利队将阿斯科利队将阿斯科利大数据的省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿</div>
          <div class="text">省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿斯科利大数据的卢卡斯教练卡升级阿斯科利队将阿斯科利队将阿斯科利队将阿斯科利大数据的省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿</div>
          <div class="text">省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿斯科利大数据的卢卡斯教练卡升级阿斯科利队将阿斯科利队将阿斯科利队将阿斯科利大数据的省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿</div>
          <div class="text">省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿斯科利大数据的卢卡斯教练卡升级阿斯科利队将阿斯科利队将阿斯科利队将阿斯科利大数据的省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿</div>
          <div class="video">
            <video controls>
              <source src="https://vdept.bdstatic.com/71333761636a4367614567696c315061/674742357854354a/cd6549f1c380f97b84f03a3d354ea61e810f2c7f2c2644154f46bede3d50c9c698415799bcaa6adf02c95b911a5c1c81.mp4?auth_key=1586753904-0-0-f9a698c12b3c67b53e25a2e362681483"
              type="video/mp4">
            </video>
          </div>
        </div>
        <div class="btn-block">
          <div>我已阅读，开始考试</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      popHeight: 0,
      dialogVisible: false,
      examinaList: [
        {
          img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          text: '模拟测试'
        },
        {
          img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          text: '模拟测试'
        }
      ]
    }
  },
  mounted () {
    this.setHeight()
  },
  methods: {
    setHeight () {
      const viewHeight = document.body.offsetHeight
      this.popHeight = viewHeight
    },
    popShow () {
      this.dialogVisible = true
    },
    popHide () {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.mian{
  padding: 40px;
  .content{
    background:rgba(255,255,255,1);
    border-radius:6px;
    padding: 0 40px;
    .title{
      color: #333333;
      font-size: 18px;
      line-height: 65px;
      border-bottom: 1px solid rgba(204,204,204,1);
    }
    .card-box{
      padding:40px 0;
      ul{
        margin: 0;
        padding: 0;
        overflow: hidden;
        li{
          float: left;
          width: 250px;
          height: 360px;
          margin-right: 40px;
          background:rgba(255,255,255,1);
          box-shadow:0px 2px 10px 0px rgba(0,0,0,0.2);
          border-radius:6px;
          overflow: hidden;
          list-style: none;
          margin-bottom: 40px;
          img{
            width:100%;
            height:295px;
            display: block;
          }
          .txt{
            line-height: 65px;
            color:rgba(41,148,234,1);
            font-size:18px;
            text-align: center;
          }
        }
      }
    }
  }
  .dialog{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background:rgba(0,0,0,0.3);
    z-index: 999999;
    .scroll{
      position:absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      border-radius:6px;
      overflow: hidden;
      z-index: 9;
    }
    .click-pop{
      position:absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .cont{
      width: 600px;
      padding: 20px 30px;
      background: #fff;
      overflow: scroll;
      .tit{
        text-align: center;
        font-size:30px;
        color:rgba(51,51,51,1);
        line-height: 100%;
        margin-bottom: 10px;
      }
      .text{
        font-size:14px;
        color:rgba(102,102,102,1);
        line-height:25px;
      }
      .video{
        width:100%;
        height:315px;
        background:rgba(0,0,0,1);
        border-radius:7px;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 15px;
        video{
          width: 100%;
          height: 100%;
        }
      }
    }
    .btn-block{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 52px;
      background: #fff;
      box-shadow: 0px -5px 30px rgba(237,240,238,0.7);
      padding-top: 13px;
      div{
        width: 206px;
        height: 41px;
        line-height: 41px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        margin: 0 auto;
        background: rgba(56,148,231);
      }
    }
  }
}

</style>
