wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

详情页关联组件样式修改

This commit is contained in:
851673013@qq.com 2022-07-04 17:15:06 +08:00
parent 854eaef183
commit 68ddce3130
11 changed files with 232 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
front/src/views/detailsAll/ApplicationDetails.vue
View File

@ -33,7 +33,8 @@
></application-associated-components> ></application-associated-components>
<!-- 关联能力 --> <!-- 关联能力 -->
<application-associated-ability <application-associated-ability
:associatedComponents="associatedComponentsFunction()" v-if="!loading"
:associatedComponents="associatedComponents"
id="application-associated-ability" id="application-associated-ability"
class="scrollBox" class="scrollBox"
></application-associated-ability> ></application-associated-ability>
@ -84,11 +85,8 @@
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home' import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const associatedComponents = ref([ const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
{ type: '组件服务', dataList: [] }, let loading = ref(true)
{ type: '数据资源', dataList: [] },
{ type: '基础设施', dataList: [] },
])
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
@ -164,7 +162,9 @@
type: item.type, type: item.type,
} }
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => { queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data associatedComponents.value[0].dataList = res.data.data
debugger
loading.value = false
}) })
}) })
} else if (obj) { } else if (obj) {

3
front/src/views/detailsAll/BusinessDetails.vue
View File

@ -18,6 +18,7 @@
></business-navigation> ></business-navigation>
<!-- 关联能力 --> <!-- 关联能力 -->
<business-associated-ability <business-associated-ability
v-if="!loading"
:associatedComponents="associatedComponents" :associatedComponents="associatedComponents"
id="business-associated-ability" id="business-associated-ability"
class="scrollBox" class="scrollBox"
@ -82,6 +83,7 @@
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let loading = ref(true)
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
@ -146,6 +148,7 @@
} }
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => { queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data associatedComponents.value[index].dataList = res.data.data
loading.value = false
}) })
}) })
} else if (obj) { } else if (obj) {

27
front/src/views/detailsAll/DeveloperComponents.vue
View File

@ -12,7 +12,7 @@
<!-- 导航 --> <!-- 导航 -->
<developer-navigation <developer-navigation
:dataList="dataList.data" :dataList="dataList.data"
:associatedComponents="associatedComponents" :associatedComponents="associatedComponentsFunction()"
:class="{ fixed: scrollTop >= 600 }" :class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow" :selectNow="selectNow"
></developer-navigation> ></developer-navigation>
@ -24,6 +24,7 @@
></Developer-presentation> ></Developer-presentation>
<!-- 关联能力 --> <!-- 关联能力 -->
<developer-associated-ability <developer-associated-ability
v-if="!loading"
:associatedComponents="associatedComponents" :associatedComponents="associatedComponents"
id="developer-associated-ability" id="developer-associated-ability"
class="scrollBox" class="scrollBox"
@ -89,6 +90,7 @@
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let loading = ref(true)
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
@ -125,9 +127,16 @@
} }
}) })
}) })
const init = (id) => { const init = (id) => {
if (id) { if (id) {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[0].dataList = res.data.data
debugger
loading.value = false
})
selectOne(id).then((res) => { selectOne(id).then((res) => {
// console.clear() // console.clear()
dataList.data = res.data.data dataList.data = res.data.data
@ -147,20 +156,18 @@
}) })
} }
}) })
associatedComponents.value.map((item, index) => { associatedComponents.value.map((item, index) => {})
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) { } else if (obj) {
dataList.data = obj dataList.data = obj
console.log('预览==============', obj) console.log('预览==============', obj)
} }
} }
init(id) init(id)
const associatedComponentsFunction = () => {
if (associatedComponents.value[0].dataList.length > 0) {
return associatedComponents.value
}
}
onBeforeUnmount(() => { onBeforeUnmount(() => {
mybus.off('flyToView') mybus.off('flyToView')
}) })

1
front/src/views/detailsAll/LayerService.vue
View File

@ -154,6 +154,7 @@
keyId: id, keyId: id,
} }
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => { queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
debugger
associatedComponents.value[index].dataList = res.data.data associatedComponents.value[index].dataList = res.data.data
}) })
}) })

36
front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
View File

