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

赋能场景详情-初步完成

This commit is contained in:
lizhicheng2 2022-07-28 17:36:23 +08:00
parent ea3f4b3da1
commit d9139ae621
1 changed files with 100 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
front/src/views/home/integrationServicesDetails.vue
View File

@ -23,13 +23,44 @@
</div>
</div>
<!-- 组合能力 -->
<!-- 场景痛点 -->
<div
id="integration-pain-point"
class="pain-point scrollBox"
>
<div class="title-1">
<DetalsTitle title="场景痛点" type="PAIN POINT"></DetalsTitle>
</div>
<div class="flex-row-center">
<div class="bg"></div>
<div class="content">
<div class="content-item" v-for="(item, i) in painPoint" :key="i">{{i+1}}.{{item.description}}</div>
</div>
</div>
</div>
<!-- 解决方案 -->
<div
id="integration-solution"
class="solution scrollBox"
>
<div class="title-1">
<DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle>
</div>
<div class="flex-row-center">
<div class="content">
<div class="content-item" v-for="(item, i) in solution" :key="i">{{i+1}}.{{item.description}}</div>
</div>
</div>
</div>
<!-- 使用能力 -->
<div
id="integration-combination-ability"
class="combination-ability scrollBox"
>
<div class="title-1">
<DetalsTitle title="组合能力" type="COMBINATION ABILITY"></DetalsTitle>
<DetalsTitle title="使用能力" type="COMBINATION ABILITY"></DetalsTitle>
</div>
<div class="flex-row-center combine-content">
<div class="combine-item" v-for="(item, i) in combineList" :key="i">
@ -43,48 +74,23 @@
</div>
</div>
<!-- 使用方式 -->
<div id="integration-use-way" class="use-way scrollBox">
<!-- 构建步骤 -->
<div
id="integration-step"
class="step scrollBox"
>
<div class="title-1">
<DetalsTitle title="使用方式" type="USE WAY"></DetalsTitle>
<DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
</div>
<div class="content">
<div class="content-card flex-row-between left word-bg">
<div class="content-card-item left-item">
<div class="card-title">文档</div>
<!-- <div class="card-text">文档描述文档描述文档描述文档描述</div> -->
</div>
<div class="content-card-item btn-box">
<div class="btn" @click="handleOpenUrl('技术文档')">技术文档</div>
<div class="btn" @click="handleOpenUrl('使用手册')">使用手册</div>
</div>
</div>
<div class="content-card flex-row-start">
<div
class="right-item content-card-item"
v-for="(use, i) in useWayShowList"
:key="i"
>
<div class="card-title title">{{ use.title }}</div>
<div
class="card-text"
v-for="(d, k) in Object.keys(use.info)"
:key="k"
>
{{ use.info[d] }}:{{ detailInfoObj[d] || '--' }}
</div>
</div>
<div class="flex-row-center">
<div style="height: 300px;">
<el-steps direction="vertical" :active="step.length">
<el-step v-for="(item, i) in step" :key="i" :title="item.question" :description="item.answer"></el-step>
</el-steps>
</div>
</div>
</div>
<!-- 常见问题-->
<application-common-problem
:dataList="detailInfoObj"
id="common-problem"
class="scrollBox"
></application-common-problem>
<home-footer></home-footer>
</div>
</template>
@ -102,6 +108,9 @@
const router = useRouter()
const scrollTop = ref(0)
const domArr = ref([])
const painPoint = ref([])
const solution = ref([])
const step=ref([])
const id = router.currentRoute.value.query.id
document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0
@ -117,20 +126,24 @@
const navList = ref([
{
name: '组合能力',
name: '场景痛点',
key: 'integration-pain-point',
},
{
name: '解决方案',
key: 'integration-solution',
},
{
name: '使用能力',
key: 'integration-combination-ability',
},
{
name: '使用方式',
key: 'integration-use-way',
},
{
name: '常见问题',
key: 'common-problem',
name: '构建步骤',
key: 'integration-step',
},
])
const selectNow = ref('integration-combination-ability')
const selectNow = ref('integration-pain-point')
const useWayShowList = ref([
{
@ -214,9 +227,12 @@
attrType: '常见问题',
attrValue: questionValue.attrValue || '[]',
}
painPoint.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '场景痛点').attrValue) || []
solution.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '解决方案').attrValue) || []
step.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '使用步骤').attrValue) || []
let areaObj = {
attrType: '应用领域',
attrValue: detailInfoObj.value.applicationArea,
attrValue: fuseAttrList.find((v) => v.attrType === '应用领域').attrValue,
}
combineList.value.map((item) => {
let arr = (
@ -409,6 +425,43 @@
}
}
.pain-point {
padding: 0.8rem 0;
background: rgb(247, 248, 250);
.bg {
height: 2rem;
width: 2rem;
background: url('~@/assets/home/rhfw_square.png') no-repeat;
background-size: 100%;
margin-top: 0.3rem;
}
.content {
height: 2rem;
width: 6rem;
.content-item {
margin: 0.1rem;
}
}
}
.solution {
padding: 0.8rem 0;
background: rgb(247, 248, 250);
.content {
height: 2rem;
width: 8rem;
.content-item {
margin: 0.3rem;
}
}
}
.step {
padding: 0.8rem 0;
background: rgb(247, 248, 250);
}
.combination-ability {
padding: 0.8rem 0;
background: rgb(247, 248, 250);