浏览代码

修改头部样式

chenrui 2 年之前
父节点
当前提交
672db43b7c
共有 1 个文件被更改,包括 424 次插入415 次删除
  1. 424 415
      pages/vinAnalyse/shelfAnalyse.vue

+ 424 - 415
pages/vinAnalyse/shelfAnalyse.vue

@@ -1,34 +1,33 @@
 <template>
 	<view class="shelf-analyse-content">
-		<view class="headerName u-flex">
-			<text></text>
-			<view class="shelfName u-line-1">{{shelfName}}</view>
+		<view class="headerName u-flex u-row-between">
+			<view class="headerNameLeft u-flex">
+				<text class="barBox"></text>
+				<view class="shelfName u-line-1">{{ shelfName }}</view>
+			</view>
+			<view class="search" @click="showModal = true">
+				<text>筛选</text>
+				<u-icon name="arrow-down"></u-icon>
+			</view>
 		</view>
 		<view class="checkbox-price">
-			<u-checkbox-group  placement="row" :size="24">
-				<u-checkbox v-model="item.checked" activeColor="rgb(4, 133, 246)" v-for="(item,index) in tabList" :key="index" :name="item.val">{{item.name}}</u-checkbox>
+			<u-checkbox-group placement="row" :size="24">
+				<u-checkbox v-model="item.checked" activeColor="rgb(4, 133, 246)" v-for="(item, index) in tabList" :key="index" :name="item.val">{{ item.name }}</u-checkbox>
 			</u-checkbox-group>
-			<view class="search" @click="showModal=true">
-				<text>筛选</text> <u-icon name="arrow-down"></u-icon>
-			</view>
 		</view>
 		<scroll-view class="product-list" scroll-y @scrolltolower="onreachBottom">
 			<view class="st-detailList-main">
 				<view class="st-detailList-main-item" v-for="(item, index) in listData" :key="item.id" @click="toViewDetail(item)">
 					<view class="st-detailList-item-con flex align_center">
 						<view class="pimgs">
-							<u-image :src="item.icon?item.icon:`../../static/${theme}/def_img@2x.png`" width="100" height="100" border-radius="10"></u-image>
+							<u-image :src="item.icon ? item.icon : `../../static/${theme}/def_img@2x.png`" width="100" height="100" border-radius="10"></u-image>
 						</view>
 						<view class="flex_1 pimgs_right">
 							<view class="flex align_center justify_between">
-								<view>
-									{{item.vinCode}}
-								</view>
-								<view class="font_13">
-									{{item.createDate}}
-								</view>
+								<view>{{ item.vinCode }}</view>
+								<view class="font_13">{{ item.createDate }}</view>
 							</view>
-							<view class="padding_3">{{item.modelInfo || '--'}} </view>
+							<view class="padding_3">{{ item.modelInfo || '--' }}</view>
 						</view>
 					</view>
 					<view class="price-all flex" v-if="selPriceShow">
@@ -52,488 +51,498 @@
 						</view>
 					</view>
 				</view>
-				<u-empty v-if="listData.length == 0 &&status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" text="暂无VIN记录" mode="list" :margin-top="260"></u-empty>
-				<view style="padding-bottom: 20upx;">
-					<u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" />
-				</view>
+				<u-empty
+					v-if="listData.length == 0 && status != 'loading'"
+					:src="`/static/${$config('themePath')}/def_no_data@3x.png`"
+					icon-size="150"
+					text="暂无VIN记录"
+					mode="list"
+					:margin-top="260"
+				></u-empty>
+				<view style="padding-bottom: 20upx;"><u-loadmore v-if="totalNum > listData.length || status == 'loading'" :status="status" /></view>
 			</view>
 		</scroll-view>
 		<!-- 搜索弹窗 -->
-		<search :showModal="showModal" @refresh="refreshList" @close="showModal=false"/>
+		<search :showModal="showModal" @refresh="refreshList" @close="showModal = false" />
 		<!-- vin 详情 -->
