diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
new file mode 100644
index 00000000..5db01606
--- /dev/null
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -0,0 +1,171 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:32:22
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-13 12:01:31
+ * @Description: 算法详情页
+-->
+<template>
+  <div class="algorithm-details" :class="{ fixed2: scrollTop >= 600 }">
+    <!-- 头部基本信息 -->
+    <algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
+    <!-- 导航 -->
+    <algorithm-navigation
+      :dataList="dataList.data"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></algorithm-navigation>
+    <!-- 算法展示  视频 -->
+    <algorithm-display
+      :dataList="dataList.data"
+      id="algorithm-display"
+      class="scrollBox"
+    ></algorithm-display>
+    <!-- 算法优势 -->
+    <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-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-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>
+  </div>
+</template>
+<script setup>
+  import AlgorithmTopDetails from '@/views/detailsAll/components/AlgorithmTopDetails.vue'
+  import AlgorithmNavigation from '@/views/detailsAll/components/AlgorithmNavigation.vue'
+  import AlgorithmDisplay from '@/views/detailsAll/components/AlgorithmDisplay.vue'
+  import AlgorithmAdvantage from '@/views/detailsAll/components/AlgorithmAdvantage.vue'
+  import AlgorithmOnTrial from '@/views/detailsAll/components/AlgorithmOnTrial.vue'
+  import AlgorithmApplicationScenarios from '@/views/detailsAll/components/AlgorithmApplicationScenarios'
+  import AlgorithmApplicationCase from '@/views/detailsAll/components/AlgorithmApplicationCase'
+  import AlgorithmUsageMode from '@/views/detailsAll/components/AlgorithmUsageMode' //使用方式
+  import AlgorithmChargingStandard from '@/views/detailsAll/components/AlgorithmChargingStandard' //计费标准
+  import AlgorithmCommonProblem from '@/views/detailsAll/components/AlgorithmCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { updateVisits, selectOne } 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'))
+  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.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)
+            )
+          })
+        }
+      })
+    } 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: 84px;
+  }
+</style>