carModel.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
  1. <template>
  2. <view class="carbox">
  3. <view class="tab1 ">
  4. <scroll-view class="scroll-view" :style="{height:svHeight}" :scroll-into-view="toView" scroll-y="true" >
  5. <view class="brand-select">
  6. <template v-for="item in carModelList">
  7. <view :id="item['首字母']" v-if="item['首字母']!='热'">
  8. <view class="brand-select-title" :id="item['首字母']+'-model'">
  9. <h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
  10. </view>
  11. <view class="brand-select-wrapper">
  12. <a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
  13. <img :src="item2.logo" class="brand-select-item-icon">
  14. <span>{{item2.brand||item2.name}}</span>
  15. </a>
  16. </view>
  17. </view>
  18. <view :id="'rm'" v-if="item['首字母']=='热'" class="rmview">
  19. <view class="brand-select-title" :id="item['首字母']+'-model'">
  20. <h5 :class="{'brand-select-titleselect':toView=='rm'}">{{item['首字母']}}</h5>
  21. </view>
  22. <view class="brand-select-wrapper">
  23. <a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
  24. <img :src="item2.logo" class="brand-select-item-icon">
  25. <span>{{item2.brand||item2.name}}</span>
  26. </a>
  27. </view>
  28. </view>
  29. </template>
  30. </view>
  31. </scroll-view >
  32. <view class="fast-navigation">
  33. <a class="fast-navigation-sel" v-if="item['首字母']=='热'" :class="{'select':toView=='rm'}" v-for="item in carModelList" @tap="bindToView(item)">热</a>
  34. <a class="fast-navigation-sel" v-if="item['首字母']!=='热'" :class="{'select':item['首字母']==toView}" v-for="item in carModelList" @tap="bindToView(item)">{{item['首字母']}}</a>
  35. </view>
  36. </view>
  37. <!-- uni-popup -->
  38. <view class="popupone" @click="popupc" v-if="popuponeShow">
  39. <view class="popup-content" >
  40. <scroll-view class="brandList" scroll-y="true">
  41. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  42. <view style="height: 20rpx;"></view>
  43. <view style="height: 44px;"></view>
  44. <view v-for="item in carSeriesList" :key="item.manufactor" class="brandListkk">
  45. <h3 class="cell-item-title">{{ item.manufactor }}</h3>
  46. <span v-for="item2 in item.carSeries" :key="item2" :title="item2" class="span-cell" @click="selectCarFactory(item.manufactor,item2)" >{{item2}}</span>
  47. </view>
  48. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  49. <view class="status_bar" style="height: 50px;"></view>
  50. </scroll-view>
  51. </view>
  52. </view>
  53. <!-- 排量 -->
  54. <!--
  55. <view class="displacementListBox" v-show="displacementListShow">
  56. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  57. <h3 class="carModel-nav-title">
  58. <view class="carModel-nav-title—left">
  59. <img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
  60. <span class="carModel-nav-title-msg carModel-nav-title-msg1">{{ selectedCarBrand.brand }} {{ carSeries }}</span>
  61. </view>
  62. <view class="carBack" @click="carBack(1)">上一步</view>
  63. </h3>
  64. <scroll-view scroll-y="true" class="brandList">
  65. <view @click="selectDisplacement(item)" v-for="item in displacementList" class="displacementListLine" >
  66. {{item}}
  67. </view>
  68. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  69. <view class="status_bar" style="height: 50px;"></view>
  70. </scroll-view>
  71. </view> -->
  72. <!-- 排量 -->
  73. <!-- 离合器 -->
  74. <!-- <view class="carGroupListBox" v-show="carGroupListShow">
  75. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  76. <h3 class="carModel-nav-title">
  77. <view class="carModel-nav-title—left">
  78. <img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
  79. <span class="carModel-nav-title-msg carModel-nav-title-msg1">{{ selectedCarBrand.brand }} {{ carSeries }}{{displacement}}</span>
  80. </view>
  81. <view class="carBack" @click="carBack(2)">上一步</view>
  82. </h3>
  83. <scroll-view scroll-y="true" class="brandList">
  84. <view @click="goList(item)" v-for="item in carGroupList" class="displacementListLine" >
  85. {{item.title}}
  86. </view>
  87. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  88. <view class="status_bar" style="height: 50px;"></view>
  89. </scroll-view>
  90. </view> -->
  91. <!-- 离合器 -->
  92. <!-- 搜索的 -->
  93. <!-- <view class="carssListBox" v-show="carssListShow" @click="carssListShow=false">
  94. <view class="carssListBoxCont" >
  95. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  96. <h3 class="carModel-nav-title">
  97. <view class="carModel-nav-title—left">
  98. <span class="carModel-nav-title-msg" style="padding-left: 24rpx;">{{carName}}</span>
  99. </view>
  100. </h3>
  101. <scroll-view scroll-y="true" class="brandList">
  102. <view @click.stop="ssitem(item)" v-for="item in carsslist" class="carsslineTxt" >
  103. {{item.title}}
  104. </view>
  105. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  106. <view class="status_bar" style="height: 50px;"></view>
  107. </scroll-view>
  108. </view>
  109. </view> -->
  110. <!-- <view class="carssListBox2" v-show="secondShow" @click.stop="secondShow=false">
  111. <view class="carssListBoxCont">
  112. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  113. <h3 class="carModel-nav-title">
  114. <view class="carModel-nav-title—left">
  115. <span class="carModel-nav-title-msg" style="padding-left: 24rpx;">{{ssname1}}</span>
  116. </view>
  117. <view class="carBack" @click="secondShow=false">上一步</view>
  118. </h3>
  119. <scroll-view scroll-y="true" class="brandList">
  120. <view @click.stop="seconditem(item)" v-for="item in secondlist" class="carsslineTxt" >
  121. {{item.title}}
  122. </view>
  123. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  124. <view class="status_bar" style="height: 50px;"></view>
  125. </scroll-view>
  126. </view>
  127. </view>
  128. <view class="carssListBox2" v-show="ssdisplacementListShow" @click.stop="ssdisplacementListShow=false">
  129. <view class="carssListBoxCont">
  130. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  131. <h3 class="carModel-nav-title">
  132. <view class="carModel-nav-title—left">
  133. <span class="carModel-nav-title-msg " style="padding-left: 24rpx;">{{ssname2}}</span>
  134. </view>
  135. <view class="carBack" @click="ssdisplacementListShow=false">上一步</view>
  136. </h3>
  137. <scroll-view scroll-y="true" class="brandList">
  138. <view @click="golistnew(item)" v-for="item in ssdisplacementList" class="carsslineTxt" >
  139. {{item.displacement}}
  140. </view>
  141. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  142. <view class="status_bar" style="height: 50px;"></view>
  143. </scroll-view>
  144. </view>
  145. </view> -->
  146. <!-- 搜索的 -->
  147. </view>
  148. </template>
  149. <script>
  150. export default {
  151. props:['iStatusBarHeight','svHeight'],
  152. data() {
  153. return {
  154. carModelList:'',
  155. toView:'',
  156. type:'right',
  157. iStatusBarHeight:'',
  158. selectedCarBrand:'',
  159. brand:'',
  160. carSeriesList:'',
  161. manufactor:'',
  162. carSeries:'',
  163. displacementList:'',
  164. displacementListShow:false,
  165. selectedCarSeries:'',
  166. displacement:'',
  167. carGroupList:'',
  168. carGroupListShow:false,
  169. carsslist:[],
  170. carName:'',
  171. carssListShow:false,
  172. secondShow:false,
  173. secondlist:'',
  174. carItem:'',
  175. ssdisplacementListShow:false,
  176. ssdisplacementList:'',
  177. ssname1:'',
  178. ssname2:'',
  179. popuponeShow:false,
  180. }
  181. },
  182. onLoad() {
  183. console.log("?")
  184. },
  185. methods: {
  186. aaa(){
  187. return {height: `calc(100vh - 44px)`};
  188. },
  189. popupc(e){
  190. /* console.log(e)
  191. if(!e.show){
  192. this.displacementListShow=false;
  193. this.carGroupListShow=false;
  194. } */
  195. this.popuponeShow=false
  196. },
  197. carBack(num){
  198. if(num==2){
  199. this.carGroupListShow=false;
  200. }
  201. if(num==1){
  202. this.displacementListShow=false;
  203. }
  204. },
  205. getcarsslist(){
  206. this.secondShow=false;
  207. this.ssdisplacementListShow=false;
  208. uni.showLoading({ title: '加载中'});
  209. this.$http('matchingByOpen/queryCarModelGroupIiPackage', {
  210. name:this.carName
  211. }, 'POST').then(res => {
  212. uni.hideLoading();
  213. this.carssListShow=true;
  214. this.carsslist=res.data
  215. // this.carModelList=res.data.brands
  216. })
  217. },
  218. ssitem(item){
  219. this.carItem=item;
  220. uni.showLoading({ title: '加载中'});
  221. if(item.type==1){
  222. var params={
  223. type:item.type,
  224. manufactor:item.manufactor,
  225. }
  226. this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params, 'POST').then(res => {
  227. this.secondlist=res.data;
  228. this.secondShow=true;
  229. uni.hideLoading();
  230. })
  231. }else if(item.type==2){
  232. var params={
  233. type:item.type,
  234. manufactor:item.manufactor,
  235. brand:item.brand,
  236. carSeries:item.carSeries
  237. }
  238. this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params, 'POST').then(res => {
  239. this.secondlist=res.data;
  240. this.secondShow=true;
  241. uni.hideLoading();
  242. })
  243. }else{
  244. if(item.displacementList.length==1){
  245. uni.navigateTo({
  246. url:'list?type=2&id='+item.displacementList[0].id
  247. })
  248. }else{
  249. this.ssdisplacementList=item.displacementList;
  250. this.ssdisplacementListShow=true;
  251. this.ssname2=item.title;
  252. }
  253. }
  254. this.ssname1=item.title
  255. },
  256. seconditem(item){
  257. if(item.displacementList.length==1){
  258. uni.navigateTo({
  259. url:'list?type=2&id='+item.displacementList[0].id
  260. })
  261. }
  262. else{
  263. this.ssdisplacementList=item.displacementList;
  264. this.ssdisplacementListShow=true;
  265. this.ssname2=item.title
  266. }
  267. // this.$refs.popup.open("right2")
  268. //this.popupShow=true;
  269. },
  270. carNameInput(){
  271. //console.log(this.carName)
  272. if(this.carName==''){
  273. this.carssListShow=false;
  274. this.secondShow=false;
  275. this.ssdisplacementListShow=false;
  276. }
  277. },
  278. getdata(){
  279. uni.showLoading({ title: '加载中'});
  280. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  281. this.$http('matchingByOpen/queryCarModelGroupPackage', {
  282. }, 'POST').then(res => {
  283. console.log("matchingByOpen/queryCarModelGroupPackage")
  284. console.log(res)
  285. this.carModelList=res.data.brands;
  286. uni.hideLoading();
  287. }).catch((err) => {
  288. console.log(err)
  289. })
  290. },
  291. selectBrand(item){
  292. console.log(item)
  293. this.selectedCarBrand=item;
  294. //this.$refs.popup.open("right")
  295. this.popuponeShow=true;
  296. this.brand=item.brand
  297. this.getbrand()
  298. },
  299. getbrand(){
  300. uni.showLoading({ title: '加载中'});
  301. this.$http('matchingByOpen/queryCarModelGroupPackage', {
  302. brand:this.brand
  303. },'POST').then(res => {
  304. uni.hideLoading();
  305. this.carSeriesList=res.data.carSeriesList
  306. })
  307. },
  308. selectCarFactory(manufactor,item){
  309. this.manufactor=manufactor;
  310. this.carSeries=item;
  311. console.log(manufactor)
  312. console.log(item)
  313. console.log(this.selectedCarBrand)
  314. //this.selectedCarSeries=item
  315. //this.displacementListShow=true;
  316. //this.getdisplacementList()
  317. uni.navigateTo({
  318. url:'/pages/index/displacement?logo='+this.selectedCarBrand.logo+'&manufactor='+manufactor+'&carSeries='+item+'&brand='+this.selectedCarBrand.brand
  319. })
  320. },
  321. getdisplacementList(){
  322. uni.showLoading({ title: '加载中'});
  323. this.$http('matchingByOpen/queryCarModelGroupPackage', {
  324. brand:this.brand,
  325. manufactor:this.manufactor,
  326. carSeries:this.carSeries
  327. },'POST').then(res => {
  328. uni.hideLoading();
  329. this.displacementList=res.data.displacementList
  330. })
  331. },
  332. selectDisplacement(item){
  333. this.displacement=item;
  334. this.carGroupListShow=true;
  335. this.getmodelList();
  336. },
  337. getmodelList(){
  338. uni.showLoading({ title: '加载中'});
  339. this.$http('matchingByOpen/queryCarModelGroupPackage', {
  340. brand:this.brand,
  341. manufactor:this.manufactor,
  342. carSeries:this.carSeries,
  343. displacement:this.displacement
  344. },'post').then(res => {
  345. uni.hideLoading();
  346. this.carGroupList=res.data.carGroupList
  347. })
  348. },
  349. goList(item){
  350. console.log(item)
  351. this.$store.commit('mutationslistId', item.id)
  352. uni.navigateTo({
  353. url:'list?name='+item.value+'&nLevelID='+item.carModelInfo.nLevelID+'&id='+item.id
  354. })
  355. },
  356. golistnew(item){
  357. uni.navigateTo({
  358. url:'list?type=2&id='+item.id
  359. })
  360. },
  361. bindToView(item){
  362. console.log(item)
  363. if(item['首字母']=='热'){
  364. this.toView ='rm'
  365. }else{
  366. this.toView = item['首字母']
  367. }
  368. console.log(this.toView)
  369. },
  370. close(){
  371. //this.$refs.popup.close()
  372. },
  373. }
  374. }
  375. </script>
  376. <style scoped lang="scss">
  377. .popupone{
  378. width: 100vw;height: 100vh;
  379. background:rgba(0, 0, 0, 0.4) ;
  380. position: fixed;top: 0;left: 0;
  381. z-index: 11;
  382. }
  383. .brandListkk{
  384. /* padding-top: 44px; */
  385. }
  386. .brand-select .rmview .brand-select-title{
  387. /* background: #fff; */
  388. }
  389. .rmview{
  390. border-radius: 16rpx;overflow: hidden;
  391. }
  392. .carModel-nav-title-left{
  393. display: flex;
  394. }
  395. .carModel-nav-title{
  396. display: flex;
  397. justify-content: space-between;
  398. }
  399. .carBack{
  400. line-height: 100rpx;
  401. font-size: 30rpx;
  402. font-family: PingFangSC-Medium, PingFang SC;
  403. font-weight: 500;
  404. color: #FFFFFF;
  405. padding-right: 24rpx;
  406. }
  407. .carSs{
  408. width: 750rpx;
  409. height: 96rpx;
  410. background: #FFFFFF;
  411. padding-top: 24rpx;
  412. position: fixed;
  413. z-index: 999;
  414. left: 0;
  415. top:90rpx;
  416. /* top: calc(44px + 96rpx); */
  417. }
  418. .carssBox{
  419. width: 702rpx;
  420. height: 72rpx;
  421. background: #F4F5F7;
  422. border-radius: 36rpx;
  423. margin: 0 auto;
  424. }
  425. .carSsImg{
  426. width: 40rpx;
  427. height: 40rpx;
  428. margin-top: 16rpx;
  429. margin-left: 20rpx;
  430. }
  431. .carssInput{
  432. line-height:72rpx;
  433. font-size: 28rpx;
  434. height:72rpx;
  435. padding-left: 16rpx;
  436. width: 600rpx;
  437. }
  438. .carssBox{
  439. display: flex;
  440. }
  441. .brand-select{
  442. .brand-select-title{
  443. height: 64rpx;
  444. position: relative;
  445. h5{
  446. position: absolute;
  447. height:40rpx;
  448. font-size:28rpx;
  449. font-weight:500;
  450. color:#1a1a1a;
  451. line-height:40rpx;
  452. top: 12rpx;
  453. left: 30rpx;
  454. }
  455. }
  456. .brand-select-wrapper{
  457. display: flex;
  458. flex-wrap: wrap;
  459. background:rgba(255,255,255,1);
  460. width: 714rpx;border-radius: 16rpx;
  461. .brand-select-item{
  462. display: block;
  463. width: 80rpx;
  464. min-height: 100rpx;
  465. padding: 30rpx;
  466. img{
  467. display: inline-block;
  468. margin-left: 10rpx;
  469. width: 60rpx;
  470. height: 60rpx;
  471. }
  472. span{
  473. display: inline-block;
  474. text-align: center;
  475. height:33rpx;
  476. width: 90rpx;
  477. font-size:22rpx;
  478. font-weight:400;
  479. color:#1a1a1a;
  480. line-height:33rpx;
  481. }
  482. }
  483. }
  484. }
  485. .fast-navigation{
  486. position: absolute;
  487. text-align: center;
  488. right: 10rpx;
  489. top: 0rpx;
  490. width: 34rpx;
  491. font-size:24rpx;
  492. font-weight:500;
  493. line-height:35rpx;
  494. color: rgb(153, 153, 153);
  495. a{
  496. display: block;
  497. padding-top: 3rpx;
  498. padding-left: 10rpx;
  499. }
  500. .select{
  501. color: #FF4F00;
  502. }
  503. }
  504. .scroll-view{
  505. /* height: calc(100vh - 120rpx); */
  506. }
  507. .brand-select{
  508. padding-bottom: 100rpx;
  509. }
  510. .popup-height {
  511. width: 200px;
  512. }
  513. .popup-content{
  514. width: 80vw;
  515. background: #FFFFFF;
  516. height: 100vh;
  517. margin-left: 20vw;
  518. /* padding-top: 20rpx; */
  519. }
  520. .carModel-nav-title{
  521. height:100rpx;
  522. background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
  523. line-height: 100rpx;
  524. display: flex;
  525. z-index: 500;
  526. &.cell-logo{
  527. position: sticky;
  528. top: 0;
  529. background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
  530. }
  531. .carModel-nav-title-box{
  532. width: 100%;
  533. display: flex;
  534. }
  535. .carModel-nav-title-img{
  536. margin: 20rpx;
  537. width: 60rpx;
  538. height: 60rpx;
  539. }
  540. .carModel-nav-title-msg{
  541. font-size:30rpx;
  542. font-weight:400;
  543. color:rgba(255,255,255,1);
  544. display: block;
  545. padding-right: 20rpx;
  546. width: 400rpx;
  547. overflow: hidden;
  548. text-overflow: ellipsis;
  549. white-space: nowrap;
  550. }
  551. .carModel-nav-title-msg1{
  552. width: 300rpx;
  553. }
  554. }
  555. .cell-item-title{
  556. line-height: 69rpx;padding-left: 24rpx;
  557. width: 520rpx;margin-left: 30rpx;
  558. height: 69rpx;
  559. background: #FF4F00 linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
  560. border-radius: 16rpx;
  561. font-weight: 500;
  562. color: #FFFFFF;font-size: 28rpx;
  563. }
  564. .span-cell{
  565. position: relative;
  566. display: -webkit-box;
  567. display: -webkit-flex;
  568. display: flex;
  569. box-sizing: border-box;
  570. width: calc(100% - 60rpx);
  571. padding: 6rpx 24rpx;
  572. overflow: hidden;
  573. color: #323233;
  574. font-size: 26rpx;
  575. line-height: 82rpx;
  576. height: 82rpx;
  577. background-color: #fff;
  578. border-bottom: 1px solid #ebedf0;
  579. margin-left: 30rpx;
  580. }
  581. .carModel-nav-title{
  582. height:100rpx;
  583. background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
  584. line-height: 100rpx;
  585. display: flex;
  586. z-index: 500;
  587. &.cell-logo{
  588. position: sticky;
  589. top: 0;
  590. background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
  591. }
  592. .carModel-nav-title-box{
  593. width: 100%;
  594. display: flex;
  595. }
  596. .carModel-nav-title-img{
  597. margin: 20rpx;
  598. width: 60rpx;
  599. height: 60rpx;
  600. }
  601. .carModel-nav-title-msg{
  602. font-size:30rpx;
  603. font-weight:400;
  604. color:rgba(255,255,255,1);
  605. display: block;
  606. padding-right: 20px;
  607. }
  608. }
  609. .carbox{
  610. /* height: calc(100vh - 120rpx); */
  611. padding: 0 18rpx;
  612. padding-top: 20rpx;
  613. }
  614. .brandList{
  615. /* height: calc(100vh - 45px); */
  616. /* padding-bottom:var(--status-bar-height); */
  617. height: 100vh;
  618. }
  619. .displacementListLine{
  620. min-height: 50rpx;
  621. padding: 20rpx 20rpx 20rpx 30rpx;
  622. font-size:28rpx;
  623. font-weight:600;
  624. color:rgba(51,51,51,1);
  625. line-height:50rpx;
  626. border-top: 2rpx solid rgb(238, 238, 238);
  627. background-color: rgb(255, 255, 255);
  628. }
  629. .carsslineTxt{
  630. // height: 98rpx;
  631. background: #FFFFFF;
  632. line-height:50rpx;
  633. color: #333333;
  634. font-size: 28rpx;
  635. padding: 0 24rpx;
  636. border-bottom: 1px solid #EEEEEE;
  637. padding: 20rpx 20rpx 20rpx 30rpx;
  638. }
  639. .displacementListBox{
  640. position: fixed;
  641. top: 97rpx;
  642. left: 20vw;
  643. width: 80vw;
  644. height: 100vh;
  645. background:#F4F5F7 ;
  646. z-index: 11111;
  647. /* #ifdef H5 */
  648. top:calc(210rpx);
  649. /* #endif */
  650. }
  651. .carGroupListBox{
  652. position: fixed;
  653. top: 0;
  654. left: 20vw;
  655. width: 80vw;
  656. height: 100vh;
  657. background:#F4F5F7 ;
  658. z-index: 11111;
  659. top: 210rpx;
  660. /* #ifdef H5 */
  661. /* top:calc(44px + 220rpx); */
  662. /* #endif */
  663. }
  664. .carssListBox{
  665. position: fixed;
  666. top: 0;
  667. left: 0;
  668. width: 200vw;
  669. height: 100vh;
  670. background: rgba(0,0,0,0.5) ;
  671. z-index: 11111;
  672. /* #ifdef H5 */
  673. top:calc( 210rpx);
  674. /* #endif */
  675. }
  676. .carssListBoxCont{
  677. background: #FFFFFF;width: 80vw;margin-left: 20vw;height: 100vh;
  678. }
  679. .carssListBox2{
  680. position: fixed;
  681. top: 0;
  682. left: 0;
  683. width: 100vw;
  684. height: 100vh;
  685. background: rgba(0,0,0,0) ;
  686. z-index: 11112;
  687. top:calc(210rpx);
  688. }
  689. .brand-select-titleselect{
  690. color: #FF4F00 !important;
  691. }
  692. .tab1{
  693. position: relative;
  694. }
  695. </style>