@ -8,13 +8,19 @@
:key="dataListitem.id" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)" @click="switchFunction(dataListitem.id)"
> >
<div class="associated-ability-card-title"> <a-tooltip>
{{ dataListitem.name }} <template #title>{{ dataListitem.name }}</template>
</div> <div class="associated-ability-card-title">
<div class="associated-ability-card-content"> {{ dataListitem.name }}
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -40,7 +46,7 @@
// id: id, // id: id,
// }, // },
// }) // })
window.open(window.SITE_CONFIG.previewUrl+ '#/details?id=' + id) window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id) // alert(id)
} }
console.log('这个是空值', props.associatedComponents[0]) console.log('这个是空值', props.associatedComponents[0])
@ -85,21 +91,29 @@
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: flex; display: grid;
justify-content: space-around; grid-template-columns: repeat(4, 25%);
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer; cursor: pointer;
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -111,6 +125,10 @@
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }

120
front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
View File

@ -1,25 +1,28 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联组件" type="RELEVANCE"></detals-title> <detals-title title="关联组件" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div class="application-associated-ability-main">
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(item, index) in dataFrom" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="item.type" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
:class="cardFunction(dataFrom[0].dataList)"
> >
<div class="associated-ability-card-title"> <div class="icon"></div>
{{ item.type }} <a-tooltip>
</div> <template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-content"> <div class="associated-ability-card-title">
<div
class="associated-ability-card-content-font"
v-for="(dataListitem, dataListindex) in item.dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<span>{{ dataListindex + 1 }}、</span>
{{ dataListitem.name }} {{ dataListitem.name }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description || '' }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description || '' }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -39,44 +42,36 @@
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
//点击查看详情 //点击查看详情
const switchFunction = (id) => { const switchFunction = (id) => {
router.push({ // router.push({
path: '/details', // path: '/details',
query: { // query: {
id: id, // id: id,
}, // },
}) // })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
} }
if (props.associatedComponents) { if (props.associatedComponents[0].dataList.length != 0) {
if ( console.log('这个是空值', props.associatedComponents)
props.associatedComponents[0].dataList.length > 0 || flag.value = true
props.associatedComponents[1].dataList.length > 0 || dataFrom.value = props.associatedComponents
props.associatedComponents[2].dataList.length > 0 console.log('dataFrom.value', dataFrom.value)
) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
} else { } else {
flag.value = false flag.value = false
} }
//根据数据多少决定对齐方式
const cardFunction = (item) => {
if (item.length < 5) {
return 'card-function-class'
}
}
watch( watch(
() => props.associatedComponents, () => props.associatedComponents,
(val) => { (val) => {
if (props.associatedComponents) { if (val[0].length != 0) {
if ( flag.value = true
val[0].dataList.length > 0 || dataFrom.value = props.associatedComponents
val[1].dataList.length > 0 || console.log('dataFrom.value', dataFrom.value)
val[2].dataList.length > 0
) {
flag.value = true
dataFrom.value = props.associatedComponents
// console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
} else { } else {
flag.value = false flag.value = false
} }
@ -102,22 +97,37 @@
align-items: center; align-items: center;
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.14rem; width: 13.3rem;
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(4, 25%);
.associated-ability-card { .associated-ability-card {
width: 4.28rem; width: 3.2rem;
// height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
padding-top: 0.3rem;
cursor: pointer; cursor: pointer;
.icon {
width: 82px;
height: 82px;
background: url('~@/assets/detailsAll/sf_icon1.png') no-repeat;
background-size: 100%;
}
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -128,12 +138,18 @@
color: #999; color: #999;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
} text-align: center;
.associated-ability-card-content-font:hover { display: -webkit-box;
color: #0058e1; overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }
.card-function-class {
display: flex;
justify-content: center;
}
.associated-ability-card:hover { .associated-ability-card:hover {
border-radius: 0.02rem; border-radius: 0.02rem;
border: 0.01rem solid #0058e1; border: 0.01rem solid #0058e1;

26
front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
View File

@ -86,14 +86,11 @@
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联组件') { if (
if ( item.name == '关联组件' &&
props.associatedComponents[0].dataList.length != 0 || props.associatedComponents[0].length != 0
props.associatedComponents[1].dataList.length != 0 || ) {
props.associatedComponents[2].dataList.length != 0 item.show = true
) {
item.show = true
}
} else { } else {
item.show = true item.show = true
} }
@ -133,14 +130,11 @@
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联组件') { if (
if ( item.name == '关联组件' &&
props.associatedComponents[0].dataList.length != 0 || props.associatedComponents[0].length != 0
props.associatedComponents[1].dataList.length != 0 || ) {
props.associatedComponents[2].dataList.length != 0 item.show = true
) {
item.show = true
}
} else { } else {
item.show = true item.show = true
} }

56
front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="RELEVANCE"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div class="application-associated-ability-main">
<div <div
class="associated-ability-card" class="associated-ability-card"
@ -8,13 +8,19 @@
:key="dataListitem.id" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)" @click="switchFunction(dataListitem.id)"
> >
<div class="associated-ability-card-title"> <a-tooltip>
{{ dataListitem.name }} <template #title>{{ dataListitem.name }}</template>
</div> <div class="associated-ability-card-title">
<div class="associated-ability-card-content"> {{ dataListitem.name }}
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -34,17 +40,20 @@
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
//点击查看详情 //点击查看详情
const switchFunction = (id) => { const switchFunction = (id) => {
router.push({ // router.push({
path: '/details', // path: '/details',
query: { // query: {
id: id, // id: id,
}, // },
}) // })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
} }
if (props.associatedComponents[0].dataList.length != 0) { console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
debugger
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
} else { } else {
flag.value = false flag.value = false
@ -82,21 +91,29 @@
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(4, 25%);
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer; cursor: pointer;
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -107,6 +124,11 @@
color: #999; color: #999;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }

8
front/src/views/detailsAll/components/Business/BusinessNavigation.vue
View File

@ -24,14 +24,14 @@
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const navList = ref([ const navList = ref([
{
name: '组件展示',
key: 'business-presentation',
},
{ {
name: '关联应用', name: '关联应用',
key: 'business-associated-ability', key: 'business-associated-ability',
}, },
{
name: '组件展示',
key: 'business-presentation',
},
{ {
name: '功能介绍', name: '功能介绍',
key: 'function-introduction', key: 'function-introduction',

59
front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
View File

@ -1,20 +1,26 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="RELEVANCE"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div class="application-associated-ability-main">
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="dataListitem in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)" @click="switchFunction(dataListitem.id)"
> >
<div class="associated-ability-card-title"> <a-tooltip>
{{ dataListitem.name }} <template #title>{{ dataListitem.name }}</template>
</div> <div class="associated-ability-card-title">
<div class="associated-ability-card-content"> {{ dataListitem.name }}
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -34,17 +40,19 @@
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
//点击查看详情 //点击查看详情
const switchFunction = (id) => { const switchFunction = (id) => {
router.push({ // router.push({
path: '/details', // path: '/details',
query: { // query: {
id: id, // id: id,
}, // },
}) // })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
} }
if (props.associatedComponents[0].dataList.length != 0) { if (props.associatedComponents[0].dataList.length != 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
debugger
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
} else { } else {
flag.value = false flag.value = false
@ -52,7 +60,7 @@
watch( watch(
() => props.associatedComponents, () => props.associatedComponents,
(val) => { (val) => {
if (val) { if (val.length != 0) {
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
@ -63,7 +71,7 @@
) )
watch( watch(
() => router.currentRoute.value.query.id, () => router.currentRoute.value.query.id,
() => { (newValue, oldValue) => {
if (oldid != router.currentRoute.value.query.id) { if (oldid != router.currentRoute.value.query.id) {
window.location.reload() window.location.reload()
} }
@ -82,21 +90,29 @@
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(4, 25%);
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer; cursor: pointer;
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -107,6 +123,11 @@
color: #999; color: #999;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }

31
front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
View File

@ -60,7 +60,7 @@
const props = defineProps({ const props = defineProps({
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Object, default: null },
}) })
const select = ref('algorithm-display') const select = ref('algorithm-display')
const list = ref([]) const list = ref([])
@ -85,13 +85,14 @@
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') { // if (item.name == '关联应用') {
if (props.associatedComponents[0].dataList.length != 0) { // debugger
item.show = true // if (props.associatedComponents[0].dataList.length != 0) {
} // item.show = true
} else { // }
item.show = true // } else {
} item.show = true
// }
} }
}) })
select.value = navList.value.filter( select.value = navList.value.filter(
@ -128,13 +129,13 @@
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') { // if (item.name == '关联应用') {
if (props.associatedComponents[0].dataList.length != 0) { // if (props.associatedComponents[0].dataList.length != 0) {
item.show = true // item.show = true
} // }
} else { // } else {
item.show = true item.show = true
} // }
} }
}) })
if (list.value.length > 0) { if (list.value.length > 0) {