dlsx
/
Teaching_integration_platform_admin_template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: dlsx:0a0c3b23668f8d2b204c6074d80e9f984ed61e74
Branches Tags
dlsx:dev
dlsx:develoop
dlsx:master
...
compare: dlsx:9fee7590402d4c8d3bd3abdf019dbedfca4208df
Branches Tags
dlsx:dev
dlsx:develoop
dlsx:master

2 Commits
0a0c3b2366 ... 9fee759040

Author SHA1 Message Date
Your Name 9fee759040 Merge branch 'develoop' of http://182.92.169.222:3000/dlsx/Teaching_integration_platform_admin_template into develoop
6 months ago
Your Name 93cb03a381 ypf 2.0
6 months ago
4 changed files with 298 additions and 230 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 32
      src/styles/index.scss
  2. 168
      src/views/MyCourseStudy/ContainerCla.vue
  3. 4
      src/views/MyCourseStudy/ContainerRes.vue
  4. 324
      src/views/MyCourseStudy/courseCollections.vue

32
src/styles/index.scss
Unescape View File

@ -2,43 +2,51 @@
@import './reset.scss';
// 滚动条外观样式设置
::-webkit-scrollbar{
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track{
background-color:$base-menu-background;
::-webkit-scrollbar-track {
background-color: $base-menu-background;
}
::-webkit-scrollbar-thumb{
::-webkit-scrollbar-thumb {
width: 10px;
background-color: #fff;
background-color: #7d7b7b;
border-radius: 10px;
}
// 修改elemen plus样式
.el-menu{
.el-menu {
background-color: #ffffff;
}
.el-menu-item:hover{
.el-menu-item:hover {
background-color: #5577ff;
color: #fff;
}
.el-sub-menu__title:hover{
.el-sub-menu__title:hover {
background-color: #5577ff;
color: #fff;
}
.el-menu-item.is-active{
.el-menu-item.is-active {
color: #fff;
background-color: #5577ff;
}
.el-menu-item{
.el-menu-item {
color: #9896A3;
border-radius: 10px;
margin: 5px 0;
}
.el-sub-menu__title{
.el-sub-menu__title {
color: #9896A3;
border-radius: 10px;
}
.el-scrollbar__wrap{
.el-scrollbar__wrap {
padding: 0 15px;
}

168
src/views/MyCourseStudy/ContainerCla.vue
Unescape View File

@ -0,0 +1,168 @@
<template>
<!-- 课程收藏页面 -->
<el-tab-pane label="课程收藏" name="first">
<div class="Container_Cla">
<div class="item_1" v-for="(item_1, index) in 12" :key="index">
<!-- 课程图片盒子 -->
<div class="ClassImg">
<!-- 更多图片盒子 -->
<div class="ClassGd">
<img src="../../assets/icons/更多.svg" width="100%" height="100%" />
</div>
<!-- 课程图片 -->
<img src="../../assets/images/kctp.png" />
</div>
<div class="ClaCon">
<div class="Con">
<h3>软件项目管理{{ item_1 }}</h3>
<p>讲师:王兴</p>
<p>
<span>32</span>
学时 &nbsp; | &nbsp;
<span>2.0</span>
学分
</p>
</div>
</div>
</div>
</div>
<div class="Page-1">
<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[1, 2, 3, 4]"
:small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
:total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-tab-pane>
</template>
<style lang="scss" scoped>
.el-pagination {
justify-content: center;
}
.example-pagination-block+.example-pagination-block {
margin-top: 10px;
}
.example-pagination-block .example-demonstration {
margin-bottom: 16px;
}
.curse-collection {
margin: 0;
}
::v-deep .el-tabs__header {
margin-bottom: 5px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.demo-tabs {
padding: 0px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.Container_Cla {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 350px);
justify-content: space-around;
padding-top: 20px;
}
.item_1 {
display: inline-block;
width: 100%;
height: 300px;
margin-bottom: 30px;
border-left: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
border-radius: 6px;
overflow: hidden;
box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
}
.ClassImg {
height: 180px;
width: 100%;
position: relative;
background-color: rgb(249, 245, 245);
border-bottom: 1px solid rgb(217, 217, 217);
}
.ClassImg>img {
width: 100%;
height: 180px;
}
.item_1:hover {
.ClassGd {
display: block;
}
}
.ClassGd {
position: absolute;
display: none;
margin-top: -9px;
margin-left: 95%;
cursor: pointer;
}
.ClaCon {
display: flex;
justify-content: space-between;
background-color: #cfded071;
}
.Con {
display: inline-block;
height: 120px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.Con>h3 {
margin-left: 15px;
font-size: 25px;
font-weight: 600;
cursor: pointer;
}
.Con>p {
margin-left: 15px;
margin-top: 5px;
font-size: 13px;
font-weight: 400;
cursor: pointer;
}
.Con>p>span {
margin-left: 5px;
margin-right: 5px;
color: rgb(94, 188, 231);
font-weight: 600;
}
.Con>button {
width: 45px;
height: 20px;
font-size: 9px;
margin-left: 200px;
margin-bottom: 10px;
}
.Page-1 {
width: 100%;
justify-content: center;
}
</style >

4
src/views/MyCourseStudy/ContainerRes.vue
Unescape View File

@ -0,0 +1,4 @@
<template></template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped></style>

324
src/views/MyCourseStudy/courseCollections.vue
Unescape View File

@ -1,53 +1,12 @@
<template>
<div class="curse-collection">
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
style="padding-top: 0"
>
<el-tab-pane label="课程收藏" name="first">
<div class="Container_Cla">
<div class="item_1" v-for="(item_1, index) in 12" :key="index">
<div class="ClassImg">
<div class="bu">
<img
src="../../assets/icons/更多.svg"
width="100%"
height="100%"
/>
</div>
<img src="../../assets/images/kctp.png" />
</div>
<div class="ClaCon">
<div class="Con">
<h3>软件项目管理{{ item_1 }}</h3>
<p>讲师:王兴</p>
<p>
<span>32</span>
学时 &nbsp; | &nbsp;
<span>2.0</span>
学分
</p>
</div>
</div>
</div>
<div style="width: 100%; display: flex; justify-content: center">
<el-pagination
v-model:current-page="params.page"
v-model:page-size="params.pageNum"
:page-sizes="[100, 200, 300, 400]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</el-tab-pane>
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick" style="padding-top: 0">
<!-- 课程收藏页面 -->
<ContainerCla />
<!-- 资源收藏页面 -->
<el-tab-pane label="资源收藏" name="second">
<div class="Container_Res">
<!-- Tab切换栏 -->
<ul class="Container_Res_Tab">
<li class="img-svg" @click="hsndelShow(1)">
<img src="../../assets/icons/课程简介.svg" alt="简介" />
@ -75,78 +34,78 @@
<p>音频</p>
</li>
</ul>
<div class="Res_con" v-show="activeIndex == 1">
<div class="item_2-1" v-for="(item, index) in 5" :key="index">
<div class="ResImg-1">
<img src="../../assets/images/kctp.png" />
</div>
<div class="ResClaDic">
<p>课程名称-----{{ item }}</p>
<P>课程描述-----{{ item }}</P>
</div>
</div>
<!-- 切换栏对应的小页面 -->
<!-- 小页面-1 -->
<div class="Res_con" v-show="activeIndex == 1">
<div class="item_2-1" v-for="(item, index) in 5" :key="index">
<div class="ResImg-1">
<img src="../../assets/images/kctp.png" />
</div>
<div class="ResClaDic">
<p>课程名称-----{{ item }}</p>
<P>课程描述-----{{ item }}</P>
</div>
</div>
<div style="width: 100%; display: flex; justify-content: center">
<el-pagination
v-model:current-page="params.page"
v-model:page-size="params.pageNum"
:page-sizes="[100, 200, 300, 400]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<div class="Res_con" v-show="activeIndex == 2">
<div class="item_2-2" v-for="(item, index) in 7" :key="index">
<div class="ResImg-2">
<div class="Img">
<img src="../../assets/icons/ppt.png" />
</div>
</div>
<div class="ResClaDic">
<p>PPT名称-----{{ item }}</p>
</div>
<!-- 页面-2 -->
<div class="Res_con" v-show="activeIndex == 2">
<div class="item_2-2" v-for="(item, index) in 7" :key="index">
<div class="ResImg-2">
<div class="Img">
<img src="../../assets/icons/ppt.png" />
</div>
</div>
<div class="ResClaDic">
<p>PPT名称-----{{ item }}</p>
</div>
</div>
<div class="Res_con" v-show="activeIndex == 3">
<div class="item_2-3" v-for="(item, index) in 6" :key="index">
<div class="ResImg-2">
<div class="Img">
<img src="../../assets/icons/视频.png" />
</div>
</div>
<div class="ResClaDic">
<p>视频名称-----{{ item }}</p>
</div>
<!-- 小页面-3 -->
<div class="Res_con" v-show="activeIndex == 3">
<div class="item_2-3" v-for="(item, index) in 6" :key="index">
<div class="ResImg-2">
<div class="Img">
<img src="../../assets/icons/视频.png" />
</div>
</div>
<div class="ResClaDic">
<p>视频名称-----{{ item }}</p>
</div>
</div>
<div class="Res_con" v-show="activeIndex == 4">
<div class="item_2-4" v-for="(item, index) in 8" :key="index">
<div class="ResImg-2">
<div class="Img">
<img src="../../assets/icons/文本.png" />
</div>
</div>
<div class="ResClaDic">
<p>文本名称-----{{ item }}</p>
</div>
<!-- 小页面-4 -->
<div class="Res_con" v-show="activeIndex == 4">
<div class="item_2-4" v-for="(item, index) in 8" :key="index">
<div class="ResImg-2">
<div class="Img">
<img src="../../assets/icons/文本.png" />
</div>
</div>
<div class="ResClaDic">
<p>文本名称-----{{ item }}</p>
</div>
</div>
<div class="Res_con" v-show="activeIndex == 5">
<div class="item_2-5" v-for="(item, index) in 10" :key="index">
<div class="ResImg-2">
<div class="Img">
<img src="../../assets/icons/音频.png" />
</div>
</div>
<div class="ResClaDic">
<p>音频名称-----{{ item }}</p>
<div>
</div>
</div>
<div class="Res_con" v-show="activeIndex == 5">
<div class="item_2-5" v-for="(item, index) in 10" :key="index">
<div class="ResImg-2">
<div class="Img">
<img src="../../assets/icons/音频.png" />
</div>
</div>
<div class="ResClaDic">
<p>音频名称-----{{ item }}</p>
</div>
</div>
</div>
<div class="Page-2">
</div>
</el-tab-pane>
<!-- 知识点收藏页面 -->
<el-tab-pane label="知识点收藏" name="third">
<div class="Container_Kno">
<div class="item_3" v-for="(item_3, index) in 10" :key="index">
@ -183,6 +142,8 @@ import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { SeCourseFavourControllerService } from '../../../generated/services/SeCourseFavourControllerService'
import { CourseFavourQueryRequest } from 'generated/models/CourseFavourQueryRequest'
import ContainerCla from './ContainerCla.vue'
// import ContainerRes from "./ContainerRes.vue";
// import { getDataListApi } from '@/api/user/corc.js'
const activeIndex = ref(1)
function hsndelShow(index: number) {
@ -260,7 +221,11 @@ const handleCurrentChange = (page: any) => {
</script>
<style lang="scss" scoped>
.example-pagination-block + .example-pagination-block {
.el-pagination {
justify-content: center;
}
.example-pagination-block+.example-pagination-block {
margin-top: 10px;
}
@ -290,126 +255,54 @@ const handleCurrentChange = (page: any) => {
font-weight: 600;
}
.Container_Cla {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 350px);
justify-content: space-around;
padding-top: 20px;
}
.item_1 {
display: inline-block;
width: 100%;
height: 300px;
margin-bottom: 30px;
border-left: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
border-radius: 6px;
overflow: hidden;
box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
}
.ClassImg {
height: 180px;
width: 100%;
position: relative;
background-color: rgb(249, 245, 245);
border-bottom: 1px solid rgb(217, 217, 217);
}
.ClassImg > img {
width: 100%;
height: 180px;
}
.ClaCon {
display: flex;
justify-content: space-between;
background-color: #cfded071;
}
.Con {
display: inline-block;
height: 120px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.Con > h3 {
margin-left: 15px;
font-size: 25px;
font-weight: 600;
cursor: pointer;
}
.Con > p {
margin-left: 15px;
margin-top: 5px;
font-size: 13px;
font-weight: 400;
cursor: pointer;
}
.Con > p > span {
margin-left: 5px;
margin-right: 5px;
color: rgb(94, 188, 231);
font-weight: 600;
}
.Con > button {
width: 45px;
height: 20px;
font-size: 9px;
margin-left: 200px;
margin-bottom: 10px;
}
// 资源收藏页面大盒子
.Container_Res {
width: 100%;
height: 100%;
background-color: #f2f7fb;
}
// 资源收藏盒子切换栏
.Container_Res_Tab {
height: 60px;
display: flex;
justify-content: space-around;
background-color: #f0f4fa;
background-color: #f3f5f8;
border-bottom: #e4e4e4 solid 1px;
flex-direction: row;
}
// 资源收藏盒子切换栏图标盒子
.img-svg {
width: 54px;
height: 58px;
padding: 4px 11px 6px 11px;
}
.img-svg > p {
font-size: 10px;
font-weight: 400;
text-align: center;
// 切换栏里面图片的大小
& img {
width: 32px;
height: 32px;
}
// 切换栏下面的文字
& p {
font-size: 10px;
font-weight: 400;
text-align: center;
}
}
// 切换栏鼠标悬停样式
.img-svg:hover {
cursor: pointer;
border-bottom: rgb(96, 93, 172) solid 3px;
}
.img-svg > img {
width: 32px;
height: 32px;
}
.img-svg > p:hover {
text-decoration: underline;
& p:hover {
text-decoration: underline;
}
}
// 切换栏下面的大页面
.Res_con {
width: 100%;
height: 100%;
@ -419,6 +312,7 @@ const handleCurrentChange = (page: any) => {
background-color: #ffffff;
}
// 简介页面中的每一项
.item_2-1 {
width: 100%;
height: 300px;
@ -430,18 +324,20 @@ const handleCurrentChange = (page: any) => {
box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
}
// 简介页面中图片盒子
.ResImg-1 {
width: 100%;
height: 60%;
border-bottom: 1px solid rgb(229, 227, 227);
overflow: hidden;
}
.ResImg-1 > img {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
// 简介页面课程描述
.ResClaDic {
width: 100%;
height: 40%;
@ -465,7 +361,7 @@ const handleCurrentChange = (page: any) => {
align-items: center;
}
.ResClaDic > p {
.ResClaDic>p {
font-family: Inter, Inter;
font-weight: 500;
font-size: 20px;
@ -487,6 +383,7 @@ const handleCurrentChange = (page: any) => {
overflow: hidden;
box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
border-radius: 6px;
margin-bottom: 32px;
}
.Container_Kno {
@ -516,8 +413,8 @@ const handleCurrentChange = (page: any) => {
display: flex;
justify-content: space-between;
flex-direction: row;
padding-left: 15px;
padding-right: 30px;
padding-left: 9px;
padding-right: 20px;
}
.KnoCon {
@ -526,7 +423,8 @@ const handleCurrentChange = (page: any) => {
justify-content: space-around;
}
.KnoBtn > img {
.KnoBtn>img {
padding-top: 20px;
cursor: pointer;
}
@ -553,7 +451,7 @@ const handleCurrentChange = (page: any) => {
flex-direction: column;
}
.Knowledge_point > ul > li {
.Knowledge_point>ul>li {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
@ -577,19 +475,9 @@ const handleCurrentChange = (page: any) => {
color: rgb(15, 57, 76);
}
.bu {
width: 20%;
height: 10%;
z-index: 10;
padding-left: 93%;
.Page-2 {
position: absolute;
// display: none;
}
.item_1 :hover {
&.bu {
display: block;
background-color: #0052d9;
}
width: 100%;
justify-content: center;
}
</style>

Write Preview
Loading…
Cancel
Save