一波修改

data/car.js

@@ -5,12 +5,12 @@ export const retCartData = function(list){
         var date = new Date(item.license_time.replace(/-/g,"/"));
         item.licensetime = `${date.getFullYear()}年${date.getMonth()+1}月`
       }
-      if (item.sale_price){
-        item.saleprice = (item.sale_price / 10000).toFixed(2)
-      }
-      if (item.guide_price){
-        item.guideprice = (item.guide_price / 10000).toFixed(2)
-      }
+      // if (item.sale_price){
+      //   item.saleprice = (item.sale_price / 10000).toFixed(2)
+      // }
+      // if (item.guide_price){
+      //   item.guideprice = (item.guide_price / 10000).toFixed(2)
+      // }
     })
     return list;
   }else{

module/caritem/caritem.wxml

@@ -13,8 +13,9 @@
         url="../cardetail/cardetail?id={{car.id}}"
       >{{car.title?car.title:'--'}}</navigator>
       <view class="caritem_time">
-        {{car.licensetime}}年上牌|{{car.mileage}}万公里
+        <view class="caritem_time_i">{{car.licensetime}}年上牌|{{car.mileage}}万公里</view>
         <navigator 
+          wx:if='{{car.store_id}}'
           open-type="navigateTo"
           url="../shop/shop?id={{car.store_id}}"
           class="caritem_store"
@@ -23,11 +24,11 @@
         </navigator>
       </view>
       <view class="caritem_p">
-        {{car.saleprice}}万 
+        {{car.sale_price}}万 
         <image class="caritem_p_img" src="../../img/placard.png"/>
       </view>
       <view class="caritem_guide_p">
-        新手指导价：<view class="caritem_guidep">{{car.guideprice}}万</view>
+        新手指导价：<view class="caritem_guidep">{{car.guide_price}}万</view>
       </view>
     </view>
   </view>

module/caritem/caritem.wxss

@@ -24,16 +24,32 @@
   flex-direction:column;
   justify-content:space-around;
   align-items:flex-start;
+  flex: 1;
 }
 .caritem_t{
-  height: 36rpx;
   line-height: 36rpx;
   color: rgba(56, 55, 53, 1);
   font-size: 26rpx;
   text-align: left;
 }
