bug568
This commit is contained in:
851673013@qq.com
parent
deb886a254
commit
ea665df41e
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-right">
|
||||
<div class="content-left">
|
||||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||
<a-image
|
||||
:width="635"
|
||||
|
|
@ -121,13 +121,13 @@
|
|||
log(index, title)
|
||||
if (index == 0) {
|
||||
if (title == '应用场景') {
|
||||
return 'content-right'
|
||||
return 'content-left'
|
||||
} else {
|
||||
return 'content-left'
|
||||
}
|
||||
} else {
|
||||
if (title == '应用场景') {
|
||||
return 'content-left'
|
||||
return 'content-right'
|
||||
} else {
|
||||
return 'content-right'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<!-- 应用场景-->
|
||||
<template>
|
||||
<div class="function-intorduction" v-if="flag">
|
||||
<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>
|
||||
<DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
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="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>
|
||||
|
|
@ -97,11 +97,15 @@
|
|||
}
|
||||
}
|
||||
)
|
||||
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() {
|
||||
|
|
@ -112,10 +116,27 @@
|
|||
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>
|
||||
.function-intorduction {
|
||||
.application-scenarios-and-case {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
|
|
@ -123,63 +144,62 @@
|
|||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
max-width: 1300px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 0.01rem #e4e6f5 solid;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 0.4rem;
|
||||
border-bottom: 1px #e4e6f5 solid;
|
||||
margin-top: 45px;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
margin-right: 100px;
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-bottom: 0.2rem;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
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: 1.2rem;
|
||||
min-width: 120px;
|
||||
color: #526aff;
|
||||
margin-bottom: 0.16rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 0.04rem;
|
||||
width: 0.6rem;
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 4.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
margin-left: 430px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 2.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
margin-left: 230px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0rem;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
|
|
@ -189,57 +209,57 @@
|
|||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 13rem;
|
||||
height: 3.4rem;
|
||||
min-width: 1300px;
|
||||
height: 340px;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 6.2rem;
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
min-width: 620px;
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
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: 6.2rem;
|
||||
height: 3.4rem;
|
||||
width: 620px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 3.4rem;
|
||||
width: 6.35rem;
|
||||
border-radius: 0.1rem;
|
||||
height: 340px;
|
||||
width: 635px;
|
||||
border-radius: 10px;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.35rem 3.4rem;
|
||||
background-size: 635px 340px;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.22rem;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
margin-bottom: 0.35rem;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 0.18rem;
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 0.26rem;
|
||||
line-height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
|
|
@ -248,7 +268,7 @@
|
|||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-right">
|
||||
<div class="content-left">
|
||||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||
<a-image
|
||||
:width="635"
|
||||
|
|
@ -121,13 +121,13 @@
|
|||
log(index, title)
|
||||
if (index == 0) {
|
||||
if (title == '应用场景') {
|
||||
return 'content-right'
|
||||
return 'content-left'
|
||||
} else {
|
||||
return 'content-left'
|
||||
}
|
||||
} else {
|
||||
if (title == '应用场景') {
|
||||
return 'content-left'
|
||||
return 'content-right'
|
||||
} else {
|
||||
return 'content-right'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<!-- 应用场景-->
|
||||
<template>
|
||||
<div class="function-intorduction" v-if="flag">
|
||||
<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>
|
||||
<DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
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="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>
|
||||
|
|
@ -97,11 +97,15 @@
|
|||
}
|
||||
}
|
||||
)
|
||||
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() {
|
||||
|
|
@ -112,10 +116,27 @@
|
|||
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>
|
||||
.function-intorduction {
|
||||
.application-scenarios-and-case {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
|
|
@ -123,63 +144,62 @@
|
|||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
max-width: 1300px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 0.01rem #e4e6f5 solid;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 0.4rem;
|
||||
border-bottom: 1px #e4e6f5 solid;
|
||||
margin-top: 45px;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
margin-right: 100px;
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
margin-bottom: 0.2rem;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
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: 1.2rem;
|
||||
min-width: 120px;
|
||||
color: #526aff;
|
||||
margin-bottom: 0.16rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 0.04rem;
|
||||
width: 0.6rem;
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 4.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
margin-left: 430px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 2.3rem;
|
||||
margin-bottom: 0.02rem;
|
||||
margin-left: 230px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0rem;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
|
|
@ -189,57 +209,57 @@
|
|||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 13rem;
|
||||
height: 3.4rem;
|
||||
min-width: 1300px;
|
||||
height: 340px;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 6.2rem;
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
min-width: 620px;
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 6.2rem;
|
||||
height: 3.4rem;
|
||||
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: 6.2rem;
|
||||
height: 3.4rem;
|
||||
width: 620px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 3.4rem;
|
||||
width: 6.35rem;
|
||||
border-radius: 0.1rem;
|
||||
height: 340px;
|
||||
width: 635px;
|
||||
border-radius: 10px;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.35rem 3.4rem;
|
||||
background-size: 635px 340px;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.22rem;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
margin-bottom: 0.35rem;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 0.18rem;
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 0.26rem;
|
||||
line-height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
|
|
@ -248,7 +268,7 @@
|
|||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue