<template>
|
<div class="rightTabs">
|
<el-tabs v-model="activeName" :stretch="true">
|
<el-tab-pane
|
v-for="(item, index) in data.product"
|
:label="item.name"
|
:name="`${index}`"
|
:key="index"
|
></el-tab-pane>
|
</el-tabs>
|
<div class="content">
|
<div class="top">
|
<div class="left">
|
<div class="title">{{ activeItem.title }}</div>
|
<div class="des">{{ activeItem.des }}</div>
|
</div>
|
<div class="middle">
|
<div class="feature">
|
<div class="featureTitle">
|
<span class="icon iconfont"></span>
|
{{ activeItem.content[0].key }}
|
</div>
|
<ul class="featureContent">
|
<li
|
v-for="(item, index) in activeItem.content[0].value"
|
:key="index"
|
>
|
<span class="dot"></span>{{ item }}
|
</li>
|
</ul>
|
</div>
|
<div class="feature">
|
<div class="featureTitle">
|
<span class="icon iconfont"></span>
|
{{ activeItem.content[1].key }}
|
</div>
|
<ul class="featureContent">
|
<li
|
v-for="(item, index) in activeItem.content[1].value"
|
:key="index"
|
>
|
<span class="dot"></span>{{ item }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="right">
|
<img :src="activeItem.img" alt="" />
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="question">立即咨询</div>
|
<div class="buy">立即购买</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
data: {
|
type: Object,
|
},
|
},
|
data() {
|
return {
|
activeName: "0",
|
};
|
},
|
methods: {},
|
computed: {
|
activeItem() {
|
return this.data.product[this.activeName];
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.rightTabs {
|
position: relative;
|
flex: 1;
|
height: 100%;
|
background-color: #fff;
|
|
::v-deep .el-tabs__item {
|
height: 48px;
|
line-height: 48px;
|
font-size: 14px;
|
color: #666666;
|
|
&.is-active {
|
color: #0065ff;
|
font-weight: 700;
|
}
|
}
|
|
::v-deep .el-tabs__active-bar {
|
background-color: #0065ff;
|
}
|
|
::v-deep .el-tabs__nav-wrap::after {
|
height: 1px;
|
background-color: #e9ebee;
|
}
|
|
.content {
|
.top {
|
display: flex;
|
height: 300px;
|
.left {
|
margin-top: 114px;
|
margin-left: 20px;
|
margin-right: 30px;
|
width: 195px;
|
height: 100%;
|
|
.title {
|
margin-bottom: 20px;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.des {
|
font-size: 14px;
|
line-height: 20px;
|
color: #999999;
|
}
|
}
|
|
.middle {
|
margin-top: 55px;
|
margin-right: 19px;
|
width: 404px;
|
height: 100%;
|
|
.feature {
|
margin-bottom: 40px;
|
|
.featureTitle {
|
display: flex;
|
align-items: center;
|
margin-left: -15px;
|
margin-bottom: 7px;
|
font-size: 16px;
|
|
span {
|
font-size: 28px;
|
margin-right: 10px;
|
color: rgb(0, 101, 255);
|
}
|
}
|
|
li {
|
position: relative;
|
display: flex;
|
align-items: center;
|
color: #666666;
|
font-size: 14px;
|
line-height: 28px;
|
|
span {
|
top: 12px;
|
left: -10px;
|
position: absolute;
|
display: inline-block;
|
background: #666666;
|
border-radius: 50%;
|
width: 4px;
|
height: 4px;
|
}
|
}
|
}
|
}
|
|
.right {
|
margin-top: 86px;
|
img {
|
width: 292px;
|
}
|
}
|
}
|
|
.bottom {
|
position: absolute;
|
left: 0;
|
bottom: 20px;
|
width: 100%;
|
display: flex;
|
justify-content: end;
|
|
.question {
|
margin-right: 20px;
|
width: 160px;
|
height: 40px;
|
border: 1px solid #0065ff;
|
filter: drop-shadow(0px 2px 8px rgba(0, 43, 106, 0.12));
|
font-weight: bold;
|
font-size: 14px;
|
color: #0065ff;
|
line-height: 40px;
|
text-align: center;
|
cursor: pointer;
|
|
&:hover {
|
background: linear-gradient(
|
93.58deg,
|
#1a9cff 0%,
|
#0065ff 21.35%,
|
#0065ff 79.69%,
|
#1a9cff 100%
|
);
|
color: #fff;
|
}
|
}
|
|
.buy {
|
margin-right: 20px;
|
width: 160px;
|
height: 40px;
|
border: 1px solid #ff6a00;
|
filter: drop-shadow(0px 2px 8px rgba(0, 43, 106, 0.12));
|
font-weight: bold;
|
font-size: 14px;
|
color: #ff6a00;
|
line-height: 40px;
|
text-align: center;
|
cursor: pointer;
|
|
&:hover {
|
color: #fff;
|
border-color: #fff;
|
background: linear-gradient(
|
90.78deg,
|
#ffba4a 0%,
|
#ff6a00 20.33%,
|
#ff6a00 79.66%,
|
#ffba4a 100%
|
);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
