diff --git a/src/views/courseResources/courseInfo.vue b/src/views/courseResources/courseInfo.vue
new file mode 100644
index 0000000..5513138
--- /dev/null
+++ b/src/views/courseResources/courseInfo.vue
@@ -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>
+  
\ No newline at end of file
diff --git a/src/views/courseResources/index.vue b/src/views/courseResources/index.vue
index b08e27c..ed18b47 100644
--- a/src/views/courseResources/index.vue
+++ b/src/views/courseResources/index.vue
@@ -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>