diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 111cee4..624b859 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -42,7 +42,7 @@ module.exports = {
       'no-useless-escape': 'off', // 禁止不必要的转义字符
   
       // typeScript (https://typescript-eslint.io/rules)
-      '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
+      '@typescript-eslint/no-unused-vars': 'warn', // 禁止定义未使用的变量
       '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
       '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
       '@typescript-eslint/no-non-null-assertion': 'off',
diff --git a/package.json b/package.json
index f09a05c..a2df517 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "@antv/g6": "3.8.3",
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.8",
+    "echarts": "^5.5.0",
+    "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.6.2",
     "install": "^0.13.0",
     "lib-flexible": "^0.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ee9f2d..523a786 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,12 @@ dependencies:
   axios:
     specifier: ^1.6.8
     version: 1.6.8
+  echarts:
+    specifier: ^5.5.0
+    version: 5.5.0
+  echarts-liquidfill:
+    specifier: ^3.1.0
+    version: 3.1.0(echarts@5.5.0)
   element-plus:
     specifier: ^2.6.2
     version: 2.6.2(vue@3.4.21)
@@ -2273,6 +2279,21 @@ packages:
       domhandler: 5.0.3
     dev: true
 
+  /echarts-liquidfill@3.1.0(echarts@5.5.0):
+    resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
+    peerDependencies:
+      echarts: ^5.0.1
+    dependencies:
+      echarts: 5.5.0
+    dev: false
+
+  /echarts@5.5.0:
+    resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.5.0
+    dev: false
+
   /electron-to-chromium@1.4.717:
     resolution: {integrity: sha512-6Fmg8QkkumNOwuZ/5mIbMU9WI3H2fmn5ajcVya64I5Yr5CcNmO7vcLt0Y7c96DCiMO5/9G+4sI2r6eEvdg1F7A==}
     dev: true
@@ -5210,6 +5231,10 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: false
 
+  /tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
@@ -5540,3 +5565,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+  /zrender@5.5.0:
+    resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
diff --git a/src/Layout/index.vue b/src/Layout/index.vue
index 5f3c27d..bf87edf 100644
--- a/src/Layout/index.vue
+++ b/src/Layout/index.vue
@@ -4,6 +4,7 @@
     <Main />
   </div>
   <Footer />
+  <div ref="totop" v-if="show" class="gotop" @click="scrollToTop"></div>
 </template>
 
 <script lang="ts" setup>
@@ -13,18 +14,133 @@ import Tabbar from './tabbar/index.vue'
 import Main from './main/index.vue'
 // 导入底部导航栏
 import Footer from './footer/index.vue'
-import {} from 'vue'
+import { onMounted, ref } from 'vue'
+
+const totop = ref()
+const flog = ref(false)
+const show = ref(true)
+const scrollToTop = () => {
+  flog.value = true
+  const dom = document.querySelector('.gotop') as Element
+  console.log(dom)
+  totop.value.style.backgroundPosition = '-6px -145px'
+  setTimeout(() => {
+    totop.value.style.backgroundPosition = '-363px -78px'
+  }, 200)
+  setTimeout(() => {
+    totop.value.style.backgroundPosition = '-316px -78px'
+  }, 400)
+  setTimeout(() => {
+    totop.value.style.backgroundPosition = '-6px -80px'
+    totop.value.style.height = '60px'
+    // window.scrollTo({
+    //   top: 0, //回到顶部
+    //   left: 0,
+    //   behavior: 'smooth', //smooth 平滑；auto:瞬间
+    // })
+    scrollTop()
+  }, 500)
+  // flog.value = true
+}
+const scrollTop = () => {
+  var currentPosition = window.pageYOffset
+
+  if (currentPosition > 0) {
+    window.scrollTo(0, currentPosition - 40)
+    requestAnimationFrame(scrollTop)
+  } else {
+    totop.value.style.display = 'none'
+    num = 800
+    flog.value = false
+    show.value = false
+    setTimeout(() => {
+      show.value = true
+    }, 0)
+  }
+}
+let num = 800
+onMounted(() => {
+  // 页面滚动窗口监听事件
+  window.onscroll = function () {
+    let high = document.documentElement.scrollTop || document.body.scrollTop //兼容各浏览器
+    console.log(high,totop.value.offsetTop)
+
+    if (flog.value) {
+      num =  num - 20
+      totop.value.style.top = num + 'px'
+      return
+    }
+    // 获取浏览器卷去的高度
+    if (high >= 900) {
+      totop.value.style.display = 'block'
+    } else {
+      totop.value.style.display = 'none'
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>
 .main-container {
   width: 100%;
   min-height: 100vh;
-  background-color: #EEF1FB;
+  background-color: #eef1fb;
   // background-color: skyblue;
   // .container {
   //   width: $base-container-width;
   //   margin: 0 auto;
   // }
 }
+
+.gotop {
+  display: none;
+  width: 45px;
+  height: 45px;
+  z-index: 999;
+  position: fixed;
+  bottom: 50px;
+  right: 50px;
+  background-image: url('../assets/images/jinglingtu.png');
+  background-position: -264px -78px;
+  transition: top 0.2s linear;
+  animation: show 0.5s ease-in-out;
+}
+.gotop:hover {
+  transition: background-image 0.2s ease-in;
+  background-position: -215px -78px;
+}
+.bian {
+  animation: bian 0.1s ease-in-out;
+}
+.fei {
+  position: absolute;
+  // animation: fei 3s ease-in-out;
+}
+@keyframes show {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes bian {
+  0% {
+    background-position: -6px -145px;
+  }
+  100% {
+    background-position: -316px -78px;
+  }
+}
+// @keyframes fei {
+//   0% {
+
+//     bottom: 50px;
+//   }
+//   100% {
+//     top: 10%;
+//   }
+// }
 </style>
diff --git a/src/assets/icons/PPT.svg b/src/assets/icons/PPT.svg
new file mode 100644
index 0000000..40ac510
--- /dev/null
+++ b/src/assets/icons/PPT.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716623399118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33975" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M853.161077 892.549156 362.595248 892.549156l-209.432916-0.413416c-0.605797-0.001023-1.210571-0.031722-1.813299-0.092098-24.848944-2.484587-47.825238-14.060227-64.696488-32.594349-16.990976-18.665105-26.349111-42.85504-26.349111-68.112284L60.303434 264.62596c0-55.80805 45.403073-101.211123 101.211123-101.211123l691.645496 0c55.80805 0 101.2101 45.403073 101.2101 101.211123l0 225.51315c0 0.275269-0.00614 0.551562-0.01842 0.825808-0.021489 0.494257-1.971911 51.723012 15.481599 85.46244 4.716418 9.118682 1.14815 20.335141-7.970532 25.052582-9.116635 4.714372-20.335141 1.149173-25.052582-7.970532-21.300119-41.176818-19.844977-97.642854-19.618826-103.738689L917.191392 264.62596c0-35.307134-28.724205-64.031339-64.031339-64.031339L161.51558 200.594621c-35.307134 0-64.031339 28.724205-64.031339 64.031339l0 526.71105c0 32.755008 24.320918 59.957557 56.717769 63.61997l208.4311 0.412392 490.528989 0c35.307134 0 64.031339-28.725228 64.031339-64.032362l-0.382717-93.676519c-0.104377-1.749854-1.587148-19.548218-19.549242-42.499953-0.050142-0.063445-0.098237-0.125867-0.147356-0.190335L875.401614 626.481358 758.174726 471.362464c-0.415462-0.550539-38.995129-50.852178-86.271876-45.534056-38.335097 4.314259-75.954903 45.163619-108.789729 118.131491-17.615193 39.141462-34.650171 68.26885-52.082192 89.046059-17.607006 20.985964-35.679617 33.519418-55.251372 38.316677-43.422975 10.638291-81.049944-18.99461-120.886231-50.372248l-5.057179-3.980661c-46.555315-36.57808-68.750827-28.223808-158.330028 59.60247-7.330966 7.187703-19.101033 7.071046-26.288736-0.25992-7.187703-7.330966-7.071046-19.101033 0.25992-26.287713 46.658669-45.74588 77.544097-72.726372 107.085924-84.282568 33.357735-13.048177 64.274886-6.266727 100.242052 21.99392l5.092995 4.00829c33.9226 26.719548 63.219857 49.795103 89.028663 43.466977 25.618471-6.279007 53.30095-42.114167 82.279958-106.508779 39.139415-86.97591 85.837994-134.027529 138.79716-139.849118 68.454068-7.515161 117.823476 57.404408 119.891578 60.171428l117.122511 154.980747 21.599947 28.343535c26.276457 33.630958 27.333532 61.638849 27.367301 64.72514 0.001023 0.042979 0.001023 0.084934 0.001023 0.127913l0.38374 94.059236C954.371176 847.146083 908.969127 892.549156 853.161077 892.549156z" fill="#0052FF" p-id="33976"></path><path d="M312.328401 446.967868c-42.324968 0-76.759221-34.434254-76.759221-76.759221s34.434254-76.759221 76.759221-76.759221 76.759221 34.434254 76.759221 76.759221S354.654392 446.967868 312.328401 446.967868zM312.328401 330.628186c-21.824051 0-39.579437 17.755386-39.579437 39.579437s17.755386 39.579437 39.579437 39.579437 39.579437-17.755386 39.579437-39.579437S334.153476 330.628186 312.328401 330.628186z" fill="#0052FF" p-id="33977"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/六边形2号.svg b/src/assets/icons/六边形2号.svg
new file mode 100644
index 0000000..7c5d262
--- /dev/null
+++ b/src/assets/icons/六边形2号.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716623155547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27317" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M736.3 123.5H287.7L63.5 512l224.3 388.5h448.5L960.5 512 736.3 123.5z m-21.3 740H309L106.1 512l203-351.5H715L918 512 715 863.5z" fill="#A984F6" p-id="27318" data-spm-anchor-id="a313x.search_index.0.i27.35da3a81FVUKRU" class="selected"></path><path d="M715 160.5H309L106.1 512l203 351.5H715L918 512 715 160.5z m-13.4 679.9H322.4L132.8 512l189.6-328.4h379.2L891.2 512 701.6 840.4z" fill="#e6e6e6" p-id="27319"></path><path d="M701.6 183.6H322.4L132.8 512l189.6 328.4h379.2L891.2 512z" fill="#d8c9fa" p-id="27320" data-spm-anchor-id="a313x.search_index.0.i26.35da3a81FVUKRU" class="selected"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/博士帽.svg b/src/assets/icons/博士帽.svg
new file mode 100644
index 0000000..3cd4051
--- /dev/null
+++ b/src/assets/icons/博士帽.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716622721837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2719" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M865.92 420.48h50.346667v161.28h-50.346667z" fill="#FF354A" p-id="2720"></path><path d="M876.16 627.84l-32.853333-32.853333a21.248 21.248 0 0 1 0-30.08l32.853333-32.853334a21.248 21.248 0 0 1 30.08 0l32.853333 32.853334c8.32 8.32 8.32 21.76 0 30.08l-32.853333 32.853333a21.248 21.248 0 0 1-30.08 0z" fill="#FF354A" p-id="2721"></path><path d="M744.96 809.173333l-83.2 37.76a377.898667 377.898667 0 0 1-312.96 0l-83.2-37.76a64.021333 64.021333 0 0 1-37.546667-58.24V363.52h554.453334v387.2c0 25.173333-14.72 48-37.546667 58.453333z" fill="#FCCA1E" p-id="2722"></path><path d="M895.36 440.32l-331.306667 165.333333c-37.12 18.56-80.64 18.56-117.546666 0L114.986667 440.32c-48.64-24.32-48.64-93.653333 0-117.973333l331.306666-165.333334c37.12-18.56 80.64-18.56 117.546667 0l331.306667 165.333334c48.853333 24.32 48.853333 93.653333 0.213333 117.973333z" fill="#2953FF" p-id="2723"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/排序.svg b/src/assets/icons/排序.svg
new file mode 100644
index 0000000..5f15279
--- /dev/null
+++ b/src/assets/icons/排序.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716626959532" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51794" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M768 362.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v387.648l61.418667-61.397333a21.333333 21.333333 0 0 1 30.165333 0l30.165334 30.165333a21.333333 21.333333 0 0 1 0 30.165333l-116.053334 116.053334a53.333333 53.333333 0 0 1-90.922666-34.218667L704 848.917333V384a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667zM554.666667 789.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H128a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h426.666667z m0-320a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H128a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h426.666667zM896 149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H128a21.333333 21.333333 0 0 1-21.333333-21.333334V170.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h768z" fill="#333333" p-id="51795" data-spm-anchor-id="a313x.search_index.0.i54.35da3a81FVUKRU" class="selected"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/文本.svg b/src/assets/icons/文本.svg
new file mode 100644
index 0000000..7869124
--- /dev/null
+++ b/src/assets/icons/文本.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716623474900" class="icon" viewBox="0 0 1055 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36129" xmlns:xlink="http://www.w3.org/1999/xlink" width="131.875" height="128"><path d="M572.416 68.608q10.24 1.024 22.016 9.728t21.504 22.016 15.872 30.208 6.144 33.28q0 14.336-6.144 30.208t-15.872 29.696-21.504 22.528-22.016 9.728l-191.488 0 0 637.952q-2.048 26.624-14.336 45.568t-48.128 18.944q-22.528 0-41.472-14.848t-20.992-49.664l0-637.952-188.416 0q-18.432 0-30.208-8.192t-19.456-21.504-11.264-29.696-5.632-32.768q0-16.384 5.12-33.28t13.824-30.72 20.992-22.528 26.624-8.704l504.832 0zM970.752 258.048q-13.312 2.048-16.384 9.216t-3.072 20.48q0 15.36 0.512 39.424t1.024 50.688 0.512 51.2l0 39.936q1.024 10.24-2.048 20.48l0 3.072q0 11.264 0.512 43.008t0.512 69.12 0.512 71.168 0.512 48.128q0 19.456 4.096 30.72t18.432 11.264l46.08 0q18.432 0 23.552 9.728t-8.192 25.088q-12.288 15.36-28.672 36.864t-33.792 44.032-34.304 44.032-30.208 37.888q-12.288 15.36-23.04 15.872t-24.064-13.824q-12.288-15.36-28.672-35.328t-33.792-41.472-34.304-42.496-30.208-37.376q-15.36-17.408-12.288-29.184t22.528-11.776q11.264 0 29.696-0.512t30.72-1.536q12.288 0 15.36-7.168t3.072-21.504l0-49.152q0-34.816-0.512-73.216t-1.024-73.216-0.512-50.176q0-9.216 3.072-18.432l0-5.12q0-10.24-0.512-31.744t-1.024-46.592-0.512-49.664l0-37.888q0-20.48-3.584-31.232t-17.92-10.752q-11.264 0-23.552-1.024t-23.552-1.024q-17.408 2.048-23.04-8.192t6.656-26.624q12.288-15.36 29.184-36.352t34.304-43.52 33.792-44.032 29.696-37.888q13.312-15.36 24.064-15.872t23.04 13.824q12.288 15.36 29.184 35.328t34.304 41.472 34.304 41.984 30.208 36.864q15.36 18.432 12.288 30.208t-22.528 11.776q-11.264-1.024-29.696 0t-30.72 1.024z" p-id="36130" fill="#0052FF"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/案例.svg b/src/assets/icons/案例.svg
new file mode 100644
index 0000000..93a47f4
--- /dev/null
+++ b/src/assets/icons/案例.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716623502952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37364" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M761.1 465.5H289.7c-17.4 0-31.4-14.1-31.4-31.4s14.1-31.4 31.4-31.4h471.5c17.4 0 31.4 14.1 31.4 31.4s-14.1 31.4-31.5 31.4zM642.9 619.2H289.7c-17.4 0-31.4-14.1-31.4-31.4s14.1-31.4 31.4-31.4h353.2c17.4 0 31.4 14.1 31.4 31.4s-14.1 31.4-31.4 31.4zM524.9 786.8H289.7c-17.4 0-31.4-14.1-31.4-31.4s14.1-31.4 31.4-31.4h235.2c17.4 0 31.4 14.1 31.4 31.4s-14 31.4-31.4 31.4z" fill="#0052FF" p-id="37365"></path><path d="M702 194.8c0-97.8-79.3-99-177.1-99s-177.1 1.2-177.1 99v62.9H702v-62.9z" fill="#0052FF" p-id="37366"></path><path d="M860.2 159.3H729.7c-19.8-94.7-121.3-95-204.8-95-83.5 0-185.1 0.3-204.9 95H166c-28.9 0-52.4 23.5-52.4 52.4v695.5c0 28.9 23.5 52.4 52.4 52.4h694.1c28.9 0 52.4-23.5 52.4-52.4V211.7c0-28.9-23.4-52.4-52.3-52.4z m-481 35.5c0-59.2 31-67.6 145.7-67.6 114.6 0 145.7 8.4 145.7 67.6v31.4H379.2v-31.4z m470.5 701.9H176.6V222.2h139.8V289h417.1v-66.9h116.2v674.6z" fill="#0052FF" p-id="37367"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/测试.svg b/src/assets/icons/测试.svg
new file mode 100644
index 0000000..c994e3c
--- /dev/null
+++ b/src/assets/icons/测试.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716623525515" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38462" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M191.41 804.42h666.84v53.47H191.41zM915.23 713h-781a27.93 27.93 0 0 1-27.9-27.9V181.19a27.93 27.93 0 0 1 27.9-27.9h781a27.93 27.93 0 0 1 27.9 27.9v503.93a27.93 27.93 0 0 1-27.9 27.88z m-755.4-53.47h729.84V206.76H159.83z" p-id="38463" fill="#0052FF"></path><path d="M438.86 532.76l-101.42-99.58 101.23-107.27 19.44 18.34-83.23 88.22 82.71 81.21-18.73 19.08zM610.66 532.39l-19.44-18.35 83.24-88.21-82.72-81.21 18.73-19.08 101.42 99.58-101.23 107.27zM485.71 533.518l51.957-208.854 25.94 6.453-51.958 208.854z" p-id="38464" fill="#0052FF"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/知识点.svg b/src/assets/icons/知识点.svg
new file mode 100644
index 0000000..8fa2be9
--- /dev/null
+++ b/src/assets/icons/知识点.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716622925767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14391" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M208 246.4h732.8v630.4H208V246.4z" fill="#BADEFA" p-id="14392"></path><path d="M659.2 67.2C601.6 67.2 544 96 512 144c-32-44.8-89.6-76.8-147.2-76.8H105.6C64 67.2 32 102.4 32 144v675.2c0 41.6 32 73.6 73.6 73.6h265.6c35.2 35.2 89.6 64 140.8 64 51.2 0 102.4-28.8 137.6-64h268.8c41.6 0 73.6-32 73.6-73.6V144c0-41.6-32-76.8-73.6-76.8H659.2z m256 748.8c-6.4 6.4-25.6 6.4-25.6 6.4h-256c-9.6 0-19.2 6.4-28.8 12.8-22.4 28.8-54.4 41.6-89.6 41.6-35.2 0-67.2-16-89.6-41.6-6.4-6.4-19.2-12.8-28.8-12.8H134.4s-16 3.2-25.6-6.4c-9.6-9.6-9.6-28.8-9.6-28.8V176s3.2-19.2 9.6-25.6c6.4-6.4 25.6-9.6 25.6-9.6h227.2c60.8 0 112 51.2 112 112v316.8c0 19.2 19.2 38.4 38.4 38.4s38.4-19.2 38.4-38.4v-320c0-60.8 51.2-112 112-112h227.2s19.2 0 25.6 9.6c6.4 9.6 9.6 25.6 9.6 25.6v617.6s0 19.2-9.6 25.6z" fill="#2095F3" p-id="14393"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/简介.svg b/src/assets/icons/简介.svg
new file mode 100644
index 0000000..b9c1022
--- /dev/null
+++ b/src/assets/icons/简介.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716623342297" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32876" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M782.933333 938.666667H241.066667c-76.8 0-138.666667-61.866667-138.666667-138.666667v-576C102.4 147.2 164.266667 85.333333 241.066667 85.333333h541.866666c76.8 0 138.666667 61.866667 138.666667 138.666667v576c0 76.8-61.866667 138.666667-138.666667 138.666667zM241.066667 149.333333c-40.533333 0-74.666667 34.133333-74.666667 74.666667v576c0 40.533333 34.133333 74.666667 74.666667 74.666667h541.866666c40.533333 0 74.666667-34.133333 74.666667-74.666667v-576c0-40.533333-34.133333-74.666667-74.666667-74.666667H241.066667z" fill="#0052FF" p-id="32877"></path><path d="M716.8 362.666667H307.2c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h409.6c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32zM631.466667 544H307.2c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h324.266667c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32zM537.6 725.333333H307.2c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h230.4c17.066667 0 32 14.933333 32 32S554.666667 725.333333 537.6 725.333333z" fill="#0052FF" p-id="32878"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/视频.svg b/src/assets/icons/视频.svg
new file mode 100644
index 0000000..6524bc8
--- /dev/null
+++ b/src/assets/icons/视频.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716623450468" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35068" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M793.6 972.8l-563.2 0c-113.1008 0-204.8-91.6992-204.8-204.8L25.6 256c0-113.1008 91.6992-204.8 204.8-204.8l563.2 0c113.1008 0 204.8 91.6992 204.8 204.8l0 512C998.4 881.1008 906.7008 972.8 793.6 972.8zM947.2 286.72c0-101.7856-82.5344-184.32-184.32-184.32L261.12 102.4C159.3344 102.4 76.8 184.9344 76.8 286.72l0 450.56c0 101.7856 82.5344 184.32 184.32 184.32l501.76 0c101.7856 0 184.32-82.5344 184.32-184.32L947.2 286.72zM384 308.224l307.2 203.776-307.2 203.776L384 308.224z" fill="#0052FF" p-id="35069"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/jinglingtu.png b/src/assets/images/jinglingtu.png
new file mode 100644
index 0000000..8e1a58e
Binary files /dev/null and b/src/assets/images/jinglingtu.png differ
diff --git a/src/permissions.ts b/src/permissions.ts
index f3d07e3..6d6d78a 100644
--- a/src/permissions.ts
+++ b/src/permissions.ts
@@ -4,12 +4,15 @@ import pinia  from './store'
 import { constRouter } from '@/router/module/constRouter'
 import useSettingStore from '@/store/module/setting'
 const settingStore = useSettingStore(pinia) //重新指向pinia仓储
-router.beforeEach((to, from, next) => {
-    console.log(from)
+router.beforeEach((to, _from, next) => {
     let index = constRouter[0].children.findIndex((item:any) => {
+        console.log(to.path,item.path);
+        
        return to.path.includes(item.path)
         
     });  
+    console.log(index);
+    
     settingStore.setuseIndex(index)
     document.title = `教学一体化-${to.meta.title}`
     next()
diff --git a/src/router/module/constRouter/index.ts b/src/router/module/constRouter/index.ts
index e7d80a0..0c653a4 100644
--- a/src/router/module/constRouter/index.ts
+++ b/src/router/module/constRouter/index.ts
@@ -53,9 +53,9 @@ export const constRouter: any = [
         },
       },
       {
-        path: '/pedagogicalReform', // 科学研究
-        component: () => import('@/views/pedagogicalReform/index.vue'),
-        name: 'PedagogicalReform',
+        path: '/scientificResearch', // 科学研究
+        component: () => import('@/views/scientificResearch/index.vue'),
+        name: 'CcientificResearch',
         meta: {
           icon: '',
           title: '科学研究',
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8099ce1..1f53d04 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -27,7 +27,7 @@ import {} from 'vue'
 
 <style lang="scss" scoped>
 .view-container {
-  height: 100%;
+  height: 5000px;
   // background-color: #2080f7;
   .container {
     width: $base-container-width;
diff --git a/src/views/professionalProfile/components/index.js b/src/views/professionalProfile/components/index.js
new file mode 100644
index 0000000..50f09a4
--- /dev/null
+++ b/src/views/professionalProfile/components/index.js
@@ -0,0 +1,217 @@
+function newstypeonc(x) {
+  al = document.getElementById('newstypenum').innerHTML
+  for (i = 1; i < al; i++) {
+    document.getElementById('newstypea' + i).className = ''
+    document.getElementById('newsmain' + i).style.display = 'none'
+  }
+  document.getElementById('newstypea' + x).className = 'a1'
+  document.getElementById('newsmain' + x).style.display = ''
+}
+
+function shopda() {
+  t = document.getElementById('shopdat1').value
+  if (t == '') {
+    alert('请输入有效的QQ或手机号码')
+    document.getElementById('shopdat1').select()
+    return false
+  }
+  $.get(
+    document.getElementById('webhttp').innerHTML +
+      'tem/moban/ymk/tem/niushop.php',
+    { k: t },
+    function (result) {
+      if (result == 'err1') {
+        alert('没有找到对应的店铺')
+        return false
+      } else {
+        location.href =
+          document.getElementById('webhttp').innerHTML +
+          'shop/view' +
+          result +
+          '.html'
+        return false
+      }
+    },
+  )
+}
+
+function proaover(x) {
+  for (i = 1; i < document.getElementById('protypenum').innerHTML; i++) {
+    document.getElementById('promain' + i).style.display = 'none'
+    document.getElementById('proa' + i).className = ''
+  }
+  document.getElementById('promain' + x).style.display = ''
+  document.getElementById('proa' + x).className = 'a1'
+  switch (x) {
+    case 1:
+      for (let i = 2; i <= 6; i++) {
+        const N = 10
+        const gData = {
+          nodes: [...Array(N).keys()].map((i) => ({ id: i })),
+          links: [...Array(N).keys()]
+            .filter((id) => id)
+            .map((id) => ({
+              source: id,
+              target: Math.round(Math.random() * (id - 1)),
+            })),
+        }
+        const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i))
+          .width(200)
+          .height(200)
+        Graph.graphData(gData)
+      }
+      break
+    case 2:
+      for (let i = 8; i <= 12; i++) {
+        const N = 10
+        const gData = {
+          nodes: [...Array(N).keys()].map((i) => ({ id: i })),
+          links: [...Array(N).keys()]
+            .filter((id) => id)
+            .map((id) => ({
+              source: id,
+              target: Math.round(Math.random() * (id - 1)),
+            })),
+        }
+        const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i))
+          .width(200)
+          .height(200)
+        Graph.graphData(gData)
+      }
+      break
+    case 3:
+      for (let i = 14; i <= 18; i++) {
+        const N = 10
+        const gData = {
+          nodes: [...Array(N).keys()].map((i) => ({ id: i })),
+          links: [...Array(N).keys()]
+            .filter((id) => id)
+            .map((id) => ({
+              source: id,
+              target: Math.round(Math.random() * (id - 1)),
+            })),
+        }
+        const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i))
+          .width(200)
+          .height(200)
+        Graph.graphData(gData)
+      }
+      break
+    case 4:
+      for (let i = 20; i <= 24; i++) {
+        const N = 10
+        const gData = {
+          nodes: [...Array(N).keys()].map((i) => ({ id: i })),
+          links: [...Array(N).keys()]
+            .filter((id) => id)
+            .map((id) => ({
+              source: id,
+              target: Math.round(Math.random() * (id - 1)),
+            })),
+        }
+        const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i))
+          .width(200)
+          .height(200)
+        Graph.graphData(gData)
+      }
+      break
+    case 5:
+      for (let i = 26; i <= 30; i++) {
+        const N = 10
+        const gData = {
+          nodes: [...Array(N).keys()].map((i) => ({ id: i })),
+          links: [...Array(N).keys()]
+            .filter((id) => id)
+            .map((id) => ({
+              source: id,
+              target: Math.round(Math.random() * (id - 1)),
+            })),
+        }
+        const Graph = ForceGraph3D()(document.getElementById('3d-graph' + i))
+          .width(200)
+          .height(200)
+        Graph.graphData(gData)
+      }
+      break
+  }
+}
+
+function serveover(x) {
+  for (i = 1; i < 3; i++) {
+    document.getElementById('servermain' + i).style.display = 'none'
+    document.getElementById('servea' + i).className = ''
+  }
+  document.getElementById('servermain' + x).style.display = ''
+  document.getElementById('servea' + x).className = 'a1'
+}
+
+function idldl() {
+  $.get('tem/sesCheck.php', {}, function (result) {
+    if (result == '0') {
+      document.getElementById('u1no').style.display = ''
+      document.getElementById('u1ok').style.display = 'none'
+    } else {
+      document.getElementById('u1no').style.display = 'none'
+      document.getElementById('u1ok').style.display = ''
+      a = result.split(' ')
+      document.getElementById('itouxiang').src = a[3]
+      document.getElementById('iuserid').innerHTML = a[0]
+    }
+  })
+}
+//切换
+function banner() {
+  var bn_id = 0
+  var bn_id2 = 1
+  var speed33 = 10000
+  var qhjg = 1
+  var MyMar33
+  $('#banner .d1').hide()
+  $('#banner .d1').eq(0).fadeIn('slow')
+  if ($('#banner .d1').length > 1) {
+    $('#banner_id li').eq(0).addClass('nuw')
+    function Marquee33() {
+      bn_id2 = bn_id + 1
+      if (bn_id2 > $('#banner .d1').length - 1) {
+        bn_id2 = 0
+      }
+      $('#banner .d1').eq(bn_id).css('z-index', '2')
+      $('#banner .d1').eq(bn_id2).css('z-index', '1')
+      $('#banner .d1').eq(bn_id2).show()
+      $('#banner .d1').eq(bn_id).fadeOut('slow')
+      $('#banner_id li').removeClass('nuw')
+      $('#banner_id li').eq(bn_id2).addClass('nuw')
+      bn_id = bn_id2
+    }
+
+    MyMar33 = setInterval(Marquee33, speed33)
+
+    $('#banner_id li').click(function () {
+      var bn_id3 = $('#banner_id li').index(this)
+      if (bn_id3 != bn_id && qhjg == 1) {
+        qhjg = 0
+        $('#banner .d1').eq(bn_id).css('z-index', '2')
+        $('#banner .d1').eq(bn_id3).css('z-index', '1')
+        $('#banner .d1').eq(bn_id3).show()
+        $('#banner .d1')
+          .eq(bn_id)
+          .fadeOut('slow', function () {
+            qhjg = 1
+          })
+        $('#banner_id li').removeClass('nuw')
+        $('#banner_id li').eq(bn_id3).addClass('nuw')
+        bn_id = bn_id3
+      }
+    })
+    $('#banner_id').hover(
+      function () {
+        clearInterval(MyMar33)
+      },
+      function () {
+        MyMar33 = setInterval(Marquee33, speed33)
+      },
+    )
+  } else {
+    $('#banner_id').hide()
+  }
+}
diff --git a/src/views/professionalProfile/index.vue b/src/views/professionalProfile/index.vue
index 7dae0f5..d0fbdbb 100644
--- a/src/views/professionalProfile/index.vue
+++ b/src/views/professionalProfile/index.vue
@@ -6,10 +6,118 @@
       <div class="graph-box">
         <div class="graph">
           <!-- <div id="3d-graph"></div> -->
-          <professionalProfile :width="1332":height="1332" />
+          <professionalProfile :width="1332" :height="1332" />
+        </div>
+        <div class="left-info">
+          <div class="top-content">
+            <div class="left-content">
+              <div class="echates-title">知识点掌握百分比</div>
+              <div id="liquidfill" style="width: 100px; height: 100px"></div>
+            </div>
+            <div class="right-search">
+              <div class="search">
+                <el-icon><Search /></el-icon>
+                <input type="text" placeholder="输入知识点进行搜索" />
+              </div>
+              <div class="knowledge-points">
+                <div class="left">
+                  <SvgIcon name="博士帽" width="32" height="32" />
+                  <div class="text">核心知识点</div>
+                </div>
+                <div class="right">
+                  <SvgIcon name="知识点" width="32" height="32" />
+                  <div class="text">易错知识点</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="knowledge-ranking">
+            <div class="knowledg-title">
+              <div style="display: flex; align-items: center">
+                <div class="left-icon"></div>
+                <div class="content-text">知识点学掌握情况</div>
+              </div>
+              <div class="right-icon"><SvgIcon name="排序" /></div>
+            </div>
+            <div class="knowledg-list">
+              <el-scrollbar height="500px">
+                <div class="item" v-for="item in 15" :key="item">
+                  <div class="item-title">
+                    <div class="left">
+                      <div class="icon">
+                        <SvgIcon
+                          name="六边形2号"
+                          width="24"
+                          height="24"
+                        ></SvgIcon>
+                        <div class="index">{{ item }}</div>
+                      </div>
+                      A10软件管理MGT
+                    </div>
+                    <div class="right">掌握比：30%</div>
+                  </div>
+                  <div class="progress-bar">
+                    <el-progress :percentage="50" />
+                  </div>
+                </div>
+              </el-scrollbar>
+            </div>
+          </div>
         </div>
         <div class="edit-atlas" @click="goToEditAtlas">编辑图谱</div>
-        <div class="large-screen" @click="goToLargeScreen"><el-icon><FullScreen /></el-icon></div>
+        <div class="large-screen" @click="goToLargeScreen">
+          <el-icon><FullScreen /></el-icon>
+        </div>
+      </div>
+      <div class="introduction-resources">
+        <div class="title">中心知识点资源</div>
+        <div class="tab-column">
+          <ul>
+            <li
+              @click="tabIndex = index"
+              v-for="(item, index) in tabSgv"
+              :key="index"
+            >
+              <SvgIcon width="40px" height="30px" :name="item"></SvgIcon>
+              <div class="text">{{ item }}</div>
+              <div v-if="tabIndex === index" class="active"></div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="basicinformation">
+      <div class="man-in">
+        <div class="info-title">基本信息</div>
+        <p class="content">
+          软件工程是一门涵盖软件开发、测试、部署和维护等方面的学科和实践。随着信息技术的迅猛发展，软件已经成为现代社会的基石，而软件工程旨在提供一种系统化和可靠的方法来开发和维护高质量的软件系统。
+          在软件工程中，开发一个软件系统需要经历一系列的阶段和过程。
+          <br />
+          首先，需求分析阶段涉及与利益相关者交流，收集和理解用户的需求和期望。在这个阶段，需求工程师将问题域转化为明确的软件需求规范，为后续开发提供指导。
+        </p>
+        <div class="info-title">简介</div>
+        <p class="content">
+          接下来是系统设计阶段，软件工程师根据需求规范设计软件系统的整体架构和模块结构。设计过程中，需要考虑系统的可扩展性、可维护性、安全性和性能等方面。设计阶段通常包括概要设计和详细设计两个层次，以确保软件系统的功能和结构得到准确定义。
+          <br />
+          随后是编码和单元测试阶段，开发人员根据设计规范将系统实现为源代码，并进行单元测试以验证每个单元的正确性。单元测试是一种测试方法，用于验证单个模块或组件的功能和逻辑正确性。
+        </p>
+        <div class="info-title">章节</div>
+        <p class="content" style="text-indent: 0;">
+          第一章 完成编码和单元测试后
+          <br />
+          第二章 完成编码和单元测试后
+          <br />
+          第三章 完成编码和单元测试后
+          <br />
+          第一章 完成编码和单元测试后
+          <br />
+          第一章 完成编码和单元测试后
+          <br />
+          第一章 完成编码和单元测试后
+          <br />
+          第一章 完成编码和单元测试后
+          <br />
+        </p>
       </div>
     </div>
   </div>
@@ -18,6 +126,70 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
 import professionalProfile from './components/KnowledgeGraph.vue'
+import { onMounted, markRaw, ref } from 'vue'
+import * as echarts from 'echarts'
+import 'echarts-liquidfill'
+const tabSgv = ref<any>(['简介', 'PPT', '视频', '文本', '案例', '测试'])
+const tabIndex = ref<any>(0)
+onMounted(() => {
+  const chartInstance: any = ref(null)
+  const updateChart = () => {
+    chartInstance.value = markRaw(
+      echarts.init(document?.getElementById(`liquidfill`)),
+    )
+    const option = {
+      series: [
+        {
+          name: '自定义盒子',
+          type: 'liquidFill',
+          phase: 0.1,
+          amplitude: 10,
+          data: [
+            {
+              value: 0.6,
+              itemStyle: {
+                color: '#136CEA',
+              },
+            },
+            {
+              value: 0.4,
+              itemStyle: {
+                color: '#4D8EE8',
+              },
+            },
+          ],
+          radius: '95%',
+          // 波浪颜色
+          itemStyle: {
+            shadowBlur: 5,
+          },
+          backgroundStyle: {
+            color: 'rgba(5, 108, 252, 0.1)',
+            borderWidth: 2,
+            borderColor: '#0052FF',
+          },
+
+          outline: {
+            show: false,
+          },
+          // 水波图标签配置
+          label: {
+            show: true,
+            align: 'center',
+            distance: 50,
+            color: '#05FCF6',
+            fontSize: '24px',
+            insideColor: '#0052FF ',
+          },
+        },
+      ],
+    }
+    chartInstance.value.setOption(option, true)
+    chartInstance?.value?.resize()
+  }
+  updateChart()
+})
+
 const $router = useRouter()
 const goToEditAtlas = () => {
   $router.push({ name: 'EditAtlas' })
@@ -37,6 +209,7 @@ const goToLargeScreen = () => {
 }
 
 .view-container {
+  background-color: #fff;
   // height: 100vh;
   // background-color: #2080f7;
 
@@ -51,6 +224,19 @@ const goToLargeScreen = () => {
     font-weight: 700;
     text-align: center;
     padding: 30px;
+    display: flex;
+    margin-top: 40px;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    &::after {
+      content: ' ';
+      width: 52px;
+      height: 7px;
+      display: block;
+      background-color: #0052ff;
+      margin-top: 24px;
+    }
   }
   .graph-box {
     position: relative;
@@ -70,26 +256,253 @@ const goToLargeScreen = () => {
     }
     .edit-atlas {
       top: 0;
-      right: 5%;
+      left: 5%;
       position: absolute;
       font-size: 16px;
       color: #6da0ff;
       cursor: pointer;
     }
-    .large-screen{
+    .large-screen {
       font-size: 16px;
       top: 10px;
-      right: 17%;
+      left: 17%;
       position: absolute;
       font-size: 16px;
       color: #000000;
       cursor: pointer;
       transition: transform 0.3s ease; /* 过渡效果，持续时间为0.3秒，速度为ease */
     }
-    .large-screen:hover{
+    .large-screen:hover {
       transform: scale(1.5); /* 鼠标悬停时放大1.1倍 */
     }
+    .left-info {
+      position: absolute;
+      top: 0;
+      right: 140px;
+      height: 100%;
+      width: 400px;
+      background-color: #fff;
+      z-index: 99;
+      padding: 26px;
+      .top-content {
+        width: 100%;
+        height: 130px;
+        display: flex;
+        .left-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          // align-items: center;
+          justify-content: center;
+          width: 150px;
+          height: 100%;
+          // background-color: skyblue;
+          .echates-title {
+            color: #333;
+            font-size: 14px;
+            font-weight: 700;
+            margin-bottom: 10px;
+          }
+        }
+        .right-search {
+          flex: 1;
+          margin-left: 27px;
+          // background-color: green;
+          .search {
+            width: 100%;
+            height: 40px;
+            background-image: linear-gradient(
+              270deg,
+              rgba(165, 173, 255, 1),
+              rgba(231, 233, 255, 1)
+            );
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            padding: 0 10px;
+            input {
+              border: none;
+              background-color: transparent;
+              margin-left: 5px;
+              // font-size: 14px;
+            }
+            i {
+              font-size: 16px;
+            }
+          }
+        }
+        .knowledge-points {
+          margin-top: 10px;
+          display: flex;
+          justify-content: space-between;
+          .left,
+          .right {
+            width: 85px;
+            height: 80px;
+            border-radius: 10px;
+            background-color: #fff;
+            padding: 10px;
+            box-shadow:
+              4.1px 2px 10px rgba(0, 0, 0, 0.035),
+              33px 16px 80px rgba(0, 0, 0, 0.07);
+            .text {
+              font-weight: 700;
+              margin-top: 7px;
+            }
+          }
+        }
+      }
+      .knowledge-ranking {
+        margin-top: 20px;
+        width: 100%;
+        height: 550px;
+        // background-color: pink;
+        .knowledg-title {
+          padding-right: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 38px;
+          background-image: linear-gradient(
+            90deg,
+            rgba(165, 173, 255, 1),
+            rgba(231, 233, 255, 1)
+          );
+          .left-icon {
+            width: 4px;
+            height: 21px;
+            background-color: #f3986e;
+            margin-left: -2px;
+          }
+          .content-text {
+            margin-left: 15px;
+            font-size: 14px;
+            font-weight: 700;
+          }
+          .right-icon {
+            cursor: pointer;
+          }
+        }
+        .knowledg-list {
+          margin-top: 20px;
+          .item {
+            .item-title {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .left {
+                display: flex;
+                align-items: center;
+                .icon {
+                  position: relative;
+                  .index {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    color: #fff;
+                  }
+                }
+              }
+              .right {
+                color: #a984f6;
+              }
+            }
+            .progress-bar {
+              margin-top: 6px;
+              height: 16px;
+              background-color: #eff2fc;
+              padding: 0 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .introduction-resources {
+    .tab-column {
+      width: 100%;
+      ul {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 200px;
+        li {
+          position: relative;
+          width: 80px;
+          display: flex;
+          height: 115px;
+          align-items: center;
+          flex-direction: column;
+          justify-content: center;
+          cursor: pointer;
+          .text {
+            width: 100%;
+            text-align: center;
+            margin-top: 10px;
+            color: #333333;
+            font-size: 18px;
+            padding-left: 5px;
+          }
+          .active {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 6px;
+            background-color: #0052ff;
+          }
+        }
+      }
+    }
+  }
+  .basicinformation {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    // height: 500px;
+    background-color: #f9f9ff;
+    .man-in {
+      width: 1200px;
+      margin: 0 auto;
+      padding-top: 60px;
+      .info-title {
+        font-size: 24px;
+        font-weight: 700;
+        color: #333333;
+        height: 26px;
+        display: flex;
+        align-items: center;
+        &::before {
+          content: ' ';
+          display: block;
+          height: 100%;
+          width: 4px;
+          background-color: #333;
+          margin-right: 7px;
+        }
+        &:not(:first-of-type) {
+          margin-top: 50px;
+        }
+      }
+      .content {
+        margin-top: 30px;
+        text-indent: 4ch;
+        line-height: 38px;
+        font-size: 16px;
+        color: #333;
+      }
+    }
   }
 }
-
+::v-deep .el-progress__text {
+  display: none;
+}
+::v-deep .el-progress-bar {
+  transform: translateY(6px);
+}
+::v-deep .el-progress-bar__inner {
+  height: 4px;
+  background-image: linear-gradient(90deg, #8ceef2, #a9adff);
+}
 </style>