JayChou
3 months ago
parent
2348b57582
commit
2fec3ce73f
12 changed files with 762 additions and 409 deletions
@ -1,17 +1,44 @@ |
||||
import request from '@/utils/requset' |
||||
import request from '@/utils/requset' |
||||
|
||||
// 获取课程列表
|
||||
|
||||
export const getCourseList = (params:object) => { |
||||
export const getCourseList = (params: object) => { |
||||
return request({ |
||||
url: '/api/coursesteacher/page', |
||||
params, |
||||
}) |
||||
} |
||||
// 获取课程图谱
|
||||
export const getCourseAtlas = (params: object) => { |
||||
return request({ |
||||
url: '/knowNeo/getAllKnowByCourseId', |
||||
params, |
||||
}) |
||||
} |
||||
// 获取课程简介
|
||||
// export const getCourseDescription = (params:any) => {
|
||||
// return request({
|
||||
// url:''
|
||||
// })
|
||||
// }
|
||||
export const getCourseChapter = (params: any) => { |
||||
return request({ |
||||
url: '/chapter2/chapter', |
||||
params, |
||||
}) |
||||
} |
||||
|
||||
// 获取所有课程资源
|
||||
export const getCourseFiles = (params:any) => { |
||||
return request({ |
||||
url:'/api/coursesteacher/page', |
||||
url:'/resource/queryByCourseId', |
||||
params |
||||
}) |
||||
} |
||||
// 获取课程图谱
|
||||
export const getCourseAtlas = (params:object) => { |
||||
// 获取文件流
|
||||
export const getFileStreams = (params:any) => { |
||||
return request({ |
||||
url:'/know/all', |
||||
url:'/resource/read', |
||||
params |
||||
}) |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
// 筛选文件类型
|
||||
export const filterFilesType = (arr:[]) :{} => { |
||||
const res:any = { |
||||
video:[], |
||||
PPT:[], |
||||
questions:[], |
||||
word:[], |
||||
other:[] |
||||
} |
||||
arr.forEach((item:any) => { |
||||
if(item.type === 19){ |
||||
res.video.push(item) |
||||
}else if(item.type === 6){ |
||||
res.PPT.push(item) |
||||
}else if(item.type === 7 || item.type === 5){ |
||||
res.word.push(item) |
||||
}else{ |
||||
res.other.push(item) |
||||
} |
||||
}) |
||||
return res |
||||
} |
||||
@ -0,0 +1,372 @@ |
||||
<template> |
||||
<div class="fold-info-ui"> |
||||
<div class="demo-collapse"> |
||||
<el-collapse class="collapse"> |
||||
<!-- <button class="my-button" style="position: absolute;left: 0;top: 0;" @click.stop="emits('add')">新增</button> --> |
||||
<el-collapse-item v-for="item in foldInfoData" :key="item.id"> |
||||
<template #title> |
||||
<div class="title"> |
||||
|
||||
<div class="index" v-if="String(item.numshow).length == 1"> 0{{ item.numshow }} /</div> |
||||
<div class="index" v-else>{{ item.numshow }} -</div> |
||||
<div class="text">{{ item.name }}</div> |
||||
<div class="title-tag-box"> |
||||
<!-- <div class="my-tag" type="warning">{{ item.totalclasshours }}学时</div> --> |
||||
<div class="my-tag">本章资源</div> |
||||
</div> |
||||
<!-- <button class="my-button" @click.stop="emits('edit', item)" style="margin-right: 10px;">编辑</button> |
||||
<my-btn :id="item.id" type="danger" class="is-el-button" style="margin-right: 10px;">删除</my-btn> --> |
||||
</div> |
||||
</template> |
||||
<template #default> |
||||
<div class="titile-box-knowledge chapter-knowledge"> |
||||
<div class="my-tag">知识点1</div> |
||||
<div class="my-tag">知识点1</div> |
||||
|
||||
</div> |
||||
<div class="main-box"> |
||||
<div class="left"></div> |
||||
<div class="right"> |
||||
<div class="structure-item"> |
||||
<div class="structure-item-titile-box" v-for="obj, ind in item.chapterSection" :key="item.id"> |
||||
<div class="titile-box-titile"> |
||||
<div class="sequence">{{ ind + 1 }}</div> |
||||
<div class="tit-box"> |
||||
<div class="tit-box-left">{{ obj.numshow }} {{ obj.name }}</div> |
||||
<div class="tit-box-right my-tag">资源</div> |
||||
<div class="title-tag-box"> |
||||
<!-- <div class="my-tag" type="warning">{{ obj.totalclasshours }}学时</div> --> |
||||
</div> |
||||
<!-- <div class="tit-box-edit"> |
||||
<button class="my-button" @click.stop="emits('edit', obj)" |
||||
style="margin-right: 10px;">编辑</button> |
||||
<my-btn :id="obj.id" type="danger" class="is-el-button" |
||||
style="margin-right: 10px;">删除</my-btn> |
||||
</div> --> |
||||
</div> |
||||
</div> |
||||
<div class="titile-box-knowledge"> |
||||
<div class="my-tag">知识点1</div> |
||||
<div class="my-tag">知识点1</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
</el-collapse-item> |
||||
</el-collapse> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue' |
||||
const foldInfoData = ref([ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours', |
||||
chapterSection: [ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours', |
||||
chapterSection: [ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours', |
||||
chapterSection: [ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
}, |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours', |
||||
chapterSection: [ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
} |
||||
] |
||||
}, |
||||
]) |
||||
const emits = defineEmits(['add', 'del', 'edit']) |
||||
|
||||
</script> |
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
::v-deep .collapse { |
||||
border-top: none; |
||||
|
||||
.el-collapse-item__header { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
|
||||
.fold-info-ui { |
||||
width: 100%; |
||||
height:100%; |
||||
// padding-top: 27px; |
||||
// padding-left: 61px; |
||||
padding: 10px; |
||||
background: #fff; |
||||
position: relative; |
||||
|
||||
|
||||
.demo-collapse { |
||||
$title-icon-width: 15px; |
||||
$title--icon-m-r: 34px; |
||||
$title-index-width: 60px; |
||||
|
||||
|
||||
.title { |
||||
display: flex; |
||||
height: 22px; |
||||
width: 100%; |
||||
align-items: center; |
||||
|
||||
.icon { |
||||
line-height: 0px; |
||||
width: $title-icon-width; |
||||
height: $title-icon-width; |
||||
margin-right: $title--icon-m-r; |
||||
|
||||
& img { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
} |
||||
} |
||||
|
||||
.index { |
||||
width: $title-index-width; |
||||
text-align: center; |
||||
text-wrap: nowrap; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
// margin-right: 15px; |
||||
} |
||||
|
||||
.text { |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
} |
||||
|
||||
.title-tag-box { |
||||
// margin-left: auto; |
||||
// margin-right: 76px; |
||||
display: flex; |
||||
column-gap: 16px; |
||||
} |
||||
|
||||
} |
||||
|
||||
.main-box { |
||||
width: 100%; |
||||
display: flex; |
||||
$line: 1px dashed #D9D9D9; |
||||
|
||||
|
||||
.left { |
||||
width: calc($title-icon-width + $title--icon-m-r + $title-index-width / 2); |
||||
border-right: $line; |
||||
} |
||||
|
||||
.right { |
||||
flex-grow: 1; |
||||
|
||||
.structure-item { |
||||
width: 100%; |
||||
|
||||
.structure-item-titile-box { |
||||
&>* { |
||||
padding-left: 42px; |
||||
} |
||||
|
||||
.titile-box-titile { |
||||
&:first-child { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
position: relative; |
||||
margin-bottom: 15px; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
width: 30px; |
||||
border-top: $line; |
||||
} |
||||
|
||||
.sequence { |
||||
$height: 33px; |
||||
width: $height; |
||||
height: $height; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
border-radius: 50%; |
||||
background: #FFB21E; |
||||
text-align: center; |
||||
line-height: $height; |
||||
font-weight: 400; |
||||
font-size: 15px; |
||||
color: #000000; |
||||
} |
||||
|
||||
.tit-box { |
||||
height: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 17px; |
||||
|
||||
.tit-box-left { |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #000000; |
||||
} |
||||
|
||||
// .tit-box-right {} |
||||
.tit-box-edit { |
||||
margin-left: auto; |
||||
margin-right: 72px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.titile-box-knowledge { |
||||
display: flex; |
||||
margin-left: 33px; |
||||
gap: 38px; |
||||
flex-wrap: wrap; |
||||
|
||||
&>* { |
||||
border: 1px solid #0052D9; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
color: #0052D9; |
||||
} |
||||
} |
||||
|
||||
.chapter-knowledge { |
||||
margin-bottom: 10px; |
||||
margin-left: calc(79px - 33px / 2); |
||||
} |
||||
|
||||
// =================== |
||||
.my-tag { |
||||
padding: 2px 8px; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #0052D9; |
||||
line-height: 20px; |
||||
background: #F2F3FF; |
||||
cursor: pointer; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
* { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
[type=warning].my-tag { |
||||
color: #E37318; |
||||
background: #FFF1E9; |
||||
} |
||||
|
||||
} |
||||
|
||||
.my-button { |
||||
all: initial; |
||||
$color-start: #52A1FF; |
||||
$color-end: #4255FF; |
||||
padding: 8px 24px; |
||||
background: linear-gradient(128deg, $color-start 0%, $color-end 100%); |
||||
box-shadow: 0px 4px 7px 0px rgba(0, 82, 255, 0.27); |
||||
border-radius: 20px; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
line-height: 24px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
background: linear-gradient(128deg, lighten($color-start, 5%) 0%, lighten($color-end, 5%) 100%); |
||||
} |
||||
|
||||
&:active { |
||||
background: linear-gradient(128deg, darken($color-start, 10%) 0%, darken($color-end, 10%) 100%); |
||||
} |
||||
|
||||
&:disabled { |
||||
background: linear-gradient(128deg, lighten($color-start, 20%) 0%, lighten($color-end, 20%) 100%); |
||||
} |
||||
} |
||||
|
||||
.is-el-button { |
||||
width: 80px; |
||||
height: 40px; |
||||
box-shadow: 0px 4px 7px 0px rgba(0, 82, 255, 0.27); |
||||
border-radius: 20px; |
||||
font-weight: bold; |
||||
font-size: 16px !important; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
line-height: 24px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
|
||||
} |
||||
</style> |
||||
@ -1,372 +1,33 @@ |
||||
<template> |
||||
<div class="fold-info-ui"> |
||||
<div class="demo-collapse"> |
||||
<el-collapse class="collapse"> |
||||
<!-- <button class="my-button" style="position: absolute;left: 0;top: 0;" @click.stop="emits('add')">新增</button> --> |
||||
<el-collapse-item v-for="item in foldInfoData" :key="item.id"> |
||||
<template #title> |
||||
<div class="title"> |
||||
|
||||
<div class="index" v-if="String(item.numshow).length == 1"> 0{{ item.numshow }} /</div> |
||||
<div class="index" v-else>{{ item.numshow }} -</div> |
||||
<div class="text">{{ item.name }}</div> |
||||
<div class="title-tag-box"> |
||||
<!-- <div class="my-tag" type="warning">{{ item.totalclasshours }}学时</div> --> |
||||
<div class="my-tag">本章资源</div> |
||||
</div> |
||||
<!-- <button class="my-button" @click.stop="emits('edit', item)" style="margin-right: 10px;">编辑</button> |
||||
<my-btn :id="item.id" type="danger" class="is-el-button" style="margin-right: 10px;">删除</my-btn> --> |
||||
</div> |
||||
</template> |
||||
<template #default> |
||||
<div class="titile-box-knowledge chapter-knowledge"> |
||||
<div class="my-tag">知识点1</div> |
||||
<div class="my-tag">知识点1</div> |
||||
|
||||
</div> |
||||
<div class="main-box"> |
||||
<div class="left"></div> |
||||
<div class="right"> |
||||
<div class="structure-item"> |
||||
<div class="structure-item-titile-box" v-for="obj, ind in item.chapterSection" :key="item.id"> |
||||
<div class="titile-box-titile"> |
||||
<div class="sequence">{{ ind + 1 }}</div> |
||||
<div class="tit-box"> |
||||
<div class="tit-box-left">{{ obj.numshow }} {{ obj.name }}</div> |
||||
<div class="tit-box-right my-tag">资源</div> |
||||
<div class="title-tag-box"> |
||||
<!-- <div class="my-tag" type="warning">{{ obj.totalclasshours }}学时</div> --> |
||||
</div> |
||||
<!-- <div class="tit-box-edit"> |
||||
<button class="my-button" @click.stop="emits('edit', obj)" |
||||
style="margin-right: 10px;">编辑</button> |
||||
<my-btn :id="obj.id" type="danger" class="is-el-button" |
||||
style="margin-right: 10px;">删除</my-btn> |
||||
</div> --> |
||||
</div> |
||||
</div> |
||||
<div class="titile-box-knowledge"> |
||||
<div class="my-tag">知识点1</div> |
||||
<div class="my-tag">知识点1</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
</el-collapse-item> |
||||
</el-collapse> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue' |
||||
const foldInfoData = ref([ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours', |
||||
chapterSection: [ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours', |
||||
chapterSection: [ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours', |
||||
chapterSection: [ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
}, |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours', |
||||
chapterSection: [ |
||||
{ |
||||
id: 'id', |
||||
name: 'Vue设计与实现', |
||||
numshow: 'num', |
||||
totalclasshours: 'totalclasshours' |
||||
} |
||||
] |
||||
}, |
||||
]) |
||||
const emits = defineEmits(['add', 'del', 'edit']) |
||||
|
||||
</script> |
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
::v-deep .collapse { |
||||
border-top: none; |
||||
|
||||
.el-collapse-item__header { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
|
||||
.fold-info-ui { |
||||
width: 100%; |
||||
height:100%; |
||||
// padding-top: 27px; |
||||
// padding-left: 61px; |
||||
padding: 10px; |
||||
background: #fff; |
||||
position: relative; |
||||
|
||||
|
||||
.demo-collapse { |
||||
$title-icon-width: 15px; |
||||
$title--icon-m-r: 34px; |
||||
$title-index-width: 60px; |
||||
|
||||
|
||||
.title { |
||||
display: flex; |
||||
height: 22px; |
||||
width: 100%; |
||||
align-items: center; |
||||
|
||||
.icon { |
||||
line-height: 0px; |
||||
width: $title-icon-width; |
||||
height: $title-icon-width; |
||||
margin-right: $title--icon-m-r; |
||||
|
||||
& img { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
} |
||||
} |
||||
|
||||
.index { |
||||
width: $title-index-width; |
||||
text-align: center; |
||||
text-wrap: nowrap; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
// margin-right: 15px; |
||||
} |
||||
|
||||
.text { |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
} |
||||
|
||||
.title-tag-box { |
||||
// margin-left: auto; |
||||
// margin-right: 76px; |
||||
display: flex; |
||||
column-gap: 16px; |
||||
} |
||||
|
||||
} |
||||
|
||||
.main-box { |
||||
width: 100%; |
||||
display: flex; |
||||
$line: 1px dashed #D9D9D9; |
||||
|
||||
|
||||
.left { |
||||
width: calc($title-icon-width + $title--icon-m-r + $title-index-width / 2); |
||||
border-right: $line; |
||||
} |
||||
|
||||
.right { |
||||
flex-grow: 1; |
||||
|
||||
.structure-item { |
||||
width: 100%; |
||||
|
||||
.structure-item-titile-box { |
||||
&>* { |
||||
padding-left: 42px; |
||||
} |
||||
|
||||
.titile-box-titile { |
||||
&:first-child { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
position: relative; |
||||
margin-bottom: 15px; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
width: 30px; |
||||
border-top: $line; |
||||
} |
||||
|
||||
.sequence { |
||||
$height: 33px; |
||||
width: $height; |
||||
height: $height; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
border-radius: 50%; |
||||
background: #FFB21E; |
||||
text-align: center; |
||||
line-height: $height; |
||||
font-weight: 400; |
||||
font-size: 15px; |
||||
color: #000000; |
||||
} |
||||
|
||||
.tit-box { |
||||
height: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 17px; |
||||
|
||||
.tit-box-left { |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #000000; |
||||
} |
||||
|
||||
// .tit-box-right {} |
||||
.tit-box-edit { |
||||
margin-left: auto; |
||||
margin-right: 72px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.titile-box-knowledge { |
||||
display: flex; |
||||
margin-left: 33px; |
||||
gap: 38px; |
||||
flex-wrap: wrap; |
||||
|
||||
&>* { |
||||
border: 1px solid #0052D9; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
color: #0052D9; |
||||
} |
||||
} |
||||
|
||||
.chapter-knowledge { |
||||
margin-bottom: 10px; |
||||
margin-left: calc(79px - 33px / 2); |
||||
} |
||||
|
||||
// =================== |
||||
.my-tag { |
||||
padding: 2px 8px; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #0052D9; |
||||
line-height: 20px; |
||||
background: #F2F3FF; |
||||
cursor: pointer; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
* { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
[type=warning].my-tag { |
||||
color: #E37318; |
||||
background: #FFF1E9; |
||||
} |
||||
|
||||
} |
||||
|
||||
.my-button { |
||||
all: initial; |
||||
$color-start: #52A1FF; |
||||
$color-end: #4255FF; |
||||
padding: 8px 24px; |
||||
background: linear-gradient(128deg, $color-start 0%, $color-end 100%); |
||||
box-shadow: 0px 4px 7px 0px rgba(0, 82, 255, 0.27); |
||||
border-radius: 20px; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
line-height: 24px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
background: linear-gradient(128deg, lighten($color-start, 5%) 0%, lighten($color-end, 5%) 100%); |
||||
} |
||||
|
||||
&:active { |
||||
background: linear-gradient(128deg, darken($color-start, 10%) 0%, darken($color-end, 10%) 100%); |
||||
} |
||||
|
||||
&:disabled { |
||||
background: linear-gradient(128deg, lighten($color-start, 20%) 0%, lighten($color-end, 20%) 100%); |
||||
} |
||||
} |
||||
|
||||
.is-el-button { |
||||
width: 80px; |
||||
height: 40px; |
||||
box-shadow: 0px 4px 7px 0px rgba(0, 82, 255, 0.27); |
||||
border-radius: 20px; |
||||
font-weight: bold; |
||||
font-size: 16px !important; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
line-height: 24px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
|
||||
} |
||||
</style> |
||||
<div class="tree-box"> |
||||
<el-tree |
||||
default-expand-all |
||||
style="max-width: 600px" |
||||
:data="chapterList" |
||||
@node-click="handleNodeClick" |
||||
:props="defaultProps" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
|
||||
const props = defineProps(['chapterList']) |
||||
const handleNodeClick = (data: any) => { |
||||
console.log(data) |
||||
} |
||||
console.log(props.chapterList,'props') |
||||
const chapterList = props.chapterList |
||||
const defaultProps = { |
||||
children: 'children', |
||||
label: 'name', |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.tree-box { |
||||
padding: 10px; |
||||
} |
||||
:deep(.el-tree-node__content) { |
||||
font-size: 16px; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue