diff --git a/package.json b/package.json
index 226ad76..aba5954 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
     "jwt-decode": "^4.0.0",
-    "nanoid": "^5.0.7",
     "echarts-liquidfill": "^3.1.0",
     "form-data": "^4.0.0",
     "jquery": "^3.7.1",
diff --git a/src/views/MyCourseStudy/ContainerKno.vue b/src/views/MyCourseStudy/ContainerKno.vue
index 3001dfa..e984256 100644
--- a/src/views/MyCourseStudy/ContainerKno.vue
+++ b/src/views/MyCourseStudy/ContainerKno.vue
@@ -1,35 +1,32 @@
 <template>
-        <el-tab-pane label="知识点收藏" name="third">
-          <div class="Container_Kno">
-            <div class="item_3" v-for="(item_3, index) in 10" :key="index">
-              <div>
-                <div class="KnowledgeCollent">
-                  <div class="KnoCon">
-                    <h4>课程名称</h4>
-                    <p>第{{ item_3 }}章-xxxx</p>
-                  </div>
-                  <div class="KnoBtn" >
-                    <img src="../../assets/icons/更多.svg" alt="" />
-                  </div>
-                </div>
-                <div class="Knowledge_point">
-                  <ul>
-                    <li v-for="(item, index) in 6" :key="index">
-                      知识点知识点知识点{{ item }} 
-                      <span class="btn" >×</span>
-                      &nbsp;
-                    </li>
-                  </ul>
-                </div>
-              </div>
+  <el-tab-pane label="知识点收藏" name="third">
+    <div class="Container_Kno">
+      <div class="item_3" v-for="(item_3, index) in 10" :key="index">
+        <div>
+          <div class="KnowledgeCollent">
+            <div class="KnoCon">
+              <h4>课程名称</h4>
+              <p>第{{ item_3 }}章-xxxx</p>
             </div>
+            <div class="KnoBtn">
+              <img src="../../assets/icons/更多.svg" alt="" />
+            </div>
+          </div>
+          <div class="Knowledge_point">
+            <ul>
+              <li v-for="(item, index) in 6" :key="index">
+                知识点知识点知识点{{ item }}
+                <span class="btn">×</span>
+                &nbsp;
+              </li>
+            </ul>
           </div>
-        </el-tab-pane>
+        </div>
+      </div>
+    </div>
+  </el-tab-pane>
 </template>
-<script lang="ts" setup>
-
-
-</script>
+<script lang="ts" setup></script>
 <style lang="scss" scoped>
 .Container_Kno {
   width: 100%;
@@ -68,7 +65,7 @@
   justify-content: space-around;
 }
 
-.KnoBtn>img {
+.KnoBtn > img {
   padding-top: 20px;
   cursor: pointer;
 }
@@ -96,7 +93,7 @@
   flex-direction: column;
 }
 
