txyx_pc/src/pages/courseResources.vue

<template>
  <common-header/>
  <div class="courseResources">
    <div class="courseResourcesCont">

      <div class="baseTop">
        <p>课程资源，搜索一下</p>
        <div class="searchValue">
          <input type="text" placeholder="搜索关键字" v-model="searchKey" >
          <div class="searchBtn">
            <img src="/kczy/searchIcon.png" alt="">
          </div>
        </div>
        <div class="littleTab">
          <ul>
            <li>微课|</li>
            <li>教案|</li>
            <li class="active">课件|</li>
            <li>微视频| </li>
            <li>网络资源</li>
          </ul>
        </div>
      </div>
      
      <CourseType :transBaseData="baseData" @toParentDetail="toDetail" @baseCourseAll="baseCourseAll"></CourseType>
      <CourseType :transBaseData="famousBaseData" @toParentDetail="toDetail"></CourseType>
      <CourseType :transBaseData="resourceBaseData" @toParentDetail="toDetail"></CourseType>
      <CourseType :transBaseData="familyBaseData" @toParentDetail="toDetail"></CourseType>
      <CourseType :transBaseData="specialBaseData" @toParentDetail="toDetail"></CourseType>
      <CourseType :transBaseData="extendBaseData" @toParentDetail="toDetail"></CourseType>
    </div>
  </div>
</template>

<script>
  import CourseType from '../components/CourseType.vue'
  import commonHeader from "@/components/header/index.vue";
  export default {
    name: 'courseResources',
    components:{
      CourseType,
      commonHeader
    },
    data() {
      return {
        searchKey: '',
        num:0,
        baseData: {
          id:"baseCourse",
          mainTitle: '基础课程',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              id: 'base_1',
              img: '/kczy/singlePic1.png',
              title: '野天鹅',
              starNum: 5,
              collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              id:'base_2',
              img: '/kczy/singlePic2.png',
              title: '安徒生世界插画',
              starNum: 5,
              collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              id:'base_3',
              img: '/kczy/singlePic3.png',
              title: '传送门',
              starNum: 5,
              collectNum: '10w+',
              zanNum:'14w+'
            }
          ]
        },
        famousBaseData: {
          id:"famousCourse",
          mainTitle: '名师在线',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              img: '/kczy/singlePic4.png',
              title: '书中花园',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic5.png',
              title: '拇指姑娘',
              starNum: 4,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic3.png',
              title: '传送门',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic2.png',
              title: '安徒生世界插画',
              starNum: 1,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic1.png',
              title: '野天鹅',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic5.png',
              title: '拇指姑娘',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            }
          ]
        },
        resourceBaseData: {
          id:"resourceCourse",
          mainTitle: '课程资源',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              img: '/kczy/singlePic4.png',
              title: '书中花园',
              starNum:5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic5.png',
              title: '拇指姑娘',
              starNum: 4,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic3.png',
              title: '传送门',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic2.png',
              title: '安徒生世界插画',
              starNum:1,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic1.png',
              title: '野天鹅',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic5.png',
              title: '拇指姑娘',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            }
          ]
        },
        familyBaseData: {
          id:"familyCourse",
          mainTitle: '家庭教育',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              img: '/kczy/singlePic3.png',
              title: '传送门',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            },
          ]
        },
        specialBaseData: {
          id:"specialCourse",
          mainTitle: '特色课程',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              img: '/kczy/singlePic3.png',
              title: '传送门',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic4.png',
              title: '书中花园',
              starNum:5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
          ]
        },
        extendBaseData: {
          id:"extendCourse",
          mainTitle: '拓展课程',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              img: '/kczy/singlePic4.png',
              title: '书中花园',
              starNum:5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic5.png',
              title: '拇指姑娘',
              starNum: 4,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic3.png',
              title: '传送门',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic2.png',
              title: '安徒生世界插画',
              starNum:1,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic1.png',
              title: '野天鹅',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              img: '/kczy/singlePic5.png',
              title: '拇指姑娘',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            }
          ]
        },
      }
    },
    mounted() {
        
    },
  methods: {
      //暂时注释掉
      switchTab(index) {
        this.num = index;
      },
      //全部-查看更多
      baseCourseAll(markLable) {
        switch (markLable) {
          case 'baseCourse':
            this.$router.push('/resourceAll');
          break;
          default:
            this.$router.push('/resourceAll');
          
        }
      },
      //详情页
      toDetail(transParams) {
        console.log(transParams);

      },

  },
  }
</script>
<style scoped lang="scss">
.courseResources{
  width:100%;
  min-height: 1650px;
  background: url("/kczy/sourceBg.png") no-repeat left top;
  background-size: 100%;
  .courseResourcesCont{
    width: 1280px;
    margin: 0 auto;
    .baseTop{
      p{
        font-size: 48px;
        font-weight: 600;
        text-align: center;
        color: #000000;
        padding-top:60px;
      }
      .searchValue{
        width: 497px;
        height: 50px;
        margin:0 auto;
        background: #ffffff;
        border: 1px solid #00a3ff;
        border-radius: 8px;
        margin-top: 33px;
        overflow: hidden;
        position:relative;
        input{
          width:100%;
          height: 100%;
          outline: 0;
          box-sizing: border-box;
          padding-left: 10px;
        }
        .searchBtn{
          width: 26px;
          height: 26px;
          background: #00a3ff;
          border-radius: 6px;
          position: absolute;
          right:5px;
          top:50%;
          transform: translate(-50%,-50%);
          text-align: center;
          vertical-align: middle;
          cursor: pointer;
          img{
            display: block;
            text-align: center;
            margin: 6px auto 0;
          }
        }
      }
      .littleTab{
        width: 300px;
        margin: 0 auto;
        ul{
          margin-top:22px;
          display: flex;
          li{
            display: inline-block;
            font-size: 16px;
            font-weight: 400;
            text-align: left;
            color: #606565;
            margin-right: 5px;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
.active{
  color: #000000!important;
  font-weight: bold;
}
</style>