photo_uniapp/pagesA/color/index.vue

<template>
	<view class="container">
		<view class="uploadBox">
			<view class="uploadBtn">
				<view class="uploadBtn_img">
					 <image src="/static/img/index/add.png" mode="widthFix"></image>
				</view>
				<view class="uploadBtn_txt">点击上传人物换背景</view>
			</view>	
		</view>
		<view class="uploadTips" @click="tips">
			<text>照片注意事项</text> <image src="/static/img/index/tips.png" mode="widthFix"></image>
		</view>
		
		<view class="colorBox">
			 <view class="title">选择背景颜色</view>   
			 <scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="0">
				 <view class="color on" style="background-color: blue;">
					 <image src="/static/img/index/duigou.png" mode="widthFix"></image>
				 </view>
				 <view class="color" style="background-color:green;">
				 </view>
				 <view class="color" style="background-color:greenyellow;">
				 </view>
				 <view class="color" style="background-color:darkred;">
				 </view>
				 <view class="color" style="background-color:red;">
				 </view>
				 <view class="color" style="background-color: blueviolet;">
				 </view>
				 <view class="color" style="background-color: yellowgreen;">
				 </view>
							<view class="color" style="background-color:green;">
							</view>
							<view class="color" style="background-color:greenyellow;">
							</view>
							<view class="color" style="background-color:darkred;">
							</view>
							<view class="color" style="background-color:red;">
							</view>
			 </scroll-view>	
			  
			 <view class="btnBox no">
				 保存
			 </view>
			 <view class="btnBox yes">
			 	保存
			 </view>
			 <view class="num">
				 <text>剩余生成次数</text>
				 <text class="use">1</text>
				 <text>/30</text>
			 </view>		   
		</view>
			
			
		<u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
		            <view class="popupBox">
		                <view class="popupTop">
							提醒
						</view>
						<view class="popupDesc">
							<u-parse :content="content" :tagStyle="style"></u-parse>
							
						</view>
						<view class="popupBtn">
							<view class="sbtnBox a3" @click="yes">我了解啦</view>
						</view>
		            </view>
		</u-popup>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//弹窗
				show: false,
				content: `<p>1.人物需抬头挺胸，两眼平视前方</p>
							<p>2.人物应去掉发饰，眼镜，露出双耳</p>
							<p>3.深色衣服，白色背景墙效果更佳</p>
							<p>4.请使用后置摄像头拍摄，效果更佳</p>`,
				style: {
							// 字符串的形式
	
							p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
						
					 },

		
			}
		},
		methods: {
			//滚动监控
			scroll1(e) {
				console.log(e);
			},
			//弹窗
			tips(){
				 this.show = true;
			},
			
			open() {
			   console.log('open');
			},
			close() {
			   this.show = false;
			
			},
			yes(){
				this.close();
			},
		}
	}
</script>

<style lang="scss">
page{background-color: #F5F6FB;}
.container{width: 100%;}
.uploadBox{
	width: 400rpx;
	height: 500rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	margin:200rpx auto auto auto;
}
.uploadBtn{ width: 100%; height: auto;}
.uploadBtn_img{ width: 100%; height: auto; text-align: center;}
.uploadBtn_img image{ width: 96rpx; height: 96rpx; margin: 160rpx auto auto auto; display: inline-block;}
.uploadBtn_txt{
	width: 100%; 
	height: auto;
	font-weight: 400;
	font-size: 30rpx;
	color: #333333;
	line-height: 44rpx;
	text-align: center;
}
.uploadTips{ width: 100%; height: 50rpx; line-height: 50rpx; text-align: center;}
.uploadTips text{
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
}
.uploadTips image{ width: 24rpx; height: 24rpx; display: inline-block; margin-left: 10rpx;}

.colorBox{
	width: 750rpx;
	height: 520rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	position: fixed;
	bottom: 0;
}
.title{
	width: 100%;
	height: 40rpx;
	font-weight: 700;
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
	text-align: center;
	margin: 20rpx 0rpx;
}

.scrollBox {
 	margin-top: 20rpx;
 	width: 100%;
 	height: 90rpx;
 	white-space: nowrap;
 	
 }
.color{
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	display: inline-block;
	margin-left: 30rpx;
	border: 8rpx solid #FFFFFF;
	overflow: hidden;
}
.on{
	border-color:#E7E7EF;
 }
.on image{width: 50rpx; height:auto; margin: 12rpx 0rpx 0rpx 12rpx;}


.popupBox{
	width: 600rpx;
	height: auto;
	border-radius: 24rpx;
	background-color: #FFFFFF;
}
.popupTop{
	width: 600rpx;
	height: 140rpx;
	background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	line-height: 140rpx;
	text-align: center;
	font-weight: 700;
	font-size: 30rpx;
	color: #333333;
}
.popupDesc{
	width:480rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #555555;
	padding: 0rpx 60rpx;
}

.popupBtn{ width: 100%; height: auto;
    display: flex; flex-wrap: wrap;
	justify-content: space-around; /* 使子元素在容器中均匀分布 */
	align-items: center; /* 如果需要垂直居中子元素 */
}
.sbtnBox{
	margin: 30rpx auto;
	width: 478rpx;
	height: 80rpx;
	font-weight: 700;
	font-size: 30rpx;
	line-height: 80rpx;
	border: 2rpx solid #4D94FF;
	text-align: center;
	border-radius: 44rpx;
	
	
}

.a3{
	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
	color:#FFFFFF;
}


.btnBox{
	width: 702rpx;
	height: 88rpx;
	border-radius: 44rpx;
	
	font-weight: 700;
	font-size: 30rpx;
	line-height: 88rpx;
	text-align: center;
	
	margin: 20rpx auto;

}
.yes{
	border: 2rpx solid #9B75FF;
	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
	color:#FFFFFF;
}
.no{
	border: 2rpx solid #ECEBF1;
	background-color: #ECEBF1;
	color:#C8C6D4;
}


.num{ width: 100%; height: 60rpx; text-align: center;
	font-weight: 400;
	font-size: 24rpx;
	color: #555555;
	line-height: 60rpx;
}
.num .use{ color: #7A74F0;}
</style>