aaa
6 months ago
parent
c40f11c115
commit
0a0c3b2366
21 changed files with 292 additions and 295 deletions
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 704 B |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 271 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 683 KiB |
|
After Width: | Height: | Size: 481 KiB |
@ -1,386 +1,355 @@ |
|||||||
<template> |
<template> |
||||||
<div class="top"> |
<div> |
||||||
<div class="loop" @click="click(2)"> |
<div class="top"> |
||||||
<img src="D:\前端\前端code\img\简介.svg" alt="" width="50px" height="50px"> |
<div class="loop active-nav" @click="click($event,2)"> |
||||||
|
<img src="../../assets/icons/课程简介.svg" alt="" width="50px" height="50px"> |
||||||
<p>简介</p> |
<p>简介</p> |
||||||
</div> |
</div> |
||||||
<div class="loop" @click="click(1)"> |
<div class="loop" @click="click($event,1)"> |
||||||
<img src="D:\前端\前端code\img\ppt.svg" alt="" width="50px" height="50px"> |
<img src="../../assets/icons/ppt.svg" alt="" width="50px" height="50px"> |
||||||
<p>ppt</p> |
<p>ppt</p> |
||||||
</div> |
</div> |
||||||
<div class="loop" @click="click(0)"> |
<div class="loop" @click="click($event,0)"> |
||||||
<img src="D:\前端\前端code\img\视频.svg" alt="" width="50px" height="50px"> |
<img src="../../assets/icons/视频.svg" alt="" width="50px" height="50px"> |
||||||
<p>视频</p> |
<p>视频</p> |
||||||
</div> |
</div> |
||||||
<div class="loop" @click="click(3)"> |
<div class="loop" @click="click($event,3)"> |
||||||
<img src="D:\前端\前端code\img\文本.svg" alt="" width="50px" height="50px"> |
<img src="../../assets/icons/文本.svg" alt="" width="50px" height="50px"> |
||||||
<p>文本</p> |
<p>文本</p> |
||||||
</div> |
</div> |
||||||
<div class="loop" @click="click(4)"> |
<div class="loop" @click="click($event,4)"> |
||||||
<img src="D:\前端\前端code\img\音频.svg" alt="" width="50px" height="50px"> |
<img src="../../assets/icons/音频.svg" alt="" width="50px" height="50px"> |
||||||
<p>音频</p> |
<p>音频</p> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
<div class="body" v-if="activeIndex == 0"> |
||||||
</div> |
<ul> |
||||||
<div class="body" v-if="activeIndex == 0" > |
<li v-for="item, index in videoList" :key="index"> |
||||||
<ul> |
<video :src="item.url" controls width="390px"></video> |
||||||
<li> |
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px" ></video> |
<form action=""> |
||||||
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
<input type="file" multiple @change="uploadChange" style="cursor: pointer;"><br> |
||||||
</li> |
<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> |
||||||
<li> |
<button type="reset" style="cursor: pointer;">重选</button> |
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
</form> |
||||||
<div class="text1">如何成为顶级工程师<br>成功之路解析</div> |
</li> |
||||||
</li> |
</ul> |
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程中常见的陷阱级如何避免<br>优化你的开发过程</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">精通软件工程的必备工具<br>代码管理、测试和持续集成</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程师面试攻略<br>如何在技术中脱颖而出</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程实战经验分析<br>高效团队合作的秘密武器</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
</div> |
||||||
|
|
||||||
<div class="body" v-if="activeIndex==1"> |
<div class="body" v-if="activeIndex == 1"> |
||||||
<ul> |
<ul> |
||||||
<li> |
<li v-for="item, index in pptList" :key="index"> |
||||||
<img src="D:\前端\前端code\img\ppt1.png" title="ppt" height="200px" width="390px"> |
<img :src="item.url" title="ppt" height="200px" width="390px"> |
||||||
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
||||||
<form action=""> |
<form action=""> |
||||||
<input type="file" multiple><br> |
<input type="file" multiple @change="uploadChange"><br> |
||||||
<button type="submit">上传</button> |
<button type="submit" @click="submitUploadFile" style="cursor: pointer;">上传</button> |
||||||
<button type="reset">重选</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> |
</form> |
||||||
</li> |
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="body" v-if="activeIndex == 2"> |
||||||
|
<ul> |
||||||
<li> |
<li> |
||||||
<img src="D:\前端\前端code\img\文本1.png" title="content" height="200px" width="390px"> |
<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="text1">如何成为顶级工程师<br>成功之路解析</div> |
||||||
<form action=""> |
<div class="text2">课程类型:公共任选课<br> |
||||||
<input type="file" multiple><br> |
授课老师:刘苏杭<br> |
||||||
<button type="submit">上传</button> |
报名人数:126人 |
||||||
<button type="reset">重选</button> |
</div> |
||||||
</form> |
|
||||||
</li> |
</li> |
||||||
<li> |
<li> |
||||||
<img src="D:\前端\前端code\img\音乐.png" title="music" height="200px" width="390px"> |
<img src="../../assets/images/软件3.png" title="软件黑科技" width="390px" height="200px"> |
||||||
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
||||||
<form action=""> |
<div class="text2">课程类型:公共任选课<br> |
||||||
<input type="file" multiple><br> |
授课老师:安书名<br> |
||||||
<button type="submit">上传</button> |
报名人数:117人 |
||||||
<button type="reset">重选</button> |
</div> |
||||||
</form> |
|
||||||
</li> |
</li> |
||||||
<li> |
<li> |
||||||
<img src="D:\前端\前端code\img\PDF1.png" title="pdf" height="200px" width="390px"> |
<img src="../../assets/images/软件4.png" title="未来趋势" width="390px" height="200px"> |
||||||
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div> |
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div> |
||||||
<form action=""> |
<div class="text2">课程类型:公共任选课<br> |
||||||
<input type="file" multiple><br> |
授课老师:萨基姆<br> |
||||||
<button type="submit">上传</button> |
报名人数:140人 |
||||||
<button type="reset">重选</button> |
</div> |
||||||
</form> |
|
||||||
</li> |
</li> |
||||||
<li> |
<li> |
||||||
<img src="D:\前端\前端code\img\ppt1.png" title="ppt" height="200px" width="390px"> |
<img src="../../assets/images/软件5.png" title="避免陷阱" width="390px" height="200px"> |
||||||
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
<div class="text1">软件工程中常见的陷阱级如何避免<br>优化你的开发过程</div> |
||||||
<form action=""> |
<div class="text2">课程类型:公共任选课<br> |
||||||
<input type="file" multiple><br> |
授课老师:何舒心<br> |
||||||
<button type="submit">上传</button> |
报名人数:125人 |
||||||
<button type="reset">重选</button> |
</div> |
||||||
</form> |
|
||||||
</li> |
</li> |
||||||
<li> |
<li> |
||||||
<img src="D:\前端\前端code\img\文本1.png" title="content" height="200px" width="390px"> |
<img src="../../assets/images/软件6.png" title="必备工具" width="390px" height="200px"> |
||||||
<div class="text1">如何成为顶级工程师<br>成功之路解析</div> |
<div class="text1">精通软件工程的必备工具<br>代码管理、测试和持续集成</div> |
||||||
<form action=""> |
<div class="text2">课程类型:公共任选课<br> |
||||||
<input type="file" multiple><br> |
授课老师:朱佳娜<br> |
||||||
<button type="submit">上传</button> |
报名人数:121人 |
||||||
<button type="reset">重选</button> |
</div> |
||||||
</form> |
|
||||||
</li> |
</li> |
||||||
<li> |
<li> |
||||||
<img src="D:\前端\前端code\img\音乐.png" title="music" height="200px" width="390px"> |
<img src="../../assets/images/软件7.png" title="面试攻略" width="390px" height="200px"> |
||||||
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
<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> |
||||||
|
</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=""> |
<form action=""> |
||||||
<input type="file" multiple><br> |
<input type="file" multiple @change="uploadChange" style="cursor: pointer;"><br> |
||||||
<button type="submit">上传</button> |
<button type="submit" @click="submitUploadFile" style="cursor: pointer;">上传</button> |
||||||
<button type="reset">重选</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> |
</form> |
||||||
</li> |
</li> |
||||||
<li> |
</ul> |
||||||
<img src="D:\前端\前端code\img\PDF1.png" title="pdf" height="200px" width="390px"> |
</div> |
||||||
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</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=""> |
<form action=""> |
||||||
<input type="file" multiple><br> |
<input type="file" multiple @change="uploadChange" style="cursor: pointer;"><br> |
||||||
<button type="submit">上传</button> |
<button type="submit" @click="submitUploadFile" style="cursor: pointer;">上传</button> |
||||||
<button type="reset">重选</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> |
</form> |
||||||
</li> |
</li> |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
<div class="body" v-if="activeIndex==2"> |
<div class="" @click="gotoinfo"> |
||||||
<ul> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件1.jpg" title="软件工程的奥秘" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:王易系<br> |
|
||||||
报名人数:130人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件2.png" title="顶级工程师" width="390px" height="200px" > |
|
||||||
<div class="text1">如何成为顶级工程师<br>成功之路解析</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:刘苏杭<br> |
|
||||||
报名人数:126人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件3.jpg" title="软件黑科技" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:安书名<br> |
|
||||||
报名人数:117人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件4.png" title="未来趋势" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:萨基姆<br> |
|
||||||
报名人数:140人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件5.jpg" title="避免陷阱" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程中常见的陷阱级如何避免<br>优化你的开发过程</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:何舒心<br> |
|
||||||
报名人数:125人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件6.jpg" title="必备工具" width="390px" height="200px" > |
|
||||||
<div class="text1">精通软件工程的必备工具<br>代码管理、测试和持续集成</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:朱佳娜<br> |
|
||||||
报名人数:121人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件7.png" title="面试攻略" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程师面试攻略<br>如何在技术中脱颖而出</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:胡树立<br> |
|
||||||
报名人数:117人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件8.jpg" alt="实战经验" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程实战经验分析<br>高效团队合作的秘密武器</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:张海山<br> |
|
||||||
报名人数:125人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<div class="body" v-if="activeIndex==3"> |
|
||||||
<ul> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件1.jpg" title="软件工程的奥秘" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件2.png" title="顶级工程师" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件3.jpg" title="软件黑科技" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件4.png" title="未来趋势" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件5.jpg" title="避免陷阱" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件6.jpg" title="必备工具" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件7.png" title="面试攻略" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件8.jpg" alt="实战经验" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
</div> |
||||||
<div class="body" v-if="activeIndex==4"> |
<div class="buttom"> |
||||||
<ul> |
<el-pagination background layout="prev, pager, next,total" :page-size="pageSize" :total="total" class="pagination" |
||||||
<li> |
:pager-count="11" @current-change="currentChange" /> |
||||||
<img src="D:\前端\前端code\img\软件1.jpg" title="软件工程的奥秘" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程的奥秘</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件2.png" title="顶级工程师" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放顶级工程师</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件3.jpg" title="软件黑科技" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件黑科技</div> |
|
||||||
<audio src="http://192.168.192.1" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件4.png" title="未来趋势" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程为了趋势</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件5.jpg" title="避免陷阱" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程如何避免陷阱</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
|
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件6.jpg" title="必备工具" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程的必备工具</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件7.png" title="面试攻略" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程的面试攻略</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件8.jpg" alt="实战经验" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程的实战经验</div> |
|
||||||
<!-- <audio src="../../../../前端code/vedio/tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> --> |
|
||||||
<audio controls> |
|
||||||
<source src="../../../../前端code/vedio/tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" type="audio/mpeg"> |
|
||||||
<source src="../../../../前端code/vedio/tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" type="audio/ogg"> |
|
||||||
您的浏览器不支持该音频格式。 |
|
||||||
</audio> |
|
||||||
<!-- <embed height="50" width="100" src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls > --> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
</div> |
||||||
<div class="" @click="gotoinfo"> |
|
||||||
|
|
||||||
</div> |
</div> |
||||||
|
|
||||||
</template> |
</template> |
||||||
<script lang="ts" setup> |
<script setup> |
||||||
import {ref} from 'vue' |
import { ref } from 'vue' |
||||||
import { useRouter } from 'vue-router' |
import { useRouter } from 'vue-router' |
||||||
|
import { aaaApi } from '../../api/courseChaptersApi' |
||||||
// import {getVideoUrlApi} from 'src/api/assats' |
// import {getVideoUrlApi} from 'src/api/assats' |
||||||
const activeIndex=ref(0) |
import { uploadFile } from '../../api/courseChaptersApi' |
||||||
|
const activeIndex = ref(0) |
||||||
const router = useRouter() |
const router = useRouter() |
||||||
const gotoinfo = () => { |
const gotoinfo = () => { |
||||||
console.log(router); |
console.log(router); |
||||||
router.push('/courseResourcesManagement/courseInfo') |
router.push('/courseResourcesManagement/courseInfo') |
||||||
} |
} |
||||||
function click(index:any){ |
function click(e,index) { |
||||||
console.log(index); |
document.querySelectorAll('.loop').forEach(item=> item.classList.remove('active-nav')) |
||||||
activeIndex.value = index |
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 |
||||||
|
// }) |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function currentChange(number) { |
||||||
|
console.log(number, 'num') |
||||||
|
page.value = number |
||||||
|
changePage() |
||||||
|
} |
||||||
|
const file = ref(null) |
||||||
|
const uploadChange = (e) => { |
||||||
|
console.log(e.target.files[0]); |
||||||
|
file.value = e.target.files[0] |
||||||
|
} |
||||||
|
const uploadFileEvent = () => { |
||||||
|
|
||||||
|
} |
||||||
|
const submitUploadFile = async () => { |
||||||
|
const formData = new FormData() |
||||||
|
formData.append('courseId',1) |
||||||
|
formData.append('file',file.value) |
||||||
|
await uploadFile(formData) |
||||||
|
} |
||||||
|
//============ |
||||||
|
|
||||||
</script> |
</script> |
||||||
<style lang="scss" scoped> |
<style lang="scss"> |
||||||
.top{ |
.top { |
||||||
width: 1620px; |
width: 1620px; |
||||||
height: 100px; |
height: 100px; |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-around; |
justify-content: space-around; |
||||||
border: 1px solid rgb(187, 181, 181); |
border: 1px solid rgb(187, 181, 181); |
||||||
background-color: rgb(255, 255, 255); |
background-color: rgb(255, 255, 255); |
||||||
li{ |
|
||||||
|
li { |
||||||
height: 99px !important; |
height: 99px !important; |
||||||
border-bottom: 1px solid; |
border-bottom: 1px solid; |
||||||
} |
} |
||||||
&>*{ |
|
||||||
|
&>* { |
||||||
transition: .1s; |
transition: .1s; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
&>*:hover{ |
|
||||||
|
.active-nav { |
||||||
border-bottom: 5px solid blue !important; |
border-bottom: 5px solid blue !important; |
||||||
} |
} |
||||||
} |
} |
||||||
.body{ |
|
||||||
|
.body { |
||||||
width: 1620px; |
width: 1620px; |
||||||
height: 680px; |
height: 680px; |
||||||
display: flex; |
display: flex; |
||||||
background-color: rgb(237, 237, 238); |
background-color: rgb(237, 237, 238); |
||||||
} |
} |
||||||
li{ |
|
||||||
list-style-type: none; |
li { |
||||||
|
list-style-type: none; |
||||||
} |
} |
||||||
.body ul{ |
|
||||||
|
.body ul { |
||||||
width: 100%; |
width: 100%; |
||||||
display: flex; |
display: flex; |
||||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||||
align-content: space-evenly; |
align-content: space-evenly; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
} |
} |
||||||
.body li{ |
|
||||||
height: 320px; |
.body li { |
||||||
width: 390px; |
height: 320px; |
||||||
background-color: rgb(237, 237, 238); |
width: 390px; |
||||||
|
background-color: rgb(237, 237, 238); |
||||||
|
|
||||||
} |
} |
||||||
.loop{ |
|
||||||
|
.loop { |
||||||
width: 100px; |
width: 100px; |
||||||
height: 99px; |
height: 99px; |
||||||
text-align: center; |
text-align: center; |
||||||
padding: 20px; |
padding: 20px; |
||||||
border-bottom: 1px solid rgb(187, 181, 181);; |
border-bottom: 1px solid rgb(187, 181, 181); |
||||||
|
; |
||||||
background-color: rgb(253, 252, 252); |
background-color: rgb(253, 252, 252); |
||||||
} |
} |
||||||
.body .text1{ |
|
||||||
|
.body .text1 { |
||||||
font-size: 25px; |
font-size: 25px; |
||||||
line-height: 30px; |
line-height: 30px; |
||||||
} |
} |
||||||
.body .text2{ |
|
||||||
|
.body .text2 { |
||||||
font-size: 18px; |
font-size: 18px; |
||||||
line-height: 20px; |
line-height: 20px; |
||||||
color: rgb(186, 43, 11); |
color: rgb(186, 43, 11); |
||||||
} |
} |
||||||
|
.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 |
||||||
|
|
||||||
</style> |
--> |
||||||
Loading…
Reference in new issue