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