255 lines
7.0 KiB
Vue
255 lines
7.0 KiB
Vue
<!--功能介绍-->
|
||
<template>
|
||
<div class="function-intorduction" v-if="flag">
|
||
<div class="application-scenarios-and-case-son">
|
||
<!-- {{ dataFrom.attrType }} -->
|
||
<div class="title">
|
||
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
|
||
</div>
|
||
<div class="tab">
|
||
<div
|
||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||
:key="itemSonTitle.name"
|
||
@click="tabSwitch(itemSonTitle.name)"
|
||
class="tab-son"
|
||
:class="
|
||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||
"
|
||
>
|
||
<a-tooltip>
|
||
<template #title>{{ itemSonTitle.name }}</template>
|
||
<div
|
||
class="tab-top"
|
||
:class="
|
||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||
"
|
||
>
|
||
{{ itemSonTitle.name }}
|
||
</div>
|
||
</a-tooltip>
|
||
<div
|
||
class="tab-bottom"
|
||
v-if="tabInitialize() == itemSonTitle.name"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||
<div class="content-left">
|
||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||
<a-image
|
||
:width="635"
|
||
:height="340"
|
||
:src="itemSonTitle.img"
|
||
v-if="itemSonTitle.img"
|
||
></a-image>
|
||
</div>
|
||
<div class="content-right">
|
||
<div class="content-right-scene">
|
||
<!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
|
||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||
import { ref, defineProps, watch } from 'vue'
|
||
const flag = ref(true)
|
||
let dataFrom = ref([])
|
||
// tab切换方法
|
||
let tabindex = ref('场景说明一')
|
||
//数据初始化
|
||
const props = defineProps({
|
||
dataList: { type: Object, default: null },
|
||
})
|
||
if (props.dataList.infoList) {
|
||
let obj = props.dataList.infoList.filter(
|
||
(item) => item.attrType === '功能介绍'
|
||
)[0]
|
||
if (!obj) {
|
||
flag.value = false
|
||
} else {
|
||
obj.attrValue = JSON.parse(obj.attrValue)
|
||
dataFrom.value = obj
|
||
tabindex.value = dataFrom.value.attrValue[0].name
|
||
}
|
||
}
|
||
watch(
|
||
() => props.dataList,
|
||
(val) => {
|
||
if (val) {
|
||
let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
|
||
if (!obj) {
|
||
flag.value = false
|
||
} else {
|
||
obj.attrValue = JSON.parse(obj.attrValue)
|
||
dataFrom.value = obj
|
||
tabindex.value = dataFrom.value.attrValue[0].name
|
||
}
|
||
}
|
||
}
|
||
)
|
||
//滚动条样式
|
||
function tabIndexClass(index, title, content) {
|
||
if (title == '功能介绍' && index == 0 && content.length > 6) {
|
||
return 'tab-son-class'
|
||
}
|
||
}
|
||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||
function tabInitialize() {
|
||
return tabindex.value
|
||
}
|
||
//tab切换点击事件
|
||
function tabSwitch(name) {
|
||
tabindex.value = name
|
||
return tabindex.value
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.function-intorduction {
|
||
width: 100%;
|
||
background: #f7f8fa;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow-x: unset;
|
||
.application-scenarios-and-case-son {
|
||
padding-top: 0.8rem;
|
||
padding-bottom: 0.8rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow: unset;
|
||
.tab {
|
||
max-width: 13rem;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #808080;
|
||
border-bottom: 0.01rem #e4e6f5 solid;
|
||
margin-top: 0.45rem;
|
||
margin-bottom: 0.4rem;
|
||
cursor: pointer;
|
||
padding-left: 0.4rem;
|
||
padding-right: 0.4rem;
|
||
.tab-son {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 1rem;
|
||
text-align: center;
|
||
.tab-top {
|
||
min-width: 1.2rem;
|
||
font-size: 0.24rem;
|
||
line-height: 0.26rem;
|
||
margin-bottom: 0.2rem;
|
||
max-width: 2rem;
|
||
height: 0.26rem;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
word-break: break-all;
|
||
text-align: center;
|
||
}
|
||
.tab-top-down {
|
||
min-width: 1.2rem;
|
||
color: #526aff;
|
||
margin-bottom: 0.16rem;
|
||
}
|
||
.tab-bottom {
|
||
height: 0.04rem;
|
||
width: 0.6rem;
|
||
background: #526aff;
|
||
}
|
||
}
|
||
.tab-son-class {
|
||
margin-left: 4.3rem;
|
||
margin-bottom: 0.02rem;
|
||
}
|
||
.tab-son-class-two {
|
||
margin-left: 2.3rem;
|
||
margin-bottom: 0.02rem;
|
||
}
|
||
.tab-son:last-child {
|
||
margin-right: 0rem;
|
||
}
|
||
}
|
||
.tab::-webkit-scrollbar-thumb {
|
||
background: rgba(82, 106, 255, 0.4);
|
||
}
|
||
.content {
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 13rem;
|
||
height: 3.4rem;
|
||
.content-left {
|
||
position: absolute;
|
||
left: 0;
|
||
min-width: 6.2rem;
|
||
:deep(.ant-image-img) {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
// text-align: center;
|
||
.content-top {
|
||
text-align: left;
|
||
}
|
||
}
|
||
.content-right {
|
||
width: 6.2rem;
|
||
height: 3.4rem;
|
||
position: absolute;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.content-right-scene,
|
||
.content-right-case {
|
||
width: 6.2rem;
|
||
height: 3.4rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.content-left-scene,
|
||
.content-left-case {
|
||
height: 3.4rem;
|
||
width: 6.35rem;
|
||
border-radius: 0.1rem;
|
||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||
background-position: center;
|
||
background-size: 6.35rem 3.4rem;
|
||
}
|
||
.content-top {
|
||
font-size: 0.22rem;
|
||
line-height: 0.22rem;
|
||
color: #000000;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.content-bottom {
|
||
font-size: 0.18rem;
|
||
color: #999999;
|
||
line-height: 0.26rem;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 6;
|
||
-webkit-box-orient: vertical;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
.application-scenarios-and-case-son:first-child {
|
||
padding-top: 1rem;
|
||
}
|
||
}
|
||
</style>
|