You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.8 KiB
101 lines
2.8 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-11-03 17:12:47
|
|
* @LastEditTime: 2021-11-03 18:11:43
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Editiv
|
|
* @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
|
|
-->
|
|
<template>
|
|
<div class="d-container">
|
|
<div class="mbc-outter">
|
|
<mcChooseModel></mcChooseModel>
|
|
<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 models" :key="index" @click="handlerModel(item)">{{item}}</li>
|
|
</ul>
|
|
<div style="clear: both"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import mcChooseModel from "./mcChooseModel";
|
|
export default {
|
|
name: "mcBeginCompare",
|
|
components: {
|
|
mcChooseModel,
|
|
},
|
|
data() {
|
|
return {
|
|
chooseArr: [],
|
|
models: ["奥迪A4", "奥迪A6", "奥迪S3", "奥迪S4", "奥迪RS3", "奥迪RS4", "宝马1系",
|
|
"宝马2系","宝马3系","宝马M5","宝马M4","宝马M3","本田凌派","本田雅阁","本田缤智","本田冠道",
|
|
"本田奥德赛", "本田艾力绅", "比亚迪宋PRO", "比亚迪唐","比亚迪汉EV", "比亚迪秦", "比亚迪元", "比亚迪宋Max"
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
handlerModel(ele) {
|
|
let n = this.chooseArr.findIndex(e => e === ele);
|
|
if(n === -1 && this.chooseArr.length < 6) {
|
|
this.chooseArr.push(ele)
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.mbc-outter {
|
|
width: 100%;
|
|
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;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |