<template>
  <view class="wrap">
		<view class="top">
			<view class='top-one'>
				<view class="top-one-first">
					<u-icon name="map-fill" color="#FC6703" size='40'></u-icon>
				</view>
				
				<view class="top-one-two">
					取件地址
				</view>
				
				<view class="top-one-last">
					现场取件
					<u-icon name="arrow-right" color="#666666"></u-icon>
				</view>
			</view>
			
			<view class="top-two">
				<view class="top-two-first">
					
				</view>
				
				<view class="top-two-last">
					<view>重庆市渝中区长江索道南站观景台旁</view>
					<view>15808046328</view>
				</view>
			</view>
			
			<view class="top-three">
				<view class="top-three-first">
					<u-icon name="plus-circle-fill" color="#FC6703" size='40'></u-icon>
				</view>
				
				<view class="top-three-two">
					支持多个收货地址
				</view>
				
				<view class="top-three-last">
					去修改
					<u-icon name="arrow-right" color="#666666"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="middle">
			<view class="middle-list" v-for="(item,index) in 3" :key='index'>
				<view class="list-title">
					云相册
				</view>
				<view class="product-list" v-for="(item,a) in 2" :key='a'>
					<view class="product-left">
						<image src="../static/album/custom.png"></image>
					</view>
					
					<view class="product-right">
						<view class="product-number">
							<text>
								单张照片
							</text>
							<text>
								x1
							</text>
						</view>
						
						<view class="product-price">
							<text style="font-size: 32rpx;">¥</text>
							20
						</view>
						
						<view class="product-download">
							<text>下载/打印</text>
							<u-icon name="arrow-right" color="#666666"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view>
				商品合计
				<text class="bottom-price">
					<text style="font-size: 28rpx;">¥</text>100
				</text>
			</view>
			<text class="big-btn">
				提交订单
			</text>
		</view>
	</view>
</template>

<script>
export default {
  data() {
   
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
	.wrap{
		padding: 24rpx;
	}
	.top{
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
	}
	.top-one{
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		align-items: center;
	}
	.top-one-first{
		width: 70rpx;
	}
	.top-one-two{
		flex: 1;
	}
	.top-one-last{
		display: flex;
	}
	.top-two{
		display: flex;
		color: #666666;
	}
	.top-two-first{
		width: 70rpx;
	}
	.top-two-last view{
		margin-top: 10rpx;
	}
	.top-three{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.top-three-first{
		width: 70rpx;
	}
	.top-three-two{
		flex: 1;
	}
	.top-three-last{
		display: flex;
	}
	.middle{
		padding-bottom:24rpx 24rpx 120rpx 24rpx;
	}
	.middle-list{
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 24rpx;
	}
	.list-title{
		font-weight: bold;
	}
	.product-list{
		margin: 20rpx 0;
		display: flex;
	}
	.product-left{
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}
	.product-left image{
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
	}
	.product-right{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.product-number{
		display: flex;
		justify-content: space-between;
		font-weight: bold;
	}
	.product-price{
		color: $red;
		font-size: 36rpx;
		font-weight: bold;
	}
	.product-download{
		background:#F7F7F7;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
		height: 56rpx;
		align-items: center;
		padding: 0 20rpx;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 1;
		padding: 0 24rpx;
	}
	.bottom-price{
		color: $red;
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
	.big-btn{
		border-radius: 40rpx;
		width: 200rpx;
		height: 80rpx;
		font-size: 32rpx;
		line-height: 80rpx;
	}
	
</style>