|  | @@ -0,0 +1,363 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
 | 
	
		
			
				|  |  | +	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
 | 
	
		
			
				|  |  | +		<!-- 头部 -->
 | 
	
		
			
				|  |  | +		<!-- 	<u-navbar title="酒店民宿订单" :leftIconSize="36" bgColor="#ffffff" leftIconColor="#333333" :titleStyle="titleStyle"
 | 
	
		
			
				|  |  | +			@leftClick="returnBack"></u-navbar> -->
 | 
	
		
			
				|  |  | +		<c-nav-bar title="我的订单"></c-nav-bar>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		<TopTabs :list="list" @changeTab="changeTab" :top="mt" :placeholder="'输入关键字'" @sousuo="sousuo"></TopTabs>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		<view class="list">
 | 
	
		
			
				|  |  | +			<view v-for="(item,index) in orderList" :key="index" cc v-if="FormData.orderStatus==item.orderStatus"
 | 
	
		
			
				|  |  | +				@click.stop="orderDeatils(item)">
 | 
	
		
			
				|  |  | +				<view class="item">
 | 
	
		
			
				|  |  | +					<text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
 | 
	
		
			
				|  |  | +					<text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
 | 
	
		
			
				|  |  | +					<text class="status s2" v-if="item.orderStatus=='-2'">待付款</text>
 | 
	
		
			
				|  |  | +					<text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
 | 
	
		
			
				|  |  | +					<text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
 | 
	
		
			
				|  |  | +					<text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					<view class="head">
 | 
	
		
			
				|  |  | +						<!-- <image src="../../../static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
 | 
	
		
			
				|  |  | +						<!-- <image src="../../../static/scenicSpots/ticketIcon.png" v-else></image> -->
 | 
	
		
			
				|  |  | +						<image src="../../../static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
 | 
	
		
			
				|  |  | +						<image src="../../../static/my/jd_ms.png" mode="" v-else></image>
 | 
	
		
			
				|  |  | +						<text>酒店民宿</text>
 | 
	
		
			
				|  |  | +					</view>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					<view class="mid">
 | 
	
		
			
				|  |  | +						<view class="name" :class="item.orderStatus=='-3'?'disabled':''">{{item.homestayName}}</view>
 | 
	
		
			
				|  |  | +						<view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
 | 
	
		
			
				|  |  | +						<view class="des">{{item.houseBaseName}}</view>
 | 
	
		
			
				|  |  | +					</view>
 | 
	
		
			
				|  |  | +					<view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					<view class="btns">
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==1">
 | 
	
		
			
				|  |  | +							<view @click.stop="toStatus0(item)">
 | 
	
		
			
				|  |  | +								取消
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +							<!-- 	<view @click.stop="GoRefund(item)">
 | 
	
		
			
				|  |  | +								申请退订
 | 
	
		
			
				|  |  | +							</view> -->
 | 
	
		
			
				|  |  | +							<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								再次预订
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==-2">
 | 
	
		
			
				|  |  | +							<view @click.stop="toStatus0(item)">
 | 
	
		
			
				|  |  | +								取消
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +							<view @click.stop="GoToPay(item)" style="color: #0DBFFD;">
 | 
	
		
			
				|  |  | +								去支付
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==3||item.orderStatus==2">
 | 
	
		
			
				|  |  | +							<!-- 	<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								删除
 | 
	
		
			
				|  |  | +							</view> -->
 | 
	
		
			
				|  |  | +							<view @click.stop="toEvaluate(item)">
 | 
	
		
			
				|  |  | +								评价
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +							<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								再次预订
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==5||item.orderStatus==4">
 | 
	
		
			
				|  |  | +							<!-- 	<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								删除
 | 
	
		
			
				|  |  | +							</view> -->
 | 
	
		
			
				|  |  | +							<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								再次预订
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==-1">
 | 
	
		
			
				|  |  | +							<view @click.stop="GoRefund(item)">
 | 
	
		
			
				|  |  | +								取消
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +							<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								再次预订
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					</view>
 | 
	
		
			
				|  |  | +				</view>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +			<view v-else @click.stop="orderDeatils(item)">
 | 
	
		
			
				|  |  | +				<view class="item">
 | 
	
		
			
				|  |  | +					<text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
 | 
	
		
			
				|  |  | +					<text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
 | 
	
		
			
				|  |  | +					<text class="status s2" v-if="item.orderStatus=='-2'">待付款</text>
 | 
	
		
			
				|  |  | +					<text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
 | 
	
		
			
				|  |  | +					<text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
 | 
	
		
			
				|  |  | +					<text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					<view class="head">
 | 
	
		
			
				|  |  | +						<!-- <image src="../../../static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
 | 
	
		
			
				|  |  | +						<!-- <image src="../../../static/scenicSpots/ticketIcon.png" v-else></image> -->
 | 
	
		
			
				|  |  | +						<image src="../../../static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
 | 
	
		
			
				|  |  | +						<image src="../../../static/my/jd_ms.png" mode="" v-else></image>
 | 
	
		
			
				|  |  | +						<text>酒店民宿</text>
 | 
	
		
			
				|  |  | +					</view>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					<view class="mid">
 | 
	
		
			
				|  |  | +						<view class="name" :class="item.orderStatus=='0'?'disabled':''">{{item.homestayName}}</view>
 | 
	
		
			
				|  |  | +						<view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
 | 
	
		
			
				|  |  | +						<view class="des">{{item.houseBaseName}}</view>
 | 
	
		
			
				|  |  | +					</view>
 | 
	
		
			
				|  |  | +					<view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					<view class="btns">
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==1">
 | 
	
		
			
				|  |  | +							<view @click.stop="toStatus0(item)">
 | 
	
		
			
				|  |  | +								取消
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +							<!-- 	<view @click.stop="GoRefund(item)">
 | 
	
		
			
				|  |  | +								申请退订
 | 
	
		
			
				|  |  | +							</view> -->
 | 
	
		
			
				|  |  | +							<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								再次预订
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==-2">
 | 
	
		
			
				|  |  | +							<view @click.stop="toStatus0(item)">
 | 
	
		
			
				|  |  | +								取消
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +							<view @click.stop="GoToPay(item)" style="color: #0DBFFD;">
 | 
	
		
			
				|  |  | +								去支付
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==3||item.orderStatus==2">
 | 
	
		
			
				|  |  | +							<!-- 	<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								删除
 | 
	
		
			
				|  |  | +							</view> -->
 | 
	
		
			
				|  |  | +							<view @click.stop="toEvaluate(item)">
 | 
	
		
			
				|  |  | +								评价
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +							<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								再次预订
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==5||item.orderStatus==4">
 | 
	
		
			
				|  |  | +							<!-- 	<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								删除
 | 
	
		
			
				|  |  | +							</view> -->
 | 
	
		
			
				|  |  | +							<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								再次预订
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +						<template v-if="item.orderStatus==-1">
 | 
	
		
			
				|  |  | +							<view @click.stop="GoRefund(item)">
 | 
	
		
			
				|  |  | +								取消
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +							<view @click.stop="applyAfterSales(item)">
 | 
	
		
			
				|  |  | +								再次预订
 | 
	
		
			
				|  |  | +							</view>
 | 
	
		
			
				|  |  | +						</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					</view>
 | 
	
		
			
				|  |  | +				</view>
 | 
	
		
			
				|  |  | +				<!-- <view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view> -->
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +		</view>
 | 
	
		
			
				|  |  | +		<!-- <view class="tip"> -->
 | 
	
		
			
				|  |  | +		<!-- {{orderList.length>0?'已显示全部订单':'暂无订单'}} -->
 | 
	
		
			
				|  |  | +		<!-- <nodata v-if="orderList.length === 0"></nodata> -->
 | 
	
		
			
				|  |  | +		<!-- </view> -->
 | 
	
		
			
				|  |  | +		<!-- 取消弹框 -->
 | 
	
		
			
				|  |  | +		<!-- <u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定'
 | 
	
		
			
				|  |  | +			confirmColor='#0cbffd' @confirm="confirm" @cancel='cancel'></u-modal> -->
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		<!-- <u-toast ref="uToast"></u-toast> -->
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	</view>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +	// import nodata from '@/compoments/NoData/index.vue'
 | 
	
		
			
				|  |  | +	// import TopTabs from '@/compoments/TopTabs/topTabs.vue';
 | 
	
		
			
				|  |  | +	export default {
 | 
	
		
			
				|  |  | +		components: {
 | 
	
		
			
				|  |  | +			// TopTabs,
 | 
	
		
			
				|  |  | +			// nodata
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		data() {
 | 
	
		
			
				|  |  | +			return {
 | 
	
		
			
				|  |  | +				// mt: uni.getSystemInfoSync().statusBarHeight + 44,
 | 
	
		
			
				|  |  | +				h: uni.getSystemInfoSync().windowHeight,
 | 
	
		
			
				|  |  | +				mt: uni.getSystemInfoSync().statusBarHeight + 44,
 | 
	
		
			
				|  |  | +				titleStyle: {
 | 
	
		
			
				|  |  | +					fontSize: '36rpx',
 | 
	
		
			
				|  |  | +					fontWeight: "bold",
 | 
	
		
			
				|  |  | +					color: "#333333"
 | 
	
		
			
				|  |  | +				},
 | 
	
		
			
				|  |  | +				list: [{
 | 
	
		
			
				|  |  | +					name: '全部'
 | 
	
		
			
				|  |  | +				}, {
 | 
	
		
			
				|  |  | +					name: '待付款'
 | 
	
		
			
				|  |  | +				}, {
 | 
	
		
			
				|  |  | +					name: '待使用'
 | 
	
		
			
				|  |  | +				}, {
 | 
	
		
			
				|  |  | +					name: '退款'
 | 
	
		
			
				|  |  | +				}],
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		onLoad() {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		onReachBottom() {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		methods: {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style lang="less">
 | 
	
		
			
				|  |  | +	.orderList {
 | 
	
		
			
				|  |  | +		box-sizing: border-box;
 | 
	
		
			
				|  |  | +		background-color: #fff;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		.u-tabs__wrapper__nav__line {
 | 
	
		
			
				|  |  | +			// left: 20rpx !important
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	.u-button {
 | 
	
		
			
				|  |  | +		height: 60rpx !important;
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	.tip {
 | 
	
		
			
				|  |  | +		width: 100%;
 | 
	
		
			
				|  |  | +		text-align: center;
 | 
	
		
			
				|  |  | +		font-size: 24rpx;
 | 
	
		
			
				|  |  | +		font-family: PingFangSC-Regular, PingFang SC;
 | 
	
		
			
				|  |  | +		font-weight: 400;
 | 
	
		
			
				|  |  | +		color: #AAAAAA;
 | 
	
		
			
				|  |  | +		line-height: 33rpx;
 | 
	
		
			
				|  |  | +		margin: 56rpx 0;
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +</style>
 | 
	
		
			
				|  |  | +<style lang="scss">
 | 
	
		
			
				|  |  | +	page {
 | 
	
		
			
				|  |  | +		background-color: #F5F8FA;
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	.disabled {
 | 
	
		
			
				|  |  | +		color: #AAA !important
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	.list {
 | 
	
		
			
				|  |  | +		padding: 0 24rpx;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		.item {
 | 
	
		
			
				|  |  | +			background-color: #fff;
 | 
	
		
			
				|  |  | +			margin-top: 20rpx;
 | 
	
		
			
				|  |  | +			border-radius: 16rpx;
 | 
	
		
			
				|  |  | +			padding: 36rpx 24rpx 0;
 | 
	
		
			
				|  |  | +			position: relative;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.status {
 | 
	
		
			
				|  |  | +				right: 24rpx;
 | 
	
		
			
				|  |  | +				top: 40rpx;
 | 
	
		
			
				|  |  | +				font-size: 26rpx;
 | 
	
		
			
				|  |  | +				color: #AAA;
 | 
	
		
			
				|  |  | +				position: absolute;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				&.s2 {
 | 
	
		
			
				|  |  | +					color: #FF7D01;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				&.s3 {
 | 
	
		
			
				|  |  | +					color: #01B9F9
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.head {
 | 
	
		
			
				|  |  | +				color: #111;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				image {
 | 
	
		
			
				|  |  | +					width: 36rpx;
 | 
	
		
			
				|  |  | +					height: 36rpx;
 | 
	
		
			
				|  |  | +					margin-right: 20rpx;
 | 
	
		
			
				|  |  | +					vertical-align: middle;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				text {
 | 
	
		
			
				|  |  | +					vertical-align: middle;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.mid {
 | 
	
		
			
				|  |  | +				padding: 24rpx 50rpx 40rpx 56rpx;
 | 
	
		
			
				|  |  | +				border-bottom: 1rpx solid #EFEFEF;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.name {
 | 
	
		
			
				|  |  | +					font-size: 32rpx;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.date {
 | 
	
		
			
				|  |  | +					margin: 30rpx 0;
 | 
	
		
			
				|  |  | +					color: #AAAAAA;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.des {
 | 
	
		
			
				|  |  | +					color: #AAAAAA;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.btns {
 | 
	
		
			
				|  |  | +				display: flex;
 | 
	
		
			
				|  |  | +				align-items: center;
 | 
	
		
			
				|  |  | +				justify-content: flex-end;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				&>view {
 | 
	
		
			
				|  |  | +					// margin: 24rpx 0 0 24rpx;
 | 
	
		
			
				|  |  | +					margin: 24rpx;
 | 
	
		
			
				|  |  | +					width: 148rpx;
 | 
	
		
			
				|  |  | +					height: 56rpx;
 | 
	
		
			
				|  |  | +					border: 1rpx solid #EFEFEF;
 | 
	
		
			
				|  |  | +					border-radius: 28rpx;
 | 
	
		
			
				|  |  | +					line-height: 56rpx;
 | 
	
		
			
				|  |  | +					text-align: center;
 | 
	
		
			
				|  |  | +					font-size: 24rpx;
 | 
	
		
			
				|  |  | +					font-family: PingFangSC-Regular, PingFang SC;
 | 
	
		
			
				|  |  | +					font-weight: 400;
 | 
	
		
			
				|  |  | +					color: #333333;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.price {
 | 
	
		
			
				|  |  | +				position: absolute;
 | 
	
		
			
				|  |  | +				right: 24rpx;
 | 
	
		
			
				|  |  | +				bottom: 144rpx;
 | 
	
		
			
				|  |  | +				font-size: 32rpx;
 | 
	
		
			
				|  |  | +				color: #111;
 | 
	
		
			
				|  |  | +				font-weight: 600;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	.ml12 {
 | 
	
		
			
				|  |  | +		height: 56rpx;
 | 
	
		
			
				|  |  | +		width: 148rpx;
 | 
	
		
			
				|  |  | +		line-height: 56rpx;
 | 
	
		
			
				|  |  | +		display: inline-block;
 | 
	
		
			
				|  |  | +		margin-left: 24rpx;
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +</style>
 |