<template>
	<view class="compomets-mask">
		<view class="compomets-frame">
			<!--头部-->
			<view class="compomets-title">
				<!--关闭-->
				<view class="title-close">
					<uni-icons type="closeempty" size="28"></uni-icons>
				</view>
				<!--照片信息-->
				<view class="title-message">
					<view class="message-photo">
						<!--照片-->
						<image src="../static/album/myVlog.png"></image>
						<!--放大-->
						<image src="../static/album/icon04.png"></image>
					</view>
					<view class="message-other">
						<view class="other-name">单照片</view>
						<view class="other-buys">
							<view class="buys-money">
								<text>¥</text>
								<text>20</text>
							</view>
							<view class="buys-inNum">x1</view>
						</view>
					</view>
				</view>
			</view>
			<!--选择套餐-->
			<view class="compomets-setMeal">
				<view class="setMeal-label">选择套餐</view>
				<view class="setMeal-list setMeal-listAct">
					<view class="list-name">下载/打印/相框(金属)</view>
					<view class="list-unitPrice">¥30</view>
				</view>
				<view class="setMeal-list">
					<view class="list-name">下载/打印/相框(金属)</view>
					<view class="list-unitPrice">¥30</view>
				</view>
			</view>
			<!--信息填写-->
			<view class="compomets-from">
				<view class="compomets-commonBox">
					<view class="commonBox-name">打印份数</view>
					<u-number-box v-model="printNum"></u-number-box>
				</view>
				<view class="compomets-commonBox">
					<view class="commonBox-name">取件方式</view>
					<view class="commonBox-pickUp">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  name: 'comA',
  props:{
  },
  data() {
    return {
      printNum:1,//打印份数
    }
  },
  methods:{
			
  },
}
</script>

<style scoped lang="scss">
	.compomets-mask{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		background-color: rgba(0,0,0,.3);
	}
	.compomets-frame{
		width: 100%;
		max-height: 80vh;
		background: #F7F8FA;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		overflow: auto;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.compomets-title{
		background-color: #fff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 64rpx 44rpx 40rpx 40rpx;
		position: relative;
		.title-close{
			position: absolute;
			top: 18rpx;
			right: 18rpx;
		}
		.title-message{
			display: flex;
			
			.message-photo{
				width: 160rpx;
				height: 160rpx;
				position: relative;
				image:nth-child(1){
					display: block;
					width: 160rpx;
					height: 160rpx;
				}
				image:nth-child(2){
					display: block;
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
				}
			}
			.message-other{
				display: flex;
				flex-direction:column;
				justify-content: space-between;
				flex: 1;
				padding-left: 20rpx;
				.other-name{
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					line-height: 28rpx;
					padding-top: 12rpx;
				}
				.other-buys{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.buys-money{
						display: flex;
						font-weight: 600;
						color: #FF7D00;
						line-height: 28rpx;
						text:nth-child(1){
							font-size: 28rpx;
						}
						text:nth-child(2){
							font-size: 36rpx;
						}
					}
					.buys-inNum{
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.compomets-setMeal{
		background-color: #fff;
		padding: 0 0 40rpx 40rpx;
		margin-bottom: 20rpx;
		.setMeal-label{
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			margin-bottom: 30rpx;
		}
		.setMeal-list{
			display: flex;
			justify-content: space-between;
			width: 580rpx;
			height: 56rpx;
			background: #F7F7F7;
			border-radius: 8rpx;
			border: 2rpx solid #F7F7F7;
			font-weight: 600;
			font-size: 24rpx;
			line-height: 52rpx;
			padding: 0 20rpx 0 24rpx;
			margin-bottom: 24rpx;
			.list-name{
				color: #333333;
			}
			.list-unitPrice{
				color: #999999;
			}
		}
		.setMeal-list:nth-last-child(1){
			margin-bottom: 0;
		}
		.setMeal-listAct{
			background: #FFF2E9;
			border: 2rpx solid #FE6600;
			.list-name,
			.list-unitPrice{
				color: #FE6600;
			}
		}
	}
	.compomets-commonBox{//公共框
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		padding-left: 40rpx;
		border-bottom: solid 2rpx #EDEDED;
		.commonBox-name{
			width: 130rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
			padding-top: 22rpx;
		}
	}
	.compomets-from{
		margin-bottom: 20rpx;
		.compomets-commonBox:nth-last-child(1){
			border-bottom: none;
		}
		/deep/ .u-number-box{
			margin-right: 38rpx;
		}
		/deep/ .u-number-box__minus,
		/deep/ .u-number-box__plus{
			width: 40rpx !important;
			height: 40rpx !important;
			background-color: #F7F7F7;
		}
		/deep/ .u-number-box__input{
			width: 56rpx !important;
			background-color: #fff !important;
		}
		
	}
</style>