Merge branch 'dev'

prod
校文 3 years ago
commit 5fb0b3f33c

@ -280,11 +280,11 @@ export default {
} }
} }
.sb-dd { .sb-dd {
width: 46%; width: 31%;
height: 90%; height: 90%;
} }
.sb-bd { .sb-bd {
padding: 0px 16px 16px 16px; padding: 0px 16px 16px 8px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
@ -298,8 +298,10 @@ export default {
border: 1px solid #3373cc; border: 1px solid #3373cc;
} }
.d1 { .d1 {
width: 152px; // width: 152px;
height: 132px; // height: 132px;
width: 100px;
height: 87px;
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
@ -320,7 +322,7 @@ export default {
border: 1px solid #3373cc; border: 1px solid #3373cc;
} }
.sb-b-item { .sb-b-item {
width: 194px; width: 190px;
height: 66px; height: 66px;
background: #1B4163; background: #1B4163;
color: #fff; color: #fff;
@ -344,7 +346,7 @@ export default {
} }
} }
.sb-dd-right { .sb-dd-right {
width: 54%; width: 69%;
height: 90%; height: 90%;
} }

@ -18,6 +18,16 @@
<li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li> <li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li>
<li @click="selectAll"></li> <li @click="selectAll"></li>
</ul> </ul>
<div style="margin: 0 0 0 16px">
<a-form-model layout="inline">
<a-form-model-item label="关键词">
<a-input v-model="sKeyword" style="width: 160px"></a-input>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" @click="onSearch"></a-button>
</a-form-model-item>
</a-form-model>
</div>
<div style="clear: both"></div> <div style="clear: both"></div>
<div class="sb-dd"> <div class="sb-dd">
<vue-scroll> <vue-scroll>
@ -95,6 +105,7 @@ export default {
models: [], models: [],
brandname: "", brandname: "",
brandList: [], brandList: [],
sKeyword:'',
}; };
}, },
methods: { methods: {
@ -105,6 +116,7 @@ export default {
}, },
// li // li
handlerLi(n) { handlerLi(n) {
this.sKeyword = '';
this.activeLi = n; this.activeLi = n;
let key = this.letterArr[n]; let key = this.letterArr[n];
this.showCars = this.cars.filter((ele) => ele.firstword === key); this.showCars = this.cars.filter((ele) => ele.firstword === key);
@ -160,6 +172,10 @@ export default {
arr.push(ele.brandname); arr.push(ele.brandname);
}) })
this.$emit("selectAll", arr); this.$emit("selectAll", arr);
},
onSearch() {
let kw = this.sKeyword;
this.showCars = this.cars.filter((ele) => ele.brandname.indexOf(kw) != -1 && ele.firstword != '热门');
} }
}, },
}; };
@ -221,7 +237,7 @@ export default {
} }
.sb-dd { .sb-dd {
width: 100%; width: 100%;
height: calc(100% - 30px); height: calc(100% - 70px);
box-shadow: 0 0 20px; box-shadow: 0 0 20px;
} }
.sb-bd { .sb-bd {

@ -248,7 +248,6 @@ export default {
getUserBrand(this.form) getUserBrand(this.form)
.then((res) => { .then((res) => {
let data = res.data; let data = res.data;
console.log(data)
let arr = []; let arr = [];
data.forEach((ele) => { data.forEach((ele) => {
let fk = ele.firstword; let fk = ele.firstword;
@ -391,12 +390,12 @@ export default {
} }
} }
.sb-dd { .sb-dd {
width: 46%; width: 31%;
height: 95%; height: 95%;
box-shadow: 0 0 20px; box-shadow: 0 0 20px;
} }
.sb-bd { .sb-bd {
padding: 0px 16px 16px 16px; padding: 0px 16px 16px 8px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
@ -410,8 +409,10 @@ export default {
border: 1px solid #3373cc; border: 1px solid #3373cc;
} }
.d1 { .d1 {
width: 152px; // width: 152px;
height: 132px; // height: 132px;
width: 100px;
height: 87px;
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
@ -432,7 +433,7 @@ export default {
border: 1px solid #3373cc; border: 1px solid #3373cc;
} }
.sb-b-item { .sb-b-item {
width: 194px; width: 190px;
height: 66px; height: 66px;
background: #1B4163; background: #1B4163;
color: #fff; color: #fff;
@ -456,7 +457,7 @@ export default {
} }
} }
.sb-dd-right { .sb-dd-right {
width: 54%; width: 69%;
height: 95%; height: 95%;
box-shadow: 0 0 20px; box-shadow: 0 0 20px;
} }

@ -17,6 +17,16 @@
<span class="liSn">按品牌拼音首字母查找:</span> <span class="liSn">按品牌拼音首字母查找:</span>
<li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li> <li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li>
</ul> </ul>
<div style="margin: 0 0 0 16px">
<a-form-model layout="inline">
<a-form-model-item label="关键词">
<a-input v-model="sKeyword" style="width: 160px"></a-input>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" @click="onSearch"></a-button>
</a-form-model-item>
</a-form-model>
</div>
<div style="clear: both"></div> <div style="clear: both"></div>
<div class="sb-dd"> <div class="sb-dd">
<vue-scroll> <vue-scroll>
@ -87,6 +97,7 @@ export default {
chooseModel: null, chooseModel: null,
models: [], models: [],
brandname: "", brandname: "",
sKeyword:'',
}; };
}, },
methods: { methods: {
@ -97,6 +108,7 @@ export default {
}, },
// li // li
handlerLi(n) { handlerLi(n) {
this.sKeyword = '';
this.activeLi = n; this.activeLi = n;
let key = this.letterArr[n]; let key = this.letterArr[n];
this.showCars = this.cars.filter((ele) => ele.firstword === key); this.showCars = this.cars.filter((ele) => ele.firstword === key);
@ -167,6 +179,10 @@ export default {
this.$message.warning("请选择品牌"); this.$message.warning("请选择品牌");
} }
}, },
onSearch() {
let kw = this.sKeyword;
this.showCars = this.cars.filter((ele) => ele.brandname.indexOf(kw) != -1 && ele.firstword != '热门');
}
}, },
}; };
</script> </script>
@ -227,7 +243,7 @@ export default {
} }
.sb-dd { .sb-dd {
width: 100%; width: 100%;
height: calc(100% - 30px); height: calc(100% - 70px);
box-shadow: 0 0 20px; box-shadow: 0 0 20px;
} }
.sb-bd { .sb-bd {

@ -47,7 +47,7 @@
<div class="sb-bd" v-loading="load"> <div class="sb-bd" v-loading="load">
<div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)"> <div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">
<div v-if="item.name.length > 12 && item.name.length <= 14" style="font-size: 15px">{{item.name}}</div> <div v-if="item.name.length > 12 && item.name.length <= 14" style="font-size: 15px">{{item.name}}</div>
<div v-if="item.name.length > 14" style="font-size: 13px">{{item.name}}</div> <div v-else-if="item.name.length > 14" style="font-size: 14px">{{item.name}}</div>
<div v-else>{{item.name}}</div> <div v-else>{{item.name}}</div>
</div> </div>
</div> </div>
@ -279,12 +279,12 @@ export default {
} }
} }
.sb-dd { .sb-dd {
width: 46%; width: 31%;
height: 90%; height: 90%;
box-shadow: 0 0 20px; box-shadow: 0 0 20px;
} }
.sb-bd { .sb-bd {
padding: 0px 16px 16px 16px; padding: 0px 16px 16px 8px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
@ -298,8 +298,10 @@ export default {
border: 1px solid #3373cc; border: 1px solid #3373cc;
} }
.d1 { .d1 {
width: 152px; // width: 152px;
height: 132px; // height: 132px;
width: 100px;
height: 87px;
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
@ -320,7 +322,7 @@ export default {
border: 1px solid #3373cc; border: 1px solid #3373cc;
} }
.sb-b-item { .sb-b-item {
width: 194px; width: 190px;
height: 66px; height: 66px;
background: #1B4163; background: #1B4163;
color: #fff; color: #fff;
@ -344,7 +346,7 @@ export default {
} }
} }
.sb-dd-right { .sb-dd-right {
width: 54%; width: 69%;
height: 90%; height: 90%;
box-shadow: 0 0 20px; box-shadow: 0 0 20px;
} }

Loading…
Cancel
Save