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