<template>
	<view class="">
		<view class="">
			<!-- 顶部 -->
			<view class="tobeWithdrawn">
				<u-navbar :autoBack="true" bgColor="transparent" leftIconColor="#ffffff">
				</u-navbar>
				<!-- 待自提 -->
				<view class="bottomBox flexJ">
					<view class="leftBox">
						<view class="">待自提</view>
						<view class="">快去领取您的商品吧~</view>
					</view>
					<view class="rightBox"><img src="/static/Frame@2x.png" alt=""
							style="width: 112rpx; height: 112rpx;"></view>
				</view>
			</view>
		</view>
		<view class="mainBox">
			<u-read-more textIndent="0em" :toggle="true" color="#34B16B" openText="隐藏商品" closeText="查看更多"
				:shadowStyle="shadowStyle" showHeight="356">
				<view class="commodityBox flexJ" v-for="item in 8">
					<!-- 左边商品图 -->
					<view class="leftoneBox ">
						<img src="/static/ic-tabbar-home-s@2x.png" alt="">
					</view>
					<!-- 右边简介 -->
					<view class="rightoneBox">
						<view class="">乐事薯片美国经典原味135g</view>
						<view class="one">规格规格规格规格规格规格</view>
						<view class="flexJ">
							<view class="flexC">¥288.8</view>
							<view class="two">x3</view>
						</view>
					</view>
				</view>
			</u-read-more>
		</view>
		<view class="mainBox">
			<!-- 商品总价 -->
			<view class="zongjiaBox flexJ">
				<view class="huise">商品总价</view>
				<view class="">¥288.8</view>
			</view>
		</view>
		<view class="mainBox">
			<!-- 订单详情 -->
			<view class="orderDetails">
				<view class="dingdanbianhao flexJ">
					<view class="huise">订单编号</view>
					<view class="flexA">
						<view class="">23123132312213121</view>
						<view class="fuzhi">复制</view>
					</view>
				</view>
				<view class="xiadanshijian flexJ">
					<view class="huise">下单时间</view>
					<view class="">2020-11-11 13:45:12</view>
				</view>
				<view class="zhifufangshi flexJ">
					<view class="huise">支付方式</view>
					<view class="flexA">
						<img src="/static/99.png" alt="" style="width: 40rpx; height: 40rpx;">微信支付
					</view>
				</view>
			</view>
		</view>
		<view class="kong"></view>
		<view class="mainboxbox flexJ">
			<view class=""></view>
			<view class="shoudao flexC">
				已收到
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shadowStyle: {
					width: "686rpx",
					height: "56rpx",
					background: "rgba(214,236,224,1)"
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.mainBox {
		width: 686rpx;
		margin: 0 auto;
		background: #fff;
		margin-top: 32rpx;
	}

	.tobeWithdrawn {
		width: 750rpx;
		height: 380rpx;
		opacity: 1;
		background: linear-gradient(180deg, rgba(50, 54, 71, 1) 0%, rgba(28, 29, 40, 1) 100%);
		position: relative;
		box-sizing: border-box;
		padding: 0 32rpx;
	}

	.bottomBox {
		position: absolute;
		bottom: 48rpx;
		width: 686rpx;

		view:nth-child(1) {
			color: rgba(255, 255, 255, 1);
			font-size: 52rpx;
			font-weight: 700;
			padding-bottom: 16rpx;
		}

		view:nth-child(2) {
			color: rgba(255, 255, 255, 0.55);
			font-size: 26rpx;
		}
	}

	.commodityBox {
		padding: 32rpx 32rpx;
		box-sizing: border-box;
	}

	.leftoneBox {
		img {
			width: 155rpx;
			height: 155rpx;
		}
	}

	.rightoneBox {
		margin-left: 16rpx;
	}

	.one {
		padding: 25rpx 0 20rpx 0;
		color: rgba(0, 0, 0, 0.26);
		font-size: 24rpx;
		font-weight: 400;
	}

	.two {
		color: rgba(0, 0, 0, 0.26);
		font-size: 24rpx;
		font-weight: 400;
	}

	.huise {
		color: rgba(0, 0, 0, 0.4);
		font-size: 28rpx;
		font-weight: 400;
	}

	.zongjiaBox {
		border-radius: 8rpx;
		padding: 32rpx 32rpx;
		margin-top: 20rpx;
		// background-color: #000;
	}

	.orderDetails {
		margin-top: 20rpx;
	}

	.dingdanbianhao {
		padding: 32rpx 32rpx;
	}

	.xiadanshijian {
		padding: 32rpx 32rpx;
	}

	.zhifufangshi {
		padding: 32rpx 32rpx;
	}

	.kong {
		height: 200rpx;
	}

	.fuzhi {
		padding-left: 10rpx;
		color: rgba(52, 177, 107, 1);
		font-size: 28rpx;
		font-weight: 500;
	}
	.mainboxbox {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		margin: 0 auto;
		background: #fff;
		padding: 16rpx 32rpx;
	}
	.shoudao {
		color: #fff;
		margin-right: 66rpx;
		width: 248rpx;
		height: 80rpx;
		border-radius: 8rpx;
		opacity: 1;
		background: linear-gradient(90deg, rgba(70, 196, 125, 1) 0%, rgba(23, 141, 93, 1) 100%);
	}
</style>