From cfded4f558cfe8ddc0d32130384e77f7da2d08cc Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Tue, 14 Jun 2022 10:45:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E8=AF=A6=E6=83=85=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/router/index.js                     |   7 +-
 .../src/views/detailsAll/AlgorithmDetails.vue |  22 +--
 .../views/detailsAll/ApplicationDetails.vue   |  42 ++--
 .../{ => Algorithm}/AlgorithmAdvantage.vue    |   0
 .../AlgorithmApplicationCase.vue              |   0
 .../AlgorithmApplicationScenarios.vue         |   0
 .../AlgorithmChargingStandard.vue             |   0
 .../AlgorithmCommonProblem.vue                |   0
 .../{ => Algorithm}/AlgorithmDisplay.vue      |   0
 .../{ => Algorithm}/AlgorithmNavigation.vue   |   0
 .../{ => Algorithm}/AlgorithmOnTrial.vue      |   0
 .../{ => Algorithm}/AlgorithmTopDetails.vue   |   0
 .../{ => Algorithm}/AlgorithmUsageMode.vue    |   0
 .../PictureCharacterRecognition.vue           |   0
 .../{ => Algorithm}/TestOfWords.vue           |   0
 .../Application/ApplicationNavigation.vue     | 167 ++++++++++++++++
 .../Application/ApplicationPresentation.vue   | 116 +++++++++++
 .../Application/ApplicationTopDetails.vue     | 184 ++++++++++++++++++
 18 files changed, 505 insertions(+), 33 deletions(-)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmAdvantage.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmApplicationCase.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmApplicationScenarios.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmChargingStandard.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmCommonProblem.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmDisplay.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmNavigation.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmOnTrial.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmTopDetails.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/AlgorithmUsageMode.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/PictureCharacterRecognition.vue (100%)
 rename front/src/views/detailsAll/components/{ => Algorithm}/TestOfWords.vue (100%)
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue

