<template>
  <view class="course">
    <view class="head">
      <view class="head-top">
        <image src="/static/img/course/bg_head.png" mode="" />
      </view>
      <view class="title">
        <image class="img-title" src="/static/img/course/head_title.png" mode="aspectFill" />
      </view>
    </view>
    <view class="content">
      <view class="item" v-for="(item, index) in courseList" :key="index">
        <view class="item-info flex">
          <view class="left">
            <image class="image" :src="item.imgUrl" mode="aspectFill" />
          </view>
          <view class="right">
            <view class="info-title">{{ item.title }}</view>
            <view class="info-desc">{{ item.desc }}</view>
            <view class="info-btn">
              <button class="detail cu-btn block" @tap="navTo(item)">
                查看详情 <zd-arrow class="btn-arrow"></zd-arrow>
              </button>
            </view>
          </view>
        </view>
        <view class="line" v-if="index + 1 != courseList.length"></view>
      </view>
      <image class="book" src="/static/img/course/book.png" mode="aspectFill" />
      <image class="teach" src="/static/img/common/teach.png" mode="aspectFill" />
      <image class="path" src="/static/img/common/path1.png" mode="aspectFill" />
    </view>
  </view>
</template>

<script>
import ZdArrow from '@/components/zd-arrow/index';

export default {
  data() {
    return {
      courseList: [
        {
          title: '逻辑狗',
          desc: '幼儿思维游戏课程',
          imgUrl: require('@/static/img/course/course_01.png'),
          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=1&sn=39453b5cad367c8dd048efdecb2d3868&chksm=3eb1c96909c6407f825dbef1e54f5ed6a5f10f4027cea58714348bd7eb180347664cccccb800#rd',
          type: 'link',
        },
        {
          title: '中华小熊猫',
          desc: '中华文化思维游戏课程',
          imgUrl: require('@/static/img/course/course_02.png'),
          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=2&sn=a6511c18e667048b258bf79ac9909b4c&chksm=3eb1c96909c6407f1c5258ddb47a6df5ef0dce5f043da9774a6af913287ea3e652c0e7d84f0f#rd',
          type: 'link',
        },
        {
          title: '蚂蚁沙丘·与弗雷德一起探索',
          desc: '幼儿园情境科学课程',
          imgUrl: require('@/static/img/course/course_03.png'),
          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=3&sn=7f5cedae8f4d795f97a5562c7c1863ac&chksm=3eb1c96909c6407f9282b81d84be745f81e311d2168246a6877cdf8c93b5d705fa11541b5ef4#rd',
          type: 'link'
        },
        {
          title: '学习起跑线思维语言&思维数学',
          desc: '幼小衔接系列课程',
          imgUrl: require('@/static/img/course/course_04.png'),
          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503220137&idx=1&sn=32b69bfa877c2cd72ecc34016e2e0b7b&chksm=3eb1caae09c643b8faf5720c7e9e473285d438e428da2820b3c76643f34b4881cc317538d8ee#rd',
          type: 'link'
        }
      ]
    }
  },
  components: {
    ZdArrow
  },
  created() {

  },
  mounted() {

  },
  methods: {
    navTo(item) {
      if(item.type == 'link') {
        window.location.href  = item.path;
      }
    }
  }
}
</script>

<style lang="scss">
.course {
  background: url('@/static/img/common/bg.png') no-repeat #01A2E8;
  background-size: cover;
  padding-bottom: 116upx;
  .head-top {
    image {
      width: 100%;
      height: 100upx;
    }
  }
  .title {
    text-align: center;
    .img-title {
      width: 554upx;
      height: 124upx;
      vertical-align: middle;
    }
  }
  .content {
    position: relative;
    background: url('@/static/img/course/course_bg.png') no-repeat #01A2E8;
    background-size: cover;
    height: 1218upx;
    width: 714upx;
    padding: 92upx 68upx 0 42upx;
    margin: 108upx auto 0;
    .item {
      .left {
        margin-right: 10upx;
        .image {
          width: 214upx;
          height: 202upx;
          vertical-align: middle;
        }
      }
      .right {
        padding-top: 20upx;
        .info-title {
          font-size: 36upx;
          font-family: HelloFont-WenYiHei, HelloFont;
          font-weight: normal;
          color: #050505;
          line-height: 46upx;
          letter-spacing: 1upx;
        }
        .info-desc {
          font-size: 26upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 36upx;
          margin: 6upx 0 28upx;
        }
        .info-btn {
          .detail {
            height: 56upx;
            width: 228upx;
            border-radius: 34upx;
            border: 2upx solid #333333;
            background: #FFFFFF;

            font-size: 26upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #04040A;
            line-height: 36upx;
            // filter: blur(10upx);
          }
          .btn-arrow {
            margin-left: 8upx;
          }
        }
      }
      .line {
        height: 2upx;
        background: rgba(153, 153, 153, 0.5);
        margin: 20upx 0 18upx 24upx;
      }
    }
    .book {
      position: absolute;
      width: 114upx;
      height: 128upx;
      vertical-align: middle;
      left: -18upx;
      top: 8upx;
      transform: translateY(-100%);
    }
    .path {
      position: absolute;
      bottom: -48upx;
      right: 138upx;

      width: 30upx;
      height: 26upx;
      vertical-align: middle;
    }
    .teach {
      position: absolute;
      width: 140upx;
      height: 98upx;
      vertical-align: middle;
      right: -18upx;
      top: 10upx;
      transform: translateY(-100%);
    }

  }
}
</style>
