parent
a1b7adec84
commit
db752a36eb
6 changed files with 210 additions and 823 deletions
@ -1,727 +1,55 @@ |
|||||||
<script setup> |
<script setup lang="ts"> |
||||||
import { ref, onMounted } from 'vue' |
// import { ref } from 'vue' |
||||||
import { ElMessage, ElMessageBox } from 'element-plus' |
import courseBrief from './components/course-brief.vue' |
||||||
import { id } from 'element-plus/es/locales.mjs' |
import courseObject from './components/course-object.vue' |
||||||
import * as echarts from 'echarts' |
import courseChapters from './components/course-chapters.vue' |
||||||
|
import KnowledgeGraph from './components/knowledge-graph.vue' |
||||||
// import { useRoute } from 'vue-router' |
import knowledgestatistic from './components/knowledge-statistic.vue' |
||||||
|
import chaptersdetails from './components/chapters-details.vue' |
||||||
import { |
import resourcemanagement from './components/resource-management.vue' |
||||||
getCourseList, |
// import knowledgegraph from './components/KnowledgeGraph.vue' |
||||||
addCourse, |
|
||||||
editCourse, |
|
||||||
deleteCourse, |
|
||||||
getCourseInfo, |
|
||||||
} from '@/api/courseChaptersApi' |
|
||||||
import { useRoute, useRouter } from 'vue-router' |
|
||||||
const route = useRoute() |
|
||||||
const router = useRouter() |
|
||||||
// id ： 分目标id |
|
||||||
// targetId ： 选中的分类 |
|
||||||
|
|
||||||
const targetList = ref([ |
|
||||||
{ |
|
||||||
label: '课程目标一', |
|
||||||
id: 1, |
|
||||||
disabled: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '课程目标二', |
|
||||||
disabled: false, |
|
||||||
id: 2, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '课程目标三', |
|
||||||
id: 3, |
|
||||||
disabled: false, |
|
||||||
}, |
|
||||||
]) |
|
||||||
const formData = ref({ |
|
||||||
description: '', |
|
||||||
}) |
|
||||||
const activeIndex = ref(0) |
|
||||||
// 新增 |
|
||||||
const addPoint = (id) => { |
|
||||||
console.log(id, 'id') |
|
||||||
activeIndex.value = id |
|
||||||
dialogVisible.value = true |
|
||||||
flog.value = false |
|
||||||
// updateDisabledStatus() |
|
||||||
} |
|
||||||
const text = ref('') |
|
||||||
const textChange = (val) => { |
|
||||||
console.log(text.value, 'text.value') |
|
||||||
} |
|
||||||
// 弹窗 |
|
||||||
const dialogVisible = ref(false) |
|
||||||
// 关闭弹窗 |
|
||||||
const handleClose = () => { |
|
||||||
dialogVisible.value = false |
|
||||||
} |
|
||||||
// 弹窗提交事件 |
|
||||||
// const submit = async () => { |
|
||||||
// if (flog.value) { |
|
||||||
// await editCourse({ |
|
||||||
// ...editdata.value, |
|
||||||
// content: formData.value.description, |
|
||||||
// }) |
|
||||||
// } else { |
|
||||||
// await addCourse({ |
|
||||||
// objectiveId: activeIndex.value, |
|
||||||
// content: formData.value.description, |
|
||||||
// }) |
|
||||||
// } |
|
||||||
// getList() |
|
||||||
// dialogVisible.value = false |
|
||||||
// formData.value.description = '' |
|
||||||
// activeIndex.value = '' |
|
||||||
// } |
|
||||||
const close = () => { |
|
||||||
formData.value = { |
|
||||||
id: null, |
|
||||||
target: '', |
|
||||||
description: '', |
|
||||||
} |
|
||||||
dialogVisible.value = false |
|
||||||
} |
|
||||||
// 筛选目标 |
|
||||||
// const filterTarger = (target) => { |
|
||||||
// const res = targetList.value.find((item) => { |
|
||||||
// if (item.id === target) { |
|
||||||
// console.log(item, 'item') |
|
||||||
// return item |
|
||||||
// } |
|
||||||
// }) |
|
||||||
// return res.label |
|
||||||
// } |
|
||||||
const editdata = ref({ id: '', objectiveId: '' }) |
|
||||||
// 编辑事件 |
|
||||||
const flog = ref(false) |
|
||||||
const editBook = async (obj) => { |
|
||||||
// 回显目标详情 |
|
||||||
const res = await getCourseInfo({ id: obj.id }) |
|
||||||
console.log(res, '回显res') |
|
||||||
editdata.value.id = res.data.id |
|
||||||
editdata.value.objectiveId = res.data.objectiveId |
|
||||||
flog.value = true |
|
||||||
// console.log(obj, '回显后obj') |
|
||||||
activeIndex.value = res.data.id |
|
||||||
formData.value.description = res.data.content |
|
||||||
dialogVisible.value = true |
|
||||||
} |
|
||||||
// 弹窗提交事件 |
|
||||||
const submit = async () => { |
|
||||||
if (flog.value) { |
|
||||||
await editCourse({ |
|
||||||
...editdata.value, |
|
||||||
content: formData.value.description, |
|
||||||
}) |
|
||||||
} else { |
|
||||||
await addCourse({ |
|
||||||
objectiveId: activeIndex.value, |
|
||||||
content: formData.value.description, |
|
||||||
}) |
|
||||||
} |
|
||||||
getList() |
|
||||||
dialogVisible.value = false |
|
||||||
formData.value.description = '' |
|
||||||
activeIndex.value = '' |
|
||||||
} |
|
||||||
// 删除课程目标 |
|
||||||
const del = async (obj) => { |
|
||||||
await ElMessageBox.confirm('你确认要删除该课程目标吗', '温馨提示', { |
|
||||||
type: 'warning', |
|
||||||
confirmButtonText: '确认', |
|
||||||
cancelButtonText: '取消', |
|
||||||
}) |
|
||||||
await deleteCourse({ id: obj.id }) |
|
||||||
ElMessage.success('删除成功') |
|
||||||
getList() |
|
||||||
} |
|
||||||
const data = ref({}) |
|
||||||
const courseId = ref(0) |
|
||||||
// 获取课程知识点列表 |
|
||||||
const getList = async () => { |
|
||||||
const res = await getCourseList({ id: courseId.value }) |
|
||||||
console.log(res, 'res') |
|
||||||
data.value = res.data[0] |
|
||||||
console.log(data.value, 'data.value') |
|
||||||
text.value = res.data[0].name |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(async () => { |
|
||||||
if (!Object.keys(route.query).length) { |
|
||||||
return router.push('/curriculumCenter/courseDetails') |
|
||||||
|
|
||||||
// return router.push('/curriculumCenter/basicCourseInformation') |
|
||||||
} |
|
||||||
courseId.value = route.query.id |
|
||||||
console.log(courseId.value, 'courseid.vlue') |
|
||||||
getList() |
|
||||||
let chartDom = document.getElementById('main') |
|
||||||
// myChart.resize({ |
|
||||||
// width: 200, |
|
||||||
// height: 100, |
|
||||||
// }) |
|
||||||
let myChart = echarts.init(chartDom) |
|
||||||
let option |
|
||||||
option = { |
|
||||||
radar: [ |
|
||||||
{ |
|
||||||
nameGap: 10, |
|
||||||
indicator: [ |
|
||||||
{ |
|
||||||
text: '目标一\n', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '目标五\n\n', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '目标四\n\n', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '目标三\n\n', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '目标二\n\n', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
], |
|
||||||
// 中心位置 |
|
||||||
center: ['50%', '60%'], |
|
||||||
// 半径 |
|
||||||
radius: 60, |
|
||||||
// 圆角起始角度 |
|
||||||
startAngle: 90, |
|
||||||
// 分割数 |
|
||||||
splitNumber: 5, |
|
||||||
shape: 'circle', |
|
||||||
name: { |
|
||||||
formatter: '{value}', |
|
||||||
textStyle: { |
|
||||||
color: '#333333', |
|
||||||
fontSize: 12, |
|
||||||
}, |
|
||||||
gap: 10, |
|
||||||
}, |
|
||||||
splitArea: { |
|
||||||
areaStyle: { |
|
||||||
color: [ |
|
||||||
'transparent', |
|
||||||
'transparent', |
|
||||||
'rgba(114, 172, 209, 0)', |
|
||||||
'transparent', |
|
||||||
'rgba(114, 172, 209, 0)', |
|
||||||
], |
|
||||||
}, |
|
||||||
}, |
|
||||||
// 设置雷达图中间射线的颜色 |
|
||||||
axisLine: { |
|
||||||
lineStyle: { |
|
||||||
color: '#C8D9FF', |
|
||||||
}, |
|
||||||
}, |
|
||||||
splitLine: { |
|
||||||
lineStyle: { |
|
||||||
color: '#DADADA', |
|
||||||
width: 2, |
|
||||||
type: 'dashed', //dashed solid dotted 射线类型【实线 虚线】 |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
nameGap: 10, |
|
||||||
indicator: [ |
|
||||||
{ |
|
||||||
text: '达成度', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '达成度', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '达成度', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '达成度', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: '达成度', |
|
||||||
max: 100, |
|
||||||
}, |
|
||||||
], |
|
||||||
|
|
||||||
center: ['50%', '60%'], |
|
||||||
radius: 60, |
|
||||||
startAngle: 90, |
|
||||||
splitNumber: 1, |
|
||||||
shape: 'circle', |
|
||||||
splitArea: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
axisLine: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
name: { |
|
||||||
formatter: '{value}', |
|
||||||
textStyle: { |
|
||||||
color: 'rgba(0,0,0,0.4)', |
|
||||||
fontSize: 12, |
|
||||||
}, |
|
||||||
}, |
|
||||||
splitLine: { |
|
||||||
lineStyle: { |
|
||||||
color: '#6093FF', |
|
||||||
type: 'solid', |
|
||||||
width: 8, |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
type: 'radar', |
|
||||||
emphasis: { |
|
||||||
lineStyle: { |
|
||||||
width: 20, |
|
||||||
}, |
|
||||||
}, |
|
||||||
symbol: 'none', |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
value: [74, 60, 80, 60, 74], |
|
||||||
name: 'Data C', |
|
||||||
areaStyle: { |
|
||||||
color: '#DBE4F9', |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'radar', |
|
||||||
emphasis: { |
|
||||||
lineStyle: { |
|
||||||
width: 20, |
|
||||||
}, |
|
||||||
}, |
|
||||||
symbol: 'none', |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
value: [74, 60, 80, 40, 74], |
|
||||||
name: 'Data B', |
|
||||||
areaStyle: { |
|
||||||
color: '#0052FF', |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
], |
|
||||||
} |
|
||||||
|
|
||||||
option && myChart.setOption(option) |
|
||||||
}) |
|
||||||
</script> |
</script> |
||||||
<template> |
<template> |
||||||
<div class="top"> |
<el-row :gutter="20"> |
||||||
<div class="object"> |
<el-col :span="14"> |
||||||
<!-- <h3>课程目标</h3> --> |
<course-brief></course-brief> |
||||||
<div class="left"> |
<courseObject></courseObject> |
||||||
<div class="total"> |
</el-col> |
||||||
<div class="title">| 课程总目标</div> |
<el-col :span="10"> |
||||||
<div class="content1"> |
<KnowledgeGraph></KnowledgeGraph> |
||||||
<textarea class="textarea" @change="textChange" v-model="text"> |
<!-- <knowledgegraph></knowledgegraph> --> |
||||||
文本内容</textarea> |
<knowledgestatistic></knowledgestatistic> |
||||||
</div> |
</el-col> |
||||||
</div> |
</el-row> |
||||||
<div class="radar"> |
<el-row :gutter="20"> |
||||||
<div class="title">| 课程目标雷达图</div> |
<el-col :span="10"> |
||||||
<div id="main" class="radarmap"></div> |
<course-chapters></course-chapters> |
||||||
</div> |
</el-col> |
||||||
</div> |
<el-col :span="14"> |
||||||
<div class="right"> |
<chaptersdetails></chaptersdetails> |
||||||
<div class="objectives"> |
<resourcemanagement></resourcemanagement> |
||||||
<div class="title">| 课程目标</div> |
</el-col> |
||||||
<div class="objectivebottom"> |
</el-row> |
||||||
<el-scrollbar height="270px"> |
|
||||||
<ul class="objectLi"> |
|
||||||
<li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id"> |
|
||||||
<div class="courseObject"> |
|
||||||
<div class="courseObject1">{{ item.name }}</div> |
|
||||||
<div class="courseObject2"> |
|
||||||
<el-button type="primary" @click="addPoint(item.id)"> |
|
||||||
新增 |
|
||||||
</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="smallContent"> |
|
||||||
<el-scrollbar height="200px"> |
|
||||||
<ul class="small"> |
|
||||||
<li v-for="(obj, i) in item.contents" :key="obj.id"> |
|
||||||
<div class="partObject"> |
|
||||||
<div class="partObject1"> |
|
||||||
<!-- {{ item.content }} --> |
|
||||||
<!-- {{ item.introduce }} --> |
|
||||||
课程目标{{ i + 1 }} |
|
||||||
<!-- {{ filterTarger(obj.targetId) }} --> |
|
||||||
</div> |
|
||||||
<div class="partObject2"> |
|
||||||
<el-button class="edit" type="text" @click="editBook(obj)"> |
|
||||||
编辑 |
|
||||||
</el-button> |
|
||||||
<el-button class="destroy" type="text" @click="del(obj)"> |
|
||||||
删除 |
|
||||||
</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="partObjectIntroduce"> |
|
||||||
{{ obj.content }} |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</el-scrollbar> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</el-scrollbar> |
|
||||||
<el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500" |
|
||||||
:before-close="handleClose"> |
|
||||||
<el-form :model="formData" label-width="auto" style="max-width: 600px"> |
|
||||||
<el-form-item label="内容" prop="description"> |
|
||||||
<el-input v-model="formData.description" placeholder="请输入内容"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<template #footer> |
|
||||||
<div class="dialog-footer"> |
|
||||||
<el-button @click="close">取消</el-button> |
|
||||||
<el-button type="primary" @click="submit">确定</el-button> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="point"> |
|
||||||
<div class="map">知识图谱</div> |
|
||||||
<div class="knowledge"> |
|
||||||
<div class="percent"> |
|
||||||
<span>知识点掌握百分比</span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="core_knowledge"> |
|
||||||
<SvgIcon class="svg-element" name="博士帽" width="40" height="40" /> |
|
||||||
<span class="text">核心知识点</span> |
|
||||||
<span class="number" style="color: #ffa400">69</span> |
|
||||||
个 |
|
||||||
</div> |
|
||||||
<div class="error_knowledge"> |
|
||||||
<SvgIcon class="svg-element" name="知识点" width="40" height="40" /> |
|
||||||
<span class="text">易错知识点</span> |
|
||||||
<span class="number" style="color: #5570fe">69</span> |
|
||||||
个 |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="bottom"> |
|
||||||
<div class="chapters"></div> |
|
||||||
<div class="chaptersDetails"> |
|
||||||
<div class="chaptersContent"></div> |
|
||||||
<div class="resource"></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
<style scoped lang="scss"> |
|
||||||
.top { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
// margin-top: 20px; |
|
||||||
|
|
||||||
.object { |
<style lang="scss" scoped> |
||||||
display: flex; |
.el-row { |
||||||
justify-content: space-between; |
// margin-bottom: 10px; |
||||||
width: 69%; |
|
||||||
height: 400px; |
|
||||||
// border: 1px solid black; |
|
||||||
|
|
||||||
// background-color: pink; |
|
||||||
.total { |
|
||||||
border-radius: 20px; |
|
||||||
width: 360px; |
|
||||||
height: 120px; |
|
||||||
background-color: #74deff; |
|
||||||
background-image: linear-gradient(to right, #4984ff, #74deff); |
|
||||||
|
|
||||||
.content1 { |
|
||||||
border-radius: 20px; |
|
||||||
margin-top: 10px; |
|
||||||
width: 100%; |
|
||||||
height: 100px; |
|
||||||
background-color: #fff; |
|
||||||
background-image: linear-gradient(#c7e3ff, #ffffff); |
|
||||||
|
|
||||||
.textarea { |
|
||||||
width: 100%; |
|
||||||
resize: none; |
|
||||||
border: none; |
|
||||||
background: transparent; |
|
||||||
padding: 20px; |
|
||||||
// height: 100px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
.radar { |
.el-row:last-child { |
||||||
// float: left |
margin-bottom: 0; |
||||||
border-radius: 20px; |
|
||||||
width: 360px; |
|
||||||
margin-top: 50px; |
|
||||||
margin-right: 20px; |
|
||||||
height: 130px; |
|
||||||
background-color: #ffa674; |
|
||||||
background-image: linear-gradient(to right, #f9e397, #ffa674); |
|
||||||
} |
} |
||||||
|
|
||||||
.title { |
.el-col { |
||||||
padding-left: 30px; |
border-radius: 4px; |
||||||
font-size: 24px; |
// margin-right: 10px; |
||||||
font-weight: 600; |
|
||||||
color: #fff; |
|
||||||
height: 40px; |
|
||||||
line-height: 30px; |
|
||||||
padding-top: 10px; |
|
||||||
} |
} |
||||||
|
|
||||||
.radarmap { |
.grid-content { |
||||||
border-radius: 20px; |
border-radius: 6px; |
||||||
margin-top: 10px; |
margin-bottom: 20px; |
||||||
// margin-right: 20px; |
|
||||||
width: 100%; |
|
||||||
height: 180px; |
|
||||||
background-color: #fff; |
|
||||||
background-image: linear-gradient(#ffe9c7, #ffffff); |
|
||||||
} |
|
||||||
|
|
||||||
.objectives { |
|
||||||
// margin-top: 20px; |
|
||||||
margin-right: 20px; |
|
||||||
// float: right; |
|
||||||
border-radius: 20px; |
|
||||||
width: 650px; |
|
||||||
height: 230px; |
|
||||||
// background-color: #4984FFFF |
|
||||||
background-image: linear-gradient(to right, #4984ff, #74deff); |
|
||||||
} |
|
||||||
|
|
||||||
.objectivebottom { |
|
||||||
border-radius: 20px; |
|
||||||
margin-top: 10px; |
|
||||||
width: 100%; |
|
||||||
height: 350px; |
|
||||||
background-image: linear-gradient(#c7e3ff, #ffffff); |
|
||||||
|
|
||||||
.objectLi>li { |
|
||||||
// width: 545px; |
|
||||||
height: 250px; |
|
||||||
// margin: 40px; |
|
||||||
// background-color: #ffffff; |
|
||||||
border-radius: 5px; |
|
||||||
margin: 20px; |
|
||||||
|
|
||||||
.courseObject { |
|
||||||
height: 45px; |
|
||||||
line-height: 40px; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: space-between; |
|
||||||
padding: 0 20px; |
|
||||||
border-bottom: 1px solid #e7e7e7; |
|
||||||
|
|
||||||
.courseObject1 { |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
font-size: 14px; |
|
||||||
background-color: #6093ff; |
|
||||||
padding: 0px 16px; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.courseObject2 { |
|
||||||
font-size: 14px; |
|
||||||
color: #0052d9; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// overflow-y: auto |
|
||||||
.smallContent { |
|
||||||
// border-radius: 20px; |
|
||||||
padding: 10px; |
|
||||||
width: 100%; |
|
||||||
height: 200px; |
|
||||||
background-color: #fff; |
|
||||||
background-image: linear-gradient(#c7e3ff, #ffffff); |
|
||||||
} |
|
||||||
|
|
||||||
.small>li { |
|
||||||
// display: inline-flex; |
|
||||||
// width: 650px; |
|
||||||
height: 150px; |
|
||||||
// margin: 40px; |
|
||||||
background-color: #ffffff; |
|
||||||
border-radius: 5px; |
|
||||||
margin: 20px; |
|
||||||
|
|
||||||
.partObject { |
|
||||||
height: 45px; |
|
||||||
line-height: 40px; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: space-between; |
|
||||||
padding: 0 20px; |
|
||||||
border-bottom: 1px solid #e7e7e7; |
|
||||||
|
|
||||||
.partObject1 { |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
font-size: 14px; |
|
||||||
background-color: #6093ff; |
|
||||||
padding: 0px 16px; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.partObject2 { |
|
||||||
font-size: 14px; |
|
||||||
color: #0052d9; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.partObjectIntroduce { |
|
||||||
height: 149px; |
|
||||||
font-size: 16px; |
|
||||||
padding: 15px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
h3 { |
|
||||||
text-align: center; |
|
||||||
font-size: 36px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.point { |
|
||||||
width: 30%; |
|
||||||
height: 400px; |
|
||||||
// background-color: blue; |
|
||||||
|
|
||||||
.map { |
|
||||||
width: 100%; |
|
||||||
height: 260px; |
|
||||||
background-color: pink; |
|
||||||
} |
|
||||||
|
|
||||||
.knowledge { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
// border: 1px solid black; |
|
||||||
width: 100%; |
|
||||||
height: 129px; |
|
||||||
margin: 10px 0; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
.percent { |
|
||||||
margin-right: 13px; |
|
||||||
width: 150px; |
|
||||||
height: 129px; |
|
||||||
background: #ffffff; |
|
||||||
border-radius: 12px 12px 12px 12px; |
|
||||||
box-shadow: 0px 3px 13px 0px rgba(225, 232, 246, 0.76); |
|
||||||
|
|
||||||
span { |
|
||||||
display: block; |
|
||||||
font-family: Inter, Inter; |
|
||||||
font-weight: bold; |
|
||||||
font-size: 14px; |
|
||||||
color: #333333; |
|
||||||
margin-top: 10px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.core_knowledge { |
|
||||||
width: 100px; |
|
||||||
height: 129px; |
|
||||||
text-align: center; |
|
||||||
background: #ffffff; |
background: #ffffff; |
||||||
box-shadow: 0px 3px 13px 0px rgba(225, 232, 246, 0.76); |
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
border-radius: 12px 12px 12px 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.svg-element { |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.error_knowledge { |
|
||||||
width: 100px; |
|
||||||
height: 129px; |
|
||||||
text-align: center; |
|
||||||
background: #ffffff; |
|
||||||
box-shadow: 0px 3px 13px 0px rgba(225, 232, 246, 0.76); |
|
||||||
border-radius: 12px 12px 12px 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.text { |
|
||||||
display: block; |
|
||||||
font-family: Inter, Inter; |
|
||||||
font-weight: bold; |
|
||||||
font-size: 14px; |
|
||||||
color: #333333; |
|
||||||
margin-top: 15px; |
|
||||||
margin-bottom: 5px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.number { |
|
||||||
text-align: center; |
|
||||||
font-family: Inter, Inter; |
|
||||||
font-weight: bold; |
|
||||||
font-size: 24px; |
|
||||||
margin-left: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.bottom { |
|
||||||
margin-top: 20px; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
|
|
||||||
.chapters { |
|
||||||
width: 40%; |
|
||||||
height: 800px; |
|
||||||
background-color: red; |
|
||||||
} |
|
||||||
|
|
||||||
.chaptersDetails { |
|
||||||
width: 59%; |
|
||||||
height: 800px; |
|
||||||
background-color: yellow; |
|
||||||
|
|
||||||
.chaptersContent { |
|
||||||
width: 100%; |
|
||||||
height: 25%; |
|
||||||
background-color: purple; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue