diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d55c999..a614bd4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,11 @@
 lockfileVersion: '6.0'
+<<<<<<< HEAD
+=======
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
 
 dependencies:
   3d-force-graph:
@@ -141,6 +148,7 @@ devDependencies:
 
 packages:
 
+<<<<<<< HEAD
   /3d-force-graph@1.73.3:
     resolution: {integrity: sha512-azb65Lwn2yr/fJ4+qrxjmstVxogjzwJIZL/fdboCKBg6ph/FLW+xdvYFEBZW92XxBn1C8yRKS3d2VkVT3BzLSw==}
     engines: {node: '>=12'}
@@ -152,6 +160,8 @@ packages:
       three-render-objects: 1.29.4(three@0.163.0)
     dev: false
 
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /@aashutoshrathi/word-wrap@1.2.6:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
     engines: {node: '>=0.10.0'}
@@ -331,6 +341,7 @@ packages:
     dependencies:
       '@babel/types': 7.24.0
 
+<<<<<<< HEAD
   /@babel/runtime@7.24.6:
     resolution: {integrity: sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==}
     engines: {node: '>=6.9.0'}
@@ -338,6 +349,8 @@ packages:
       regenerator-runtime: 0.14.1
     dev: false
 
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /@babel/template@7.24.0:
     resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
     engines: {node: '>=6.9.0'}
@@ -880,6 +893,7 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
+<<<<<<< HEAD
   /@tweenjs/tween.js@23.1.2:
     resolution: {integrity: sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==}
     dev: false
@@ -896,6 +910,20 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+=======
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+    dev: true
+
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
+
+  /@types/json5@0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: true
+
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /@types/lodash-es@4.17.12:
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
     dependencies:
@@ -1259,11 +1287,14 @@ packages:
       - vue
     dev: false
 
+<<<<<<< HEAD
   /accessor-fn@1.5.0:
     resolution: {integrity: sha512-dml7D96DY/K5lt4Ra2jMnpL9Bhw5HEGws4p1OAIxFFj9Utd/RxNfEO3T3f0QIWFNwQU7gNxH9snUfqF/zNkP/w==}
     engines: {node: '>=12'}
     dev: false
 
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1836,6 +1867,7 @@ packages:
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+<<<<<<< HEAD
   /d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
@@ -1942,6 +1974,16 @@ packages:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
 
+=======
+  /dayjs@1.11.10:
+    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+    dev: false
+
+  /de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+    dev: true
+
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -2124,6 +2166,7 @@ packages:
       domelementtype: 2.3.0
       domhandler: 5.0.3
     dev: true
+<<<<<<< HEAD
 
   /echarts-liquidfill@3.1.0(echarts@5.5.0):
     resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
@@ -2132,6 +2175,8 @@ packages:
     dependencies:
       echarts: 5.5.0
     dev: false
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
 
   /echarts@5.5.0:
     resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
@@ -3125,11 +3170,14 @@ packages:
     engines: {node: '>=0.8.19'}
     dev: true
 
+<<<<<<< HEAD
   /index-array-by@1.4.1:
     resolution: {integrity: sha512-Zu6THdrxQdyTuT2uA5FjUoBEsFHPzHcPIj18FszN6yXKHxSfGcR4TPLabfuT//E25q1Igyx9xta2WMvD/x9P/g==}
     engines: {node: '>=12'}
     dev: false
 
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -3154,11 +3202,14 @@ packages:
       side-channel: 1.0.6
     dev: true
 
+<<<<<<< HEAD
   /internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
     dev: false
 
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /is-accessor-descriptor@1.0.1:
     resolution: {integrity: sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==}
     engines: {node: '>= 0.10'}
@@ -3390,6 +3441,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+<<<<<<< HEAD
   /jquery@3.7.1:
     resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
     dev: false
@@ -3406,6 +3458,20 @@ packages:
     resolution: {integrity: sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==}
     dev: true
 
+=======
+  /js-base64@2.6.4:
+    resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
+    dev: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: true
+
+  /js-tokens@8.0.3:
+    resolution: {integrity: sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==}
+    dev: true
+
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -3460,6 +3526,7 @@ packages:
       graceful-fs: 4.2.11
     dev: true
 
+<<<<<<< HEAD
   /kapsule@1.14.5:
     resolution: {integrity: sha512-H0iSpTynUzZw3tgraDmReprpFRmH5oP5GPmaNsurSwLx2H5iCpOMIkp5q+sfhB4Tz/UJd1E1IbEE9Z6ksnJ6RA==}
     engines: {node: '>=12'}
@@ -3467,6 +3534,8 @@ packages:
       lodash-es: 4.17.21
     dev: false
 
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
@@ -3742,6 +3811,7 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
+<<<<<<< HEAD
   /ngraph.events@1.2.2:
     resolution: {integrity: sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ==}
     dev: false
@@ -3785,6 +3855,25 @@ packages:
     resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
     dev: false
 
+=======
+  /node-releases@2.0.14:
+    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+    dev: true
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+    dev: false
+
+  /nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
     dependencies:
@@ -3994,6 +4083,7 @@ packages:
       vue-demi: 0.14.7(vue@3.4.19)
     dev: false
 
+<<<<<<< HEAD
   /polished@4.3.1:
     resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
     engines: {node: '>=10'}
@@ -4011,6 +4101,18 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+=======
+  /posix-character-classes@0.1.1:
+    resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /possible-typed-array-names@1.0.0:
+    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /postcss-html@1.6.0:
     resolution: {integrity: sha512-OWgQ9/Pe23MnNJC0PL4uZp8k0EDaUvqpJFSiwFxOLClAhmD7UEisyhO3x5hVsD4xFrjReVTXydlrMes45dJ71w==}
     engines: {node: ^12 || >=14}
@@ -4192,10 +4294,13 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+<<<<<<< HEAD
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
     dev: false
 
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /regex-not@1.0.2:
     resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
     engines: {node: '>=0.10.0'}
@@ -4903,6 +5008,7 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+<<<<<<< HEAD
   /three-forcegraph@1.41.14(three@0.163.0):
     resolution: {integrity: sha512-W/cZElLXO0l6ffdMmDakh4bUGSYuSv/YxInOHMN9KAQgDwJ8904SOBh8qkTnGu7UPsi0mAsrUgkfViW8heloTA==}
     engines: {node: '>=12'}
@@ -4947,6 +5053,12 @@ packages:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
 
+=======
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
   /to-object-path@0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
     engines: {node: '>=0.10.0'}
@@ -5411,7 +5523,10 @@ packages:
     dependencies:
       tslib: 2.3.0
     dev: false
+<<<<<<< HEAD
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
+=======
+>>>>>>> 2117f8fd275272266b12862456fec6c8720caeb1
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>