<template>
  <!-- 我的课程 -->
  <el-card>
    <div class="myCourse">
      <el-row :gutter="20">
        <el-col
          :span="8"
          v-for="item in courseData"
          :key="item.name"
          @click="goToPage(item.url)"
        >
          <div class="item" :style="{ background: item.bgColor }">
            <img :src="item.img" alt="" />
            <div>
              <div style="color: #050026; font-size: 16px; margin-bottom: 10px">
                {{ item.name }}
              </div>
              <div class="pro">{{ item.pro }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      courseData: [
        {
          name: "名师优课",
          bgColor: "rgba(253, 180, 4, 0.1)",
          pro: "网络视频直播的核心思想是利用既有的 局域网、城域网甚至是万维网……",
          img: "/images/personal/course2.png",
          url: "wlzb_xszy",
        },

        {
          name: "课程资源",
          bgColor: "rgba(61, 115, 247, 0.1)",
          pro: "就是一切能够运用到教学活动中的各 种条件和材料",
          img: "/images/personal/course6.png",
          url: "kczy_xszy",
        },
      ],
    };
  },
  methods: {
    goToPage(url) {
      console.log(url);
      this.$router.push({ name: url });
    },
  },
};
</script>

<style lang="scss" scoped>
.myCourse {
  min-height: 400px;

  .switch {
    display: inline-block;
    margin-bottom: 35px;
    border: 1px solid #dbe7ec;
    padding: 3px;
    border-radius: 12px;

    .switchDiv {
      display: flex;

      .list {
        cursor: pointer;
        color: #666;
        line-height: 36px;
        padding: 0 10px;

        &.active {
          background: #e8f3fa;
          color: #000;
          border-radius: 12px;
        }
      }
    }
  }

  .el-col {
    margin-bottom: 25px;
  }

  .item {
    border-radius: 8px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: all linear 0.1s;

    img {
      margin-right: 10px;
    }

    .pro {
      color: #9d9ab9;
      font-size: 14px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 42px;
    }

    &:hover {
      box-shadow: 0 0 5px 2px rgba($color: #699eed, $alpha: 0.5);
    }
  }
}
</style>
