bug修复

front/src/views/detailsAll/components/Application/ApplicationNavigation.vue

@@ -8,12 +8,7 @@
 <template>
   <div class="application-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div
+      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
-        class="nav"
-        :class="{ select: nav.key == select }"
-        v-if="nav.show"
-        @click="selectNav(nav.key)"
-      >
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -21,14 +16,14 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
-  import mybus from '@/myplugins/mybus'
+import mybus from '@/myplugins/mybus'
-  import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-  import { queryPartAppByKeyId } from '@/api/home'
+import { queryPartAppByKeyId } from '@/api/home'
-  // 获取当前路由地址
+// 获取当前路由地址
-  const router = useRouter()
+const router = useRouter()
-  const keyId = router.currentRoute.value.query.id
+const keyId = router.currentRoute.value.query.id
-  const navList = ref([
+const navList = ref([
   {
     name: '应用展示',
     key: 'application-presentation',
@@ -53,16 +48,16 @@
     name: '常见问题',
     key: 'common-problem',
   },
-  ])
+])
-  const props = defineProps({
+const props = defineProps({
   selectNow: { type: String, default: '' },
   dataList: { type: Object, default: null },
   associatedComponents: { type: Array, default: null },
-  })
+})
-  const select = ref('application-associated-ability')
+const select = ref('application-associated-ability')
-  const list = ref([])
+const list = ref([])
-  // 根据能力id查询是否存在关联应用
+// 根据能力id查询是否存在关联应用
-  if (keyId) {
+if (keyId) {
   let params = {
     keyId: keyId,
     type: '组件服务',
@@ -79,16 +74,16 @@
       list.value.unshift('关联组件')
     }
   })
-  }
+}
-  const selectNav = (key) => {
+const selectNav = (key) => {
   select.value = key
   mybus.emit('flyToView', select.value)
-  }
+}
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   list.value = []
   props.dataList.infoList.map((item) => {
     if (
-        item.attrType === '算法优势' ||
+      item.attrType === '功能介绍' ||
       item.attrType === '常见问题' ||
       item.attrType === '使用能力' ||
       item.attrType === '关联组件'
@@ -99,6 +94,8 @@
     }
   })
   list.value.unshift('关联组件')
+  list.value.push('部署与安全')
+  list.value.push('归属部门与服务商')
   navList.value.forEach((item) => {
     console.log(item)
     if (list.value.indexOf(item.name) > -1) {
@@ -113,14 +110,14 @@
     }
   }
   console.log('11111111111111111111111111', list.value, navList.value)
-  }
+}
-  watch(
+watch(
   () => props.selectNow,
   (newValue) => {
     select.value = newValue
   }
-  )
+)
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -157,10 +154,10 @@
       console.log('11111111111111111111111111', list.value, navList.value)
     }
   }
-  )
+)
 </script>
 <style lang="less" scoped>
-  .application-navigation {
+.application-navigation {
   width: 19.12rem;
   height: 0.84rem;
   line-height: 0.8rem;
@@ -193,5 +190,5 @@
       background: #526aff;
     }
   }
-  }
+}
 </style>

front/src/views/detailsAll/components/Application/ApplicationPresentation.vue

@@ -8,15 +8,10 @@
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main">
+    <div class="main" :style="`${img}background-position:center;background-size:cover;`">
       <div class="play" @click="showModal"></div>
     </div>
-    <a-modal
+    <a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
-      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%">
@@ -27,10 +22,10 @@
   </div>
 </template>
 <script setup>
-  import { ref, reactive, defineProps, watch } from 'vue'
+import { ref, reactive, defineProps, watch } from 'vue'
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-  const visible = ref(false)
+const visible = ref(false)
-  const options = reactive({
+const options = reactive({
   width: '7.00rem', //播放器宽度
   height: '4.00rem', //播放器高度
   color: '#409eff', //主题色
@@ -55,16 +50,17 @@
     'pageFullScreen',
     'fullScreen',
   ], //显示所有按钮,
-  })
+})
-  const showModal = () => {
+const showModal = () => {
   visible.value = true
-  }
+}
-  const props = defineProps({
+const props = defineProps({
   dataList: { type: Object, default: null },
-  })
+})
-  const flag = ref(true)
+const flag = ref(true)
-  console.log('111111111111111111111,', props.dataList)
+const img = ref({})
-  if (props.dataList.infoList) {
+console.log('111111111111111111111,', props.dataList)
+if (props.dataList.infoList) {
   let obj = props.dataList.infoList.filter(
     (item) => item.attrType === '应用展示视频'
   )[0]
@@ -72,10 +68,16 @@
   if (!obj) {
     flag.value = false
   } else {
+    let imgindex = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用图片'
+    )[0]
     options.src = obj.attrValue
+    if (imgindex) {
+      img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
     }
   }
-  watch(
+}
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -86,15 +88,23 @@
       if (!obj) {
         flag.value = false
       } else {
+        let imgindex = props.dataList.infoList.filter(
+          (item) => item.attrType === '应用图片'
+        )[0]
         options.src = obj.attrValue
+        if (imgindex) {
+          img.value =
+            'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
         }
       }
     }
-  )
+  }
+)
 </script>
 <style lang="less" scoped>
-  .application-presentation {
+.application-presentation {
   padding: 0.8rem 3rem 0;
+
   .main {
     height: 3.4rem;
     border-radius: 0.1rem;
@@ -104,6 +114,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
     .play {
       width: 0.96rem;
       height: 0.96rem;
@@ -112,5 +123,5 @@
       cursor: pointer;
     }
   }
-  }
+}
 </style>