ali_ai_learn_web/src/pages/LearningSystem/components/CourseDirectory.vue

<template>
  <div class="kechengmulu">
    <div class="gap10">
      <div class="line_vertical"></div>
      <div class="font_size18 bold">{{$t('common.kechengmulu')}} (1/20)</div>
    </div>
    <div class="flex-center-between font_size16 gray list_item" 
    :class="{'active': index === 0}"
    v-for="(item, index) in 4" :key="index">
      <div class="gap10">
        <div>第一节</div>
        <div class="gap5">
          <img :src="muluIcon" alt="" style="width:20px;height:20px" v-if="index === 0">
          <span>行业要求与职业发展路线</span>
        </div>
      </div>
      <div>20:23</div>
    </div>
  </div>
</template>
<script setup>
import muluIcon from '@/assets/imgs/mulu.png'
import { getCourseList } from '@/api/course.js'
import { ref, onMounted } from 'vue'
defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})

const list = ref([]);

</script>
<style scoped lang="scss">
  .kechengmulu{
    .list_item{
      cursor: pointer;
      padding: 15px 0;
      border-bottom: 1px solid #DCDFE6;
      &.active{
        color: $primary-color;
        font-weight: 600;
      }
    }

  }

</style>