119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
<template>
|
|
<div class="CourseCatalogue-box">
|
|
<ul class="list-box">
|
|
<li class="list-item" v-for="(item, index) in catalogueList" :key="index">
|
|
<div class="list-item-title"><span style="margin-right: 10px;">第{{ capitalizeNumber[index] }}章</span>{{ item.name }}</div>
|
|
<ul class="sub-list">
|
|
<li @click="handlerItem(j, item)" class="sub-list-item" v-for="(j, k) in item.courseList" :key="`${index}-${k}`">
|
|
<div class="sub-item-info">
|
|
<VideoOne theme="filled" fill="#ccc" style="margin-right: 6px;" size="1.2em"></VideoOne>{{index+1}}.{{k+1}}
|
|
{{item.name}}
|
|
</div>
|
|
<!-- 0-未学 1-已学 -->
|
|
<div v-if="`${index}-${k}` === selectedId" class="sub-item-status">
|
|
正在学习中<History
|
|
theme="filled"
|
|
tyle="margin-left: 10px;"
|
|
size="1.2em"
|
|
style="margin-left: 10px;"
|
|
></History>
|
|
</div>
|
|
<div v-else class="sub-item-status">
|
|
<Round theme="filled" strokeWidth="6" fill="#666" style="margin-left: 10px;"></Round>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { VideoOne, Round, History } from '@icon-park/vue'
|
|
export default {
|
|
components: { VideoOne, Round, History },
|
|
props: {
|
|
catalogueList: {
|
|
type: Array,
|
|
default: () => ([])
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
capitalizeNumber: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一'],
|
|
selectedId: '1-1'
|
|
}
|
|
},
|
|
methods: {
|
|
handlerItem (item, pItem) {
|
|
this.$emit('changeVideo', { item, pItem })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.learn-detail {
|
|
display: flex;
|
|
}
|
|
|
|
.learn-detail-video {
|
|
flex: 1;
|
|
}
|
|
|
|
.learn-detail-list {
|
|
flex: 220px;
|
|
}
|
|
|
|
.list-box,
|
|
.sub-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.list-item-title {
|
|
color: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.sub-list-item {
|
|
color: #666;
|
|
padding-bottom: 10px;
|
|
&:hover {
|
|
color: #1890ff;
|
|
}
|
|
}
|
|
|
|
.sub-list {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.sub-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
.sub-item-info {
|
|
flex: 1;
|
|
display: flex;
|
|
line-height: 2;
|
|
}
|
|
|
|
.sub-item-status {
|
|
flex: 0 0 200px;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
color: #1890ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.list-item {
|
|
width: 100%;
|
|
}
|
|
</style>
|