<template>

	<view class="content">		
		<view class="order-hr"></view>
		<view class="order-time">
			<text>请在</text>
			<!-- <text class="p2"></text> -->
			<uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" 
			:hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> 
			<text>内完成付款</text>
		</view>
		<view class="order">
			<view class="order-user">
				<view class="order-user-head">
					<text class="p1">钱大大</text>
					<text class="p2">18823749843</text>
				</view>
				<view class="order-user-body">	
					<image src="../../static/myorder-paying-location.png"></image>
					<text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text>
				</view>
			</view>
			<view class="order-info">
				<view class="order-info-head">
					<image src="../../static/myorder-paying-pic.png"></image>
					<view class="order-info-head-r">
						<text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
						<view class="p2" style="margin: 0;">
							规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
							<!-- <view class="arrow"></view> -->
						</view>
						<text class="p3"><span>￥180</span><span class="p4">X1</span></text>
					</view>
				</view>
<!-- 				<view class="order-info-goodsnum">
					<text>X1</text>
				</view> -->
				<text class="order-info-freight">
					<text class="p1">运费</text>
					<text class="p2">0.00</text>
				</text>
				<text class="order-info-discount">
					<text class="p1">优惠</text>
					<text class="p2">-￥70.00</text>
				</text>
				<text class="order-info-price">
					<text class="p1">实付</text>
					<text class="p2">￥110</text>
				</text>
				<text class="order-info-num">
					<text>订单号：203486795859605849</text>
				</text>
				<text class="order-info-time">
					<text>下单时间：2020-10-22  14:32:42</text>
				</text>
				<view class="order-info-hr"></view>
				<view class="order-info-contact">
					<image src="../../static/myorder-paying-contact.png"></image>
					<text>联系客服</text>
				</view>
			</view>
		</view>
		<view class="order-confim">
			<button class="b1">取消订单</button>
			<button class="b2">立即支付</button>
		</view>
	</view>
</template>

