Compare commits

..

3 Commits

  1. 6216
      pnpm-lock.yaml
  2. 132
      src/views/courseResources/courseInfo.vue
  3. 385
      src/views/courseResources/index.vue

File diff suppressed because it is too large Load Diff

@ -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>

@ -1,9 +1,386 @@
<template> <template>
<div>课程资源</div> <div class="top">
</template> <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> <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> </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>

Loading…
Cancel
Save