<template>

  <div class="box">
    <div class="card" v-for="(v, i) in videoList" :key="i" @click="toPath(v)">
      <div class="card_pic">
        <img :src="v.url" />
      </div>
      <div class="card_context">
        <div class="title">{{ v.title }}</div>
        <div class="group_font">{{ v.greyTitle }}</div>
      </div>

    </div>

  </div>

</template>

<script>
import videoList from '@/views/dayStudy/data2.json'
export default {

  data() {
    return {}
  },
  computed: {
    videoList() {
      return videoList

    },

  },
  methods: {
    toPath(val) {
      console.log(val)
      this.$router.push({
        name: 'video',
        query: {
          url: val.videoUrl,
        },
      })

    },

  },
}

</script>

<style lang="scss" scoped>
.box {

  padding-bottom: 30px;
  box-sizing: border-box;

  .card {
    width: 100vw;
    height: 535px;
    background-color: #fff;
    margin-bottom: 30px;

    .card_pic {
      height: 400px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .card_context {
      height: calc(535px - 400px);
      padding: 25px 50px 10px;
      box-sizing: border-box;
      display: flex;
      align-content: space-between;
      flex-wrap: wrap;

      .title {
        width: 100%;
        font-weight: bold;
        font-size: 32px;
      }
      .group_font {
        font-size: 28px;
        color: #999;
      }

    }

  }

}

</style>