打包模式-详情
This commit is contained in:
parent
42bad9af8e
commit
32ad0904c2
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
|
|
@ -151,6 +151,8 @@
|
|||
|
||||
// eslint-disable-next-line no-undef
|
||||
const navList = ref(navListManagement.navList)
|
||||
console.log('navList------------>', navList);
|
||||
|
||||
const props = defineProps({
|
||||
showView: { type: String, default: '' },
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="img" :style="{ 'background-image': `url(${abilityInfo.bgImg})` }"></div>
|
||||
<div class="list-box">
|
||||
<div v-for="(item, i) in abilityInfo.list" :key="i">
|
||||
{{item}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
abilityInfo: { type: Object, default: () => { } },
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-image: url('../../../assets/home/integration/jcssDetail.png');
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,58 @@
|
|||
<!-- 青岛 -->
|
||||
<div class="details-pageconetent">
|
||||
<home-header></home-header>
|
||||
<div></div>
|
||||
<div class="content-box">
|
||||
<div class="package-title">打包模式</div>
|
||||
<div class="basic-info">
|
||||
<div class="title-box">
|
||||
<div class="bar"></div>
|
||||
<span class="title-text">基本信息</span>
|
||||
</div>
|
||||
<div class="flex-row-start info-box">
|
||||
<div class="img"></div>
|
||||
<div class="right">
|
||||
<div class="name">名称：{{ detailInfoObj.name || '--' }}</div>
|
||||
<div class="flex-row-start area">
|
||||
<div class="name">应用领域：</div>
|
||||
<div class="flex-row-start tag" v-if="detailInfoObj.applicationArea">
|
||||
{{ detailInfoObj.applicationArea }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row-start desc">
|
||||
<!-- <div class="name">描述：</div> -->
|
||||
<div class="desc">描述：{{ detailInfoObj.description +
|
||||
'哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊'
|
||||
|| '--'
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<a-button size="big" class="btn-text" type="primary" @click="toView()">
|
||||
<template #icon>
|
||||
<form-outlined />
|
||||
</template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button size="big" class="btn-text" type="primary" @click="toView()">
|
||||
<template #icon>
|
||||
<form-outlined />
|
||||
</template>
|
||||
收藏
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ability-list-box">
|
||||
<div class="title-box">
|
||||
<div class="bar"></div>
|
||||
<span class="title-text">服务使用能力列表</span>
|
||||
</div>
|
||||
<div class="list-box">
|
||||
<packageAbilityList />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<home-footer></home-footer>
|
||||
</div>
|
||||
|
||||
|
|
@ -11,143 +62,169 @@
|
|||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
|
||||
|
||||
import { getIntegrationServicesList } from '@/api/home.js'
|
||||
import { useRouter } from 'vue-router'
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||||
import packageAbilityList from '@/views/home/components/packageAbilityList.vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getIntegrationDetail } from '@/api/home'
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const id = router.currentRoute.value.query.id
|
||||
|
||||
const detailInfoObj = ref({})
|
||||
const abilityList = ref([
|
||||
{
|
||||
name: '数据资源',
|
||||
// bgImg: require('../../assets/home/integration/jcssDetail.png'),
|
||||
list: []
|
||||
},
|
||||
{
|
||||
name: '组件服务',
|
||||
list: []
|
||||
},
|
||||
{
|
||||
name: '基础设施',
|
||||
list: []
|
||||
},
|
||||
])
|
||||
|
||||
// 融合服务--详情
|
||||
const getIntegrationServicesDeatil = (id) => {
|
||||
getIntegrationDetail(id).then(
|
||||
(res) => {
|
||||
if (res.data.code !== 0) {
|
||||
return message.error(res.data.msg)
|
||||
}
|
||||
detailInfoObj.value = res.data.data || {}
|
||||
console.log('detailInfoObj------------>', detailInfoObj);
|
||||
|
||||
let fuseResourceList = detailInfoObj.value.fuseResourceList || []
|
||||
abilityList.value.map(v => {
|
||||
let list = fuseResourceList.filter(x => x.type == v.name) || [];
|
||||
v.list = list.map(v => v.resource && v.resource.channelName)
|
||||
})
|
||||
console.log('abilityList.value------------>', abilityList.value);
|
||||
},
|
||||
(err) => {
|
||||
message.error(err)
|
||||
}
|
||||
)
|
||||
}
|
||||
getIntegrationServicesDeatil(id)
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.resultListSearchInput-father {
|
||||
background: #f3f5f9;
|
||||
padding: 0.2rem;
|
||||
|
||||
// padding-left: 0.2rem;
|
||||
// padding-top: 0.2rem;
|
||||
.resultListSearchInput-son {
|
||||
background: #fff;
|
||||
padding: 0.2rem 0.2rem 0rem 0.3rem;
|
||||
|
||||
.hengxian {
|
||||
width: 100%;
|
||||
height: 0.01rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
}
|
||||
.flex-row-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.resultListSearchInput {
|
||||
margin-left: 0.1rem;
|
||||
|
||||
:deep(.ant-input) {
|
||||
width: 4rem;
|
||||
height: 0.36rem;
|
||||
background: #fff;
|
||||
border-radius: 0.04rem;
|
||||
}
|
||||
|
||||
:deep(.ant-input-search-button) {
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
background: #0087ff;
|
||||
border-radius: 0.04rem !important;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height: 0.34rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
:deep(.ant-input-group-addon) {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.button-reset {
|
||||
border: 0;
|
||||
outline: none;
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
background: #e1edfa;
|
||||
border-radius: 0.04rem;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 400;
|
||||
color: #0087ff;
|
||||
line-height: 0.34rem;
|
||||
margin-left: 2.5rem;
|
||||
cursor: pointer;
|
||||
.flex-row-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.details-pageconetent {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgb(247, 247, 250);
|
||||
}
|
||||
|
||||
.content-box {
|
||||
width: 14rem;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
padding: 0.84rem 0.4rem 0.4rem 0.4rem;
|
||||
}
|
||||
|
||||
.package-title {
|
||||
padding: 10px 0;
|
||||
color: #000;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0.67rem;
|
||||
position: relative;
|
||||
background: rgba(245, 243, 243, 0.3);
|
||||
|
||||
.details-pageconetent-left {
|
||||
max-height: 6.9rem;
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
top: 0.17rem;
|
||||
left: 2.5rem;
|
||||
margin-right: 0.17rem;
|
||||
overflow: auto;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.top {
|
||||
min-height: 7.2rem;
|
||||
position: relative;
|
||||
width: 11.5rem;
|
||||
display: flex;
|
||||
padding-top: 0.2rem;
|
||||
flex-direction: column;
|
||||
.bar {
|
||||
height: 26px;
|
||||
width: 6px;
|
||||
background: #0058e1;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 0.16rem;
|
||||
justify-content: left;
|
||||
background: #f3f5f9;
|
||||
|
||||
.pagination {
|
||||
background: #f3f5f9;
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
padding: 0.2rem;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
|
||||
.tabAll {
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
margin-right: 35px;
|
||||
cursor: pointer;
|
||||
.info-box {
|
||||
padding: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.tabAll:nth-child(1) {
|
||||
margin-left: 20px;
|
||||
.img {
|
||||
width: 5rem;
|
||||
height: 4rem;
|
||||
background-image: url('../../assets/home/integration/jcssDetail.png');
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.sel {
|
||||
font-weight: 600;
|
||||
color: #0087ff;
|
||||
border-bottom: 0.02rem solid #0087ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
padding: 0 0.2rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 4rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.name {
|
||||
font-size: 0.16rem;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-grid) {
|
||||
.area {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 0.16rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0.2rem;
|
||||
|
||||
.btn-text {
|
||||
bottom: 0.2rem;
|
||||
height: 0.4rem;
|
||||
width: 1.2rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 10px;
|
||||
background: #40a9ff;
|
||||
color: #fff;
|
||||
font-size: 0.12rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue