Compare commits
4 Commits
4fe89b0398
...
855904b53d
| Author | SHA1 | Date |
|---|---|---|
aaaa
|
855904b53d | 6 months ago |
|
aaaa
|
a86a3ef515 | 6 months ago |
|
aaaa
|
b78eadc89d | 6 months ago |
|
aaaa
|
b44aaf3849 | 6 months ago |
60 changed files with 1809 additions and 83 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: 1.3 MiB |
|
After Width: | Height: | Size: 637 KiB |
|
After Width: | Height: | Size: 596 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 97 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: 1.8 MiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 12 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> |
||||
<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> |
||||
<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> |
||||
<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> |
||||
<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> |
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,29 @@ |
||||
<template> |
||||
<div> |
||||
学习路径推荐 |
||||
</div> |
||||
<e-charts class="chart" :option="option" /> |
||||
</template> |
||||
<!-- 学习路径推荐 --> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue'; |
||||
const option = ref({ |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [150, 230, 224, 218, 135, 147, 260], |
||||
type: 'line' |
||||
} |
||||
] |
||||
}); |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
<style lang="scss" scoped> |
||||
.chart { |
||||
height: 400px; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,14 +1,556 @@ |
||||
<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="icon"><img src="/src/assets/images/rjgz.jpg" width="100%" height="100%"></div> |
||||
<!-- <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> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
<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 { 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 .icon{ |
||||
width: 100%; |
||||
height: 20%; |
||||
} |
||||
.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 { |
||||
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> |
||||
|
||||
@ -1,14 +1,499 @@ |
||||
<template> |
||||
<div> |
||||
网站首页 |
||||
<!-- <div>网站首页面</div> --> |
||||
<div class="header"> |
||||
<div class="logo"></div> |
||||
<div class="nav"> |
||||
<div class="nav1"> |
||||
<ul> |
||||
<li>企业入口 |</li> |
||||
<li>教师入口 |</li> |
||||
<li>学生入口 |</li> |
||||
<li>毕业生入口</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
</template> |
||||
<div class="nav2"> |
||||
<ul> |
||||
<li><a>学生首页</a></li> |
||||
<li><a>专业概况</a></li> |
||||
<li><a>教学改革</a></li> |
||||
<li><a>科学研就</a></li> |
||||
<li><a>人才培养</a></li> |
||||
<li><a>成果展示</a></li> |
||||
<li><a>产教结合</a></li> |
||||
<li><a>日常教学</a></li> |
||||
<li><a>优秀学生</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="inco"></div> --> |
||||
<h1>知识图谱</h1> |
||||
<p>(专业代码 ：080902H)</p> |
||||
</div> |
||||
<div class="content"> |
||||
<el-scrollbar height="1500px"> |
||||
<div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);"> |
||||
<div class="icon" style=" background-image: url('/src/assets/images/bj2.png'); |
||||
background-size: 100% 100%;"> |
||||
<div class="content"> |
||||
<img src="/src/assets/images/tp.png"> |
||||
</div> |
||||
<h1>《计算机导论》</h1> |
||||
<button></button> |
||||
</div> |
||||
<div class="icon1"> |
||||
<div class="icon"><img src="/src/assets/images/kc1.png"></div> |
||||
<div class="icon"><img src="/src/assets/images/kc2.png"></div> |
||||
<div class="icon"><img src="/src/assets/images/kc3.png"></div> |
||||
</div> |
||||
<div class="txt"> |
||||
<h1> 课程简介</h1> |
||||
<div class="p"> |
||||
<p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导 |
||||
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div> |
||||
<div class="box"> |
||||
<p style="font-size: 14px;color: #6B6B6B;">总学时 ：36小时</p> |
||||
<p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p> |
||||
<p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p> |
||||
<p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="content1"> |
||||
<div class="txt"> |
||||
<h1> 课程简介</h1> |
||||
<div class="p"> |
||||
<p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导 |
||||
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div> |
||||
<div class="box"> |
||||
<p style="font-size: 14px;">总学时 ：36小时</p> |
||||
<p style="font-size: 14px;">总学分 ：2.0分</p> |
||||
<p style="font-size: 14px;">章节数 ：10章</p> |
||||
<p style="font-size: 14px;">知识点总数 ：33个</p> |
||||
</div> |
||||
</div> |
||||
<div class="icon" style=" background-image: url('/src/assets/images/bj1.png'); "> |
||||
<div class="content"> |
||||
<img src="/src/assets/images/tp.png"> |
||||
</div> |
||||
<h1>《计算机导论》</h1> |
||||
<button></button> |
||||
</div> |
||||
<div class="icon1"> |
||||
<div class="icon"><img src="/src/assets/images/kc1.png"></div> |
||||
<div class="icon"><img src="/src/assets/images/kc2.png"></div> |
||||
<div class="icon"><img src="/src/assets/images/kc3.png"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
<div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);"> |
||||
<div class="icon" style=" background-image: url('/src/assets/images/bj2.png'); |
||||
background-size: 100% 100%;"> |
||||
<div class="content"> |
||||
<img src="/src/assets/images/tp.png"> |
||||
</div> |
||||
<h1>《计算机导论》</h1> |
||||
<button></button> |
||||
</div> |
||||
<div class="icon1"> |
||||
<div class="icon"> <img src="/src/assets/images/kc1.png"></div> |
||||
<div class="icon"><img src="/src/assets/images/kc2.png"></div> |
||||
<div class="icon"><img src="/src/assets/images/kc3.png"></div> |
||||
</div> |
||||
<div class="txt"> |
||||
<h1> 课程简介</h1> |
||||
<div class="p"> |
||||
<p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导 |
||||
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div> |
||||
<div class="box"> |
||||
<p style="font-size: 14px;color: #6B6B6B;">总学时 ：36小时</p> |
||||
<p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p> |
||||
<p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p> |
||||
<p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="content1"> |
||||
<div class="txt"> |
||||
<h1> 课程简介</h1> |
||||
<div class="p"> |
||||
<p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导 |
||||
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div> |
||||
<div class="box"> |
||||
<!-- <p style="font-size: 14px;">总学时 ：36小时</p>{{userList.}} --> |
||||
<p style="font-size: 14px;">总学时 ：36小时</p> |
||||
<p style="font-size: 14px;">总学分 ：2.0分</p> |
||||
<p style="font-size: 14px;">章节数 ：10章</p> |
||||
<p style="font-size: 14px;">知识点总数 ：33个</p> |
||||
</div> |
||||
</div> |
||||
<div class="icon" style=" background-image: url('/src/assets/images/bj1.png'); "> |
||||
<div class="content"> |
||||
<img src="/src/assets/images/tp.png"> |
||||
</div> |
||||
<h1>《计算机导论》 {{ userList.name }}</h1> |
||||
<button></button> |
||||
</div> |
||||
<div class="icon1"> |
||||
<div class="icon"><img src="/src/assets/images/kc1.png"></div> |
||||
<div class="icon"><img src="/src/assets/images/kc2.png"></div> |
||||
<div class="icon"><img src="/src/assets/images/kc3.png"></div> |
||||
</div> |
||||
</div> |
||||
</el-scrollbar> |
||||
</div> |
||||
|
||||
<!-- 底部 --> |
||||
<div class="footer"> |
||||
<h3>软件工程专业</h3> |
||||
<h1>教学一体化平台</h1> |
||||
<p>关于我们 | 联系我们 | 服务协议 |
||||
</p> |
||||
<p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br> |
||||
违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p> |
||||
</div> |
||||
<div></div> |
||||
<!-- {{ userList }} --> |
||||
</template> |
||||
// @ts-expect-error |
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue' |
||||
|
||||
import { getUserInfo } from '@/api/user' |
||||
const userList = ref<any>([]) |
||||
const getUserListEvent = async () => { |
||||
try { |
||||
const res = await getUserInfo() |
||||
userList.value = res |
||||
console.log(res); |
||||
} catch (error) { |
||||
console.log(error); |
||||
} |
||||
} |
||||
getUserListEvent() |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
<style lang="scss" scoped> |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
/* box-sizing: border-box; */ |
||||
/* font: 14px/28px "微软雅黑"; */ |
||||
} |
||||
|
||||
ul { |
||||
list-style: none; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
body { |
||||
/* 宽度占浏览器可视区域的宽度 */ |
||||
width: 100vm; |
||||
// position: relative; |
||||
// display:flex; |
||||
// justify-content:center;i |
||||
/* height: 1500px; */ |
||||
// background-color: #FFFFFF; |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
// 头 |
||||
.header { |
||||
width: 100%; |
||||
height: 300px; |
||||
background-image: url('/src/assets/images/top.png'); |
||||
background-size: 100% 100%; |
||||
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff); |
||||
|
||||
|
||||
} |
||||
|
||||
// 导航栏 |
||||
.header .nav { |
||||
width: 95%; |
||||
height: 100px; |
||||
// background-color: #3D78F5; |
||||
} |
||||
|
||||
.header .nav1 { |
||||
float: right; |
||||
width: 24%; |
||||
height: 10%; |
||||
margin-right: 20px; |
||||
// background-color: #6759ff; |
||||
|
||||
} |
||||
|
||||
.header .nav1 ul li { |
||||
float: left; |
||||
margin-left: 5px; |
||||
line-height: 20px; |
||||
color: white; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
// border-right: 1px solid #FFFFFF; |
||||
} |
||||
|
||||
.header .nav2 { |
||||
float: right; |
||||
|
||||
// padding-right: -20px; |
||||
width: 68%; |
||||
height: 25%; |
||||
margin-top: 30px; |
||||
// margin-right: -260px; |
||||
// background-color: #6759ff; |
||||
} |
||||
|
||||
.header .nav2 ul li { |
||||
float: left; |
||||
margin-left: 20px; |
||||
// line-height: 40px; |
||||
color: white; |
||||
font-size: 15px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.header .nav2 ul li:hover { |
||||
color: #74a5ff; |
||||
} |
||||
|
||||
.header .inco { |
||||
float: left; |
||||
width: 48%; |
||||
height: 65.1%; |
||||
margin-left: 80px; |
||||
// background-color: #6759ff; |
||||
} |
||||
|
||||
.header h1 { |
||||
font-size: 50px; |
||||
margin-top: 23px; |
||||
font-weight: bolder; |
||||
color: #FFFFFF; |
||||
float: right; |
||||
margin-right: 173px // float: left; |
||||
// margin-left: 779px; |
||||
} |
||||
|
||||
.header p { |
||||
font-size: 15px; |
||||
margin-top: 102px; |
||||
// font-weight:bolder; |
||||
color: #FFFFFF; |
||||
float: right; |
||||
margin-right: -175px; |
||||
} |
||||
|
||||
.logo { |
||||
width: 15%; |
||||
height: 30%; |
||||
float: left; |
||||
margin-left: 80px; |
||||
} |
||||
|
||||
// 内容 |
||||
.content { |
||||
width: 100%; |
||||
margin: auto; |
||||
} |
||||
|
||||
.content1 { |
||||
width: 100%; |
||||
height: 442px; |
||||
display: flex; |
||||
margin: auto; |
||||
margin-top: 60px; |
||||
padding: 0 80px 0 80px; |
||||
background: linear-gradient(#98BBFF, #A9C6FF, #d5e1f6); |
||||
} |
||||
|
||||
.content1 .txt { |
||||
width: 22%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-wrap: nowrap; |
||||
justify-content: space-evenly; |
||||
height: 100%; |
||||
margin: auto; |
||||
} |
||||
|
||||
.content1 .txt h1 { |
||||
font-size: 20px; |
||||
height: 30px; |
||||
font-size: 16px; |
||||
line-height: 30px; |
||||
border-left: 3px solid #3374FF; |
||||
font-weight: bolder; |
||||
color: #3374FF; |
||||
} |
||||
|
||||
.content1 .txt .p { |
||||
height: 178px; |
||||
// background-color: #3374FF; |
||||
line-height: 23px; |
||||
width: 100%; |
||||
color: #FFFFFF; |
||||
} |
||||
|
||||
.content1 .txt p { |
||||
font-size: 17px; |
||||
// height: 40px; |
||||
// background-color: #3374FF; |
||||
// line-height: 25px; |
||||
color: #FFFFFF; |
||||
} |
||||
|
||||
.content .txt .box { |
||||
width: 100%; |
||||
height: 80px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
background-color: #98BBFF; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.content1 .icon { |
||||
width: 53%; |
||||
height: 84%; |
||||
margin: auto; |
||||
// background-image: url('/src/assets/images/bj1.png'); |
||||
background-size: 102% 103.5%; |
||||
// background-color: #7f98cb; |
||||
} |
||||
|
||||
.content1 .icon h1 { |
||||
color: white; |
||||
font-size: 24px; |
||||
font-weight: bolder; |
||||
z-index: 999; |
||||
margin-left: 60px; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.content1 .icon button { |
||||
background-color: #FEC861; |
||||
opacity: 0; |
||||
width: 73px; |
||||
height: 50px; |
||||
z-index: 999; |
||||
float: right; |
||||
margin-right: 13px; |
||||
margin-top: -40px; |
||||
} |
||||
|
||||
.content1 .icon button:hover { |
||||
background-color: #FEC861; |
||||
opacity: 0.2; |
||||
border: none; |
||||
|
||||
} |
||||
|
||||
.content1 .icon .content { |
||||
width: 87%; |
||||
height: 73.8%; |
||||
margin: auto; |
||||
border-radius: 15px 15px 15px 15px; |
||||
margin-top: 35px; |
||||
background-color: #FFFFFF; |
||||
} |
||||
|
||||
.content1 .icon .content img { |
||||
width: 95%; |
||||
height: 95%; |
||||
float: right; |
||||
margin-top: 15px; |
||||
|
||||
} |
||||
|
||||
.content1 .icon1 { |
||||
width: 13%; |
||||
height: 86%; |
||||
margin: auto; |
||||
// background-color: #486aae; |
||||
} |
||||
|
||||
.content1 .icon1 .icon { |
||||
width: 90%; |
||||
height: 27%; |
||||
// padding-top: 20px; |
||||
border-radius: 15px 15px 15px 15px; |
||||
margin-top: 20px; |
||||
box-shadow: 3px 3px 15px rgb(173, 171, 171); |
||||
// margin: auto; |
||||
background-color: #A4c3ff; |
||||
} |
||||
|
||||
.content1 .icon1 .icon .image { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-size: cover; |
||||
image-orientation: 100% 100%; |
||||
border-radius: 15px 15px 15px 15px; |
||||
// object-fit:cover; |
||||
/* 删除图片下方的多余空间 */ |
||||
} |
||||
|
||||
.content1 .icon .box { |
||||
width: 85%; |
||||
height: 300px; |
||||
float: left; |
||||
margin-top: 30px; |
||||
border-radius: 10px 10px 10px 0px; |
||||
background-color: #D9D9D9; |
||||
} |
||||
|
||||
// 尾部 |
||||
.footer { |
||||
margin-top: 100px; |
||||
width: 100%; |
||||
height: 250px; |
||||
// position: absolute; |
||||
text-align: center; |
||||
background-color: #252527; |
||||
} |
||||
|
||||
.footer h3 { |
||||
width: 100%; |
||||
// position: absolute; |
||||
text-align: center; |
||||
font-size: 15px; |
||||
padding-top: 40px; |
||||
color: #7F9EED; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.footer h1 { |
||||
width: 100%; |
||||
// position: absolute; |
||||
font-family: "kaiti_gb2312"; |
||||
margin-top: 10px; |
||||
font-size: 25px; |
||||
color: #7F9EED; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.footer p { |
||||
width: 100%; |
||||
height: 20px; |
||||
// position: absolute; |
||||
font-family: "kaiti_gb2312"; |
||||
margin-top: 25px; |
||||
font-size: 17px; |
||||
color: #7F9EED; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,14 +1,167 @@ |
||||
<template> |
||||
<div> |
||||
知识点学习 |
||||
<!-- <div>知识点首页</div> --> |
||||
<div class="header"> |
||||
<div class="logo"></div> |
||||
<div class="nav"> |
||||
<div class="nav1"> |
||||
<ul> |
||||
<li>企业入口 |</li> |
||||
<li>教师入口 |</li> |
||||
<li>学生入口 |</li> |
||||
<li>毕业生入口</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<div class="nav2"> |
||||
<ul> |
||||
<li><a>学生首页</a></li> |
||||
<li><a>专业概况</a></li> |
||||
<li><a>教学改革</a></li> |
||||
<li><a>科学研就</a></li> |
||||
<li><a>人才培养</a></li> |
||||
<li><a>成果展示</a></li> |
||||
<li><a>产教结合</a></li> |
||||
<li><a>日常教学</a></li> |
||||
<li><a>优秀学生</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="inco"></div> --> |
||||
<h1>知识图谱</h1> |
||||
<p>(专业代码 ：080902H)</p> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
<script lang="ts" setup> |
||||
// import axios from 'axios'; |
||||
import {} from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
<style lang="scss" scoped> |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
/* box-sizing: border-box; */ |
||||
/* font: 14px/28px "微软雅黑"; */ |
||||
} |
||||
|
||||
ul { |
||||
list-style: none; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
body { |
||||
/* 宽度占浏览器可视区域的宽度 */ |
||||
width: 100vm; |
||||
// position: relative; |
||||
// display:flex; |
||||
// justify-content:center;i |
||||
/* height: 1500px; */ |
||||
// background-color: #FFFFFF; |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
// 头 |
||||
.header { |
||||
width: 100%; |
||||
height: 300px; |
||||
background-image: url('/src/assets/images/top.png'); |
||||
background-size: 100% 100%; |
||||
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff); |
||||
|
||||
|
||||
} |
||||
|
||||
// 导航栏 |
||||
.header .nav { |
||||
width: 95%; |
||||
height: 100px; |
||||
// background-color: #3D78F5; |
||||
} |
||||
|
||||
.header .nav1 { |
||||
float: right; |
||||
width: 24%; |
||||
height: 10%; |
||||
margin-right: 20px; |
||||
// background-color: #6759ff; |
||||
|
||||
} |
||||
|
||||
.header .nav1 ul li { |
||||
float: left; |
||||
margin-left: 5px; |
||||
line-height: 20px; |
||||
color: white; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
// border-right: 1px solid #FFFFFF; |
||||
} |
||||
|
||||
.header .nav2 { |
||||
float: right; |
||||
|
||||
// padding-right: -20px; |
||||
width: 68%; |
||||
height: 25%; |
||||
margin-top: 30px; |
||||
// margin-right: -260px; |
||||
// background-color: #6759ff; |
||||
} |
||||
|
||||
.header .nav2 ul li { |
||||
float: left; |
||||
margin-left: 20px; |
||||
// line-height: 40px; |
||||
color: white; |
||||
font-size: 15px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.header .nav2 ul li:hover { |
||||
color: #74a5ff; |
||||
} |
||||
|
||||
.header .inco { |
||||
float: left; |
||||
width: 48%; |
||||
height: 65.1%; |
||||
margin-left: 80px; |
||||
// background-color: #6759ff; |
||||
} |
||||
|
||||
.header h1 { |
||||
font-size: 50px; |
||||
margin-top: 23px; |
||||
font-weight: bolder; |
||||
color: #FFFFFF; |
||||
float: right; |
||||
margin-right: 173px // float: left; |
||||
// margin-left: 779px; |
||||
} |
||||
|
||||
.header p { |
||||
font-size: 15px; |
||||
margin-top: 102px; |
||||
// font-weight:bolder; |
||||
color: #FFFFFF; |
||||
float: right; |
||||
margin-right: -175px; |
||||
} |
||||
|
||||
.logo { |
||||
width: 15%; |
||||
height: 30%; |
||||
float: left; |
||||
margin-left: 80px; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
Loading…
Reference in new issue