<!-- 商品卡片-goodsCard -->
|
<template>
|
<div>
|
<template>
|
<div v-for="(item, index) in cardData" :key="index" class="goods_card">
|
<div class="goods_card_left">
|
<h1>{{ item.title }}</h1>
|
<p>{{ item.brief }}</p>
|
<img
|
:src="require(`../../../public/image/home/${item.imgSrc}`)"
|
alt=""
|
/>
|
</div>
|
<div v-show="item.goodsRightShow === 1" class="goods_card_right">
|
<h1>{{ item.goodsVersions }}</h1>
|
<h2>
|
{{ item.introduce }}
|
</h2>
|
<div class="button" v-show="item.haveMindTo">
|
<div class="go">立即购买</div>
|
<div class="in">立即咨询</div>
|
</div>
|
<div class="project">
|
<ul>
|
<div>产品特点</div>
|
<div style="display: flex; flex-wrap: wrap; width: 600px">
|
<li v-for="(item1, index1) in item.trait" :key="index1">
|
{{ item1 }}
|
</li>
|
</div>
|
</ul>
|
</div>
|
</div>
|
<div v-show="item.goodsRightShow === 2" class="goods_card_tab">
|
<div class="pane_top">
|
<el-button @click="tab1">智慧终端系列1</el-button>
|
<el-button @click="tab2">智慧终端系列2</el-button>
|
</div>
|
<!-- 走马灯 -->
|
<el-carousel trigger="click" arrow="never" ref="carousel">
|
<el-carousel-item
|
v-for="(pageItem, pageIndex) in item.series"
|
:key="pageIndex"
|
>
|
<div class="pane_box_wrap">
|
<div class="pane_left">
|
<p>{{ pageItem.goodsVersions }}</p>
|
<p class="tinge" style="color: #999">
|
{{ pageItem.introduce }}
|
</p>
|
<br />
|
<el-button>立即咨询</el-button>
|
<el-button>立即购买</el-button>
|
<div></div>
|
<h4>特点</h4>
|
<ul>
|
<div style="display: flex; flex-wrap: wrap">
|
<li
|
v-for="(item2, index2) in pageItem.trait"
|
:key="index2"
|
>
|
{{ item2 }}
|
</li>
|
</div>
|
</ul>
|
<h4>配置</h4>
|
<ul>
|
<li
|
v-for="(item3, index3) in pageItem.Configure"
|
:key="index3"
|
>
|
{{ item3 }}
|
</li>
|
</ul>
|
</div>
|
<div class="pane_right">
|
<img
|
:src="
|
require(`../../../public/image/home/projectImg/${pageItem.imgSrc}`)
|
"
|
alt=""
|
/>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
<div
|
v-show="item.goodsRightShow === 3"
|
class="goods_card_right goods_ai"
|
>
|
<GoodsInfo :goodsAiInfo="goodsAiInfo"></GoodsInfo>
|
</div>
|
<!-- 管理中心 -->
|
<div
|
v-show="item.goodsRightShow === 4"
|
class="goods_card_right management"
|
>
|
<el-card shadow="hover" v-for="(i, v) in manageInfo" :key="v">
|
<div class="box_card_top">
|
<h4>{{ i.classify }}</h4>
|
<p>{{ i.classifyTitle }}</p>
|
<ul>
|
<div style="display: flex; flex-wrap: wrap">
|
<div>功能描述</div>
|
<li v-for="(q, qIndex) in i.features" :key="qIndex">
|
{{ q }}
|
</li>
|
</div>
|
</ul>
|
</div>
|
<div class="box_card_bottom">
|
<p class="new_price_box">
|
<span>{{ i.currency }}</span>
|
<span>{{
|
i.newPrice.substring(0, i.newPrice.indexOf("."))
|
}}</span>
|
<span
|
>.{{
|
i.newPrice.substring(i.newPrice.indexOf(".") + 1)
|
}}</span
|
>
|
<span> /{{ i.dateType }}</span>
|
<span> 起</span>
|
</p>
|
<p class="old_price_box">
|
<del>
|
<span>{{ i.currency }}</span>
|
<span>{{ i.oldPrice }}</span>
|
</del>
|
</p>
|
</div>
|
<div class="box_card_bottom bottom_show">
|
<el-button>立即购买</el-button>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
import GoodsInfo from "./goodsInfo/goodsInfo.vue";
|
export default {
|
// props: {},
|
props: ["cardData"],
|
data() {
|
return {
|
activeName: "first",
|
goodsRightShow: false, //是否展示右侧信息栏，false:tab页不显示
|
isBtnClass: false,
|
goodsAiInfo: this.cardData[3].cards, //子组件卡片数据
|
manageInfo: this.cardData[4].cards,
|
};
|
},
|
computed: {},
|
created() {},
|
mounted() {},
|
watch: {},
|
methods: {
|
tab1() {
|
console.log(this.$refs.carousel[2], "xxx");
|
this.$refs.carousel[2].setActiveItem(0);
|
},
|
tab2() {
|
this.$refs.carousel[2].setActiveItem(1);
|
},
|
},
|
components: {
|
GoodsInfo,
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
::v-deep .el-tabs__header {
|
height: 40px;
|
margin: 0;
|
text-align: center;
|
|
.el-tabs__item.is-active {
|
color: #ff680d;
|
}
|
.el-tabs__item:hover {
|
color: #ff680d;
|
}
|
.el-tabs__item {
|
color: #222;
|
}
|
}
|
::v-deep .el-tabs__content {
|
height: 360px;
|
.el-tab-pane {
|
height: 100%;
|
box-sizing: border-box;
|
border-right: 1px solid #e4e7ed;
|
border-bottom: 1px solid #e4e7ed;
|
.pane_left {
|
h4 {
|
margin: 5px 0;
|
}
|
p {
|
margin: 0;
|
}
|
}
|
}
|
}
|
::v-deep .el-carousel {
|
border-right: 1px solid #e1e1e1;
|
border-bottom: 1px solid #e1e1e1;
|
.el-carousel__indicators {
|
display: none;
|
}
|
.el-carousel__container {
|
height: 360px;
|
}
|
.pane_box_wrap {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.pane_left {
|
width: 60%;
|
box-sizing: border-box;
|
padding: 0px 20px 0px 20px;
|
font-size: 14px;
|
ul {
|
padding: 0;
|
margin: 0;
|
div {
|
margin: 0;
|
padding: 0;
|
}
|
li {
|
color: #999999 !important;
|
font-size: 13px;
|
line-height: 21px;
|
color: rgba(0, 0, 0, 0.9);
|
padding-left: 29px;
|
list-style: none;
|
background-image: url(../../../public/image/home/对勾.png);
|
background-size: 18px 18px;
|
background-repeat: no-repeat;
|
background-position-x: left;
|
background-position-y: top;
|
}
|
li:hover {
|
color: #000 !important;
|
cursor: pointer;
|
}
|
}
|
div {
|
border-bottom: 0.5px solid #ccc;
|
padding: 10px 0;
|
}
|
.el-button {
|
border-radius: 0px;
|
width: 120px;
|
height: 44px;
|
background: #ff680d;
|
color: #fff;
|
font-size: 16px;
|
}
|
.tinge {
|
color: #999;
|
padding: 0;
|
margin: 0;
|
}
|
h4 {
|
color: #333;
|
margin: 5px 0;
|
}
|
}
|
.pane_right {
|
width: 40%;
|
text-align: center;
|
img {
|
width: 300px;
|
// height: 200px;
|
}
|
}
|
}
|
}
|
::v-deep .el-card__body {
|
padding: 0;
|
height: 400px;
|
}
|
.goods_card {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
// height: 400px;
|
margin-bottom: 70px;
|
cursor: pointer;
|
.goods_card_left {
|
width: 20%;
|
min-height: 400px;
|
max-height: 700px;
|
height: 100%;
|
box-sizing: border-box;
|
padding: 43px 23px;
|
background: #fa640a;
|
position: relative;
|
left: 0;
|
top: 0;
|
h1 {
|
font-size: 26px;
|
color: #fff;
|
text-align: left;
|
}
|
p {
|
font-size: 14px;
|
color: #fff;
|
}
|
img {
|
width: 69px;
|
height: 12.38px;
|
position: absolute;
|
left: 23px;
|
bottom: 98px;
|
}
|
}
|
.goods_card_right {
|
height: 400px;
|
box-sizing: border-box;
|
flex: 1;
|
box-sizing: border-box;
|
padding-left: 59px;
|
padding-top: 50px;
|
border: 1px solid #e1e1e1;
|
position: relative;
|
left: 0;
|
top: 0;
|
// background-image: url(../../../public/image/home/编组\ 10@3x.png);
|
// background-size: 520px 280px;
|
// background-repeat: no-repeat;
|
// background-position-x: right;
|
// background-position-y: bottom;
|
|
h1 {
|
font-size: 20px;
|
line-height: 28x;
|
color: rgba(0, 0, 0, 0.9);
|
margin-bottom: 12px;
|
}
|
h2 {
|
font-size: 14px;
|
line-height: 20px;
|
width: 93%;
|
color: #999;
|
font-weight: 500;
|
margin-bottom: 24px;
|
}
|
.button {
|
display: flex;
|
div {
|
width: 120px;
|
height: 44px;
|
background: #ff680d;
|
font-size: 16px;
|
line-height: 44px;
|
color: #fff;
|
text-align: center;
|
border: 2px solid #ff680d;
|
cursor: pointer;
|
}
|
.in {
|
background: #fff;
|
color: #ff680d;
|
margin-left: 16px;
|
}
|
}
|
.project {
|
width: 100%;
|
display: flex;
|
justify-content: left;
|
overflow: hidden;
|
ul {
|
display: flex;
|
flex-wrap: wrap;
|
// margin-top: 55px;
|
padding: 0px;
|
max-width: 500px;
|
div {
|
font-size: 20px;
|
line-height: 28px;
|
color: #999999;
|
margin-bottom: 16px;
|
width: 100%;
|
}
|
li {
|
color: #999999 !important;
|
font-size: 15px;
|
line-height: 21px;
|
color: rgba(0, 0, 0, 0.9);
|
margin-bottom: 19px;
|
padding-left: 29px;
|
padding-right: 5px;
|
list-style: none;
|
background-image: url(../../../public/image/home/对勾.png);
|
background-size: 22px 22px;
|
background-repeat: no-repeat;
|
background-position-x: left;
|
background-position-y: top;
|
// list-style-image: url(../../../public/image/home/对勾.png);
|
}
|
li:hover {
|
color: #000 !important;
|
cursor: pointer;
|
}
|
}
|
.project_img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: 300px;
|
height: 180px;
|
padding-right: 70px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.management {
|
width: 100%;
|
box-sizing: border-box;
|
display: flex;
|
padding: 0;
|
border: none;
|
height: 400px;
|
.el-card {
|
width: 33.3%;
|
border-radius: 0;
|
height: 400px;
|
position: relative;
|
.box_card_top {
|
width: 100%;
|
padding: 20px;
|
height: 75%;
|
box-sizing: border-box;
|
h4 {
|
margin: 0;
|
font-weight: normal;
|
font-size: 16px;
|
}
|
p {
|
font-size: 14px;
|
color: #828282;
|
padding: 0;
|
margin: 0;
|
}
|
p:nth-of-type(1) {
|
font-size: 14px;
|
color: #828282;
|
padding: 5px 0;
|
}
|
ul {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 15px;
|
padding: 0px;
|
max-width: 500px;
|
div {
|
font-size: 14px;
|
line-height: 28px;
|
color: #999999;
|
width: 100%;
|
}
|
li {
|
color: #999999 !important;
|
font-size: 14px;
|
line-height: 21px;
|
color: rgba(0, 0, 0, 0.9);
|
margin-bottom: 19px;
|
padding-left: 29px;
|
padding-right: 5px;
|
list-style: none;
|
background-image: url(../../../public/image/home/对勾.png);
|
background-size: 18px 18px;
|
background-repeat: no-repeat;
|
background-position-x: left;
|
background-position-y: top;
|
// list-style-image: url(../../../public/image/home/对勾.png);
|
}
|
li:hover {
|
color: #000 !important;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.box_card_bottom {
|
padding: 20px;
|
height: 25%;
|
box-sizing: border-box;
|
p {
|
margin: 0;
|
}
|
.new_price_box {
|
span:nth-of-type(2) {
|
font-size: 24px;
|
}
|
span:nth-of-type(-n + 3) {
|
color: #ff6a00;
|
}
|
}
|
.old_price_box {
|
color: #d6d6d6;
|
}
|
}
|
.bottom_show {
|
padding: 0;
|
width: 100%;
|
height: 0;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
// display: none;
|
transition: height 0.3s ease-in-out;
|
.el-button {
|
display: block;
|
width: 100%;
|
height: 100px;
|
height: 0;
|
background: #fa640a;
|
font-size: 18px;
|
color: #fff;
|
}
|
}
|
}
|
.el-card:hover {
|
.box_card_bottom {
|
height: 100px;
|
display: none;
|
.el-button{
|
height: 100%;
|
}
|
}
|
.bottom_show {
|
display: block;
|
}
|
}
|
}
|
.goods_card_tab {
|
height: 100%;
|
box-sizing: border-box;
|
flex: 1;
|
padding: 0;
|
.pane_top {
|
width: 100%;
|
box-sizing: border-box;
|
// border-right: 1px solid #E4E7ED ;
|
border-bottom: 1px solid #e4e7ed;
|
.el-button {
|
border-bottom: none;
|
border-radius: 0;
|
}
|
.el-button:hover {
|
color: #fa640a;
|
}
|
}
|
.el-tabs__content {
|
height: 200px !important;
|
.pane_box {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
// height: 100%;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
.goods_card:nth-of-type(4) .goods_card_left {
|
height: 600px;
|
}
|
.goods_card:nth-of-type(4) .goods_card_right {
|
height: 600px;
|
border: none;
|
box-sizing: border-box;
|
padding: 0;
|
}
|
</style>
|
