|
|
@@ -0,0 +1,739 @@
|
|
|
+<template>
|
|
|
+ <view class="carbox">
|
|
|
+
|
|
|
+ <view class="tab1 ">
|
|
|
+
|
|
|
+ <scroll-view class="scroll-view" :scroll-into-view="toView" scroll-y="true" >
|
|
|
+ <view class="brand-select">
|
|
|
+ <template v-for="item in carModelList">
|
|
|
+ <view :id="item['首字母']" v-if="item['首字母']!='热'">
|
|
|
+ <view class="brand-select-title" :id="item['首字母']+'-model'">
|
|
|
+ <h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="brand-select-wrapper">
|
|
|
+ <a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
|
|
|
+ <img :src="item2.logo" class="brand-select-item-icon">
|
|
|
+ <span>{{item2.brand||item2.name}}</span>
|
|
|
+ </a>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view :id="'rm'" v-if="item['首字母']=='热'" class="rmview">
|
|
|
+ <view class="brand-select-title" :id="item['首字母']+'-model'">
|
|
|
+ <h5 :class="{'brand-select-titleselect':toView=='rm'}">{{item['首字母']}}</h5>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="brand-select-wrapper">
|
|
|
+ <a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
|
|
|
+ <img :src="item2.logo" class="brand-select-item-icon">
|
|
|
+ <span>{{item2.brand||item2.name}}</span>
|
|
|
+ </a>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </scroll-view >
|
|
|
+ <view class="fast-navigation">
|
|
|
+ <a class="fast-navigation-sel" v-if="item['首字母']=='热'" :class="{'select':toView=='rm'}" v-for="item in carModelList" @tap="bindToView(item)">热</a>
|
|
|
+ <a class="fast-navigation-sel" v-if="item['首字母']!=='热'" :class="{'select':item['首字母']==toView}" v-for="item in carModelList" @tap="bindToView(item)">{{item['首字母']}}</a>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- uni-popup -->
|
|
|
+ <view class="popupone" @click="popupc" v-if="popuponeShow">
|
|
|
+ <view class="popup-content" >
|
|
|
+ <scroll-view class="brandList" scroll-y="true">
|
|
|
+
|
|
|
+ <view style="height: 10px;"></view>
|
|
|
+ <view v-for="item in carSeriesList" :key="item.manufactor" class="brandListkk">
|
|
|
+ <h3 class="cell-item-title">{{ item.manufactor }}</h3>
|
|
|
+ <span v-for="item2 in item.carSeries" :key="item2" :title="item2" class="span-cell" @click="selectCarFactory(item.manufactor,item2)" >{{item2}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view class="status_bar" style="height: 50px;"></view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 排量 -->
|
|
|
+
|
|
|
+ <!--
|
|
|
+ <view class="displacementListBox" v-show="displacementListShow">
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+
|
|
|
+ <h3 class="carModel-nav-title">
|
|
|
+ <view class="carModel-nav-title—left">
|
|
|
+ <img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
|
|
|
+ <span class="carModel-nav-title-msg carModel-nav-title-msg1">{{ selectedCarBrand.brand }} {{ carSeries }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="carBack" @click="carBack(1)">上一步</view>
|
|
|
+
|
|
|
+ </h3>
|
|
|
+ <scroll-view scroll-y="true" class="brandList">
|
|
|
+ <view @click="selectDisplacement(item)" v-for="item in displacementList" class="displacementListLine" >
|
|
|
+ {{item}}
|
|
|
+ </view>
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view class="status_bar" style="height: 50px;"></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view> -->
|
|
|
+ <!-- 排量 -->
|
|
|
+ <!-- 离合器 -->
|
|
|
+ <!-- <view class="carGroupListBox" v-show="carGroupListShow">
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+
|
|
|
+ <h3 class="carModel-nav-title">
|
|
|
+ <view class="carModel-nav-title—left">
|
|
|
+ <img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
|
|
|
+ <span class="carModel-nav-title-msg carModel-nav-title-msg1">{{ selectedCarBrand.brand }} {{ carSeries }}{{displacement}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="carBack" @click="carBack(2)">上一步</view>
|
|
|
+ </h3>
|
|
|
+ <scroll-view scroll-y="true" class="brandList">
|
|
|
+ <view @click="goList(item)" v-for="item in carGroupList" class="displacementListLine" >
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view class="status_bar" style="height: 50px;"></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view> -->
|
|
|
+ <!-- 离合器 -->
|
|
|
+
|
|
|
+ <!-- 搜索的 -->
|
|
|
+ <!-- <view class="carssListBox" v-show="carssListShow" @click="carssListShow=false">
|
|
|
+ <view class="carssListBoxCont" >
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <h3 class="carModel-nav-title">
|
|
|
+ <view class="carModel-nav-title—left">
|
|
|
+ <span class="carModel-nav-title-msg" style="padding-left: 24rpx;">{{carName}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </h3>
|
|
|
+ <scroll-view scroll-y="true" class="brandList">
|
|
|
+ <view @click.stop="ssitem(item)" v-for="item in carsslist" class="carsslineTxt" >
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view class="status_bar" style="height: 50px;"></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <!-- <view class="carssListBox2" v-show="secondShow" @click.stop="secondShow=false">
|
|
|
+ <view class="carssListBoxCont">
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <h3 class="carModel-nav-title">
|
|
|
+ <view class="carModel-nav-title—left">
|
|
|
+ <span class="carModel-nav-title-msg" style="padding-left: 24rpx;">{{ssname1}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="carBack" @click="secondShow=false">上一步</view>
|
|
|
+ </h3>
|
|
|
+ <scroll-view scroll-y="true" class="brandList">
|
|
|
+ <view @click.stop="seconditem(item)" v-for="item in secondlist" class="carsslineTxt" >
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view class="status_bar" style="height: 50px;"></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="carssListBox2" v-show="ssdisplacementListShow" @click.stop="ssdisplacementListShow=false">
|
|
|
+ <view class="carssListBoxCont">
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <h3 class="carModel-nav-title">
|
|
|
+ <view class="carModel-nav-title—left">
|
|
|
+ <span class="carModel-nav-title-msg " style="padding-left: 24rpx;">{{ssname2}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="carBack" @click="ssdisplacementListShow=false">上一步</view>
|
|
|
+ </h3>
|
|
|
+ <scroll-view scroll-y="true" class="brandList">
|
|
|
+ <view @click="golistnew(item)" v-for="item in ssdisplacementList" class="carsslineTxt" >
|
|
|
+ {{item.displacement}}
|
|
|
+ </view>
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view class="status_bar" style="height: 50px;"></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view> -->
|
|
|
+ <!-- 搜索的 -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ export default {
|
|
|
+ //props:['iStatusBarHeight','svHeight'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ carModelList:'',
|
|
|
+ toView:'',
|
|
|
+ type:'right',
|
|
|
+ iStatusBarHeight:0,
|
|
|
+ selectedCarBrand:'',
|
|
|
+ brand:'',
|
|
|
+ carSeriesList:'',
|
|
|
+ manufactor:'',
|
|
|
+ carSeries:'',
|
|
|
+ displacementList:'',
|
|
|
+ displacementListShow:false,
|
|
|
+ selectedCarSeries:'',
|
|
|
+ displacement:'',
|
|
|
+ carGroupList:'',
|
|
|
+ carGroupListShow:false,
|
|
|
+ carsslist:[],
|
|
|
+ carName:'',
|
|
|
+ carssListShow:false,
|
|
|
+ secondShow:false,
|
|
|
+ secondlist:'',
|
|
|
+ carItem:'',
|
|
|
+ ssdisplacementListShow:false,
|
|
|
+ ssdisplacementList:'',
|
|
|
+ ssname1:'',
|
|
|
+ ssname2:'',
|
|
|
+ popuponeShow:false,
|
|
|
+ type:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.type=opt.type
|
|
|
+ this.getdata()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ aaa(){
|
|
|
+ return {height: `calc(100vh - 44px)`};
|
|
|
+ },
|
|
|
+ popupc(e){
|
|
|
+ /* console.log(e)
|
|
|
+ if(!e.show){
|
|
|
+ this.displacementListShow=false;
|
|
|
+ this.carGroupListShow=false;
|
|
|
+ } */
|
|
|
+ this.popuponeShow=false
|
|
|
+ },
|
|
|
+ carBack(num){
|
|
|
+ if(num==2){
|
|
|
+ this.carGroupListShow=false;
|
|
|
+ }
|
|
|
+ if(num==1){
|
|
|
+ this.displacementListShow=false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getcarsslist(){
|
|
|
+ this.secondShow=false;
|
|
|
+ this.ssdisplacementListShow=false;
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+ this.$http('matchingByOpen/queryCarModelGroupIiPackage', {
|
|
|
+ name:this.carName
|
|
|
+ }, 'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.carssListShow=true;
|
|
|
+ this.carsslist=res.data
|
|
|
+ // this.carModelList=res.data.brands
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ssitem(item){
|
|
|
+ this.carItem=item;
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+ if(item.type==1){
|
|
|
+ var params={
|
|
|
+ type:item.type,
|
|
|
+ manufactor:item.manufactor,
|
|
|
+ }
|
|
|
+ this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params, 'POST').then(res => {
|
|
|
+ this.secondlist=res.data;
|
|
|
+ this.secondShow=true;
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ }else if(item.type==2){
|
|
|
+ var params={
|
|
|
+ type:item.type,
|
|
|
+ manufactor:item.manufactor,
|
|
|
+ brand:item.brand,
|
|
|
+ carSeries:item.carSeries
|
|
|
+ }
|
|
|
+ this.$http('matchingByOpen/queryCarModelGroupIiPackageSecond', params, 'POST').then(res => {
|
|
|
+ this.secondlist=res.data;
|
|
|
+ this.secondShow=true;
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ if(item.displacementList.length==1){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'list?type=2&id='+item.displacementList[0].id
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.ssdisplacementList=item.displacementList;
|
|
|
+ this.ssdisplacementListShow=true;
|
|
|
+ this.ssname2=item.title;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ this.ssname1=item.title
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ seconditem(item){
|
|
|
+ if(item.displacementList.length==1){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'list?type=2&id='+item.displacementList[0].id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.ssdisplacementList=item.displacementList;
|
|
|
+ this.ssdisplacementListShow=true;
|
|
|
+ this.ssname2=item.title
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.$refs.popup.open("right2")
|
|
|
+ //this.popupShow=true;
|
|
|
+ },
|
|
|
+ carNameInput(){
|
|
|
+ //console.log(this.carName)
|
|
|
+ if(this.carName==''){
|
|
|
+ this.carssListShow=false;
|
|
|
+ this.secondShow=false;
|
|
|
+ this.ssdisplacementListShow=false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getdata(){
|
|
|
+
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+
|
|
|
+ this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
|
+ this.$http('matchingByOpen/queryCarModelGroupPackage', {
|
|
|
+
|
|
|
+ }, 'POST').then(res => {
|
|
|
+ console.log("matchingByOpen/queryCarModelGroupPackage")
|
|
|
+ console.log(res)
|
|
|
+ this.carModelList=res.data.brands;
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ }).catch((err) => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectBrand(item){
|
|
|
+ console.log(item)
|
|
|
+ this.selectedCarBrand=item;
|
|
|
+ //this.$refs.popup.open("right")
|
|
|
+ this.popuponeShow=true;
|
|
|
+ this.brand=item.brand
|
|
|
+ this.getbrand()
|
|
|
+ },
|
|
|
+ getbrand(){
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+ this.$http('matchingByOpen/queryCarModelGroupPackage', {
|
|
|
+ brand:this.brand
|
|
|
+ },'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.carSeriesList=res.data.carSeriesList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectCarFactory(manufactor,item){
|
|
|
+ this.manufactor=manufactor;
|
|
|
+ this.carSeries=item;
|
|
|
+ console.log(manufactor)
|
|
|
+ console.log(item)
|
|
|
+ console.log(this.selectedCarBrand)
|
|
|
+ //this.selectedCarSeries=item
|
|
|
+ //this.displacementListShow=true;
|
|
|
+ //this.getdisplacementList()
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/index/displacement?logo='+this.selectedCarBrand.logo+'&manufactor='+manufactor+'&carSeries='+item+'&brand='+this.selectedCarBrand.brand+"&type="+this.type
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getdisplacementList(){
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+ this.$http('matchingByOpen/queryCarModelGroupPackage', {
|
|
|
+ brand:this.brand,
|
|
|
+ manufactor:this.manufactor,
|
|
|
+ carSeries:this.carSeries
|
|
|
+ },'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.displacementList=res.data.displacementList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectDisplacement(item){
|
|
|
+ this.displacement=item;
|
|
|
+ this.carGroupListShow=true;
|
|
|
+ this.getmodelList();
|
|
|
+ },
|
|
|
+ getmodelList(){
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+ this.$http('matchingByOpen/queryCarModelGroupPackage', {
|
|
|
+ brand:this.brand,
|
|
|
+ manufactor:this.manufactor,
|
|
|
+ carSeries:this.carSeries,
|
|
|
+ displacement:this.displacement
|
|
|
+ },'post').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.carGroupList=res.data.carGroupList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goList(item){
|
|
|
+ console.log(item)
|
|
|
+ this.$store.commit('mutationslistId', item.id)
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'list?name='+item.value+'&nLevelID='+item.carModelInfo.nLevelID+'&id='+item.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ golistnew(item){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'list?type=2&id='+item.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ bindToView(item){
|
|
|
+ console.log(item)
|
|
|
+ if(item['首字母']=='热'){
|
|
|
+ this.toView ='rm'
|
|
|
+ }else{
|
|
|
+ this.toView = item['首字母']
|
|
|
+ }
|
|
|
+ console.log(this.toView)
|
|
|
+
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+ //this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.popupone{
|
|
|
+ width: 100vw;height: 100vh;
|
|
|
+ background:rgba(0, 0, 0, 0.4) ;
|
|
|
+ position: fixed;top: 0;left: 0;
|
|
|
+ z-index: 11;
|
|
|
+}
|
|
|
+.brandListkk{
|
|
|
+ /* padding-top: 44px; */
|
|
|
+}
|
|
|
+.brand-select .rmview .brand-select-title{
|
|
|
+ /* background: #fff; */
|
|
|
+}
|
|
|
+.rmview{
|
|
|
+ border-radius: 16rpx;overflow: hidden;
|
|
|
+}
|
|
|
+.carModel-nav-title-left{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .carModel-nav-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .carBack{
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ }
|
|
|
+ .carSs{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999;
|
|
|
+ left: 0;
|
|
|
+ top:90rpx;
|
|
|
+ /* top: calc(44px + 96rpx); */
|
|
|
+ }
|
|
|
+ .carssBox{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ }
|
|
|
+ .carSsImg{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .carssInput{
|
|
|
+ line-height:72rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height:72rpx;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ width: 600rpx;
|
|
|
+ }
|
|
|
+ .carssBox{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .brand-select{
|
|
|
+ .brand-select-title{
|
|
|
+ height: 64rpx;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ h5{
|
|
|
+ position: absolute;
|
|
|
+ height:40rpx;
|
|
|
+ font-size:28rpx;
|
|
|
+ font-weight:500;
|
|
|
+ color:#1a1a1a;
|
|
|
+ line-height:40rpx;
|
|
|
+ top: 12rpx;
|
|
|
+ left: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .brand-select-wrapper{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background:rgba(255,255,255,1);
|
|
|
+ width: 714rpx;border-radius: 16rpx;
|
|
|
+ .brand-select-item{
|
|
|
+ display: block;
|
|
|
+ width: 80rpx;
|
|
|
+ min-height: 100rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ img{
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ height:33rpx;
|
|
|
+ width: 90rpx;
|
|
|
+ font-size:22rpx;
|
|
|
+ font-weight:400;
|
|
|
+ color:#1a1a1a;
|
|
|
+ line-height:33rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fast-navigation{
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ right: 10rpx;
|
|
|
+ top: 0rpx;
|
|
|
+ width: 34rpx;
|
|
|
+ font-size:24rpx;
|
|
|
+ font-weight:500;
|
|
|
+ line-height:35rpx;
|
|
|
+ color: rgb(153, 153, 153);
|
|
|
+ a{
|
|
|
+ display: block;
|
|
|
+ padding-top: 6rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+ .select{
|
|
|
+ color: #FF4F00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .scroll-view{
|
|
|
+ /* height: calc(100vh - 120rpx); */
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ .brand-select{
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ }
|
|
|
+ .popup-height {
|
|
|
+
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ .popup-content{
|
|
|
+ width: 80vw;
|
|
|
+ background: #FFFFFF;
|
|
|
+ height: 100vh;
|
|
|
+ margin-left: 20vw;
|
|
|
+ /* padding-top: 20rpx; */
|
|
|
+ }
|
|
|
+ .carModel-nav-title{
|
|
|
+ height:100rpx;
|
|
|
+ background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
|
|
|
+ line-height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ z-index: 500;
|
|
|
+ &.cell-logo{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
|
|
|
+ }
|
|
|
+ .carModel-nav-title-box{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .carModel-nav-title-img{
|
|
|
+ margin: 20rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ .carModel-nav-title-msg{
|
|
|
+ font-size:30rpx;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
+ display: block;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ width: 400rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .carModel-nav-title-msg1{
|
|
|
+ width: 300rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cell-item-title{
|
|
|
+ line-height: 69rpx;padding-left: 24rpx;
|
|
|
+ width: 520rpx;margin-left: 30rpx;
|
|
|
+ height: 69rpx;
|
|
|
+ background: #FF4F00 linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .span-cell{
|
|
|
+ position: relative;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: calc(100% - 60rpx);
|
|
|
+ padding: 6rpx 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #323233;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 82rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid #ebedf0;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ .span-cell:nth-last-child(1){
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .carModel-nav-title{
|
|
|
+ height:100rpx;
|
|
|
+ background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
|
|
|
+ line-height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ z-index: 500;
|
|
|
+ &.cell-logo{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
|
|
|
+ }
|
|
|
+ .carModel-nav-title-box{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .carModel-nav-title-img{
|
|
|
+ margin: 20rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ .carModel-nav-title-msg{
|
|
|
+ font-size:30rpx;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
+ display: block;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .carbox{
|
|
|
+ /* height: calc(100vh - 120rpx); */
|
|
|
+ padding: 0 18rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ }
|
|
|
+ .brandList{
|
|
|
+ /* height: calc(100vh - 45px); */
|
|
|
+ /* padding-bottom:var(--status-bar-height); */
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ .displacementListLine{
|
|
|
+ min-height: 50rpx;
|
|
|
+ padding: 20rpx 20rpx 20rpx 30rpx;
|
|
|
+ font-size:28rpx;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(51,51,51,1);
|
|
|
+ line-height:50rpx;
|
|
|
+ border-top: 2rpx solid rgb(238, 238, 238);
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
+ }
|
|
|
+ .carsslineTxt{
|
|
|
+ // height: 98rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ line-height:50rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ padding: 20rpx 20rpx 20rpx 30rpx;
|
|
|
+ }
|
|
|
+ .displacementListBox{
|
|
|
+ position: fixed;
|
|
|
+ top: 97rpx;
|
|
|
+ left: 20vw;
|
|
|
+ width: 80vw;
|
|
|
+ height: 100vh;
|
|
|
+ background:#F4F5F7 ;
|
|
|
+ z-index: 11111;
|
|
|
+ /* #ifdef H5 */
|
|
|
+ top:calc(210rpx);
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+ .carGroupListBox{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 20vw;
|
|
|
+ width: 80vw;
|
|
|
+ height: 100vh;
|
|
|
+ background:#F4F5F7 ;
|
|
|
+ z-index: 11111;
|
|
|
+ top: 210rpx;
|
|
|
+ /* #ifdef H5 */
|
|
|
+ /* top:calc(44px + 220rpx); */
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+ .carssListBox{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 200vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0,0,0,0.5) ;
|
|
|
+ z-index: 11111;
|
|
|
+ /* #ifdef H5 */
|
|
|
+ top:calc( 210rpx);
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+ .carssListBoxCont{
|
|
|
+ background: #FFFFFF;width: 80vw;margin-left: 20vw;height: 100vh;
|
|
|
+ }
|
|
|
+ .carssListBox2{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0,0,0,0) ;
|
|
|
+ z-index: 11112;
|
|
|
+ top:calc(210rpx);
|
|
|
+
|
|
|
+ }
|
|
|
+ .brand-select-titleselect{
|
|
|
+ color: #FF4F00 !important;
|
|
|
+ }
|
|
|
+ .tab1{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+</style>
|
