diff --git a/front/src/api/home.js b/front/src/api/home.js
index 2f536134..8a0d6787 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -199,7 +199,14 @@ export function updateVisits(params) {
     params,
   })
 }
-
+// 保存浏览记录
+export function browsingInsert(data) {
+  return request({
+    url: '/resourceBrowse/insert',
+    method: 'post',
+    data,
+  })
+}
 // 最新能力
 export function selectNewest(data) {
   return request({
diff --git a/front/src/views/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index b870c33b..bb7a9b71 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -10,182 +10,159 @@
     <!-- 头部基本信息 -->
     <algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
     <!-- 导航 -->
-    <algorithm-navigation
-      :dataList="dataList.data"
-      :class="{ fixed: scrollTop >= 600 }"
-      :selectNow="selectNow"
-    ></algorithm-navigation>
+    <algorithm-navigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
+    </algorithm-navigation>
     <!-- 关联能力 -->
-    <algorithm-associated-ability
-      v-if="!loading"
-      :associatedComponents="associatedComponents"
-      id="algorithm-associated-ability"
-      class="scrollBox"
-    ></algorithm-associated-ability>
+    <algorithm-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
+      id="algorithm-associated-ability" class="scrollBox"></algorithm-associated-ability>
     <!-- 算法展示  视频 -->
-    <algorithm-display
-      :dataList="dataList.data"
-      id="algorithm-display"
-      class="scrollBox"
-    ></algorithm-display>
+    <algorithm-display :dataList="dataList.data" id="algorithm-display" class="scrollBox"></algorithm-display>
     <!-- 算法优势 -->
-    <algorithm-advantage
-      :dataList="dataList.data"
-      id="algorithm-advantage"
-      class="scrollBox"
-    ></algorithm-advantage>
+    <algorithm-advantage :dataList="dataList.data" id="algorithm-advantage" class="scrollBox"></algorithm-advantage>
     <!-- 应用场景和应用案例 -->
     <!-- <application-scenarios-and-case
       id="application-scenarios-and-case"
       class="scrollBox"
     ></application-scenarios-and-case> -->
-    <algorithm-application-scenarios
-      :dataList="dataList.data"
-      id="application-scenarios"
-      class="scrollBox"
-    ></algorithm-application-scenarios>
-    <algorithm-application-case
-      :dataList="dataList.data"
-      id="application-case"
-      class="scrollBox"
-    ></algorithm-application-case>
+    <algorithm-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
+    </algorithm-application-scenarios>
+    <algorithm-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
+    </algorithm-application-case>
     <!-- 算法试用 -->
-    <algorithm-on-trial
-      :dataList="dataList.data"
-      id="algorithm-on-trial"
-      class="scrollBox"
-    ></algorithm-on-trial>
+    <algorithm-on-trial :dataList="dataList.data" id="algorithm-on-trial" class="scrollBox"></algorithm-on-trial>
     <!-- 计费标准 -->
-    <algorithm-charging-standard
-      :dataList="dataList.data"
-      id="charging-standard"
-      class="scrollBox"
-    ></algorithm-charging-standard>
+    <algorithm-charging-standard :dataList="dataList.data" id="charging-standard" class="scrollBox">
+    </algorithm-charging-standard>
     <!-- 使用方式 -->
-    <algorithm-usage-mode
-      :dataList="dataList.data"
-      id="usage-mode"
-      class="scrollBox"
-    ></algorithm-usage-mode>
+    <algorithm-usage-mode :dataList="dataList.data" id="usage-mode" class="scrollBox"></algorithm-usage-mode>
     <!-- 常见问题-->
-    <algorithm-common-problem
-      :dataList="dataList.data"
-      id="common-problem"
-      class="scrollBox"
-    ></algorithm-common-problem>
+    <algorithm-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
+    </algorithm-common-problem>
   </div>
 </template>
 <script setup>
-  import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
-  import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
-  import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
-  import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
-  import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
-  import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
-  import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
-  import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
-  import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
-  import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
-  import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
-  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
-  import mybus from '@/myplugins/mybus'
-  const router = useRouter()
-  const scrollTop = ref(0)
-  const domArr = ref([])
-  const loading = ref(true)
-  const selectNow = ref('')
-  const dataList = reactive({ data: {} })
-  const id = router.currentRoute.value.query.id
-  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-  document.documentElement.style.transition = 'all 0.3s ease'
-  document.documentElement.scrollTop = 0
-  document.body.style.transition = 'all 0.3s ease'
-  document.body.scrollTop = 0
-  mybus.on('flyToView', (id) => {
-    let top = document.querySelector('#' + id).offsetTop - 50
-    // console.log(top, document.querySelector('#' + id).offsetTop)
-    document.documentElement.scrollTop = top
-    document.body.scrollTop = top
-  })
-  onMounted(() => {
-    // console.clear()
-    window.addEventListener('scroll', () => {
-      domArr.value = document.querySelectorAll('.scrollBox')
-      scrollTop.value =
-        document.documentElement.scrollTop || document.body.scrollTop
-      for (let i = 0; i < domArr.value.length; i++) {
-        if (i === 0) {
-          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else if (i == domArr.value.length - 1) {
-          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else {
-          if (
-            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-          ) {
-            selectNow.value = domArr.value[i].id
-          }
+import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
+import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
+import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
+import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
+import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
+import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
+import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
+import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
+import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
+import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
+import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
+import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  updateVisits,
+  selectOne,
+  queryPartAppByKeyId2,
+  browsingInsert,
+} from '@/api/home'
+import mybus from '@/myplugins/mybus'
+const router = useRouter()
+const scrollTop = ref(0)
+const domArr = ref([])
+const loading = ref(true)
+const selectNow = ref('')
+const dataList = reactive({ data: {} })
+const id = router.currentRoute.value.query.id
+const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+document.documentElement.style.transition = 'all 0.3s ease'
+document.documentElement.scrollTop = 0
+document.body.style.transition = 'all 0.3s ease'
+document.body.scrollTop = 0
+mybus.on('flyToView', (id) => {
+  let top = document.querySelector('#' + id).offsetTop - 50
+  // console.log(top, document.querySelector('#' + id).offsetTop)
+  document.documentElement.scrollTop = top
+  document.body.scrollTop = top
+})
+onMounted(() => {
+  // console.clear()
+  window.addEventListener('scroll', () => {
+    domArr.value = document.querySelectorAll('.scrollBox')
+    scrollTop.value =
+      document.documentElement.scrollTop || document.body.scrollTop
+    for (let i = 0; i < domArr.value.length; i++) {
+      if (i === 0) {
+        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+          selectNow.value = domArr.value[i].id
+        }
+      } else if (i == domArr.value.length - 1) {
+        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+          selectNow.value = domArr.value[i].id
+        }
+      } else {
+        if (
+          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+        ) {
+          selectNow.value = domArr.value[i].id
         }
       }
-    })
-  })
-
-  const init = (id) => {
-    console.log(id, '-------------------------------------------------')
-    if (id) {
-      selectOne(id).then((res) => {
-        // console.clear()
-        dataList.data = res.data.data
-        console.log('初始化详情页=========================>', dataList.data)
-        const arrList = ref([])
-        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-        if (arrList.value.indexOf(id) === -1) {
-          arrList.value.push(id)
-          updateVisits({
-            id: res.data.data.id,
-            visits: res.data.data.visits || '0',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      associatedComponents.value.map((item, index) => {
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-        }
-        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
-          loading.value = false
-        })
-      })
-    } else if (obj) {
-      dataList.data = obj
-      console.log('预览==============', obj)
     }
-  }
-  init(id)
-  onBeforeUnmount(() => {
-    mybus.off('flyToView')
   })
+})
+
+const init = (id) => {
+  console.log(id, '-------------------------------------------------')
+  if (id) {
+    selectOne(id).then((res) => {
+      // console.clear()
+      dataList.data = res.data.data
+      console.log('初始化详情页=========================>', dataList.data)
+      const arrList = ref([])
+      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+      if (arrList.value.indexOf(id) === -1) {
+        arrList.value.push(id)
+        updateVisits({
+          id: res.data.data.id,
+          visits: res.data.data.visits || '0',
+        }).then(() => {
+          window.sessionStorage.setItem(
+            'visits',
+            JSON.stringify(arrList.value)
+          )
+        })
+      }
+      // 浏览记录
+      browsingInsert({
+        resourceId: res.data.data.id,
+      }).then(() => {
+        console.log('浏览记录+1')
+      })
+    })
+    associatedComponents.value.map((item, index) => {
+      let queryPartAppByKeyIdParams = {
+        keyId: id,
+      }
+      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+        associatedComponents.value[index].dataList = res.data.data
+        loading.value = false
+      })
+    })
+  } else if (obj) {
+    dataList.data = obj
+    console.log('预览==============', obj)
+  }
+}
+init(id)
+onBeforeUnmount(() => {
+  mybus.off('flyToView')
+})
 </script>
 <style lang="less" scoped>
-  .fixed {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.fixed2>div:nth-of-type(3) {
+  margin-top: 0.84rem;
+}
 </style>
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 262063d5..7eee09d3 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -52,7 +52,12 @@ import ApplicationPresentation from '@/views/detailsAll/components/Application/A
 import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
 import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
 import { useRouter } from 'vue-router'
-import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
+import {
+  updateVisits,
+  selectOne,
+  queryPartAppByKeyId,
+  browsingInsert,
+} from '@/api/home'
 import mybus from '@/myplugins/mybus'
 const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
 let loading = ref(true)
@@ -124,6 +129,12 @@ const init = (id) => {
           )
         })
       }
+      // 浏览记录
+      browsingInsert({
+        resourceId: res.data.data.id,
+      }).then(() => {
+        console.log('浏览记录+1')
+      })
     })
     associatedComponents.value.map((item, index) => {
       let queryPartAppByKeyIdParams = {
diff --git a/front/src/views/detailsAll/BusinessDetails.vue b/front/src/views/detailsAll/BusinessDetails.vue
index c630e25c..cb14bfd2 100644
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@@ -10,165 +10,149 @@
     <!-- 头部基本信息 -->
     <business-top-details :dataList="dataList.data"></business-top-details>
     <!-- 导航 -->
-    <business-navigation
-      :dataList="dataList.data"
-      :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }"
-      :selectNow="selectNow"
-    ></business-navigation>
+    <business-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></business-navigation>
     <!-- 关联能力 -->
-    <business-associated-ability
-      v-if="!loading"
-      :associatedComponents="associatedComponents"
-      id="business-associated-ability"
-      class="scrollBox"
-    ></business-associated-ability>
+    <business-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
+      id="business-associated-ability" class="scrollBox"></business-associated-ability>
     <!-- 组件展示 -->
-    <business-presentation
-      :dataList="dataList.data"
-      id="business-presentation"
-      class="scrollBox"
-    ></business-presentation>
+    <business-presentation :dataList="dataList.data" id="business-presentation" class="scrollBox">
+    </business-presentation>
     <!-- 功能介绍-->
-    <business-function-intorduction
-      :dataList="dataList.data"
-      id="function-introduction"
-      class="scrollBox"
-    ></business-function-intorduction>
+    <business-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
+    </business-function-intorduction>
     <!-- 应用场景 -->
-    <business-application-scenarios
-      :dataList="dataList.data"
-      id="application-scenarios"
-      class="scrollBox"
-    ></business-application-scenarios>
+    <business-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
+    </business-application-scenarios>
     <!-- 应用案例 -->
-    <business-application-case
-      :dataList="dataList.data"
-      id="application-case"
-      class="scrollBox"
-    ></business-application-case>
+    <business-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
+    </business-application-case>
     <!-- 使用方式 -->
-    <business-usage-mode
-      :dataList="dataList.data"
-      id="business-usage-mode"
-      class="scrollBox"
-    ></business-usage-mode>
+    <business-usage-mode :dataList="dataList.data" id="business-usage-mode" class="scrollBox"></business-usage-mode>
     <!-- 常见问题-->
-    <business-common-problem
-      :dataList="dataList.data"
-      id="common-problem"
-      class="scrollBox"
-    ></business-common-problem>
+    <business-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox"></business-common-problem>
   </div>
 </template>
 <script setup>
-  import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
-  import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
-  import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
-  import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
-  import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
-  import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
-  import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
-  import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
-  import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
-  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
-  import mybus from '@/myplugins/mybus'
-  const router = useRouter()
-  const scrollTop = ref(0)
-  const domArr = ref([])
-  const selectNow = ref('')
-  const dataList = reactive({ data: {} })
-  const id = router.currentRoute.value.query.id
-  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-  let loading = ref(true)
-  document.documentElement.style.transition = 'all 0.3s ease'
-  document.documentElement.scrollTop = 0
-  document.body.style.transition = 'all 0.3s ease'
-  document.body.scrollTop = 0
-  mybus.on('flyToView', (id) => {
-    let top = document.querySelector('#' + id).offsetTop - 50
-    // console.log(top, document.querySelector('#' + id).offsetTop)
-    document.documentElement.scrollTop = top
-    document.body.scrollTop = top
-  })
-  onMounted(() => {
-    // console.clear()
-    window.addEventListener('scroll', () => {
-      domArr.value = document.querySelectorAll('.scrollBox')
-      scrollTop.value =
-        document.documentElement.scrollTop || document.body.scrollTop
-      for (let i = 0; i < domArr.value.length; i++) {
-        if (i === 0) {
-          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else if (i == domArr.value.length - 1) {
-          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else {
-          if (
-            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-          ) {
-            selectNow.value = domArr.value[i].id
-          }
+import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
+import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
+import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
+import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
+import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
+import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
+import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
+import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
+import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
+import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  updateVisits,
+  selectOne,
+  queryPartAppByKeyId2,
+  browsingInsert,
+} from '@/api/home'
+import mybus from '@/myplugins/mybus'
+const router = useRouter()
+const scrollTop = ref(0)
+const domArr = ref([])
+const selectNow = ref('')
+const dataList = reactive({ data: {} })
+const id = router.currentRoute.value.query.id
+const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+let loading = ref(true)
+document.documentElement.style.transition = 'all 0.3s ease'
+document.documentElement.scrollTop = 0
+document.body.style.transition = 'all 0.3s ease'
+document.body.scrollTop = 0
+mybus.on('flyToView', (id) => {
+  let top = document.querySelector('#' + id).offsetTop - 50
+  // console.log(top, document.querySelector('#' + id).offsetTop)
+  document.documentElement.scrollTop = top
+  document.body.scrollTop = top
+})
+onMounted(() => {
+  // console.clear()
+  window.addEventListener('scroll', () => {
+    domArr.value = document.querySelectorAll('.scrollBox')
+    scrollTop.value =
+      document.documentElement.scrollTop || document.body.scrollTop
+    for (let i = 0; i < domArr.value.length; i++) {
+      if (i === 0) {
+        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+          selectNow.value = domArr.value[i].id
+        }
+      } else if (i == domArr.value.length - 1) {
+        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+          selectNow.value = domArr.value[i].id
+        }
+      } else {
+        if (
+          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+        ) {
+          selectNow.value = domArr.value[i].id
         }
       }
-    })
-  })
-
-  const init = (id) => {
-    if (id) {
-      selectOne(id).then((res) => {
-        // console.clear()
-        dataList.data = res.data.data
-        console.log('初始化详情页=========================>', dataList.data)
-        const arrList = ref([])
-        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-        if (arrList.value && arrList.value.indexOf(id) === -1) {
-          arrList.value.push(id)
-          updateVisits({
-            id: res.data.data.id,
-            visits: res.data.data.visits || '0',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      associatedComponents.value.map((item, index) => {
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-        }
-        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
-          loading.value = false
-        })
-      })
-    } else if (obj) {
-      dataList.data = obj
-      console.log('预览==============', obj)
     }
-  }
-  init(id)
-  onBeforeUnmount(() => {
-    mybus.off('flyToView')
   })
+})
+
+const init = (id) => {
+  if (id) {
+    selectOne(id).then((res) => {
+      // console.clear()
+      dataList.data = res.data.data
+      console.log('初始化详情页=========================>', dataList.data)
+      const arrList = ref([])
+      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+      if (arrList.value && arrList.value.indexOf(id) === -1) {
+        arrList.value.push(id)
+        updateVisits({
+          id: res.data.data.id,
+          visits: res.data.data.visits || '0',
+        }).then(() => {
+          window.sessionStorage.setItem(
+            'visits',
+            JSON.stringify(arrList.value)
+          )
+        })
+      }
+      // 浏览记录
+      browsingInsert({
+        resourceId: res.data.data.id,
+      }).then(() => {
+        console.log('浏览记录+1')
+      })
+    })
+    associatedComponents.value.map((item, index) => {
+      let queryPartAppByKeyIdParams = {
+        keyId: id,
+      }
+      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+        associatedComponents.value[index].dataList = res.data.data
+        loading.value = false
+      })
+    })
+  } else if (obj) {
+    dataList.data = obj
+    console.log('预览==============', obj)
+  }
+}
+init(id)
+onBeforeUnmount(() => {
+  mybus.off('flyToView')
+})
 </script>
 <style lang="less" scoped>
-  .fixed {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.fixed2>div:nth-of-type(3) {
+  margin-top: 0.84rem;
+}
 </style>
diff --git a/front/src/views/detailsAll/DeveloperComponents.vue b/front/src/views/detailsAll/DeveloperComponents.vue
index e7f0a403..be9c7f40 100644
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@@ -10,175 +10,157 @@
     <!-- 头部基本信息 -->
     <developer-top-details :dataList="dataList.data"></developer-top-details>
     <!-- 导航 -->
-    <developer-navigation
-      :dataList="dataList.data"
-      :associatedComponents="associatedComponentsFunction()"
-      :class="{ fixed: scrollTop >= 600 }"
-      :selectNow="selectNow"
-    ></developer-navigation>
+    <developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()"
+      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation>
     <!-- 关联能力 -->
-    <developer-associated-ability
-      v-if="!loading"
-      :associatedComponents="associatedComponents"
-      id="developer-associated-ability"
-      class="scrollBox"
-    ></developer-associated-ability>
+    <developer-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
+      id="developer-associated-ability" class="scrollBox"></developer-associated-ability>
     <!-- 组件展示  视频 -->
-    <Developer-presentation
-      :dataList="dataList.data"
-      id="eveloper-presentation"
-      class="scrollBox"
-    ></Developer-presentation>
+    <Developer-presentation :dataList="dataList.data" id="eveloper-presentation" class="scrollBox">
+    </Developer-presentation>
     <!-- 功能介绍-->
-    <developer-function-intorduction
-      :dataList="dataList.data"
-      id="function-introduction"
-      class="scrollBox"
-    ></developer-function-intorduction>
+    <developer-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
+    </developer-function-intorduction>
     <!-- 应用场景 -->
-    <developer-application-scenarios
-      :dataList="dataList.data"
-      id="application-scenarios"
-      class="scrollBox"
-    ></developer-application-scenarios>
+    <developer-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
+    </developer-application-scenarios>
     <!-- 应用案例 -->
-    <developer-application-case
-      :dataList="dataList.data"
-      id="application-case"
-      class="scrollBox"
-    ></developer-application-case>
+    <developer-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
+    </developer-application-case>
     <!-- 组件试用 -->
-    <developer-trial
-      :dataList="dataList.data"
-      id="developer-trial"
-      class="scrollBox"
-    ></developer-trial>
+    <developer-trial :dataList="dataList.data" id="developer-trial" class="scrollBox"></developer-trial>
     <!-- 归属部门与服务商-->
-    <developer-owning-department-and-service-provider
-      :dataList="dataList.data"
-      id="department-and-service-provider"
-      class="scrollBox"
-    ></developer-owning-department-and-service-provider>
+    <developer-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
+      class="scrollBox"></developer-owning-department-and-service-provider>
     <!-- 常见问题-->
-    <developer-common-problem
-      :dataList="dataList.data"
-      id="common-problem"
-      class="scrollBox"
-    ></developer-common-problem>
+    <developer-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
+    </developer-common-problem>
   </div>
 </template>
 <script setup>
-  import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
-  import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
-  import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
-  import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
-  import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
-  import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
-  import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
-  import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
-  import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
-  import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
-  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
-  import mybus from '@/myplugins/mybus'
-  const router = useRouter()
-  const scrollTop = ref(0)
-  const domArr = ref([])
-  const selectNow = ref('')
-  const dataList = reactive({ data: {} })
-  const id = router.currentRoute.value.query.id
-  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-  let loading = ref(true)
-  document.documentElement.style.transition = 'all 0.3s ease'
-  document.documentElement.scrollTop = 0
-  document.body.style.transition = 'all 0.3s ease'
-  document.body.scrollTop = 0
-  mybus.on('flyToView', (id) => {
-    let top = document.querySelector('#' + id).offsetTop - 50
-    // console.log(top, document.querySelector('#' + id).offsetTop)
-    document.documentElement.scrollTop = top
-    document.body.scrollTop = top
-  })
-  onMounted(() => {
-    // console.clear()
-    window.addEventListener('scroll', () => {
-      domArr.value = document.querySelectorAll('.scrollBox')
-      scrollTop.value =
-        document.documentElement.scrollTop || document.body.scrollTop
-      for (let i = 0; i < domArr.value.length; i++) {
-        if (i === 0) {
-          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else if (i == domArr.value.length - 1) {
-          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else {
-          if (
-            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-          ) {
-            selectNow.value = domArr.value[i].id
-          }
+import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
+import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
+import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
+import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
+import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
+import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
+import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
+import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
+import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
+import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
+import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  updateVisits,
+  selectOne,
+  queryPartAppByKeyId2,
+  browsingInsert,
+} from '@/api/home'
+import mybus from '@/myplugins/mybus'
+const router = useRouter()
+const scrollTop = ref(0)
+const domArr = ref([])
+const selectNow = ref('')
+const dataList = reactive({ data: {} })
+const id = router.currentRoute.value.query.id
+const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+let loading = ref(true)
+document.documentElement.style.transition = 'all 0.3s ease'
+document.documentElement.scrollTop = 0
+document.body.style.transition = 'all 0.3s ease'
+document.body.scrollTop = 0
+mybus.on('flyToView', (id) => {
+  let top = document.querySelector('#' + id).offsetTop - 50
+  // console.log(top, document.querySelector('#' + id).offsetTop)
+  document.documentElement.scrollTop = top
+  document.body.scrollTop = top
+})
+onMounted(() => {
+  // console.clear()
+  window.addEventListener('scroll', () => {
+    domArr.value = document.querySelectorAll('.scrollBox')
+    scrollTop.value =
+      document.documentElement.scrollTop || document.body.scrollTop
+    for (let i = 0; i < domArr.value.length; i++) {
+      if (i === 0) {
+        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+          selectNow.value = domArr.value[i].id
+        }
+      } else if (i == domArr.value.length - 1) {
+        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+          selectNow.value = domArr.value[i].id
+        }
+      } else {
+        if (
+          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+        ) {
+          selectNow.value = domArr.value[i].id
         }
       }
+    }
+  })
+})
+const init = (id) => {
+  if (id) {
+    let queryPartAppByKeyIdParams = {
+      keyId: id,
+    }
+    queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+      associatedComponents.value[0].dataList = res.data.data
+      loading.value = false
     })
-  })
-  const init = (id) => {
-    if (id) {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
+    selectOne(id).then((res) => {
+      // console.clear()
+      dataList.data = res.data.data
+      console.log('初始化详情页=========================>', dataList.data)
+      const arrList = ref([])
+      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+      if (arrList.value && arrList.value.indexOf(id) === -1) {
+        arrList.value.push(id)
+        updateVisits({
+          id: res.data.data.id,
+          visits: res.data.data.visits || '0',
+        }).then(() => {
+          window.sessionStorage.setItem(
+            'visits',
+            JSON.stringify(arrList.value)
+          )
+        })
       }
-      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[0].dataList = res.data.data
-        loading.value = false
+      // 浏览记录
+      browsingInsert({
+        resourceId: res.data.data.id,
+      }).then(() => {
+        console.log('浏览记录+1')
       })
-      selectOne(id).then((res) => {
-        // console.clear()
-        dataList.data = res.data.data
-        console.log('初始化详情页=========================>', dataList.data)
-        const arrList = ref([])
-        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-        if (arrList.value && arrList.value.indexOf(id) === -1) {
-          arrList.value.push(id)
-          updateVisits({
-            id: res.data.data.id,
-            visits: res.data.data.visits || '0',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      associatedComponents.value.map((item, index) => {})
-    } else if (obj) {
-      dataList.data = obj
-      console.log('预览==============', obj)
-    }
+    })
+    associatedComponents.value.map((item, index) => { })
+  } else if (obj) {
+    dataList.data = obj
+    console.log('预览==============', obj)
   }
-  init(id)
-  const associatedComponentsFunction = () => {
-    if (associatedComponents.value[0].dataList.length > 0) {
-      return associatedComponents.value
-    }
+}
+init(id)
+const associatedComponentsFunction = () => {
+  if (associatedComponents.value[0].dataList.length > 0) {
+    return associatedComponents.value
   }
-  onBeforeUnmount(() => {
-    mybus.off('flyToView')
-  })
+}
+onBeforeUnmount(() => {
+  mybus.off('flyToView')
+})
 </script>
 <style lang="less" scoped>
-  .fixed {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.fixed2>div:nth-of-type(3) {
+  margin-top: 0.84rem;
+}
 </style>
diff --git a/front/src/views/detailsAll/LayerService.vue b/front/src/views/detailsAll/LayerService.vue
index 799c98b1..6228798c 100644
--- a/front/src/views/detailsAll/LayerService.vue
+++ b/front/src/views/detailsAll/LayerService.vue
@@ -8,176 +8,156 @@
 <template>
   <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
     <!-- 头部基本信息 -->
-    <layer-service-top-details
-      :dataList="dataList.data"
-    ></layer-service-top-details>
+    <layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
     <!-- 导航 -->
-    <layer-service-navigation
-      :dataList="dataList.data"
-      :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }"
-      :selectNow="selectNow"
-    ></layer-service-navigation>
+    <layer-service-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></layer-service-navigation>
     <!-- 关联能力 -->
-    <layer-service-associated-ability
-      :associatedComponents="associatedComponents"
-      id="layer-service-associated-ability"
-      class="scrollBox"
-      v-if="!loading"
-    ></layer-service-associated-ability>
+    <layer-service-associated-ability :associatedComponents="associatedComponents" id="layer-service-associated-ability"
+      class="scrollBox" v-if="!loading"></layer-service-associated-ability>
     <!-- 图层展示  视频 -->
-    <layer-service-presentation
-      :dataList="dataList.data"
-      id="service-presentation"
-      class="scrollBox"
-    ></layer-service-presentation>
+    <layer-service-presentation :dataList="dataList.data" id="service-presentation" class="scrollBox">
+    </layer-service-presentation>
     <!-- 图层信息-->
-    <layer-service-information
-      :dataList="dataList.data"
-      id="service-information"
-      class="scrollBox"
-    ></layer-service-information>
+    <layer-service-information :dataList="dataList.data" id="service-information" class="scrollBox">
+    </layer-service-information>
     <!-- 应用场景 -->
-    <layer-service-application-scenarios
-      :dataList="dataList.data"
-      id="service-application-scenarios"
-      class="scrollBox"
-    ></layer-service-application-scenarios>
+    <layer-service-application-scenarios :dataList="dataList.data" id="service-application-scenarios" class="scrollBox">
+    </layer-service-application-scenarios>
     <!-- 应用案例 -->
-    <layer-service-application-case
-      :dataList="dataList.data"
-      id="service-application-case"
-      class="scrollBox"
-    ></layer-service-application-case>
+    <layer-service-application-case :dataList="dataList.data" id="service-application-case" class="scrollBox">
+    </layer-service-application-case>
     <!-- 图层预览 -->
-    <layer-service-preview
-      :dataList="dataList.data"
-      id="service-preview"
-      class="scrollBox"
-    ></layer-service-preview>
+    <layer-service-preview :dataList="dataList.data" id="service-preview" class="scrollBox"></layer-service-preview>
     <!-- 使用方式-->
-    <layer-service-usage-mode
-      :dataList="dataList.data"
-      id="service-usage-mode"
-      class="scrollBox"
-    ></layer-service-usage-mode>
+    <layer-service-usage-mode :dataList="dataList.data" id="service-usage-mode" class="scrollBox">
+    </layer-service-usage-mode>
     <!-- 常见问题-->
-    <layer-service-common-problem
-      :dataList="dataList.data"
-      id="service-common-problem"
-      class="scrollBox"
-    ></layer-service-common-problem>
+    <layer-service-common-problem :dataList="dataList.data" id="service-common-problem" class="scrollBox">
+    </layer-service-common-problem>
   </div>
 </template>
 <script setup>
-  import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
-  import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
-  import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
-  import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
-  import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
-  import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
-  import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
-  import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
-  import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
-  import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
-  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
-  import mybus from '@/myplugins/mybus'
-  const router = useRouter()
-  const scrollTop = ref(0)
-  const domArr = ref([])
-  const selectNow = ref('')
-  const dataList = reactive({ data: {} })
-  const id = router.currentRoute.value.query.id
-  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-  let loading = ref(true)
-  document.documentElement.style.transition = 'all 0.3s ease'
-  document.documentElement.scrollTop = 0
-  document.body.style.transition = 'all 0.3s ease'
-  document.body.scrollTop = 0
-  mybus.on('flyToView', (id) => {
-    let top = document.querySelector('#' + id).offsetTop - 50
-    // console.log(top, document.querySelector('#' + id).offsetTop)
-    document.documentElement.scrollTop = top
-    document.body.scrollTop = top
-  })
-  onMounted(() => {
-    // console.clear()
-    window.addEventListener('scroll', () => {
-      domArr.value = document.querySelectorAll('.scrollBox')
-      scrollTop.value =
-        document.documentElement.scrollTop || document.body.scrollTop
-      for (let i = 0; i < domArr.value.length; i++) {
-        if (i === 0) {
-          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else if (i == domArr.value.length - 1) {
-          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else {
-          if (
-            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-          ) {
-            selectNow.value = domArr.value[i].id
-          }
+import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
+import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
+import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
+import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
+import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
+import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
+import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
+import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
+import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
+import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
+import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  updateVisits,
+  selectOne,
+  queryPartAppByKeyId2,
+  browsingInsert,
+} from '@/api/home'
+import mybus from '@/myplugins/mybus'
+const router = useRouter()
+const scrollTop = ref(0)
+const domArr = ref([])
+const selectNow = ref('')
+const dataList = reactive({ data: {} })
+const id = router.currentRoute.value.query.id
+const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+let loading = ref(true)
+document.documentElement.style.transition = 'all 0.3s ease'
+document.documentElement.scrollTop = 0
+document.body.style.transition = 'all 0.3s ease'
+document.body.scrollTop = 0
+mybus.on('flyToView', (id) => {
+  let top = document.querySelector('#' + id).offsetTop - 50
+  // console.log(top, document.querySelector('#' + id).offsetTop)
+  document.documentElement.scrollTop = top
+  document.body.scrollTop = top
+})
+onMounted(() => {
+  // console.clear()
+  window.addEventListener('scroll', () => {
+    domArr.value = document.querySelectorAll('.scrollBox')
+    scrollTop.value =
+      document.documentElement.scrollTop || document.body.scrollTop
+    for (let i = 0; i < domArr.value.length; i++) {
+      if (i === 0) {
+        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+          selectNow.value = domArr.value[i].id
+        }
+      } else if (i == domArr.value.length - 1) {
+        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+          selectNow.value = domArr.value[i].id
+        }
+      } else {
+        if (
+          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+        ) {
+          selectNow.value = domArr.value[i].id
         }
       }
-    })
-  })
-
-  const init = (id) => {
-    if (id) {
-      selectOne(id).then((res) => {
-        // console.clear()
-        dataList.data = res.data.data
-        console.log('初始化详情页=========================>', dataList.data)
-        const arrList = ref([])
-        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-        if (arrList.value && arrList.value.indexOf(id) === -1) {
-          arrList.value.push(id)
-          updateVisits({
-            id: res.data.data.id,
-            visits: res.data.data.visits || '0',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      associatedComponents.value.map((item, index) => {
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-        }
-        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
-          loading.value = false
-        })
-      })
-    } else if (obj) {
-      dataList.data = obj
-      console.log('预览==============', obj)
     }
-  }
-  init(id)
-  onBeforeUnmount(() => {
-    mybus.off('flyToView')
   })
+})
+
+const init = (id) => {
+  if (id) {
+    selectOne(id).then((res) => {
+      // console.clear()
+      dataList.data = res.data.data
+      console.log('初始化详情页=========================>', dataList.data)
+      const arrList = ref([])
+      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+      if (arrList.value && arrList.value.indexOf(id) === -1) {
+        arrList.value.push(id)
+        updateVisits({
+          id: res.data.data.id,
+          visits: res.data.data.visits || '0',
+        }).then(() => {
+          window.sessionStorage.setItem(
+            'visits',
+            JSON.stringify(arrList.value)
+          )
+        })
+      }
+      // 浏览记录
+      browsingInsert({
+        resourceId: res.data.data.id,
+      }).then(() => {
+        console.log('浏览记录+1')
+      })
+    })
+    associatedComponents.value.map((item, index) => {
+      let queryPartAppByKeyIdParams = {
+        keyId: id,
+      }
+      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+        associatedComponents.value[index].dataList = res.data.data
+        loading.value = false
+      })
+    })
+  } else if (obj) {
+    dataList.data = obj
+    console.log('预览==============', obj)
+  }
+}
+init(id)
+onBeforeUnmount(() => {
+  mybus.off('flyToView')
+})
 </script>
 <style lang="less" scoped>
-  .fixed {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.fixed2>div:nth-of-type(3) {
+  margin-top: 0.84rem;
+}
 </style>