- .caritem_store{
+.caritem_time{
+  height: 30rpx;
+  line-height: 30rpx;
+  color: rgba(135, 135, 135, 1);
+  font-size: 20rpx;
+  text-align: left;
+  display: flex;
+}
+.caritem_time_i{
+  flex: 1;
+}
+.caritem_store{
   height: 28rpx;
+  margin-left:10rpx;
+  max-width:114rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow:ellipsis;
   line-height: 28rpx;
   color: rgba(245, 166, 35, 1);
   font-size: 20rpx;
@@ -42,13 +58,6 @@
   border:1px solid rgba(245, 166, 35, 1);
   border-radius: 8rpx;
 } 
-.caritem_time{
-  height: 30rpx;
-  line-height: 30rpx;
-  color: rgba(135, 135, 135, 1);
-  font-size: 20rpx;
-  text-align: left;
-}
 .caritem_p{
   height: 33rpx;
   line-height: 33rpx;

module/caritem/collectcaritem.wxml

@@ -27,7 +27,7 @@
         <image class="caritem_p_img" src="../../img/placard.png"/>
       </view>
       <view class="caritem_guide_p">
-        新手指导价：<view class="caritem_guidep">{{car.guideprice}}万</view>
+        新手指导价：<view class="caritem_guidep">{{car.guide_price}}万</view>
         <image class="delete_collect" bindtap="deleteCollect" data-id="{{car.id}}" data-ind="{{index}}" src="../../img/delete.png"/>
       </view>
     </view>

module/logs/logs.wxss

@@ -3,13 +3,13 @@
 	top: 0rpx;
 	width:100%;
 	height:100%;
-	background-color: rgba(56,55,53,0.7);
+	background-color: rgba(56,55,53,0.95);
 	z-index:200;
 }
 
 .logs_back{
-	width: 30rpx;
-	height: 30rpx;
+	width: 60rpx;
+	height: 60rpx;
 	margin-top:60rpx;
 	margin-left:60rpx;
 }

module/search/search.js

@@ -19,8 +19,8 @@ export const searchmodule = {
   inputConfirm : function(e) {
     var word = e.detail.value;
     //if (word) {
-      if(typeof this.submitsearchword=="function"){
-        this.submitsearchword(word);
+      if(typeof this.submitsearchinfo=="function"){
+        this.submitsearchinfo({keys:word});
       }
       this.cancelSearch();
     // } else {
@@ -55,15 +55,10 @@ export const searchmodule = {
   },
   tapHot:function(e){
     var brand = e.currentTarget.dataset.val;
-
-  }
-}
-export const linkToSearch = function (word) {
-  wx.navigateTo({ url: `../buy/buy?keys=${word}` });
-  if(typeof this.submitsearchword=="function"){
-    this.submitsearchbrand(word);
+    if(typeof this.submitsearchinfo=="function"){
+      this.submitsearchinfo({keys:brand});
+    }
   }
-  this.cancelSearch();
 }
 
 export default bindSearch

module/search/search.wxml

@@ -1,6 +1,6 @@
 <!-- 公用 用于页面顶部搜索框  -->
 
- 
+<template name="search">
   <view 
     class="search_space" 
     style="height:{{topsearchheight}}rpx;"
@@ -26,6 +26,7 @@
         bindblur="inputBlur"
         bindconfirm="inputConfirm"
         focus='{{searchfocus}}'
+        value='{{keys}}'
       />        
       <view
         class='cancel_search'
@@ -51,25 +52,28 @@
       <view class="hot_search_t">
         热门搜索
       </view>
-      <view class="hot_search_w">
-        <view  bindtap="tapHot" class="hot_search_i" data-val = "玛莎拉蒂">
-          玛莎拉蒂
-        </view>
-        <view  bindtap="tapHot" class="hot_search_i" data-val = "劳斯莱斯">
-          劳斯莱斯
-        </view>
-        <view  bindtap="tapHot" class="hot_search_i" data-val = "宾利">
-          宾利
-        </view>
-        <view  bindtap="tapHot" class="hot_search_i" data-val = "法拉利">
-          法拉利
-        </view>
-        <view  bindtap="tapHot" class="hot_search_i" data-val = "兰博基尼">
-          兰博基尼
-        </view>
-        <view  bindtap="tapHot" class="hot_search_i" data-val = "布加迪">
-          布加迪
-        </view>
+      <view  class="hot_search_w">
+        <block wx:for="{{brandrecommend}}" wx:key="brand_id">
+          <view bindtap="tapHot" class="hot_search_i" data-val = "{{item.brand_name}}">
+            {{item.brand_name}}
+          </view>
+          <!-- <view  bindtap="tapHot" class="hot_search_i" data-val = "劳斯莱斯">
+            劳斯莱斯
+          </view>
+          <view  bindtap="tapHot" class="hot_search_i" data-val = "宾利">
+            宾利
+          </view>
+          <view  bindtap="tapHot" class="hot_search_i" data-val = "法拉利">
+            法拉利
+          </view>
+          <view  bindtap="tapHot" class="hot_search_i" data-val = "兰博基尼">
+            兰博基尼
+          </view>
+          <view  bindtap="tapHot" class="hot_search_i" data-val = "布加迪">
+            布加迪
+          </view> -->
+        </block>
       </view>
     </view>
-  </view>
+  </view>
+</template>

pages/buy/brandlist.wxml

@@ -23,46 +23,18 @@
   <view class="brandw_list">
     <view class="brandw_t_line">热门品牌</view>
     <view class="brandw_hotlist">
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
-      <view class="brandw_hotlist_item">
-        <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
-        <view class="brandw_hotitem_name">11111</view>
-      </view>
+      <block wx:for="{{brandrecommend}}" wx:key="brand_id">
+        <view 
+          class="brandw_hotlist_item"          
+          bindtap="getBrandDetail"
+          data-id="{{item.brand_id}}"
+          data-img="{{item.brand_img}}"
+          data-name="{{item.brand_name}}"
+        >
+          <view class="brandw_hotitem_img" style="background-image:url({{item.brand_img}})"></view>
+          <view class="brandw_hotitem_name">{{item.brand_name}}</view>
+        </view>
+      </block>
     </view>
 
     <view class="brandw_t_line">不限品牌</view>
@@ -74,11 +46,13 @@
         <view 
           class="brandw_bitem"
           bindtap="getBrandDetail"
-          data-brand="{{branditem}}"
+          data-id="{{branditem.brand_id}}"
+          data-img="{{branditem.img}}"
+          data-name="{{branditem.brand_name}}"
         >
           <view
             class="brandw_bimg"
-            style="background-image:url(../../img/brand.png)"
+            style="background-image:url({{branditem.img}})"
           />
           <view class="brandw_bname">{{branditem.brand_name}}</view>
         </view>
@@ -92,11 +66,11 @@
       <view class="series_lelong">
           <view
             class="series_lelong_bimg"
-            style="background-image:url(../../img/brand.png)"
+            style="background-image:url({{serieslist.belong.img}})"
           />
 
             <!-- serieslist.belong.img -->
-          <view class="series_lelong_name">{{serieslist.belong.brand_name}}</view>
+          <view class="series_lelong_name">{{serieslist.belong.name}}</view>
         </view>  
       <view class="car_series_t">选择车系</view>
       <block
@@ -110,7 +84,7 @@
           >
           <view
             class="brand_series_bimg"
-            style="background-image:url(../../img/brand.png)"
+            style="background-image:url({{serieslist.belong.img}})"
           />
           <view class="brand_series_name">{{item.car_series_name}}</view>
         </view>          

pages/buy/buy.js

@@ -117,7 +117,9 @@ Page({
     var _self = this;
     get(pathmap.brandrecommend, {
     }, function (json) {
-
+      _self.setData({
+        brandrecommend:json.data
+      })
     })
   },
   getList:function(searchdata){
@@ -260,16 +262,16 @@ Page({
   },
   getBrandDetail:function(e){
     var _self = this;
-    var brand = e.currentTarget.dataset.brand;
+    var brandinfo = e.currentTarget.dataset;
     var series = [];
-    get(pathmap.serieslist, {brand_id:brand.brand_id}, function (json) {
+    get(pathmap.serieslist, {brand_id:brandinfo.id}, function (json) {
       series = json.data.car_series;      
       _self.setData({
         serieslist:{
-          belong:brand,
+          belong:brandinfo,
           list:series
         },
-        searchdata:Object.assign(_self.data.searchdata,{brand:brand.brand_id,car_series:""})
+        searchdata:Object.assign(_self.data.searchdata,{brand:brandinfo.id,car_series:""})
       })
     })
     // this.data.wheres.car_series.map(function(item){
@@ -324,7 +326,7 @@ Page({
     this.getList(Object.assign(this.data.searchdata,{car_series:series.car_series_id}));
   },
   filterBack:function(){
-    this.setData({selectbar:""})
+    this.setData({selectbar:"",serieslist:""})
   },
   getMoreFilter:function(e){
     var info = e.currentTarget.dataset;
@@ -346,9 +348,6 @@ Page({
     this.setData({selectbar:""})
     this.getList(this.data.searchdata);
   },
-  submitsearchword:function(value){    
-    this.getList(Object.assign(this.data.searchdata,{keys:value}));
-  },
   lockFilter:function(e){
     if(e.detail&&!this.data.filterlock){
       this.setData({
@@ -359,5 +358,9 @@ Page({
         filterlock:false
       })
     }
-  }
+  },
+  submitsearchinfo:function(obj){
+    this.getList(Object.assign(this.data.searchdata,obj));
+    this.setData({searchshow:false})
+  },
 })

pages/buy/buy.wxml

@@ -2,11 +2,15 @@
 <import src="../../module/header.wxml"/>
 <import src="../../module/footer.wxml"/>
 <import src="../../module/caritem/caritem.wxml"/>
+<import src="../../module/search/search.wxml"/>
 <template 
   is="header"
   data="{{title:'我要买车',headerheight:headerheight}}"
 />
-<include src="../../module/search/search.wxml"/>
+<template
+  is="search"
+  data="{{topsearchheight:topsearchheight,searchshow:searchshow,searchfocus:searchfocus,windowh:windowh,brandrecommend:brandrecommend,keys:searchdata.keys}}"
+/>
 <page-scroll 
   className="conent"
   styleSheet="height:{{windowh-headerheight-topsearchheight}}rpx;"

pages/index/cardetail.wxml

@@ -11,16 +11,16 @@
         open-type="navigate"
         class="car_t"  
         url="../cardetail/cardetail?id={{car.id}}"
-      >{{car.title}}</navigator>
+      >{{car.title?car.title:'--'}}</navigator>
       <view class="car_time">
         {{car.licensetime}}年上牌|{{car.mileage}}万公里
       </view>
       <view class="car_p">
-        售价：{{car.saleprice}}万
+        售价：{{car.sale_price}}万
       </view>
       <view class="car_characteristic">
         <block wx:for="{{car.tag}}" wx:key="{{index}}">
-          <view class="car_characteristic_i">{{item}}</view>          
+          <view wx:if="{{item}}" class="car_characteristic_i">{{item}}</view>          
         </block>
       </view>
     </view>

pages/index/index.js

@@ -130,9 +130,13 @@ Page({
       recommended: recommended
     });
   },
-  submitsearchword:function(word){
-    if(word){
-      wx.navigateTo({ url: `../buy/buy?keys=${word}`});
+  submitsearchinfo:function(obj){
+    if(obj){
+      var info = "";
+      for(var name in obj){
+        info+=`${name}=${obj[name]}`;
+      }
+      wx.navigateTo({ url: `../buy/buy?${info}`});
     }
   },
   testPost:function(){

pages/index/index.wxml

@@ -5,6 +5,7 @@
 <import src="goodcar.wxml"/>
 <import src="cardetail.wxml"/>
 <import src="../../module/caritem/caritem.wxml"/>
+<import src="../../module/search/search.wxml"/>
 
 
 <!-- <scroll-view 
@@ -17,135 +18,130 @@
   is="header" 
   data="{{title:'第一好车',headerheight:headerheight}}"
 />  
-<include src="../../module/search/search.wxml"/>
+<template
+  is="search"
+  data="{{topsearchheight:topsearchheight,searchshow:searchshow,searchfocus:searchfocus,windowh:windowh,brandrecommend:brandrecommend}}"
+/>
+<!-- <include src="../../module/search/search.wxml"/> -->
 <page-scroll 
   className="conent"
   styleSheet="height:{{windowh-headerheight-topsearchheight}}rpx;"
-  scroll-y="{{scrollsource.startdot&&scrollsource.distance>0?false:true}}"
->
-  <view
-  >      
-    <view 
-      class="page_head_source"
-      style="height:{{scrollsource.distance/2}}rpx;"
-    >
-      本网页由m.dyhc.com提供
+  scroll-y="true"
+>    
+  <template is="banner" data="{{banner:banner}}"/>
+  <view class="nav_list">
+    <view class="nav_item">
+      <navigator 
+        open-type="reLaunch"
+        class="nav_item_link" 
+        url="../buy/buy">
+        <view class="nav_item_img">
+           <image src="../../img/home_buy.png"/>
+        </view>
+        <view class="nav_item_t">我要买车</view>
+      </navigator>
     </view>
-    <template is="banner" data="{{banner:banner}}"/>
-    <view class="nav_list">
-      <view class="nav_item">
-        <navigator 
-          open-type="reLaunch"
-          class="nav_item_link" 
-          url="../buy/buy">
-          <view class="nav_item_img">
-             <image src="../../img/home_buy.png"/>
-          </view>
-          <view class="nav_item_t">我要买车</view>
-        </navigator>
-      </view>
-      <view class="nav_item">
-        <navigator 
-          open-type="reLaunch"
-          class="nav_item_link" 
-          url="../sell/sell">
-          <view class="nav_item_img">
-            <image src="../../img/home_sell.png"/>
-          </view>
-          <view class="nav_item_t">我要卖车</view>
-        </navigator>
-      </view>
-      <view class="nav_item">
-        <navigator           
-          open-type="navigate"
-          class="nav_item_link" 
-          url="../evaluate/evaluate">
-          <view class="nav_item_img">
-            <image src="../../img/home_assess.png"/>
+    <view class="nav_item">
+      <navigator 
+        open-type="reLaunch"
+        class="nav_item_link" 
+        url="../sell/sell">
+        <view class="nav_item_img">
+          <image src="../../img/home_sell.png"/>
+        </view>
+        <view class="nav_item_t">我要卖车</view>
+      </navigator>
+    </view>
+    <view class="nav_item">
+      <navigator           
+        open-type="navigate"
+        class="nav_item_link" 
+        url="../evaluate/evaluate">
+        <view class="nav_item_img">
+          <image src="../../img/home_assess.png"/>
+        </view>
+        <view class="nav_item_t">我要估价</view>
+      </navigator>
+    </view>
+    <view class="nav_item">
+      <navigator 
+        open-type="navigate"
+        class="nav_item_link" 
+        url="../loans/loans">
+        <view class="nav_item_img">
+          <image src="../../img/home_loan.png"/>
           </view>
-          <view class="nav_item_t">我要估价</view>
-        </navigator>
-      </view>
-      <view class="nav_item">
-        <navigator 
-          open-type="navigate"
-          class="nav_item_link" 
-          url="../loans/loans">
-          <view class="nav_item_img">
-            <image src="../../img/home_loan.png"/>
-            </view>
-          <view class="nav_item_t">我要贷款</view>
-        </navigator>
-      </view>
+        <view class="nav_item_t">我要贷款</view>
+      </navigator>
     </view>
-    <template is="goodcar" data="{{goodcars:goodcars}}"/>
+  </view>
+  <template is="goodcar" data="{{goodcars:goodcars}}"/>
 
-    <view class='brand'>
-      <block wx:for="{{brandrecommend}}" wx:key="id">
-        <view class="brand_item_b">
-          <view class="brand_item">
-            <navigator 
-              open-type="reLaunch"
-              class="brand_item_link" 
-              url="../buy/buy?brand={{item.brand_id}}">
-              <view class="brand_item_img" style="background-image:url({{item.brand_img}})"></view>
-              <view class="brand_item_name">{{item.brand_name}}</view>
-            </navigator>
-          </view>     
+  <view class='brand'>
+    <block wx:for="{{brandrecommend}}" wx:key="id">
+      <view class="brand_item_b">
+        <view class="brand_item">
+          <navigator 
+            open-type="reLaunch"
+            class="brand_item_link" 
+            url="../buy/buy?brand={{item.brand_id}}">
+            <view class="brand_item_img" style="background-image:url({{item.brand_img}})"></view>
+            <view class="brand_item_name">{{item.brand_name}}</view>
+          </navigator>
         </view>     
-      </block>
-    </view>
-    <navigator 
-      open-type="reLaunch"
-      url="../buy/buy"
-      class="brand_more">查看更多好车</navigator>
-    <view class="recommend">
-      <view class="recommend_t">
-        <image class="recommend_img" src="../../img/recommend.png"/>
-        <view class="recommend_w">RECOMMENDATIONS</view>
-      </view>
-      <view class="recommend_sw">
-        <swiper 
-          class='recommend_list' 
-          autoplay='true' 
-          interval='3000' 
-          duration='300' 
-          bindchange='switchReTab'
-          circular='true'
-        >
-          <block wx:for="{{recommended}}" wx:key="key">
-            <swiper-item>
-              <template is="cardetail" data="{{car:item}}"/>
-            </swiper-item>
-          </block>      
-        </swiper>
-        <view class="recommended_tab">
-          <block wx:for="{{banner}}" wx:key="id">
-            <view wx:if="{{item.selected}}" class='recommended_tab-item recommend_selected'></view>
-            <view wx:else class="recommended_tab-item"></view>
-          </block>
-        </view>
-      </view>
+      </view>     
+    </block>
+  </view>
+  <navigator 
+    open-type="reLaunch"
+    url="../buy/buy"
+    class="brand_more">查看更多好车</navigator>
+  <view class="recommend">
+    <view class="recommend_t">
+      <image class="recommend_img" src="../../img/recommend.png"/>
+      <view class="recommend_w">RECOMMENDATIONS</view>
     </view>
-    <view class="recommend">
-      <view class="recommend_t">
-        <image class="recommend_img" src="../../img/like.png"/>
-        <view class="recommend_w">GUESS YOU LIKE</view>
+    <view class="recommend_sw">
+      <swiper 
+        class='recommend_list' 
+        autoplay='true' 
+        interval='3000' 
+        duration='300' 
+        bindchange='switchReTab'
+        circular='true'
+      >
+        <block wx:for="{{recommended}}" wx:key="id">
+          <swiper-item>
+            <template is="cardetail" data="{{car:item}}"/>
+          </swiper-item>
+        </block>      
+      </swiper>
+      <view class="recommended_tab">
+        <block wx:for="{{recommended}}" wx:key="id">
+          <view wx:if="{{item.selected}}" class='recommended_tab-item recommend_selected'></view>
+          <view wx:else class="recommended_tab-item"></view>
+        </block>
       </view>
     </view>
-    <view class="like_cart_c">
-      <block wx:for="{{like}}" wx:key="id">
-        <template is="caritem" data="{{car:item}}"/>
-      </block>
+  </view>
+  <view class="recommend">
+    <view class="recommend_t">
+      <image class="recommend_img" src="../../img/like.png"/>
+      <view class="recommend_w">GUESS YOU LIKE</view>
     </view>
-    <navigator 
-      open-type="reLaunch"
-      url="../buy/buy"
-      class="show_more">加载更多></navigator>
-    <image class="bottom_banner" src="../../img/banner.png"></image>
-    <template 
-      is="footer" 
-      data="{{local:0,footerheight:footerheight}}"
-    />     
-  </view>                                    
+  </view>
+  <view class="like_cart_c">
+    <block wx:for="{{like}}" wx:key="id">
+      <template is="caritem" data="{{car:item}}"/>
+    </block>
+  </view>
+  <navigator 
+    open-type="reLaunch"
+    url="../buy/buy"
+    class="show_more">加载更多></navigator>
+  <image class="bottom_banner" src="../../img/banner.png"></image>
+  <template 
+    is="footer" 
+    data="{{local:0,footerheight:footerheight}}"
+  />                                       
 </page-scroll>

pages/index/index.wxss

@@ -228,9 +228,13 @@
 .car_info{
   padding:10rpx 0rpx 0rpx 40rpx;
   align-items:center;
+  flex: 1;
+  display: flex;
+  flex-direction:column;
+  justify-content:space-around;
+  align-items:flex-start;
 }
 .car_t{
-  height: 36rpx;
   line-height: 36rpx;
   color: rgba(56, 55, 53, 1);
   font-size: 26rpx;
@@ -251,7 +255,7 @@
   font-family: NotoSansHans-Medium;
 }
 .car_characteristic{
-  height: 60rpx;
+  height: 50rpx;
 }
 .car_characteristic_i{
   display: inline-block;