<template>
|
<div class="rightForm">
|
<div class="formLeft">
|
<div class="title">{{ data.product.title }}</div>
|
<ul class="des">
|
<li
|
class="desItem"
|
v-for="(item, index) in data.product.menu"
|
:key="index"
|
>
|
<span class="icon iconfont"></span>{{ item }}
|
</li>
|
</ul>
|
</div>
|
|
<div class="formRight">
|
<div class="channel">
|
<div class="label">通道数量</div>
|
<el-input-number
|
v-model="channel"
|
controls-position="right"
|
:min="1"
|
></el-input-number>
|
</div>
|
<div class="camera">
|
<div class="label">摄像机数量</div>
|
<el-input-number
|
v-model="camera"
|
controls-position="right"
|
:min="1"
|
></el-input-number>
|
</div>
|
<div class="time">
|
<div class="label">购买时长</div>
|
<div class="years">
|
<div
|
class="year"
|
:class="{ active: active.year === v.year }"
|
v-for="(v, i) in data.product.price"
|
:key="i"
|
@click="active = v"
|
>
|
{{ v.year }}年
|
<div class="save" v-if="v.discount">{{ v.discount }}折</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="price">
|
<price
|
:priceOld="priceOld"
|
:priceNew="priceNew"
|
:showIcon="true"
|
></price>
|
</div>
|
|
<div class="button">立即购买</div>
|
<div class="info">
|
产品支持<span class="blue">1路</span>实时视频分析，可绑定<span
|
class="blue"
|
>1台</span
|
>摄像机，如需增加绑定，请<span class="blue line">点击此处</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import price from "@/components/Price.vue";
|
|
export default {
|
props: {
|
data: {
|
type: Object,
|
},
|
},
|
components: {
|
price,
|
},
|
data() {
|
return {
|
channel: 1,
|
camera: 1,
|
active: this.data.product.price[0],
|
};
|
},
|
methods: {},
|
computed: {
|
priceOld() {
|
return this.active.priceOld;
|
},
|
priceNew() {
|
return this.active.priceNew;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.rightForm {
|
display: flex;
|
flex: 1;
|
height: 100%;
|
background-color: #fff;
|
|
.formLeft {
|
box-sizing: border-box;
|
padding: 20px;
|
width: 489px;
|
height: 100%;
|
border-right: 1px solid #e9ebee;
|
|
.title {
|
margin-bottom: 34px;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.des {
|
height: 300px;
|
|
li {
|
font-size: 16px;
|
color: #666666;
|
line-height: 28px;
|
padding-left: 25px;
|
text-indent: -25px;
|
|
span {
|
margin-right: 10px;
|
color: rgb(10, 107, 255);
|
}
|
}
|
}
|
}
|
|
.formRight {
|
box-sizing: border-box;
|
padding: 40px 20px;
|
position: relative;
|
|
.channel,
|
.camera {
|
width: 270px;
|
margin-bottom: 20px;
|
display: flex;
|
align-items: center;
|
height: 36px;
|
|
.label {
|
width: 90px;
|
color: #666666;
|
font-size: 14px;
|
}
|
.el-input-number {
|
flex: 1;
|
::v-deep * {
|
border-color: #c0c5cc;
|
border-radius: 0;
|
}
|
|
::v-deep .el-input-number__increase,
|
::v-deep .el-input-number__decrease {
|
width: 44px;
|
background-color: #fff;
|
}
|
|
::v-deep
|
.el-input-number__increase:hover:not(.is-disabled)
|
~ .el-input
|
.el-input__inner:not(.is-disabled),
|
::v-deep
|
.el-input-number__decrease:hover:not(.is-disabled)
|
~ .el-input
|
.el-input__inner:not(.is-disabled) {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.time {
|
display: flex;
|
align-items: center;
|
height: 36px;
|
.label {
|
width: 90px;
|
color: #666666;
|
font-size: 14px;
|
}
|
.years {
|
flex: 1;
|
display: flex;
|
height: 100%;
|
.year {
|
position: relative;
|
flex: 1;
|
height: 100%;
|
margin-right: 8px;
|
text-align: center;
|
line-height: 38px;
|
border: 1px solid #c0c5cc;
|
cursor: pointer;
|
|
.save {
|
position: absolute;
|
top: -5px;
|
right: -1px;
|
width: 24px;
|
height: 30px;
|
background: url("/images/index/打折标签.png");
|
font-size: 12px;
|
line-height: 30px;
|
color: #fff;
|
}
|
|
&:last-child {
|
margin-right: 0;
|
}
|
|
&.active {
|
background-color: #0065ff;
|
border-color: #0065ff;
|
color: #fff;
|
}
|
}
|
}
|
}
|
|
.price {
|
margin-top: 14px;
|
margin-left: 0;
|
|
::v-deep .oldPrice {
|
margin-left: 44px;
|
}
|
}
|
|
.button {
|
margin-top: 25px;
|
height: 40px;
|
border: 1px solid #ff6a00;
|
font-size: 14px;
|
line-height: 40px;
|
font-weight: 700;
|
|
text-align: center;
|
color: #ff6a00;
|
cursor: pointer;
|
|
&:hover {
|
background: linear-gradient(
|
90.78deg,
|
#ffba4a 0%,
|
#ff6a00 20.33%,
|
#ff6a00 79.66%,
|
#ffba4a 100%
|
);
|
color: #fff;
|
border-color: #fff;
|
}
|
}
|
|
.info {
|
margin-top: 10px;
|
color: #999;
|
font-size: 14px;
|
line-height: 20px;
|
letter-spacing: 0.1em;
|
|
.blue {
|
color: rgb(0, 101, 255);
|
}
|
|
.line {
|
text-decoration: underline;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
