<template>
	<view class="content">
		<!-- <view class="header">
			<view class="header-name">
				<navigator open-type="navigateBack"  hover-class="navigator-hover">
					<image src="/static/back.png"></image>
				</navigator>
				<text>我的订单</text>
			</view>
		</view> -->
		<scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }">
			<view class="order-hr"></view>
			<view class="order-time">
				<text>请在</text>
				<text class="p2">00:59:58 </text>
				<text>内完成付款</text>
			</view>
			<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">四川省 德阳市 旌阳区</br>黄河西路碧桂园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>
						<text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text>
						<text class="p3">￥180</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>
		</scroll-view>
		<view class="order-confim">
			<button class="b1">取消订单</button>
			<button class="b2">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: false,
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.header{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 44px;
		position: fixed;
		top: 0;
		z-index: 999;
		background-color: #fff;
		.header-name{
			display: flex;
			align-items: center;
			width: 670rpx;
			image {
				width: 11px;
				height: 18px;
			}
			text {
				// font-family: PingFangSC-Regular;
				font-size: 36rpx;
				color: #333333;
				letter-spacing: -0.34px;
                margin: 0 0 10rpx 54rpx;
			}
		}
	}
	
	.scroll-view {
		// height: 1760rpx; // 测试
		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;
				}
				.p1 {
					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;
				}
			}

		}
		.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>