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

视频

Browse Source
develoop
aaa 6 months ago
parent fdef8ce4d4
commit 0d2a70abb5
2 changed files with 513 additions and 4 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. 132
      src/views/courseResources/courseInfo.vue
  2. 385
      src/views/courseResources/index.vue

132
src/views/courseResources/courseInfo.vue
Unescape View File

@ -0,0 +1,132 @@
<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>

385
src/views/courseResources/index.vue
Unescape View File

@ -1,9 +1,386 @@
<template>
<div>课程资源</div>
</template>
<div class="top">
<div class="loop" @click="click(2)">
<img src="D:\前端\前端code\img\简介.svg" alt="" width="50px" height="50px">
<p>简介</p>
</div>
<div class="loop" @click="click(1)">
<img src="D:\前端\前端code\img\ppt.svg" alt="" width="50px" height="50px">
<p>ppt</p>
</div>
<div class="loop" @click="click(0)">
<img src="D:\前端\前端code\img\视频.svg" alt="" width="50px" height="50px">
<p>视频</p>
</div>
<div class="loop" @click="click(3)">
<img src="D:\前端\前端code\img\文本.svg" alt="" width="50px" height="50px">
<p>文本</p>
</div>
<div class="loop" @click="click(4)">
<img src="D:\前端\前端code\img\音频.svg" alt="" width="50px" height="50px">
<p>音频</p>
</div>
</div>
<div class="body" v-if="activeIndex == 0" >
<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>成功之路解析</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>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 class="body" v-if="activeIndex==1">
<ul>
<li>
<img src="D:\前端\前端code\img\ppt1.png" title="ppt" height="200px" width="390px">
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div>
<form action="">
<input type="file" multiple><br>
<button type="submit">上传</button>
<button type="reset">重选</button>
</form>
</li>
<li>
<img src="D:\前端\前端code\img\文本1.png" title="content" height="200px" width="390px">
<div class="text1">如何成为顶级工程师<br>成功之路解析</div>
<form action="">
<input type="file" multiple><br>
<button type="submit">上传</button>
<button type="reset">重选</button>
</form>
</li>
<li>
<img src="D:\前端\前端code\img\音乐.png" title="music" height="200px" width="390px">
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div>
<form action="">
<input type="file" multiple><br>
<button type="submit">上传</button>
<button type="reset">重选</button>
</form>
</li>
<li>
<img src="D:\前端\前端code\img\PDF1.png" title="pdf" height="200px" width="390px">
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div>
<form action="">
<input type="file" multiple><br>
<button type="submit">上传</button>
<button type="reset">重选</button>
</form>
</li>
<li>
<img src="D:\前端\前端code\img\ppt1.png" title="ppt" height="200px" width="390px">
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div>
<form action="">
<input type="file" multiple><br>
<button type="submit">上传</button>
<button type="reset">重选</button>
</form>
</li>
<li>
<img src="D:\前端\前端code\img\文本1.png" title="content" height="200px" width="390px">
<div class="text1">如何成为顶级工程师<br>成功之路解析</div>
<form action="">
<input type="file" multiple><br>
<button type="submit">上传</button>
<button type="reset">重选</button>
</form>
</li>
<li>
<img src="D:\前端\前端code\img\音乐.png" title="music" height="200px" width="390px">
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div>
<form action="">
<input type="file" multiple><br>
<button type="submit">上传</button>
<button type="reset">重选</button>
</form>
</li>
<li>
<img src="D:\前端\前端code\img\PDF1.png" title="pdf" height="200px" width="390px">
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div>
<form action="">
<input type="file" multiple><br>
<button type="submit">上传</button>
<button type="reset">重选</button>
</form>
</li>
</ul>
</div>
<div class="body" v-if="activeIndex==2">
<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 class="body" v-if="activeIndex==4">
<ul>
<li>
<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 class="" @click="gotoinfo">
</div>
</template>
<script lang="ts" setup>
import {} from 'vue'
import {ref} from 'vue'
import { useRouter } from 'vue-router'
// import {getVideoUrlApi} from 'src/api/assats'
const activeIndex=ref(0)
const router = useRouter()
const gotoinfo = () => {
console.log(router);
router.push('/courseResourcesManagement/courseInfo')
}
function click(index:any){
console.log(index);
activeIndex.value = index
}
</script>
<style lang="scss" scoped>
.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: .1s;
cursor: pointer;
}
&>*:hover{
border-bottom: 5px solid blue !important;
}
}
.body{
width: 1620px;
height: 680px;
display: flex;
background-color: rgb(237, 237, 238);
}
li{
list-style-type: none;
}
.body ul{
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
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);
}
.body .text1{
font-size: 25px;
line-height: 30px;
}
.body .text2{
font-size: 18px;
line-height: 20px;
color: rgb(186, 43, 11);
}
<style lang="scss" scoped></style>
</style>

Write Preview
Loading…
Cancel
Save