<template>
  <common-header/>
  <div class="common100 chapter">
    <div class="withShadow">
      <div class="likeBread">
        <div class="likeBread_left">六年级数学《从课本到培优》</div>
        <div class="likeBread_right">
          <span>课程资源</span>-
          <span>基础课程</span>-
          <span>查看更多</span>-
          <span>六年级数学《从课本到培优》</span>
        </div>
      </div>
    </div>
    <div class="common1280 baseInfoShow">
      <p class="bigT">六年级数学《从课本到培优》</p>
      <div class="infoShow">责任教师:<span>吴雷霞</span> 机构名称:<span>桐乡市互联网学校</span></div>
      <p class="introT">简介： </p>
      <p class="intro">小学数学《从课本到培优 》课程（4-6年级）由桐乡市互联网学校嘉兴市数学名师吴雷霞团队研发。本课程在结构安排上与教材同步，紧扣教学大纲所囊括的知识要点。在难度设置上， 先选取中低难度问题，由浅入深，循序渐进，从每一课时中选取具有思维深度的问题进行讲解和练习，达到对课本知识的深入拓展,轻松实现从课本到培优。课程着重以思维训练为核心， 培养学生学会独立思考，体会数学的基本思想和思维方式。</p>
    </div>
    <div class="common1280 chapterAll">
      <div class="chapterAllIn">
        <div class="chapterAllIn_left">
          <div class="normalT">课程章节</div>
          <div class="chapter">
            <ul>
              <li class="selectActiveLi">01 单元</li>
              <li>02 行程问题</li>
              <li>03 过桥问题</li>
              <li>04 流水问题</li>
              <li>05 工程问题</li>
              <li>06 有趣的进制</li>
              <li>07 生活中的百分数问题</li>
              <li>08 百分数应用题</li>
              <li>08 09 圆柱的表面积（一）</li>
            </ul>
          </div>
        </div>
        <div class="chapterAllIn_right">
          <div class="normalT">内容</div>
          <div class="classification">
            <div class="classification_left">分类</div>
            <div class="classification_right">
              <ul>
                <li v-for="(item,index) in classificationData" :key="index"><span :class="{'selectActiveSpan' : num==index}">{{item}}</span></li>
              </ul>
            </div>
          </div>
          <div class="chapter">
            <div class="singleItem" v-for="(item,index) in 15" :key="index">
              11
              <p>文件名</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonHeader from "@/components/header/index.vue";
  export default {
  name: 'chapter',
    components:{
     commonHeader
    },
    data() {
      return {
        classificationData:["全部","word","ppt","pdf","excel","视频","其他"],
        num:0,
      }
  },
    mounted() {
      
  },
    methods: {
      
  },
    
  }
</script>

<style lang="scss" scoped>
@import "../styles/common_resource.scss";
// .withShadow{
//   width: 100%;
//   height: 60px;
//   background: #ffffff;
//   box-shadow: 0px 0px 0px 10px rgba(17,46,74,0.10); 
// }
.baseInfoShow{
  height: 322px;
  background: #858585;
  border-radius: 12px;
  box-sizing: border-box;
  padding:52px 66px;
  color: #ffffff;

  .bigT{
    font-size: 28px;
    font-weight: 600;
    text-align: left;
  }
  .infoShow{
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    margin-top:15px;
  }
  .introT{
    margin-top:35px;
  }
  .introT,.intro{
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
  }
}
.chapterAll{
  box-sizing: border-box;
  padding: 25px 20px;
  .chapterAllIn{
    display: flex;
    .normalT{
      font-size: 16px;
      font-weight: 600;
      text-align: left;
      color: #171721;
      margin-bottom:20px;
    }
    .chapterAllIn_left{
      width:40%;
      margin-right:10px;
      border-right: 1px solid #e4e6e8;
      .chapter{
        ul{
          li{
            height: 40px;
            line-height: 40px;
            background: #F3FAFF;
            border-radius: 16px 16px 0px 0px;
            font-size: 14px;
            font-weight: 600;
            text-align: left;
            color: #050026;
            box-sizing: border-box;
            padding-left:24px;
          }
        }
      }
    }
    .chapterAllIn_right{
      width: 60%;
      .classification{
        display: flex;
        height: 50px;
        line-height: 50px;
        .classification_left{
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          color: #000000;
        }
        .classification_right{
          border-bottom: 1px dashed #e4e6e8;
          border-radius: 0px 0px 10px 10px;
          box-sizing: border-box;
          padding-left: 10px;
            ul{
              li{
                font-size: 14px;
                font-weight: 400;
                text-align: center;
                color: #9d9ab9;
                display: inline-block;
                margin-right: 50px;

              }
            }
        }
      }
      .chapter{
        display: flex;
        justify-content: space-between;// space-between：两端对齐，子元素间隔相等 space-around：子元素两侧的间隔相等。
        flex-wrap: wrap; //  wrap（向下换）
        box-sizing: border-box;
        padding: 10px;
        .singleItem{
          width:14%;
          text-align: center;
          margin-right:0.2%;
          margin-bottom: 44px;
          background-color: lightblue;
        }
        .singleItem:nth-child(7n){
          margin-right: 0!important;
        }

      }
    }
  }
}
.selectActiveSpan{
  background: #DCF1FF;
  border-radius: 6px;
  color: #00a3ff!important;
  padding: 5px;
}
.selectActiveLi{
  background: #00a3ff!important;
  color: #ffffff!important;
}

</style>