<script>
	import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
	export default {
		components: {
			UniCountdown
		},
		data() {
			return {
				scrollHeight: false,
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f2f2f2;
	}
	
	
	.order {
		min-height: 1196rpx;
		margin-bottom: 112rpx;
		background: #F2F2F2;
	}
	.order-hr {
		width: 100%;
		height: 1px;
		background-color: #E9E9E9;
	}
	.order-time {
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		text {
			// font-family: PingFangSC-Regular;
			margin-top: 48rpx;
			font-size: 14px;
			color: #333333;
			letter-spacing: -0.26px;
		}
		.p2 {
			// font-family: DINAlternate-Bold;
			margin: 42rpx 20rpx 0 20rpx;
			font-size: 18px;
			color: #EC5D3B;
			letter-spacing: -0.34px;
		}
	}
	
	.order-user {
		width: 670rpx;
		height: 228rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		.order-user-head {
			display: flex;
			height: 108rpx;
			width: 100%;
			align-items: center;
			margin-left: 126rpx;
			.p1 {
				// font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				margin-right: 20rpx;
			}
			.p2 {
				// font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #999999;
				letter-spacing: -0.26px;
			}
		}
		.order-user-body {
			display: flex;
			width: 100%;
			image{
				width: 24px;
				height: 26px;
				margin: 12rpx 32rpx 0 40rpx;
			}
			.p3 {
				// font-family: PingFangSC-Semibold;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
			}
		}
	}
	
	.order-info {
		width: 670rpx;
		background-color: #fff;
		box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
		border-radius: 16rpx;
		margin: 0 auto;
		view{
			margin-left: 40rpx;
		}
		text{
			font-size: 14px;
		}
		.order-info-head {
			display: flex;
			padding-top: 40rpx;
			image{
				height: 188rpx;
				width: 188rpx;
			}
			.order-info-head-r{
				margin: 0;
				width: 368rpx;
				margin-left: 24rpx;
				// margin-top: 40rpx;
				text{
					display: block;
				}
				// .arrow{
				// width: 0;
				// height: 0;
				// border-left: 5px transparent;
				// border-right: 5px transparent;
				// border-top: 5px #979797;
				// border-bottom: 0 transparent;
				// border-style: solid;
				// position: relative;
				// // transform: scaleY(-1);
				// }
				// .arrow::after{
				//     content: '';
				//     position: absolute;
				//     top: -6.5px;
				//     left: -5px;
				// 	border-left: 5px transparent;
				// 	border-right: 5px transparent;
				// 	border-top: 5px #FFFFFF;
				// 	border-bottom: 0 transparent;
				// 	border-style: solid;
				// }
				.p1 {
					min-height: 40px;
					// font-family: PingFangSC-Regular;
					font-size: 14px;
					color: #333333;
					letter-spacing: -0.26px;
					line-height: 18px;
					// line-height: 20px;
				}
				.p2 {
					height: 34px;
					padding: 1px 0 3px 0;
					// font-family: PingFangSC-Regular;
					font-size: 12px;
					color: #999999;
					letter-spacing: -0.23px;
				}
				.p3 {
					height: 20px;
					// font-family: PingFangSC-Regular;
					font-size: 14px;
					color: #FF6B4A;
					letter-spacing: -0.26px;
				}
				.p4{
					font-size: 12px;
					color: #999999;
					letter-spacing: -0.23px;
					margin-left: 10px;
				}
			}

		}
		// .order-info-goodsnum {
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: flex-end;
		// 	text {
		// 		margin-right: 44rpx;
		// 		// ont-family: PingFangSC-Regular;
		// 		font-size: 12px;
		// 		color: #999999;
		// 		letter-spacing: -0.23px;
		// 	}
		// }
		.order-info-freight {
			display: block;
			margin-left: 40rpx;
			margin-top: 22rpx;
			.p1{
				// font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				line-height: 18px;
				margin-right: 24px;
			}
			.p2 {
				// font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #FF6B4A;
				letter-spacing: -0.26px;
			}
		}
		.order-info-discount {
			display: block;
			margin-left: 40rpx;
			margin-top: 24rpx;
			.p1 {
				// font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				line-height: 18px;
				margin-right: 24px;
			}
			.p2 {
				// font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #FF6B4A;
				letter-spacing: -0.26px;
			}
		}
		.order-info-price {
			display: block;
			margin-left: 40rpx;
			margin-top: 24rpx;
			.p1 {
				// font-family: PingFangSC-Semibold;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				line-height: 18px;
				margin-right: 24px;
			}
			.p2 {
				// font-family: PingFangSC-Semibold;
				font-size: 14px;
				color: #FF6B4A;
				letter-spacing: -0.26px;
			}
		}
		.order-info-num{
			display: block;
			margin-left: 40rpx;
			margin-top: 44rpx;
			text{
				// font-family: PingFangSC-Regular;
				font-size: 12px;
				color: #999999;
				letter-spacing: -0.23px;
			}
		}
		.order-info-time {
			display: block;
			margin: 8rpx 0 48rpx 40rpx;
			text{
				// font-family: PingFangSC-Regular;
				font-size: 12px;
				color: #999999;
				letter-spacing: -0.23px;
			}
		}
		.order-info-hr{
			width: 520rpx;
			height: 1px;
			background-color: #E9E9E9;
			margin-bottom: 20rpx;
		}
		.order-info-contact {
			display: flex;
			padding-bottom: 28rpx;
			image{
				width: 19px;
				height: 16px;
			}
			text {
				// font-family: PingFangSC-Regular;
				margin-left: 20rpx;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				line-height: 18px;
			}
		}
	}
	
	.order-confim {
		display: flex;
		align-items: center;
		z-index: 999;
		width: 100%;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		button {
			width: 204rpx;
			height: 80rpx;
			border: 1px solid #FF6B4A;
			border-radius: 40rpx;
			font-size: 32rpx;
			letter-spacing: -0.3px;
			margin-right: 0;
		}
		.b1 {
			// font-family: PingFangSC-Regular;
			color: #FF6B4A;
			
		}
		.b2 {
			// font-family: PingFangSC-Regular;
			background-color: #FF6B4A;
			color: #FFFFFF;
			margin: 0 26rpx 0 20rpx;
		}
	}
	
</style>
