diff --git a/.env.development b/.env.development
index 330efcc..e26a9f6 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,8 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
 VITE_APP_TITLE = '无糖运营平台'
-VITE_APP_BASE_API = 'http://127.0.0.1:8080'
\ No newline at end of file
+<<<<<<< HEAD
+VITE_APP_BASE_API = 'http://127.0.0.1:8008'
+=======
+VITE_APP_BASE_API = 'http://39.106.16.162:8080'
+>>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 517f898..0fa7399 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,8 +1,17 @@
 lockfileVersion: '6.0'
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+>>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
+<<<<<<< HEAD
+=======
+=======
+>>>>>>> 1a620e19de970965f426e07348b1dbc4be900eaf
+>>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
 
 dependencies:
   3d-force-graph:
diff --git a/src/api/courseChaptersApi.ts b/src/api/courseChaptersApi.ts
index 5f6022b..51d0c75 100644
--- a/src/api/courseChaptersApi.ts
+++ b/src/api/courseChaptersApi.ts
@@ -96,8 +96,20 @@ export const deleteCourse = (params: any) => {
 // 获取详情
 export const getCourseInfo = (params: any) => {
   return request({
+<<<<<<< HEAD
+    url: '/objective_contents/' + params.id,
+    method: 'get',
+    // params
+=======
+<<<<<<< HEAD
     url: '/api/objective_contents/' + params.id,
     method: 'get',
+    params,
+=======
+    url: '/objective_contents/' + params.id,
+    method: "get",
     // params
+>>>>>>> 1a620e19de970965f426e07348b1dbc4be900eaf
+>>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
   })
 }
diff --git a/src/assets/images/100.png b/src/assets/images/100.png
new file mode 100644
index 0000000..7228b29
Binary files /dev/null and b/src/assets/images/100.png differ
diff --git a/src/assets/images/101.jpg b/src/assets/images/101.jpg
new file mode 100644
index 0000000..607f4e9
Binary files /dev/null and b/src/assets/images/101.jpg differ
diff --git a/src/assets/images/102.jpg b/src/assets/images/102.jpg
new file mode 100644
index 0000000..2f884ad
Binary files /dev/null and b/src/assets/images/102.jpg differ
diff --git a/src/assets/images/103.jpg b/src/assets/images/103.jpg
new file mode 100644
index 0000000..4d57b1b
Binary files /dev/null and b/src/assets/images/103.jpg differ
diff --git a/src/assets/images/104.jpg b/src/assets/images/104.jpg
new file mode 100644
index 0000000..a4fad67
Binary files /dev/null and b/src/assets/images/104.jpg differ
diff --git a/src/assets/images/105.jpg b/src/assets/images/105.jpg
new file mode 100644
index 0000000..2d5b294
Binary files /dev/null and b/src/assets/images/105.jpg differ
diff --git a/src/assets/images/106.jpg b/src/assets/images/106.jpg
new file mode 100644
index 0000000..5fc9337
Binary files /dev/null and b/src/assets/images/106.jpg differ
diff --git a/src/assets/images/107.jpg b/src/assets/images/107.jpg
new file mode 100644
index 0000000..c05e1be
Binary files /dev/null and b/src/assets/images/107.jpg differ
diff --git a/src/assets/images/108.jpg b/src/assets/images/108.jpg
new file mode 100644
index 0000000..2981ff0
Binary files /dev/null and b/src/assets/images/108.jpg differ
diff --git a/src/assets/images/109.jpg b/src/assets/images/109.jpg
new file mode 100644
index 0000000..f2318ca
Binary files /dev/null and b/src/assets/images/109.jpg differ
diff --git a/src/assets/images/110.jpg b/src/assets/images/110.jpg
new file mode 100644
index 0000000..0d5499c
Binary files /dev/null and b/src/assets/images/110.jpg differ
diff --git a/src/assets/images/141.png b/src/assets/images/141.png
new file mode 100644
index 0000000..4132030
Binary files /dev/null and b/src/assets/images/141.png differ
diff --git a/src/assets/images/142.png b/src/assets/images/142.png
new file mode 100644
index 0000000..0f43095
Binary files /dev/null and b/src/assets/images/142.png differ
diff --git a/src/assets/images/4c.jpeg b/src/assets/images/4c.jpeg
new file mode 100644
index 0000000..3dc8b48
Binary files /dev/null and b/src/assets/images/4c.jpeg differ
diff --git a/src/assets/images/R-C.png b/src/assets/images/R-C.png
new file mode 100644
index 0000000..9b2a69b
Binary files /dev/null and b/src/assets/images/R-C.png differ
diff --git a/src/assets/images/a.png b/src/assets/images/a.png
new file mode 100644
index 0000000..3375a9d
Binary files /dev/null and b/src/assets/images/a.png differ
diff --git a/src/assets/images/o.jpg b/src/assets/images/o.jpg
new file mode 100644
index 0000000..78d00bc
Binary files /dev/null and b/src/assets/images/o.jpg differ
diff --git a/src/assets/images/screen (1).png b/src/assets/images/screen (1).png
new file mode 100644
index 0000000..89ad605
Binary files /dev/null and b/src/assets/images/screen (1).png differ
diff --git a/src/assets/images/screen.png b/src/assets/images/screen.png
new file mode 100644
index 0000000..609ac94
Binary files /dev/null and b/src/assets/images/screen.png differ
diff --git a/src/assets/images/yt.png b/src/assets/images/yt.png
new file mode 100644
index 0000000..f46b966
Binary files /dev/null and b/src/assets/images/yt.png differ
diff --git a/src/assets/images/zstp.jpg b/src/assets/images/zstp.jpg
new file mode 100644
index 0000000..bb0b6eb
Binary files /dev/null and b/src/assets/images/zstp.jpg differ
diff --git a/src/router/routers.ts b/src/router/routers.ts
index bd49659..6724cb7 100644
--- a/src/router/routers.ts
+++ b/src/router/routers.ts
@@ -299,4 +299,14 @@ export const constantRoute: any = [
       },
     ],
   },
