275 lines
7.5 KiB
Vue
275 lines
7.5 KiB
Vue
<!-- 应用场景-->
|
||
<template>
|
||
<div class="application-scenarios-and-case" v-if="flag">
|
||
<div class="application-scenarios-and-case-son">
|
||
<!-- {{ dataFrom.attrType }} -->
|
||
<div class="title">
|
||
<DetalsTitle :title="dataFrom.attrType" :type="SCENE"></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="contentLocation(1, dataFrom.attrType)">
|
||
<div class="content-right-scene" :class="'content-right-case'">
|
||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||
<a-tooltip>
|
||
<template #title>{{ itemSonTitle.desc }}</template>
|
||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||
</a-tooltip>
|
||
</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
|
||
}
|
||
}
|
||
}
|
||
)
|
||
const { log } = console
|
||
//滚动条样式
|
||
function tabIndexClass(index, title, content) {
|
||
if (title == '应用场景' && index == 0 && content.length > 6) {
|
||
return 'tab-son-class'
|
||
}
|
||
if (title == '应用案例' && index == 0 && content.length > 6) {
|
||
return 'tab-son-class-two'
|
||
}
|
||
}
|
||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||
function tabInitialize() {
|
||
return tabindex.value
|
||
}
|
||
//tab切换点击事件
|
||
function tabSwitch(name) {
|
||
tabindex.value = name
|
||
return tabindex.value
|
||
}
|
||
//内容位置初始化
|
||
function contentLocation(index, title) {
|
||
log(index, title)
|
||
if (index == 0) {
|
||
if (title == '应用场景') {
|
||
return 'content-left'
|
||
} else {
|
||
return 'content-left'
|
||
}
|
||
} else {
|
||
if (title == '应用场景') {
|
||
return 'content-right'
|
||
} else {
|
||
return 'content-right'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.application-scenarios-and-case {
|
||
width: 100%;
|
||
background: #f7f8fa;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow-x: unset;
|
||
.application-scenarios-and-case-son {
|
||
padding-top: 80px;
|
||
padding-bottom: 80px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow: unset;
|
||
.tab {
|
||
max-width: 1300px;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #808080;
|
||
border-bottom: 1px #e4e6f5 solid;
|
||
margin-top: 45px;
|
||
margin-bottom: 40px;
|
||
cursor: pointer;
|
||
padding-left: 40px;
|
||
padding-right: 40px;
|
||
.tab-son {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 100px;
|
||
.tab-top {
|
||
min-width: 120px;
|
||
font-size: 24px;
|
||
line-height: 24px;
|
||
margin-bottom: 20px;
|
||
max-width: 200px;
|
||
height: 24px;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.tab-top-down {
|
||
min-width: 120px;
|
||
color: #526aff;
|
||
margin-bottom: 16px;
|
||
}
|
||
.tab-bottom {
|
||
height: 4px;
|
||
width: 60px;
|
||
background: #526aff;
|
||
}
|
||
}
|
||
.tab-son-class {
|
||
margin-left: 430px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.tab-son-class-two {
|
||
margin-left: 230px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.tab-son:last-child {
|
||
margin-right: 0px;
|
||
}
|
||
}
|
||
.tab::-webkit-scrollbar-thumb {
|
||
background: rgba(82, 106, 255, 0.4);
|
||
}
|
||
.content {
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 1300px;
|
||
height: 340px;
|
||
.content-left {
|
||
position: absolute;
|
||
left: 0;
|
||
min-width: 620px;
|
||
// text-align: center;
|
||
.content-top {
|
||
text-align: left;
|
||
}
|
||
}
|
||
.content-right {
|
||
width: 620px;
|
||
height: 340px;
|
||
position: absolute;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
:deep(.ant-image-img) {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
.content-right-scene,
|
||
.content-right-case {
|
||
width: 620px;
|
||
height: 340px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.content-left-scene,
|
||
.content-left-case {
|
||
height: 340px;
|
||
width: 635px;
|
||
border-radius: 10px;
|
||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||
background-position: center;
|
||
background-size: 635px 340px;
|
||
}
|
||
.content-top {
|
||
font-size: 22px;
|
||
line-height: 22px;
|
||
color: #000000;
|
||
margin-bottom: 35px;
|
||
}
|
||
.content-bottom {
|
||
font-size: 18px;
|
||
color: #999999;
|
||
line-height: 26px;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 6;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
}
|
||
.application-scenarios-and-case-son:first-child {
|
||
padding-top: 100px;
|
||
}
|
||
}
|
||
</style>
|