<template>
  <div class="container">
    <!-- 顶部搜素 -->
    <div class="searchhead">
      <div class="searchbox flexone">
        <div class="searchimg">
          <img src="../../../assets/search.png" alt />
        </div>

        <input
          type="text"
          placeholder="搜索你感兴趣的课程文章"
          class="searchtext"
        />
      </div>
    </div>
    <!-- 课程列表 -->
    <div class="courseitem flex">
      <div class="courseimg">
        <img src="../../../assets/courseimg.png" alt />
      </div>
      <div class="courseright">
        <div class="coursetitle">关于减肥，除了科学运动</div>
        <div class="zhibo flexone">
          <img src="../../../assets/zhibo.png" alt class="zhiimg" />
          <div class="zhiname">正在直播</div>
        </div>
        <div class="know flexone">
          <span class="morepeople">很多人不能正确理解减肥</span>
          <div class="knowmore">
            了解详情
            <img src="../../../assets/yourow.png" alt class="yourow" />
          </div>
        </div>
      </div>
    </div>
    <div class="courseitem flex">
      <div class="courseimg">
        <img src="../../../assets/courseimg.png" alt />
      </div>
      <div class="courseright">
        <div class="coursetitle">关于减肥，除了科学运动</div>
        <div class="zhibo flexone">
          <img src="../../../assets/ready.png" alt class="zhiimg" />
          <div class="zhiname">正在直播</div>
        </div>
        <div class="know flexone">
          <span class="morepeople">很多人不能正确理解减肥</span>
          <div class="knowmore">
            了解详情
            <img src="../../../assets/yourow.png" alt class="yourow" />
          </div>
        </div>
      </div>
    </div>

    <!-- 课程头部 -->
    <div class="coursenav flexone">
      <div
        class="coursenavleft"
        :class="selnav == 0 ? 'selactive' : ''"
        :data-id="0"
        @click="selectnav"
      >
        音频课程
      </div>
      <div
        class="coursenavleft"
        :class="selnav == 1 ? 'selactive' : ''"
        :data-id="1"
        @click="selectnav"
      >
        营养小知识
      </div>
    </div>
    <!-- 课程 -->
    <div class="coursebox" v-if="selnav == 0">
      <div class="courseboxitem">
        <div class="coursenameimg">
          <img src="../../../assets/course.png" alt />
        </div>
        <div class="coursetext">
          <div class="coursename">一个月减重20斤,健康减重没有副作用</div>
          <div class="courseteacher">讲师：孙俪</div>
        </div>
      </div>
      <div class="courseboxitem">
        <div class="coursenameimg">
          <img src="../../../assets/course.png" alt />
        </div>
        <div class="coursetext">
          <div class="coursename">一个月减重20斤,健康减重没有副作用</div>
          <div class="courseteacher">讲师：孙俪</div>
        </div>
      </div>
      <div class="courseboxitem">
        <div class="coursenameimg">
          <img src="../../../assets/course.png" alt />
        </div>
        <div class="coursetext">
          <div class="coursename">一个月减重20斤,健康减重没有副作用</div>
          <div class="courseteacher">讲师：孙俪</div>
        </div>
      </div>
      <div class="courseboxitem">
        <div class="coursenameimg">
          <img src="../../../assets/course.png" alt />
        </div>
        <div class="coursetext">
          <div class="coursename">一个月减重20斤,健康减重没有副作用</div>
          <div class="courseteacher">讲师：孙俪</div>
        </div>
      </div>
    </div>

    <!-- 营养小知识 -->
    <div class="coursebox" v-if="selnav == 1">
      <div class="courseboxitem">
        <div class="coursenameimg">
          <img src="../../../assets/knowlage.png" alt />
        </div>
        <div class="coursetext">
          <div class="coursename knowlagename">
            一个月减重20斤,健康减重没有副作用
          </div>
        </div>
      </div>
      <div class="courseboxitem">
        <div class="coursenameimg">
          <img src="../../../assets/knowlage.png" alt />
        </div>
        <div class="coursetext">
          <div class="coursename knowlagename">
            一个月减重20斤,健康减重没有副作用
          </div>
        </div>
      </div>
      <div class="courseboxitem">
        <div class="coursenameimg">
          <img src="../../../assets/knowlage.png" alt />
        </div>
        <div class="coursetext">
          <div class="coursename knowlagename">
            一个月减重20斤,健康减重没有副作用
          </div>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->

    <tabBar v-bind:active="0" />
  </div>
</template>

<script>
import tabBar from "@/components/views/tabBar.vue";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      selnav: 0
    };
  },
  methods: {
    selectnav(e) {
      this.selnav = e.currentTarget.dataset.id;
    }
  }
};
</script>

<style scoped>
@import "../../../style/course.css";
</style>