diff --git a/package.json b/package.json
index 4cc1380..e3a76b2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@vueuse/core": "^10.9.0",
     "ali-oss": "^6.20.0",
     "axios": "^1.6.8",
+    "d3": "^5.16.0",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
     "jwt-decode": "^4.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f9fd47..e9e8810 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   3d-force-graph:
     specifier: ^1.73.3
@@ -20,6 +16,9 @@ dependencies:
   axios:
     specifier: ^1.6.8
     version: 1.6.8
+  d3:
+    specifier: ^5.16.0
+    version: 5.16.0
   echarts:
     specifier: ^5.5.0
     version: 5.5.0
@@ -207,7 +206,7 @@ packages:
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.0)
       '@babel/helpers': 7.24.0
-      '@babel/parser': 7.24.0
+      '@babel/parser': 7.24.7
       '@babel/template': 7.24.0
       '@babel/traverse': 7.24.0
       '@babel/types': 7.24.0
@@ -370,7 +369,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.23.5
-      '@babel/parser': 7.24.0
+      '@babel/parser': 7.24.7
       '@babel/types': 7.24.0
     dev: true
 
@@ -384,7 +383,7 @@ packages:
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.24.0
+      '@babel/parser': 7.24.7
       '@babel/types': 7.24.0
       debug: 4.3.4
       globals: 11.12.0
@@ -1797,6 +1796,10 @@ packages:
       delayed-stream: 1.0.0
     dev: false
 
+  /commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: false
+
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -1933,6 +1936,10 @@ packages:
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  /d3-array@1.2.4:
+    resolution: {integrity: sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==}
+    dev: false
+
   /d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
@@ -1940,20 +1947,85 @@ packages:
       internmap: 2.0.3
     dev: false
 
+  /d3-axis@1.0.12:
+    resolution: {integrity: sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==}
+    dev: false
+
   /d3-binarytree@1.0.2:
     resolution: {integrity: sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw==}
     dev: false
 
+  /d3-brush@1.1.6:
+    resolution: {integrity: sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==}
+    dependencies:
+      d3-dispatch: 1.0.6
+      d3-drag: 1.2.5
+      d3-interpolate: 1.4.0
+      d3-selection: 1.4.2
+      d3-transition: 1.3.2
+    dev: false
+
+  /d3-chord@1.0.6:
+    resolution: {integrity: sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==}
+    dependencies:
+      d3-array: 1.2.4
+      d3-path: 1.0.9
+    dev: false
+
+  /d3-collection@1.0.7:
+    resolution: {integrity: sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==}
+    dev: false
+
+  /d3-color@1.4.1:
+    resolution: {integrity: sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==}
+    dev: false
+
   /d3-color@3.1.0:
     resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
     engines: {node: '>=12'}
     dev: false
 
+  /d3-contour@1.3.2:
+    resolution: {integrity: sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==}
+    dependencies:
+      d3-array: 1.2.4
+    dev: false
+
+  /d3-dispatch@1.0.6:
+    resolution: {integrity: sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==}
+    dev: false
+
   /d3-dispatch@3.0.1:
     resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
     engines: {node: '>=12'}
     dev: false
 
