<!-- 训练营 -->
<template>
  <div class="trainingcamp">
    <!-- 训练营 -->
    <van-nav-bar title="情绪管理控制" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回">
      <template #left>
        <van-icon name="arrow-left" size="24" style="padding: 0" />
        <span>返回</span>
      </template>
    </van-nav-bar>
    <div class="main">
      <ul>
        <li :class="active == 'brief' ? 'active' : ''" @click="switchNav('brief')">简介</li>
        <li :class="active == 'content' ? 'active' : ''" @click="switchNav('content')">内容</li>
        <li :class="active == 'evaluate' ? 'active' : ''" @click="switchNav('evaluate')">评价</li>
        <li :class="active == 'recommend' ? 'active' : ''" @click="switchNav('recommend')">推荐</li>
      </ul>
      <div class="brief-box" v-show="active == 'brief'">
        <img src="@/assets/optimize/images/55_06.png" alt="" />
      </div>
      <div class="content-box" v-show="active == 'content'">
        <ul>
          <li>
            <p>001 小学生学习能力发展的特点</p>
            <div>
              <span><i>免费</i>09:26 | 11034次播放</span>
              <img src="@/assets/optimize/icons/play.png" alt="" />
            </div>
          </li>
          <li>
            <p>002 小学生学习能力发展的特点</p>
            <div>
              <span>09:26 | 11034次播放</span>
              <img src="@/assets/optimize/icons/lock.png" alt="" />
            </div>
          </li>
          <li>
            <p>003 小学生学习能力发展的特点</p>
            <div>
              <span><i>免费</i>09:26 | 11034次播放</span>
              <img src="@/assets/optimize/icons/play.png" alt="" />
            </div>
          </li>
          <li>
            <p>004 小学生学习能力发展的特点</p>
            <div>
              <span>09:26 | 11034次播放</span>
              <img src="@/assets/optimize/icons/play.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
      <div class="evaluate-box" v-show="active == 'evaluate'">
        <ul>
          <li>
            <div class="top">
              <img src="@/assets/optimize/icons/3_55.png" alt="" />
              <div>
                <p>张杰妈妈</p>
                <span>12.18 51:13 广州</span>
              </div>
            </div>
            <p>买了好多课，这个是最值得的，真的实用，思路清晰</p>
            <span>21.孩子的适应能力怎么训练？</span>
          </li>
          <li>
            <div class="top">
              <img src="@/assets/optimize/icons/3_55.png" alt="" />
              <div>
                <p>张杰妈妈</p>
                <span>12.18 51:13 广州</span>
              </div>
            </div>
            <p>买了好多课，这个是最值得的，真的实用，思路清晰</p>
            <span>21.孩子的适应能力怎么训练？</span>
          </li>
          <li>
            <div class="top">
              <img src="@/assets/optimize/icons/3_55.png" alt="" />
              <div>
                <p>张杰妈妈</p>
                <span>12.18 51:13 广州</span>
              </div>
            </div>
            <p>买了好多课，这个是最值得的，真的实用，思路清晰</p>
            <span>21.孩子的适应能力怎么训练？</span>
          </li>
          <li>
            <div class="top">
              <img src="@/assets/optimize/icons/3_55.png" alt="" />
              <div>
                <p>张杰妈妈</p>
                <span>12.18 51:13 广州</span>
              </div>
            </div>
            <p>买了好多课，这个是最值得的，真的实用，思路清晰</p>
            <span>21.孩子的适应能力怎么训练？</span>
          </li>
        </ul>
      </div>
      <div class="recommend-box" v-show="active == 'recommend'">
        <ul>
          <li>
            <h4>孩子自主学习力提升实操课</h4>
            <p>入门易学</p>
            <span>播放</span>
            <img src="@/assets/optimize/images/3_48.png" alt="" />
          </li>
          <li>
            <h4>给孩子的文学课</h4>
            <span>播放</span>
            <img src="@/assets/optimize/images/3_48.png" alt="" />
          </li>
          <li>
            <h4>孩子自主学习力提升实操课</h4>
            <span>播放</span>
            <img src="@/assets/optimize/images/3_48.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar';
export default {
  components: {
    TabBar
  },
  data() {
    return {
      active: 'brief'
    };
  },
  created() {
    console.log(this.$route.query);
  },
  mounted() {},
  methods: {
    // 返回
    onNavBack() {
      this.$router.push({
        name: 'Optimize'
      });
    },
    // 切换
    switchNav(e) {
      this.active = e;
    }
  }
};
</script>
"
<style scoped lang="scss">
@import './scss/trainingcamp.scss';
</style>