diff --git a/front/src/router/index.js b/front/src/router/index.js
index 787e302d..935c0ab0 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -214,7 +214,9 @@ export const constantRoutes = [
     path: '/PictureCharacterRecognition',
     name: 'PictureCharacterRecognition',
     component: () =>
-      import('@/views/detailsAll/components/PictureCharacterRecognition'),
+      import(
+        '@/views/detailsAll/components/Algorithm/PictureCharacterRecognition'
+      ),
     meta: {
       title: '图片文字识别',
       icon: 'error-warning-line',
@@ -223,7 +225,8 @@ export const constantRoutes = [
   {
     path: '/TestOfWords',
     name: 'TestOfWords',
-    component: () => import('@/views/detailsAll/components/TestOfWords'),
+    component: () =>
+      import('@/views/detailsAll/components/Algorithm/TestOfWords'),
     meta: {
       title: '文字检验',
       icon: 'error-warning-line',
diff --git a/front/src/views/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index 5db01606..d9d03b2e 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:32:22
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-13 12:01:31
+ * @LastEditTime: 2022-06-14 10:39:37
  * @Description: 算法详情页
 -->
 <template>
@@ -69,16 +69,16 @@
   </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 AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.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 } from '@/api/home'
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 5db01606..9eb31790 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -2,25 +2,27 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:32:22
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-13 12:01:31
- * @Description: 算法详情页
+ * @LastEditTime: 2022-06-14 10:41:48
+ * @Description: 应用详情页
 -->
 <template>
-  <div class="algorithm-details" :class="{ fixed2: scrollTop >= 600 }">
+  <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
     <!-- 头部基本信息 -->
-    <algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
+    <application-top-details
+      :dataList="dataList.data"
+    ></application-top-details>
     <!-- 导航 -->
-    <algorithm-navigation
+    <application-navigation
       :dataList="dataList.data"
       :class="{ fixed: scrollTop >= 600 }"
       :selectNow="selectNow"
-    ></algorithm-navigation>
-    <!-- 算法展示  视频 -->
-    <algorithm-display
+    ></application-navigation>
+    <!-- 应用展示  视频 -->
+    <application-presentation
       :dataList="dataList.data"
-      id="algorithm-display"
+      id="application-presentation"
       class="scrollBox"
-    ></algorithm-display>
+    ></application-presentation>
     <!-- 算法优势 -->
     <algorithm-advantage
       :dataList="dataList.data"
@@ -69,16 +71,16 @@
   </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 ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
+  import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
+  import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.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 } from '@/api/home'
diff --git a/front/src/views/detailsAll/components/AlgorithmAdvantage.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmAdvantage.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmApplicationCase.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationCase.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmApplicationCase.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationCase.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmApplicationScenarios.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmApplicationScenarios.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmChargingStandard.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmChargingStandard.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmCommonProblem.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmCommonProblem.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmCommonProblem.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmCommonProblem.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmDisplay.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmDisplay.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmNavigation.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmNavigation.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmOnTrial.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmOnTrial.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmTopDetails.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmTopDetails.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
diff --git a/front/src/views/detailsAll/components/AlgorithmUsageMode.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
similarity index 100%
rename from front/src/views/detailsAll/components/AlgorithmUsageMode.vue
rename to front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
diff --git a/front/src/views/detailsAll/components/PictureCharacterRecognition.vue b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
similarity index 100%
rename from front/src/views/detailsAll/components/PictureCharacterRecognition.vue
rename to front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
diff --git a/front/src/views/detailsAll/components/TestOfWords.vue b/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
similarity index 100%
rename from front/src/views/detailsAll/components/TestOfWords.vue
rename to front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
new file mode 100644
index 00000000..5434c8ef
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@@ -0,0 +1,167 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 14:54:01
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 10:30:32
+ * @Description: 应用详情页导航
+-->
+<template>
+  <div class="application-navigation" v-if="navList.length > 0">
+    <template v-for="nav in navList" :key="nav.key">
+      <div
+        class="nav"
+        :class="{ select: nav.key == select }"
+        v-if="nav.show"
+        @click="selectNav(nav.key)"
+      >
+        {{ nav.name }}
+        <span class="line"></span>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  const navList = ref([
+    {
+      name: '应用展示',
+      key: 'application-presentation',
+    },
+    {
+      name: '功能介绍',
+      key: 'function-introduction',
+    },
+    {
+      name: '使用能力',
+      key: 'ability-to-use',
+    },
+    {
+      name: '部署与安全',
+      key: 'deployment-and-security',
+    },
+    {
+      name: '归属部门与服务商',
+      key: 'department-and-service-provider',
+    },
+    {
+      name: '常见问题',
+      key: 'common-problem',
+    },
+  ])
+  const props = defineProps({
+    selectNow: { type: String, default: '' },
+    dataList: { type: Object, default: null },
+  })
+  const select = ref('algorithm-display')
+  const list = ref([])
+  const selectNav = (key) => {
+    select.value = key
+    mybus.emit('flyToView', select.value)
+  }
+  if (props.dataList.infoList) {
+    list.value = []
+    props.dataList.infoList.map((item) => {
+      if (
+        item.attrType === '算法优势' ||
+        item.attrType === '应用场景' ||
+        item.attrType === '应用案例' ||
+        item.attrType === '常见问题'
+      ) {
+        list.value.push(item.attrType)
+      } else if (item.attrType === '算法介绍视频') {
+        list.value.push('算法展示')
+      } else if (item.attrType === '试用地址') {
+        list.value.push('算法试用')
+      } else if (item.attrType === '计费标准信息') {
+        list.value.push('计费标准')
+      } else if (item.attrType === '技术文档') {
+        list.value.push('使用方式')
+      }
+    })
+    navList.value.forEach((item) => {
+      console.log(item)
+      if (list.value.indexOf(item.name) > -1) {
+        item.show = true
+      }
+    })
+    select.value = navList.value.filter(
+      (item) => item.name === list.value[0]
+    )[0].key
+    console.log('11111111111111111111111111', list.value, navList.value)
+  }
+  watch(
+    () => props.selectNow,
+    (newValue) => {
+      select.value = newValue
+    }
+  )
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        list.value = []
+        val.infoList.map((item) => {
+          if (
+            item.attrType === '算法优势' ||
+            item.attrType === '应用场景' ||
+            item.attrType === '应用案例' ||
+            item.attrType === '常见问题'
+          ) {
+            list.value.push(item.attrType)
+          } else if (item.attrType === '应用展示视频') {
+            list.value.push('应用展示')
+          } else if (item.attrType === '试用地址') {
+            list.value.push('算法试用')
+          } else if (item.attrType === '计费标准信息') {
+            list.value.push('计费标准')
+          } else if (item.attrType === '技术文档') {
+            list.value.push('使用方式')
+          }
+        })
+        navList.value.forEach((item) => {
+          console.log(item)
+          if (list.value.indexOf(item.name) > -1) {
+            item.show = true
+          }
+        })
+        select.value = navList.value.filter(
+          (item) => item.name === list.value[0]
+        )[0].key
+        console.log('11111111111111111111111111', list.value, navList.value)
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .application-navigation {
+    width: 1912px;
+    height: 84px;
+    line-height: 80px;
+    display: flex;
+    justify-content: space-around;
+    font-size: 24px;
+    color: #666;
+    background: #fff;
+    padding: 0 300px;
+    box-shadow: 0px 5px 10px #f2f3fb;
+    position: relative;
+    .nav {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      .line {
+        width: 40px;
+        height: 4px;
+      }
+    }
+    .select {
+      color: #526aff;
+      .line {
+        background: #526aff;
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
new file mode 100644
index 00000000..6aa9727b
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
@@ -0,0 +1,116 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 15:25:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 10:33:51
+ * @Description: 应用展示  视频播放
+-->
+<template>
+  <div class="application-presentation" v-if="flag">
+    <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
+    <div class="main">
+      <div class="play" @click="showModal"></div>
+    </div>
+    <a-modal
+      v-model:visible="visible"
+      title="视频预览"
+      :width="750"
+      destroyOnClose
+    >
+      <template #footer></template>
+      <div style="width: 100%; display: flex; justify-content: center">
+        <div style="width: 100%; height: 100%">
+          <vue3VideoPlay v-bind="options" />
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script setup>
+  import { ref, reactive, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const visible = ref(false)
+  const options = reactive({
+    width: '700px', //播放器宽度
+    height: '400px', //播放器高度
+    color: '#409eff', //主题色
+    title: '', //视频名称
+    src: '', //视频源
+    muted: false, //静音
+    webFullScreen: false,
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    autoPlay: true, //自动播放
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制
+    controlBtns: [
+      'audioTrack',
+      'quality',
+      'speedRate',
+      'volume',
+      'setting',
+      'pip',
+      'pageFullScreen',
+      'fullScreen',
+    ], //显示所有按钮,
+  })
+  const showModal = () => {
+    visible.value = true
+  }
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  console.log('111111111111111111111,', props.dataList)
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用展示视频'
+    )[0]
+    console.log('视频==============>', obj)
+    if (!obj) {
+      flag.value = false
+    } else {
+      options.src = obj.attrValue
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter(
+          (item) => item.attrType === '算法介绍视频'
+        )[0]
+        console.log('视频==============>', obj)
+        if (!obj) {
+          flag.value = false
+        } else {
+          options.src = obj.attrValue
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .application-presentation {
+    padding: 80px 300px 0;
+    .main {
+      height: 340px;
+      border-radius: 10px;
+      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
+      background-size: 100%;
+      margin-top: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .play {
+        width: 96px;
+        height: 96px;
+        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
+        background-size: 100%;
+        cursor: pointer;
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
new file mode 100644
index 00000000..41715002
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
@@ -0,0 +1,184 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:56:28
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-13 15:29:27
+ * @Description: 算法详情页头部
+-->
+<template>
+  <div class="algorithm-top-details">
+    <div class="left">
+      <div class="top">
+        <span class="name">{{ props.dataList.name }}</span>
+        <span class="label">{{ props.dataList.type }}</span>
+        <span class="label">{{ props.dataList.shareType }}</span>
+        <span class="label">{{ props.dataList.shareCondition }}</span>
+        <!-- <span class="label">免费</span> -->
+      </div>
+      <div class="main">
+        <div>应用领域：{{ applicationArea }}</div>
+        <div>
+          {{ props.dataList.description }}
+        </div>
+      </div>
+      <div class="bottom" v-if="props.dataList.id">
+        <a-button type="primary" @click="toView()">
+          <template #icon><form-outlined /></template>
+          申请使用
+        </a-button>
+        <a-button type="primary" @click="addShoppingCart()">
+          <template #icon><shopping-cart-outlined /></template>
+          加入购物车
+        </a-button>
+        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+      </div>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+<script setup>
+  import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
+  import { defineProps, ref, watch } from 'vue'
+  import { scInsert } from '@/api/personalCenter'
+  import { sgcInsert } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const router = useRouter()
+  const applicationArea = ref('')
+  // 加入申购车
+  const addShoppingCart = () => {
+    console.log('加入申购车==================>', props.dataList)
+    sgcInsert({
+      delFlag: '0',
+      resourceId: props.dataList.id,
+      // userId: userId.value,
+    }).then((res) => {
+      console.log(res)
+      message.success('添加申购车成功！')
+      mybus.emit('getSgcNum')
+    })
+  }
+  // 立即申请
+  function toView() {
+    // window.open(newpage.href, '_blank')
+    router.push({
+      path: '/apply',
+      query: {
+        name: props.dataList.name,
+        resourceId: [props.dataList.id],
+      },
+    })
+  }
+  // 收藏
+  const goTOCollection = () => {
+    console.log('收藏===================》', props.dataList)
+    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+      console.log(res)
+      message.success('收藏成功')
+    })
+  }
+  if (props.dataList.infoList) {
+    applicationArea.value = props.dataList.infoList.filter(
+      (val) => val.attrType === '应用领域'
+    )[0].attrValue
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        applicationArea.value = props.dataList.infoList.filter(
+          (val) => val.attrType === '应用领域'
+        )[0].attrValue
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .algorithm-top-details {
+    height: 600px;
+    padding: 180px 0 0;
+    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    .left {
+      width: 700px;
+      color: #fff;
+      .top {
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 14px;
+        }
+        .name {
+          max-width: 330px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 40px;
+          margin-right: 20px;
+        }
+        .label {
+          padding: 1px 10px;
+          margin-right: 10px;
+          border-radius: 13px;
+          background: rgba(255, 255, 255, 0.4);
+        }
+      }
+      .main {
+        margin-top: 20px;
+        font-size: 18px;
+        line-height: 34px;
+        & > div:nth-of-type(1) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > div:nth-of-type(2) {
+          max-height: 100px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .bottom {
+        margin-top: 40px;
+        display: flex;
+        .ant-btn {
+          height: 50px;
+          margin-right: 20px;
+          background: #ff8b55;
+          border-radius: 6px;
+          font-size: 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .ant-btn:nth-of-type(1) {
+          width: 180px;
+        }
+        .ant-btn:nth-of-type(2) {
+          width: 220px;
+        }
+        .ant-btn:nth-of-type(3) {
+          width: 145px;
+          background: #fff;
+          color: #526aff;
+        }
+      }
+    }
+    .right {
+      width: 580px;
+      height: 400px;
+      background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
+      background-size: 100%;
+      margin-top: -40px;
+    }
+  }
+</style>