Compare commits
1 Commits
4fe89b0398
...
b44aaf3849
| Author | SHA1 | Date |
|---|---|---|
aaaa
|
b44aaf3849 | 6 months ago |
50 changed files with 2065 additions and 115 deletions
|
After Width: | Height: | Size: 548 KiB |
|
After Width: | Height: | Size: 183 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 548 KiB |
|
After Width: | Height: | Size: 183 KiB |
|
After Width: | Height: | Size: 466 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 437 B |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>课程点赞</div> |
||||||
课程点赞 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>课程收藏</div> |
||||||
课程收藏 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>学习过程</div> |
||||||
学习过程 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>课程目标</div> |
||||||
课程目标 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>课程基本信息</div> |
||||||
课程基本信息 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>课程章节</div> |
||||||
课程章节 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>课程图谱</div> |
||||||
课程图谱 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>知识点</div> |
||||||
知识点 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,14 +1,58 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
学习路径推荐 |
<svg-icon |
||||||
</div> |
@click="changePraise()" |
||||||
|
v-if="!flog" |
||||||
|
name="dianzan" |
||||||
|
width="32px" |
||||||
|
height="32px" |
||||||
|
/> |
||||||
|
<svg-icon |
||||||
|
@click="changePraise()" |
||||||
|
v-else |
||||||
|
name="dianzanred" |
||||||
|
width="32px" |
||||||
|
height="32px" |
||||||
|
/> |
||||||
|
<!-- <push-button @click="changePraise()"><div class="a"><img src="/src/assets/images/点赞.png" width="100%" height="100%"></div>点赞呀</push-button> --> |
||||||
|
<h1>已被点赞{{ praise }}次</h1> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
<!-- 学习路径推荐 --> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import { ref } from 'vue' |
||||||
|
const praise = ref(1000) |
||||||
|
const flog = ref(false) |
||||||
|
const changePraise = (num = 1) => { |
||||||
|
if (!flog.value) { |
||||||
|
praise.value++ |
||||||
|
flog.value = !flog.value |
||||||
|
} else { |
||||||
|
praise.value-- |
||||||
|
flog.value = !flog.value |
||||||
|
} |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped> |
||||||
|
.a { |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
// display: none; |
||||||
|
} |
||||||
|
.a:hover { |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
// display: block; |
||||||
|
// background-image: url('/src/assets/images/点赞(1).png'); |
||||||
|
// background-size: 100% 100%; |
||||||
|
} |
||||||
|
.push-button { |
||||||
|
// width: 50px; |
||||||
|
// height: 50px; |
||||||
|
// background-color: khaki; |
||||||
|
// background-image: url('/src/assets/images/点赞.png'); |
||||||
|
// background-size: 100% 100%; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,14 +1,542 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
课程首页 |
<!-- <div class="nav"> |
||||||
|
<div class="icon"></div> |
||||||
|
<div class="txt"> |
||||||
|
<h1>通讯与网络</h1> |
||||||
|
<p>张三</p> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> --> |
||||||
|
<div class="main"> |
||||||
|
<div class="title"> |
||||||
|
<div class="icon"></div> |
||||||
|
<div class="right"> |
||||||
|
<h1>通讯与网络</h1> |
||||||
|
|
||||||
|
<div class="btn">编辑</div> |
||||||
|
<p> |
||||||
|
本课程讲授通讯与网络的基本概念，涉及计算机网络的发展和原理体系结构、物理层、 |
||||||
|
数据链路层、网络层、运输层、应用层等计算机网络通讯的整个过程。内容包括通讯与网络 |
||||||
|
的基本概念、计算机网络的体 |
||||||
|
系结构、数据通信基础、流量控制和拥塞控制、TCP/IP |
||||||
|
协议簇的基本原理等内容。 |
||||||
|
</p> |
||||||
|
<div class="bottom"> |
||||||
|
<a>总学时： 36学时</a> |
||||||
|
<a>总学分： 2.0分</a> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<a>已分配学时： 20学时</a> |
||||||
|
<a>章节数： 10章</a> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<a>未分配学时： 16学时</a> |
||||||
|
<a>知识点章节总数： 33个</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="list"> |
||||||
|
<div class="icon"></div> |
||||||
|
|
||||||
|
<p style="font-size: 20px; margin-bottom: 20px; color: #000"> |
||||||
|
学习章节 |
||||||
|
</p> |
||||||
|
<el-tree |
||||||
|
style="width: 100%; font-size: 15px" |
||||||
|
:data="dataSource" |
||||||
|
show-checkbox |
||||||
|
node-key="id" |
||||||
|
default-expand-all |
||||||
|
:expand-on-click-node="false" |
||||||
|
> |
||||||
|
<template #default="{ node, data }"> |
||||||
|
<span class="custom-tree-node"> |
||||||
|
<span>{{ node.label }}</span> |
||||||
|
<span> |
||||||
|
<a @click="append(data)">添加</a> |
||||||
|
<a style="margin-left: 8px" @click="remove(node, data)">删除</a> |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-tree> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
|
<div class="sidebar"> |
||||||
|
<div class="content"> |
||||||
|
<h3>课程目标</h3> |
||||||
|
<div class="btn">了解更多</div> |
||||||
|
<a> |
||||||
|
课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程 |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="column" style=""> |
||||||
|
<div class="icon"></div> |
||||||
|
<h3>查看资源</h3> |
||||||
|
<ul> |
||||||
|
<h2>第一章</h2> |
||||||
|
<p>第2小节</p> |
||||||
|
<li> |
||||||
|
<div class="btn">知识点</div> |
||||||
|
<p>知识点详情，知识点内容</p> |
||||||
|
<div class="icon"></div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<ul> |
||||||
|
<h2>第一章</h2> |
||||||
|
<p>第2小节</p> |
||||||
|
<li> |
||||||
|
<div class="btn">知识点</div> |
||||||
|
<p>知识点详情，知识点内容</p> |
||||||
|
<div class="icon"></div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<ul> |
||||||
|
<h2>第一章</h2> |
||||||
|
<p>第2小节</p> |
||||||
|
<li> |
||||||
|
<div class="btn">知识点</div> |
||||||
|
<p>知识点详情，知识点内容</p> |
||||||
|
<div class="icon"></div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import { ref } from 'vue' |
||||||
|
let id = 1000 |
||||||
|
const append = (data: any) => { |
||||||
|
const newChild = { id: id++, label: '请输入新章节', children: [] } |
||||||
|
if (!data.children) { |
||||||
|
data.children = [] |
||||||
|
} |
||||||
|
data.children.push(newChild) |
||||||
|
dataSource.value = [...dataSource.value] |
||||||
|
} |
||||||
|
|
||||||
|
const remove = (node: any, data: any) => { |
||||||
|
const parent = node.parent |
||||||
|
const children: any = parent.data.children || parent.data |
||||||
|
const index = children.findIndex((d: any) => d.id === data.id) |
||||||
|
children.splice(index, 1) |
||||||
|
dataSource.value = [...dataSource.value] |
||||||
|
} |
||||||
|
|
||||||
|
// const renderContent = ( |
||||||
|
// h:any, |
||||||
|
// { |
||||||
|
// node, |
||||||
|
// data, |
||||||
|
// store, |
||||||
|
// }: { |
||||||
|
// node: any |
||||||
|
// data: any |
||||||
|
// store: any['store'] |
||||||
|
// } |
||||||
|
// ) => { |
||||||
|
// return h( |
||||||
|
// 'span', |
||||||
|
// { |
||||||
|
// class: 'custom-tree-node', |
||||||
|
// }, |
||||||
|
// h('span', null, node.label), |
||||||
|
// h( |
||||||
|
// 'span', |
||||||
|
// null, |
||||||
|
// h( |
||||||
|
// 'a', |
||||||
|
// { |
||||||
|
// onClick: () => append(data), |
||||||
|
// }, |
||||||
|
// 'Append ' |
||||||
|
// ), |
||||||
|
// h( |
||||||
|
// 'a', |
||||||
|
// { |
||||||
|
// style: 'margin-left: 8px', |
||||||
|
// onClick: () => remove(node, data), |
||||||
|
// }, |
||||||
|
// 'Delete' |
||||||
|
// ) |
||||||
|
// ) |
||||||
|
// ) |
||||||
|
// } |
||||||
|
|
||||||
|
const dataSource = ref<any>([ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
label: '01/基本概念', |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
label: '1-1 基本概念', |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
id: 9, |
||||||
|
label: '1-1-1 基本概念', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 10, |
||||||
|
label: '1-1-2 基本概念', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
label: '02/章节名', |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
label: '2-1 章节名字', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
label: '2-2 章节名字', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
label: '03/章节名字', |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
id: 7, |
||||||
|
label: '3-1 章节名字', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 8, |
||||||
|
label: '3-2 章节名字', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
label: '04/章节名字', |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
id: 9, |
||||||
|
label: '4-1 章节名字', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 10, |
||||||
|
label: '4-2 章节名字', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
]) |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped> |
||||||
|
ul { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
body { |
||||||
|
/* 宽度占浏览器可视区域的宽度 */ |
||||||
|
width: 100vm; |
||||||
|
/* height: 1500px; */ |
||||||
|
background-color: #f6f6f6; |
||||||
|
} |
||||||
|
.nav { |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
background-color: #797a82; |
||||||
|
} |
||||||
|
.nav .icon { |
||||||
|
width: 10%; |
||||||
|
height: 90%; |
||||||
|
margin-top: 5px; |
||||||
|
float: left; |
||||||
|
background-image: url('/src/assets/images/kc.jpg'); |
||||||
|
background-size: 100% 100%; |
||||||
|
border-radius: 20px 20px 20px 20px; |
||||||
|
} |
||||||
|
.nav .txt { |
||||||
|
width: 10%; |
||||||
|
height: 100%; |
||||||
|
float: left; |
||||||
|
margin-left: 15px; |
||||||
|
background-color: #5577ff; |
||||||
|
// border-left: 1px solid #252529 |
||||||
|
} |
||||||
|
.nav h1 { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 35px; |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
.nav p { |
||||||
|
// font-size: 18px; |
||||||
|
line-height: 25px; |
||||||
|
color: #252529; |
||||||
|
} |
||||||
|
.main { |
||||||
|
width: 75%; |
||||||
|
height: 900px; |
||||||
|
float: left; |
||||||
|
// background-color: bisque |
||||||
|
} |
||||||
|
.main .title { |
||||||
|
width: 90%; |
||||||
|
margin: auto; |
||||||
|
height: 25%; |
||||||
|
// background-color: blueviolet |
||||||
|
} |
||||||
|
.main .title .icon { |
||||||
|
width: 34%; |
||||||
|
height: 80%; |
||||||
|
margin-top: 20px; |
||||||
|
background-color: antiquewhite; |
||||||
|
float: left; |
||||||
|
background-image: url('/src/assets/images/kc.jpg'); |
||||||
|
background-size: 100% 100%; |
||||||
|
border-radius: 20px 20px 20px 20px; |
||||||
|
} |
||||||
|
.main .title .right { |
||||||
|
width: 61%; |
||||||
|
height: 80%; |
||||||
|
margin-left: 30px; |
||||||
|
margin-top: 20px; |
||||||
|
// background-color: antiquewhite; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.main .title .right h1 { |
||||||
|
height: 20px; |
||||||
|
color: #5577ff; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: bolder; |
||||||
|
letter-spacing: 1px; |
||||||
|
// background-color: antiquewhite; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.main .title .right p { |
||||||
|
height: 20px; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 16px; |
||||||
|
color: #797a82; |
||||||
|
padding-top: 7px; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.main .title .right .bottom { |
||||||
|
width: 30.6%; |
||||||
|
height: 30%; |
||||||
|
float: left; |
||||||
|
margin-left: 10px; |
||||||
|
margin-top: 16.5%; |
||||||
|
// background-color: #5577FF |
||||||
|
} |
||||||
|
.main .title .right a { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
height: 28px; |
||||||
|
font-size: 12px; |
||||||
|
color: #0d0d11; |
||||||
|
// padding-top: 50px; |
||||||
|
// float: left; |
||||||
|
} |
||||||
|
.main .title .right .btn { |
||||||
|
width: 14%; |
||||||
|
height: 16%; |
||||||
|
font-size: 15px; |
||||||
|
background-color: #5577ff; |
||||||
|
color: #f6f6f6; |
||||||
|
text-align: center; |
||||||
|
line-height: 25px; |
||||||
|
border-radius: 14px 14px 14px 14px; |
||||||
|
float: left; |
||||||
|
margin-left: 58%; |
||||||
|
} |
||||||
|
.main .title .right .btn:hover { |
||||||
|
background-color: #185cd2; |
||||||
|
} |
||||||
|
.main .list { |
||||||
|
width: 100%; |
||||||
|
height: 57.3%; |
||||||
|
margin: auto; |
||||||
|
padding: 20px 10px; |
||||||
|
background-color: #ffffff; |
||||||
|
border-radius: 20px 20px 20px 20px; |
||||||
|
} |
||||||
|
.main .list .icon { |
||||||
|
width: 3%; |
||||||
|
height: 5%; |
||||||
|
margin-top: px; |
||||||
|
// background-color: antiquewhite; |
||||||
|
float: left; |
||||||
|
background-image: url('/src/assets/images/rwd.png'); |
||||||
|
background-size: 100% 100%; |
||||||
|
// border-radius: 20px 20px 20px 20px; |
||||||
|
} |
||||||
|
.sidebar { |
||||||
|
width: 22%; |
||||||
|
height: 800px; |
||||||
|
float: left; |
||||||
|
margin-left: 20px; |
||||||
|
// background-color: rgb(84, 50, 9) |
||||||
|
} |
||||||
|
.sidebar .content { |
||||||
|
width: 100%; |
||||||
|
height: 20%; |
||||||
|
border-radius: 14px 14px 14px 14px; |
||||||
|
border-left: 4px solid #5577ff; |
||||||
|
background-color: #ffffff; |
||||||
|
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
.sidebar .content h3 { |
||||||
|
color: #0d0d11; |
||||||
|
height: 30px; |
||||||
|
font-size: 15px; |
||||||
|
font-weight: bolder; |
||||||
|
margin-left: 15px; |
||||||
|
float: left; |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
.sidebar .content .btn { |
||||||
|
width: 30%; |
||||||
|
height: 13%; |
||||||
|
font-size: 11px; |
||||||
|
background-color: #ebecfc; |
||||||
|
color: #4f86e5; |
||||||
|
text-align: center; |
||||||
|
font-weight: bolder; |
||||||
|
float: right; |
||||||
|
line-height: 20px; |
||||||
|
margin-top: 10px; |
||||||
|
border-radius: 14px 14px 14px 14px; |
||||||
|
} |
||||||
|
.sidebar .content .btn:hover { |
||||||
|
background-color: #185cd2; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
.sidebar .content a { |
||||||
|
color: #797a82; |
||||||
|
height: 50px; |
||||||
|
width: 90%; |
||||||
|
font-size: 15px; |
||||||
|
line-height: 20px; |
||||||
|
margin-left: 15px; |
||||||
|
float: left; |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
.sidebar .column { |
||||||
|
width: 100%; |
||||||
|
height: 70%; |
||||||
|
margin-top: 20px; |
||||||
|
border-radius: 14px 14px 14px 14px; |
||||||
|
background-color: #ffffff; |
||||||
|
box-shadow: 1px 1px 1px 0.1px rgba(0.2, 1, 1, 0.2); |
||||||
|
} |
||||||
|
.sidebar .column .icon { |
||||||
|
width: 13%; |
||||||
|
height: 5%; |
||||||
|
float: left; |
||||||
|
margin-left: 10px; |
||||||
|
margin-top: 10px; |
||||||
|
background-image: url('/src/assets/images/ck.png'); |
||||||
|
background-size: 100% 100%; |
||||||
|
} |
||||||
|
.sidebar .column h3 { |
||||||
|
color: #16161b; |
||||||
|
height: 30px; |
||||||
|
font-size: 15px; |
||||||
|
font-weight: bolder; |
||||||
|
margin-left: 15px; |
||||||
|
float: left; |
||||||
|
line-height: 45px; |
||||||
|
} |
||||||
|
.sidebar .column ul { |
||||||
|
width: 90%; |
||||||
|
height: 28%; |
||||||
|
float: left; |
||||||
|
margin-top: 10px; |
||||||
|
margin-left: 12px; |
||||||
|
text-decoration: none; |
||||||
|
// border-left:1px solid #505053 ; |
||||||
|
// background-color: #4F86E5 |
||||||
|
} |
||||||
|
.sidebar .column ul h2 { |
||||||
|
color: #0d0d11; |
||||||
|
height: 30px; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: bolder; |
||||||
|
// margin-left: 15px; |
||||||
|
float: left; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
.sidebar .column ul p { |
||||||
|
color: #252529; |
||||||
|
height: 30px; |
||||||
|
font-size: 11px; |
||||||
|
// font-weight:bolder; |
||||||
|
margin-left: 15px; |
||||||
|
float: left; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
.sidebar .column ul li { |
||||||
|
width: 90%; |
||||||
|
height: 80%; |
||||||
|
float: left; |
||||||
|
margin-left: 20px; |
||||||
|
text-decoration: none; |
||||||
|
border-left: 1px solid #d4d4df; |
||||||
|
// background-color: #9fb8e3 |
||||||
|
} |
||||||
|
.sidebar .column ul li .btn { |
||||||
|
width: 30%; |
||||||
|
height: 15%; |
||||||
|
float: left; |
||||||
|
margin-left: 20px; |
||||||
|
color: #ebecfc; |
||||||
|
line-height: 20px; |
||||||
|
font-size: 11px; |
||||||
|
text-align: center; |
||||||
|
border-radius: 5px 5px 5px 5px; |
||||||
|
background-color: #56df7d; |
||||||
|
} |
||||||
|
.sidebar .column ul li p { |
||||||
|
line-height: 30px; |
||||||
|
height: 10%; |
||||||
|
font-size: 11.5px; |
||||||
|
float: left; |
||||||
|
margin-left: 22px; |
||||||
|
text-decoration: none; |
||||||
|
color: #0d0d11; |
||||||
|
} |
||||||
|
.sidebar .column ul li .icon { |
||||||
|
width: 89%; |
||||||
|
height: 50%; |
||||||
|
margin-top: 20px; |
||||||
|
float: left; |
||||||
|
margin-left: 20px; |
||||||
|
background-image: url('/src/assets/images/zy.jpg'); |
||||||
|
background-size: 100% 100%; |
||||||
|
} |
||||||
|
// .app-container { |
||||||
|
// padding: 30px 140px; |
||||||
|
// font-size: 14px; |
||||||
|
// } |
||||||
|
|
||||||
|
// .tree-manager { |
||||||
|
// width: 50px; |
||||||
|
// display: inline-block; |
||||||
|
// margin: 10px; |
||||||
|
// } |
||||||
|
::v-deep .custom-tree-node { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding-right: 30px; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,14 +1,353 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
课程报告 |
<div class="header"> |
||||||
|
<h1>课程报告</h1> |
||||||
|
|
||||||
|
<div class="content"> |
||||||
|
<div class="box"> |
||||||
|
<div class="icon"> |
||||||
|
<img |
||||||
|
src="/src/assets/images/小旗子.png" |
||||||
|
width="100%" |
||||||
|
height="100%" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<p>学习进度统计</p> |
||||||
|
</div> |
||||||
|
<a style="color: #d81e06">Learning progress statistics</a> |
||||||
|
<b style="color: #d81e06">40</b> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="box"> |
||||||
|
<div class="icon"> |
||||||
|
<img |
||||||
|
src="/src/assets/images/知识点.png" |
||||||
|
width="100%" |
||||||
|
height="100%" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<p>知识点数统计</p> |
||||||
|
</div> |
||||||
|
<a style="color: #ff8b00">Knowledge point statistics</a> |
||||||
|
<b style="color: #ff8b00">30</b> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="box"> |
||||||
|
<div class="icon"> |
||||||
|
<img |
||||||
|
src="/src/assets/images/统计计算.png" |
||||||
|
width="100%" |
||||||
|
height="100%" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<p>学习人数统计</p> |
||||||
|
</div> |
||||||
|
<a style="margin-top: 25px; margin-left: 60px; color: #4b81d7"> |
||||||
|
Student count |
||||||
|
</a> |
||||||
|
<b style="color: #4b81d7">0</b> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="box"> |
||||||
|
<div class="icon"> |
||||||
|
<img src="/src/assets/images/课程.png" width="100%" height="100%" /> |
||||||
|
</div> |
||||||
|
<p>学习课程统计</p> |
||||||
|
</div> |
||||||
|
<a style="margin-top: 25px; margin-left: 60px; color: #08b762"> |
||||||
|
Course statistics |
||||||
|
</a> |
||||||
|
<b style="color: #08b762">10</b> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="search"> |
||||||
|
<form> |
||||||
|
<input type="text" placeholder="输入文本进行搜索" /> |
||||||
|
<div class="icon"> |
||||||
|
<img src="/src/assets/images/搜索.png" width="100%" height="100%" /> |
||||||
|
</div> |
||||||
|
<!-- <input type="image" src="/src/assets/images/搜索.png" > --> |
||||||
|
</form> |
||||||
</div> |
</div> |
||||||
</template> |
|
||||||
|
|
||||||
<script lang='ts' setup> |
<div class="main"> |
||||||
import { } from 'vue' |
<el-table |
||||||
|
:data="dataSource" |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-around; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
prop="course" |
||||||
|
label="课程名称" |
||||||
|
width="180" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
prop="date" |
||||||
|
label="知识点个数" |
||||||
|
width="180" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
prop="time" |
||||||
|
label="知识点学时" |
||||||
|
width="180" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
prop="proportion" |
||||||
|
label="知识点占比" |
||||||
|
width="180" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
prop="student" |
||||||
|
label="学习人数统计" |
||||||
|
width="180" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
prop="credet" |
||||||
|
label="课程学分" |
||||||
|
width="180" |
||||||
|
></el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="download">点击此按钮导出报告</div> |
||||||
|
<div class="a"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { ref } from 'vue' |
||||||
|
const dataSource = ref([ |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
course: '数学', |
||||||
|
date: '50', |
||||||
|
time: '24h', |
||||||
|
proportion: '89%', |
||||||
|
student: '220人', |
||||||
|
credet: 2, |
||||||
|
}, |
||||||
|
]) |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped> |
||||||
|
ul { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
body { |
||||||
|
/* 宽度占浏览器可视区域的宽度 */ |
||||||
|
width: 100vm; |
||||||
|
/* height: 1500px; */ |
||||||
|
background-color: #f6f6f6; |
||||||
|
} |
||||||
|
.header { |
||||||
|
width: 95%; |
||||||
|
height: 250px; |
||||||
|
margin: auto; |
||||||
|
// background-color: aquamarine |
||||||
|
} |
||||||
|
.header h1 { |
||||||
|
font-size: 20px; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.header .content { |
||||||
|
width: 20%; |
||||||
|
height: 65%; |
||||||
|
// background-color: bisque; |
||||||
|
background-color: #ffffff; |
||||||
|
border-radius: 10px 10px 10px 10px; |
||||||
|
float: left; |
||||||
|
margin-left: 40px; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.header .content .icon { |
||||||
|
width: 24.5%; |
||||||
|
height: 62%; |
||||||
|
float: left; |
||||||
|
// margin-left: 1px; |
||||||
|
margin-top: 13px; |
||||||
|
} |
||||||
|
.header .content .box { |
||||||
|
width: 65%; |
||||||
|
height: 30%; |
||||||
|
// background-color: #f6f6f6; |
||||||
|
margin: auto; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.header .content a { |
||||||
|
font-size: 14.5px; |
||||||
|
height: 10%; |
||||||
|
float: left; |
||||||
|
margin-left: 20px; |
||||||
|
margin-top: 20px; |
||||||
|
// font-weight:bolder; |
||||||
|
} |
||||||
|
.header .content b { |
||||||
|
font-size: 30px; |
||||||
|
height: 10%; |
||||||
|
margin: auto; |
||||||
|
float: left; |
||||||
|
margin-top: 15px; |
||||||
|
margin-left: 100px; |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
.header .content p { |
||||||
|
color: #000; |
||||||
|
font-size: 15px; |
||||||
|
height: 10%; |
||||||
|
float: left; |
||||||
|
// text-align: center; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 3px; |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
.search { |
||||||
|
width: 75%; |
||||||
|
height: 30px; |
||||||
|
background-color: paleturquoise; |
||||||
|
margin: auto; |
||||||
|
border-radius: 10px 10px 10px 10px; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.search input { |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
text-indent: 5px; |
||||||
|
font-size: 16px; |
||||||
|
/* border: none; */ |
||||||
|
// text-align: center; |
||||||
|
background-color: #fffefe; |
||||||
|
border-radius: 10px 10px 10px 10px; |
||||||
|
border: 1px solid #75aade; |
||||||
|
/* border-bottom: 1px solid #ddd; */ |
||||||
|
outline: none; |
||||||
|
// margin: 12px auto; |
||||||
|
} |
||||||
|
.search .icon { |
||||||
|
width: 40px; |
||||||
|
height: 35px; |
||||||
|
position: relative; |
||||||
|
top: -37px; |
||||||
|
left: 93%; |
||||||
|
} |
||||||
|
.search .icon:hover { |
||||||
|
width: 41px; |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
// .search form{ |
||||||
|
// width: 190px; |
||||||
|
// height: 30px; |
||||||
|
// border: 1px solid #C1C1C1; |
||||||
|
// border-radius: 3px; |
||||||
|
// } |
||||||
|
.main { |
||||||
|
width: 90%; |
||||||
|
height: 450px; |
||||||
|
// background-color: #75aade; |
||||||
|
// border-radius: 10px 10px 10px 10px; |
||||||
|
margin: auto; |
||||||
|
margin-top: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
// 导出ptf下载 |
||||||
|
|
||||||
|
.download { |
||||||
|
width: 15%; |
||||||
|
height: 24px; |
||||||
|
float: right; |
||||||
|
margin-right: 60px; |
||||||
|
margin-top: 20px; |
||||||
|
// margin-bottom: 20px; |
||||||
|
// margin-left: 0px; |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
line-height: 23px; |
||||||
|
color: #75aade; |
||||||
|
background-color: #ffffff; |
||||||
|
box-shadow: 1px 1px 1px 0.1px rgba(0.2, 1, 1, 0.2); |
||||||
|
border-radius: 10px 10px 10px 10px; |
||||||
|
} |
||||||
|
.download:hover { |
||||||
|
background-color: #75aade; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.a { |
||||||
|
width: 100%; |
||||||
|
float: left; |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
.el-table_header-wrapper { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,14 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div>知识点学习</div> |
||||||
知识点学习 |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { } from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
|||||||
Loading…
Reference in new issue