qzw_xcx/pages/myOrder/order.vue

<template>
	<view class="cart-list">
       <view style="padding: 0 36upx;line-height: 70upx;border-bottom: 14upx solid #F5F5F5;">已取消</view>  
	   <view class="adress">
	   		 <view class="adressDetail">156355</view>
	   		 <view>北京大酒店将诶怕</view>
	   </view>
	   <view style="padding: 30upx 36upx 15upx 36upx;border-bottom: 1px solid #F5F5F5;">
		  <image src="" style="width: 50upx;height: 50upx; vertical-align: middle;background-color: #007AFF;"></image>
		  <span style="padding-left: 16upx;">华南酒店</span>
	   </view>
	
	 <view class="shoplist">
			  <view>
				  <van-card
					title-class="changewidth"
					price-class ="priceClass"
					price="10.00"
					desc="描述信息"
					title="商品标题"
					thumb="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"
				  >
				  </van-card>
			  </view>
	 </view>
	 <view class="topTip">
		  <view style="font-size: 28upx;">合计：50</view>
		  <view style="padding-left: 20upx;">运费: 50</view>
	 </view>
	 <view style="padding: 15upx 36upx;">订单编号:<text class="orderCode">DDERKIJGIOSJKGPE</text></view>
	 <view class="adressbottom">
		 <view>下单时间: <text  style="font-weight: 500;" class="time">2552558555</text></view>
		 <view>支付订单: <text class="time">2552558555</text></view>
		 <view>商家发货: <text class="time">2552558555</text></view>
		 <view>确认收货: <text class="time">2552558555</text></view>
	 </view>
	 
	 <!-- 一取消 -->
	<!-- <view  class="adressbutton">
		<button type="default">取消订单</button>
	 </view> -->
	 <!-- 代付款 -->
	 <view  class="adressbutton">
	 		<button size="mini" type="default">取消订单</button>
			<button size="mini" type="warn">去付款</button>
	 </view>
	 
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
			
		    }
	    },
		methods: {
			
		}
	}
</script>
  
<style lang="scss">
		
	page {
		background-color: #F5F5F5;
	}
	.cart-list {
		background-color: #fff;
		
	}
		
	.topTip {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* justify-content: space-between; */
		padding: 20upx 36upx;
		
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
	}
	.priceClass {
		color:#303133!important;
		font-weight: 100!important;
		font-size: 36upx;
	}
	.van-card {
		background-color: #fff!important;
	}
	.shoplist {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.adress {
		padding: 35upx 36upx;
		border-bottom: 14upx solid #F5F5F5;
	}
	.adressDetail {
		padding: 6upx 0;
	}
	.orderCode {
		padding-left: 15upx;
		font-weight: 500;
	}
	.adressbottom {
		padding: 0 36upx;
		color: #606266;
		border-top: 16upx solid #F5F5F5;
		view {
			padding: 14upx 0 28upx 0;
		}
			
		.time {
			padding-left: 16upx;
		}
	}
	.adressbutton {
		position: fixed;
		bottom: 0;
		height: 100upx;
		width: 100%;
		
	}
</style>