ww
5 months ago
parent
b315a93138
commit
3944b4caaf
21 changed files with 2810 additions and 3607 deletions
File diff suppressed because it is too large
Load Diff
@ -1,275 +1,288 @@ |
||||
<template> |
||||
<div class="fold-info-ui"> |
||||
<div class="demo-collapse"> |
||||
<el-collapse class="collapse" v-model="activeNames" @change="handleChange"> |
||||
<el-collapse-item v-for="item in 3" :key="item" :name="item"> |
||||
<template #title> |
||||
<div class="title"> |
||||
<div class="icon"> |
||||
<img src="@/assets/images/minus-circle-filled.png" alt=""> |
||||
</div> |
||||
<div class="index">01 /</div> |
||||
<div class="text">基本概念</div> |
||||
<div class="title-tag-box"> |
||||
<div class="my-tag" type="warning">32学时</div> |
||||
<div class="my-tag">本章资源</div> |
||||
</div> |
||||
<div class="fold-info-ui"> |
||||
<div class="demo-collapse"> |
||||
<el-collapse |
||||
class="collapse" |
||||
v-model="activeNames" |
||||
@change="handleChange" |
||||
> |
||||
<el-collapse-item v-for="item in 3" :key="item" :name="item"> |
||||
<template #title> |
||||
<div class="title"> |
||||
<div class="icon"> |
||||
<img src="@/assets/images/minus-circle-filled.png" alt="" /> |
||||
</div> |
||||
<div class="index">01 /</div> |
||||
<div class="text">基本概念</div> |
||||
<div class="title-tag-box"> |
||||
<div class="my-tag" type="warning">32学时</div> |
||||
<div class="my-tag">本章资源</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template #default> |
||||
<div class="main-box"> |
||||
<div class="left"></div> |
||||
<div class="right"> |
||||
<div class="structure-item"> |
||||
<div |
||||
class="structure-item-titile-box" |
||||
v-for="item in 3" |
||||
:key="item" |
||||
> |
||||
<div class="titile-box-titile"> |
||||
<div class="sequence">5</div> |
||||
<div class="tit-box"> |
||||
<div class="tit-box-left">1.1 基本概念1</div> |
||||
<div class="tit-box-right my-tag">资源</div> |
||||
<div class="tit-box-edit"> |
||||
<button class="my-button">编辑</button> |
||||
</div> |
||||
</template> |
||||
<template #default> |
||||
<div class="main-box"> |
||||
<div class="left"></div> |
||||
<div class="right"> |
||||
<div class="structure-item"> |
||||
<div class="structure-item-titile-box" v-for="item in 3" :key="item"> |
||||
<div class="titile-box-titile"> |
||||
<div class="sequence">5</div> |
||||
<div class="tit-box"> |
||||
<div class="tit-box-left">1.1 基本概念1</div> |
||||
<div class="tit-box-right my-tag">资源</div> |
||||
<div class="tit-box-edit"> |
||||
<button class="my-button">编辑</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="titile-box-knowledge"> |
||||
<div class="my-tag">知识点1</div> |
||||
<div class="my-tag">知识点1</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
</el-collapse-item> |
||||
</el-collapse> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="titile-box-knowledge"> |
||||
<div class="my-tag">知识点1</div> |
||||
<div class="my-tag">知识点1</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-collapse-item> |
||||
</el-collapse> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue' |
||||
const props = defineProps(['foldInfoData']) |
||||
console.log(props.foldInfoData, '可折叠基本概念接口数据'); |
||||
console.log(props.foldInfoData, '可折叠基本概念接口数据') |
||||
const activeNames = ref([1]) |
||||
const handleChange = (val: string[]) => { |
||||
console.log(val) |
||||
console.log(val) |
||||
} |
||||
</script> |
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
::v-deep .collapse { |
||||
border-top: none; |
||||
border-top: none; |
||||
|
||||
.el-collapse-item__header { |
||||
border-bottom: none; |
||||
} |
||||
.el-collapse-item__header { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
|
||||
.fold-info-ui { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding-top: 27px; |
||||
padding-left: 61px; |
||||
background: #fff; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding-top: 27px; |
||||
padding-left: 61px; |
||||
background: #fff; |
||||
|
||||
.demo-collapse { |
||||
$title-icon-width: 15px; |
||||
$title--icon-m-r: 34px; |
||||
$title-index-width: 60px; |
||||
|
||||
.title { |
||||
display: flex; |
||||
height: 22px; |
||||
width: 100%; |
||||
align-items: center; |
||||
|
||||
.icon { |
||||
line-height: 0px; |
||||
width: $title-icon-width; |
||||
height: $title-icon-width; |
||||
margin-right: $title--icon-m-r; |
||||
|
||||
& img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.index { |
||||
width: $title-index-width; |
||||
text-align: center; |
||||
text-wrap: nowrap; |
||||
font-weight: 400; |
||||
font-size: 32px; |
||||
color: #333333; |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.demo-collapse { |
||||
$title-icon-width: 15px; |
||||
$title--icon-m-r: 34px; |
||||
$title-index-width: 60px; |
||||
.text { |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
color: #333333; |
||||
} |
||||
|
||||
.title-tag-box { |
||||
margin-left: auto; |
||||
margin-right: 76px; |
||||
display: flex; |
||||
column-gap: 16px; |
||||
} |
||||
} |
||||
|
||||
.main-box { |
||||
width: 100%; |
||||
display: flex; |
||||
$line: 1px dashed #d9d9d9; |
||||
|
||||
.title { |
||||
display: flex; |
||||
height: 22px; |
||||
width: 100%; |
||||
align-items: center; |
||||
.left { |
||||
width: calc( |
||||
$title-icon-width + $title--icon-m-r + $title-index-width / 2 |
||||
); |
||||
border-right: $line; |
||||
} |
||||
|
||||
.icon { |
||||
line-height: 0px; |
||||
width: $title-icon-width; |
||||
height: $title-icon-width; |
||||
margin-right: $title--icon-m-r; |
||||
.right { |
||||
flex-grow: 1; |
||||
|
||||
& img { |
||||
width: 100%; |
||||
height: 100%; |
||||
.structure-item { |
||||
width: 100%; |
||||
|
||||
} |
||||
.structure-item-titile-box { |
||||
& > * { |
||||
padding-left: 42px; |
||||
} |
||||
|
||||
.index { |
||||
width: $title-index-width; |
||||
.titile-box-titile { |
||||
&:first-child { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
position: relative; |
||||
margin-bottom: 15px; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
width: 30px; |
||||
border-top: $line; |
||||
} |
||||
|
||||
.sequence { |
||||
$height: 33px; |
||||
width: $height; |
||||
height: $height; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
border-radius: 50%; |
||||
background: #ffb21e; |
||||
text-align: center; |
||||
text-wrap: nowrap; |
||||
line-height: $height; |
||||
font-weight: 400; |
||||
font-size: 32px; |
||||
color: #333333; |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.text { |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
color: #333333; |
||||
} |
||||
font-size: 15px; |
||||
color: #000000; |
||||
} |
||||
|
||||
.title-tag-box { |
||||
margin-left: auto; |
||||
margin-right: 76px; |
||||
.tit-box { |
||||
height: 20px; |
||||
display: flex; |
||||
column-gap: 16px; |
||||
} |
||||
|
||||
} |
||||
|
||||
.main-box { |
||||
width: 100%; |
||||
display: flex; |
||||
$line: 1px dashed #D9D9D9; |
||||
align-items: center; |
||||
gap: 17px; |
||||
|
||||
.tit-box-left { |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #000000; |
||||
} |
||||
|
||||
.left { |
||||
width: calc($title-icon-width + $title--icon-m-r + $title-index-width / 2); |
||||
border-right: $line; |
||||
// .tit-box-right {} |
||||
.tit-box-edit { |
||||
margin-left: auto; |
||||
margin-right: 72px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
flex-grow: 1; |
||||
|
||||
.structure-item { |
||||
width: 100%; |
||||
|
||||
.structure-item-titile-box { |
||||
&>* { |
||||
padding-left: 42px; |
||||
} |
||||
|
||||
.titile-box-titile { |
||||
&:first-child { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
position: relative; |
||||
margin-bottom: 15px; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
width: 30px; |
||||
border-top: $line; |
||||
} |
||||
|
||||
.sequence { |
||||
$height: 33px; |
||||
width: $height; |
||||
height: $height; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
border-radius: 50%; |
||||
background: #FFB21E; |
||||
text-align: center; |
||||
line-height: $height; |
||||
font-weight: 400; |
||||
font-size: 15px; |
||||
color: #000000; |
||||
} |
||||
|
||||
.tit-box { |
||||
height: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 17px; |
||||
|
||||
.tit-box-left { |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #000000; |
||||
} |
||||
|
||||
// .tit-box-right {} |
||||
.tit-box-edit { |
||||
margin-left: auto; |
||||
margin-right: 72px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.titile-box-knowledge { |
||||
display: flex; |
||||
margin-left: 33px; |
||||
|
||||
&>* { |
||||
margin-left: 38px; |
||||
border: 1px solid #0052D9; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
color: #0052D9; |
||||
|
||||
&:first-child { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
.titile-box-knowledge { |
||||
display: flex; |
||||
margin-left: 33px; |
||||
|
||||
& > * { |
||||
margin-left: 38px; |
||||
border: 1px solid #0052d9; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
color: #0052d9; |
||||
|
||||
&:first-child { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// =================== |
||||
.my-tag { |
||||
padding: 2px 8px; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #0052D9; |
||||
line-height: 20px; |
||||
background: #F2F3FF; |
||||
cursor: pointer; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
// =================== |
||||
.my-tag { |
||||
padding: 2px 8px; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #0052d9; |
||||
line-height: 20px; |
||||
background: #f2f3ff; |
||||
cursor: pointer; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
[type='warning'].my-tag { |
||||
color: #e37318; |
||||
background: #fff1e9; |
||||
} |
||||
|
||||
.my-button { |
||||
all: initial; |
||||
$color-start: #52a1ff; |
||||
$color-end: #4255ff; |
||||
padding: 8px 24px; |
||||
background: linear-gradient(128deg, $color-start 0%, $color-end 100%); |
||||
box-shadow: 0px 4px 7px 0px rgba(0, 82, 255, 0.27); |
||||
border-radius: 20px; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
line-height: 24px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
background: linear-gradient( |
||||
128deg, |
||||
lighten($color-start, 5%) 0%, |
||||
lighten($color-end, 5%) 100% |
||||
); |
||||
} |
||||
|
||||
[type=warning].my-tag { |
||||
color: #E37318; |
||||
background: #FFF1E9; |
||||
&:active { |
||||
background: linear-gradient( |
||||
128deg, |
||||
darken($color-start, 10%) 0%, |
||||
darken($color-end, 10%) 100% |
||||
); |
||||
} |
||||
|
||||
.my-button { |
||||
all: initial; |
||||
$color-start: #52A1FF; |
||||
$color-end: #4255FF; |
||||
padding: 8px 24px; |
||||
background: linear-gradient(128deg, $color-start 0%, $color-end 100%); |
||||
box-shadow: 0px 4px 7px 0px rgba(0, 82, 255, 0.27); |
||||
border-radius: 20px; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
line-height: 24px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
background: linear-gradient(128deg, lighten($color-start, 5%) 0%, lighten($color-end, 5%) 100%); |
||||
} |
||||
|
||||
&:active { |
||||
background: linear-gradient(128deg, darken($color-start, 10%) 0%, darken($color-end, 10%) 100%); |
||||
} |
||||
|
||||
&:disabled { |
||||
background: linear-gradient(128deg, lighten($color-start, 20%) 0%, lighten($color-end, 20%) 100%); |
||||
} |
||||
&:disabled { |
||||
background: linear-gradient( |
||||
128deg, |
||||
lighten($color-start, 20%) 0%, |
||||
lighten($color-end, 20%) 100% |
||||
); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,195 +1,190 @@ |
||||
<template> |
||||
<div class="look-resource-ui" ref="atlas"> |
||||
<div class="head"> |
||||
<div class="log"></div> |
||||
<div class="text">查看资源</div> |
||||
<div class="look-resource-ui" ref="atlas"> |
||||
<div class="head"> |
||||
<div class="log"></div> |
||||
<div class="text">查看资源</div> |
||||
</div> |
||||
<div class="con" v-for="item in 5" :key="item"> |
||||
<div class="chapter-box"> |
||||
<div class="left">第一章</div> |
||||
<div class="right">第二小节</div> |
||||
</div> |
||||
<div class="detailedness-chapter-box"> |
||||
<div class="left"> |
||||
<div class="vertical-dotted-line"></div> |
||||
</div> |
||||
<div class="con" v-for="item in 5" :key="item"> |
||||
<div class="chapter-box"> |
||||
<div class="left">第一章</div> |
||||
<div class="right">第二小节</div> |
||||
</div> |
||||
<div class="detailedness-chapter-box"> |
||||
<div class="left"> |
||||
<div class="vertical-dotted-line"></div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="top">知识点</div> |
||||
<div class="center">知识点详情，知识点内容</div> |
||||
<div class="bottom"> |
||||
<div class="img-box"></div> |
||||
<div class="info-box"> |
||||
<div class="text-name">知识点清单.pdf</div> |
||||
<div class="text-size">15M</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="top">知识点</div> |
||||
<div class="center">知识点详情，知识点内容</div> |
||||
<div class="bottom"> |
||||
<div class="img-box"></div> |
||||
<div class="info-box"> |
||||
<div class="text-name">知识点清单.pdf</div> |
||||
<div class="text-size">15M</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
const props = defineProps(['lookResource']) |
||||
console.log(props.lookResource, '查看资源接口数据'); |
||||
console.log(props.lookResource, '查看资源接口数据') |
||||
</script> |
||||
<style lang="scss"> |
||||
.look-resource-ui { |
||||
$padding-left: 18px; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
padding: 24px 22px 0 $padding-left; |
||||
$padding-left: 18px; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
padding: 24px 22px 0 $padding-left; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.head { |
||||
$height: 30px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-bottom: 32px; |
||||
|
||||
.log { |
||||
width: $height; |
||||
height: $height; |
||||
background: #4782ff; |
||||
border-radius: 4px; |
||||
margin-right: 12px; |
||||
} |
||||
|
||||
.head { |
||||
$height: 30px; |
||||
display: flex; |
||||
margin-bottom: 32px; |
||||
|
||||
.log { |
||||
width: $height; |
||||
height: $height; |
||||
background: #4782FF; |
||||
border-radius: 4px; |
||||
margin-right: 12px; |
||||
} |
||||
.text { |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: #333333; |
||||
line-height: $height; |
||||
} |
||||
} |
||||
|
||||
.text { |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: #333333; |
||||
line-height: $height; |
||||
} |
||||
.con { |
||||
& > * { |
||||
display: flex; |
||||
} |
||||
|
||||
.con { |
||||
&>* { |
||||
display: flex; |
||||
} |
||||
$width: 51px; |
||||
|
||||
.chapter-box { |
||||
$line-height: 22px; |
||||
margin-bottom: 12px; |
||||
|
||||
.left { |
||||
min-width: $width; |
||||
height: 22px; |
||||
margin-right: 16px; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
line-height: $line-height; |
||||
} |
||||
|
||||
.right { |
||||
line-height: $line-height; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: #9a9a9a; |
||||
} |
||||
} |
||||
|
||||
$width: 51px; |
||||
.detailedness-chapter-box { |
||||
.left { |
||||
width: $width; |
||||
|
||||
.chapter-box { |
||||
$line-height: 22px; |
||||
margin-bottom: 12px; |
||||
.vertical-dotted-line { |
||||
height: 168px; |
||||
margin-left: calc(53px - $padding-left); |
||||
border-left: 1px dotted #d9d9d9; |
||||
} |
||||
} |
||||
|
||||
.left { |
||||
min-width: $width; |
||||
height: 22px; |
||||
margin-right: 16px; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
line-height: $line-height; |
||||
.right { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
} |
||||
& > * { |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.right { |
||||
line-height: $line-height; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: #9A9A9A; |
||||
} |
||||
& > *:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.top { |
||||
$height: 17px; |
||||
width: 53px; |
||||
height: $height; |
||||
line-height: $height; |
||||
text-align: center; |
||||
background: #5ee183; |
||||
border-radius: 2px; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #ffffff; |
||||
} |
||||
|
||||
.detailedness-chapter-box { |
||||
.center { |
||||
$height: 22px; |
||||
height: $height; |
||||
line-height: $height; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
} |
||||
|
||||
.left { |
||||
width: $width; |
||||
.bottom { |
||||
width: 243px; |
||||
height: 84px; |
||||
background: rgba(255, 255, 255, 0.5); |
||||
border-radius: 4px; |
||||
border: 1px solid #d9d9d9; |
||||
cursor: pointer; |
||||
transition: 0.3s; |
||||
padding: 17px 0 17px 20px; |
||||
display: flex; |
||||
|
||||
&:hover { |
||||
border: 1px solid #6997fa; |
||||
} |
||||
|
||||
.img-box { |
||||
width: 42px; |
||||
height: 50px; |
||||
background: #4d4d4d; |
||||
margin-right: 23px; |
||||
} |
||||
|
||||
.info-box { |
||||
display: flex; |
||||
flex-direction: column; |
||||
$height: 22px; |
||||
|
||||
.vertical-dotted-line { |
||||
height: 168px; |
||||
margin-left: calc(53px - $padding-left); |
||||
border-left: 1px dotted #D9D9D9; |
||||
} |
||||
& > * { |
||||
height: $height; |
||||
line-height: $height; |
||||
} |
||||
|
||||
.text-name { |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #333333; |
||||
margin-bottom: 6px; |
||||
} |
||||
|
||||
.right { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
&>* { |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
&>*:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.top { |
||||
$height: 17px; |
||||
width: 53px; |
||||
height: $height; |
||||
line-height: $height; |
||||
text-align: center; |
||||
background: #5EE183; |
||||
border-radius: 2px; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #FFFFFF; |
||||
} |
||||
|
||||
.center { |
||||
$height: 22px; |
||||
height: $height; |
||||
line-height: $height; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
} |
||||
|
||||
.bottom { |
||||
width: 243px; |
||||
height: 84px; |
||||
background: rgba(255, 255, 255, 0.5); |
||||
border-radius: 4px; |
||||
border: 1px solid #D9D9D9; |
||||
cursor: pointer; |
||||
transition: .3s; |
||||
padding: 17px 0 17px 20px; |
||||
display: flex; |
||||
|
||||
&:hover { |
||||
border: 1px solid #6997fa; |
||||
} |
||||
|
||||
.img-box { |
||||
width: 42px; |
||||
height: 50px; |
||||
background: #4D4D4D; |
||||
margin-right: 23px; |
||||
} |
||||
|
||||
.info-box { |
||||
display: flex; |
||||
flex-direction: column; |
||||
$height: 22px; |
||||
|
||||
&>* { |
||||
height: $height; |
||||
line-height: $height; |
||||
} |
||||
|
||||
.text-name { |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #333333; |
||||
margin-bottom: 6px; |
||||
} |
||||
|
||||
.text-size { |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #9A9A9A; |
||||
} |
||||
} |
||||
} |
||||
.text-size { |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #9a9a9a; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,116 +1,128 @@ |
||||
<template> |
||||
<div class="theory-ui"> |
||||
<div class="container"> |
||||
<div class="top"> |
||||
<div class="title">计算机导论</div> |
||||
<button class="my-button">导入</button> |
||||
<button class="my-button">编辑</button> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="text-container" v-for="item, index in props.learnInfo" :key="index"> |
||||
<div class="text-name">{{ addUnit(item.name, '：') }}</div> |
||||
<div class="text-value">{{ item.value }}</div> |
||||
</div> |
||||
</div> |
||||
<div class="theory-ui"> |
||||
<div class="container"> |
||||
<div class="top"> |
||||
<div class="title">计算机导论</div> |
||||
<button class="my-button">导入</button> |
||||
<button class="my-button">编辑</button> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div |
||||
class="text-container" |
||||
v-for="(item, index) in props.learnInfo" |
||||
:key="index" |
||||
> |
||||
<div class="text-name">{{ addUnit(item.name, '：') }}</div> |
||||
<div class="text-value">{{ item.value }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
|
||||
function addUnit(viewStr: string, unit: string): string { |
||||
if (viewStr) return `${viewStr}${unit}` |
||||
else return '' |
||||
if (viewStr) return `${viewStr}${unit}` |
||||
else return '' |
||||
} |
||||
const props = defineProps(['learnInfo']) |
||||
|
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.theory-ui { |
||||
|
||||
width: 100%; |
||||
height: 100%; |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
background-color: #fff; |
||||
|
||||
.container { |
||||
$border-width: 3px; |
||||
flex-grow: 1; |
||||
border: $border-width solid #ededed; |
||||
padding-top: calc(10px - $border-width); |
||||
padding-left: 61px; |
||||
display: flex; |
||||
background-color: #fff; |
||||
|
||||
.container { |
||||
$border-width: 3px; |
||||
flex-grow: 1; |
||||
border: $border-width solid #EDEDED; |
||||
padding-top: calc(10px - $border-width); |
||||
padding-left: 61px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.top { |
||||
display: flex; |
||||
margin-top: 30px; |
||||
margin-bottom: 46px; |
||||
|
||||
.my-button { |
||||
all: initial; |
||||
$color-start: #52A1FF; |
||||
$color-end: #4255FF; |
||||
padding: 8px 24px; |
||||
background: linear-gradient(128deg, $color-start 0%, $color-end 100%); |
||||
box-shadow: 0px 4px 7px 0px rgba(0, 82, 255, 0.27); |
||||
border-radius: 20px; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
line-height: 24px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
background: linear-gradient(128deg, lighten($color-start, 5%) 0%, lighten($color-end, 5%) 100%); |
||||
} |
||||
|
||||
&:active { |
||||
background: linear-gradient(128deg, darken($color-start, 10%) 0%, darken($color-end, 10%) 100%); |
||||
} |
||||
|
||||
&:disabled { |
||||
background: linear-gradient(128deg, lighten($color-start, 20%) 0%, lighten($color-end, 20%) 100%); |
||||
} |
||||
} |
||||
|
||||
&>*:first-child { |
||||
margin-right: 82px; |
||||
} |
||||
|
||||
&>*:last-child { |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
.title { |
||||
width: 208px; |
||||
height: 34px; |
||||
font-size: 36px; |
||||
color: #5577FF; |
||||
} |
||||
flex-direction: column; |
||||
|
||||
.top { |
||||
display: flex; |
||||
margin-top: 30px; |
||||
margin-bottom: 46px; |
||||
|
||||
.my-button { |
||||
all: initial; |
||||
$color-start: #52a1ff; |
||||
$color-end: #4255ff; |
||||
padding: 8px 24px; |
||||
background: linear-gradient(128deg, $color-start 0%, $color-end 100%); |
||||
box-shadow: 0px 4px 7px 0px rgba(0, 82, 255, 0.27); |
||||
border-radius: 20px; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
line-height: 24px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
background: linear-gradient( |
||||
128deg, |
||||
lighten($color-start, 5%) 0%, |
||||
lighten($color-end, 5%) 100% |
||||
); |
||||
} |
||||
|
||||
.bottom { |
||||
display: grid; |
||||
grid-template-columns: repeat(2, 1fr); |
||||
row-gap: 15px; |
||||
&:active { |
||||
background: linear-gradient( |
||||
128deg, |
||||
darken($color-start, 10%) 0%, |
||||
darken($color-end, 10%) 100% |
||||
); |
||||
} |
||||
|
||||
.text-container { |
||||
font-weight: 400; |
||||
font-size: 15px; |
||||
color: #333333; |
||||
width: 100%; |
||||
height: 20px; |
||||
display: flex; |
||||
&:disabled { |
||||
background: linear-gradient( |
||||
128deg, |
||||
lighten($color-start, 20%) 0%, |
||||
lighten($color-end, 20%) 100% |
||||
); |
||||
} |
||||
} |
||||
|
||||
& > *:first-child { |
||||
margin-right: 82px; |
||||
} |
||||
|
||||
& > *:last-child { |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
.title { |
||||
width: 208px; |
||||
height: 34px; |
||||
font-size: 36px; |
||||
color: #5577ff; |
||||
} |
||||
} |
||||
|
||||
.text-name { |
||||
width: 93px; |
||||
} |
||||
.bottom { |
||||
display: grid; |
||||
grid-template-columns: repeat(2, 1fr); |
||||
row-gap: 15px; |
||||
|
||||
.text-container { |
||||
font-weight: 400; |
||||
font-size: 15px; |
||||
color: #333333; |
||||
width: 100%; |
||||
height: 20px; |
||||
display: flex; |
||||
|
||||
} |
||||
.text-name { |
||||
width: 93px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,14 +1,14 @@ |
||||
<template> |
||||
<div class="knowledge-atlas"> |
||||
<atlas-ui @hadRouter="handle" /> |
||||
</div> |
||||
<div class="knowledge-atlas"> |
||||
<atlas-ui @hadRouter="handle" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
<script lang="ts" setup> |
||||
import { atlasUi } from './components/KnowledgeGraphUi/index' |
||||
import { useRouter } from 'vue-router'; |
||||
import { useRouter } from 'vue-router' |
||||
const $router = useRouter() |
||||
const handle = () => $router.push('/curriculumCenter/courseChapters') |
||||
</script> |
||||
|
||||
<style lang='scss' scoped></style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,132 +1,133 @@ |
||||
<template> |
||||
<div class="ch"> |
||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" width="240px" controls>法学</video> |
||||
<div class="ch1"> |
||||
<p>开课时间：2018年11月14日~2023年11月14日</p> |
||||
<p>课程类型：公共开放课程</p> |
||||
<p>学习人数：120人</p> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
<div class="ma"> |
||||
|
||||
</div> |
||||
<div class="en"> |
||||
|
||||
</div> |
||||
<div class="ph"> |
||||
|
||||
</div> |
||||
<div class="or"> |
||||
|
||||
<div class="ch"> |
||||
<video |
||||
src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" |
||||
width="240px" |
||||
controls |
||||
> |
||||
法学 |
||||
</video> |
||||
<div class="ch1"> |
||||
<p>开课时间：2018年11月14日~2023年11月14日</p> |
||||
<p>课程类型：公共开放课程</p> |
||||
<p>学习人数：120人</p> |
||||
</div> |
||||
<div class="warpper"> |
||||
|
||||
</div> |
||||
<div class="vo"> |
||||
</div> |
||||
<div class="ma"></div> |
||||
<div class="en"></div> |
||||
<div class="ph"></div> |
||||
<div class="or"></div> |
||||
<div class="warpper"></div> |
||||
<div class="vo"> |
||||
请选择院系专业: |
||||
<button><select> |
||||
<button> |
||||
<select> |
||||
<option>国际教育学院</option> |
||||
<option>能源工程学院</option> |
||||
<option>体育学院</option> |
||||
<option>马克思主义学院</option> |
||||
<option>智能制造学院</option> |
||||
<option>商务英语学院</option> |
||||
</select></button> |
||||
<button><select> |
||||
</select> |
||||
</button> |
||||
<button> |
||||
<select> |
||||
<option>01班</option> |
||||
<option>02班</option> |
||||
<option>03班</option> |
||||
<option>04班</option> |
||||
<option>05班</option> |
||||
</select></button><br> |
||||
请选择年级: |
||||
</select> |
||||
</button> |
||||
<br /> |
||||
请选择年级: |
||||
<button> |
||||
<select> |
||||
<option>大一</option> |
||||
<option>大二</option> |
||||
<option>大三</option> |
||||
<option>大四</option> |
||||
</select></button><br> |
||||
上传学科文件：<input type="file"> |
||||
</select> |
||||
</button> |
||||
<br /> |
||||
上传学科文件： |
||||
<input type="file" /> |
||||
<form> |
||||
<button type="submit">提交</button> |
||||
<button type="reset">重置</button><br> |
||||
<div style="width: 100%;display: flex;justify-content: space-between;"> |
||||
<button >上一页</button> |
||||
<button>下一页</button> |
||||
<button type="submit">提交</button> |
||||
<button type="reset">重置</button> |
||||
<br /> |
||||
<div style="width: 100%; display: flex; justify-content: space-between"> |
||||
<button>上一页</button> |
||||
<button>下一页</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.ch{ |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.ch { |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
} |
||||
.ma{ |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
.ma { |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
} |
||||
.en{ |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
.en { |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
} |
||||
.ph{ |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
.ph { |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
} |
||||
.warpper{ |
||||
.warpper { |
||||
width: 1222px; |
||||
height: 300px; |
||||
float: left; |
||||
background-color: rgb(202, 194, 236); |
||||
box-sizing: border-box; |
||||
} |
||||
.or{ |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
.or { |
||||
height: 300px; |
||||
width: 240px; |
||||
float: left; |
||||
line-height: 1.5; |
||||
margin-right: 5px; |
||||
background-color: rgba(183, 126, 164, 0.17); |
||||
box-sizing: border-box; |
||||
} |
||||
.vo{ |
||||
.vo { |
||||
width: 1222px; |
||||
height: 130px; |
||||
background-color: rgb(250, 225, 243); |
||||
background-color: rgb(250, 225, 243); |
||||
border: solid 1px rgb(220, 214, 214); |
||||
float: left; |
||||
} |
||||
.ch.ch1{ |
||||
|
||||
.ch.ch1 { |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue