|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: your name
|
|
|
|
|
* @Date: 2021-11-05 13:56:24
|
|
|
|
|
* @LastEditTime: 2021-11-05 15:34:05
|
|
|
|
|
* @LastEditTime: 2021-11-05 19:19:15
|
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
|
* @Description: In User Settings Edit
|
|
|
|
|
* @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
|
|
|
|
|
@ -9,8 +9,20 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="d-container">
|
|
|
|
|
<div class="bbc-inner">
|
|
|
|
|
<brandCompateHeader></brandCompateHeader>
|
|
|
|
|
|
|
|
|
|
<brandCompateHeader ref="brandRef"></brandCompateHeader>
|
|
|
|
|
<div class="mbc-inner">
|
|
|
|
|
<v-label-div title="品牌推荐">
|
|
|
|
|
</v-label-div>
|
|
|
|
|
<div class="mbc-dd">
|
|
|
|
|
<ul class="mb-ul">
|
|
|
|
|
<li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in brands" :key="index" @click="handlerBrand(item)">{{item.seriesname}}</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div style="clear: both"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="beCpm-footer" @click="handlerSubmit">
|
|
|
|
|
开始对比
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -21,6 +33,45 @@ export default {
|
|
|
|
|
name: "BrandBeginComparte",
|
|
|
|
|
components: {
|
|
|
|
|
brandCompateHeader
|
|
|
|
|
},
|
|
|
|
|
inject: ['reload'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
form: {
|
|
|
|
|
token: ""
|
|
|
|
|
},
|
|
|
|
|
chooseArr: [null, null, null, null, null, null],
|
|
|
|
|
brands: [
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 选择默认的车型
|
|
|
|
|
handlerBrand(row) {
|
|
|
|
|
for(let i = 0; i < this.chooseArr.length; i++) {
|
|
|
|
|
if(!this.chooseArr[i]) {
|
|
|
|
|
this.chooseArr[i] = row;
|
|
|
|
|
let obj = this.$refs.modelRef.list[i]
|
|
|
|
|
obj.brand = row.brandname;
|
|
|
|
|
obj.model = row.seriesname;
|
|
|
|
|
obj.isDel = true;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 开始对比
|
|
|
|
|
handlerSubmit() {
|
|
|
|
|
let arr = this.$refs.brandRef.brands || [];
|
|
|
|
|
let filterArr = arr.filter((ele) => {
|
|
|
|
|
return ele.name;
|
|
|
|
|
});
|
|
|
|
|
if(filterArr.length < 2) {
|
|
|
|
|
this.$message.warning('至少2个品牌进行对比');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.setBComparison(filterArr);
|
|
|
|
|
this.reload()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
@ -29,4 +80,61 @@ export default {
|
|
|
|
|
.bbc-inner {
|
|
|
|
|
padding: 0px 16px 16px 16px;
|
|
|
|
|
}
|
|
|
|
|
.mbc-inner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 488px;
|
|
|
|
|
border: 2px solid #0f2a4d;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
.mbc-dd {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 48px);
|
|
|
|
|
.mb-ul {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
list-style: none;
|
|
|
|
|
li {
|
|
|
|
|
float: left;
|
|
|
|
|
width: 295px;
|
|
|
|
|
height: 89px;
|
|
|
|
|
background-color: #0f2b47;
|
|
|
|
|
margin-left: 16px;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
line-height: 89px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover {
|
|
|
|
|
border: 1px solid #0058e6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.liActive {
|
|
|
|
|
color: #0058e6;
|
|
|
|
|
border: 1px solid #0058e6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.beCpm-footer {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 354px;
|
|
|
|
|
height: 64px;
|
|
|
|
|
background-image: url("../../assets/images/login/img_dlan_nor.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #63aecc;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 64px;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
