<template>
  <div class="pb_content">
    <div class="pb_content_body">
      <div class="body_student">
        <div class="student_head">
          <img src="../assets/banner.png" alt="" />
        </div>
        <div class="student_body">
          <div class="top">
            <div class="box_fk"></div>
            推荐课程
          </div>
          <div class="main_box">
            <div class="box_course">
              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel"><img src="../assets/robot.png" alt="" /></div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel"><img src="../assets/piano.png" alt="" /></div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel">
                <img src="../assets/moonLight.png" alt="" />
              </div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel">
                <img src="../assets/music.png" alt="" />
              </div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel">
                <img src="../assets/moonLight.png" alt="" />
              </div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel">
                <img src="../assets/game.png" alt="" />
              </div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel"><img src="../assets/piano.png" alt="" /></div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel"><img src="../assets/music.png" alt="" /></div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
            <div class="box_course">
              <div class="wheel"><img src="../assets/robot.png" alt="" /></div>
              <div class="middle_white">
                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
                <div class="people">
                  <div class="man">
                    <img src="../assets/people.png" alt="" />
                  </div>
                  <div>56人学习</div>
                </div>
              </div>
              <div class="now_study" @click="goTo('/courseDetail')">
                立即学习
              </div>
            </div>
          </div>
          <div
            style="
              text-align: center;
              padding: 30px 0 20px 0;
              box-sizing: border-box;
            "
          >
            此处滚动加载..
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
  },
  created() {},
};
</script>

<style scoped>
.student_head {
  width: 80%;
  margin: 0 auto;
}
.student_head > img {
  width: 100%;
  height: 100%;
}
.student_body {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 0 0 20px;
  min-height: 1000px;
}
.top {
  padding: 20px 30px;
  box-sizing: border-box;
  display: flex;
}
.box_fk {
  width: 8px;
  height: 21px;
  background: #0e71e6;
  margin-right: 5px;
}
.wheel {
  width: 100%;
  height: 140px;
}
.man {
  width: 16px;
  height: 16px;
}
.wheel > img,
.man > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box_course {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0px 10px 20px;
  width: 23%;
  /*border: 1px solid #cecece; */
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
    0px 2px 1px -1px rgb(0 0 0 / 12%);
}
.middle_white {
  font-size: 14px;
  margin: 5px 0 5px 10px;
}
.people {
  display: flex;
  margin-top: 5px;
}
.people > div:nth-child(2) {
  margin-left: 10px;
}
.now_study {
  width: 100%;
  height: 40px;
  color: #fff;
  background: #579ef5;
  text-align: center;
  line-height: 40px;
  font-size: 13px;
  cursor: pointer;
}
.main_box {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;
}
.right_bottom_flex {
  width: 219px;
  height: 144px;
  margin: auto 0;
}
.right_bottom_flex > img {
  width: 100%;
  height: 100%;
}
.body_student {
  margin: 0px auto;
  width: 80%;
  height: 100%;
}

.textOverflow {
  padding: 0 5px 0 0px;
  width: 95%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