+  {
+    path: '/curriculumCenter/largeScreen',
+    component: () => import('@/views/course/largeScreen.vue'),
+    name: 'LargeScreen', // name 要与权限一致
+    meta: {
+      title: '课程图谱',
+      hidden: true,
+      icon: 'Notebook',
+    },
+  }
 ]
diff --git a/src/views/course/CourseObjectives.vue b/src/views/course/CourseObjectives.vue
index 7ec2965..2e1fc03 100644
--- a/src/views/course/CourseObjectives.vue
+++ b/src/views/course/CourseObjectives.vue
@@ -3,7 +3,12 @@ import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { id } from 'element-plus/es/locales.mjs'
 import * as echarts from 'echarts'
+<<<<<<< HEAD
 // import { useRoute } from 'vue-router'
+=======
+<<<<<<< HEAD
+import { useRoute } from 'vue-router'
+>>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
 import {
   getCourseList,
   addCourse,
@@ -11,7 +16,14 @@ import {
   deleteCourse,
   getCourseInfo,
 } from '@/api/courseChaptersApi'
+<<<<<<< HEAD
 import { useRoute, useRouter } from 'vue-router'
+=======
+=======
+import { useRoute ,useRouter} from 'vue-router'
+import { getCourseList, addCourse, editCourse, deleteCourse, getCourseInfo } from '@/api/courseChaptersApi'
+>>>>>>> 1a620e19de970965f426e07348b1dbc4be900eaf
+>>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
 const route = useRoute()
 const router = useRouter()
 // id ： 分目标id
diff --git a/src/views/course/largeScreen.vue b/src/views/course/largeScreen.vue
new file mode 100644
index 0000000..67b66e0
--- /dev/null
+++ b/src/views/course/largeScreen.vue
@@ -0,0 +1,430 @@
+<template>
+  <div>
+
+        <div class="container">
+          <div class="goto" @click="goBack">
+            <p>返回</p>
+          </div>
+        </div>
+</div>
+  </template>
+  
+  <script lang="ts" >
+  import * as d3 from 'd3';
+  import { useRouter } from 'vue-router'
+  // import portal from './portal/LearningPathRecommendations.vue'
+
+  
+ 
+// import { onMounted } from 'vue';
+
+export default {
+    name: 'courseHomepage',
+    data() {
+        return {
+            svgArea: null,
+            links: [],
+            nodes: [],
+            nodesName: [],
+            linksName: [],
+            simulation: null,
+            scale: 1,
+            width: 800,
+            height: 635,
+            colorList: ['#91CC75', '#5470C6', '#FAC858', '#EE6666', '#73C0DE', '#EA7CCC', '#5577FF', '#5577FF', '#9DBFFF', '#78A7FF'],
+            // colorList: ['#E5A1D6', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB', '#8B81F7', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB'],
+            testGraph: {
+              "nodes": [],
+            "links": []
+                // "nodes": [
+                //     { "id": "Myriel", "group": 8 },
+                //     { "id": "Napoleon", "group": 2 },
+                //     { "id": "Mlle.Baptistine", "group": 3 },
+                //     { "id": "Mme.Magloire", "group": 1 },
+                //     { "id": "CountessdeLo", "group": 5 },
+                //     { "id": "Geborand", "group": 5 },
+                //     { "id": "Champtercier", "group": 6 },
+                //     { "id": "Cravatte", "group": 7 },
+                //     { "id": "Count", "group": 8 },
+                //     { "id": "OldMan", "group": 9 },
+                //     { "id": "Labarre", "group": 5 },
+                //     { "id": "Valjean", "group": 1 },
+                //     { "id": "Marguerite", "group": 3 },
+                //     { "id": "Mme.deR", "group": 2 },
+                //     { "id": "Isabeau", "group": 5 },
+                //     { "id": "Gervais", "group": 9 },
+                //     { "id": "Tholomyes", "group": 8 },
+                //     { "id": "Listolier", "group": 7 },
+                //     { "id": "Fameuil", "group": 6 },
+                //     { "id": "Blacheville", "group": 5 },
+                //     { "id": "Favourite", "group": 4 },
+                //     { "id": "Dahlia", "group": 3 },
+                //     { "id": "Zephine", "group": 9 },
+                //     { "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": "Mme.Hucheloup", "group": 8 }
+                // ],
+                // "links": [
+                //     { "source": "Napoleon", "target": "Myriel", "value": 7 },
+                //     { "source": "Mlle.Baptistine", "target": "Myriel", "value": 7 },
+                //     { "source": "Mme.Magloire", "target": "Myriel", "value": 7 },
+                //     { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 7 },
+                //     { "source": "CountessdeLo", "target": "Myriel", "value": 7 },
+                //     { "source": "Geborand", "target": "Myriel", "value": 7 },
+                //     { "source": "Champtercier", "target": "Myriel", "value": 7 },
+                //     { "source": "Cravatte", "target": "Myriel", "value": 7 },
+                //     { "source": "Count", "target": "Myriel", "value": 7 },
+                //     { "source": "OldMan", "target": "Myriel", "value": 7 },
+                //     { "source": "Valjean", "target": "Labarre", "value": 7 },
+                //     { "source": "Valjean", "target": "Mme.Magloire", "value": 7 },
+                //     { "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": "Mme.Hucheloup", "target": "Enjolras", "value": 1 }
+                // ]
+                // "links":[]
+            }
+
+        }
+
+    },
+    created() {
+        this.getGraphData()
+      },
+    // mounted() {
+      
+    //     this.initGraph(this.testGraph);
+
+    // },
+    methods: {
+      getGraphData(){
+          var _this = this
+          this.axios.get("person/"+'Rob Reiner')
+          //   this.axios.get("person/all")
+            .then(function (response: { data: any; }) {
+              console.log(response)
+              _this.testGraph["nodes"] = [response.data]
+              _this.initGraph(_this.testGraph)
+            })
+            .catch(function (error: any) {
+              console.log(error)
+            })
+        },
+
+        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 simulation = d3.forceSimulation(nodes)
+                .force("link", d3.forceLink(links).id((d: { id: any; }) => d.id))
+            
+                .force("collide", d3.forceCollide().radius(() => 40))
+                .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}`)
+                
+
+
+
+
+            // 初始化阶段之外单独创建线性渐变
+            const defs = svg.append("defs");
+
+            // 在 initGraph 方法中，为每条链接创建线性渐变
+            for (let i = 0; i < links.length; i++) {
+                const linearGradient = defs.append("linearGradient")
+                    .attr("id", `line-gradient-${i}`)
+                    .attr("x1", "0%")
+                    .attr("y1", "0%")
+                    .attr("x2", "100%")
+                    .attr("y2", "100%");
+
+                linearGradient.append("stop")
+                    .attr("offset", "0%")
+                    .attr("stop-color", "#6C9DFC");
+
+                linearGradient.append("stop")
+                    .attr("offset", "50%")
+                    .attr("stop-color", "#9BAAFA");
+
+                linearGradient.append("stop")
+                    .attr("offset", "100%")
+                    .attr("stop-color", "#F3B1BC");
+            }
+            const g = svg.append("g")
+            // 线段
+            const link = g.append("g")
+                .attr("stroke-opacity", 0.6)
+                .selectAll("line")
+                .data(links)
+                .join("line")
+                .style("stroke", (_d: any, i: any) => `url(#line-gradient-${i})`) // 使用线性渐变设置描边颜色
+                .style("stroke-width", (d: { value: number; }) => Math.sqrt(d.value))
+                .attr("class", "link")
+                .attr("marker-end", "url(#arrow)");
+
+
+            // // 创建箭头
+            // const marker = defs.append("marker")
+            //     .attr("id", "arrow")
+            //     .attr("viewBox", "0 -5 10 10")
+            //     .attr("refX", 31)
+            //     .attr("refY", 0)
+            //     .attr("markerWidth", 6)
+            //     .attr("markerHeight", 6)
+            //     .attr("orient", "auto")
+            //     .append("path")
+            //     .attr("d", "M0,-5L10,0L0,5")
+            //     .attr("fill", "#E0AAED");
+
+
+
+            svg.call(d3.zoom().on("zoom", function () {
+                g.attr("transform", d3.event.transform)
+            }))
+
+
+
+            // 设置节点之间的距离
+            const linkForce = d3.forceLink(links)
+                .id((d: { id: any; }) => d.id)
+                .distance(100); // 设置节点之间的距离
+
+            simulation.force("link", linkForce);
+
+            //小球的可视化范围的修改
+
+            const node = g.append("g")
+                .selectAll("circle")
+                .data(nodes)
+                .join("circle")
+                .attr("r", 15)
+                .attr("class", "node")
+                .attr("fill", (d: { id: any; }) => {
+                    return `url(#node-gradient-${d.id})`;
+                })
+                // .attr("fill", _this.color)
+                .on("click", _this.queryTest)
+                .call(_this.drag(simulation));
+
+            // 在 initGraph 方法中为每个小球创建线性渐变
+            for (let i = 0; i < nodes.length; i++) {
+                const linearGradient = defs.append("linearGradient")
+                    .attr("id", `node-gradient-${nodes[i].id}`)
+                    .attr("x1", "0%")
+                    .attr("y1", "0%")
+                    .attr("x2", "0%")
+                    .attr("y2", "100%");
+
+                linearGradient.append("stop")
+                    .attr("offset", "0%")
+                    .attr("stop-color", _this.colorList[nodes[i].group]);
+
+                linearGradient.append("stop")
+                    .attr("offset", "100%")
+                    .attr("stop-color", "#9BBCFC");
+            }
+
+            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('x', (d: { x: any; }) => d.x)
+                .attr("y", 50)
+                .attr('text-anchor', 'middle')
+                .attr('alignment-baseline', 'middle')
+                .attr("class", "node-name")
+                .style('pointer-events', 'none')
+                .style('font-size', '15px')
+                .style('font-family', 'Arial')
+                .style('text-shadow', '1px 1px 1px #0052FF')
+
+
+
+            node.on("mouseover", function (_d: any, _i: any) {
+                d3.select(this)
+                    .attr("stroke", "white")  // 添加白色边框
+                    .attr("stroke-width", 5);  // 设置边框宽度
+            })
+                .on("mouseout", function (_d: any, _i: any) {
+                    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)
+        }
+       
+    },
+    setup() {
+    const router = useRouter();
+
+    const goBack = () => {
+      router.go(-1);
+    };
+
+    return {
+      goBack
+    };
+  }
+
+
+}
+
+  </script>
+  
+  <style lang="scss" scoped>
+
+  // d3
+.container {
+    // width: 1000px;
+    // height: 950px;
+    // border: 1px solid #2c3e50;
+    // border-radius: 8px;
+    // margin-top: 40px;
+    // margin-left: auto;
+    // border-radius: 90%;
+    // margin-right: auto;
+
+    border: 1px solid #CFD9EA;
+    background: linear-gradient(#d5e1f6, #a9c6ff, #d5e1f6);
+    background-image: url('/src/assets/images/106.jpg');
+    // background-size: 100% 80%;
+    background-size: 100% ;
+
+background-attachment: fixed;
+    // border-radius: 50%; // 左下、右下圆角处理
+    // background-color: rgba(0, 0, 0, 0); /* 50% 的透明度 */
+
+}
+.goto {
+    width: 4.5%;
+    height: 3.4%;
+    background-color: rgb(255, 255, 255,0.5);
+    // background-image: url('/src/assets/images/screen (1).png');
+    // background-size: 100% 100%;
+    border-radius: 8px;
+    position: absolute;
+    top: 5%;
+    margin-left: 94%;
+    z-index: 5;
+    cursor: pointer;
+}
+.goto p{
+  text-align: center;
+  color: #ffffff;
+  line-height: 30px;
+  font-size: 14px;
+}
+// .goto :hover{
+//   background-color: #a2abbb;
+//   border-radius: 8px;
+//   width: 4.5%;
+//   height: 3.4%;
+// }
+
+</style>
+  
\ No newline at end of file
diff --git a/src/views/portal/LearningPathRecommendations.vue b/src/views/portal/LearningPathRecommendations.vue
index 1226daf..696d9de 100644
--- a/src/views/portal/LearningPathRecommendations.vue
+++ b/src/views/portal/LearningPathRecommendations.vue
@@ -1,586 +1,682 @@
 <template>
   <!-- 头部 -->
   <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 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 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 class="inco"></div> -->
-    <h1>学习路径推荐</h1>
-    <!-- <p>(专业代码 ：080902H)</p> -->
+      <!-- <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 class="subnav">
+          <h1>xxx课程</h1>
+      </div>
+      <!-- <div class="tushi"> -->
+      <el-steps :active="3" align-center style="margin: auto;margin-top: 3%; width:60%;">
+          <el-step title="课程进度0%" description=""></el-step>
+          <el-step title="课程进度50%" description=""></el-step>
+          <el-step title="课程进度100%" description=""></el-step>
+      </el-steps>
+      <!-- </div> -->
+      <div class="tushi2">
+          <!-- <a href="/curriculumCenter/largeScreen">
+          </a> -->
+          <img @click="goToLargScreen" src="/src/assets/images/screen (1).png" width="100%" height="100%">
+
+      </div>
+
+
+      <!-- <div class="con1"></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>
+      <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>
-  <div></div>
 </template>
 
-<script>
-// 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)
-//     },
-//   },
-// }
+<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: 635,
+          colorList: ['#91CC75', '#5470C6', '#FAC858', '#EE6666', '#73C0DE', '#EA7CCC', '#5577FF', '#5577FF', '#9DBFFF', '#78A7FF'],
+          // colorList: ['#E5A1D6', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB', '#8B81F7', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB'],
+          testGraph: {
+              "nodes": [
+                  { "id": "Myriel", "group": 8 },
+                  { "id": "Napoleon", "group": 2 },
+                  { "id": "Mlle.Baptistine", "group": 3 },
+                  { "id": "Mme.Magloire", "group": 1 },
+                  { "id": "CountessdeLo", "group": 5 },
+                  { "id": "Geborand", "group": 5 },
+                  { "id": "Champtercier", "group": 6 },
+                  { "id": "Cravatte", "group": 7 },
+                  { "id": "Count", "group": 8 },
+                  { "id": "OldMan", "group": 9 },
+                  { "id": "Labarre", "group": 5 },
+                  { "id": "Valjean", "group": 1 },
+                  { "id": "Marguerite", "group": 3 },
+                  { "id": "Mme.deR", "group": 2 },
+                  { "id": "Isabeau", "group": 5 },
+                  { "id": "Gervais", "group": 9 },
+                  { "id": "Tholomyes", "group": 8 },
+                  { "id": "Listolier", "group": 7 },
+                  { "id": "Fameuil", "group": 6 },
+                  { "id": "Blacheville", "group": 5 },
+                  { "id": "Favourite", "group": 4 },
+                  { "id": "Dahlia", "group": 3 },
+                  { "id": "Zephine", "group": 9 },
+                  { "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": 7 },
+                  { "source": "Mlle.Baptistine", "target": "Myriel", "value": 7 },
+                  { "source": "Mme.Magloire", "target": "Myriel", "value": 7 },
+                  { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 7 },
+                  { "source": "CountessdeLo", "target": "Myriel", "value": 7 },
+                  { "source": "Geborand", "target": "Myriel", "value": 7 },
+                  { "source": "Champtercier", "target": "Myriel", "value": 7 },
+                  { "source": "Cravatte", "target": "Myriel", "value": 7 },
+                  { "source": "Count", "target": "Myriel", "value": 7 },
+                  { "source": "OldMan", "target": "Myriel", "value": 7 },
+                  { "source": "Valjean", "target": "Labarre", "value": 7 },
+                  { "source": "Valjean", "target": "Mme.Magloire", "value": 7 },
+                  { "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 defs = svg.append("defs");//创建线性渐变
+
+          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("link", d3.forceLink(links).distance(-30))  // 设置节点间的距离
+              .force("collide", d3.forceCollide().radius(() => 60))
+              .force("charge", d3.forceManyBody().strength(30))
+              .force("center", d3.forceCenter(_this.width / 2, _this.height / 2));
+          // .scale(1.5);  // 设置初始缩放值
+
+
+          const svg = d3.select(".container")
+              .append("svg")
+              .attr("viewBox", `0 0 ${_this.width} ${_this.height}`)
+              .style("width", "1300px")// 修改 SVG 宽度
+              .style("height", "748px")// 修改 SVG 高度
+          // .style("border-radius", "50%")// 修改 SVG 
+          // .style("z-index", "9")// 修改 SVG 
+
+
+
+
+          // 初始化阶段之外单独创建线性渐变
+          const defs = svg.append("defs");
+
+          // 在 initGraph 方法中，为每条链接创建线性渐变
+          for (let i = 0; i < links.length; i++) {
+              const linearGradient = defs.append("linearGradient")
+                  .attr("id", `line-gradient-${i}`)
+                  .attr("x1", "0%")
+                  .attr("y1", "0%")
+                  .attr("x2", "100%")
+                  .attr("y2", "100%");
+
+              linearGradient.append("stop")
+                  .attr("offset", "0%")
+                  .attr("stop-color", "#6C9DFC");
+
+              linearGradient.append("stop")
+                  .attr("offset", "50%")
+                  .attr("stop-color", "#9BAAFA");
+
+              linearGradient.append("stop")
+                  .attr("offset", "100%")
+                  .attr("stop-color", "#F3B1BC");
+          }
+          const g = svg.append("g")
+          // 线段
+          const link = g.append("g")
+              .attr("stroke-opacity", 0.6)
+              .selectAll("line")
+              .data(links)
+              .join("line")
+              .style("stroke", (_d: any, i: any) => `url(#line-gradient-${i})`) // 使用线性渐变设置描边颜色
+              .style("stroke-width", (d: { value: number; }) => Math.sqrt(d.value))
+              .attr("class", "link")
+              .attr("marker-end", "url(#arrow)");
+
+
+          // // 创建箭头
+          // const marker = defs.append("marker")
+          //     .attr("id", "arrow")
+          //     .attr("viewBox", "0 -5 10 10")
+          //     .attr("refX", 31)
+          //     .attr("refY", 0)
+          //     .attr("markerWidth", 6)
+          //     .attr("markerHeight", 6)
+          //     .attr("orient", "auto")
+          //     .append("path")
+          //     .attr("d", "M0,-5L10,0L0,5")
+          //     .attr("fill", "#E0AAED");
+
+
+
+          svg.call(d3.zoom().on("zoom", function () {
+              g.attr("transform", d3.event.transform)
+          }))
+
+
+
+          // 设置节点之间的距离
+          const linkForce = d3.forceLink(links)
+              .id((d: { id: any; }) => d.id)
+              .distance(100); // 设置节点之间的距离
+
+          simulation.force("link", linkForce);
+
+          //小球的可视化范围的修改
+
+          const node = g.append("g")
+              .selectAll("circle")
+              .data(nodes)
+              .join("circle")
+              .attr("r", 23)
+              .attr("class", "node")
+              .attr("fill", (d: { id: any; }) => {
+                  return `url(#node-gradient-${d.id})`;
+              })
+              // .attr("fill", _this.color)
+              .on("click", _this.queryTest)
+              .call(_this.drag(simulation));
+
+          // 在 initGraph 方法中为每个小球创建线性渐变
+          for (let i = 0; i < nodes.length; i++) {
+              const linearGradient = defs.append("linearGradient")
+                  .attr("id", `node-gradient-${nodes[i].id}`)
+                  .attr("x1", "0%")
+                  .attr("y1", "0%")
+                  .attr("x2", "0%")
+                  .attr("y2", "100%");
+
+              linearGradient.append("stop")
+                  .attr("offset", "0%")
+                  .attr("stop-color", _this.colorList[nodes[i].group]);
+
+              linearGradient.append("stop")
+                  .attr("offset", "100%")
+                  .attr("stop-color", "#9BBCFC");
+          }
+
+          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('x', (d: { x: any; }) => d.x)
+              .attr("y", 50)
+              .attr('text-anchor', 'middle')
+              .attr('alignment-baseline', 'middle')
+              .attr("class", "node-name")
+              .style('pointer-events', 'none')
+              .style('font-size', '15px')
+              .style('font-family', 'Arial')
+              .style('text-shadow', '1px 1px 1px #0052FF')
+
+
+
+          node.on("mouseover", function (_d: any, _i: any) {
+              d3.select(this)
+                  .attr("stroke", "white")  // 添加白色边框
+                  .attr("stroke-width", 5);  // 设置边框宽度
+          })
+              .on("mouseout", function (_d: any, _i: any) {
+                  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)
+      },
+      goToLargScreen() {
+          this.$router.push('/curriculumCenter/largeScreen')
+      }
+  }
+
+}
+
+
+
 </script>
 
+
 <style lang="scss" scoped>
 * {
   margin: 0;
@@ -620,6 +716,8 @@ img {
   background-image: url('/src/assets/images/top.png');
   background-size: 100% 100%;
   // background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
+
+
 }
 
 // 导航栏
@@ -634,7 +732,8 @@ img {
   width: 24%;
   height: 10%;
   margin-right: 20px;
-  // background-color: #6759ff;
+  // background-color: #6759ff; 
+
 }
 
 .header .nav1 ul li {
@@ -644,7 +743,7 @@ img {
   color: white;
   font-size: 12px;
   text-align: center;
-  // border-right: 1px solid #FFFFFF;
+  // border-right: 1px solid #FFFFFF; 
 }
 
 .header .nav2 {
@@ -655,7 +754,7 @@ img {
   height: 25%;
   margin-top: 30px;
   // margin-right: -260px;
-  // background-color: #6759ff;
+  // background-color: #6759ff; 
 }
 
 .header .nav2 ul li {
@@ -683,17 +782,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;
 }
@@ -704,13 +803,16 @@ img {
   float: left;
   margin-left: 80px;
 }
+
 // 内容
 .content {
   margin-top: 10;
   width: 100%;
+  position: relative;
   height: 900px;
-  background-color: #7f9eed;
+  // background-color: #7F9EED;
 }
+
 .subnav {
   width: 100%;
   margin: auto;
@@ -720,49 +822,116 @@ img {
 }
 
 .subnav h1 {
-  border-bottom: 4px solid #0052ff;
+  border-bottom: 4px solid #3E79F6;
   font-size: 20px;
   width: 10%;
   height: 35px;
   margin: auto;
   font-weight: bolder;
-  color: #0052ff;
+  color: #3E79F6;
   text-align: center;
 }
+
 // d3
+// .con{
+//     width: 95%;
+//     height: 900px;
+//     margin: auto;
+//     // background-color: #3E79F6;
+//     background-image: url('/src/assets/images/142.png');
+//     background-size: 100% 100%;
+//     top: 353px;
+//     left: 4%;
+//     // position: absolute;
+//     // background-color: #409effff;
+
+//     // border-left: 1px solid #3E79F6;
+// }
+// .con1{
+//     width: 0.1%;
+//     height: 500px;
+//     // margin: auto;
+//     // background-color: #3E79F6;
+//     top: 353px;
+//     right: 4%;
+//     position: absolute;
+//     background-color: #409effff;
+
+//     // border-left: 1px solid #3E79F6;
+// }
 .container {
-  width: 1000px;
-  height: 700px;
+  width: 1300px;
+  height: 750px;
   // border: 1px solid #2c3e50;
   border-radius: 8px;
-  margin-top: 40px;
+  margin-top: 2.5%;
   margin-left: auto;
-  // border-radius: 50%;
+  // border-radius: 90%;
   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;
+
+  border: 1px solid #CFD9EA;
+  background: linear-gradient(#d5e1f6, #a9c6ff, #d5e1f6);
+  background-image: url('/src/assets/images/106.jpg');
+  background-size: 100% 100%;
+  // border-radius: 10px  10%  10% 10%; // 左下、右下圆角处理
+  // background-color: rgba(0, 0, 0, 0); /* 50% 的透明度 */
+
 }
 
-.node:hover {
-  stroke-width: 5;
+// .tushi {
+//     width: 100%;
+//     height: 10%;
+//     // background-color: #F0F4FA;
+//     position: absolute;
+//     padding-top: 10%;
+//     z-index: 5;
+// }
+
+// .tushi1 {
+//     width: 100%;
+//     height: 15%;
+//     // background-color: #F0F4FA;
+//     position: absolute;
+//     top: 105%;
+//     z-index: 5;
+// }
+
+.tushi2 {
+  width: 1.8%;
+  height: 3%;
+  // background-color: #304564;
+  // background-image: url('/src/assets/images/screen (1).png');
+  // background-size: 100% 100%;
+  position: absolute;
+  top: 25%;
+  margin-left: 87%;
+  z-index: 5;
 }
 
-.nodeName {
-  fill: white;
+.tushi2:hover {
+  transform: scale(1.05);
 }
 
+
+// .node{
+//   stroke:#fff;
+//   stroke-width:1;
+//   cursor: pointer;
+// }
+
+// .node:hover{
+//   stroke-width:5;
+// }
+
+// .nodeName{
+//   fill:white;
+// }
+
 // 尾部
 .footer {
   margin-top: 100px;
   // padding-bottom: 0%;
+  margin-top: 15%;
   width: 100%;
   height: 250px;
   // position: absolute;
@@ -776,17 +945,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;
 }
 
@@ -794,9 +963,9 @@ 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;
 }
-</style>
+</style>
\ No newline at end of file