diff --git a/src/Layout/index.vue b/src/Layout/index.vue
index bf87edf..cd260ca 100644
--- a/src/Layout/index.vue
+++ b/src/Layout/index.vue
@@ -63,7 +63,7 @@ onMounted(() => {
   // 页面滚动窗口监听事件
   window.onscroll = function () {
     let high = document.documentElement.scrollTop || document.body.scrollTop //兼容各浏览器
-    console.log(high,totop.value.offsetTop)
+    // console.log(high,totop.value.offsetTop)
 
     if (flog.value) {
       num =  num - 20
@@ -94,20 +94,20 @@ onMounted(() => {
 
 .gotop {
   display: none;
-  width: 45px;
-  height: 45px;
+  width: 45PX;
+  height: 45PX;
   z-index: 999;
   position: fixed;
   bottom: 50px;
   right: 50px;
   background-image: url('../assets/images/jinglingtu.png');
-  background-position: -264px -78px;
+  background-position: -264PX -78PX;
   transition: top 0.2s linear;
   animation: show 0.5s ease-in-out;
 }
 .gotop:hover {
   transition: background-image 0.2s ease-in;
-  background-position: -215px -78px;
+  background-position: -215PX -78PX;
 }
 .bian {
   animation: bian 0.1s ease-in-out;
@@ -128,10 +128,10 @@ onMounted(() => {
 }
 @keyframes bian {
   0% {
-    background-position: -6px -145px;
+    background-position: -6PX -145PX;
   }
   100% {
-    background-position: -316px -78px;
+    background-position: -316PX -78PX;
   }
 }
 // @keyframes fei {
diff --git a/src/Layout/tabbar/index.vue b/src/Layout/tabbar/index.vue
index 11df34e..c743dfb 100644
--- a/src/Layout/tabbar/index.vue
+++ b/src/Layout/tabbar/index.vue
@@ -14,10 +14,10 @@
           </li>
         </ul>
         <div class="entry">
-          <div>企业入口</div>
+          <!-- <div>企业入口</div>
           <div>教师入口</div>
-          <div>学生入口</div>
-          <div>毕业生入口</div>
+          <div>学生入口</div> -->
+          <div>登录注册入口</div>
         </div>
       </div>
     </div>
diff --git a/src/assets/images/crous-card.png b/src/assets/images/crous-card.png
new file mode 100644
index 0000000..8625e17
Binary files /dev/null and b/src/assets/images/crous-card.png differ
diff --git a/src/router/module/constRouter/index.ts b/src/router/module/constRouter/index.ts
index 0c653a4..a2c9ec8 100644
--- a/src/router/module/constRouter/index.ts
+++ b/src/router/module/constRouter/index.ts
@@ -16,7 +16,7 @@ export const constRouter: any = [
         component: () => import('@/views/home/index.vue'),
         meta: {
           icon: '',
-          title: '学院首页',
+          title: '首页',
           hidden: false,
         },
         children: [
@@ -26,19 +26,19 @@ export const constRouter: any = [
             component: () => import('@/views/home/test.vue'),
             meta: {
               icon: '',
-              title: '学院首页',
+              title: '首页',
               hidden: false,
             },
           },
         ],
       },
       {
-        path: '/professionalProfile', // 专业概括
+        path: '/professionalProfile', // 课程
         component: () => import('@/views/professionalProfile/index.vue'),
         name: 'ProfessionalProfile',
         meta: {
           icon: '',
-          title: '专业概括',
+          title: '课程',
           hidden: false,
         },
       },
@@ -48,7 +48,7 @@ export const constRouter: any = [
         name: 'PedagogicalReform',
         meta: {
           icon: '',
-          title: '教学改革',
+          title: '资讯',
           hidden: false,
         },
       },
@@ -58,85 +58,85 @@ export const constRouter: any = [
         name: 'CcientificResearch',
         meta: {
           icon: '',
-          title: '科学研究',
-          hidden: false,
-        },
-      },
-      {
-        path: '/talentDevelopment', // 人才培养
-        component: () => import('@/views/talentDevelopment/index.vue'),
-        name: 'TalentDevelopment',
-        meta: {
-          icon: '',
-          title: '人才培养',
-          hidden: false,
-        },
-      },
-      {
-        path: '/presentationAchievements', // 成果展示
-        component: () => import('@/views/presentationAchievements/index.vue'),
-        name: 'PresentationAchievements',
-        meta: {
-          icon: '',
-          title: '成果展示',
-          hidden: false,
-        },
-        redirect: '/presentationAchievements/dev',
-        children: [
-          {
-            path: 'dev',
-            component: () =>
-              import('@/views/presentationAchievements/dev.vue'),
-            name: 'Dev',
-            meta: {
-              icon: '',
-              title: 'dev',
-              hidden: false,
-            },
-          },
-          {
-            path: 'test',
-            component: () =>
-              import('@/views/presentationAchievements/test.vue'),
-            name: 'Test',
-            meta: {
-              icon: '',
-              title: 'test',
-              hidden: false,
-            },
-          },
-        ],
-      },
-      {
-        path: '/productFusion', // 产品融合
-        component: () => import('@/views/productFusion/index.vue'),
-        name: 'ProductFusion',
-        meta: {
-          icon: '',
-          title: '产品融合',
-          hidden: false,
-        },
-      },
-      {
-        path: '/dailyTeaching', // 日常教学
-        component: () => import('@/views/dailyTeaching/index.vue'),
-        name: 'DailyTeaching',
-        meta: {
-          icon: '',
-          title: '日常教学',
-          hidden: false,
-        },
-      },
-      {
-        path: '/outstandingStudents', // 优秀学生
-        component: () => import('@/views/outstandingStudents/index.vue'),
-        name: 'OutstandingStudents',
-        meta: {
-          icon: '',
-          title: '优秀学生',
+          title: '关于我们',
           hidden: false,
         },
       },
+      // {
+      //   path: '/talentDevelopment', // 人才培养
+      //   component: () => import('@/views/talentDevelopment/index.vue'),
+      //   name: 'TalentDevelopment',
+      //   meta: {
+      //     icon: '',
+      //     title: '人才培养',
+      //     hidden: false,
+      //   },
+      // },
+      // {
+      //   path: '/presentationAchievements', // 成果展示
+      //   component: () => import('@/views/presentationAchievements/index.vue'),
+      //   name: 'PresentationAchievements',
+      //   meta: {
+      //     icon: '',
+      //     title: '成果展示',
+      //     hidden: false,
+      //   },
+      //   redirect: '/presentationAchievements/dev',
+      //   children: [
+      //     {
+      //       path: 'dev',
+      //       component: () =>
+      //         import('@/views/presentationAchievements/dev.vue'),
+      //       name: 'Dev',
+      //       meta: {
+      //         icon: '',
+      //         title: 'dev',
+      //         hidden: false,
+      //       },
+      //     },
+      //     {
+      //       path: 'test',
+      //       component: () =>
+      //         import('@/views/presentationAchievements/test.vue'),
+      //       name: 'Test',
+      //       meta: {
+      //         icon: '',
+      //         title: 'test',
+      //         hidden: false,
+      //       },
+      //     },
+      //   ],
+      // },
+      // {
+      //   path: '/productFusion', // 产品融合
+      //   component: () => import('@/views/productFusion/index.vue'),
+      //   name: 'ProductFusion',
+      //   meta: {
+      //     icon: '',
+      //     title: '产品融合',
+      //     hidden: false,
+      //   },
+      // },
+      // {
+      //   path: '/dailyTeaching', // 日常教学
+      //   component: () => import('@/views/dailyTeaching/index.vue'),
+      //   name: 'DailyTeaching',
+      //   meta: {
+      //     icon: '',
+      //     title: '日常教学',
+      //     hidden: false,
+      //   },
+      // },
+      // {
+      //   path: '/outstandingStudents', // 优秀学生
+      //   component: () => import('@/views/outstandingStudents/index.vue'),
+      //   name: 'OutstandingStudents',
+      //   meta: {
+      //     icon: '',
+      //     title: '优秀学生',
+      //     hidden: false,
+      //   },
+      // },
     ],
   },
   {
diff --git a/src/views/home/components/Graph.vue b/src/views/home/components/Graph.vue
new file mode 100644
index 0000000..64e98e6
--- /dev/null
+++ b/src/views/home/components/Graph.vue
@@ -0,0 +1,155 @@
+<template>
+    <div :id="'3d-graph' +  props.index"></div>
+</template>
+
+<script lang="ts" setup>
+// import { useRouter } from 'vue-router'
+import { onMounted, ref,reactive } from 'vue'
+import ForceGraph3D from '3d-force-graph'
+//@ts-ignore
+import { CSS2DRenderer, CSS2DObject,} from 'three/examples/jsm/renderers/CSS2DRenderer.js'
+//@ts-ignore
+import SpriteText  from '../../professionalProfile/spritetext'
+// const $router = useRouter()
+// const jsonData = ref(null)
+let Graph  = reactive({})
+const props = defineProps({
+  width:{
+    type:Number,
+    default:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+  },
+  height:{
+    type:Number,
+    default:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
+  },
+  index:{
+    type:Number,
+    required:true
+  }
+})
+const dom = ref(null)
+onMounted(() => {
+   
+    
+   Graph = ForceGraph3D({
+    extraRenderers: [new CSS2DRenderer()],
+  })(document.getElementById('3d-graph' + props.index) as HTMLElement)
+    .jsonUrl('../../../public/data.json')
+    // .nodeAutoColorBy('group')
+    .nodeThreeObject((node: any) => {
+      const nodeEl = document.createElement('div')
+      nodeEl.textContent = node.label
+      nodeEl.style.color = '#333333'
+      nodeEl.style.borderRadius = '50%'
+      // console.log(node, 111, Graph.graphData().nodes)
+      return new CSS2DObject(nodeEl)
+    })
+    .linkLabel((link:any) => link.label) // 指定链接上显示的文字属性
+    .linkWidth(0.8)
+    .linkHoverPrecision(0.5) // 设置链接文字的显示精度，这里设置为一个足够小的值
+    .linkColor(() => '#dd92fd') // 设置连接线颜色为红色
+    .backgroundColor('#f5f6fd')
+    .width(props.width)
+    .height(props.height)
+    .linkThreeObjectExtend(true)
+    .nodeColor((node: any) => {
+      return node.color
+    })
+    .nodeRelSize(7) // 设置节点的相对大小为4
+    .nodeResolution(20)
+    .linkDirectionalArrowLength(3) // 设置连接线箭头长度为3
+    .linkDirectionalArrowRelPos(1) // 设置连接线箭头位置为连接线末端
+    .nodeThreeObjectExtend(true)
+    .onNodeClick((node: any) => {
+      // Aim at node from outside it
+      // 目标距离
+      const targetDistance = 200 // 设定一个一般的距离
+
+      // 计算相机新位置
+      const distRatio = 1 + targetDistance / Math.hypot(node.x, node.y, node.z)
+      const newPos = {
+        x: node.x * distRatio,
+        y: node.y * distRatio,
+        z: node.z * distRatio,
+      }
+
+      // 如果节点位于原点，则特殊处理
+      if (node.x === 0 && node.y === 0 && node.z === 0) {
+        newPos.z = targetDistance // 将 z 轴设定为目标距离
+      }
+
+      // 移动相机至新位置
+      //@ts-ignore
+      Graph.cameraPosition(
+        newPos, // 新位置
+        node, // 视角焦点
+        3000, // 过渡时长
+      )
+
+      // 获取图表数据
+      //@ts-ignore
+      const graphData = Graph.graphData()
+
+      // 遍历连接线，检查每条连接线的起点和终点是否与当前点击的节点相关联
+      graphData.links.forEach((link: any) => {
+        // console.log(link);
+
+        if (link.source.id === node.id || link.target.id === node.id) {
+          setLabel()
+          // 将与当前点击节点相关联的连接线颜色设置为红色
+          // link.color = '#FF0000' // 设置连接线颜色为红色
+          //@ts-ignore
+          Graph.linkColor((item: any): any => {
+            if (item.source.id === node.id || item.target.id === node.id) {
+              return 'red'
+            } else {
+              return '#dd92fd'
+            }
+            
+          })
+        } else {
+          // Graph.linkColor(() => '#a4c7fe') // 设置连接线颜色为红色
+        }
+      })
+
+      // 更新图形数据，以应用颜色变化
+      //@ts-ignore
+      Graph.graphData(graphData)
+    })
+   dom.value = document.querySelector('canvas') as any
+})
+
+const setLabel = () => {
+  //@ts-ignore
+  Graph.linkThreeObject((link:any) => {
+          // extend link with text sprite
+          const sprite = new SpriteText(`${link.label}`);
+          sprite.color = '#ccc';
+          sprite.textHeight = 1.5;
+          return sprite;
+        })
+        //@ts-ignore
+        Graph.linkPositionUpdate((sprite, { start, end }) => {
+          //@ts-ignore
+          const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
+            //@ts-ignore
+            [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
+          })));
+
+          // Position sprite
+          Object.assign(sprite.position, middlePos);
+        });
+        //@ts-ignore
+        Graph.d3Force('charge').strength(-120);
+}
+// const goToEditAtlas = () => {
+//   console.log(jsonData.value)
+
+//   $router.push({ name: 'EditAtlas', params: { id: 123 } })
+// }
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 1f53d04..5ba0a65 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,74 +1,152 @@
 <template>
   <div class="view-container">
-    <div class="banner"></div>
-    <div class="container">
-      <div class="top-video-box">
-        <div class="video">
-          <video  id="video" width="100%" height="100%" controls>
-            <source src="../../assets//videos/920b6703c5f95b9ff774f27abf5d4f29.mp4" type="video/mp4" />
-           您的浏览器不支持视频播放
-          </video>
+    <div class="banner">
+      <div class="title">课图——开源智慧课程管理系统，首次开源</div>
+    </div>
+    <div class="loop" v-for="item in 5" :key="item">
+    <div class="main" v-if="item % 2 != 0" >
+      <!-- <div class="course-list">111</div> -->
+      <div class="container">
+        <div class="left-group">
+          <div class="group"><Graph  :width="848" :height="470" :index="item"/></div>
+        </div>
+        <div class="right-info">
+          <div class="title">课程简介</div>
+          <div class="info">
+            课程名称：课程与教学理论前沿问题研究 课程类别：公共专业选修课
+            适用专业：课程与教学论专业（含学科课程与教学论）
+            课程目标：本课程对每个专题的讲座内容进行系统整理，形成了由讲座概要、专题内容、拓展阅读文献、教学课件和教学视频等组成的教学内容体系。学生可以根据自己的学习兴趣，由浅入深地进行拓展学习。通过学术讲座、学术沙龙、学术讨论等形式，使学生掌握较扎实的课程与教学的基础理论知识和其他相关知识，树立先进的教育观念；了解国内外教育改革实践；了解国内外课程与教学研究的历史、现状和动向，形成较强的独立从事课程与教学研究能力；对现实的课程与教学问题具有清晰的认识，能在现代教育观念指导下投入我国基础教育课程改革的实践。
+            主
+          </div>
+          <div class="crous-content">
+            <ul>
+              <li>总学时：10学时</li>
+              <li>章节数：10章</li>
+              <li>总学分：2.0分</li>
+              <li>知识点总分：33个</li>
+            </ul>
+          </div>
         </div>
-        <div class="info-list"></div>
       </div>
-      <div class="title-container">
-        <div class="title">课程体系</div>
-        <div class="description">
-          全面落实立德树人根本任务，CDIO工程教育理念
+    </div>
+    <div class="main" v-else style="background: linear-gradient(to right, #AECAFF 60%, #5792FF);">
+      <!-- <div class="course-list">111</div> -->
+      <div class="container">
+      
+        <div class="right-info">
+          <div class="title">课程简介</div>
+          <div class="info">
+            课程名称：课程与教学理论前沿问题研究 课程类别：公共专业选修课
+            适用专业：课程与教学论专业（含学科课程与教学论）
+            课程目标：本课程对每个专题的讲座内容进行系统整理，形成了由讲座概要、专题内容、拓展阅读文献、教学课件和教学视频等组成的教学内容体系。学生可以根据自己的学习兴趣，由浅入深地进行拓展学习。通过学术讲座、学术沙龙、学术讨论等形式，使学生掌握较扎实的课程与教学的基础理论知识和其他相关知识，树立先进的教育观念；了解国内外教育改革实践；了解国内外课程与教学研究的历史、现状和动向，形成较强的独立从事课程与教学研究能力；对现实的课程与教学问题具有清晰的认识，能在现代教育观念指导下投入我国基础教育课程改革的实践。
+            主
+          </div>
+          <div class="crous-content">
+            <ul>
+              <li>总学时：10学时</li>
+              <li>章节数：10章</li>
+              <li>总学分：2.0分</li>
+              <li>知识点总分：33个</li>
+            </ul>
+          </div>
+        </div>
+        <div class="left-group">
+          <div class="group"><Graph  :width="848" :height="470" :index="item"/></div>
         </div>
       </div>
     </div>
+    </div>
+
   </div>
 </template>
 
 <script lang="ts" setup>
+// import KnowledgeGraph from '@/views/professionalProfile/components/KnowledgeGraph.vue'
+import Graph from './components/Graph.vue'
 import {} from 'vue'
 </script>
 
 <style lang="scss" scoped>
 .view-container {
-  height: 5000px;
+  // height: 5000px;
   // background-color: #2080f7;
+  .main {
+    margin-top: 50px;
+  }
   .container {
     width: $base-container-width;
     margin: 0 auto;
-    padding-top: 300px;
-    .top-video-box {
-      position: absolute;
-      top: 120px;
-      display: flex;
-      height: 545px;
-      justify-content: space-between;
-      .video {
-        width: 1073px;
-        height: 100%;
-        background-color: #d9d9d9;
-        #video{
-          object-fit: cover;
-        }
-      }
-      .info-list {
-        margin-left: 20px;
-        width: 519px;
-        background-color: #fff;
+    display: flex;
+    .left-group {
+      position: relative;
+      width: 918px;
+      height: 623px;
+      background-color: pink;
+      background: url('../../assets/images/crous-card.png') no-repeat;
+      background-size: cover;
+      .group {
+        position: absolute;
+        top: 58px;
+        right: 13px;
+        width: 848px;
+        height: 470px;
+        background-color: pink;
+        border-radius: 10px;
+        overflow: hidden;
       }
     }
-    .title-container {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 300px;
+    .right-info {
+      flex: 1;
+      // background-color: skyblue;
+      margin-left: 20px;
+      padding: 20px;
       .title {
-        color: #333333;
-        font-size: 42px;
+        position: relative;
+        height: 72px;
+        line-height: 45px;
+        font-size: 32px;
+        color: #3374ff;
         font-weight: 700;
+        margin-left: 30px;
+      }
+      .title::after {
+        position: absolute;
+        top: 5px;
+        left: -30px;
+        content: ' ';
+        display: block;
+        width: 5px;
+        height: 40px;
+        background-color: #3374ff;
+      }
+      .info {
+        color: #888888;
+        font-size: 24px;
+        line-height: 35px;
+        height: 390px;
+        display: -webkit-box;
+        -webkit-line-clamp: 11; /* 限制显示3行 */
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
-      .description {
-        margin-top: 30px;
-        color: #777777;
-        font-size: 20px;
+      .crous-content {
+        width: 100%;
+        height: 100px;
+        margin-top: 60px;
+        ul {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+
+          li {
+            height: 40px;
+            width: 50%;
+            color: #555555;
+            font-size: 24px;
+          }
+        }
       }
     }
   }
@@ -77,6 +155,14 @@ import {} from 'vue'
     height: 410px;
     background: url('../../assets/images/banner2.png') no-repeat;
     background-size: cover;
+    .title {
+      position: absolute;
+      top: 200px;
+      right: 200px;
+      font-size: 48px;
+      font-weight: 700;
+      color: #fff;
+    }
   }
 }
 </style>
diff --git a/src/views/home/index1.vue b/src/views/home/index1.vue
new file mode 100644
index 0000000..1f53d04
--- /dev/null
+++ b/src/views/home/index1.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="view-container">
+    <div class="banner"></div>
+    <div class="container">
+      <div class="top-video-box">
+        <div class="video">
+          <video  id="video" width="100%" height="100%" controls>
+            <source src="../../assets//videos/920b6703c5f95b9ff774f27abf5d4f29.mp4" type="video/mp4" />
+           您的浏览器不支持视频播放
+          </video>
+        </div>
+        <div class="info-list"></div>
+      </div>
+      <div class="title-container">
+        <div class="title">课程体系</div>
+        <div class="description">
+          全面落实立德树人根本任务，CDIO工程教育理念
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {} from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.view-container {
+  height: 5000px;
+  // background-color: #2080f7;
+  .container {
+    width: $base-container-width;
+    margin: 0 auto;
+    padding-top: 300px;
+    .top-video-box {
+      position: absolute;
+      top: 120px;
+      display: flex;
+      height: 545px;
+      justify-content: space-between;
+      .video {
+        width: 1073px;
+        height: 100%;
+        background-color: #d9d9d9;
+        #video{
+          object-fit: cover;
+        }
+      }
+      .info-list {
+        margin-left: 20px;
+        width: 519px;
+        background-color: #fff;
+      }
+    }
+    .title-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 300px;
+      .title {
+        color: #333333;
+        font-size: 42px;
+        font-weight: 700;
+      }
+      .description {
+        margin-top: 30px;
+        color: #777777;
+        font-size: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 100%;
+    height: 410px;
+    background: url('../../assets/images/banner2.png') no-repeat;
+    background-size: cover;
+  }
+}
+</style>
diff --git a/src/views/talentDevelopment/index.vue b/src/views/talentDevelopment/index.vue
index a0be5d4..a04b650 100644
--- a/src/views/talentDevelopment/index.vue
+++ b/src/views/talentDevelopment/index.vue
@@ -3,15 +3,59 @@
     <div class="banner"></div>
     <div class="container">人才培养</div>
   </div>
+  <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>
 </template>
 
 <script lang="ts" setup>
-import {} from 'vue'
+import { ref, onMounted } from 'vue'
+const containerRef = ref(null)
+// const items = ref([{
+//   id:1,
+//   title:'11111'
+// }])
+const loading = ref(false)
+const page = ref(1)
+
+const handleScroll = () => {
+  const container: any = containerRef.value
+  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
+    loadMore()
+    console.log('到底了')
+  }
+}
+const loadMore = () => {
+  if (loading.value) return
+  loading.value = true
+  page.value++
+  setTimeout(() => {
+    loading.value = false
+  }, 1000)
+  // 发送请求加载新数据
+  // fetchData(page.value).then((newData) => {
+  //   items.value = [...items.value, ...newData]
+  //   loading.value = false
+  //   page.value++
+  // })
+}
+
+onMounted(() => {
+  // 初始化加载数据
+  loadMore()
+})
 </script>
 
 <style lang="scss" scoped>
+.container-box {
+  height: 500px;
+  overflow: auto;
+}
 .view-container {
-  height: 100vh;
+  // height: 100vh;
   .container {
     width: $base-container-width;
     margin: 0 auto;