+  /d3-drag@1.2.5:
+    resolution: {integrity: sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==}
+    dependencies:
+      d3-dispatch: 1.0.6
+      d3-selection: 1.4.2
+    dev: false
+
+  /d3-dsv@1.2.0:
+    resolution: {integrity: sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+      iconv-lite: 0.4.24
+      rw: 1.3.3
+    dev: false
+
+  /d3-ease@1.0.7:
+    resolution: {integrity: sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==}
+    dev: false
+
+  /d3-fetch@1.2.0:
+    resolution: {integrity: sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==}
+    dependencies:
+      d3-dsv: 1.2.0
+    dev: false
+
   /d3-force-3d@3.0.5:
     resolution: {integrity: sha512-tdwhAhoTYZY/a6eo9nR7HP3xSW/C6XvJTbeRpR92nlPzH6OiE+4MliN9feuSFd0tPtEUo+191qOhCTWx3NYifg==}
     engines: {node: '>=12'}
@@ -1965,11 +2037,40 @@ packages:
       d3-timer: 3.0.1
     dev: false
 
+  /d3-force@1.2.1:
+    resolution: {integrity: sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==}
+    dependencies:
+      d3-collection: 1.0.7
+      d3-dispatch: 1.0.6
+      d3-quadtree: 1.0.7
+      d3-timer: 1.0.10
+    dev: false
+
+  /d3-format@1.4.5:
+    resolution: {integrity: sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==}
+    dev: false
+
   /d3-format@3.1.0:
     resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
     engines: {node: '>=12'}
     dev: false
 
+  /d3-geo@1.12.1:
+    resolution: {integrity: sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==}
+    dependencies:
+      d3-array: 1.2.4
+    dev: false
+
+  /d3-hierarchy@1.1.9:
+    resolution: {integrity: sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==}
+    dev: false
+
+  /d3-interpolate@1.4.0:
+    resolution: {integrity: sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==}
+    dependencies:
+      d3-color: 1.4.1
+    dev: false
+
   /d3-interpolate@3.0.1:
     resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
     engines: {node: '>=12'}
@@ -1981,11 +2082,34 @@ packages:
     resolution: {integrity: sha512-Qxg4oirJrNXauiuC94uKMbgxwnhdda9xRLl9ihq45srlJ4Ga3CSgqGcAL8iW7N5CIv4Oz8x3E734ulxyvHPvwA==}
     dev: false
 
+  /d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+    dev: false
+
+  /d3-polygon@1.0.6:
+    resolution: {integrity: sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==}
+    dev: false
+
+  /d3-quadtree@1.0.7:
+    resolution: {integrity: sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==}
+    dev: false
+
   /d3-quadtree@3.0.1:
     resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
     engines: {node: '>=12'}
     dev: false
 
+  /d3-random@1.1.2:
+    resolution: {integrity: sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==}
+    dev: false
+
+  /d3-scale-chromatic@1.5.0:
+    resolution: {integrity: sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==}
+    dependencies:
+      d3-color: 1.4.1
+      d3-interpolate: 1.4.0
+    dev: false
+
   /d3-scale-chromatic@3.1.0:
     resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
     engines: {node: '>=12'}
@@ -1994,6 +2118,17 @@ packages:
       d3-interpolate: 3.0.1
     dev: false
 
+  /d3-scale@2.2.2:
+    resolution: {integrity: sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==}
+    dependencies:
+      d3-array: 1.2.4
+      d3-collection: 1.0.7
+      d3-format: 1.4.5
+      d3-interpolate: 1.4.0
+      d3-time: 1.1.0
+      d3-time-format: 2.3.0
+    dev: false
+
   /d3-scale@4.0.2:
     resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
     engines: {node: '>=12'}
@@ -2005,6 +2140,22 @@ packages:
       d3-time-format: 4.1.0
     dev: false
 
+  /d3-selection@1.4.2:
+    resolution: {integrity: sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==}
+    dev: false
+
+  /d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+    dependencies:
+      d3-path: 1.0.9
+    dev: false
+
+  /d3-time-format@2.3.0:
+    resolution: {integrity: sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==}
+    dependencies:
+      d3-time: 1.1.0
+    dev: false
+
   /d3-time-format@4.1.0:
     resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
     engines: {node: '>=12'}
@@ -2012,6 +2163,10 @@ packages:
       d3-time: 3.1.0
     dev: false
 
+  /d3-time@1.1.0:
+    resolution: {integrity: sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==}
+    dev: false
+
   /d3-time@3.1.0:
     resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
     engines: {node: '>=12'}
@@ -2019,11 +2174,76 @@ packages:
       d3-array: 3.2.4
     dev: false
 
+  /d3-timer@1.0.10:
+    resolution: {integrity: sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==}
+    dev: false
+
   /d3-timer@3.0.1:
     resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
     engines: {node: '>=12'}
     dev: false
 
+  /d3-transition@1.3.2:
+    resolution: {integrity: sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==}
+    dependencies:
+      d3-color: 1.4.1
+      d3-dispatch: 1.0.6
+      d3-ease: 1.0.7
+      d3-interpolate: 1.4.0
+      d3-selection: 1.4.2
+      d3-timer: 1.0.10
+    dev: false
+
+  /d3-voronoi@1.1.4:
+    resolution: {integrity: sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==}
+    dev: false
+
+  /d3-zoom@1.8.3:
+    resolution: {integrity: sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==}
+    dependencies:
+      d3-dispatch: 1.0.6
+      d3-drag: 1.2.5
+      d3-interpolate: 1.4.0
+      d3-selection: 1.4.2
+      d3-transition: 1.3.2
+    dev: false
+
+  /d3@5.16.0:
+    resolution: {integrity: sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==}
+    dependencies:
+      d3-array: 1.2.4
+      d3-axis: 1.0.12
+      d3-brush: 1.1.6
+      d3-chord: 1.0.6
+      d3-collection: 1.0.7
+      d3-color: 1.4.1
+      d3-contour: 1.3.2
+      d3-dispatch: 1.0.6
+      d3-drag: 1.2.5
+      d3-dsv: 1.2.0
+      d3-ease: 1.0.7
+      d3-fetch: 1.2.0
+      d3-force: 1.2.1
+      d3-format: 1.4.5
+      d3-geo: 1.12.1
+      d3-hierarchy: 1.1.9
+      d3-interpolate: 1.4.0
+      d3-path: 1.0.9
+      d3-polygon: 1.0.6
+      d3-quadtree: 1.0.7
+      d3-random: 1.1.2
+      d3-scale: 2.2.2
+      d3-scale-chromatic: 1.5.0
+      d3-selection: 1.4.2
+      d3-shape: 1.3.7
+      d3-time: 1.1.0
+      d3-time-format: 2.3.0
+      d3-timer: 1.0.10
+      d3-transition: 1.3.2
+      d3-voronoi: 1.1.4
+      d3-zoom: 1.8.3
+    dev: false
+
   /data-joint@1.3.1:
     resolution: {integrity: sha512-tMK0m4OVGqiA3zkn8JmO6YAqD8UwJqIAx4AAwFl1SKTtKAqcXePuT+n2aayiX9uITtlN3DFtKKTOxJRUc2+HvQ==}
     engines: {node: '>=12'}
@@ -4576,6 +4796,10 @@ packages:
       queue-microtask: 1.2.3
     dev: true
 
+  /rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+    dev: false
+
   /safe-array-concat@1.1.0:
     resolution: {integrity: sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==}
     engines: {node: '>=0.4'}
@@ -5813,3 +6037,7 @@ packages:
     dependencies:
       tslib: 2.3.0
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/src/api/user/crouse.js b/src/api/user/crouse.js
index 581e336..c5e4e0b 100644
--- a/src/api/user/crouse.js
+++ b/src/api/user/crouse.js
@@ -31,3 +31,22 @@ export const getCourseObjectApi = (id) => {
 export const getTeacherListApi = () => {
   return request.get('/user/get_teacherinf_list')
 }
+
+export const fnNameGet = (params) => {
+  return request({
+    url: 'xxxxx',
+    method: 'get',
+    params,
+  })
+}
+export const getPageCourses = (data) => {
+  console.log(data.page)
+  console.log(data.pageSize)
+  // return request.get(`/courses/index`,data)
+  return request.get(
+    `/coursesteacher/index?page=${data.page}&pageSize=${data.pageSize}`,
+  )
+}
+// {id:1}
+// http://127.0.0.1/getlist?id=1
+// http://127.0.0.1/setuser  载荷 body
diff --git a/src/views/portal/LearningPathRecommendations.vue b/src/views/portal/LearningPathRecommendations.vue
index d30b22d..a8d11bf 100644
--- a/src/views/portal/LearningPathRecommendations.vue
+++ b/src/views/portal/LearningPathRecommendations.vue
@@ -1,134 +1,781 @@
 <template>
-  <!-- <e-charts id="main" class="chart" /> -->
-  <!-- <div class="container" ref="containerRef">
-    <h1>Scroll down to load more content</h1>
-    <div class="content">
-      <p v-for="item in content" :key="item.id">{{ item.text }}</p>
-    </div>
-    <button v-if="showButton" @click="scrollDown">加载更多</button>
-  </div> -->
-
-  <!-- <div class="container" @mouseover="startTimer" @mouseleave="clearTimer">
-    <h1>Hover for 5 seconds to scroll down and load more content</h1>
-    <div class="content" ref="contentRef">
-      <p v-for="item in content" :key="item.id">{{ item.text }}</p>
-      <p v-if="!allContentLoaded">Loading more content...</p>
+  <!-- 头部 -->
+  <div class="header">
+    <div class="logo"></div>
+    <div class="nav">
+      <div class="nav1">
+        <ul>
+          <li>企业入口&nbsp;&nbsp;|</li>
+          <li>教师入口&nbsp;&nbsp;|</li>
+          <li>学生入口&nbsp;&nbsp;|</li>
+          <li>毕业生入口</li>
+        </ul>
+
+      </div>
+      <div class="nav2">
+        <ul>
+          <li><a>学生首页</a></li>
+          <li><a>专业概况</a></li>
+          <li><a>教学改革</a></li>
+          <li><a>科学研就</a></li>
+          <li><a>人才培养</a></li>
+          <li><a>成果展示</a></li>
+          <li><a>产教结合</a></li>
+          <li><a>日常教学</a></li>
+          <li><a>优秀学生</a></li>
+        </ul>
+      </div>
     </div>
-  </div> -->
+    <!-- <div class="inco"></div> -->
+    <h1>学习路径推荐</h1>
+    <!-- <p>(专业代码 ：080902H)</p> -->
+  </div>
+  <!-- 内容学习路径推荐d3 -->
+  <div class="content">
+    <div class="subnav">
+    <h1>xxx课程</h1>
+  </div>
+  <div class="container"></div>
+
+  </div>
+
+  <!-- 底部 -->
+  <div class="footer">
+    <h3>软件工程专业</h3>
+    <h1>教学一体化平台</h1>
+    <p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
+    </p>
+    <p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br>
+      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p>
+  </div>
+  <div>
+    
+  </div>
 </template>
-<!-- 学习路径推荐 -->
 
 <script lang="ts" >
+import * as d3 from 'd3';
+// import { onMounted } from 'vue';
+
+export default {
+  name: 'courseHomepage',
+  data() {
+    return {
+      svgArea:null,
+          links:[],
+          nodes:[],
+          nodesName:[],
+          linksName:[],
+          simulation:null,
+          scale:1,
+          width:800,
+          height:560,
+          colorList:['#FD7623','#3388B1','#D82952','#F3D737','#409071','#D64E52'],
+      testGraph: {
+        "nodes": [
+          { "id": "Myriel", "group": 1 },
+          { "id": "Napoleon", "group": 1 },
+          { "id": "Mlle.Baptistine", "group": 1 },
+          { "id": "Mme.Magloire", "group": 1 },
+          { "id": "CountessdeLo", "group": 1 },
+          { "id": "Geborand", "group": 1 },
+          { "id": "Champtercier", "group": 1 },
+          { "id": "Cravatte", "group": 1 },
+          { "id": "Count", "group": 1 },
+          { "id": "OldMan", "group": 1 },
+          { "id": "Labarre", "group": 2 },
+          { "id": "Valjean", "group": 2 },
+          // { "id": "Marguerite", "group": 3 },
+          // { "id": "Mme.deR", "group": 2 },
+          // { "id": "Isabeau", "group": 2 },
+          // { "id": "Gervais", "group": 2 },
+          // { "id": "Tholomyes", "group": 3 },
+          // { "id": "Listolier", "group": 3 },
+          // { "id": "Fameuil", "group": 3 },
+          // { "id": "Blacheville", "group": 3 },
+          // { "id": "Favourite", "group": 3 },
+          // { "id": "Dahlia", "group": 3 },
+          // { "id": "Zephine", "group": 3 },
+          // { "id": "Fantine", "group": 3 },
+          // { "id": "Mme.Thenardier", "group": 4 },
+          // { "id": "Thenardier", "group": 4 },
+          // { "id": "Cosette", "group": 5 },
+          // { "id": "Javert", "group": 4 },
+          // { "id": "Fauchelevent", "group": 0 },
+          // { "id": "Bamatabois", "group": 2 },
+          // { "id": "Perpetue", "group": 3 },
+          // { "id": "Simplice", "group": 2 },
+          // { "id": "Scaufflaire", "group": 2 },
+          // { "id": "Woman1", "group": 2 },
+          // { "id": "Judge", "group": 2 },
+          // { "id": "Champmathieu", "group": 2 },
+          // { "id": "Brevet", "group": 2 },
+          // { "id": "Chenildieu", "group": 2 },
+          // { "id": "Cochepaille", "group": 2 },
+          // { "id": "Pontmercy", "group": 4 },
+          // { "id": "Boulatruelle", "group": 6 },
+          // { "id": "Eponine", "group": 4 },
+          // { "id": "Anzelma", "group": 4 },
+          // { "id": "Woman2", "group": 5 },
+          // { "id": "MotherInnocent", "group": 0 },
+          // { "id": "Gribier", "group": 0 },
+          // { "id": "Jondrette", "group": 7 },
+          // { "id": "Mme.Burgon", "group": 7 },
+          // { "id": "Gavroche", "group": 8 },
+          // { "id": "Gillenormand", "group": 5 },
+          // { "id": "Magnon", "group": 5 },
+          // { "id": "Mlle.Gillenormand", "group": 5 },
+          // { "id": "Mme.Pontmercy", "group": 5 },
+          // { "id": "Mlle.Vaubois", "group": 5 },
+          // { "id": "Lt.Gillenormand", "group": 5 },
+          // { "id": "Marius", "group": 8 },
+          // { "id": "BaronessT", "group": 5 },
+          // { "id": "Mabeuf", "group": 8 },
+          // { "id": "Enjolras", "group": 8 },
+          // { "id": "Combeferre", "group": 8 },
+          // { "id": "Prouvaire", "group": 8 },
+          // { "id": "Feuilly", "group": 8 },
+          // { "id": "Courfeyrac", "group": 8 },
+          // { "id": "Bahorel", "group": 8 },
+          // { "id": "Bossuet", "group": 8 },
+          // { "id": "Joly", "group": 8 },
+          // { "id": "Grantaire", "group": 8 },
+          // { "id": "MotherPlutarch", "group": 9 },
+          // { "id": "Gueulemer", "group": 4 },
+          // { "id": "Babet", "group": 4 },
+          // { "id": "Claquesous", "group": 4 },
+          // { "id": "Montparnasse", "group": 4 },
+          // { "id": "Toussaint", "group": 5 },
+          // { "id": "Child1", "group": 10 },
+          // { "id": "Child2", "group": 10 },
+          // { "id": "Brujon", "group": 4 },
+          // { "id": "Mme.Hucheloup", "group": 8 }
+        ],
+        "links": [
+          { "source": "Napoleon", "target": "Myriel", "value": 1 },
+          // { "source": "Mlle.Baptistine", "target": "Myriel", "value": 8 },
+          // { "source": "Mme.Magloire", "target": "Myriel", "value": 10 },
+          // { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6 },
+          // { "source": "CountessdeLo", "target": "Myriel", "value": 1 },
+          // { "source": "Geborand", "target": "Myriel", "value": 1 },
+          // { "source": "Champtercier", "target": "Myriel", "value": 1 },
+          // { "source": "Cravatte", "target": "Myriel", "value": 1 },
+          // { "source": "Count", "target": "Myriel", "value": 2 },
+          // { "source": "OldMan", "target": "Myriel", "value": 1 },
+          // { "source": "Valjean", "target": "Labarre", "value": 1 },
+          // { "source": "Valjean", "target": "Mme.Magloire", "value": 3 },
+          // { "source": "Valjean", "target": "Mlle.Baptistine", "value": 3 },
+          // { "source": "Valjean", "target": "Myriel", "value": 5 },
+          // { "source": "Marguerite", "target": "Valjean", "value": 1 },
+          // { "source": "Mme.deR", "target": "Valjean", "value": 1 },
+          // { "source": "Isabeau", "target": "Valjean", "value": 1 },
+          // { "source": "Gervais", "target": "Valjean", "value": 1 },
+          // { "source": "Listolier", "target": "Tholomyes", "value": 4 },
+          // { "source": "Fameuil", "target": "Tholomyes", "value": 4 },
+          // { "source": "Fameuil", "target": "Listolier", "value": 4 },
+          // { "source": "Blacheville", "target": "Tholomyes", "value": 4 },
+          // { "source": "Blacheville", "target": "Listolier", "value": 4 },
+          // { "source": "Blacheville", "target": "Fameuil", "value": 4 },
+          // { "source": "Favourite", "target": "Tholomyes", "value": 3 },
+          // { "source": "Favourite", "target": "Listolier", "value": 3 },
+          // { "source": "Favourite", "target": "Fameuil", "value": 3 },
+          // { "source": "Favourite", "target": "Blacheville", "value": 4 },
+          // { "source": "Dahlia", "target": "Tholomyes", "value": 3 },
+          // { "source": "Dahlia", "target": "Listolier", "value": 3 },
+          // { "source": "Dahlia", "target": "Fameuil", "value": 3 },
+          // { "source": "Dahlia", "target": "Blacheville", "value": 3 },
+          // { "source": "Dahlia", "target": "Favourite", "value": 5 },
+          // { "source": "Zephine", "target": "Tholomyes", "value": 3 },
+          // { "source": "Zephine", "target": "Listolier", "value": 3 },
+          // { "source": "Zephine", "target": "Fameuil", "value": 3 },
+          // { "source": "Zephine", "target": "Blacheville", "value": 3 },
+          // { "source": "Zephine", "target": "Favourite", "value": 4 },
+          // { "source": "Zephine", "target": "Dahlia", "value": 4 },
+          // { "source": "Fantine", "target": "Tholomyes", "value": 3 },
+          // { "source": "Fantine", "target": "Listolier", "value": 3 },
+          // { "source": "Fantine", "target": "Fameuil", "value": 3 },
+          // { "source": "Fantine", "target": "Blacheville", "value": 3 },
+          // { "source": "Fantine", "target": "Favourite", "value": 4 },
+          // { "source": "Fantine", "target": "Dahlia", "value": 4 },
+          // { "source": "Fantine", "target": "Zephine", "value": 4 },
+          // { "source": "Fantine", "target": "Marguerite", "value": 2 },
+          // { "source": "Fantine", "target": "Valjean", "value": 9 },
+          // { "source": "Mme.Thenardier", "target": "Fantine", "value": 2 },
+          // { "source": "Mme.Thenardier", "target": "Valjean", "value": 7 },
+          // { "source": "Thenardier", "target": "Mme.Thenardier", "value": 13 },
+          // { "source": "Thenardier", "target": "Fantine", "value": 1 },
+          // { "source": "Thenardier", "target": "Valjean", "value": 12 },
+          // { "source": "Cosette", "target": "Mme.Thenardier", "value": 4 },
+          // { "source": "Cosette", "target": "Valjean", "value": 31 },
+          // { "source": "Cosette", "target": "Tholomyes", "value": 1 },
+          // { "source": "Cosette", "target": "Thenardier", "value": 1 },
+          // { "source": "Javert", "target": "Valjean", "value": 17 },
+          // { "source": "Javert", "target": "Fantine", "value": 5 },
+          // { "source": "Javert", "target": "Thenardier", "value": 5 },
+          // { "source": "Javert", "target": "Mme.Thenardier", "value": 1 },
+          // { "source": "Javert", "target": "Cosette", "value": 1 },
+          // { "source": "Fauchelevent", "target": "Valjean", "value": 8 },
+          // { "source": "Fauchelevent", "target": "Javert", "value": 1 },
+          // { "source": "Bamatabois", "target": "Fantine", "value": 1 },
+          // { "source": "Bamatabois", "target": "Javert", "value": 1 },
+          // { "source": "Bamatabois", "target": "Valjean", "value": 2 },
+          // { "source": "Perpetue", "target": "Fantine", "value": 1 },
+          // { "source": "Simplice", "target": "Perpetue", "value": 2 },
+          // { "source": "Simplice", "target": "Valjean", "value": 3 },
+          // { "source": "Simplice", "target": "Fantine", "value": 2 },
+          // { "source": "Simplice", "target": "Javert", "value": 1 },
+          // { "source": "Scaufflaire", "target": "Valjean", "value": 1 },
+          // { "source": "Woman1", "target": "Valjean", "value": 2 },
+          // { "source": "Woman1", "target": "Javert", "value": 1 },
+          // { "source": "Judge", "target": "Valjean", "value": 3 },
+          // { "source": "Judge", "target": "Bamatabois", "value": 2 },
+          // { "source": "Champmathieu", "target": "Valjean", "value": 3 },
+          // { "source": "Champmathieu", "target": "Judge", "value": 3 },
+          // { "source": "Champmathieu", "target": "Bamatabois", "value": 2 },
+          // { "source": "Brevet", "target": "Judge", "value": 2 },
+          // { "source": "Brevet", "target": "Champmathieu", "value": 2 },
+          // { "source": "Brevet", "target": "Valjean", "value": 2 },
+          // { "source": "Brevet", "target": "Bamatabois", "value": 1 },
+          // { "source": "Chenildieu", "target": "Judge", "value": 2 },
+          // { "source": "Chenildieu", "target": "Champmathieu", "value": 2 },
+          // { "source": "Chenildieu", "target": "Brevet", "value": 2 },
+          // { "source": "Chenildieu", "target": "Valjean", "value": 2 },
+          // { "source": "Chenildieu", "target": "Bamatabois", "value": 1 },
+          // { "source": "Cochepaille", "target": "Judge", "value": 2 },
+          // { "source": "Cochepaille", "target": "Champmathieu", "value": 2 },
+          // { "source": "Cochepaille", "target": "Brevet", "value": 2 },
+          // { "source": "Cochepaille", "target": "Chenildieu", "value": 2 },
+          // { "source": "Cochepaille", "target": "Valjean", "value": 2 },
+          // { "source": "Cochepaille", "target": "Bamatabois", "value": 1 },
+          // { "source": "Pontmercy", "target": "Thenardier", "value": 1 },
+          // { "source": "Boulatruelle", "target": "Thenardier", "value": 1 },
+          // { "source": "Eponine", "target": "Mme.Thenardier", "value": 2 },
+          // { "source": "Eponine", "target": "Thenardier", "value": 3 },
+          // { "source": "Anzelma", "target": "Eponine", "value": 2 },
+          // { "source": "Anzelma", "target": "Thenardier", "value": 2 },
+          // { "source": "Anzelma", "target": "Mme.Thenardier", "value": 1 },
+          // { "source": "Woman2", "target": "Valjean", "value": 3 },
+          // { "source": "Woman2", "target": "Cosette", "value": 1 },
+          // { "source": "Woman2", "target": "Javert", "value": 1 },
+          // { "source": "MotherInnocent", "target": "Fauchelevent", "value": 3 },
+          // { "source": "MotherInnocent", "target": "Valjean", "value": 1 },
+          // { "source": "Gribier", "target": "Fauchelevent", "value": 2 },
+          // { "source": "Mme.Burgon", "target": "Jondrette", "value": 1 },
+          // { "source": "Gavroche", "target": "Mme.Burgon", "value": 2 },
+          // { "source": "Gavroche", "target": "Thenardier", "value": 1 },
+          // { "source": "Gavroche", "target": "Javert", "value": 1 },
+          // { "source": "Gavroche", "target": "Valjean", "value": 1 },
+          // { "source": "Gillenormand", "target": "Cosette", "value": 3 },
+          // { "source": "Gillenormand", "target": "Valjean", "value": 2 },
+          // { "source": "Magnon", "target": "Gillenormand", "value": 1 },
+          // { "source": "Magnon", "target": "Mme.Thenardier", "value": 1 },
+          // { "source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9 },
+          // { "source": "Mlle.Gillenormand", "target": "Cosette", "value": 2 },
+          // { "source": "Mlle.Gillenormand", "target": "Valjean", "value": 2 },
+          // { "source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1 },
+          // { "source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1 },
+          // { "source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1 },
+          // { "source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2 },
+          // { "source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1 },
+          // { "source": "Lt.Gillenormand", "target": "Cosette", "value": 1 },
+          // { "source": "Marius", "target": "Mlle.Gillenormand", "value": 6 },
+          // { "source": "Marius", "target": "Gillenormand", "value": 12 },
+          // { "source": "Marius", "target": "Pontmercy", "value": 1 },
+          // { "source": "Marius", "target": "Lt.Gillenormand", "value": 1 },
+          // { "source": "Marius", "target": "Cosette", "value": 21 },
+          // { "source": "Marius", "target": "Valjean", "value": 19 },
+          // { "source": "Marius", "target": "Tholomyes", "value": 1 },
+          // { "source": "Marius", "target": "Thenardier", "value": 2 },
+          // { "source": "Marius", "target": "Eponine", "value": 5 },
+          // { "source": "Marius", "target": "Gavroche", "value": 4 },
+          // { "source": "BaronessT", "target": "Gillenormand", "value": 1 },
+          // { "source": "BaronessT", "target": "Marius", "value": 1 },
+          // { "source": "Mabeuf", "target": "Marius", "value": 1 },
+          // { "source": "Mabeuf", "target": "Eponine", "value": 1 },
+          // { "source": "Mabeuf", "target": "Gavroche", "value": 1 },
+          // { "source": "Enjolras", "target": "Marius", "value": 7 },
+          // { "source": "Enjolras", "target": "Gavroche", "value": 7 },
+          // { "source": "Enjolras", "target": "Javert", "value": 6 },
+          // { "source": "Enjolras", "target": "Mabeuf", "value": 1 },
+          // { "source": "Enjolras", "target": "Valjean", "value": 4 },
+          // { "source": "Combeferre", "target": "Enjolras", "value": 15 },
+          // { "source": "Combeferre", "target": "Marius", "value": 5 },
+          // { "source": "Combeferre", "target": "Gavroche", "value": 6 },
+          // { "source": "Combeferre", "target": "Mabeuf", "value": 2 },
+          // { "source": "Prouvaire", "target": "Gavroche", "value": 1 },
+          // { "source": "Prouvaire", "target": "Enjolras", "value": 4 },
+          // { "source": "Prouvaire", "target": "Combeferre", "value": 2 },
+          // { "source": "Feuilly", "target": "Gavroche", "value": 2 },
+          // { "source": "Feuilly", "target": "Enjolras", "value": 6 },
+          // { "source": "Feuilly", "target": "Prouvaire", "value": 2 },
+          // { "source": "Feuilly", "target": "Combeferre", "value": 5 },
+          // { "source": "Feuilly", "target": "Mabeuf", "value": 1 },
+          // { "source": "Feuilly", "target": "Marius", "value": 1 },
+          // { "source": "Courfeyrac", "target": "Marius", "value": 9 },
+          // { "source": "Courfeyrac", "target": "Enjolras", "value": 17 },
+          // { "source": "Courfeyrac", "target": "Combeferre", "value": 13 },
+          // { "source": "Courfeyrac", "target": "Gavroche", "value": 7 },
+          // { "source": "Courfeyrac", "target": "Mabeuf", "value": 2 },
+          // { "source": "Courfeyrac", "target": "Eponine", "value": 1 },
+          // { "source": "Courfeyrac", "target": "Feuilly", "value": 6 },
+          // { "source": "Courfeyrac", "target": "Prouvaire", "value": 3 },
+          // { "source": "Bahorel", "target": "Combeferre", "value": 5 },
+          // { "source": "Bahorel", "target": "Gavroche", "value": 5 },
+          // { "source": "Bahorel", "target": "Courfeyrac", "value": 6 },
+          // { "source": "Bahorel", "target": "Mabeuf", "value": 2 },
+          // { "source": "Bahorel", "target": "Enjolras", "value": 4 },
+          // { "source": "Bahorel", "target": "Feuilly", "value": 3 },
+          // { "source": "Bahorel", "target": "Prouvaire", "value": 2 },
+          // { "source": "Bahorel", "target": "Marius", "value": 1 },
+          // { "source": "Bossuet", "target": "Marius", "value": 5 },
+          // { "source": "Bossuet", "target": "Courfeyrac", "value": 12 },
+          // { "source": "Bossuet", "target": "Gavroche", "value": 5 },
+          // { "source": "Bossuet", "target": "Bahorel", "value": 4 },
+          // { "source": "Bossuet", "target": "Enjolras", "value": 10 },
+          // { "source": "Bossuet", "target": "Feuilly", "value": 6 },
+          // { "source": "Bossuet", "target": "Prouvaire", "value": 2 },
+          // { "source": "Bossuet", "target": "Combeferre", "value": 9 },
+          // { "source": "Bossuet", "target": "Mabeuf", "value": 1 },
+          // { "source": "Bossuet", "target": "Valjean", "value": 1 },
+          // { "source": "Joly", "target": "Bahorel", "value": 5 },
+          // { "source": "Joly", "target": "Bossuet", "value": 7 },
+          // { "source": "Joly", "target": "Gavroche", "value": 3 },
+          // { "source": "Joly", "target": "Courfeyrac", "value": 5 },
+          // { "source": "Joly", "target": "Enjolras", "value": 5 },
+          // { "source": "Joly", "target": "Feuilly", "value": 5 },
+          // { "source": "Joly", "target": "Prouvaire", "value": 2 },
+          // { "source": "Joly", "target": "Combeferre", "value": 5 },
+          // { "source": "Joly", "target": "Mabeuf", "value": 1 },
+          // { "source": "Joly", "target": "Marius", "value": 2 },
+          // { "source": "Grantaire", "target": "Bossuet", "value": 3 },
+          // { "source": "Grantaire", "target": "Enjolras", "value": 3 },
+          // { "source": "Grantaire", "target": "Combeferre", "value": 1 },
+          // { "source": "Grantaire", "target": "Courfeyrac", "value": 2 },
+          // { "source": "Grantaire", "target": "Joly", "value": 2 },
+          // { "source": "Grantaire", "target": "Gavroche", "value": 1 },
+          // { "source": "Grantaire", "target": "Bahorel", "value": 1 },
+          // { "source": "Grantaire", "target": "Feuilly", "value": 1 },
+          // { "source": "Grantaire", "target": "Prouvaire", "value": 1 },
+          // { "source": "MotherPlutarch", "target": "Mabeuf", "value": 3 },
+          // { "source": "Gueulemer", "target": "Thenardier", "value": 5 },
+          // { "source": "Gueulemer", "target": "Valjean", "value": 1 },
+          // { "source": "Gueulemer", "target": "Mme.Thenardier", "value": 1 },
+          // { "source": "Gueulemer", "target": "Javert", "value": 1 },
+          // { "source": "Gueulemer", "target": "Gavroche", "value": 1 },
+          // { "source": "Gueulemer", "target": "Eponine", "value": 1 },
+          // { "source": "Babet", "target": "Thenardier", "value": 6 },
+          // { "source": "Babet", "target": "Gueulemer", "value": 6 },
+          // { "source": "Babet", "target": "Valjean", "value": 1 },
+          // { "source": "Babet", "target": "Mme.Thenardier", "value": 1 },
+          // { "source": "Babet", "target": "Javert", "value": 2 },
+          // { "source": "Babet", "target": "Gavroche", "value": 1 },
+          // { "source": "Babet", "target": "Eponine", "value": 1 },
+          // { "source": "Claquesous", "target": "Thenardier", "value": 4 },
+          // { "source": "Claquesous", "target": "Babet", "value": 4 },
+          // { "source": "Claquesous", "target": "Gueulemer", "value": 4 },
+          // { "source": "Claquesous", "target": "Valjean", "value": 1 },
+          // { "source": "Claquesous", "target": "Mme.Thenardier", "value": 1 },
+          // { "source": "Claquesous", "target": "Javert", "value": 1 },
+          // { "source": "Claquesous", "target": "Eponine", "value": 1 },
+          // { "source": "Claquesous", "target": "Enjolras", "value": 1 },
+          // { "source": "Montparnasse", "target": "Javert", "value": 1 },
+          // { "source": "Montparnasse", "target": "Babet", "value": 2 },
+          // { "source": "Montparnasse", "target": "Gueulemer", "value": 2 },
+          // { "source": "Montparnasse", "target": "Claquesous", "value": 2 },
+          // { "source": "Montparnasse", "target": "Valjean", "value": 1 },
+          // { "source": "Montparnasse", "target": "Gavroche", "value": 1 },
+          // { "source": "Montparnasse", "target": "Eponine", "value": 1 },
+          // { "source": "Montparnasse", "target": "Thenardier", "value": 1 },
+          // { "source": "Toussaint", "target": "Cosette", "value": 2 },
+          // { "source": "Toussaint", "target": "Javert", "value": 1 },
+          // { "source": "Toussaint", "target": "Valjean", "value": 1 },
+          // { "source": "Child1", "target": "Gavroche", "value": 2 },
+          // { "source": "Child2", "target": "Gavroche", "value": 2 },
+          // { "source": "Child2", "target": "Child1", "value": 3 },
+          // { "source": "Brujon", "target": "Babet", "value": 3 },
+          // { "source": "Brujon", "target": "Gueulemer", "value": 3 },
+          // { "source": "Brujon", "target": "Thenardier", "value": 3 },
+          // { "source": "Brujon", "target": "Gavroche", "value": 1 },
+          // { "source": "Brujon", "target": "Eponine", "value": 1 },
+          // { "source": "Brujon", "target": "Claquesous", "value": 1 },
+          // { "source": "Brujon", "target": "Montparnasse", "value": 1 },
+          // { "source": "Mme.Hucheloup", "target": "Bossuet", "value": 1 },
+          // { "source": "Mme.Hucheloup", "target": "Joly", "value": 1 },
+          // { "source": "Mme.Hucheloup", "target": "Grantaire", "value": 1 },
+          // { "source": "Mme.Hucheloup", "target": "Bahorel", "value": 1 },
+          // { "source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1 },
+          // { "source": "Mme.Hucheloup", "target": "Gavroche", "value": 1 },
+          // { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 }
+        ]
+        // "links":[]
+      }
+
+    }; 
+    
+  },
+  mounted() {
+    // .then(function(response){
+    //   console.log(response)
+    // })
+    // .catch(function(error){
+    //   console.log(error)
+    // })
+    this.initGraph(this.testGraph);
+
+  },
+  methods: {
+    initGraph(data: {
+      nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue';
+        source: string; target: string; value: number;
+      }[];
+    }) {
+      const _this = this;
+      const links = data.links;
+      const nodes = data.nodes;
+      // const links = data.links.map((d: object | null) => Object.create(d));
+      // const nodes = data.nodes.map((d: object | null) => Object.create(d));
+
+      const simulation = d3.forceSimulation(nodes)
+        .force("link", d3.forceLink(links).id((d: { id: any; }) => d.id))
+        .force("collide",d3.forceCollide().radius(()=> 30) )
+        .force("charge", d3.forceManyBody().strength(-30))
+        .force("center", d3.forceCenter(_this.width / 2, _this.height / 2));
+
+      const svg = d3.select(".container")
+        .append("svg")
+        .attr("viewBox", `0 0 ${_this.width} ${_this.height}`);
+        svg.call(d3.zoom().on("zoom",function(){
+          g.attr("transform",d3.event.transform)
+        }))
+
+      const g = svg.append("g")
+
+      const link = g.append("g")
+        .attr("stroke", "#999")
+        .attr("stroke-opacity", 0.6)
+        .selectAll("line")
+        .data(links)
+        .join("line") 
+        .attr("stroke-width", (d: { value: number; }) => Math.sqrt(d.value))
+        .attr("class", "link");
+
+      const node = g.append("g")
+        .selectAll("circle")
+        .data(nodes)
+        .join("circle")
+        .attr("r", 40)
+        .attr("class","node")
+        .attr("fill", _this.color)
+        .on("click",_this.queryTest)
+        .call(_this.drag(simulation));
+
+      node.append("title")
+        .text((d: { id: any; }) => d.id);
+
+        const nodeNameText = g.append("g")
+        .selectAll("text")
+        .data(nodes)
+        .join("text") 
+        .text(function(d: { id: any; }){
+          return d.id
+        })
+        .attr("fill","white")
+        .attr("dx",function () {
+              return this.getBoundingClientRect().width/2*(-1)
+            })
+            .attr("dy",50)
+         .attr("class","node-name")
+
+         node.on("mouseover", function (d, i) {
+        d3.select(this)
+          .attr("stroke", "white")  // 添加白色边框
+          .attr("stroke-width", 5);  // 设置边框宽度
+      })
+        .on("mouseout", function (d, i) {
+          d3.select(this)
+            .attr("stroke", "none");  // 移出时恢复原始样式
+        });
+       
+
+      simulation.on("tick", () => {
+        link
+          .attr("x1", (d: { source: { x: any; }; }) => d.source.x)
+          .attr("y1", (d: { source: { y: any; }; }) => d.source.y)
+          .attr("x2", (d: { target: { x: any; }; }) => d.target.x)
+          .attr("y2", (d: { target: { y: any; }; }) => d.target.y);
+
+        node
+          .attr("cx", (d: { x: any; }) => d.x)
+          .attr("cy", (d: { y: any; }) => d.y);
+
+          nodeNameText
+          .attr("x", (d: { x: any; }) => d.x)
+          .attr("y", (d: { y: any; })=> d.y);
+      });
+    },
+    updateGraph(data: { links: any[]; }){
+      // var _this = this
+      const links = data.links.map((d: object | null)=>Object.create(d));
+      const nodes = data.nodes.map((d: object | null)=>Object.create(d));
+    },
+    color(d: { group: string | number; }) {
+      return this.colorList[d.group]
+      // const scale = d3.scaleOrdinal(d3.schemeCategory10);
+      // return (d: { group: any; }) => scale(d.group);
+    },
+    drag(simulation: { alphaTarget: (arg0: number) => { (): any; new(): any; restart: { (): void; new(): any; }; }; }) {
+      function dragstarted(event: { active: any; }) {
+        if (!event.active) simulation.alphaTarget(0.3).restart();
+        d3.event.subject.fx = d3.event.x;
+        d3.event.subject.fy = d3.event.y;
+      }
+
+      function dragged(event: any) {
+        d3.event.subject.fx = d3.event.x;
+        d3.event.subject.fy = d3.event.y;
+      }
+
+      function dragended(event: { active: any; }) {
+        if (!event.active) simulation.alphaTarget(0);
+        d3.event.subject.fx = null;
+        d3.event.subject.fy = null;
+      }
+
+      return d3.drag()
+        .on("start", dragstarted)
+        .on("drag", dragged)
+        .on("end", dragended);
+    },
+    queryTest(d: { id: any; }){
+      // var _this = this
+      console.log(d.id)
+    }
+  }
+}
+
 
-// import { onMounted, ref, reactive } from 'vue';
-
-// export default {
-//   setup() {
-//     const containerRef = ref(null);
-//     const visibleContent = ref([]);
-//     const content = reactive([
-//       { id: 1, text: 'Content 1' },
-//       { id: 2, text: 'Content 2' },
-//       { id: 3, text: 'Content 3' },
-//       { id: 4, text: 'Content 4' },
-//       { id: 5, text: 'Content 5' },
-//       { id: 6, text: 'Content 6' },
-//       { id: 7, text: 'Content 7' },
-//       { id: 8, text: 'Content 8' },
-//       { id: 9, text: 'Content 9' },
-//       { id: 10, text: 'Content 10' }
-//     ]);
-
-//     const showButton = ref(true); // 控制按钮显示与隐藏
-
-//     const scrollDown = () => {
-//       const container = containerRef.value;
-//       container.scrollTo({
-//         top: container.scrollHeight,
-//         behavior: 'smooth'
-//       });
-//       loadMore();
-//     };
-
-//     const loadMore = () => {
-//       const startIndex = visibleContent.value.length;
-//       const endIndex = startIndex + 3; // 每次加载3个
-
-//       // 将指定范围的内容添加到可见内容列表中
-//       visibleContent.value = [...visibleContent.value, ...content.slice(startIndex, endIndex)];
-
-//       // 检查是否加载完所有内容
-//       if (visibleContent.value.length >= content.length) {
-//         showButton.value = false; // 隐藏按钮
-//       }
-//     };
-
-//     onMounted(() => {
-//       const container = containerRef.value;
-//       container.addEventListener('scroll', handleScroll);
-//     });
-
-//     const handleScroll = () => {
-//       const container = containerRef.value;
-//       const scrollPosition = container.scrollTop + container.clientHeight;
-//       const scrollHeight = container.scrollHeight;
-
-//       // 判断是否滑动到底部
-//       if (scrollPosition === scrollHeight) {
-//         showButton.value = true; // 显示按钮
-//       }
-//     };
-
-//     return {
-//       containerRef,
-//       visibleContent,
-//       showButton,
-//       scrollDown,
-//       content
-//     };
-//   }
-// };
 </script>
 
+
 <style lang="scss" scoped>
-/* 添加一些样式 */  
-
-// .container {
-//   width: 100%;
-//   height: 100vh;
-//   overflow-y: auto;
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-//   align-items: center;
-//   background-color: lightgray;
-// }
-
-// .container .content {
-//   margin-top: 20px;
-//   padding: 10px;
-//   border: 1px solid gray;
-//   background-color: white;
-// }
-// .container {
-//   width: 100px;
-//   height: 100px;
-//   // overflow-y: auto;
-//   // display: flex;
-//   // flex-direction: column;
-//   // justify-content: center;
-//   // align-items: center;
-//   background-color: lightgray;
-// }
-
-// .content {
-//   margin-top: 20px;
-//   padding: 10px;
-//   border: 1px solid gray;
-//   background-color: white;
-// }
-// .chart {
-//   height: 400px;
-//   width: 100%;
-// }
+* {
+  margin: 0;
+  padding: 0;
+  /* box-sizing: border-box; */
+  /* font: 14px/28px "微软雅黑"; */
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+body {
+  /* 宽度占浏览器可视区域的宽度 */
+  width: 100vm;
+  margin: 0px;
+  // position: relative;
+  //   display:flex;
+  //   justify-content:center;i
+  /* height: 1500px; */
+  // background-color: #FFFFFF;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+}
+
+// 头
+.header {
+  width: 100%;
+  height: 300px;
+  background-image: url('/src/assets/images/top.png');
+  background-size: 100% 100%;
+  // background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
+
+
+}
+
+// 导航栏
+.header .nav {
+  width: 95%;
+  height: 100px;
+  // background-color: #3D78F5;
+}
+
+.header .nav1 {
+  float: right;
+  width: 24%;
+  height: 10%;
+  margin-right: 20px;
+  // background-color: #6759ff; 
+
+}
+
+.header .nav1 ul li {
+  float: left;
+  margin-left: 5px;
+  line-height: 20px;
+  color: white;
+  font-size: 12px;
+  text-align: center;
+  // border-right: 1px solid #FFFFFF; 
+}
+
+.header .nav2 {
+  float: right;
+
+  // padding-right: -20px;
+  width: 68%;
+  height: 25%;
+  margin-top: 30px;
+  // margin-right: -260px;
+  // background-color: #6759ff; 
+}
+
+.header .nav2 ul li {
+  float: left;
+  margin-left: 20px;
+  // line-height: 40px;
+  color: white;
+  font-size: 15px;
+  text-align: center;
+}
+
+.header .nav2 ul li:hover {
+  color: #74a5ff;
+}
+
+.header .inco {
+  float: left;
+  width: 48%;
+  height: 65.1%;
+  margin-left: 80px;
+  // background-color: #6759ff;
+}
+
+.header h1 {
+  font-size: 50px;
+  margin-top: 23px;
+  font-weight: bolder;
+  color: #FFFFFF;
+  float: right;
+  margin-right: 173px // float: left;
+    // margin-left: 779px;
+}
+
+.header p {
+  font-size: 15px;
+  margin-top: 102px;
+  // font-weight:bolder;
+  color: #FFFFFF;
+  float: right;
+  margin-right: -175px;
+}
+
+.logo {
+  width: 15%;
+  height: 30%;
+  float: left;
+  margin-left: 80px;
+}
+// 内容
+.content{
+  margin-top: 10;
+  width: 100%;
+  height: 900px;
+  background-color: #7F9EED;
+}
+.subnav {
+  width: 100%;
+  margin: auto;
+  margin-top: 50px;
+  height: 50px;
+  // background-color: #7F9EED;
+}
+
+.subnav h1 {
+  border-bottom: 4px solid #0052FF;
+  font-size: 20px;
+  width: 10%;
+  height: 35px;
+  margin: auto;
+  font-weight: bolder;
+  color: #0052FF;
+  text-align: center;
+}
+// d3
+.container{
+    width: 1000px;
+    height: 700px;
+    // border: 1px solid #2c3e50;
+    border-radius:8px;
+    margin-top: 40px;
+    margin-left: auto;
+    // border-radius: 50%;
+    margin-right: auto;
+    border: #79c4f3;
+    background-color: #79c4f3 ;
+    // background: #79c4f3 repeating-linear-gradient(30deg,
+    // hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px,
+    // transparent 0, transparent 30px);
+  }
+  .node{
+    stroke:#fff;
+    stroke-width:1;
+    cursor: pointer;
+  }
+
+  .node:hover{
+    stroke-width:5;
+  }
+
+  .nodeName{
+    fill:white;
+  }
+
+// 尾部
+.footer {
+  margin-top: 100px;
+  // padding-bottom: 0%;
+  width: 100%;
+  height: 250px;
+  // position: absolute;
+  text-align: center;
+  background-color: #252527;
+}
+
+.footer h3 {
+  width: 100%;
+  // position: absolute;
+  text-align: center;
+  font-size: 15px;
+  padding-top: 40px;
+  color: #7F9EED;
+  font-weight: bolder;
+}
+
+.footer h1 {
+  width: 100%;
+  // position: absolute;
+  font-family: "kaiti_gb2312";
+  margin-top: 10px;
+  font-size: 25px;
+  color: #7F9EED;
+  font-weight: bolder;
+}
+
+.footer p {
+  width: 100%;
+  height: 20px;
+  // position: absolute;
+  font-family: "kaiti_gb2312";
+  margin-top: 25px;
+  font-size: 17px;
+  color: #7F9EED;
+}
 </style>
diff --git a/src/views/portal/index.vue b/src/views/portal/index.vue
index 8849be8..34d2eb7 100644
--- a/src/views/portal/index.vue
+++ b/src/views/portal/index.vue
@@ -10,7 +10,6 @@
           <li>学生入口&nbsp;&nbsp;|</li>
           <li>毕业生入口</li>
         </ul>
-
       </div>
       <div class="nav2">
         <ul>
@@ -28,347 +27,281 @@
     </div>
     <!-- <div class="inco"></div> -->
     <h1>知识图谱</h1>
-    <p>(专业代码 ：080902H)</p>
+    <!-- <p>(专业代码 ：080902H)</p> -->
   </div>
-  <div class="content">
-    <el-scrollbar height="1500px">
-      <div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);">
-        <div class="icon" style="  background-image: url('/src/assets/images/bj2.png');
-  background-size: 100% 100%;">
-          <div class="content">
-            <img src="/src/assets/images/tp.png">
+  <div class="container-box" ref="containerRef" @scroll="handleScroll">
+    <!-- <ul>
+    <li v-for="item in 200" :key="item">{{ item }}</li>
+    <li v-if="loading">Loading...</li>
+  </ul> -->
+    <div ref="main">
+      <div v-for="(item, index) in userList" :key="item">
+        <div
+          v-if="index % 2 == 0"
+          class="content1"
+          style="background: linear-gradient(#f0f4fa, #f0f4fa, #f0f4fa)"
+        >
+          <div
+            class="icon"
+            style="
+              background-image: url('/src/assets/images/bj2.png');
+              background-size: 100% 100%;
+            "
+          >
+            <div class="content">
+              <img src="/src/assets/images/tp.png" />
+            </div>
+            <h1>{{ item.name }}</h1>
+            <button></button>
           </div>
-          <h1>《计算机导论》</h1>
-          <button></button>
-        </div>
-        <div class="icon1">
-          <div class="icon"><img src="/src/assets/images/kc1.png"></div>
-          <div class="icon"><img src="/src/assets/images/kc2.png"></div>
-          <div class="icon"><img src="/src/assets/images/kc3.png"></div>
-        </div>
-        <div class="txt">
-          <h1>&nbsp;&nbsp;课程简介</h1>
-          <div class="p">
-          <p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
-            论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div>
-          <div class="box">
-            <p style="font-size: 14px;color: #6B6B6B;">总学时 ：36小时&nbsp;</p>
-            <p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p>
-            <p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章&nbsp;</p>
-            <p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p>
+          <div class="icon1">
+            <div class="icon"><img src="/src/assets/images/kc1.png" /></div>
+            <div class="icon"><img src="/src/assets/images/kc2.png" /></div>
+            <div class="icon"><img src="/src/assets/images/kc3.png" /></div>
           </div>
-        </div>
-      </div>
-
-
-      <div class="content1">
-        <div class="txt">
-          <h1>&nbsp;&nbsp;课程简介</h1>
-          <div class="p">
-          <p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
-            论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div>
-          <div class="box">
-            <p style="font-size: 14px;">总学时 ：36小时</p>
-            <p style="font-size: 14px;">总学分 ：2.0分</p>
-            <p style="font-size: 14px;">章节数 ：10章</p>
-            <p style="font-size: 14px;">知识点总数 ：33个</p>
-          </div>
-        </div>
-        <div class="icon" style=" background-image: url('/src/assets/images/bj1.png'); ">
-          <div class="content">
-            <img src="/src/assets/images/tp.png">
+          <div class="txt">
+            <h1>&nbsp;&nbsp;课程简介</h1>
+            <!-- <div class="p"> -->
+            <div class="epils" style="color: #a6a6a6">
+              {{ item.description }}
+            </div>
+            <!-- <p style="color: #A6A6A6;">{{courseDescription | truncate}} </p> -->
+
+            <!-- </div> -->
+            ​
+            <!-- </div> -->
+
+            <div class="box" style="width: 100%;
+  height: 20%;
+  /* background-color: #3374ff; */
+  display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-around;
+   
+    /* background-color: #74a5ff; */
+    ">
+              <!-- <p style="font-size: 14px;color: #6B6B6B;">总学时 ：{{  item.totalHours }}小时</p>
+<p style="font-size: 14px;color: #6B6B6B;">总学分 ：{{item.credit}}分</p>
+<p style="font-size: 14px;color: #6B6B6B;">章节数 ：xxx章</p>
+<p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：xxx个</p> -->
+              <div
+                class="a"
+                style="margin-left: 0px; width: 62%; color: #6b6b6b"
+              >
+                总学时 ：{{ item.totalHours }}小时
+              </div>
+              <div class="a" style="margin-left: 8%; color: #6b6b6b">
+                总学分 ：{{ item.credit }}分
+              </div>
+              <div class="a" style="margin-left: 0px; color: #6b6b6b">
+                章节数 ：{{ item.totalchapter }}章
+              </div>
+              <div class="a" style="margin-left: 29%;color: #6b6b6b;padding-left: 4%;" >
+                ​ 知识点总数 ：{{ item.totalKnow }}个 ​
+              </div>
+              ​
+            </div>
+            ​
           </div>
-          <h1>《计算机导论》</h1>
-          <button></button>
-        </div>
-        <div class="icon1">
-          <div class="icon"><img src="/src/assets/images/kc1.png"></div>
-          <div class="icon"><img src="/src/assets/images/kc2.png"></div>
-          <div class="icon"><img src="/src/assets/images/kc3.png"></div>
         </div>
-      </div>
-
 
-      <div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);">
-        <div class="icon" style="  background-image: url('/src/assets/images/bj2.png');
-  background-size: 100% 100%;">
-          <div class="content">
-            <img src="/src/assets/images/tp.png">
-          </div>
-          <h1>《计算机导论》</h1>
-          <button></button>
-        </div>
-        <div class="icon1">
-          <div class="icon"> <img src="/src/assets/images/kc1.png"></div>
-          <div class="icon"><img src="/src/assets/images/kc2.png"></div>
-          <div class="icon"><img src="/src/assets/images/kc3.png"></div>
-        </div>
-        <div class="txt">
-          <h1>&nbsp;&nbsp;课程简介</h1>
-          <div class="p">
-          <p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
-            论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div>
-          <div class="box">
-            <p style="font-size: 14px;color: #6B6B6B;">总学时 ：36小时</p>
-            <p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p>
-            <p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p>
-            <p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p>
+        <div v-else class="content1">
+          <div class="txt">
+            <h1>&nbsp;&nbsp;课程简介</h1>
+            <!-- <div class="p"> -->
+            <div class="epils" style="color: #f0f4fa">
+              {{ item.description }}
+            </div>
+
+            <!-- </div> -->
+            <div class="box" style="width: 100%;
+  height: 20%;
+  /* background-color: #3374ff; */
+  display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-around;
+   
+    /* background-color: #74a5ff; */
+    ">
+               <div
+                class="a"
+                style="margin-left: 0px; width: 62%; color: aliceblue"
+              >
+                总学时 ：{{ item.totalHours }}小时
+              </div>
+              <div class="a" style="margin-left: 8%; color: aliceblue">
+                总学分 ：{{ item.credit }}分
+              </div>
+              <div class="a" style="margin-left: 0px; color: aliceblue">
+                章节数 ：{{ item.totalchapter }}章
+              </div>
+              <div class="a" style="margin-left: 29%;color: aliceblue;padding-left: 4%;" >
+                ​ 知识点总数 ：{{ item.totalKnow }}个 ​
+              </div>
+              <!-- <p style="font-size: 14px;">总学时 ：{{  item.totalHours }}小时</p>
+          <p style="font-size: 14px;">总学分 ：{{item.credit}}分</p>
+          <p style="font-size: 14px;">章节数 ：xxx章</p>
+          <p style="font-size: 14px;">知识点总数 ：xxx个</p> -->
+            </div>
           </div>
-        </div>
-      </div>
-
-
 
-      <div class="content1">
-        <div class="txt">
-          <h1>&nbsp;&nbsp;课程简介</h1>
-          <div class="p">
-          <p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
-            论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div>
-          <div class="box">
-            <!-- <p style="font-size: 14px;">总学时 ：36小时</p>{{userList.}} -->
-            <p style="font-size: 14px;">总学时 ：36小时</p>
-            <p style="font-size: 14px;">总学分 ：2.0分</p>
-            <p style="font-size: 14px;">章节数 ：10章</p>
-            <p style="font-size: 14px;">知识点总数 ：33个</p>
+          <div
+            class="icon"
+            style="background-image: url('/src/assets/images/bj1.png')"
+          >
+            <div class="content">
+              <img src="/src/assets/images/tp.png" />
+            </div>
+            <h1>{{ item.name }}</h1>
+            <button></button>
           </div>
-        </div>
-        <div class="icon" style=" background-image: url('/src/assets/images/bj1.png'); ">
-          <div class="content">
-            <img src="/src/assets/images/tp.png">
+          <div class="icon1">
+            <div class="icon"><img src="/src/assets/images/kc1.png" /></div>
+            <div class="icon"><img src="/src/assets/images/kc2.png" /></div>
+            <div class="icon"><img src="/src/assets/images/kc3.png" /></div>
           </div>
-          <!-- <h1>《计算机导论》 {{ userList.name }}</h1> -->
-          <button></button>
-        </div>
-        <div class="icon1">
-          <div class="icon"><img src="/src/assets/images/kc1.png"></div>
-          <div class="icon"><img src="/src/assets/images/kc2.png"></div>
-          <div class="icon"><img src="/src/assets/images/kc3.png"></div>
         </div>
       </div>
-      <div class="botto">
-        <button  
-
-  ref="hoverButton"  
-
-  @mouseover="startHoverTimer"  
-
-  @mouseout="clearHoverTimer"  
-
-  @click="handleClick"  
-
-  :disabled="isButtonDisabled"  
-
-  :content="buttonContent"  
-
->  
-
-  {{ buttonContent }}  
-
-</button>  
-
-<p v-if="showMessage">{{ message }}</p>
-      </div>
-    </el-scrollbar>
-    
+    </div>
+    <div class="con"></div>
+     <!-- 连接后端时可以去掉注释 -->
+    <div class="but" v-if="!noMoreData" @click="loadItems">
+      {{ buttonFlag ? '正在加载...' : '加载更多' }}
+     
+    </div>
+    <p v-else class="cont">数据全部加载完成</p>
+   
   </div>
 
   <!-- 底部 -->
+
   <div class="footer">
     <h3>软件工程专业</h3>
     <h1>教学一体化平台</h1>
-    <p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
+    <p>
+      关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp;
+      &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
+    </p>
+    <p style="font-size: 13px; margin-top: 70px">
+      黄淮学院版权所有@2023 湘豫CP备 19005950号-1
+      <br />
+      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com
     </p>
-    <p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br>
-      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p>
-  </div>
-  <div>
-    
   </div>
-  <!-- {{ userList }} -->
 </template>
-// @ts-expect-error
-<script lang="ts" >
-import { ref } from 'vue'
-import {  watchEffect, onMounted, onUnmounted } from 'vue'; 
-import { getUserInfo } from '@/api/user'
-const userList = ref<any>([])
-const getUserListEvent = async () => {
-  try {
-    const res = await getUserInfo()
-    userList.value = res
-    console.log(res);
-  } catch (error) {
-    console.log(error);
-  }
-}
-getUserListEvent()
-
-export default {  
-
-name: 'HoverButton',  
-
-setup() {  
-
-  const hoverTimer = ref(0);  
-
-  const hoverCount = ref(0);  
-
-  const buttonContent = ref('123进行开始');  
-
-  const showMessage = ref(false);  
-
-  const message = ref('');  
-
-  const isButtonDisabled = ref(false);  
-
-
-
-  // 悬停计时器函数  
-
-  const startHoverTimer = () => {  
-
-    if (hoverCount.value >= 3) return; // 如果已经悬停三次，不再启动计时器  
-
-    clearTimeout(hoverTimer.value); // 清除之前的计时器  
-
-    hoverTimer.value = setTimeout(() => {  
-
-      showMessage.value = true;  
-
-      message.value = '你好!';  
-
-      hideButton();  
-
-    }, 3000);  
-
-  };  
-
-
-
-  // 清除悬停计时器  
-
-  const clearHoverTimer = () => {  
-
-    clearTimeout(hoverTimer.value);  
-
-  };  
-
-
-
-  // 隐藏按钮一秒后显示  
-
-  const hideButton = () => {  
-
-    isButtonDisabled.value = true;  
-
-    setTimeout(() => {  
-
-      isButtonDisabled.value = false;  
-
-      hoverCount.value++;  
-
-      if (hoverCount.value === 3) {  
-
-        buttonContent.value = '加载更多';  
-
-      }  
-
-      showMessage.value = false;  
-
-    }, 1000);  
-
-  };  
-
 
+<script lang="ts" setup>
+// 连接后端时可以去掉注释
+import axios from 'axios'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { getPageCourses } from '@/api/user/crouse.js'
+import { autoResetRef } from '@vueuse/core'
+// export default{
+const containerRef = ref(null)
+// const items = ref([{
+//   id:1,
+//   title:'11111'
+// }])
+const date = ref({
+  page: 1,
+  pageSize: 3,
+})
+// const loading = ref(false)
+const page = ref(date.value.page)
+const main = ref<any>(null)
+const buttonColor = ref('red')
+const userList = ref<any>([])
+// let count = 0
+const showLoadMoreButton = ref(false)
+const noMoreData = ref(false)
+const isLoading = ref(false)
+const buttonFlag = ref(false)
+const loadItems = async () => {
+  // isLoading.value = true
 
-  // 点击事件处理  
-
-  const handleClick = () => {  
-
-    if (buttonContent.value === '加载更多') {  
-
-      buttonContent.value = '新的一次开始了';  
-
-      hoverCount.value = 0; // 重置悬停次数  
-
-      setTimeout(() => {  
-
-        buttonContent.value = '123进行开始';  
-
-      }, 1000); // 延迟一秒后回到初始内容  
-
-    }  
-
-  };  
-
-
-
-  // 组件挂载时添加事件监听器（如果需要的话）  
-
-  onMounted(() => {  
-
-    // 这里可以添加一些DOM操作，如果需要的话  
-
-  });  
-
-
-
-  // 组件卸载时清除计时器  
-
-  onUnmounted(() => {  
-
-    clearTimeout(hoverTimer.value);  
-
-  });  
-
-
-
-  // 监听hoverCount变化，以在悬停三次后改变按钮内容  
-
-  watchEffect(() => {  
-
-    if (hoverCount.value >= 3 && buttonContent.value !== '加载更多') {  
-
-      buttonContent.value = '加载更多';  
-
-    }  
-
-  });  
-
-
-
-  // 返回需要响应式的数据和方法  
-
-  return {  
-
-    hoverTimer,  
-
-    hoverCount,  
+  buttonFlag.value = true
 
-    buttonContent,  
+  const response = await getPageCourses(date.value)
+  userList.value = [...userList.value, ...response.data.content]
+  buttonFlag.value = false
+  if (response.data.totalcount === userList.value.length)
+    return (noMoreData.value = true)
+  console.log(userList.value, response.data.content)
+}
 
-    showMessage,  
 
-    message,  
 
-    isButtonDisabled,  
+const loadMore = () => {
+  
+  date.value.page = page.value++
+  
+  if (date.value.page <= 2) {
+    loadItems()
+  }
+}
+const handleScroll = () => {
+  const container: any = containerRef.value
+ 
+  console.log(
+    container.scrollTop,
+    container.clientHeight,
+    container.scrollHeight,
+  )
+
+  if (
+    container.scrollTop + container.clientHeight >=
+    container.scrollHeight - 1
+  ) {
+    console.log('到底了')
+    if (buttonFlag.value) {
+      
+      return alert('正在加载请勿重复滑动')
+    } else {
+      loadMore()
+    }
+
+   
+  }
+}
 
-    startHoverTimer,  
 
-    clearHoverTimer,  
+loadMore()
 
-    handleClick,  
+</script>
 
-  };  
 
-},  
 
-};  
+<style lang="scss" scoped>
+.container-box {
+  height: 700px;
+  overflow: auto;
+}
+.view-container {
+  // height: 100vh;
+  .container {
+    // width: $base-container-width;
+    width: 100%; //替换为你想要的宽度值
+    margin: 0 auto;
+  }
+}
+button {
+  padding: 10px 20px;
 
-</script>
+  font-size: 16px;
+}
 
-<style lang="scss" scoped>
+.epils {
+  width: 100%;
+  height: 270px;
+  line-height: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 9; /*行数*/
+  -webkit-box-orient: vertical;
+}
 * {
   margin: 0;
   padding: 0;
@@ -401,13 +334,12 @@ img {
 
 // 头
 .header {
-  width: 100%;
+  width: 98%;
+  margin: auto;
   height: 300px;
   background-image: url('/src/assets/images/top.png');
   background-size: 100% 100%;
   // background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
-
-
 }
 
 // 导航栏
@@ -422,8 +354,7 @@ img {
   width: 24%;
   height: 10%;
   margin-right: 20px;
-  // background-color: #6759ff; 
-
+  // background-color: #6759ff;
 }
 
 .header .nav1 ul li {
@@ -433,7 +364,7 @@ img {
   color: white;
   font-size: 12px;
   text-align: center;
-  // border-right: 1px solid #FFFFFF; 
+  // border-right: 1px solid #FFFFFF;
 }
 
 .header .nav2 {
@@ -444,7 +375,7 @@ img {
   height: 25%;
   margin-top: 30px;
   // margin-right: -260px;
-  // background-color: #6759ff; 
+  // background-color: #6759ff;
 }
 
 .header .nav2 ul li {
@@ -472,19 +403,19 @@ img {
   font-size: 50px;
   margin-top: 23px;
   font-weight: bolder;
-  color: #FFFFFF;
+  color: #ffffff;
   float: right;
-  margin-right: 173px // float: left;
-    // margin-left: 779px;
+  margin-right: 173px; // float: left;
+  // margin-left: 779px;
 }
 
 .header p {
   font-size: 15px;
-  margin-top: 102px;
+  margin-top: 10px;
   // font-weight:bolder;
-  color: #FFFFFF;
+  color: #ffffff;
   float: right;
-  margin-right: -175px;
+  margin-right: 200px;
 }
 
 .logo {
@@ -497,21 +428,22 @@ img {
 // 内容
 .content {
   width: 100%;
+  // height: 1500px;
   margin: auto;
 }
 
 .content1 {
   width: 100%;
-  height: 442px;
+  height: 500px;
   display: flex;
   margin: auto;
   margin-top: 60px;
   padding: 0 80px 0 80px;
-  background: linear-gradient(#98BBFF, #A9C6FF, #d5e1f6);
+  background: linear-gradient(#98bbff, #a9c6ff, #d5e1f6);
 }
 
 .content1 .txt {
-  width: 22%;
+  width: 32%;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -525,35 +457,45 @@ img {
   height: 30px;
   font-size: 16px;
   line-height: 30px;
-  border-left: 3px solid #3374FF;
+  border-left: 3px solid #3374ff;
   font-weight: bolder;
-  color: #3374FF;
+  color: #3374ff;
 }
-
 .content1 .txt .p {
+  font-size: 23px;
+  line-height: 25px;
   height: 178px;
-  // background-color: #3374FF;
-  line-height: 23px;
   width: 100%;
-  color: #FFFFFF;
+  color: #ffffff;
 }
-
 .content1 .txt p {
   font-size: 17px;
-  // height: 40px;
-  // background-color: #3374FF;
-  // line-height: 25px;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .content .txt .box {
   width: 100%;
-  height: 80px;
+  height: 30%;
+  // background-color: #3374ff;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  background-color: #98BBFF;
-  justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    // background-color: #74a5ff;
+    justify-content: space-around;
+}
+.content .txt .box .a {
+  width: 39%;
+  height: 30%;
+  text-align: center;
+  font-size:clamp(0.7rem, 0.489rem + 0.4vw, 2rem);
+  // float: left;
+  // margin-top: 10px;
+  // margin-left: 40px;
+  // background-color: #7F9EED;
+  // display: flex;
+  // flex-direction: row;
+  // flex-wrap: wrap;
+  // justify-content: space-between;
 }
 
 .content1 .icon {
@@ -568,14 +510,21 @@ img {
 .content1 .icon h1 {
   color: white;
   font-size: 24px;
+  width: 200px;
+  // background-color: #3374ff;
   font-weight: bolder;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1; /*行数*/
+  -webkit-box-orient: vertical;
   z-index: 999;
   margin-left: 60px;
   margin-top: 20px;
 }
 
 .content1 .icon button {
-  background-color: #FEC861;
+  background-color: #fec861;
   opacity: 0;
   width: 73px;
   height: 50px;
@@ -586,10 +535,9 @@ img {
 }
 
 .content1 .icon button:hover {
-  background-color: #FEC861;
+  background-color: #fec861;
   opacity: 0.2;
   border: none;
-
 }
 
 .content1 .icon .content {
@@ -598,7 +546,7 @@ img {
   margin: auto;
   border-radius: 15px 15px 15px 15px;
   margin-top: 35px;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
 }
 
 .content1 .icon .content img {
@@ -606,7 +554,6 @@ img {
   height: 95%;
   float: right;
   margin-top: 15px;
-
 }
 
 .content1 .icon1 {
@@ -624,7 +571,7 @@ img {
   margin-top: 20px;
   box-shadow: 3px 3px 15px rgb(173, 171, 171);
   // margin: auto;
-  background-color: #A4c3ff;
+  background-color: #a4c3ff;
 }
 
 .content1 .icon1 .icon .image {
@@ -643,7 +590,7 @@ img {
   float: left;
   margin-top: 30px;
   border-radius: 10px 10px 10px 0px;
-  background-color: #D9D9D9;
+  background-color: #d9d9d9;
 }
 
 // 尾部
@@ -662,17 +609,17 @@ img {
   text-align: center;
   font-size: 15px;
   padding-top: 40px;
-  color: #7F9EED;
+  color: #7f9eed;
   font-weight: bolder;
 }
 
 .footer h1 {
   width: 100%;
   // position: absolute;
-  font-family: "kaiti_gb2312";
+  font-family: 'kaiti_gb2312';
   margin-top: 10px;
   font-size: 25px;
-  color: #7F9EED;
+  color: #7f9eed;
   font-weight: bolder;
 }
 
@@ -680,29 +627,48 @@ img {
   width: 100%;
   height: 20px;
   // position: absolute;
-  font-family: "kaiti_gb2312";
+  font-family: 'kaiti_gb2312';
   margin-top: 25px;
   font-size: 17px;
-  color: #7F9EED;
-}
-.botto{
-  position: relative;
-    width: 148px;
-    height: 36px;
-    line-height: 34px;
-    text-align: center;
-    font-size: 16px;
-    border: 1px solid #4285f4;
-    border-radius: 1px;
-    color: #4285f4;
-    cursor: pointer;
-    margin: 0 auto;
+  color: #7f9eed;
+}
+.el-scrollbar__wrap {
+  padding: 0 0px;
+}
+.botto {
+  width: 20%;
+  height: 10%;
+  background-color: #7f9eed;
+}
+.botto:hover {
+  background-color: #d5e1f6;
+}
+.but {
+  width: 10%;
+  margin-top: 10px;
+  height: 4%;
+  margin: auto;
+  display: -webkit-box;
+  text-align: center;
+  line-height: 25px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1; /*行数*/
+  -webkit-box-orient: vertical;
+  color: #8aadf4;
+  border: 1.5px solid #8aadf4;
+  background-color: #f0f4fa;
+}
+.con {
+  width: 100%;
+  height: 5%;
+  // background-color: #74a5ff;
+}
+.cont {
+  width: 10%;
+  height: 5%;
+  color: #8aadf4;
+  margin: auto;
+  // background-color: #7f9eed;
 }
-button[disabled] {  
-
-opacity: 0.5;  
-
-cursor: not-allowed;  
-
-}  
 </style>
diff --git a/src/views/portal/knowledgePointLearning.vue b/src/views/portal/knowledgePointLearning.vue
index 8be7285..13cf959 100644
--- a/src/views/portal/knowledgePointLearning.vue
+++ b/src/views/portal/knowledgePointLearning.vue
@@ -39,20 +39,8 @@
     <div class="sidebar">
       <div class="sidebar-header">
         <div class="sidebar-header-imag">
-          <div class="sidebar-header-imag1">
-            <img
-              src="/src/assets/images/gd (3).png"
-              width="100%"
-              height="100%"
-            />
-          </div>
-          <div class="sidebar-header-imag2">
-            <img
-              src="/src/assets/images/sjx(1).png"
-              width="100%"
-              height="100%"
-            />
-          </div>
+          <div class="sidebar-header-imag1"><img src="/src/assets/images/gd (3).png" width="100%" height="100%"></div>
+          <div class="sidebar-header-imag2"><img src="/src/assets/images/sjx(1).png" width="100%" height="100%"></div>
         </div>
         <h1>知识点</h1>
         <p>共发布225个</p>
@@ -63,17 +51,11 @@
       <div class="content">
         <div class="txt">
           <div class="txt1">联试题数：233 &nbsp;&nbsp;&nbsp;关联学习数：22</div>
-          <div class="imag">
-            <img
-              src="/src/assets/images/sjx(1).png"
-              width="100%"
-              height="100%"
-            />
-          </div>
+          <div class="imag"><img src="/src/assets/images/sjx(1).png" width="100%" height="100%"></div>
         </div>
       </div>
       <div class="lina">
-        <e-charts style="height: 260px" id="lina" />
+        <e-charts style="height: 260px;" id="lina" />
       </div>
       <!-- <div id="staff_all_orderCount" style="width: 300px;height:300px;"></div> -->
       <!-- <e-chars class="lina" ：option="option"/> -->
@@ -82,20 +64,16 @@
       <div class="completion">
         <!-- <div class="echates-title">知识点掌握百分比</div> -->
         <div class="box">
-          <div id="liquidfill" style="width: 65%; height: 65%"></div>
+          <div id="liquidfill" style="width: 65%; height: 65%; "></div>
           <div class="percentage">
-            <h4>
-              平均完成率:
-              <p>80%</p>
+            <h4>平均完成率:<p>80%</p>
             </h4>
           </div>
         </div>
         <div class="box">
-          <div id="liquidfil" style="width: 65%; height: 65%"></div>
+          <div id="liquidfil" style="width: 65%; height: 65%; "></div>
           <div class="percentage">
-            <h4>
-              平均完成率:
-              <p>60%</p>
+            <h4>平均完成率:<p>60%</p>
             </h4>
           </div>
         </div>
@@ -134,11 +112,11 @@
           <h1>49</h1>
           <p>80% ~ 100%</p>
         </div>
-        <div class="libox" style="border-left: 2px solid #74a5ff">
+        <div class="libox" style="border-left: 2px solid #74a5ff;">
           <h1>3</h1>
           <p>60% ~ 79%</p>
         </div>
-        <div class="libox" style="border-left: 2px solid #74a5ff">
+        <div class="libox" style="border-left: 2px solid #74a5ff;">
           <h1>4</h1>
           <p>59%以下</p>
         </div>
@@ -150,23 +128,22 @@
           <li>关联资源数最多：法律责任</li>
           <li>掌握最欠缺：基本知识方法</li>
         </div>
+        <div class="lin"></div>
       </div>
+
     </div>
   </div>
 
+
+
   <!-- 底部 -->
   <div class="footer">
     <h3>软件工程专业</h3>
     <h1>教学一体化平台</h1>
-    <p>
-      关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp;
-      &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
-    </p>
-    <p style="font-size: 13px; margin-top: 70px">
-      黄淮学院版权所有@2023 湘豫CP备 19005950号-1
-      <br />
-      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com
+    <p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
     </p>
+    <p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br>
+      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p>
   </div>
   <div></div>
 </template>
@@ -174,34 +151,34 @@
 <script lang="ts" setup>
 // import axios from 'axios';
 import { ref, onMounted, markRaw } from 'vue'
-import * as echarts from 'echarts'
+import * as echarts from 'echarts';
 
 import 'echarts-liquidfill'
 // var ROOT_PATH = 'https://echarts.apache.org/examples';
 // type EChartsOption = echarts.EChartsOption;
-let option = null
+var option = null
 // 获取dom元素 要在dom渲染时候操作
 onMounted(() => {
   const dom = document.getElementById('main')
   // 获取dom元素之后 进行初始化一个echarts实例对象
-  let myChart = echarts.init(dom)
+  var myChart = echarts.init(dom);
   console.log(dom, 'dom')
   // 加载数据前打开loading
-  myChart.showLoading()
+  myChart.showLoading();
   // 读取本地json数据
   fetch('../../../public/nodeList.json').then((res) => {
-    res.json().then((graph) => {
-      console.log(graph)
-      myChart.hideLoading()
+    res.json().then(graph => {
+      console.log(graph);
+      myChart.hideLoading();
       // 配置node links 关系 样式
       option = {
         tooltip: {},
         legend: [
           {
             data: graph.categories.map(function (a: { name: string }) {
-              return a.name
-            }),
-          },
+              return a.name;
+            })
+          }
         ],
 
         series: [
@@ -216,35 +193,44 @@ onMounted(() => {
             label: {
               show: true,
               position: 'right',
-              formatter: '{b}',
+              formatter: '{b}'
             },
             labelLayout: {
-              hideOverlap: true,
+              hideOverlap: true
             },
             scaleLimit: {
               min: 0.4,
-              max: 2,
+              max: 2
             },
             lineStyle: {
               color: 'source',
-              curveness: 0.3,
-            },
-          },
-        ],
-      }
+              curveness: 0.3
+            }
+          }
+        ]
+      };
       // 调用echarts实例方法渲染
-      myChart.setOption(option)
+      myChart.setOption(option);
     })
+
   })
 
+
   // option && myChart.setOption(option);
 })
 
+
+
+
+
+
+
+
 onMounted(() => {
   const chartInstance: any = ref(null)
   const updateChart = () => {
     chartInstance.value = markRaw(
-      echarts.init(document?.getElementById(`liquidfill`)),
+      echarts.init(document?.getElementById(`liquidfill`,)),
     )
     const option = {
       series: [
@@ -275,7 +261,7 @@ onMounted(() => {
           backgroundStyle: {
             color: 'rgba(5, 108, 252, 0.1)',
             borderWidth: 2,
-            borderColor: '#0052FF',
+            borderColor: '#5590FC',
           },
 
           outline: {
@@ -288,7 +274,7 @@ onMounted(() => {
             distance: 50,
             color: '#05FCF6',
             fontSize: '24px',
-            insideColor: '#0052FF ',
+            insideColor: '#05FCF6 ',
           },
         },
       ],
@@ -303,52 +289,69 @@ onMounted(() => {
 onMounted(() => {
   const dom = document.getElementById('lina')
   // 获取dom元素之后 进行初始化一个echarts实例对象
-  let myChart = echarts.init(dom)
+  var myChart = echarts.init(dom);
   console.log(dom, 'dom')
   // 加载数据前打开loading
-  myChart.showLoading()
+  myChart.showLoading();
   // 读取本地json数据
   fetch('../../../public/nodeList.json').then((res) => {
-    res.json().then((graph) => {
-      console.log(graph)
-      myChart.hideLoading()
+    res.json().then(graph => {
+      console.log(graph);
+      myChart.hideLoading();
       // 配置node links 关系 样式
       option = {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['记忆', '理解', '应用', '分析', '评价'],
+          data: ['记忆', '理解', '应用', '分析', '评价'], 
+          axisLine: {
+      lineStyle: {
+        color: '#5470C6'   // 修改 X 轴颜色
+      }
+    }
         },
         yAxis: {
           type: 'value',
+          axisLine: {
+            lineStyle: {
+                color: '#5470C6' // 修改Y轴颜色
+            }
+        },
           // min:'700',
           splitLine: {
-            show: false,
-          },
+            show: false
+            
+          }
+          
         },
         series: [
           {
             data: [820, 932, 901, 934, 1290],
             type: 'line',
-            areaStyle: {},
-          },
-        ],
-      }
+            areaStyle: {
+              color: '#76A6FF',
+        opacity: 0.5
+            },
+          }
+        ]
+      };
 
       // 调用echarts实例方法渲染
-      myChart.setOption(option)
+      myChart.setOption(option);
     })
+
   })
 
   // option && myChart.setOption(option);
 })
 
+
 // 水波纹
 onMounted(() => {
   const chartInstance: any = ref(null)
   const updateChart = () => {
     chartInstance.value = markRaw(
-      echarts.init(document?.getElementById(`liquidfil`)),
+      echarts.init(document?.getElementById(`liquidfil`,)),
     )
     const option = {
       series: [
@@ -379,7 +382,7 @@ onMounted(() => {
           backgroundStyle: {
             color: 'rgba(5, 108, 252, 0.1)',
             borderWidth: 2,
-            borderColor: '#0052FF',
+            borderColor: '#5590FC',
           },
 
           outline: {
@@ -392,7 +395,7 @@ onMounted(() => {
             distance: 50,
             color: '#05FCF6',
             fontSize: '24px',
-            insideColor: '#0052FF ',
+            insideColor: '#1583F2 ',
           },
         },
       ],
@@ -425,6 +428,7 @@ onMounted(() => {
 * {
   margin: 0;
   padding: 0;
+
 }
 
 ul {
@@ -457,6 +461,8 @@ img {
   background-image: url('/src/assets/images/top.png');
   background-size: 100% 100%;
   // background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
+
+
 }
 
 // 导航栏
@@ -471,7 +477,8 @@ img {
   width: 24%;
   height: 10%;
   margin-right: 20px;
-  // background-color: #6759ff;
+  // background-color: #6759ff; 
+
 }
 
 .header .nav1 ul li {
@@ -481,7 +488,7 @@ img {
   color: white;
   font-size: 12px;
   text-align: center;
-  // border-right: 1px solid #FFFFFF;
+  // border-right: 1px solid #FFFFFF; 
 }
 
 .header .nav2 {
@@ -492,7 +499,7 @@ img {
   height: 25%;
   margin-top: 30px;
   // margin-right: -260px;
-  // background-color: #6759ff;
+  // background-color: #6759ff; 
 }
 
 .header .nav2 ul li {
@@ -520,17 +527,17 @@ img {
   font-size: 50px;
   margin-top: 23px;
   font-weight: bolder;
-  color: #ffffff;
+  color: #FFFFFF;
   float: right;
-  margin-right: 173px; // float: left;
-  // margin-left: 779px;
+  margin-right: 173px // float: left;
+    // margin-left: 779px;
 }
 
 .header p {
   font-size: 15px;
   margin-top: 102px;
   // font-weight:bolder;
-  color: #ffffff;
+  color: #FFFFFF;
   float: right;
   margin-right: -175px;
 }
@@ -551,13 +558,13 @@ img {
 }
 
 .subnav h1 {
-  border-bottom: 4px solid #0052ff;
+  border-bottom: 4px solid #0052FF;
   font-size: 20px;
   width: 10%;
   height: 35px;
   margin: auto;
   font-weight: bolder;
-  color: #0052ff;
+  color: #0052FF;
   text-align: center;
 }
 
@@ -571,6 +578,7 @@ img {
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-around;
+
 }
 
 .chart {
@@ -597,8 +605,8 @@ img {
 .sidebar .sidebar-header {
   width: 100%;
   height: 7%;
-  background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
-  // transform: perspective(3em) rotateY(-6deg);
+  background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
+  // transform: perspective(3em) rotateY(-6deg);       
 }
 
 .sidebar .sidebar-header-imag {
@@ -633,7 +641,7 @@ img {
   font-size: 16px;
   line-height: 30px;
   // background-color: #728cc4;
-  // transform: perspective(3em) rotateY(-6deg);
+  // transform: perspective(3em) rotateY(-6deg);       
 }
 
 .sidebar .sidebar-header p {
@@ -645,7 +653,7 @@ img {
   font-size: 13px;
   line-height: 30px;
   // background-color: #728cc4;
-  // transform: perspective(3em) rotateY(-6deg);
+  // transform: perspective(3em) rotateY(-6deg);       
 }
 
 .sidebar .sidebar-header a {
@@ -657,26 +665,28 @@ img {
   font-size: 13px;
   line-height: 30px;
   // background-color: #728cc4;
-  // transform: perspective(3em) rotateY(-6deg);
+  // transform: perspective(3em) rotateY(-6deg);       
 }
 
 .sidebar .sidebar-header-line {
   width: 60%;
-  height: 5%;
+  height: 6%;
   border-radius: 2px 2px 2px 2px;
   background-color: #74a5ff;
   float: left;
-  margin-top: 10px;
-  box-shadow: 1.5px -2px #f0f4fa;
+  margin-top: 1.5%;
+  // box-shadow: 1.5px -2px #F0F4FA;
+  box-shadow: 0px -2px 3px 2px #F0F4FA;
   // box-shadow:  1.5px 1px  #F0F4FA;
-  // transform: perspective(3em) rotateY(-6deg);
+  // transform: perspective(3em) rotateY(-6deg);       
 }
 
 .sidebar .content {
   width: 100%;
   height: 6%;
-  background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
+  background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
   margin-top: 10px;
+
 }
 
 .sidebar .content .txt {
@@ -687,6 +697,7 @@ img {
   justify-content: space-between;
   flex-wrap: nowrap;
   display: flex;
+
 }
 
 .sidebar .content .txt .imag {
@@ -699,8 +710,9 @@ img {
   height: 5%;
   font-size: 14px;
   margin-left: 4px;
-  color: #ffffff;
+  color: #FFFFFF;
   margin-top: 15px;
+
 }
 
 .sidebar .lina {
@@ -760,7 +772,7 @@ img {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-evenly;
-  color: #f0f4fa;
+  color: #F0F4FA;
   font-weight: bold;
   // background-color: #5582dc;
 }
@@ -770,20 +782,17 @@ img {
   height: 90%;
   font-size: 15px;
   line-height: 20px;
-  color: #1470ea;
+  color: #5470C6;
   // background-color: #b3c8f2;
 }
 
+
 // 流动效果
 .header1 {
   position: relative;
   text-align: center;
   border-radius: 100%;
-  background: linear-gradient(
-    60deg,
-    rgba(84, 58, 183, 1) 0%,
-    rgba(0, 172, 193, 1) 100%
-  );
+  background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
   // color: rgb(207, 59, 59);
 }
 
@@ -820,12 +829,12 @@ img {
 //      background-color: white;
 //  }
 
-.parallax > use {
+.parallax>use {
   /* 使use元素执行move-forever动画 */
-  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
 }
 
-.parallax > use:nth-child(1) {
+.parallax>use:nth-child(1) {
   /* 延迟2秒启动动画  */
 
   /* 设置动画持续时间为7秒 */
@@ -836,7 +845,7 @@ img {
   // animation-delay: -2s;
 }
 
-.parallax > use:nth-child(2) {
+.parallax>use:nth-child(2) {
   // background-color: #0052FF;
   animation-delay: -3s;
   animation-duration: 10s;
@@ -879,6 +888,7 @@ img {
   // }
 }
 
+
 // 知识点
 .knowledge {
   width: 100%;
@@ -886,7 +896,7 @@ img {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  background-color: #a1c1ff;
+  background-color: #A1C1FF;
   // background-color: #A4c3ff;
   padding-top: 20px;
 }
@@ -902,7 +912,7 @@ img {
 .knowledge .libox h1 {
   width: 100%;
   height: 50%;
-  color: #f0f4fa;
+  color: #F0F4FA;
   line-height: 50px;
   text-align: center;
   margin: auto;
@@ -914,7 +924,7 @@ img {
 .knowledge .libox p {
   width: 100%;
   height: 50%;
-  color: #f0f4fa;
+  color: #F0F4FA;
   line-height: 50px;
   text-align: center;
   margin: auto;
@@ -927,9 +937,10 @@ img {
 .box1 {
   width: 100%;
   height: 147px;
-  background-color: #a1c1ff;
+  background-color: #A1C1FF;
   // height: 100%;
 }
+
 .method {
   width: 90%;
   height: 85%;
@@ -940,17 +951,28 @@ img {
   // background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
 }
 
+
 .method li {
   width: 90%;
   height: 20%;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: bold;
   line-height: 35px;
   margin-left: 10px;
   padding-top: 10px;
-  color: #f0f4fa;
+  color: #F0F4FA;
   // background-color: #74a5ff;
 }
+.box1 .lin{
+width: 60%;
+  height: 3%;
+  border-radius: 2px 2px 2px 2px;
+  background-color: #74a5ff;
+  margin: auto;
+  margin-top: 5.5%;
+  // box-shadow: 1.5px -2px #F0F4FA;
+  box-shadow: 0px -2px 3px 2px #F0F4FA;
+}
 
 // 尾部
 .footer {
@@ -968,17 +990,17 @@ img {
   text-align: center;
   font-size: 15px;
   padding-top: 40px;
-  color: #7f9eed;
+  color: #7F9EED;
   font-weight: bolder;
 }
 
 .footer h1 {
   width: 100%;
   // position: absolute;
-  font-family: 'kaiti_gb2312';
+  font-family: "kaiti_gb2312";
   margin-top: 10px;
   font-size: 25px;
-  color: #7f9eed;
+  color: #7F9EED;
   font-weight: bolder;
 }
 
@@ -986,10 +1008,10 @@ img {
   width: 100%;
   height: 20px;
   // position: absolute;
-  font-family: 'kaiti_gb2312';
+  font-family: "kaiti_gb2312";
   margin-top: 25px;
   font-size: 17px;
-  color: #7f9eed;
+  color: #7F9EED;
 }
 
 .echates-title {
@@ -998,8 +1020,9 @@ img {
   font-weight: 700;
   margin-bottom: 10px;
 }
+
 .bo {
   width: 100%;
-  background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
+  background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
 }
 </style>