-		<div class="cpb_cart-mask" v-if="showCart" @click="showCart=false;selFlag=0">
-			<div class="cpb_cart-box" @click.stop="showCart=true">
-				<div class="cpb_close flex align-center justify_center" @click.stop="showCart=false;selFlag=0">
+		<div
+			class="cpb_cart-mask"
+			v-if="showCart"
+			@click="
+				showCart = false;
+				selFlag = 0;
+			"
+		>
+			<div class="cpb_cart-box" @click.stop="showCart = true">
+				<div
+					class="cpb_close flex align-center justify_center"
+					@click.stop="
+						showCart = false;
+						selFlag = 0;
+					"
+				>
 					<u-icon name="close"></u-icon>
 				</div>
 				<div class="cpb_cart-tit">
 					<view>VIN详情</view>
 					<view class="st-detailList-item-con flex">
 						<view class="pimgs">
-							<u-image :src="tempData.icon?tempData.icon:`../../static/${theme}/def_img@2x.png`" width="100" height="100" border-radius="10"></u-image>
+							<u-image :src="tempData.icon ? tempData.icon : `../../static/${theme}/def_img@2x.png`" width="100" height="100" border-radius="10"></u-image>
 						</view>
 						<view class="flex_1 pimgs_right">
-							<view class="padding_3">{{tempData.modelInfo || '--'}} </view>
-							<view class="font_13">
-								VIN:{{tempData.vinCode}}
-							</view>
+							<view class="padding_3">{{ tempData.modelInfo || '--' }}</view>
+							<view class="font_13">VIN:{{ tempData.vinCode }}</view>
 						</view>
 					</view>
 				</div>
 				<div class="cpb_body flex justify_between">
 					<div class="cpb_tab">
-						<div :class="selFlag==0?'active':''" @click.stop="changeSel(0)">空调滤清器</div>
-						<div :class="selFlag==1?'active':''" @click.stop="changeSel(1)">空气滤清器</div>
-						<div :class="selFlag==2?'active':''" @click.stop="changeSel(2)">机油滤清器</div>
+						<div :class="selFlag == 0 ? 'active' : ''" @click.stop="changeSel(0)">空调滤清器</div>
+						<div :class="selFlag == 1 ? 'active' : ''" @click.stop="changeSel(1)">空气滤清器</div>
+						<div :class="selFlag == 2 ? 'active' : ''" @click.stop="changeSel(2)">机油滤清器</div>
 					</div>
-					<div class="cpb_cart-list" v-if="productList.length>0">
-							<div 
-							v-for="(item, index) in productList" 
-							:key="index" 
-							>
+					<div class="cpb_cart-list" v-if="productList.length > 0">
+						<div v-for="(item, index) in productList" :key="index">
 							<view class="nav-right-item flex">
 								<view class="uni-col-2">
