128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<div class="application-associated-ability" v-if="flag">
|
||
|
|
<detals-title title="关联能力" type="RELEVANCE"></detals-title>
|
||
|
|
<div class="application-associated-ability-main">
|
||
|
|
<div
|
||
|
|
class="associated-ability-card"
|
||
|
|
v-for="(item, index) in dataFrom"
|
||
|
|
:key="item.type"
|
||
|
|
>
|
||
|
|
<div class="associated-ability-card-title">
|
||
|
|
{{ item.type }}
|
||
|
|
</div>
|
||
|
|
<div class="associated-ability-card-content">
|
||
|
|
<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 }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, defineProps, watch } from 'vue'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
const router = useRouter()
|
||
|
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||
|
|
const props = defineProps({
|
||
|
|
associatedComponents: { type: Array, default: null },
|
||
|
|
})
|
||
|
|
const dataFrom = ref([])
|
||
|
|
const flag = ref(true)
|
||
|
|
const oldid = router.currentRoute.value.query.id
|
||
|
|
//点击查看详情
|
||
|
|
const switchFunction = (id) => {
|
||
|
|
router.push({
|
||
|
|
path: '/details',
|
||
|
|
query: {
|
||
|
|
id: id,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if (props.associatedComponents) {
|
||
|
|
flag.value = true
|
||
|
|
dataFrom.value = props.associatedComponents
|
||
|
|
console.log('dataFrom.value', dataFrom.value)
|
||
|
|
} else {
|
||
|
|
flag.value = false
|
||
|
|
}
|
||
|
|
watch(
|
||
|
|
() => props.associatedComponents,
|
||
|
|
(val) => {
|
||
|
|
if (val) {
|
||
|
|
flag.value = true
|
||
|
|
dataFrom.value = props.associatedComponents
|
||
|
|
console.log('dataFrom.value', dataFrom.value)
|
||
|
|
} else {
|
||
|
|
flag.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
watch(
|
||
|
|
() => router.currentRoute.value.query.id,
|
||
|
|
(newValue, oldValue) => {
|
||
|
|
if (oldid != router.currentRoute.value.query.id) {
|
||
|
|
window.location.reload()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{ immediate: true }
|
||
|
|
)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.application-associated-ability {
|
||
|
|
padding-top: 0.8rem;
|
||
|
|
padding-bottom: 0.8rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
.application-associated-ability-main {
|
||
|
|
margin-top: 0.4rem;
|
||
|
|
width: 13.14rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
.associated-ability-card {
|
||
|
|
width: 4.28rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
border: 1px solid #e4e6f5;
|
||
|
|
border-radius: 0.1rem;
|
||
|
|
padding-bottom: 0.3rem;
|
||
|
|
cursor: pointer;
|
||
|
|
.associated-ability-card-title {
|
||
|
|
padding-top: 0.3rem;
|
||
|
|
font-size: 0.22rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.associated-ability-card-content {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 0.25rem;
|
||
|
|
padding-left: 0.3rem;
|
||
|
|
.associated-ability-card-content-font {
|
||
|
|
font-size: 0.18rem;
|
||
|
|
color: #999;
|
||
|
|
margin-right: 0.15rem;
|
||
|
|
margin-top: 0.15rem;
|
||
|
|
}
|
||
|
|
.associated-ability-card-content-font:hover {
|
||
|
|
color: #0058e1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.associated-ability-card:hover {
|
||
|
|
border-radius: 0.02rem;
|
||
|
|
border: 0.01rem solid #0058e1;
|
||
|
|
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|