|
@@ -2,7 +2,7 @@
|
|
|
<div>
|
|
|
<div class="carCkbox" v-if="show">
|
|
|
<div class="brandsBox" ref="brandsBox" v-if="brandsBoxShow">
|
|
|
- <div class="mainLeft" >
|
|
|
+ <!-- <div class="mainLeft" >
|
|
|
<div class="mainLeftTop">
|
|
|
<div class="sx"></div>
|
|
|
<div class="leftTitle">选择品牌</div>
|
|
@@ -20,7 +20,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<!-- 车型-->
|
|
|
<div class="mainLeft modelBox" v-if="cxShow">
|
|
|
<div class="mainLeftTop">
|
|
@@ -33,7 +33,7 @@
|
|
|
</div>
|
|
|
<div class="mainLeftLineBox">
|
|
|
<div class="mainLeftLine" v-for="(item,index) in modelList" ><!-- -->
|
|
|
- <div class="fct_name">{{item.fct_name}}</div>
|
|
|
+ <div class="fct_name" v-if="item.models.length>0">{{item.fct_name}}</div>
|
|
|
<div class="lineName" v-for="(v,i) in item.models" @click="goNext(v)" :class="{mainLeftLineActive:modelname==v.model_name}">{{v.model_name}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -50,7 +50,7 @@
|
|
|
</div>
|
|
|
<div class="mainLeftLineBox">
|
|
|
<div class="mainLeftLine" v-for="(item,index2) in i.list" ><!-- -->
|
|
|
- <div class="lineName" @click="goNextX(item,i.time,index)" :class="{mainLeftLineActive:combineCplist[index]==item.combine_cp}">{{item.combine_cp}}</div>
|
|
|
+ <div class="lineName" @click="goNextX(item,i.time,index)" :class="{mainLeftLineActive:combineCplist[index]==item.token}">{{item.combine_cp}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -76,7 +76,7 @@
|
|
|
<div class="leftTitle">{{i.caption}}</div>
|
|
|
</div>
|
|
|
<div class="mainLeftLineBox">
|
|
|
- <div class="lineName" :class="{mainLeftLineActive:captionlist[index]==item.caption}"
|
|
|
+ <div class="lineName" :class="{mainLeftLineActive:captionlist[index]==item.token}"
|
|
|
v-for="(item,index2) in i.list" @click="morez(item,index,i.time)" v-html="item.caption">{{item.caption}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -118,8 +118,18 @@
|
|
|
|
|
|
<div>
|
|
|
<div >
|
|
|
- <div class="tktitleStrBox"> <div class="tktitleStr" v-for="item in brandList"> {{item.titleStr}}</div></div>
|
|
|
-
|
|
|
+ <div class="tktitleStrBox">
|
|
|
+ <div class="tktitleStr" @mouseenter="mouseenter(item.titleStr)" @click="carZhimu(item.titleStr)" :class="{zmActive:carzm==item.titleStr}"
|
|
|
+ v-for="item in brandList"> {{item.titleStr}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="carPpBox">
|
|
|
+ <div class="carPp" v-for="item in brandList">
|
|
|
+ <div class="carPpline" v-for="(v,i) in item.list" v-if="item.titleStr==carzm" @click="brandCk(v)">
|
|
|
+ <img :src="v.icon" alt="" class="brandicon">
|
|
|
+ <div class="brandName">{{v.brand}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@@ -171,6 +181,7 @@ export default {
|
|
|
ltime:'',
|
|
|
captionlist:[],
|
|
|
bshow:false,
|
|
|
+ carzm:'A',
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -181,6 +192,13 @@ export default {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ mouseenter(zm){
|
|
|
+ // console.log(zm)
|
|
|
+ this.carzm=zm
|
|
|
+ },
|
|
|
+ carZhimu(zm){
|
|
|
+ this.carzm=zm
|
|
|
+ },
|
|
|
childrenClick(item,index){
|
|
|
|
|
|
var data={
|
|
@@ -195,7 +213,7 @@ export default {
|
|
|
this.bshow=false;
|
|
|
},
|
|
|
morez(item,index,time){
|
|
|
- this.captionlist[index]=item.caption;
|
|
|
+ this.captionlist[index]=item.token;
|
|
|
this.captionlist=this.captionlist.splice(0,index+1)
|
|
|
if(item.next_restrain==1||index==0){
|
|
|
fetchGet('/advancedEpc/getSubgroupPc', {
|
|
@@ -222,6 +240,9 @@ export default {
|
|
|
this.carpzList=this.carpzList.splice(0,index+1)
|
|
|
this.$set(this.carpzList, index+1, obj)
|
|
|
}
|
|
|
+ if(index +1 != this.carpzList.length){
|
|
|
+ this.restrainShow3=false;
|
|
|
+ }
|
|
|
// setTimeout(() => {
|
|
|
// console.log(this.$refs.firstBox2.scrollWidth)
|
|
|
// this.$refs.firstBox2.scrollLeft = this.$refs.firstBox2.scrollWidth
|
|
@@ -310,16 +331,21 @@ export default {
|
|
|
brandCk(item){ //点击品牌
|
|
|
this.brandName=item.brand;
|
|
|
this.epc_id=item.epc_id;
|
|
|
+ var e={
|
|
|
+ brandName:this.brandName,
|
|
|
+ epc_id:this.epc_id
|
|
|
+ }
|
|
|
this.pzList=[];
|
|
|
this.cxShow=true;
|
|
|
this.getModel();
|
|
|
- this.$emit('brandCk',this.brandName)
|
|
|
+ this.$emit('brandCk',e)
|
|
|
+ this.bshow=false
|
|
|
},
|
|
|
goNextX(item,time,index){ //点击车辆配置
|
|
|
|
|
|
console.log(time + '时间---index'+index +'宽度===')
|
|
|
|
|
|
- this.combineCplist[index]=item.combine_cp;
|
|
|
+ this.combineCplist[index]=item.token;
|
|
|
this.combineCplist=this.combineCplist.splice(0,index+1)
|
|
|
console.log( this.combineCplist)
|
|
|
if(item.next_restrain==1){
|
|
@@ -531,6 +557,30 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
+ .carPpline{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ width: 183px;
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ margin: 7.5px 5px !important;
|
|
|
+ padding-left: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer!important;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666;
|
|
|
+ padding-top: 10px;
|
|
|
+ line-height: 30px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .carPp{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .carPpBox{
|
|
|
+ padding-top: 10px;
|
|
|
+ min-height: 220px;
|
|
|
+ }
|
|
|
.tktitleStrBox{
|
|
|
display: flex;
|
|
|
}
|
|
@@ -544,6 +594,12 @@ export default {
|
|
|
margin: 0 8px;
|
|
|
cursor: pointer!important;
|
|
|
}
|
|
|
+ .zmActive{
|
|
|
+ border: 1px solid #26965C !important;
|
|
|
+ color: #fff !important;
|
|
|
+ background: #26965C;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
.mainRight2 .mainRightLine2{
|
|
|
width: 200px;
|
|
|
border-radius: 4px;
|