176 lines
4.5 KiB
Vue
176 lines
4.5 KiB
Vue
<!--
|
|
* @Author: hisense.liangjunhua
|
|
* @Date: 2022-06-08 14:54:01
|
|
* @LastEditors: hisense.liangjunhua
|
|
* @LastEditTime: 2022-06-13 15:26:56
|
|
* @Description: 算法详情页导航
|
|
-->
|
|
<template>
|
|
<div class="algorithm-navigation" v-if="navList.length > 0">
|
|
<template v-for="nav in navList" :key="nav.key">
|
|
<div
|
|
class="nav"
|
|
:class="{ select: nav.key == select }"
|
|
v-if="nav.show"
|
|
@click="selectNav(nav.key)"
|
|
>
|
|
{{ nav.name }}
|
|
<span class="line"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, defineProps, watch } from 'vue'
|
|
import mybus from '@/myplugins/mybus'
|
|
const navList = ref([
|
|
{
|
|
name: '算法展示',
|
|
key: 'algorithm-display',
|
|
},
|
|
{
|
|
name: '算法优势',
|
|
key: 'algorithm-advantage',
|
|
},
|
|
{
|
|
name: '应用场景',
|
|
key: 'application-scenarios',
|
|
},
|
|
{
|
|
name: '应用案例',
|
|
key: 'application-case',
|
|
},
|
|
{
|
|
name: '算法试用',
|
|
key: 'algorithm-on-trial',
|
|
},
|
|
{
|
|
name: '计费标准',
|
|
key: 'charging-standard',
|
|
},
|
|
{
|
|
name: '使用方式',
|
|
key: 'usage-mode',
|
|
},
|
|
{
|
|
name: '常见问题',
|
|
key: 'common-problem',
|
|
},
|
|
])
|
|
const props = defineProps({
|
|
selectNow: { type: String, default: '' },
|
|
dataList: { type: Object, default: null },
|
|
})
|
|
const select = ref('algorithm-display')
|
|
const list = ref([])
|
|
const selectNav = (key) => {
|
|
select.value = key
|
|
mybus.emit('flyToView', select.value)
|
|
}
|
|
if (props.dataList.infoList) {
|
|
list.value = []
|
|
props.dataList.infoList.map((item) => {
|
|
if (
|
|
item.attrType === '算法优势' ||
|
|
item.attrType === '应用场景' ||
|
|
item.attrType === '应用案例' ||
|
|
item.attrType === '常见问题'
|
|
) {
|
|
list.value.push(item.attrType)
|
|
} else if (item.attrType === '算法介绍视频') {
|
|
list.value.push('算法展示')
|
|
} else if (item.attrType === '试用地址') {
|
|
list.value.push('算法试用')
|
|
} else if (item.attrType === '计费标准信息') {
|
|
list.value.push('计费标准')
|
|
} else if (item.attrType === '技术文档') {
|
|
list.value.push('使用方式')
|
|
}
|
|
})
|
|
navList.value.forEach((item) => {
|
|
console.log(item)
|
|
if (list.value.indexOf(item.name) > -1) {
|
|
item.show = true
|
|
}
|
|
})
|
|
select.value = navList.value.filter(
|
|
(item) => item.name === list.value[0]
|
|
)[0].key
|
|
console.log('11111111111111111111111111', list.value, navList.value)
|
|
}
|
|
watch(
|
|
() => props.selectNow,
|
|
(newValue) => {
|
|
select.value = newValue
|
|
}
|
|
)
|
|
watch(
|
|
() => props.dataList,
|
|
(val) => {
|
|
if (val) {
|
|
list.value = []
|
|
val.infoList.map((item) => {
|
|
if (
|
|
item.attrType === '算法优势' ||
|
|
item.attrType === '应用场景' ||
|
|
item.attrType === '应用案例' ||
|
|
item.attrType === '常见问题'
|
|
) {
|
|
list.value.push(item.attrType)
|
|
} else if (item.attrType === '算法介绍视频') {
|
|
list.value.push('算法展示')
|
|
} else if (item.attrType === '试用地址') {
|
|
list.value.push('算法试用')
|
|
} else if (item.attrType === '计费标准信息') {
|
|
list.value.push('计费标准')
|
|
} else if (item.attrType === '技术文档') {
|
|
list.value.push('使用方式')
|
|
}
|
|
})
|
|
navList.value.forEach((item) => {
|
|
console.log(item)
|
|
if (list.value.indexOf(item.name) > -1) {
|
|
item.show = true
|
|
}
|
|
})
|
|
select.value = navList.value.filter(
|
|
(item) => item.name === list.value[0]
|
|
)[0].key
|
|
console.log('11111111111111111111111111', list.value, navList.value)
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.algorithm-navigation {
|
|
width: 1912px;
|
|
height: 84px;
|
|
line-height: 80px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: 24px;
|
|
color: #666;
|
|
background: #fff;
|
|
padding: 0 300px;
|
|
box-shadow: 0px 5px 10px #f2f3fb;
|
|
position: relative;
|
|
.nav {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.line {
|
|
width: 40px;
|
|
height: 4px;
|
|
}
|
|
}
|
|
.select {
|
|
color: #526aff;
|
|
.line {
|
|
background: #526aff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|