diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 650262b..2486d21 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,11 +3,6 @@ lockfileVersion: '9.0'
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
-<<<<<<< HEAD
-=======
-=======
->>>>>>> 1a620e19de970965f426e07348b1dbc4be900eaf
->>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
 
 importers:
 
@@ -3915,11 +3910,11 @@ snapshots:
 
   '@typescript-eslint/parser@7.1.1(eslint@8.57.0)(typescript@5.2.2)':
     dependencies:
-      '@typescript-eslint/scope-manager': 7.1.1
-      '@typescript-eslint/types': 7.1.1
-      '@typescript-eslint/typescript-estree': 7.1.1(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 7.1.1
-      debug: 4.3.4
+      '@typescript-eslint/scope-manager': 7.13.1
+      '@typescript-eslint/types': 7.13.1
+      '@typescript-eslint/typescript-estree': 7.13.1(typescript@5.5.2)
+      '@typescript-eslint/visitor-keys': 7.13.1
+      debug: 4.3.5
       eslint: 8.57.0
     optionalDependencies:
       typescript: 5.2.2
@@ -3933,9 +3928,9 @@ snapshots:
 
   '@typescript-eslint/type-utils@7.1.1(eslint@8.57.0)(typescript@5.2.2)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.1.1(typescript@5.2.2)
-      '@typescript-eslint/utils': 7.1.1(eslint@8.57.0)(typescript@5.2.2)
-      debug: 4.3.4
+      '@typescript-eslint/typescript-estree': 7.13.1(typescript@5.5.2)
+      '@typescript-eslint/utils': 7.13.1(eslint@8.57.0)(typescript@5.5.2)
+      debug: 4.3.5
       eslint: 8.57.0
       ts-api-utils: 1.2.1(typescript@5.2.2)
     optionalDependencies:
@@ -3947,9 +3942,9 @@ snapshots:
 
   '@typescript-eslint/typescript-estree@7.1.1(typescript@5.2.2)':
     dependencies:
-      '@typescript-eslint/types': 7.1.1
-      '@typescript-eslint/visitor-keys': 7.1.1
-      debug: 4.3.4
+      '@typescript-eslint/types': 7.13.1
+      '@typescript-eslint/visitor-keys': 7.13.1
+      debug: 4.3.5
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -3963,20 +3958,17 @@ snapshots:
   '@typescript-eslint/utils@7.1.1(eslint@8.57.0)(typescript@5.2.2)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@types/json-schema': 7.0.15
-      '@types/semver': 7.5.8
-      '@typescript-eslint/scope-manager': 7.1.1
-      '@typescript-eslint/types': 7.1.1
-      '@typescript-eslint/typescript-estree': 7.1.1(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 7.13.1
+      '@typescript-eslint/types': 7.13.1
+      '@typescript-eslint/typescript-estree': 7.13.1(typescript@5.5.2)
       eslint: 8.57.0
-      semver: 7.6.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
   '@typescript-eslint/visitor-keys@7.1.1':
     dependencies:
-      '@typescript-eslint/types': 7.1.1
+      '@typescript-eslint/types': 7.13.1
       eslint-visitor-keys: 3.4.3
 
   '@ungap/structured-clone@1.2.0': {}
@@ -4048,10 +4040,10 @@ snapshots:
     dependencies:
       '@volar/language-core': 1.11.1
       '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.4.21
-      '@vue/shared': 3.4.21
+      '@vue/compiler-dom': 3.4.29
+      '@vue/shared': 3.4.29
       computeds: 0.0.1
-      minimatch: 9.0.3
+      minimatch: 9.0.4
       muggle-string: 0.3.1
       path-browserify: 1.0.1
       vue-template-compiler: 2.7.16
@@ -4167,7 +4159,7 @@ snapshots:
       bowser: 1.9.4
       copy-to: 2.0.1
       dateformat: 2.2.0
-      debug: 4.3.4
+      debug: 4.3.5
       destroy: 1.2.0
       end-or-error: 1.0.1
       get-ready: 1.0.0
@@ -4231,7 +4223,8 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.22.5
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
       get-intrinsic: 1.2.4
       is-string: 1.0.7
 
@@ -4253,20 +4246,21 @@ snapshots:
       define-properties: 1.2.1
       es-abstract: 1.22.5
       es-errors: 1.3.0
+      es-object-atoms: 1.0.0
       es-shim-unscopables: 1.0.2
 
   array.prototype.flat@1.3.2:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.22.5
+      es-abstract: 1.23.3
       es-shim-unscopables: 1.0.2
 
   array.prototype.flatmap@1.3.2:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.22.5
+      es-abstract: 1.23.3
       es-shim-unscopables: 1.0.2
 
   arraybuffer.prototype.slice@1.0.3:
@@ -4274,7 +4268,7 @@ snapshots:
       array-buffer-byte-length: 1.0.1
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.22.5
+      es-abstract: 1.23.3
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
       is-array-buffer: 3.0.4
@@ -4356,8 +4350,8 @@ snapshots:
 
   browserslist@4.23.0:
     dependencies:
-      caniuse-lite: 1.0.30001594
-      electron-to-chromium: 1.4.692
+      caniuse-lite: 1.0.30001636
+      electron-to-chromium: 1.4.809
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.23.0)
 
@@ -4365,7 +4359,7 @@ snapshots:
 
   bundle-require@4.0.2(esbuild@0.19.12):
     dependencies:
-      esbuild: 0.19.12
+      esbuild: 0.21.5
       load-tsconfig: 0.2.5
 
   cache-base@1.0.1:
@@ -4386,7 +4380,7 @@ snapshots:
       es-errors: 1.3.0
       function-bind: 1.1.2
       get-intrinsic: 1.2.4
-      set-function-length: 1.2.1
+      set-function-length: 1.2.2
 
   callsites@3.1.0: {}
 
@@ -4422,7 +4416,7 @@ snapshots:
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
-      braces: 3.0.2
+      braces: 3.0.3
       glob-parent: 5.1.2
       is-binary-path: 2.1.0
       is-glob: 4.0.3
@@ -4845,6 +4839,7 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
       entities: 2.2.0
+    dev: true
 
   dom-serializer@1.4.1:
     dependencies:
@@ -4884,7 +4879,7 @@ snapshots:
 
   domutils@1.5.1:
     dependencies:
-      dom-serializer: 0.2.2
+      dom-serializer: 0.1.1
       domelementtype: 1.3.1
 
   domutils@1.7.0:
@@ -4927,14 +4922,14 @@ snapshots:
       '@types/lodash-es': 4.17.12
       '@vueuse/core': 9.13.0(vue@3.4.29(typescript@5.2.2))
       async-validator: 4.2.5
-      dayjs: 1.11.10
+      dayjs: 1.11.11
       escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
       lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
-      vue: 3.4.29(typescript@5.2.2)
+      vue: 3.4.29(typescript@5.5.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -4970,41 +4965,46 @@ snapshots:
       arraybuffer.prototype.slice: 1.0.3
       available-typed-arrays: 1.0.7
       call-bind: 1.0.7
+      data-view-buffer: 1.0.1
+      data-view-byte-length: 1.0.1
+      data-view-byte-offset: 1.0.0
       es-define-property: 1.0.0
       es-errors: 1.3.0
+      es-object-atoms: 1.0.0
       es-set-tostringtag: 2.0.3
       es-to-primitive: 1.2.1
       function.prototype.name: 1.1.6
       get-intrinsic: 1.2.4
       get-symbol-description: 1.0.2
-      globalthis: 1.0.3
+      globalthis: 1.0.4
       gopd: 1.0.1
       has-property-descriptors: 1.0.2
       has-proto: 1.0.3
       has-symbols: 1.0.3
-      hasown: 2.0.1
+      hasown: 2.0.2
       internal-slot: 1.0.7
       is-array-buffer: 3.0.4
       is-callable: 1.2.7
+      is-data-view: 1.0.1
       is-negative-zero: 2.0.3
       is-regex: 1.1.4
       is-shared-array-buffer: 1.0.3
       is-string: 1.0.7
       is-typed-array: 1.1.13
       is-weakref: 1.0.2
-      object-inspect: 1.13.1
+      object-inspect: 1.13.2
       object-keys: 1.1.1
       object.assign: 4.1.5
       regexp.prototype.flags: 1.5.2
-      safe-array-concat: 1.1.0
+      safe-array-concat: 1.1.2
       safe-regex-test: 1.0.3
-      string.prototype.trim: 1.2.8
-      string.prototype.trimend: 1.0.7
-      string.prototype.trimstart: 1.0.7
+      string.prototype.trim: 1.2.9
+      string.prototype.trimend: 1.0.8
+      string.prototype.trimstart: 1.0.8
       typed-array-buffer: 1.0.2
       typed-array-byte-length: 1.0.1
       typed-array-byte-offset: 1.0.2
-      typed-array-length: 1.0.5
+      typed-array-length: 1.0.6
       unbox-primitive: 1.0.2
       which-typed-array: 1.1.14
 
@@ -5073,7 +5073,7 @@ snapshots:
   eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
-      is-core-module: 2.13.1
+      is-core-module: 2.14.0
       resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
@@ -5109,9 +5109,9 @@ snapshots:
       is-core-module: 2.13.1
       is-glob: 4.0.3
       minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.2
-      object.values: 1.1.7
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.0
       semver: 6.3.1
       tsconfig-paths: 3.15.0
     optionalDependencies:
@@ -5144,11 +5144,12 @@ snapshots:
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       eslint: 8.57.0
+      globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
-      postcss-selector-parser: 6.0.15
-      semver: 7.6.0
-      vue-eslint-parser: 9.4.2(eslint@8.57.0)
+      postcss-selector-parser: 6.1.0
+      semver: 7.6.2
+      vue-eslint-parser: 9.4.3(eslint@8.57.0)
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -5176,7 +5177,7 @@ snapshots:
   eslint@8.57.0:
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@eslint-community/regexpp': 4.10.0
+      '@eslint-community/regexpp': 4.10.1
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.57.0
       '@humanwhocodes/config-array': 0.11.14
@@ -5186,7 +5187,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4
+      debug: 4.3.5
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -5210,7 +5211,7 @@ snapshots:
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
-      optionator: 0.9.3
+      optionator: 0.9.4
       strip-ansi: 6.0.1
       text-table: 0.2.0
     transitivePeerDependencies:
@@ -5218,8 +5219,8 @@ snapshots:
 
   espree@9.6.1:
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
+      acorn: 8.12.0
+      acorn-jsx: 5.3.2(acorn@8.12.0)
       eslint-visitor-keys: 3.4.3
 
   esquery@1.5.0:
@@ -5395,7 +5396,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.22.5
+      es-abstract: 1.23.3
       functions-have-names: 1.2.3
 
   functions-have-names@1.2.3: {}
@@ -5408,7 +5409,7 @@ snapshots:
       function-bind: 1.1.2
       has-proto: 1.0.3
       has-symbols: 1.0.3
-      hasown: 2.0.1
+      hasown: 2.0.2
 
   get-ready@1.0.0: {}
 
@@ -5586,7 +5587,7 @@ snapshots:
   internal-slot@1.0.7:
     dependencies:
       es-errors: 1.3.0
-      hasown: 2.0.1
+      hasown: 2.0.2
       side-channel: 1.0.6
 
   internmap@2.0.3: {}
@@ -5894,7 +5895,7 @@ snapshots:
 
   micromatch@4.0.5:
     dependencies:
-      braces: 3.0.2
+      braces: 3.0.3
       picomatch: 2.3.1
 
   mime-db@1.52.0: {}
@@ -6034,7 +6035,6 @@ snapshots:
 
   object.groupby@1.0.2:
     dependencies:
-      array.prototype.filter: 1.0.3
       call-bind: 1.0.7
       define-properties: 1.2.1
       es-abstract: 1.22.5
@@ -6060,7 +6060,6 @@ snapshots:
 
   optionator@0.9.3:
     dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
       deep-is: 0.1.4
       fast-levenshtein: 2.0.6
       levn: 0.4.1
@@ -6092,7 +6091,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.23.5
+      '@babel/code-frame': 7.24.7
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -6201,7 +6200,7 @@ snapshots:
   postcss@8.4.38:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       source-map-js: 1.2.0
 
   posthtml-parser@0.2.1:
@@ -6342,7 +6341,7 @@ snapshots:
 
   resolve@1.22.8:
     dependencies:
-      is-core-module: 2.13.1
+      is-core-module: 2.14.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -6358,19 +6357,22 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.5
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.12.0
-      '@rollup/rollup-android-arm64': 4.12.0
-      '@rollup/rollup-darwin-arm64': 4.12.0
-      '@rollup/rollup-darwin-x64': 4.12.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.12.0
-      '@rollup/rollup-linux-arm64-gnu': 4.12.0
-      '@rollup/rollup-linux-arm64-musl': 4.12.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.12.0
-      '@rollup/rollup-linux-x64-gnu': 4.12.0
-      '@rollup/rollup-linux-x64-musl': 4.12.0
-      '@rollup/rollup-win32-arm64-msvc': 4.12.0
-      '@rollup/rollup-win32-ia32-msvc': 4.12.0
-      '@rollup/rollup-win32-x64-msvc': 4.12.0
+      '@rollup/rollup-android-arm-eabi': 4.18.0
+      '@rollup/rollup-android-arm64': 4.18.0
+      '@rollup/rollup-darwin-arm64': 4.18.0
+      '@rollup/rollup-darwin-x64': 4.18.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.18.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.18.0
+      '@rollup/rollup-linux-arm64-gnu': 4.18.0
+      '@rollup/rollup-linux-arm64-musl': 4.18.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.18.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.18.0
+      '@rollup/rollup-linux-s390x-gnu': 4.18.0
+      '@rollup/rollup-linux-x64-gnu': 4.18.0
+      '@rollup/rollup-linux-x64-musl': 4.18.0
+      '@rollup/rollup-win32-arm64-msvc': 4.18.0
+      '@rollup/rollup-win32-ia32-msvc': 4.18.0
+      '@rollup/rollup-win32-x64-msvc': 4.18.0
       fsevents: 2.3.3
 
   run-parallel@1.2.0:
@@ -6462,7 +6464,7 @@ snapshots:
       call-bind: 1.0.7
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
-      object-inspect: 1.13.1
+      object-inspect: 1.13.2
 
   signal-exit@4.1.0: {}
 
@@ -6654,10 +6656,10 @@ snapshots:
 
   stylelint-scss@6.2.0(stylelint@16.2.1(typescript@5.2.2)):
     dependencies:
-      known-css-properties: 0.29.0
+      known-css-properties: 0.31.0
       postcss-media-query-parser: 0.2.3
       postcss-resolve-nested-selector: 0.1.1
-      postcss-selector-parser: 6.0.15
+      postcss-selector-parser: 6.1.0
       postcss-value-parser: 4.2.0
       stylelint: 16.2.1(typescript@5.2.2)
 
@@ -6669,13 +6671,13 @@ snapshots:
       '@csstools/selector-specificity': 3.0.2(postcss-selector-parser@6.0.15)
       balanced-match: 2.0.0
       colord: 2.9.3
-      cosmiconfig: 9.0.0(typescript@5.2.2)
-      css-functions-list: 3.2.1
+      cosmiconfig: 9.0.0(typescript@5.5.2)
+      css-functions-list: 3.2.2
       css-tree: 2.3.1
-      debug: 4.3.4
+      debug: 4.3.5
       fast-glob: 3.3.2
       fastest-levenshtein: 1.0.16
-      file-entry-cache: 8.0.0
+      file-entry-cache: 9.0.0
       global-modules: 2.0.0
       globby: 11.1.0
       globjoin: 0.1.4
@@ -6683,23 +6685,23 @@ snapshots:
       ignore: 5.3.1
       imurmurhash: 0.1.4
       is-plain-object: 5.0.0
-      known-css-properties: 0.29.0
+      known-css-properties: 0.31.0
       mathml-tag-names: 2.1.3
       meow: 13.2.0
-      micromatch: 4.0.5
+      micromatch: 4.0.7
       normalize-path: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.35
+      picocolors: 1.0.1
+      postcss: 8.4.38
       postcss-resolve-nested-selector: 0.1.1
-      postcss-safe-parser: 7.0.0(postcss@8.4.35)
-      postcss-selector-parser: 6.0.15
+      postcss-safe-parser: 7.0.0(postcss@8.4.38)
+      postcss-selector-parser: 6.1.0
       postcss-value-parser: 4.2.0
       resolve-from: 5.0.0
       string-width: 4.2.3
       strip-ansi: 7.1.0
       supports-hyperlinks: 3.0.0
       svg-tags: 1.0.0
-      table: 6.8.1
+      table: 6.8.2
       write-file-atomic: 5.0.1
     transitivePeerDependencies:
       - supports-color
@@ -6736,11 +6738,11 @@ snapshots:
       merge-options: 1.0.1
       micromatch: 3.1.0
       postcss: 5.2.18
-      postcss-prefix-selector: 1.16.0(postcss@5.2.18)
+      postcss-prefix-selector: 1.16.1(postcss@5.2.18)
       posthtml-rename-id: 1.0.12
       posthtml-svg-mode: 1.0.3
       query-string: 4.3.4
-      traverse: 0.6.8
+      traverse: 0.6.9
     transitivePeerDependencies:
       - supports-color
 
@@ -6753,7 +6755,7 @@ snapshots:
       css-select: 4.3.0
       css-tree: 1.1.3
       csso: 4.2.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       stable: 0.1.8
 
   synckit@0.8.8:
@@ -6763,7 +6765,7 @@ snapshots:
 
   table@6.8.1:
     dependencies:
-      ajv: 8.12.0
+      ajv: 8.16.0
       lodash.truncate: 4.4.2
       slice-ansi: 4.0.0
       string-width: 4.2.3
@@ -6921,7 +6923,7 @@ snapshots:
 
   update-browserslist-db@1.0.13(browserslist@4.23.0):
     dependencies:
-      browserslist: 4.23.0
+      browserslist: 4.23.1
       escalade: 3.1.2
       picocolors: 1.0.0
 
@@ -6968,25 +6970,24 @@ snapshots:
 
   vite-plugin-mock@3.0.1(esbuild@0.19.12)(mockjs@1.1.0)(vite@5.1.4(@types/node@20.11.24)(sass@1.71.1)):
     dependencies:
-      '@types/mockjs': 1.0.10
-      bundle-require: 4.0.2(esbuild@0.19.12)
+      bundle-require: 4.2.1(esbuild@0.21.5)
       chokidar: 3.6.0
       connect: 3.7.0
-      debug: 4.3.4
+      debug: 4.3.5
+      esbuild: 0.21.5
       fast-glob: 3.3.2
       mockjs: 1.1.0
       path-to-regexp: 6.2.1
       picocolors: 1.0.0
       vite: 5.1.4(@types/node@20.11.24)(sass@1.71.1)
     transitivePeerDependencies:
-      - esbuild
       - supports-color
 
   vite-plugin-svg-icons@2.0.1(vite@5.1.4(@types/node@20.11.24)(sass@1.71.1)):
     dependencies:
       '@types/svgo': 2.6.4
       cors: 2.8.5
-      debug: 4.3.4
+      debug: 4.3.5
       etag: 1.8.1
       fs-extra: 10.1.0
       pathe: 0.2.0
@@ -7025,14 +7026,14 @@ snapshots:
 
   vue-eslint-parser@9.4.2(eslint@8.57.0):
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.5
       eslint: 8.57.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
       esquery: 1.5.0
       lodash: 4.17.21
-      semver: 7.6.0
+      semver: 7.6.2
     transitivePeerDependencies:
       - supports-color
 
diff --git a/src/views/MyCourseStudy/ContainerCla.vue b/src/views/MyCourseStudy/ContainerCla.vue
index a150f78..e2ecc24 100644
--- a/src/views/MyCourseStudy/ContainerCla.vue
+++ b/src/views/MyCourseStudy/ContainerCla.vue
@@ -194,18 +194,19 @@ const handleCurrentChange = (page: any) => {
 
 .ClassGd {
   position: absolute;
+  right: 0;
   background-color: rgb(217, 217, 217, 0.5);
   display: none;
-  margin-left: 85%;
   padding: 3px 5px;
   cursor: pointer;
-  border-radius: 20%;
+  border-radius: 6px;
   & > p {
     margin-top: 3px;
     margin-bottom: 3px;
     font-size: 10px;
     font-weight: 350;
     color: black;
+    white-space:nowrap;
     &:hover {
       color: #2952f6;
       font-weight: 35s0;
diff --git a/src/views/MyCourseStudy/courseCollections.vue b/src/views/MyCourseStudy/courseCollections.vue
index 3bc70f3..29c41da 100644
--- a/src/views/MyCourseStudy/courseCollections.vue
+++ b/src/views/MyCourseStudy/courseCollections.vue
@@ -42,42 +42,42 @@
           </ul>
         </div>
         <!-- 切换栏对应的小页面 -->
-        <!-- 小页面-1 -->
+        <!-- 简介页面-1 -->
         <div class="Res_con" v-show="activeIndex == 1">
-          <div class="item_2-1" v-for="(item, index) in 5" :key="index">
+          <div class="item_2-1" v-for="(item, index) in datalist" :key="item.id">
             <div class="ResImg-1">
               <img src="../../assets/images/kctp.png" />
             </div>
-            <div class="ResClaDic">
-              <p>课程名称-----{{ item }}</p>
-              <P>课程描述-----{{ item }}</P>
+            <div class="ResClaDic-1">
+              <p>{{index + 1}}.&nbsp;{{ item.name }}</p>
+              <p style="color: rgb(180,180 ,180 );">&nbsp;{{ item.description }}</p>
             </div>
           </div>
         </div>
-        <!-- 小页面-2 -->
+        <!-- PPT页面-2 -->
         <div class="Res_con" v-show="activeIndex == 2">
-          <div class="item_2-2" v-for="(item, index) in 7" :key="index">
+          <div class="item_2-2" v-for="(item, index) in datalist" :key="item.id">
             <div class="ResImg-2">
               <div class="Img">
-                <img src="../../assets/icons/ppt.png" />
+                <img :src="item.img" />
               </div>
             </div>
             <div class="ResClaDic">
-              <p>PPT名称-----{{ item }}</p>
+              <p>{{ index + 1 }}.&nbsp;{{ item.name }}</p>
             </div>
           </div>
         </div>
-        <!-- 小页面-3 -->
+        <!-- 视频页面-3 -->
         <div class="Res_con" v-show="activeIndex == 3">
-          <div class="item_2-3" v-for="(item, index) in 8" :key="index">
+          <div class="item_2-3" v-for="(item, index) in datalist" :key="index">
             <div class="ResImg-2">
               <div class="Img">
                 <img src="../../assets/icons/视频.png" />
               </div>
             </div>
             <div class="ResClaDic">
-              <p>{{ item }}</p>
-              <el-button plain @click="centerDialogVisible = true">
+              <p>{{ index + 1 }}.&nbsp;{{ item.name }}</p>
+              <el-button plain @click="hand1(item)">
                 点击播放
               </el-button>
             </div>
@@ -85,20 +85,20 @@
         </div>
         <el-dialog
           v-model="centerDialogVisible"
-          title="视频播放中"
+          :title="`${data.name}`"
           width="1000"
+          style="height:600px;"
           align-center
+          class="adad"
         >
-          <span>点击开了一个弹框</span>
+          <!-- <span>点击开了一个弹框</span> -->
           <template #footer>
             <div class="dialog-footer">
-              <video
-                src="https://www.bilibili.com/video/BV1HV4y1a7n4?p=50&vd_source=9e99d3200788d6043e077de463ef019b"
-              ></video>
+              <video width="300" height="200" :src="data.img"></video>
             </div>
           </template>
         </el-dialog>
-        <!-- 小页面-4 -->
+        <!-- 文本页面-4 -->
         <div class="Res_con" v-show="activeIndex == 4">
           <div class="item_2-4" v-for="(item, index) in 8" :key="index">
             <div class="ResImg-2">
@@ -112,7 +112,7 @@
           </div>
         </div>
 
-        <!-- 小页面-5 -->
+        <!-- 音频页面-5 -->
         <div class="Res_con" v-show="activeIndex == 5">
           <div class="item_2-5" v-for="(item, index) in 10" :key="index">
             <div class="ResImg-2">
@@ -122,9 +122,6 @@
             </div>
             <div class="ResClaDic">
               <p>音频名称-----{{ item }}</p>
-              <el-button plain @click="centerDialogVisible = true">
-                点击播放
-              </el-button>
             </div>
           </div>
         </div>
@@ -149,26 +146,23 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref, watch,reactive } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import ContainerCla from './ContainerCla.vue'
 import ContainerKno from './ContainerKno.vue'
-// import { getAssApi } from '@/api/courseChaptersApi'
 import { SeResourceFavourControllerService } from '../../../generated/services/SeResourceFavourControllerService'
 const centerDialogVisible = ref(false)
 
+const data = ref<any>({})
+function hand1(item:any){
+  centerDialogVisible.value = true
+  data.value= item
+  console.log(data.value);
+}
 const activeIndex = ref(1)
 function hsndelShow(index: number) {
   activeIndex.value = index
 }
-// //=========================
-// function handleApi(params) {
-//   getAssApi(params).then(res => {
-//     arr.value = res.data.records
-//     total.value = res.data.total
-//     console.log(arr.value, '-', total.value)
-//   })
-// }
 const arr = ref([])
 const total = ref(0)
 // 分页器
@@ -193,19 +187,8 @@ watch(activeIndex, () => {
   initFenYie()
   getDatalist()
 })
-// function hand() {
-//   console.log(res)
-//   // handleApi(params)
-// }
 
-const params = {
-  current: currentPage1.value,
-  type: activeIndex.value,
-  pageSize: pageSize1.value,
-  sortField: '',
-  sortOrder: '',
-  userId: '3',
-}
+
 
 const datalist = ref([
   {
@@ -221,6 +204,14 @@ const datalist = ref([
 ])
 
 const getDatalist = async () => {
+  const params = {
+  current: currentPage1.value,
+  type: activeIndex.value,
+  pageSize: pageSize1.value,
+  sortField: '',
+  sortOrder: '',
+  userId: '3',
+}
   const res =
     await SeResourceFavourControllerService.listPostByPageUsingPost3(params)
   datalist.value = res.data.records
@@ -228,17 +219,6 @@ const getDatalist = async () => {
   console.log(datalist.value[0])
 }
 getDatalist()
-// hand()
-// const obj = {
-//   type: activeIndex.value,
-//   page: currentPage1.value,
-//   pageSize: pageSize1.value,
-//   sortField:'',
-//   sortOrder:'',
-//   resourceIdList: ''
-// }
-// handleApi(obj)
-//=========================
 
 const activeName = ref('first')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
@@ -354,20 +334,20 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 // 简介页面中图片盒子
 .ResImg-1 {
   width: 100%;
-  height: 60%;
+  height: 215px;
   border-bottom: 1px solid rgb(229, 227, 227);
   overflow: hidden;
 
-  img {
+  &>img {
     width: 100%;
     height: 100%;
   }
 }
 
 // 简介页面课程描述
-.ResClaDic {
+.ResClaDic-1 {
   width: 100%;
-  height: 40%;
+  height: 85px;
   padding: 2%;
   display: flex;
   flex-direction: column;
@@ -376,19 +356,25 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 
 .ResImg-2 {
   width: 100%;
-  height: 60%;
+  height: 225px;
   border-bottom: 1px solid rgb(214, 214, 214);
 }
 
 .Img {
   width: 100%;
   height: 100%;
-  display: flex;
+    display: flex;
   justify-content: center;
   align-items: center;
+  padding: 5%;
+  &>img{
+    height: 95%;
+    width: 65%;
+
+  }
 }
 
-.ResClaDic > p {
+.ResClaDic-1 > p {
   font-family: Inter, Inter;
   font-weight: 500;
   font-size: 20px;
@@ -401,7 +387,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 .item_2-2,
 .item_2-5 {
   width: 100%;
-  height: 300px;
+  height: 310px;
   margin-top: 20px;
   border-left: 1px solid #e4e4e4;
   border-top: 1px solid #e4e4e4;
@@ -410,10 +396,27 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   border-radius: 6px;
   margin-bottom: 32px;
 }
+.ResClaDic {
+  width: 100%;
+  height: 85px;
+  padding: 2%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.ResClaDic > p {
+  font-family: Inter, Inter;
+  font-weight: 500;
+  font-size: 20px;
+  color: #333333;
+  line-height: 23px;
+  text-align: left;
+  margin-left: 5px;
+}
 .item_2-3,
 .item_2-4 {
   width: 100%;
-  height: 300px;
+  height: 310px;
   margin-top: 20px;
   border-left: 1px solid #e4e4e4;
   border-top: 1px solid #e4e4e4;