-.Knowledge_point>ul>li {
+.Knowledge_point > ul > li {
   display: inline-block;
   margin-top: 3px;
   margin-bottom: 3px;
@@ -118,4 +115,4 @@
   cursor: pointer;
   color: rgb(15, 57, 76);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/MyCourseStudy/courseCollections.vue b/src/views/MyCourseStudy/courseCollections.vue
index d1b787f..8ef7d58 100644
--- a/src/views/MyCourseStudy/courseCollections.vue
+++ b/src/views/MyCourseStudy/courseCollections.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="curse-collection">
-    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick" style="padding-top: 0">
+    <el-tabs
+      v-model="activeName"
+      type="card"
+      class="demo-tabs"
+      @tab-click="handleClick"
+      style="padding-top: 0"
+    >
       <!-- 课程收藏页面 -->
       <ContainerCla />
       <!-- 资源收藏页面 -->
@@ -77,7 +83,12 @@
             </div>
           </div>
         </div>
-        <el-dialog v-model="centerDialogVisible" title="视频播放中" width="1000" align-center>
+        <el-dialog
+          v-model="centerDialogVisible"
+          title="视频播放中"
+          width="1000"
+          align-center
+        >
           <span>点击开了一个弹框</span>
           <template #footer>
             <div class="dialog-footer">
@@ -113,9 +124,16 @@
           </div>
         </div>
         <div class="Page-2">
-          <el-pagination v-model:current-page="currentPage1" v-model:page-size="pageSize1" :disabled="disabled"
-            :page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="10"
-            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+          <el-pagination
+            v-model:current-page="currentPage1"
+            v-model:page-size="pageSize1"
+            :disabled="disabled"
+            :page-sizes="[6, 8, 12, 15]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="10"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
         </div>
       </el-tab-pane>
       <!-- 知识点收藏页面 -->
@@ -130,7 +148,7 @@ import { ref, watch } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import ContainerCla from './ContainerCla.vue'
 import ContainerKno from './ContainerKno.vue'
-import { getAssApi } from "@/api/courseChaptersApi";
+import { getAssApi } from '@/api/courseChaptersApi'
 const centerDialogVisible = ref(false)
 
 const activeIndex = ref(1)
@@ -139,7 +157,7 @@ function hsndelShow(index: number) {
 }
 //=========================
 function handleApi(params) {
-  getAssApi(params).then(res => {
+  getAssApi(params).then((res) => {
     arr.value = res.data.records
     total.value = res.data.total
     console.log(arr.value, '-', total.value)
@@ -165,7 +183,6 @@ function initFenYie() {
   pageSize1.value = 10
 }
 
-
 watch(activeIndex, (newVal) => {
   initFenYie()
   hand()
@@ -175,7 +192,7 @@ function hand() {
     type: activeIndex.value,
     page: currentPage1.value,
     pageSize: pageSize1.value,
-    resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20'
+    resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20',
   }
   handleApi(params)
 }
@@ -183,7 +200,7 @@ const obj = {
   type: activeIndex.value,
   page: currentPage1.value,
   pageSize: pageSize1.value,
-  resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20'
+  resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20',
 }
 handleApi(obj)
 //=========================
@@ -192,7 +209,6 @@ const activeName = ref('first')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -200,7 +216,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   justify-content: center;
 }
 
-.example-pagination-block+.example-pagination-block {
+.example-pagination-block + .example-pagination-block {
   margin-top: 10px;
 }
 
@@ -337,7 +353,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   align-items: center;
 }
 
-.ResClaDic>p {
+.ResClaDic > p {
   font-family: Inter, Inter;
   font-weight: 500;
   font-size: 20px;
@@ -368,7 +384,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   position: flex;
   justify-content: center;
   background-color: #fff;
-  border-top: 1px solid rgb(229, 227, 227, .5);
-  border-bottom: 1px solid rgb(229, 227, 227, .5);
+  border-top: 1px solid rgb(229, 227, 227, 0.5);
+  border-bottom: 1px solid rgb(229, 227, 227, 0.5);
 }
 </style>
diff --git a/src/views/course/CourseObjectives.vue b/src/views/course/CourseObjectives.vue
index 23f10a8..5993373 100644
--- a/src/views/course/CourseObjectives.vue
+++ b/src/views/course/CourseObjectives.vue
@@ -4,7 +4,13 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { id } from 'element-plus/es/locales.mjs'
 import * as echarts from 'echarts'
 import { useRoute } from 'vue-router'
-import { getCourseList, addCourse, editCourse, deleteCourse, getCourseInfo } from '@/api/courseChaptersApi'
+import {
+  getCourseList,
+  addCourse,
+  editCourse,
+  deleteCourse,
+  getCourseInfo,
+} from '@/api/courseChaptersApi'
 const route = useRoute()
 // id ： 分目标id
 // targetId ： 选中的分类
@@ -49,11 +55,16 @@ const handleClose = () => {
 // 弹窗提交事件
 const submit = async () => {
   if (flog.value) {
-    await editCourse({ id: activeIndex.value, content: formData.value.description })
+    await editCourse({
+      id: activeIndex.value,
+      content: formData.value.description,
+    })
   } else {
-    await addCourse({ objectiveId: activeIndex.value, content: formData.value.description })
+    await addCourse({
+      objectiveId: activeIndex.value,
+      content: formData.value.description,
+    })
   }
-
   getList()
   dialogVisible.value = false
   formData.value.description = ''
@@ -79,7 +90,6 @@ const submit = async () => {
   //   })
   //   close()
   //   flog.value = false
-
 }
 const close = () => {
   formData.value = {
@@ -117,7 +127,7 @@ const del = async (obj) => {
   await ElMessageBox.confirm('你确认要删除该课程目标吗', '温馨提示', {
     type: 'warning',
     confirmButtonText: '确认',
-    cancelButtonText: '取消'
+    cancelButtonText: '取消',
   })
   await deleteCourse({ id: obj.id })
   ElMessage.success('删除成功')
@@ -145,9 +155,9 @@ const data = ref({})
 const courseId = ref(0)
 onMounted(async () => {
   courseId.value = route.query.id
-  console.log(courseId.value);
+  console.log(courseId.value)
   getList()
-  console.log(data.value);
+  console.log(data.value)
   let chartDom = document.getElementById('main')
   let myChart = echarts.init(chartDom)
   let option
@@ -197,7 +207,9 @@ onMounted(async () => {
       <div class="topContent">
         <div class="title">| 课程总目标</div>
         <div class="content1">
-          <textarea class="textarea" @change="textChange" v-model="text">文本内容</textarea>
+          <textarea class="textarea" @change="textChange" v-model="text">
+文本内容</textarea
+          >
         </div>
       </div>
       <div class="footContent">
@@ -208,13 +220,17 @@ onMounted(async () => {
       </div>
     </div>
     <div class="rightContent">
-      <div class="title" style="
+      <div
+        class="title"
+        style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0 20px;
-          height: 60px;">
+          height: 60px;
+        "
+      >
         <div class="left2">| 课程分目标</div>
         <div class="right2">
           <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
@@ -223,7 +239,10 @@ onMounted(async () => {
       <div class="content2">
         <el-scrollbar height="600px">
           <ul class="objectLi">
-            <li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id">
+            <li
+              v-for="(item, index) in data.courseObjectivesTrees"
+              :key="item.id"
+            >
               <div class="courseObject">
                 <!-- {{ filterTarger(item.targetId) }} -->
                 <div class="courseObject1">{{ item.name }}</div>
@@ -231,7 +250,9 @@ onMounted(async () => {
                   <!-- <el-button class="edit" type="text" @click="editBook(item)">
                     编辑
                   </el-button> -->
-                  <el-button type="primary" @click="addBook(item.id)">新增</el-button>
+                  <el-button type="primary" @click="addBook(item.id)">
+                    新增
+                  </el-button>
                 </div>
               </div>
               <div class="smallContent">
@@ -246,10 +267,18 @@ onMounted(async () => {
                           <!-- {{ filterTarger(obj.targetId) }} -->
                         </div>
                         <div class="partObject2">
-                          <el-button class="edit" type="text" @click="editBook(obj)">
+                          <el-button
+                            class="edit"
+                            type="text"
+                            @click="editBook(obj)"
+                          >
                             编辑
                           </el-button>
-                          <el-button class="destroy" type="text" @click="del(obj)">
+                          <el-button
+                            class="destroy"
+                            type="text"
+                            @click="del(obj)"
+                          >
                             删除
                           </el-button>
                         </div>
@@ -267,8 +296,13 @@ onMounted(async () => {
       </div>
     </div>
   </div>
-  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500"
-    :before-close="handleClose">
+  <el-dialog
+    v-if="dialogVisible"
+    v-model="dialogVisible"
+    :title="flog ? '编辑' : '新增'"
+    width="500"
+    :before-close="handleClose"
+  >
     <el-form :model="formData" label-width="auto" style="max-width: 600px">
       <!-- <el-form-item label="目标" prop="target">
         <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
@@ -277,7 +311,10 @@ onMounted(async () => {
         </el-select>
       </el-form-item> -->
       <el-form-item label="内容" prop="description">
-        <el-input v-model="formData.description" placeholder="请输入内容"></el-input>
+        <el-input
+          v-model="formData.description"
+          placeholder="请输入内容"
+        ></el-input>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -380,7 +417,7 @@ const li
   background-color: #fff;
   background-image: linear-gradient(#c7e3ff, #ffffff);
 
-  .objectLi>li {
+  .objectLi > li {
     width: 845px;
     height: 250px;
     // margin: 40px;
@@ -423,7 +460,7 @@ const li
     background-image: linear-gradient(#c7e3ff, #ffffff);
   }
 
-  .small>li {
+  .small > li {
     // display: inline-flex;
     width: 650px;
     height: 150px;
diff --git a/src/views/course/CourseObjectives111.vue b/src/views/course/CourseObjectives111.vue
index 8d3b391..3edf3e6 100644
--- a/src/views/course/CourseObjectives111.vue
+++ b/src/views/course/CourseObjectives111.vue
@@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { id } from 'element-plus/es/locales.mjs'
 import * as echarts from 'echarts'
-import {useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { getCourseList } from '@/api/courseChaptersApi'
 const route = useRoute()
 // id ： 分目标id
@@ -15,10 +15,26 @@ const booksList = ref([
 ])
 
 const courseList = ref([
-  { id: 1, specific: '思政目标', booklist: [{ id: 1, targetId: 1, introduce: '内容111111' }] },
-  { id: 2, specific: '知识目标', booklist: [{ id: 1, targetId: 1, introduce: '内容222222' }] },
-  { id: 3, specific: '能力目标', booklist: [{ id: 1, targetId: 1, introduce: '内容333333' }] },
-  { id: 4, specific: '素质目标', booklist: [{ id: 1, targetId: 1, introduce: '内容444444' }] },
+  {
+    id: 1,
+    specific: '思政目标',
+    booklist: [{ id: 1, targetId: 1, introduce: '内容111111' }],
+  },
+  {
+    id: 2,
+    specific: '知识目标',
+    booklist: [{ id: 1, targetId: 1, introduce: '内容222222' }],
+  },
+  {
+    id: 3,
+    specific: '能力目标',
+    booklist: [{ id: 1, targetId: 1, introduce: '内容333333' }],
+  },
+  {
+    id: 4,
+    specific: '素质目标',
+    booklist: [{ id: 1, targetId: 1, introduce: '内容444444' }],
+  },
 ])
 const targetList = ref([
   {
@@ -115,7 +131,9 @@ const editBook = (obj) => {
 }
 const del = (id) => {
   // console.log(id);
-  courseList.booksList.value = booksList.value.filter((item) => item.id !== id)
+  courseList.value.booksList.value = booksList.value.filter(
+    (item) => item.id !== id,
+  )
 }
 
 // const disableChange = (id) => {
@@ -139,20 +157,19 @@ const updateDisabledStatus = () => {
     }
   })
 }
-const list=ref([])
-const content88=ref()
+const list = ref([])
+const content88 = ref()
 const courseId = ref(0)
-onMounted(async() => {
+onMounted(async () => {
   courseId.value = route.query.id
-  console.log(courseId.value);
+  console.log(courseId.value)
   const res = await getCourseList({ id: courseId.value })
-  console.log(res);
-  list.value=res.data
-  console.log(list.value);
+  console.log(res)
+  list.value = res.data
+  console.log(list.value)
   content88.value = list.value[0].contents[0].content
-  console.log(list.value[0].contents[0].content);
-  console.log(content88.value);
-  
+  console.log(list.value[0].contents[0].content)
+  console.log(content88.value)
 
   let chartDom = document.getElementById('main')
   let myChart = echarts.init(chartDom)
@@ -203,7 +220,9 @@ onMounted(async() => {
       <div class="topContent">
         <div class="title">| 课程总目标</div>
         <div class="content1">
-          <textarea class="textarea" @change="textChange">{{ content88 }}</textarea>
+          <textarea class="textarea" @change="textChange">{{
+            content88
+          }}</textarea>
         </div>
       </div>
       <div class="footContent">
@@ -214,13 +233,17 @@ onMounted(async() => {
       </div>
     </div>
     <div class="rightContent">
-      <div class="title" style="
+      <div
+        class="title"
+        style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0 20px;
-          height: 60px;">
+          height: 60px;
+        "
+      >
         <div class="left2">| 课程分目标</div>
         <div class="right2">
           <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
@@ -237,7 +260,9 @@ onMounted(async() => {
                   <!-- <el-button class="edit" type="text" @click="editBook(item)">
                     编辑
                   </el-button> -->
-                  <el-button type="primary" @click="addBook(index)">新增</el-button>
+                  <el-button type="primary" @click="addBook(index)">
+                    新增
+                  </el-button>
                 </div>
               </div>
               <div class="smallContent">
@@ -247,14 +272,22 @@ onMounted(async() => {
                       <div class="partObject">
                         <div class="partObject1">
                           <!-- {{ item.introduce }} -->
-                          课程目标{{ i+1 }}
+                          课程目标{{ i + 1 }}
                           <!-- {{ filterTarger(obj.targetId) }} -->
                         </div>
                         <div class="partObject2">
-                          <el-button class="edit" type="text" @click="editBook(obj)">
+                          <el-button
+                            class="edit"
+                            type="text"
+                            @click="editBook(obj)"
+                          >
                             编辑
                           </el-button>
-                          <el-button class="destroy" type="text" @click="del(obj.id)">
+                          <el-button
+                            class="destroy"
+                            type="text"
+                            @click="del(obj.id)"
+                          >
                             删除
                           </el-button>
                         </div>
@@ -272,7 +305,13 @@ onMounted(async() => {
       </div>
     </div>
   </div>
-  <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="新增目标" width="500" :before-close="handleClose">
+  <el-dialog
+    v-if="dialogVisible"
+    v-model="dialogVisible"
+    title="新增目标"
+    width="500"
+    :before-close="handleClose"
+  >
     <el-form :model="formData" label-width="auto" style="max-width: 600px">
       <!-- <el-form-item label="目标" prop="target">
         <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
@@ -281,7 +320,10 @@ onMounted(async() => {
         </el-select>
       </el-form-item> -->
       <el-form-item label="内容" prop="description">
-        <el-input v-model="formData.description" placeholder="请输入内容"></el-input>
+        <el-input
+          v-model="formData.description"
+          placeholder="请输入内容"
+        ></el-input>
       </el-form-item>
     </el-form>
     <template #footer>
diff --git a/src/views/courseResources/index.vue b/src/views/courseResources/index.vue
index c26680f..49371dc 100644
--- a/src/views/courseResources/index.vue
+++ b/src/views/courseResources/index.vue
@@ -259,11 +259,9 @@ ul {
 li {
   transition: filter 0.3s; /* 添加过渡动画 */
   flex: 0 0 20%;
-
   margin-bottom: 10px;
   padding: 10px;
   box-sizing: border-box;
-
   transition: box-shadow 0.3s;
   cursor: pointer;
 }
diff --git a/src/views/home/components/ConHeader.vue b/src/views/home/components/ConHeader.vue
index a358b8b..c5161af 100644
--- a/src/views/home/components/ConHeader.vue
+++ b/src/views/home/components/ConHeader.vue
@@ -46,19 +46,19 @@ function handleClick() {
   justify-content: center;
   align-items: center;
 }
-.overlay {
-  position: absolute;
-  top: 181px;
-  left: 1278px;
-  width: 40px;
-  height: 30px;
-  // background-color: lightgray;
-  border: 1px solid black;
-  z-index: 1000;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 10px;
-}
+// .overlay {
+//   position: absolute;
+//   top: 181px;
+//   left: 1278px;
+//   width: 40px;
+//   height: 30px;
+//   // background-color: lightgray;
+//   border: 1px solid black;
+//   z-index: 1000;
+//   display: flex;
+//   justify-content: center;
+//   flex-direction: column;
+//   align-items: center;
+//   margin-bottom: 10px;
+// }
 </style>
diff --git a/src/views/home/components/Echart/Echarts.vue b/src/views/home/components/Echart/Echarts.vue
index 44e5f0b..9947fe9 100644
--- a/src/views/home/components/Echart/Echarts.vue
+++ b/src/views/home/components/Echart/Echarts.vue
@@ -97,7 +97,7 @@ onMounted(() => {
 </template>
 <style scoped>
 .main {
-  width: 766px;
+  width: 100%;
   height: 352px;
 }
 </style>
diff --git a/src/views/home/components/Echarts.vue b/src/views/home/components/Echarts.vue
index ba53699..33d7c2b 100644
--- a/src/views/home/components/Echarts.vue
+++ b/src/views/home/components/Echarts.vue
@@ -3,9 +3,9 @@ import echarts from '@/views/home/components/Echart/Echarts.vue'
 import conheader from '@/views/home/components/ConHeader.vue'
 </script>
 <template>
-  <div class="info_container" style="width: 1257px; height: 384px">
+  <div class="info_container" style="width: 95%; height: 384px">
     <conheader title="主页访问数据(次)"></conheader>
-    <div class="info_content" style="width: 766px; height: 352px">
+    <div class="info_content" style="width: 75%; height: 100%">
       <echarts></echarts>
     </div>
   </div>
diff --git a/src/views/home/components/Info.vue b/src/views/home/components/Info.vue
index e021807..7635123 100644
--- a/src/views/home/components/Info.vue
+++ b/src/views/home/components/Info.vue
@@ -144,7 +144,7 @@ const confirmClick = () => {
 }
 </script>
 <template>
-  <div class="info_container" style="width: 1265px; height: 306px">
+  <div class="info_container" style="width: 95%; height: 306px">
     <conheader title="个人信息" v-model="drawer2">
       <template #drawer>
         <el-drawer v-model="drawer2" :direction="direction" class="table">
@@ -203,7 +203,7 @@ const confirmClick = () => {
     </conheader>
     <div
       class="info_content"
-      style="width: 776px; height: 244px"
+      style="width: 60%; height: 244px"
       v-loading="loading"
     >
       <div class="item" :key="item.name" v-for="item in formModel">
@@ -226,7 +226,7 @@ const confirmClick = () => {
   gap: 10px; /* 设置元素之间的间隔 */
 }
 .item {
-  width: 176px;
+  width: 100%;
   height: 60px;
   display: flex;
   flex-direction: column;
diff --git a/src/views/home/components/Status.vue b/src/views/home/components/Status.vue
index 725881a..e939dec 100644
--- a/src/views/home/components/Status.vue
+++ b/src/views/home/components/Status.vue
@@ -37,7 +37,7 @@ const form = ref()
 //   code: [{ message: '验证码不能为空', trigger: 'blur' }],
 // }
 form.value = props.data
-const formLabelWidth = '140px'
+const formLabelWidth = '70px'
 //设置头像显示
 imageUrl.value = props.data.icon
 //设置头像更换
@@ -82,7 +82,7 @@ const changeInfo = async () => {
 }
 </script>
 <template>
-  <div class="ident" style="width: 278px; height: 274px; background: #375fff">
+  <div class="ident" style="width: 100%; height: 274px; background: #375fff">
     <div class="info_container" style="width: 201px; height: 178px">
       <div class="avater">
         <img :src="imageUrl" alt="Uploaded" v-if="imageUrl" class="avater" />
@@ -104,7 +104,7 @@ const changeInfo = async () => {
     title="登录信息"
     style="width: 800px; text-align: center"
   >
-    <el-form :model="form" style="" :data="form" :rules="rules">
+    <el-form :model="form" :data="form" :rules="rules">
       <el-form-item label="用户名" :label-width="formLabelWidth">
         <el-input v-model="form.username" autocomplete="off" />
       </el-form-item>
@@ -186,8 +186,6 @@ span {
   text-align: center;
   font-style: normal;
   text-transform: none;
-
-  grid-area: element1;
   position: relative;
   margin-left: 27px;
   top: 18px;
@@ -197,7 +195,6 @@ span {
   height: 24px;
   border-radius: 100px 100px 100px 100px;
   border: 2px solid #ffffff;
-  grid-area: element2;
   background: #0052d9;
   border-radius: 32px 32px 32px 32px;
   display: flex;
diff --git a/src/views/home/components/Welcome.vue b/src/views/home/components/Welcome.vue
index d1b6557..f973bdc 100644
--- a/src/views/home/components/Welcome.vue
+++ b/src/views/home/components/Welcome.vue
@@ -13,7 +13,7 @@ const props = defineProps({
 </template>
 <style scoped>
 .nav_info {
-  width: 1265px;
+  width: 95%;
   height: 32px;
   display: flex;
   justify-content: start;
@@ -32,7 +32,7 @@ const props = defineProps({
   margin-right: 68px;
 }
 .intro {
-  width: 257px;
+  width: 50%;
   height: 22px;
   font-family: Inter, Inter;
   font-weight: bold;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8f53111..86710c5 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -49,10 +49,10 @@ onMounted(() => {
       <div class="nav">
         <welcome :username="username"></welcome>
       </div>
-      <div class="info" style="width: 1321px; height: 368px">
+      <div class="info" style="width: 100%; height: 368px">
         <Info :data="data" v-if="flag"></Info>
       </div>
-      <div class="echarts" style="width: 1321px; height: 444px">
+      <div class="echarts" style="width: 100%; height: 444px">
         <echarts></echarts>
       </div>
     </div>
@@ -67,10 +67,10 @@ onMounted(() => {
     </div>
     <div v-else class="right">
       <status :data="data" v-if="flag"></status>
-      <div class="class" style="width: 278px; height: 388px">
+      <div class="class" style="width: 100%; height: 388px">
         <Class2></Class2>
       </div>
-      <div class="stu" style="width: 278px; height: 236px">
+      <div class="stu" style="width: 100%; height: 236px">
         <Student2></Student2>
       </div>
     </div>
@@ -79,15 +79,16 @@ onMounted(() => {
 <style lang="scss" scoped>
 .container {
   display: flex;
+  width: 100%;
   .left {
-    width: 1321px;
+    width: 80%;
     height: 936px;
     margin-right: 16px;
     display: grid;
     grid-template-rows: 1fr 1fr 1fr; /* 使用fr单位来平均分布 */
     height: 300px; /* 设置容器高度 */
     .nav {
-      width: 1321px;
+      width: 100%;
       height: 92px;
       background: #ffffff;
       box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
@@ -115,7 +116,7 @@ onMounted(() => {
       }
     }
     .class {
-      width: 1321px;
+      width: 80%;
       height: 444px;
       background: #c57676;
       box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
@@ -127,7 +128,7 @@ onMounted(() => {
     }
   }
   .right {
-    width: 278px;
+    width: 20%;
     height: 930px;
     display: flex;
     flex-direction: column; //开启纵向布局
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index b8d8bbd..9d2f367 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -371,7 +371,7 @@ const rules = {
   code: [{ message: '验证码不能为空', trigger: 'blur' }],
 }
 
-//验证码倒计时--没搞定
+//验证码倒计时
 const countdown = ref(0)
 let timer
 const updateCountdown = () => {
@@ -414,6 +414,7 @@ const checkPasswordMatch = () => {
     passwordMatchError.value = ''
   }
 }
+
 //账号注册表单写成json格式
 const handleSubmit = async () => {
   // 执行注册逻辑
@@ -467,7 +468,7 @@ const phoneChange = () => {
   console.log('开始手机号注册')
   isinfo.value = false
 }
-//注册中的返回
+//手机号注册中的返回
 const phoneReturn = () => {
   isinfo.value = true
 }
diff --git a/src/views/portal/LearningPathRecommendations.vue b/src/views/portal/LearningPathRecommendations.vue
index a8d11bf..c836a1c 100644
--- a/src/views/portal/LearningPathRecommendations.vue
+++ b/src/views/portal/LearningPathRecommendations.vue
@@ -10,7 +10,6 @@
           <li>学生入口&nbsp;&nbsp;|</li>
           <li>毕业生入口</li>
         </ul>
-
       </div>
       <div class="nav2">
         <ul>
@@ -33,58 +32,67 @@
   <!-- 内容学习路径推荐d3 -->
   <div class="content">
     <div class="subnav">
-    <h1>xxx课程</h1>
-  </div>
-  <div class="container"></div>
-
+      <h1>xxx课程</h1>
+    </div>
+    <div class="container"></div>
   </div>
 
   <!-- 底部 -->
   <div class="footer">
     <h3>软件工程专业</h3>
     <h1>教学一体化平台</h1>
-    <p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
+    <p>
+      关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp;
+      &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
+    </p>
+    <p style="font-size: 13px; margin-top: 70px">
+      黄淮学院版权所有@2023 湘豫CP备 19005950号-1
+      <br />
+      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com
     </p>
-    <p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br>
-      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p>
-  </div>
-  <div>
-    
   </div>
+  <div></div>
 </template>
 
-<script lang="ts" >
-import * as d3 from 'd3';
+<script lang="ts">
+import * as d3 from 'd3'
 // import { onMounted } from 'vue';
 
 export default {
   name: 'courseHomepage',
   data() {
     return {
-      svgArea:null,
-          links:[],
-          nodes:[],
-          nodesName:[],
-          linksName:[],
-          simulation:null,
-          scale:1,
-          width:800,
-          height:560,
-          colorList:['#FD7623','#3388B1','#D82952','#F3D737','#409071','#D64E52'],
+      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 },
+        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 },
@@ -151,8 +159,8 @@ export default {
           // { "id": "Brujon", "group": 4 },
           // { "id": "Mme.Hucheloup", "group": 8 }
         ],
-        "links": [
-          { "source": "Napoleon", "target": "Myriel", "value": 1 },
+        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 },
@@ -406,12 +414,10 @@ export default {
           // { "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){
@@ -420,143 +426,161 @@ export default {
     // .catch(function(error){
     //   console.log(error)
     // })
-    this.initGraph(this.testGraph);
-
+    this.initGraph(this.testGraph)
   },
   methods: {
     initGraph(data: {
-      nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue';
-        source: string; target: string; value: number;
-      }[];
+      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 _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")
+      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");
+        .join('line')
+        .attr('stroke-width', (d: { value: number }) => Math.sqrt(d.value))
+        .attr('class', 'link')
 
-      const node = g.append("g")
-        .selectAll("circle")
+      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")
+        .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; }){
+        .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) {
+        .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", "none");  // 移出时恢复原始样式
-        });
-       
+            .attr('stroke', 'white') // 添加白色边框
+            .attr('stroke-width', 5) // 设置边框宽度
+        })
+        .on('mouseout', function (d, i) {
+          d3.select(this).attr('stroke', 'none') // 移出时恢复原始样式
+        })
 
-      simulation.on("tick", () => {
+      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);
+          .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);
+          .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);
-      });
+        nodeNameText
+          .attr('x', (d: { x: any }) => d.x)
+          .attr('y', (d: { y: any }) => d.y)
+      })
     },
-    updateGraph(data: { links: any[]; }){
+    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));
+      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; }) {
+    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;
+    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;
+        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;
+      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);
+      return d3
+        .drag()
+        .on('start', dragstarted)
+        .on('drag', dragged)
+        .on('end', dragended)
     },
-    queryTest(d: { id: any; }){
+    queryTest(d: { id: any }) {
       // var _this = this
       console.log(d.id)
-    }
-  }
+    },
+  },
 }
-
-
 </script>
 
-
 <style lang="scss" scoped>
 * {
   margin: 0;
@@ -596,8 +620,6 @@ img {
   background-image: url('/src/assets/images/top.png');
   background-size: 100% 100%;
   // background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
-
-
 }
 
 // 导航栏
@@ -612,8 +634,7 @@ img {
   width: 24%;
   height: 10%;
   margin-right: 20px;
-  // background-color: #6759ff; 
-
+  // background-color: #6759ff;
 }
 
 .header .nav1 ul li {
@@ -623,7 +644,7 @@ img {
   color: white;
   font-size: 12px;
   text-align: center;
-  // border-right: 1px solid #FFFFFF; 
+  // border-right: 1px solid #FFFFFF;
 }
 
 .header .nav2 {
@@ -634,7 +655,7 @@ img {
   height: 25%;
   margin-top: 30px;
   // margin-right: -260px;
-  // background-color: #6759ff; 
+  // background-color: #6759ff;
 }
 
 .header .nav2 ul li {
@@ -662,17 +683,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;
 }
@@ -684,11 +705,11 @@ img {
   margin-left: 80px;
 }
 // 内容
-.content{
+.content {
   margin-top: 10;
   width: 100%;
   height: 900px;
-  background-color: #7F9EED;
+  background-color: #7f9eed;
 }
 .subnav {
   width: 100%;
@@ -699,44 +720,44 @@ img {
 }
 
 .subnav h1 {
-  border-bottom: 4px solid #0052FF;
+  border-bottom: 4px solid #0052ff;
   font-size: 20px;
   width: 10%;
   height: 35px;
   margin: auto;
   font-weight: bolder;
-  color: #0052FF;
+  color: #0052ff;
   text-align: center;
 }
 // d3
-.container{
-    width: 1000px;
-    height: 700px;
-    // border: 1px solid #2c3e50;
-    border-radius:8px;
-    margin-top: 40px;
-    margin-left: auto;
-    // border-radius: 50%;
-    margin-right: auto;
-    border: #79c4f3;
-    background-color: #79c4f3 ;
-    // background: #79c4f3 repeating-linear-gradient(30deg,
-    // hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px,
-    // transparent 0, transparent 30px);
-  }
-  .node{
-    stroke:#fff;
-    stroke-width:1;
-    cursor: pointer;
-  }
-
-  .node:hover{
-    stroke-width:5;
-  }
-
-  .nodeName{
-    fill:white;
-  }
+.container {
+  width: 1000px;
+  height: 700px;
+  // border: 1px solid #2c3e50;
+  border-radius: 8px;
+  margin-top: 40px;
+  margin-left: auto;
+  // border-radius: 50%;
+  margin-right: auto;
+  border: #79c4f3;
+  background-color: #79c4f3;
+  // background: #79c4f3 repeating-linear-gradient(30deg,
+  // hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px,
+  // transparent 0, transparent 30px);
+}
+.node {
+  stroke: #fff;
+  stroke-width: 1;
+  cursor: pointer;
+}
+
+.node:hover {
+  stroke-width: 5;
+}
+
+.nodeName {
+  fill: white;
+}
 
 // 尾部
 .footer {
@@ -755,17 +776,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;
 }
 
@@ -773,9 +794,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>
diff --git a/src/views/portal/components/KnowledgeGraph.vue b/src/views/portal/components/KnowledgeGraph.vue
index b71fa7b..44a6a77 100644
--- a/src/views/portal/components/KnowledgeGraph.vue
+++ b/src/views/portal/components/KnowledgeGraph.vue
@@ -1,33 +1,40 @@
 <template>
-    <div id="3d-graph"></div>
+  <div id="3d-graph"></div>
 </template>
 
 <script lang="ts" setup>
 // import { useRouter } from 'vue-router'
-import { onMounted, ref,reactive } from 'vue'
+import { onMounted, ref, reactive } from 'vue'
 import ForceGraph3D from '3d-force-graph'
 //@ts-ignore
-import { CSS2DRenderer, CSS2DObject,} from 'three/examples/jsm/renderers/CSS2DRenderer.js'
+import {
+  CSS2DRenderer,
+  CSS2DObject,
+} from 'three/examples/jsm/renderers/CSS2DRenderer.js'
 //@ts-ignore
-import SpriteText  from '../spritetext.js'
+import SpriteText from '../spritetext.js'
 // const $router = useRouter()
 // const jsonData = ref(null)
-let Graph  = reactive({})
+let Graph = reactive({})
 const props = defineProps({
-  width:{
-    type:Number,
-    default:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+  width: {
+    type: Number,
+    default:
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth,
+  },
+  height: {
+    type: Number,
+    default:
+      window.innerHeight ||
+      document.documentElement.clientHeight ||
+      document.body.clientHeight,
   },
-  height:{
-    type:Number,
-    default:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
-  }
 })
 const dom = ref(null)
 onMounted(() => {
-   
-    
-   Graph = ForceGraph3D({
+  Graph = ForceGraph3D({
     extraRenderers: [new CSS2DRenderer()],
   })(document.getElementById('3d-graph') as HTMLElement)
     .jsonUrl('../../../public/data.json')
@@ -40,7 +47,7 @@ onMounted(() => {
       // console.log(node, 111, Graph.graphData().nodes)
       return new CSS2DObject(nodeEl)
     })
-    .linkLabel((link:any) => link.label) // 指定链接上显示的文字属性
+    .linkLabel((link: any) => link.label) // 指定链接上显示的文字属性
     .linkWidth(0.8)
     .linkHoverPrecision(0.5) // 设置链接文字的显示精度，这里设置为一个足够小的值
     .linkColor(() => '#dd92fd') // 设置连接线颜色为红色
@@ -101,7 +108,6 @@ onMounted(() => {
             } else {
               return '#dd92fd'
             }
-            
           })
         } else {
           // Graph.linkColor(() => '#a4c7fe') // 设置连接线颜色为红色
@@ -112,40 +118,39 @@ onMounted(() => {
       //@ts-ignore
       Graph.graphData(graphData)
     })
-   dom.value = document.querySelector('canvas') as any
+  dom.value = document.querySelector('canvas') as any
 })
 
 const setLabel = () => {
   //@ts-ignore
-  Graph.linkThreeObject((link:any) => {
-          // extend link with text sprite
-          const sprite = new SpriteText(`${link.label}`);
-          sprite.color = '#ccc';
-          sprite.textHeight = 1.5;
-          return sprite;
-        })
+  Graph.linkThreeObject((link: any) => {
+    // extend link with text sprite
+    const sprite = new SpriteText(`${link.label}`)
+    sprite.color = '#ccc'
+    sprite.textHeight = 1.5
+    return sprite
+  })
+  //@ts-ignore
+  Graph.linkPositionUpdate((sprite, { start, end }) => {
+    //@ts-ignore
+    const middlePos = Object.assign(
+      ...['x', 'y', 'z'].map((c) => ({
         //@ts-ignore
-        Graph.linkPositionUpdate((sprite, { start, end }) => {
-          //@ts-ignore
-          const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
-            //@ts-ignore
-            [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
-          })));
+        [c]: start[c] + (end[c] - start[c]) / 2, // calc middle point
+      })),
+    )
 
-          // Position sprite
-          Object.assign(sprite.position, middlePos);
-        });
-        //@ts-ignore
-        Graph.d3Force('charge').strength(-120);
+    // Position sprite
+    Object.assign(sprite.position, middlePos)
+  })
+  //@ts-ignore
+  Graph.d3Force('charge').strength(-120)
 }
 // const goToEditAtlas = () => {
 //   console.log(jsonData.value)
 
 //   $router.push({ name: 'EditAtlas', params: { id: 123 } })
 // }
-
 </script>
 
-<style lang='scss' scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/views/portal/courseHomepage.vue b/src/views/portal/courseHomepage.vue
index d493746..484e97c 100644
--- a/src/views/portal/courseHomepage.vue
+++ b/src/views/portal/courseHomepage.vue
@@ -64,7 +64,9 @@
     </div>
 
     <div class="sidebar">
-      <div class="icon"><img src="/src/assets/images/rjgz.jpg" width="100%" height="100%"></div>
+      <div class="icon">
+        <img src="/src/assets/images/rjgz.jpg" width="100%" height="100%" />
+      </div>
       <!-- <div class="content">
         <h3>课程目标</h3>
         <div class="btn">了解更多</div>
@@ -387,7 +389,7 @@ body {
   margin-left: 20px;
   // background-color: rgb(84, 50, 9)
 }
-.sidebar .icon{
+.sidebar .icon {
   width: 100%;
   height: 20%;
 }
diff --git a/src/views/portal/knowledgePointLearning.vue b/src/views/portal/knowledgePointLearning.vue
index 13cf959..cad0bd2 100644
--- a/src/views/portal/knowledgePointLearning.vue
+++ b/src/views/portal/knowledgePointLearning.vue
@@ -39,8 +39,20 @@
     <div class="sidebar">
       <div class="sidebar-header">
         <div class="sidebar-header-imag">
-          <div class="sidebar-header-imag1"><img src="/src/assets/images/gd (3).png" width="100%" height="100%"></div>
-          <div class="sidebar-header-imag2"><img src="/src/assets/images/sjx(1).png" width="100%" height="100%"></div>
+          <div class="sidebar-header-imag1">
+            <img
+              src="/src/assets/images/gd (3).png"
+              width="100%"
+              height="100%"
+            />
+          </div>
+          <div class="sidebar-header-imag2">
+            <img
+              src="/src/assets/images/sjx(1).png"
+              width="100%"
+              height="100%"
+            />
+          </div>
         </div>
         <h1>知识点</h1>
         <p>共发布225个</p>
@@ -51,11 +63,17 @@
       <div class="content">
         <div class="txt">
           <div class="txt1">联试题数：233 &nbsp;&nbsp;&nbsp;关联学习数：22</div>
-          <div class="imag"><img src="/src/assets/images/sjx(1).png" width="100%" height="100%"></div>
+          <div class="imag">
+            <img
+              src="/src/assets/images/sjx(1).png"
+              width="100%"
+              height="100%"
+            />
+          </div>
         </div>
       </div>
       <div class="lina">
-        <e-charts style="height: 260px;" id="lina" />
+        <e-charts style="height: 260px" id="lina" />
       </div>
       <!-- <div id="staff_all_orderCount" style="width: 300px;height:300px;"></div> -->
       <!-- <e-chars class="lina" ：option="option"/> -->
@@ -64,16 +82,20 @@
       <div class="completion">
         <!-- <div class="echates-title">知识点掌握百分比</div> -->
         <div class="box">
-          <div id="liquidfill" style="width: 65%; height: 65%; "></div>
+          <div id="liquidfill" style="width: 65%; height: 65%"></div>
           <div class="percentage">
-            <h4>平均完成率:<p>80%</p>
+            <h4>
+              平均完成率:
+              <p>80%</p>
             </h4>
           </div>
         </div>
         <div class="box">
-          <div id="liquidfil" style="width: 65%; height: 65%; "></div>
+          <div id="liquidfil" style="width: 65%; height: 65%"></div>
           <div class="percentage">
-            <h4>平均完成率:<p>60%</p>
+            <h4>
+              平均完成率:
+              <p>60%</p>
             </h4>
           </div>
         </div>
@@ -112,11 +134,11 @@
           <h1>49</h1>
           <p>80% ~ 100%</p>
         </div>
-        <div class="libox" style="border-left: 2px solid #74a5ff;">
+        <div class="libox" style="border-left: 2px solid #74a5ff">
           <h1>3</h1>
           <p>60% ~ 79%</p>
         </div>
-        <div class="libox" style="border-left: 2px solid #74a5ff;">
+        <div class="libox" style="border-left: 2px solid #74a5ff">
           <h1>4</h1>
           <p>59%以下</p>
         </div>
@@ -130,20 +152,22 @@
         </div>
         <div class="lin"></div>
       </div>
-
     </div>
   </div>
 
-
-
   <!-- 底部 -->
   <div class="footer">
     <h3>软件工程专业</h3>
     <h1>教学一体化平台</h1>
-    <p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
+    <p>
+      关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp;
+      &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
+    </p>
+    <p style="font-size: 13px; margin-top: 70px">
+      黄淮学院版权所有@2023 湘豫CP备 19005950号-1
+      <br />
+      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com
     </p>
-    <p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br>
-      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p>
   </div>
   <div></div>
 </template>
@@ -151,34 +175,34 @@
 <script lang="ts" setup>
 // import axios from 'axios';
 import { ref, onMounted, markRaw } from 'vue'
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 
 import 'echarts-liquidfill'
 // var ROOT_PATH = 'https://echarts.apache.org/examples';
 // type EChartsOption = echarts.EChartsOption;
-var option = null
+let option = null
 // 获取dom元素 要在dom渲染时候操作
 onMounted(() => {
   const dom = document.getElementById('main')
   // 获取dom元素之后 进行初始化一个echarts实例对象
-  var myChart = echarts.init(dom);
+  let myChart = echarts.init(dom)
   console.log(dom, 'dom')
   // 加载数据前打开loading
-  myChart.showLoading();
+  myChart.showLoading()
   // 读取本地json数据
   fetch('../../../public/nodeList.json').then((res) => {
-    res.json().then(graph => {
-      console.log(graph);
-      myChart.hideLoading();
+    res.json().then((graph) => {
+      console.log(graph)
+      myChart.hideLoading()
       // 配置node links 关系 样式
       option = {
         tooltip: {},
         legend: [
           {
             data: graph.categories.map(function (a: { name: string }) {
-              return a.name;
-            })
-          }
+              return a.name
+            }),
+          },
         ],
 
         series: [
@@ -193,44 +217,35 @@ onMounted(() => {
             label: {
               show: true,
               position: 'right',
-              formatter: '{b}'
+              formatter: '{b}',
             },
             labelLayout: {
-              hideOverlap: true
+              hideOverlap: true,
             },
             scaleLimit: {
               min: 0.4,
-              max: 2
+              max: 2,
             },
             lineStyle: {
               color: 'source',
-              curveness: 0.3
-            }
-          }
-        ]
-      };
+              curveness: 0.3,
+            },
+          },
+        ],
+      }
       // 调用echarts实例方法渲染
-      myChart.setOption(option);
+      myChart.setOption(option)
     })
-
   })
 
-
   // option && myChart.setOption(option);
 })
 
-
-
-
-
-
-
-
 onMounted(() => {
   const chartInstance: any = ref(null)
   const updateChart = () => {
     chartInstance.value = markRaw(
-      echarts.init(document?.getElementById(`liquidfill`,)),
+      echarts.init(document?.getElementById(`liquidfill`)),
     )
     const option = {
       series: [
@@ -289,40 +304,38 @@ onMounted(() => {
 onMounted(() => {
   const dom = document.getElementById('lina')
   // 获取dom元素之后 进行初始化一个echarts实例对象
-  var myChart = echarts.init(dom);
+  let myChart = echarts.init(dom)
   console.log(dom, 'dom')
   // 加载数据前打开loading
-  myChart.showLoading();
+  myChart.showLoading()
   // 读取本地json数据
   fetch('../../../public/nodeList.json').then((res) => {
-    res.json().then(graph => {
-      console.log(graph);
-      myChart.hideLoading();
+    res.json().then((graph) => {
+      console.log(graph)
+      myChart.hideLoading()
       // 配置node links 关系 样式
       option = {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['记忆', '理解', '应用', '分析', '评价'], 
+          data: ['记忆', '理解', '应用', '分析', '评价'],
           axisLine: {
-      lineStyle: {
-        color: '#5470C6'   // 修改 X 轴颜色
-      }
-    }
+            lineStyle: {
+              color: '#5470C6', // 修改 X 轴颜色
+            },
+          },
         },
         yAxis: {
           type: 'value',
           axisLine: {
             lineStyle: {
-                color: '#5470C6' // 修改Y轴颜色
-            }
-        },
+              color: '#5470C6', // 修改Y轴颜色
+            },
+          },
           // min:'700',
           splitLine: {
-            show: false
-            
-          }
-          
+            show: false,
+          },
         },
         series: [
           {
@@ -330,28 +343,26 @@ onMounted(() => {
             type: 'line',
             areaStyle: {
               color: '#76A6FF',
-        opacity: 0.5
+              opacity: 0.5,
             },
-          }
-        ]
-      };
+          },
+        ],
+      }
 
       // 调用echarts实例方法渲染
-      myChart.setOption(option);
+      myChart.setOption(option)
     })
-
   })
 
   // option && myChart.setOption(option);
 })
 
-
 // 水波纹
 onMounted(() => {
   const chartInstance: any = ref(null)
   const updateChart = () => {
     chartInstance.value = markRaw(
-      echarts.init(document?.getElementById(`liquidfil`,)),
+      echarts.init(document?.getElementById(`liquidfil`)),
     )
     const option = {
       series: [
@@ -428,7 +439,6 @@ onMounted(() => {
 * {
   margin: 0;
   padding: 0;
-
 }
 
 ul {
@@ -461,8 +471,6 @@ img {
   background-image: url('/src/assets/images/top.png');
   background-size: 100% 100%;
   // background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
-
-
 }
 
 // 导航栏
@@ -477,8 +485,7 @@ img {
   width: 24%;
   height: 10%;
   margin-right: 20px;
-  // background-color: #6759ff; 
-
+  // background-color: #6759ff;
 }
 
 .header .nav1 ul li {
@@ -488,7 +495,7 @@ img {
   color: white;
   font-size: 12px;
   text-align: center;
-  // border-right: 1px solid #FFFFFF; 
+  // border-right: 1px solid #FFFFFF;
 }
 
 .header .nav2 {
@@ -499,7 +506,7 @@ img {
   height: 25%;
   margin-top: 30px;
   // margin-right: -260px;
-  // background-color: #6759ff; 
+  // background-color: #6759ff;
 }
 
 .header .nav2 ul li {
@@ -527,17 +534,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;
 }
@@ -558,13 +565,13 @@ img {
 }
 
 .subnav h1 {
-  border-bottom: 4px solid #0052FF;
+  border-bottom: 4px solid #0052ff;
   font-size: 20px;
   width: 10%;
   height: 35px;
   margin: auto;
   font-weight: bolder;
-  color: #0052FF;
+  color: #0052ff;
   text-align: center;
 }
 
@@ -578,7 +585,6 @@ img {
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-around;
-
 }
 
 .chart {
@@ -605,8 +611,8 @@ img {
 .sidebar .sidebar-header {
   width: 100%;
   height: 7%;
-  background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
-  // transform: perspective(3em) rotateY(-6deg);       
+  background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
+  // transform: perspective(3em) rotateY(-6deg);
 }
 
 .sidebar .sidebar-header-imag {
@@ -641,7 +647,7 @@ img {
   font-size: 16px;
   line-height: 30px;
   // background-color: #728cc4;
-  // transform: perspective(3em) rotateY(-6deg);       
+  // transform: perspective(3em) rotateY(-6deg);
 }
 
 .sidebar .sidebar-header p {
@@ -653,7 +659,7 @@ img {
   font-size: 13px;
   line-height: 30px;
   // background-color: #728cc4;
-  // transform: perspective(3em) rotateY(-6deg);       
+  // transform: perspective(3em) rotateY(-6deg);
 }
 
 .sidebar .sidebar-header a {
@@ -665,7 +671,7 @@ img {
   font-size: 13px;
   line-height: 30px;
   // background-color: #728cc4;
-  // transform: perspective(3em) rotateY(-6deg);       
+  // transform: perspective(3em) rotateY(-6deg);
 }
 
 .sidebar .sidebar-header-line {
@@ -676,17 +682,16 @@ img {
   float: left;
   margin-top: 1.5%;
   // box-shadow: 1.5px -2px #F0F4FA;
-  box-shadow: 0px -2px 3px 2px #F0F4FA;
+  box-shadow: 0px -2px 3px 2px #f0f4fa;
   // box-shadow:  1.5px 1px  #F0F4FA;
-  // transform: perspective(3em) rotateY(-6deg);       
+  // transform: perspective(3em) rotateY(-6deg);
 }
 
 .sidebar .content {
   width: 100%;
   height: 6%;
-  background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
+  background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
   margin-top: 10px;
-
 }
 
 .sidebar .content .txt {
@@ -697,7 +702,6 @@ img {
   justify-content: space-between;
   flex-wrap: nowrap;
   display: flex;
-
 }
 
 .sidebar .content .txt .imag {
@@ -710,9 +714,8 @@ img {
   height: 5%;
   font-size: 14px;
   margin-left: 4px;
-  color: #FFFFFF;
+  color: #ffffff;
   margin-top: 15px;
-
 }
 
 .sidebar .lina {
@@ -772,7 +775,7 @@ img {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-evenly;
-  color: #F0F4FA;
+  color: #f0f4fa;
   font-weight: bold;
   // background-color: #5582dc;
 }
@@ -782,17 +785,20 @@ img {
   height: 90%;
   font-size: 15px;
   line-height: 20px;
-  color: #5470C6;
+  color: #5470c6;
   // background-color: #b3c8f2;
 }
 
-
 // 流动效果
 .header1 {
   position: relative;
   text-align: center;
   border-radius: 100%;
-  background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
+  background: linear-gradient(
+    60deg,
+    rgba(84, 58, 183, 1) 0%,
+    rgba(0, 172, 193, 1) 100%
+  );
   // color: rgb(207, 59, 59);
 }
 
@@ -829,12 +835,12 @@ img {
 //      background-color: white;
 //  }
 
-.parallax>use {
+.parallax > use {
   /* 使use元素执行move-forever动画 */
-  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
+  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
 }
 
-.parallax>use:nth-child(1) {
+.parallax > use:nth-child(1) {
   /* 延迟2秒启动动画  */
 
   /* 设置动画持续时间为7秒 */
@@ -845,7 +851,7 @@ img {
   // animation-delay: -2s;
 }
 
-.parallax>use:nth-child(2) {
+.parallax > use:nth-child(2) {
   // background-color: #0052FF;
   animation-delay: -3s;
   animation-duration: 10s;
@@ -888,7 +894,6 @@ img {
   // }
 }
 
-
 // 知识点
 .knowledge {
   width: 100%;
@@ -896,7 +901,7 @@ img {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  background-color: #A1C1FF;
+  background-color: #a1c1ff;
   // background-color: #A4c3ff;
   padding-top: 20px;
 }
@@ -912,7 +917,7 @@ img {
 .knowledge .libox h1 {
   width: 100%;
   height: 50%;
-  color: #F0F4FA;
+  color: #f0f4fa;
   line-height: 50px;
   text-align: center;
   margin: auto;
@@ -924,7 +929,7 @@ img {
 .knowledge .libox p {
   width: 100%;
   height: 50%;
-  color: #F0F4FA;
+  color: #f0f4fa;
   line-height: 50px;
   text-align: center;
   margin: auto;
@@ -937,7 +942,7 @@ img {
 .box1 {
   width: 100%;
   height: 147px;
-  background-color: #A1C1FF;
+  background-color: #a1c1ff;
   // height: 100%;
 }
 
@@ -947,11 +952,9 @@ img {
   margin: auto;
   border-radius: 15px 15px 15px 15px;
   background-color: #74a5ff;
-
   // background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
 }
 
-
 .method li {
   width: 90%;
   height: 20%;
@@ -960,18 +963,18 @@ img {
   line-height: 35px;
   margin-left: 10px;
   padding-top: 10px;
-  color: #F0F4FA;
+  color: #f0f4fa;
   // background-color: #74a5ff;
 }
-.box1 .lin{
-width: 60%;
+.box1 .lin {
+  width: 60%;
   height: 3%;
   border-radius: 2px 2px 2px 2px;
   background-color: #74a5ff;
   margin: auto;
   margin-top: 5.5%;
   // box-shadow: 1.5px -2px #F0F4FA;
-  box-shadow: 0px -2px 3px 2px #F0F4FA;
+  box-shadow: 0px -2px 3px 2px #f0f4fa;
 }
 
 // 尾部
@@ -990,17 +993,17 @@ width: 60%;
   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;
 }
 
@@ -1008,10 +1011,10 @@ width: 60%;
   width: 100%;
   height: 20px;
   // position: absolute;
-  font-family: "kaiti_gb2312";
+  font-family: 'kaiti_gb2312';
   margin-top: 25px;
   font-size: 17px;
-  color: #7F9EED;
+  color: #7f9eed;
 }
 
 .echates-title {
@@ -1023,6 +1026,6 @@ width: 60%;
 
 .bo {
   width: 100%;
-  background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
+  background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
 }
 </style>