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

ypf 2.0

Browse Source
develoop
Your Name 6 months ago
parent c40f11c115
commit 93cb03a381
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 Download Patch File Download Diff File
  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