-									<u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${theme}/def_img@2x.png`" width="100" height="100" border-radius="30"></u-image>
+									<u-image
+										:src="item.productImageUrl ? item.productImageUrl : `../../static/${theme}/def_img@2x.png`"
+										width="100"
+										height="100"
+										border-radius="30"
+									></u-image>
 								</view>
 								<view class="item-info uni-col-10">
-									<view class="item-name u-line-2">
-										{{item.productName}}
-									</view>
+									<view class="item-name u-line-2">{{ item.productName }}</view>
 									<view class="item-detail">
 										<view class="item-detail-info align_center flex justify_between">
-											<view>
-												{{item.productCode}}
-											</view>
+											<view>{{ item.productCode }}</view>
 											<!-- 判断是否铺货 -->
 											<view class="flex justify_end" v-if="item.isShelfProduct != '否'">
-												<text class="item-detail-text">
-													库存:{{item.qty?item.qty:0}}
-												</text>
-											</view>
-											<view class="flex justify_end isShelf" v-else>
-												暂未铺货
+												<text class="item-detail-text">库存:{{ item.qty ? item.qty : 0 }}</text>
 											</view>
+											<view class="flex justify_end isShelf" v-else>暂未铺货</view>
 										</view>
 									</view>
 								</view>
 							</view>
 						</div>
-						<div class="loadmoreStyle"><u-loadmore status="nomore" :load-text="loadText"/></div>
+						<div class="loadmoreStyle"><u-loadmore status="nomore" :load-text="loadText" /></div>
 					</div>
-					<view v-else class="emptyStyle">
+					<view v-else class="emptyStyle u-flex">
 						<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" text="暂无匹配产品" mode="list"></u-empty>
 					</view>
 				</div>
+			</div>
 		</div>
-	</div>
 	</view>
 </template>
 
 <script>
-	import { toThousands } from '@/libs/tools'
-	import { queryPage,queryDetail } from '@/api/vinLog'
-	import search from './search.vue'
-	// import copyText from '@/pages/common/copyText.vue'
-	export default{
-		components:{search},
-		data(){
-			return{
-				toThousands,
-				listData:[],
-				totalNum:0,
-				priceList:[
-					{ name: '空调滤清器', checked: true, val: 'kt' },
-					{ name: '空气滤清器', checked: true, val: 'kq' },
-					{ name: '机油滤清器', checked: true, val: 'jy' },
-				],
-				pageNo:1,
-				pageSize:15,
-				noDataText: '暂无数据',
-				theme: '',
-				status: 'loadmore',
-				showModal:false,
-				showCart: false,
-				params:{},
-				detail: null,
-				tempData: null,
-				productList: [],
-				shelfSn:'',//货架名称
-				selFlag:0,
-				pullDownRefresh:false,//下拉刷新,
-				loadText:{
-					nomore: '已显示全部'
-				},
-				shelfName:''
-			}
-		},
-		onNavigationBarButtonTap(e){
-			uni.navigateTo({
-				url:"/pages/vinAnalyse/fitProductlist?shelfSn="+this.shelfSn +"&shelfName="+ this.shelfName
-			})
-		},
-		onBackPress(e) {
-		  if(this.showModal||this.showCart) {  
-			this.showModal = false;  
+import { toThousands } from '@/libs/tools';
+import { queryPage, queryDetail } from '@/api/vinLog';
+import search from './search.vue';
+// import copyText from '@/pages/common/copyText.vue'
+export default {
+	components: { search },
+	data() {
+		return {
+			toThousands,
+			listData: [],
+			totalNum: 0,
+			priceList: [{ name: '空调滤清器', checked: true, val: 'kt' }, { name: '空气滤清器', checked: true, val: 'kq' }, { name: '机油滤清器', checked: true, val: 'jy' }],
+			pageNo: 1,
+			pageSize: 15,
+			noDataText: '暂无数据',
+			theme: '',
+			status: 'loadmore',
+			showModal: false,
+			showCart: false,
+			params: {},
+			detail: null,
+			tempData: null,
+			productList: [],
+			shelfSn: '', //货架名称
+			selFlag: 0,
+			pullDownRefresh: false, //下拉刷新,
+			loadText: {
+				nomore: '已显示全部'
+			},
+			shelfName: ''
+		};
+	},
+	onNavigationBarButtonTap(e) {
+		uni.navigateTo({
+			url: '/pages/vinAnalyse/fitProductlist?shelfSn=' + this.shelfSn + '&shelfName=' + this.shelfName
+		});
+	},
+	onBackPress(e) {
+		if (this.showModal || this.showCart) {
+			this.showModal = false;
 			this.showCart = false;
-			return true;  
-		  } 
+			return true;
+		}
+	},
+	computed: {
+		selPriceShow() {
+			const a = this.priceList.filter(item => item.checked);
+			return a.length > 0;
 		},
-		computed: {
-			selPriceShow() {
-				const a = this.priceList.filter(item => item.checked)
-				return a.length > 0
-			},
-			tabList(){
-				return this.priceList
-			}
+		tabList() {
+			return this.priceList;
+		}
+	},
+	onLoad(option) {
+		this.theme = getApp().globalData.theme;
+		this.shelfSn = option.shelfSn;
+		this.shelfName = option.shelfName;
+		let ajaxData = {
+			shelfSn: option.shelfSn,
+			pageNo: this.pageNo,
+			pageSize: this.pageSize
+		};
+		this.getList(ajaxData);
+	},
+	onReady() {
+		uni.setNavigationBarTitle({
+			title: 'VIN分析'
+		});
+	},
+	methods: {
+		toPage(url) {
+			uni.switchTab({
+				url: url
+			});
 		},
-		onLoad(option) {
-			this.theme = getApp().globalData.theme;
-			this.shelfSn = option.shelfSn
-			this.shelfName = option.shelfName
-			let ajaxData={
-				shelfSn:option.shelfSn,
-				pageNo: this.pageNo, 
-				pageSize: this.pageSize 
+		// 搜索查询新列表
+		refreshList(val) {
+			(this.params = val ? val : {}), (this.listData = []);
+			this.totalNum = 0;
+			delete val.date;
+			let ajaxData = {
+				shelfSn: this.shelfSn,
+				pageNo: 1,
+				pageSize: this.pageSize
+			};
+			if (val) {
+				Object.assign(ajaxData, val);
 			}
 			this.getList(ajaxData);
-			
 		},
-		onReady() {
-			uni.setNavigationBarTitle({
-				title:'VIN分析'
-			})
-		},
-		methods:{
-			toPage(url){
-				uni.switchTab({
-					url:url
-				})
-			},
-			// 搜索查询新列表
-			refreshList(val){
-				this.params =val ? val : {},
-				this.listData = []
-				this.totalNum = 0
-				delete val.date;
-				let ajaxData={
-					shelfSn:this.shelfSn,
-					pageNo:1, 
-					pageSize: this.pageSize 
-				}
-				if(val){
-					Object.assign(ajaxData,val);
-				}
-				this.getList(ajaxData);
-			},
-			// 列表
-			getList(params){
-				const _this = this
-				this.status = "loading"
-				queryPage(params).then(res => {
-					if (res.status == 200) {
-						if(this.pageNo>1){
-							this.listData = this.listData.concat(res.data.list || [])
-						}else{
-							this.listData = res.data.list || []
-						}
-						this.totalNum = res.data.count || 0
+		// 列表
+		getList(params) {
+			const _this = this;
+			this.status = 'loading';
+			queryPage(params).then(res => {
+				if (res.status == 200) {
+					if (this.pageNo > 1) {
+						this.listData = this.listData.concat(res.data.list || []);
 					} else {
-						this.listData = []
-						this.totalNum = 0
-						this.noDataText = res.message
-					}
-					this.status = "loadmore"
-					if(this.pullDownRefresh){
-						uni.stopPullDownRefresh();
-					}
-					
-				})
-			},
-			changeSel(num){
-				this.selFlag=num;
-				this.$nextTick(()=>{
-					this.toViewDetail(this.tempData);
-				})
-			},
-			// 查看详情
-			toViewDetail(row){
-				 this.tempData = row
-				 queryDetail({id:row.id}).then(res => {
-					this.showCart = true
-					if(this.selFlag == 0){
-						this.productList=res.data.airConditionerFilter
-					}else if(this.selFlag == 1){
-						this.productList=res.data.airFilterFlag
-					}else{
-						this.productList=res.data.engineOilFilterFlag
-					}
-				})
-				 
-			},
-			//到底部加载更多
-			onreachBottom() {
-				if(this.listData.length < this.totalNum){
-					this.pageNo += 1
-					let ajaxData={
-						shelfSn:this.shelfSn,
-						pageNo: this.pageNo, 
-						pageSize: this.pageSize 
+						this.listData = res.data.list || [];
 					}
-					this.getList(ajaxData)
-				}else{
-					this.status = "nomore"
+					this.totalNum = res.data.count || 0;
+				} else {
+					this.listData = [];
+					this.totalNum = 0;
+					this.noDataText = res.message;
 				}
-			},
+				this.status = 'loadmore';
+				if (this.pullDownRefresh) {
+					uni.stopPullDownRefresh();
+				}
+			});
 		},
-		
-		onPullDownRefresh(){
-			this.pullDownRefresh= true;
-			this.pageNo =1
-			let ajaxData={
-				shelfSn:this.shelfSn,
-				pageNo: this.pageNo, 
-				pageSize: this.pageSize 
+		changeSel(num) {
+			this.selFlag = num;
+			this.$nextTick(() => {
+				this.toViewDetail(this.tempData);
+			});
+		},
+		// 查看详情
+		toViewDetail(row) {
+			this.tempData = row;
+			queryDetail({ id: row.id }).then(res => {
+				this.showCart = true;
+				if (this.selFlag == 0) {
+					this.productList = res.data.airConditionerFilter;
+				} else if (this.selFlag == 1) {
+					this.productList = res.data.airFilterFlag;
+				} else {
+					this.productList = res.data.engineOilFilterFlag;
+				}
+			});
+		},
+		//到底部加载更多
+		onreachBottom() {
+			if (this.listData.length < this.totalNum) {
+				this.pageNo += 1;
+				let ajaxData = {
+					shelfSn: this.shelfSn,
+					pageNo: this.pageNo,
+					pageSize: this.pageSize
+				};
+				if(this.params){
+					delete this.params.date;
+					Object.assign(ajaxData, this.params)
+				}
+				this.getList(ajaxData);
+			} else {
+				this.status = 'nomore';
 			}
-			this.getList(ajaxData)
 		}
+	},
+
+	onPullDownRefresh() {
+		this.pullDownRefresh = true;
+		this.pageNo = 1;
+		let ajaxData = {
+			shelfSn: this.shelfSn,
+			pageNo: this.pageNo,
+			pageSize: this.pageSize
+		};
+		this.getList(ajaxData);
 	}
+};
 </script>
 
 <style lang="scss">
-	.shelf-analyse-content{
-		width:100%;
-		height: 100vh;
-		.headerName{
-			background-color: #fff;
-			padding:0 20rpx;
-			color: #222;
-			font-size: 30rpx;
-			text{
-					display: block;
-					height: 30rpx;
-					width: 6rpx;
-					background: #0485F6;
-					margin-right: 10rpx;
-					border-radius: 10rpx;
-				}
-				.shelfName{
-					font-weight: bold;
-					width: calc(100% - 16rpx);
-				}
+.shelf-analyse-content {
+	width: 100%;
+	height: 100vh;
+	.headerName {
+		background-color: #fff;
+		padding: 0 20rpx;
+		color: #222;
+		font-size: 30rpx;
+		.headerNameLeft{
+			width: calc(100% - 110rpx);
+		
+		.barBox {
+			display: block;
+			height: 30rpx;
+			width: 6rpx;
+			background: #0485f6;
+			margin-right: 10rpx;
+			border-radius: 10rpx;
 		}
-		.emptyStyle{
-			margin:auto;
+		.shelfName {
+			font-weight: bold;
+			width: calc(100% - 16rpx);
 		}
-		.checkbox-price{
-			background-color: #fff;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 10rpx 25rpx;
-			color: #191919;
-			.search{
-				color:#00aaff;
-				width: 90rpx;;
-			}
-		}
-		.product-list{
-			height: calc(100vh - 116rpx);
-				.st-detailList-main{
-					padding: 20rpx;
-					.st-detailList-main-item{
-						width: 100%;
-						box-sizing: border-box;
-						background: #ffffff;
-						padding: 20upx;
-						margin-bottom: 25upx;
-						border-radius: 25upx;
-						box-shadow: 1px 1px 3px #EEEEEE;
-						.st-detailList-item-con{
-							width: 100%;
-							box-sizing: border-box;
-							padding: 20upx 0;
-							font-size: 28upx;
-							.red{
-								color: red;
-							}
-							.pimgs{
-								width: 100rpx;
-								height: 100rpx;
-								margin-right: 16upx;
-							}
-							.pimgs_right{
-								width:calc(100% - 116upx);
-							}
-							.font_13{
-								font-size: 24upx;
-								color: #999;
-							}
-							.padding_3{
-								margin: 6upx 0;
-								overflow:hidden;
-								text-overflow: ellipsis;
-								white-space: nowrap	
-							}
-						}
-						.price-all{
-							border-top: 1px solid #e4e7ed;
-							padding: 10upx 20upx 0;
-							.price-item{
-								width: 33.3%;
-								border-right:  1px solid #e4e7ed;
-								text-align: center;
-								>view{
-									color:#999;
-									margin-bottom: 10rpx;
-									font-size: 24rpx;
-								}
-								>text{
-									border:1rpx solid #eee;
-									font-size: 20rpx;
-									padding:5rpx 10rpx;
-									border-radius: 10rpx;
-									min-width: 100rpx;
-									display: inline-block;
-								}
-								.red{
-									color:#ff5500;
-									border-color: #ff5500;
-								}
-								.green{
-									color:#00cb00;
-									border-color: #00cb00;
-								}
-							}
-							.price-item:last-child{
-								border-right:  none;
-							}
-						}
-					}
-				}
-				
-				
 		}
-		
-		// 详情
-		.cpb_cart-mask{
-			position: fixed;
-			width: 100%;
-			background: rgba(0,0,0,0.5);
-			z-index: 900;
-			bottom: 0;
-			top: 0;
+		.search {
+			color: #00aaff;
+			width: 90rpx;
 		}
-		.cpb_cart-box{
-			background-color: #fff;
-			position: absolute;
-			width: 100%;
-			z-index: 1000;
-			bottom: 0;
-			border-radius: 30rpx 30rpx 0 0;
-			max-height: 70vh;
-			display: flex;
-			flex-direction: column;
-			.cpb_close{
-				position: absolute;
-				top: 10rpx;
-				right: 20rpx;
-				width: 70rpx;
-				height: 70rpx;
-				font-size: 32rpx;
-				color: #999;
-			}
-			.cpb_cart-tit{
-				padding: 20rpx 30rpx 0;
-				font-size: 30rpx;
-				border-bottom: 2rpx solid #eee;
-				.st-detailList-item-con{
+	}
+	.checkbox-price {
+		background-color: #fff;
+		padding: 10rpx 25rpx;
+		color: #191919;
+	}
+	.product-list {
+		height: calc(100vh - 116rpx);
+		.st-detailList-main {
+			padding: 20rpx;
+			.st-detailList-main-item {
+				width: 100%;
+				box-sizing: border-box;
+				background: #ffffff;
+				padding: 20upx;
+				margin-bottom: 25upx;
+				border-radius: 25upx;
+				box-shadow: 1px 1px 3px #eeeeee;
+				.st-detailList-item-con {
+					width: 100%;
+					box-sizing: border-box;
 					padding: 20upx 0;
 					font-size: 28upx;
-					
-					.pimgs{
+					.red {
+						color: red;
+					}
+					.pimgs {
+						width: 100rpx;
+						height: 100rpx;
 						margin-right: 16upx;
 					}
-					.pimgs_right{
-						width:calc(100% - 66upx);
+					.pimgs_right {
+						width: calc(100% - 116upx);
 					}
-					.font_13{
+					.font_13 {
 						font-size: 24upx;
+						color: #999;
 					}
-					.padding_3{
-						padding: 6upx 0;
-						word-break: break-all;
+					.padding_3 {
+						margin: 6upx 0;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
 					}
-				} 
-			}
-			.cpb_body{
-				height: 80vh;
-				.cpb_tab{
-					width: 25%;
-					height: 100%;
-					background-color: #f8f8f8;
-					> div{
-						padding: 30rpx 20rpx;
-						font-size: 24rpx;
+				}
+				.price-all {
+					border-top: 1px solid #e4e7ed;
+					padding: 10upx 20upx 0;
+					.price-item {
+						width: 33.3%;
+						border-right: 1px solid #e4e7ed;
 						text-align: center;
+						> view {
+							color: #999;
+							margin-bottom: 10rpx;
+							font-size: 24rpx;
+						}
+						> text {
+							border: 1rpx solid #eee;
+							font-size: 20rpx;
+							padding: 5rpx 10rpx;
+							border-radius: 10rpx;
+							min-width: 100rpx;
+							display: inline-block;
+						}
+						.red {
+							color: #ff5500;
+							border-color: #ff5500;
+						}
+						.green {
+							color: #00cb00;
+							border-color: #00cb00;
+						}
 					}
-					.active{
-						background-color: #fff;
-						border-left: 5rpx solid #00aaff;
+					.price-item:last-child {
+						border-right: none;
 					}
 				}
 			}
-			.cpb_cart-list{
-				width: 75%;
-				height: 100%;
-				padding: 20rpx;
-				overflow: auto;
-				flex-grow: 1;
-				box-sizing: border-box;
-				> view{
-					margin-bottom: 20rpx;
+		}
+	}
+
+	// 详情
+	.cpb_cart-mask {
+		position: fixed;
+		width: 100%;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 900;
+		bottom: 0;
+		top: 0;
+	}
+	.cpb_cart-box {
+		background-color: #fff;
+		position: absolute;
+		width: 100%;
+		z-index: 1000;
+		bottom: 0;
+		border-radius: 30rpx 30rpx 0 0;
+		max-height: 70vh;
+		display: flex;
+		flex-direction: column;
+		.cpb_close {
+			position: absolute;
+			top: 10rpx;
+			right: 20rpx;
+			width: 70rpx;
+			height: 70rpx;
+			font-size: 32rpx;
+			color: #999;
+		}
+		.cpb_cart-tit {
+			padding: 20rpx 30rpx 0;
+			font-size: 30rpx;
+			border-bottom: 2rpx solid #eee;
+			.st-detailList-item-con {
+				padding: 20upx 0;
+				font-size: 28upx;
+
+				.pimgs {
+					margin-right: 16upx;
 				}
-				.nav-right-item{
-					padding: 0 20upx 20rpx;
+				.pimgs_right {
+					width: calc(100% - 66upx);
 				}
-				.item-name{
-					font-size: 30rpx;
-					width:100%;
-					// text{
-					// 	background: rgba(3, 54, 146, 0.15);
-					// 	color: #1c588a;
-					// 	border-radius: 1em;
-					// 	font-size: 0.8em;
-					// 	padding: 0 0.5em;
-					// 	margin-right: 10upx;
-					// }
+				.font_13 {
+					font-size: 24upx;
 				}
-				.item-info{
-					border-bottom:2rpx solid #eee;
-					flex-grow: 1;
-					padding-left: 20rpx;
+				.padding_3 {
+					padding: 6upx 0;
+					word-break: break-all;
 				}
-				.item-detail{
-					.item-detail-info{
-						padding: 10upx 0 4upx;
-						font-size: 24upx;
-						> view{
-							padding-bottom: 20rpx;
-							align-items: center;
-							.item-detail-text{
-								color: #999;
-								margin-left: 20upx;
-							}
+			}
+		}
+		.cpb_body {
+			height: 80vh;
+			.cpb_tab {
+				width: 25%;
+				height: 100%;
+				background-color: #f8f8f8;
+				> div {
+					padding: 30rpx 20rpx;
+					font-size: 24rpx;
+					text-align: center;
+				}
+				.active {
+					background-color: #fff;
+					border-left: 5rpx solid #00aaff;
+				}
+			}
+			.emptyStyle{
+				margin-top:  100rpx;
+				align-items: center !important;
+				margin:160rpx auto 0;
+				/deep/.u-empty{
+					justify-content:flex-start !important;
+				}
+			} 
+		}
+		.cpb_cart-list {
+			width: 75%;
+			height: 100%;
+			padding: 20rpx;
+			overflow: auto;
+			flex-grow: 1;
+			box-sizing: border-box;
+			> view {
+				margin-bottom: 20rpx;
+			}
+			.nav-right-item {
+				padding: 0 20upx 20rpx;
+			}
+			.item-name {
+				font-size: 30rpx;
+				width: 100%;
+				// text{
+				// 	background: rgba(3, 54, 146, 0.15);
+				// 	color: #1c588a;
+				// 	border-radius: 1em;
+				// 	font-size: 0.8em;
+				// 	padding: 0 0.5em;
+				// 	margin-right: 10upx;
+				// }
+			}
+			.item-info {
+				border-bottom: 2rpx solid #eee;
+				flex-grow: 1;
+				padding-left: 20rpx;
+			}
+			.item-detail {
+				.item-detail-info {
+					padding: 10upx 0 4upx;
+					font-size: 24upx;
+					> view {
+						padding-bottom: 20rpx;
+						align-items: center;
+						.item-detail-text {
+							color: #999;
+							margin-left: 20upx;
 						}
 					}
-					.isShelf{
-						color:#ff5500;
-					}
 				}
-				.loadmoreStyle{
-					margin-top:20rpx;
+				.isShelf {
+					color: #ff5500;
 				}
 			}
+			.loadmoreStyle {
+				margin-top: 20rpx;
+			}
 		}
 	}
+}
 </style>