parent
e23009186e
commit
f81777ec64
8 changed files with 4335 additions and 4940 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,292 @@ |
|||||||
|
<script setup> |
||||||
|
import * as echarts from 'echarts' |
||||||
|
import { onMounted } from 'vue' |
||||||
|
onMounted(() => { |
||||||
|
const chartDom = document.getElementById('main') |
||||||
|
|
||||||
|
const myChart = echarts.init(chartDom) |
||||||
|
const option = { |
||||||
|
title: { |
||||||
|
// text: 'Basic Radar Chart', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ['Allocated Budget', 'Actual Spending'], |
||||||
|
}, |
||||||
|
radar: { |
||||||
|
// shape: 'circle', |
||||||
|
indicator: [ |
||||||
|
{ name: '目标1', max: 6500 }, |
||||||
|
{ name: '目标6', max: 16000 }, |
||||||
|
{ name: 'Information Technology', max: 30000 }, |
||||||
|
{ name: 'Customer Support', max: 38000 }, |
||||||
|
{ name: 'Development', max: 52000 }, |
||||||
|
{ name: 'Marketing', max: 25000 }, |
||||||
|
], |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: 'Budget vs spending', |
||||||
|
type: 'radar', |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: [100, 3000, 20000, 35000, 50000, 18000], |
||||||
|
name: 'Allocated Budget', |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: [5000, 14000, 28000, 26000, 42000, 21000], |
||||||
|
name: 'Actual Spending', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
option && myChart.setOption(option) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="top"> |
||||||
|
<div class="object"> |
||||||
|
<h3>课程目标</h3> |
||||||
|
<div class="radar"> |
||||||
|
<div class="title">| 课程目标雷达图</div> |
||||||
|
|
||||||
|
<div id="main" class="radarmap"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="objectives"> |
||||||
|
<div class="title">| 课程目标</div> |
||||||
|
<div class="objectivebottom"> |
||||||
|
<el-scrollbar height="370px"> |
||||||
|
<ul class="objectLi"> |
||||||
|
<li> |
||||||
|
<div class="courseObject"> |
||||||
|
<div class="courseObject1"></div> |
||||||
|
<div class="courseObject2"> |
||||||
|
<el-button type="primary">新增</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="smallContent"> |
||||||
|
<el-scrollbar height="250px"> |
||||||
|
<ul class="small"> |
||||||
|
<li> |
||||||
|
<div class="partObject"> |
||||||
|
<div class="partObject1">课程目标</div> |
||||||
|
<div class="partObject2"> |
||||||
|
<el-button class="edit" type="text">编辑</el-button> |
||||||
|
<el-button class="destroy" type="text"> |
||||||
|
删除 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="partObjectIntroduce"></div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</el-scrollbar> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</el-scrollbar> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="point"> |
||||||
|
<div class="map"></div> |
||||||
|
<div class="knowledge"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="chapters"></div> |
||||||
|
<div class="chaptersDetails"> |
||||||
|
<div class="chaptersContent"></div> |
||||||
|
<div class="resource"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.top { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.object { |
||||||
|
// display: flex; |
||||||
|
// justify-content: space-between; |
||||||
|
width: 65%; |
||||||
|
height: 400px; |
||||||
|
border: 1px solid black; |
||||||
|
|
||||||
|
// background-color: pink; |
||||||
|
h3 { |
||||||
|
text-align: center; |
||||||
|
font-size: 36px; |
||||||
|
} |
||||||
|
|
||||||
|
.radar { |
||||||
|
float: left; |
||||||
|
border-radius: 20px; |
||||||
|
width: 300px; |
||||||
|
margin-left: 20px; |
||||||
|
margin-top: 20px; |
||||||
|
height: 230px; |
||||||
|
background-color: #ffa674; |
||||||
|
background-image: linear-gradient(to right, #f9e397, #ffa674); |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
padding-left: 30px; |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 600; |
||||||
|
color: #fff; |
||||||
|
height: 40px; |
||||||
|
line-height: 30px; |
||||||
|
padding-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.radarmap { |
||||||
|
border-radius: 20px; |
||||||
|
margin-top: 10px; |
||||||
|
// margin-right: 20px; |
||||||
|
width: 100%; |
||||||
|
height: 270px; |
||||||
|
background-color: #fff; |
||||||
|
background-image: linear-gradient(#ffe9c7, #ffffff); |
||||||
|
// width: 200px; |
||||||
|
// height: 200px; |
||||||
|
// padding: 20px; |
||||||
|
// 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: 270px; |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.point { |
||||||
|
width: 34%; |
||||||
|
height: 400px; |
||||||
|
background-color: blue; |
||||||
|
} |
||||||
|
|
||||||
|
.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> |
||||||
Loading…
Reference in new issue