样式修改

pages/album/albumComponets/compometsBuy.vue

 <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 style="height: 200rpx;"></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>
 		</view>
 	</view>
 </template>
 
 <script>
+export default {
+  name: 'comA',
+  props:{
+  },
+  data() {
+    return {
+      printNum:1,//打印份数
+    }
+  },
+  methods:{
+			
+  },
+  options: {
+    styleIsolation: 'shared', // 解除样式隔离
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -44,5 +99,135 @@
 			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__minus,
+		/deep/ .u-number-box__plus{
+			width: 40rpx;
+			height: 40rpx !important;
+			background-color: #F7F7F7;
+		}
 	}
 </style>
\ No newline at end of file