308 lines
13 KiB
Vue
308 lines
13 KiB
Vue
<!-- 应用场景和应用案例 -->
|
||
<template>
|
||
<div class="application-scenarios-and-case" v-if="flag">
|
||
<div
|
||
class="application-scenarios-and-case-son"
|
||
v-for="item in dataFrom"
|
||
:key="item.title"
|
||
>
|
||
<div class="title">
|
||
<DetalsTitle
|
||
:title="item.title"
|
||
:type="item.englishTitle"
|
||
></DetalsTitle>
|
||
</div>
|
||
<div class="tab">
|
||
<div
|
||
v-for="(itemSonTitle, indexSonTitle) in item.content"
|
||
:key="itemSonTitle.title"
|
||
@click="tabSwitch(itemSonTitle.title, item.title)"
|
||
class="tab-son"
|
||
:class="tabIndexClass(indexSonTitle, item.title, item.content)"
|
||
>
|
||
<div
|
||
class="tab-top"
|
||
:class="
|
||
tabInitialize(item.title) == itemSonTitle.title
|
||
? 'tab-top-down'
|
||
: ''
|
||
"
|
||
>
|
||
{{ itemSonTitle.title }}
|
||
</div>
|
||
<div
|
||
class="tab-bottom"
|
||
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<template v-for="itemSonTitle in item.content" :key="itemSonTitle">
|
||
<div
|
||
class="content"
|
||
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||
>
|
||
<div :class="contentLocation(0, item.title)">
|
||
<div
|
||
:class="
|
||
item.title == '应用场景'
|
||
? 'content-left-scene'
|
||
: 'content-left-case'
|
||
"
|
||
></div>
|
||
</div>
|
||
<div :class="contentLocation(1, item.title)">
|
||
<div
|
||
:class="
|
||
item.title == '应用场景'
|
||
? 'content-right-scene'
|
||
: 'content-right-case'
|
||
"
|
||
>
|
||
<div class="content-top">{{ itemSonTitle.title }}</div>
|
||
<div class="content-bottom">{{ itemSonTitle.content }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||
import { ref, defineProps, watch } from 'vue'
|
||
let dataFrom = ref([
|
||
{
|
||
title: '应用案例',
|
||
englishTitle: 'CASE',
|
||
content: [
|
||
{
|
||
title: '应用案例一',
|
||
content:
|
||
'应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||
},
|
||
{
|
||
title: '应用案例二',
|
||
content:
|
||
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||
},
|
||
{
|
||
title: '应用案例三',
|
||
content:
|
||
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||
},
|
||
{
|
||
title: '应用案例四',
|
||
content:
|
||
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||
},
|
||
{
|
||
title: '应用案例五',
|
||
content:
|
||
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||
},
|
||
{
|
||
title: '应用案例六',
|
||
content:
|
||
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||
},
|
||
{
|
||
title: '应用案例七',
|
||
content:
|
||
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||
},
|
||
],
|
||
},
|
||
])
|
||
const flag = ref(true)
|
||
//数据初始化
|
||
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
|
||
}
|
||
}
|
||
watch(
|
||
() => props.dataList,
|
||
(val) => {
|
||
if (val) {
|
||
let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
|
||
if (!obj) {
|
||
flag.value = false
|
||
}
|
||
}
|
||
}
|
||
)
|
||
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切换方法
|
||
let tabindex = ref('场景说明一')
|
||
let tabindexCase = ref('应用案例一')
|
||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||
function tabInitialize(title) {
|
||
if (title == '应用场景') {
|
||
return tabindex.value
|
||
} else {
|
||
return tabindexCase.value
|
||
}
|
||
}
|
||
//tab切换点击事件
|
||
function tabSwitch(name, title) {
|
||
if (title == '应用场景') {
|
||
tabindex.value = name
|
||
return tabindex.value
|
||
} else {
|
||
tabindexCase.value = name
|
||
return tabindexCase.value
|
||
}
|
||
}
|
||
//内容位置初始化
|
||
function contentLocation(index, title) {
|
||
log(index, title)
|
||
if (index == 0) {
|
||
if (title == '应用场景') {
|
||
return 'content-right'
|
||
} else {
|
||
return 'content-left'
|
||
}
|
||
} else {
|
||
if (title == '应用场景') {
|
||
return 'content-left'
|
||
} 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;
|
||
}
|
||
.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;
|
||
}
|
||
.content-right {
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
.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: 5;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
}
|
||
.application-scenarios-and-case-son:first-child {
|
||
padding-top: 100px;
|
||
}
|
||
}
|
||
</style>
|