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> |
||||
<div> |
||||
课程点赞 |
||||
</div> |
||||
<div>课程点赞</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
课程收藏 |
||||
</div> |
||||
<div>课程收藏</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
学习过程 |
||||
</div> |
||||
<div>学习过程</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
课程目标 |
||||
</div> |
||||
<div>课程目标</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
课程基本信息 |
||||
</div> |
||||
<div>课程基本信息</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
课程章节 |
||||
</div> |
||||
<div>课程章节</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
课程图谱 |
||||
</div> |
||||
<div>课程图谱</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
知识点 |
||||
</div> |
||||
<div>知识点</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,58 @@ |
||||
<template> |
||||
<div> |
||||
学习路径推荐 |
||||
<svg-icon |
||||
@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> |
||||
<!-- 学习路径推荐 --> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
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> |
||||
|
||||
<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> |
||||
|
||||
@ -1,14 +1,542 @@ |
||||
<template> |
||||
<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 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> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
<script lang="ts" setup> |
||||
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> |
||||
|
||||
<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> |
||||
|
||||
@ -1,14 +1,353 @@ |
||||
<template> |
||||
<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> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
<div class="main"> |
||||
<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> |
||||
|
||||
<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> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
知识点学习 |
||||
</div> |
||||
<div>知识点学习</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
Loading…
Reference in new issue