|
|
|
|
@ -1,569 +1,328 @@ |
|
|
|
|
<script setup> |
|
|
|
|
//导入图片 |
|
|
|
|
import ppt from '@/assets/icons/ppt (1).png' |
|
|
|
|
import image from '@/assets/icons/图片 (2).png' |
|
|
|
|
import video from '@/assets/icons/视频 .png' |
|
|
|
|
import pdf from '@/assets/icons/pdf (1).png' |
|
|
|
|
import test from '@/assets/icons/文件.png' |
|
|
|
|
import audio from '@/assets/icons/音频1.png' |
|
|
|
|
|
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
//默认抽屉隐藏 |
|
|
|
|
const visibleDramwer = ref(false) |
|
|
|
|
//定义一个selectedOption属性，用于存储当前选中的值 |
|
|
|
|
const selectedOption = ref('') |
|
|
|
|
|
|
|
|
|
import { getpptResourceListService } from '@/api/user/resource.js' |
|
|
|
|
import { DelpptResourceListService } from '@/api/user/resource.js' |
|
|
|
|
const total = ref(0) |
|
|
|
|
const pptresourceList = ref([]) |
|
|
|
|
const loading = ref(false) |
|
|
|
|
const params = ref({ |
|
|
|
|
pagesize: '15', |
|
|
|
|
pagenum: '1', |
|
|
|
|
type: '1', //设置默认显示ppt类型 |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
//获取资源列表 |
|
|
|
|
const getpptresourceList = async () => { |
|
|
|
|
loading.value = true |
|
|
|
|
const res = await getpptResourceListService(params.value) |
|
|
|
|
pptresourceList.value = res.data.records |
|
|
|
|
console.log(res) |
|
|
|
|
//获取资源列表 |
|
|
|
|
total.value = res.data.total |
|
|
|
|
loading.value = false |
|
|
|
|
} |
|
|
|
|
getpptresourceList() |
|
|
|
|
//点击切换type的值渲染不同类型的资源 |
|
|
|
|
const changeType = (newtype) => { |
|
|
|
|
params.value.type = newtype |
|
|
|
|
//console.log(params.value.type) |
|
|
|
|
getpptresourceList() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//分页逻辑 |
|
|
|
|
const onSizeChange = (size) => { |
|
|
|
|
console.log('当前每页条数', size) |
|
|
|
|
//只要是每页条数变化了，那么原来正在访问的当前页面就没有意义了，数据已经不在原来的页面 |
|
|
|
|
//重新从第一页渲染 |
|
|
|
|
params.value.pagenum = 1 |
|
|
|
|
params.value.pagesize = size |
|
|
|
|
//基于最新的当前页和每页条数渲染数据 |
|
|
|
|
getpptresourceList() |
|
|
|
|
} |
|
|
|
|
const onCurrentChange = (page) => { |
|
|
|
|
pptresourceList.value.pagenum = page |
|
|
|
|
getpptresourceList() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//删除资源 -通过ID进行删除 |
|
|
|
|
const onDeleteResource = async (ids) => { |
|
|
|
|
await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', { |
|
|
|
|
type: 'warning', |
|
|
|
|
confirmButtonText: '确认', |
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
}) |
|
|
|
|
await DelpptResourceListService(ids) |
|
|
|
|
// console.log(ids) |
|
|
|
|
ElMessage({ type: 'success', message: '删除成功' }) |
|
|
|
|
getpptresourceList() |
|
|
|
|
} |
|
|
|
|
//上传文件 |
|
|
|
|
import tool from '@/utils/oss.js' |
|
|
|
|
const FileList = ref([]) |
|
|
|
|
const upload = async (option) => { |
|
|
|
|
const res = await tool.oss.upload(option.file) |
|
|
|
|
console.log(22, res) |
|
|
|
|
console.log(res.name) |
|
|
|
|
const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name |
|
|
|
|
console.log(url) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<div class="top"> |
|
|
|
|
<div class="loop active-nav" @click="click($event, 2)"> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/icons/课程简介.svg" |
|
|
|
|
alt="" |
|
|
|
|
width="50px" |
|
|
|
|
height="50px" |
|
|
|
|
/> |
|
|
|
|
<p>简介</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="loop" @click="click($event, 1)"> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/icons/ppt.svg" |
|
|
|
|
alt="" |
|
|
|
|
width="50px" |
|
|
|
|
height="50px" |
|
|
|
|
/> |
|
|
|
|
<p>ppt</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="loop" @click="click($event, 0)"> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/icons/视频.svg" |
|
|
|
|
alt="" |
|
|
|
|
width="50px" |
|
|
|
|
height="50px" |
|
|
|
|
/> |
|
|
|
|
<p>视频</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="loop" @click="click($event, 3)"> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/icons/文本.svg" |
|
|
|
|
alt="" |
|
|
|
|
width="50px" |
|
|
|
|
height="50px" |
|
|
|
|
/> |
|
|
|
|
<p>文本</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="loop" @click="click($event, 4)"> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/icons/音频.svg" |
|
|
|
|
alt="" |
|
|
|
|
width="50px" |
|
|
|
|
height="50px" |
|
|
|
|
/> |
|
|
|
|
<p>音频</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="body" v-if="activeIndex == 0"> |
|
|
|
|
<ul> |
|
|
|
|
<li v-for="(item, index) in videoList" :key="index"> |
|
|
|
|
<video :src="item.url" controls width="390px"></video> |
|
|
|
|
<div class="text1"> |
|
|
|
|
软件工程的奥秘 |
|
|
|
|
<br /> |
|
|
|
|
构建无暇的应用程序关键技巧 |
|
|
|
|
</div> |
|
|
|
|
<form action=""> |
|
|
|
|
<input |
|
|
|
|
type="file" |
|
|
|
|
<el-button @click="visibleDramwer = true">添加资源</el-button> |
|
|
|
|
<el-drawer v-model="visibleDramwer"> |
|
|
|
|
<!-- 添加资源表单 --> |
|
|
|
|
<el-form> |
|
|
|
|
<el-form-item label="资源名称"> |
|
|
|
|
<el-input placeholder="请输入资源名称"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="资源类型"> |
|
|
|
|
<el-select v-model="selectedOption" placeholder="资源类型"> |
|
|
|
|
<el-option |
|
|
|
|
class="vertical-option" |
|
|
|
|
label="选项1" |
|
|
|
|
value="1" |
|
|
|
|
></el-option> |
|
|
|
|
<el-option |
|
|
|
|
class="vertical-option" |
|
|
|
|
label="选项2" |
|
|
|
|
value="2" |
|
|
|
|
></el-option> |
|
|
|
|
<el-option |
|
|
|
|
class="vertical-option" |
|
|
|
|
label="选项3" |
|
|
|
|
value="3" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="资源简介"> |
|
|
|
|
<el-input placeholder="请输入资源简介"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="上传资源"> |
|
|
|
|
<el-upload |
|
|
|
|
v-model:file-list="FileList" |
|
|
|
|
:http-request="upload" |
|
|
|
|
class="upload-demo" |
|
|
|
|
multiple |
|
|
|
|
@change="uploadChange" |
|
|
|
|
style="cursor: pointer" |
|
|
|
|
/> |
|
|
|
|
<br /> |
|
|
|
|
<button |
|
|
|
|
type="submit" |
|
|
|
|
@click="submitUploadFile" |
|
|
|
|
style="cursor: pointer" |
|
|
|
|
> |
|
|
|
|
上传 |
|
|
|
|
</button> |
|
|
|
|
<button> |
|
|
|
|
<a |
|
|
|
|
href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D" |
|
|
|
|
download="" |
|
|
|
|
> |
|
|
|
|
下载 |
|
|
|
|
</a> |
|
|
|
|
</button> |
|
|
|
|
<button type="reset" style="cursor: pointer">重选</button> |
|
|
|
|
</form> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<el-button type="primary">点击上传</el-button> |
|
|
|
|
<template #tip> |
|
|
|
|
<div class="el-upload__tip"> |
|
|
|
|
只能上传jpg/png文件,且不超过500kb |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
<div class="body" v-if="activeIndex == 1"> |
|
|
|
|
<ul> |
|
|
|
|
<li v-for="(item, index) in pptList" :key="index"> |
|
|
|
|
<img :src="item.url" title="ppt" height="200px" width="390px" /> |
|
|
|
|
<div class="text1"> |
|
|
|
|
软件工程的奥秘 |
|
|
|
|
<br /> |
|
|
|
|
构建无暇的应用程序关键技巧 |
|
|
|
|
</div> |
|
|
|
|
<form action=""> |
|
|
|
|
<input type="file" multiple @change="uploadChange" /> |
|
|
|
|
<br /> |
|
|
|
|
<button |
|
|
|
|
type="submit" |
|
|
|
|
@click="submitUploadFile" |
|
|
|
|
style="cursor: pointer" |
|
|
|
|
> |
|
|
|
|
上传 |
|
|
|
|
</button> |
|
|
|
|
<button> |
|
|
|
|
<a |
|
|
|
|
href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D" |
|
|
|
|
download="" |
|
|
|
|
> |
|
|
|
|
下载 |
|
|
|
|
</a> |
|
|
|
|
</button> |
|
|
|
|
<button type="reset" style="cursor: pointer">重选</button> |
|
|
|
|
</form> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="body" v-if="activeIndex == 2"> |
|
|
|
|
<ul> |
|
|
|
|
<li> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/images/软件1.png" |
|
|
|
|
title="软件工程的奥秘" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<div class="text1"> |
|
|
|
|
软件工程的奥秘 |
|
|
|
|
<br /> |
|
|
|
|
构建无暇的应用程序关键技巧 |
|
|
|
|
</div> |
|
|
|
|
<div class="text2"> |
|
|
|
|
课程类型:公共任选课 |
|
|
|
|
<br /> |
|
|
|
|
授课老师:王易系 |
|
|
|
|
<br /> |
|
|
|
|
报名人数:130人 |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/images/软件2.png" |
|
|
|
|
title="顶级工程师" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<div class="text1"> |
|
|
|
|
如何成为顶级工程师 |
|
|
|
|
<br /> |
|
|
|
|
成功之路解析 |
|
|
|
|
</div> |
|
|
|
|
<div class="text2"> |
|
|
|
|
课程类型:公共任选课 |
|
|
|
|
<br /> |
|
|
|
|
授课老师:刘苏杭 |
|
|
|
|
<br /> |
|
|
|
|
报名人数:126人 |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/images/软件3.png" |
|
|
|
|
title="软件黑科技" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<div class="text1"> |
|
|
|
|
软件工程的黑科技 |
|
|
|
|
<br /> |
|
|
|
|
提高开发效率的秘密技巧大揭秘 |
|
|
|
|
</div> |
|
|
|
|
<div class="text2"> |
|
|
|
|
课程类型:公共任选课 |
|
|
|
|
<br /> |
|
|
|
|
授课老师:安书名 |
|
|
|
|
<br /> |
|
|
|
|
报名人数:117人 |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/images/软件4.png" |
|
|
|
|
title="未来趋势" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<div class="text1"> |
|
|
|
|
软件工程界的未来趋势 |
|
|
|
|
<br /> |
|
|
|
|
AI、大数据和区块的巨大影响 |
|
|
|
|
</div> |
|
|
|
|
<div class="text2"> |
|
|
|
|
课程类型:公共任选课 |
|
|
|
|
<br /> |
|
|
|
|
授课老师:萨基姆 |
|
|
|
|
<br /> |
|
|
|
|
报名人数:140人 |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/images/软件5.png" |
|
|
|
|
title="避免陷阱" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<div class="text1"> |
|
|
|
|
软件工程中常见的陷阱级如何避免 |
|
|
|
|
<br /> |
|
|
|
|
优化你的开发过程 |
|
|
|
|
</div> |
|
|
|
|
<div class="text2"> |
|
|
|
|
课程类型:公共任选课 |
|
|
|
|
<br /> |
|
|
|
|
授课老师:何舒心 |
|
|
|
|
<br /> |
|
|
|
|
报名人数:125人 |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/images/软件6.png" |
|
|
|
|
title="必备工具" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<div class="text1"> |
|
|
|
|
精通软件工程的必备工具 |
|
|
|
|
<br /> |
|
|
|
|
代码管理、测试和持续集成 |
|
|
|
|
</div> |
|
|
|
|
<div class="text2"> |
|
|
|
|
课程类型:公共任选课 |
|
|
|
|
<br /> |
|
|
|
|
授课老师:朱佳娜 |
|
|
|
|
<br /> |
|
|
|
|
报名人数:121人 |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/images/软件7.png" |
|
|
|
|
title="面试攻略" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<div class="text1"> |
|
|
|
|
软件工程师面试攻略 |
|
|
|
|
<br /> |
|
|
|
|
如何在技术中脱颖而出 |
|
|
|
|
</div> |
|
|
|
|
<div class="text2"> |
|
|
|
|
课程类型:公共任选课 |
|
|
|
|
<br /> |
|
|
|
|
授课老师:胡树立 |
|
|
|
|
<br /> |
|
|
|
|
报名人数:117人 |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/images/软件8.png" |
|
|
|
|
alt="实战经验" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<div class="text1"> |
|
|
|
|
软件工程实战经验分析 |
|
|
|
|
<br /> |
|
|
|
|
高效团队合作的秘密武器 |
|
|
|
|
</div> |
|
|
|
|
<div class="text2"> |
|
|
|
|
课程类型:公共任选课 |
|
|
|
|
<br /> |
|
|
|
|
授课老师:张海山 |
|
|
|
|
<br /> |
|
|
|
|
报名人数:125人 |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<el-form-item class="bottom-box"> |
|
|
|
|
<el-button type="info" @click="onRemoval">取消</el-button> |
|
|
|
|
<el-button type="primary">确定</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-drawer> |
|
|
|
|
</div> |
|
|
|
|
<div class="body" v-if="activeIndex == 3"> |
|
|
|
|
<ul> |
|
|
|
|
<li v-for="(item, index) in textList" :key="index"> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/icons/文本1.png" |
|
|
|
|
title="软件工程的奥秘" |
|
|
|
|
width="390px" |
|
|
|
|
height="200px" |
|
|
|
|
/> |
|
|
|
|
<textarea name="" id="">点击输入文本内容:</textarea> |
|
|
|
|
<form action=""> |
|
|
|
|
<input |
|
|
|
|
type="file" |
|
|
|
|
multiple |
|
|
|
|
@change="uploadChange" |
|
|
|
|
style="cursor: pointer" |
|
|
|
|
/> |
|
|
|
|
<br /> |
|
|
|
|
<button |
|
|
|
|
type="submit" |
|
|
|
|
@click="submitUploadFile" |
|
|
|
|
style="cursor: pointer" |
|
|
|
|
<div class="body"> |
|
|
|
|
<div class="nav"> |
|
|
|
|
<el-row> |
|
|
|
|
<el-col :span="4" @click="changeType('1')"> |
|
|
|
|
<div class="nav-info"> |
|
|
|
|
<div class="nav-info-pic"> |
|
|
|
|
<img :src="ppt" style="height: 50px" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="nav-info-name">ppt</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="4" @click="changeType('2')"> |
|
|
|
|
<div class="nav-info"> |
|
|
|
|
<div class="nav-info-pic"> |
|
|
|
|
<img :src="image" style="height: 50px" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="nav-info-name">图片</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
|
|
|
|
|
<el-col :span="4" @click="showComponent('3')"> |
|
|
|
|
<div class="nav-info"> |
|
|
|
|
<div class="nav-info-pic"> |
|
|
|
|
<img style="height: 50px" :src="video" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="nav-info-name">视频</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="4"> |
|
|
|
|
<div class="nav-info"> |
|
|
|
|
<div class="nav-info-pic" @click="showComponent('4')"> |
|
|
|
|
<img style="height: 50px" :src="pdf" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="nav-info-name">PDF</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="4" @click="showComponent('5')"> |
|
|
|
|
<div class="nav-info"> |
|
|
|
|
<div class="nav-info-pic"> |
|
|
|
|
<img style="height: 50px" :src="test" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="nav-info-name">文件</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="4" @click="showComponent('6')"> |
|
|
|
|
<div class="nav-info"> |
|
|
|
|
<div class="nav-info-pic"> |
|
|
|
|
<img style="height: 50px" :src="audio" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="nav-info-name">音频</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="body"> |
|
|
|
|
<!-- ppt资源列表 --> |
|
|
|
|
<div class="courseResourcesList"> |
|
|
|
|
<ul v-if="pptresourceList.length > 0"> |
|
|
|
|
<li |
|
|
|
|
v-for="resource in pptresourceList" |
|
|
|
|
:key="resource.id" |
|
|
|
|
v-loading="loading" |
|
|
|
|
> |
|
|
|
|
上传 |
|
|
|
|
</button> |
|
|
|
|
<button> |
|
|
|
|
<a |
|
|
|
|
href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D" |
|
|
|
|
download="" |
|
|
|
|
> |
|
|
|
|
下载 |
|
|
|
|
</a> |
|
|
|
|
</button> |
|
|
|
|
<button type="reset" style="cursor: pointer">重选</button> |
|
|
|
|
</form> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="body" v-if="activeIndex == 4"> |
|
|
|
|
<ul> |
|
|
|
|
<li v-for="(item, index) in audioList" :key="index"> |
|
|
|
|
<img |
|
|
|
|
src="../../assets/icons/音乐.png" |
|
|
|
|
title="软件工程的奥秘" |
|
|
|
|
width="390px" |
|
|
|
|
height="180px" |
|
|
|
|
<div> |
|
|
|
|
<div class="icon"> |
|
|
|
|
<el-icon @click="onDeleteResource(ids)"> |
|
|
|
|
<Delete /> |
|
|
|
|
</el-icon> |
|
|
|
|
<el-icon> |
|
|
|
|
<Edit /> |
|
|
|
|
</el-icon> |
|
|
|
|
</div> |
|
|
|
|
<div class="vedio"> |
|
|
|
|
<img style="height: 200px" :src="resource.img" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="resource-info"> |
|
|
|
|
<div class="zy-name">{{ resource.name }}</div> |
|
|
|
|
<div class="zy-info">{{ resource.description }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<!-- 分页 --> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<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="total" |
|
|
|
|
@current-change="onCurrentChange" |
|
|
|
|
@size-change="onSizeChange" |
|
|
|
|
style="margin-top: 20px; justify-content: flex-end" |
|
|
|
|
/> |
|
|
|
|
<div class="text1">点击播放软件工程的奥秘</div> |
|
|
|
|
<video |
|
|
|
|
src="../../assets/images/1.mp3" |
|
|
|
|
controls |
|
|
|
|
height="50px" |
|
|
|
|
width="300px" |
|
|
|
|
></video> |
|
|
|
|
<!-- <audio src="../../assets/images/1.mp3" controls></audio> --> |
|
|
|
|
<form action=""> |
|
|
|
|
<input |
|
|
|
|
type="file" |
|
|
|
|
multiple |
|
|
|
|
@change="uploadChange" |
|
|
|
|
style="cursor: pointer" |
|
|
|
|
/> |
|
|
|
|
<br /> |
|
|
|
|
<button |
|
|
|
|
type="submit" |
|
|
|
|
@click="submitUploadFile" |
|
|
|
|
style="cursor: pointer" |
|
|
|
|
> |
|
|
|
|
上传 |
|
|
|
|
</button> |
|
|
|
|
<button> |
|
|
|
|
<a |
|
|
|
|
href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D" |
|
|
|
|
download="" |
|
|
|
|
> |
|
|
|
|
下载 |
|
|
|
|
</a> |
|
|
|
|
</button> |
|
|
|
|
<button type="reset" style="cursor: pointer">重选</button> |
|
|
|
|
</form> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="" @click="gotoinfo"></div> |
|
|
|
|
<div class="buttom"> |
|
|
|
|
<el-pagination |
|
|
|
|
background |
|
|
|
|
layout="prev, pager, next,total" |
|
|
|
|
:page-size="pageSize" |
|
|
|
|
:total="total" |
|
|
|
|
class="pagination" |
|
|
|
|
:pager-count="11" |
|
|
|
|
@current-change="currentChange" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script setup> |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
|
import { aaaApi } from '../../api/courseChaptersApi' |
|
|
|
|
// import {getVideoUrlApi} from 'src/api/assats' |
|
|
|
|
import { uploadFile } from '../../api/courseChaptersApi' |
|
|
|
|
const activeIndex = ref(0) |
|
|
|
|
const router = useRouter() |
|
|
|
|
const gotoinfo = () => { |
|
|
|
|
console.log(router) |
|
|
|
|
router.push('/courseResourcesManagement/courseInfo') |
|
|
|
|
} |
|
|
|
|
function click(e, index) { |
|
|
|
|
document |
|
|
|
|
.querySelectorAll('.loop') |
|
|
|
|
.forEach((item) => item.classList.remove('active-nav')) |
|
|
|
|
e.currentTarget.classList.add('active-nav') |
|
|
|
|
activeIndex.value = index |
|
|
|
|
} |
|
|
|
|
//====================获取视频资源 |
|
|
|
|
|
|
|
|
|
const page = ref(1) |
|
|
|
|
const total = ref(50) |
|
|
|
|
const pageSize = ref(8) |
|
|
|
|
const videoList = ref([ |
|
|
|
|
{ url: '1' }, |
|
|
|
|
{ url: '2' }, |
|
|
|
|
{ url: '3' }, |
|
|
|
|
{ url: '4' }, |
|
|
|
|
{ url: '5' }, |
|
|
|
|
{ url: '6' }, |
|
|
|
|
{ url: '7' }, |
|
|
|
|
{ url: '8' }, |
|
|
|
|
]) |
|
|
|
|
const pptList = ref([ |
|
|
|
|
{ url: '/src/assets/images/0.jpg' }, |
|
|
|
|
{ |
|
|
|
|
url: 'http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D', |
|
|
|
|
}, |
|
|
|
|
{ url: '3' }, |
|
|
|
|
{ url: '4' }, |
|
|
|
|
{ url: '5' }, |
|
|
|
|
{ url: '6' }, |
|
|
|
|
{ url: '7' }, |
|
|
|
|
{ url: '8' }, |
|
|
|
|
]) |
|
|
|
|
const textList = ref([ |
|
|
|
|
{ url: '1' }, |
|
|
|
|
{ url: '2' }, |
|
|
|
|
{ url: '3' }, |
|
|
|
|
{ url: '4' }, |
|
|
|
|
{ url: '5' }, |
|
|
|
|
{ url: '6' }, |
|
|
|
|
{ url: '7' }, |
|
|
|
|
{ url: '8' }, |
|
|
|
|
]) |
|
|
|
|
const audioList = ref([ |
|
|
|
|
{ url: '1' }, |
|
|
|
|
{ url: '2' }, |
|
|
|
|
{ url: '3' }, |
|
|
|
|
{ url: '4' }, |
|
|
|
|
{ url: '5' }, |
|
|
|
|
{ url: '6' }, |
|
|
|
|
{ url: '7' }, |
|
|
|
|
{ url: '8' }, |
|
|
|
|
]) |
|
|
|
|
|
|
|
|
|
function changePage() { |
|
|
|
|
// aaaApi(`?page=${page.value}&pageSize=${pageSize.value}`).then(res=>{ |
|
|
|
|
// // @ts-ignore |
|
|
|
|
// videoList.vlue =res.list |
|
|
|
|
// // @ts-ignore |
|
|
|
|
// total.value = res.total |
|
|
|
|
// }) |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.el-row { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
height: 70px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function currentChange(number) { |
|
|
|
|
console.log(number, 'num') |
|
|
|
|
page.value = number |
|
|
|
|
changePage() |
|
|
|
|
.el-col { |
|
|
|
|
border-radius: 4px; |
|
|
|
|
} |
|
|
|
|
const file = ref(null) |
|
|
|
|
const uploadChange = (e) => { |
|
|
|
|
console.log(e.target.files[0]) |
|
|
|
|
file.value = e.target.files[0] |
|
|
|
|
.nav-info { |
|
|
|
|
display: flex; |
|
|
|
|
text-align: center; |
|
|
|
|
flex-direction: column; |
|
|
|
|
} |
|
|
|
|
const uploadFileEvent = () => {} |
|
|
|
|
const submitUploadFile = async () => { |
|
|
|
|
const formData = new FormData() |
|
|
|
|
formData.append('courseId', 1) |
|
|
|
|
formData.append('file', file.value) |
|
|
|
|
await uploadFile(formData) |
|
|
|
|
.body { |
|
|
|
|
background-color: #fff; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
//============ |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
.top { |
|
|
|
|
width: 1620px; |
|
|
|
|
height: 100px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
border: 1px solid rgb(187, 181, 181); |
|
|
|
|
background-color: rgb(255, 255, 255); |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
height: 99px !important; |
|
|
|
|
border-bottom: 1px solid; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
& > * { |
|
|
|
|
transition: 0.1s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.active-nav { |
|
|
|
|
border-bottom: 5px solid blue !important; |
|
|
|
|
} |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.body { |
|
|
|
|
width: 1620px; |
|
|
|
|
height: 680px; |
|
|
|
|
display: flex; |
|
|
|
|
background-color: rgb(237, 237, 238); |
|
|
|
|
.nav-info-pic .img { |
|
|
|
|
height: 50px; |
|
|
|
|
width: 50px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
list-style-type: none; |
|
|
|
|
.bottom-box { |
|
|
|
|
//display: flex |
|
|
|
|
float: right; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.body ul { |
|
|
|
|
width: 100%; |
|
|
|
|
ul { |
|
|
|
|
list-style-type: none; |
|
|
|
|
padding: 10; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
align-content: space-evenly; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
/* justify-content: space-evenly; */ |
|
|
|
|
justify-content: start; |
|
|
|
|
} |
|
|
|
|
li { |
|
|
|
|
transition: filter 0.3s; /* 添加过渡动画 */ |
|
|
|
|
flex: 0 0 20%; |
|
|
|
|
|
|
|
|
|
.body li { |
|
|
|
|
height: 320px; |
|
|
|
|
width: 390px; |
|
|
|
|
background-color: rgb(237, 237, 238); |
|
|
|
|
} |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
padding: 10px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
|
.loop { |
|
|
|
|
width: 100px; |
|
|
|
|
height: 99px; |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 20px; |
|
|
|
|
border-bottom: 1px solid rgb(187, 181, 181); |
|
|
|
|
background-color: rgb(253, 252, 252); |
|
|
|
|
transition: box-shadow 0.3s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.body .text1 { |
|
|
|
|
font-size: 25px; |
|
|
|
|
line-height: 30px; |
|
|
|
|
li:hover { |
|
|
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.body .text2 { |
|
|
|
|
font-size: 18px; |
|
|
|
|
line-height: 20px; |
|
|
|
|
color: rgb(186, 43, 11); |
|
|
|
|
.body { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
min-height: 100vh; |
|
|
|
|
} |
|
|
|
|
.body a { |
|
|
|
|
all: initial; |
|
|
|
|
cursor: pointer; |
|
|
|
|
.courseResourcesList { |
|
|
|
|
flex: 1; |
|
|
|
|
} |
|
|
|
|
.pagination { |
|
|
|
|
position: sticky; |
|
|
|
|
bottom: 0; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.icon { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
.buttom { |
|
|
|
|
width: 100%; |
|
|
|
|
.resource-info { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
// .pagination{ |
|
|
|
|
// width: ; |
|
|
|
|
// $height:150px; |
|
|
|
|
// height: $height; |
|
|
|
|
// button,li{ |
|
|
|
|
// height: $height !important; |
|
|
|
|
// } |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
.zy-name:hover { |
|
|
|
|
color: rgb(138, 201, 243); /* 鼠标经过时将字体颜色设置为蓝色 */ |
|
|
|
|
} |
|
|
|
|
.zy-name { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
.zy-info { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<!-- 上传git |
|
|
|
|
git add . |
|
|
|
|
git commit -m '介绍' |
|
|
|
|
git pull |
|
|
|
|
git push |
|
|
|
|
|
|
|
|
|
--> |
|
|
|
|
|
