Compare commits
No commits in common. '0da2b2cc06ab5bba1633fa0dce35dcd924aa36fc' and '2766e17c031a29e8ba316292a12d281ff856ddeb' have entirely different histories.
0da2b2cc06
...
2766e17c03
15 changed files with 3957 additions and 4448 deletions
File diff suppressed because it is too large
Load Diff
@ -1,9 +0,0 @@ |
||||
import request from '@/utils/request' |
||||
//获取ppt资源列表
|
||||
export const getpptResourceListService = (params) => |
||||
request.get('http://localhost:8080/courses/getall', { params }) |
||||
export function DelpptResourceListService(ids) { |
||||
return request.delete( |
||||
`http://localhost:8080/learningrecords/delete?ids=${ids}`, |
||||
) |
||||
} |
||||
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 8.5 KiB |
@ -1,10 +0,0 @@ |
||||
import OSS from 'ali-oss' |
||||
|
||||
export const client = new OSS({ |
||||
bucket: 'wenyu132', //bucket名称
|
||||
region: 'oss-cn-beijing', //区域
|
||||
endpoint: 'oss-cn-beijing.aliyuncs.com', //地域节点==>外网访问
|
||||
accessKeyId: 'LTAI5tPe9x46aWZt8FScytst', //访问键id
|
||||
accessKeySecret: '0mfxSLzmRgtHMXpD5pCBTl9RfwbmDG', //访问密钥
|
||||
secure: true, //http就是false,https就是true
|
||||
}) |
||||
@ -1,23 +0,0 @@ |
||||
import { client } from '@/config/index.js' |
||||
import { nanoid } from 'nanoid' //随机函数
|
||||
const tool = { |
||||
oss: { |
||||
async upload(file) { |
||||
// 文件名
|
||||
const uuid = nanoid() |
||||
// 文件后缀名
|
||||
const index = file.name.lastIndexOf('.') |
||||
const suffix = file.name.substring(index + 1) |
||||
//完整路径
|
||||
let fileName = 'wenyu/' + uuid + '.' + suffix |
||||
|
||||
return await client.multipartUpload(fileName, file, { |
||||
progress: function (p) { |
||||
console.log('进度', p) |
||||
}, |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
|
||||
export default tool |
||||
@ -1,5 +0,0 @@ |
||||
<script setup></script> |
||||
<template> |
||||
<div></div> |
||||
</template> |
||||
<style scoped></style> |
||||
@ -0,0 +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> |
||||
<div class="warpper"></div> |
||||
<div class="vo"> |
||||
请选择院系专业: |
||||
<button> |
||||
<select> |
||||
<option>国际教育学院</option> |
||||
<option>能源工程学院</option> |
||||
<option>体育学院</option> |
||||
<option>马克思主义学院</option> |
||||
<option>智能制造学院</option> |
||||
<option>商务英语学院</option> |
||||
</select> |
||||
</button> |
||||
<button> |
||||
<select> |
||||
<option>01班</option> |
||||
<option>02班</option> |
||||
<option>03班</option> |
||||
<option>04班</option> |
||||
<option>05班</option> |
||||
</select> |
||||
</button> |
||||
<br /> |
||||
请选择年级: |
||||
<button> |
||||
<select> |
||||
<option>大一</option> |
||||
<option>大二</option> |
||||
<option>大三</option> |
||||
<option>大四</option> |
||||
</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> |
||||
</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; |
||||
} |
||||
.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; |
||||
} |
||||
.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 { |
||||
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; |
||||
} |
||||
.vo { |
||||
width: 1222px; |
||||
height: 130px; |
||||
background-color: rgb(250, 225, 243); |
||||
border: solid 1px rgb(220, 214, 214); |
||||
float: left; |
||||
} |
||||
.ch.ch1 { |
||||
} |
||||
</style> |
||||
@ -1,328 +1,569 @@ |
||||
<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"> |
||||
<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" |
||||
<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" |
||||
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="" |
||||
> |
||||
<el-button type="primary">点击上传</el-button> |
||||
<template #tip> |
||||
<div class="el-upload__tip"> |
||||
只能上传jpg/png文件,且不超过500kb |
||||
下载 |
||||
</a> |
||||
</button> |
||||
<button type="reset" style="cursor: pointer">重选</button> |
||||
</form> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
</el-upload> |
||||
</el-form-item> |
||||
|
||||
<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 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> |
||||
<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" /> |
||||
<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="nav-info-name">ppt</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> |
||||
</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 class="text2"> |
||||
课程类型:公共任选课 |
||||
<br /> |
||||
授课老师:王易系 |
||||
<br /> |
||||
报名人数:130人 |
||||
</div> |
||||
<div class="nav-info-name">图片</div> |
||||
</li> |
||||
<li> |
||||
<img |
||||
src="../../assets/images/软件2.png" |
||||
title="顶级工程师" |
||||
width="390px" |
||||
height="200px" |
||||
/> |
||||
<div class="text1"> |
||||
如何成为顶级工程师 |
||||
<br /> |
||||
成功之路解析 |
||||
</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 class="text2"> |
||||
课程类型:公共任选课 |
||||
<br /> |
||||
授课老师:刘苏杭 |
||||
<br /> |
||||
报名人数:126人 |
||||
</div> |
||||
<div class="nav-info-name">视频</div> |
||||
</li> |
||||
<li> |
||||
<img |
||||
src="../../assets/images/软件3.png" |
||||
title="软件黑科技" |
||||
width="390px" |
||||
height="200px" |
||||
/> |
||||
<div class="text1"> |
||||
软件工程的黑科技 |
||||
<br /> |
||||
提高开发效率的秘密技巧大揭秘 |
||||
</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 class="text2"> |
||||
课程类型:公共任选课 |
||||
<br /> |
||||
授课老师:安书名 |
||||
<br /> |
||||
报名人数:117人 |
||||
</div> |
||||
<div class="nav-info-name">PDF</div> |
||||
</li> |
||||
<li> |
||||
<img |
||||
src="../../assets/images/软件4.png" |
||||
title="未来趋势" |
||||
width="390px" |
||||
height="200px" |
||||
/> |
||||
<div class="text1"> |
||||
软件工程界的未来趋势 |
||||
<br /> |
||||
AI、大数据和区块的巨大影响 |
||||
</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 class="text2"> |
||||
课程类型:公共任选课 |
||||
<br /> |
||||
授课老师:萨基姆 |
||||
<br /> |
||||
报名人数:140人 |
||||
</div> |
||||
<div class="nav-info-name">文件</div> |
||||
</li> |
||||
<li> |
||||
<img |
||||
src="../../assets/images/软件5.png" |
||||
title="避免陷阱" |
||||
width="390px" |
||||
height="200px" |
||||
/> |
||||
<div class="text1"> |
||||
软件工程中常见的陷阱级如何避免 |
||||
<br /> |
||||
优化你的开发过程 |
||||
</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 class="text2"> |
||||
课程类型:公共任选课 |
||||
<br /> |
||||
授课老师:何舒心 |
||||
<br /> |
||||
报名人数:125人 |
||||
</div> |
||||
<div class="nav-info-name">音频</div> |
||||
</li> |
||||
<li> |
||||
<img |
||||
src="../../assets/images/软件6.png" |
||||
title="必备工具" |
||||
width="390px" |
||||
height="200px" |
||||
/> |
||||
<div class="text1"> |
||||
精通软件工程的必备工具 |
||||
<br /> |
||||
代码管理、测试和持续集成 |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<div class="text2"> |
||||
课程类型:公共任选课 |
||||
<br /> |
||||
授课老师:朱佳娜 |
||||
<br /> |
||||
报名人数:121人 |
||||
</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" |
||||
> |
||||
<div> |
||||
<div class="icon"> |
||||
<el-icon @click="onDeleteResource(ids)"> |
||||
<Delete /> |
||||
</el-icon> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
</li> |
||||
<li> |
||||
<img |
||||
src="../../assets/images/软件7.png" |
||||
title="面试攻略" |
||||
width="390px" |
||||
height="200px" |
||||
/> |
||||
<div class="text1"> |
||||
软件工程师面试攻略 |
||||
<br /> |
||||
如何在技术中脱颖而出 |
||||
</div> |
||||
<div class="vedio"> |
||||
<img style="height: 200px" :src="resource.img" /> |
||||
<div class="text2"> |
||||
课程类型:公共任选课 |
||||
<br /> |
||||
授课老师:胡树立 |
||||
<br /> |
||||
报名人数:117人 |
||||
</div> |
||||
<div class="resource-info"> |
||||
<div class="zy-name">{{ resource.name }}</div> |
||||
<div class="zy-info">{{ resource.description }}</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> |
||||
</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="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" |
||||
> |
||||
上传 |
||||
</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 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> |
||||
</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' }, |
||||
]) |
||||
|
||||
<style lang="scss" scoped> |
||||
.el-row { |
||||
margin-bottom: 20px; |
||||
background-color: #fff; |
||||
height: 70px; |
||||
function changePage() { |
||||
// aaaApi(`?page=${page.value}&pageSize=${pageSize.value}`).then(res=>{ |
||||
// // @ts-ignore |
||||
// videoList.vlue =res.list |
||||
// // @ts-ignore |
||||
// total.value = res.total |
||||
// }) |
||||
} |
||||
|
||||
.el-col { |
||||
border-radius: 4px; |
||||
function currentChange(number) { |
||||
console.log(number, 'num') |
||||
page.value = number |
||||
changePage() |
||||
} |
||||
.nav-info { |
||||
display: flex; |
||||
text-align: center; |
||||
flex-direction: column; |
||||
const file = ref(null) |
||||
const uploadChange = (e) => { |
||||
console.log(e.target.files[0]) |
||||
file.value = e.target.files[0] |
||||
} |
||||
.body { |
||||
background-color: #fff; |
||||
height: 100%; |
||||
const uploadFileEvent = () => {} |
||||
const submitUploadFile = async () => { |
||||
const formData = new FormData() |
||||
formData.append('courseId', 1) |
||||
formData.append('file', file.value) |
||||
await uploadFile(formData) |
||||
} |
||||
//============ |
||||
</script> |
||||
<style lang="scss"> |
||||
.top { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.nav-info-pic .img { |
||||
height: 50px; |
||||
width: 50px; |
||||
} |
||||
.bottom-box { |
||||
//display: flex |
||||
float: right; |
||||
} |
||||
ul { |
||||
list-style-type: none; |
||||
padding: 10; |
||||
width: 1620px; |
||||
height: 100px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
/* justify-content: space-evenly; */ |
||||
justify-content: start; |
||||
} |
||||
li { |
||||
transition: filter 0.3s; /* 添加过渡动画 */ |
||||
flex: 0 0 20%; |
||||
justify-content: space-around; |
||||
border: 1px solid rgb(187, 181, 181); |
||||
background-color: rgb(255, 255, 255); |
||||
|
||||
margin-bottom: 10px; |
||||
padding: 10px; |
||||
box-sizing: border-box; |
||||
li { |
||||
height: 99px !important; |
||||
border-bottom: 1px solid; |
||||
} |
||||
|
||||
transition: box-shadow 0.3s; |
||||
& > * { |
||||
transition: 0.1s; |
||||
cursor: pointer; |
||||
} |
||||
li:hover { |
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); |
||||
|
||||
.active-nav { |
||||
border-bottom: 5px solid blue !important; |
||||
} |
||||
} |
||||
|
||||
.body { |
||||
width: 1620px; |
||||
height: 680px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 100vh; |
||||
background-color: rgb(237, 237, 238); |
||||
} |
||||
.courseResourcesList { |
||||
flex: 1; |
||||
} |
||||
.pagination { |
||||
position: sticky; |
||||
bottom: 0; |
||||
margin: 0 auto; |
||||
|
||||
li { |
||||
list-style-type: none; |
||||
} |
||||
.icon { |
||||
|
||||
.body ul { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-content: space-evenly; |
||||
justify-content: space-between; |
||||
} |
||||
.resource-info { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.body li { |
||||
height: 320px; |
||||
width: 390px; |
||||
background-color: rgb(237, 237, 238); |
||||
} |
||||
|
||||
.loop { |
||||
width: 100px; |
||||
height: 99px; |
||||
text-align: center; |
||||
padding: 20px; |
||||
border-bottom: 1px solid rgb(187, 181, 181); |
||||
background-color: rgb(253, 252, 252); |
||||
} |
||||
.zy-name:hover { |
||||
color: rgb(138, 201, 243); /* 鼠标经过时将字体颜色设置为蓝色 */ |
||||
|
||||
.body .text1 { |
||||
font-size: 25px; |
||||
line-height: 30px; |
||||
} |
||||
.zy-name { |
||||
margin-top: 10px; |
||||
font-size: 20px; |
||||
|
||||
.body .text2 { |
||||
font-size: 18px; |
||||
line-height: 20px; |
||||
color: rgb(186, 43, 11); |
||||
} |
||||
.zy-info { |
||||
margin-top: 20px; |
||||
.body a { |
||||
all: initial; |
||||
cursor: pointer; |
||||
} |
||||
.buttom { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
// .pagination{ |
||||
// width: ; |
||||
// $height:150px; |
||||
// height: $height; |
||||
// button,li{ |
||||
// height: $height !important; |
||||
// } |
||||
} |
||||
</style> |
||||
|
||||
<!-- 上传git |
||||
git add . |
||||
git commit -m '介绍' |
||||
git pull |
||||
git push |
||||
|
||||
--> |
||||
|
||||
Loading…
Reference in new issue