1111

pagesA/photo/components/photo_header.vue

@@ -86,7 +86,7 @@ export default {
       },
       getNavHeight() {		 
 		const info = uni.getSystemInfoSync();
-		
+		console.log('statusBarHeight=',info.statusBarHeight);
         this.$emit('getNavHeight', info.statusBarHeight);
       },
     

pagesA/photo/face.vue

@@ -0,0 +1,134 @@
+<template>
+	<view>
+		<view class="content ">
+			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
+			<view class="photo_main_face" :style="'margin-top:-'+margin_top+'px'">
+				<view class="photo_main_face_head"></view>
+				<view class="photo_main_face_1">
+					<image src="/static/img/photo/face_1.png" />
+				</view>
+				<view class="photo_main_face_2">
+					<view class="photo_main_face_2_1">上传5-10张，有效照片越多，生成效果越好</view>
+					<view class="photo_main_face_2_2">
+						<image src="/static/img/common/common_21.png" />
+					</view>
+				</view>
+
+				<view class="photo_main_face_3">
+					<view class="photo_main_face_3_one" v-for="n in 10" :class="{
+						 this_class_0:n==0,
+						 this_class_4:n==4,
+						 this_class_5:n==5,
+						 this_class_9:n==9
+						 }">
+						<image src="/static/img/index/banner.png"/>
+						<view class="photo_main_face_3_one_icon">
+							<image src="/static/img/common/common_22.png"/>
+						</view>
+					</view>
+				</view>
+				
+				<view class="photo_main_face_4" style="height: 88rpx;">
+					<image src="/static/img/photo/face_7.png" />
+				</view>
+				
+				
+				<view class="photo_main_face_4 photo_full_blue_btn">
+					上传照片
+				</view>
+				
+				<view class="photo_main_face_4 photo_full_blue_btn">
+					提交制作 0/30
+				</view>
+				
+				<view class="photo_main_face_5">以下照片不合格，请重新上传</view>
+				<view class="photo_main_face_3">
+					<view class="photo_main_face_3_one" v-for="n in 3" >
+						<image src="/static/img/index/banner.png"/>
+					</view>
+				</view>
+				
+				<view class="photo_main_face_6">
+					<image src="/static/img/photo/face_6.png" />
+				</view>
+				
+			</view>
+
+		</view>
+
+
+	</view>
+</template>
+
+<script>
+	import custom_navbar from "./components/photo_header.vue";
+	export default {
+		components: {
+			custom_navbar
+
+		},
+		data() {
+			return {
+				navbar_title: '上传图片',
+				theme: "blue",
+				margin_top: -7,
+
+
+			}
+		},
+
+		mounted() {
+
+		},
+		onPageScroll(e) {
+					if (e.scrollTop > 50) {
+						this.theme = 'white';
+				
+					} else {
+				
+						this.theme = 'blue';
+					}
+				},
+		methods: {
+
+			getNavHeight(e) {
+				this.margin_top += e;
+			}
+
+
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './this.scss';
+
+	.this_class_0 {
+		border-top-left-radius: 20rpx;
+		image{
+			border-top-left-radius: 20rpx;
+		}
+	}
+
+	.this_class_4 {
+		border-top-right-radius: 20rpx;
+		image{
+			border-top-right-radius: 20rpx;
+		}
+	}
+	
+	.this_class_5 {
+		border-bottom-left-radius: 20rpx;
+		image{
+			border-bottom-left-radius: 20rpx;
+		}
+	}
+	
+	.this_class_9 {
+		border-bottom-right-radius:20rpx;
+		image{
+			border-bottom-right-radius: 20rpx;
+		}
+	}
+</style>

pagesA/photo/this.scss

@@ -9,6 +9,19 @@
 	overflow: hidden;
 }
 
+.photo_full_blue_btn{
+	background: linear-gradient(to right, #4F93FF, #9976FF);
+	border-radius: 80rpx;
+	color: #fff;
+	font-size: 30rpx;
+	font-weight: 500;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+}
+
+
 
 .photo_back {
 		background-color: #E3E8FE;
@@ -199,4 +212,100 @@ image{
 	justify-content: center;
 	overflow: hidden;
 	margin-bottom: 40rpx; 
-}
+}
+
+
+// ----------------face
+.photo_main_face{
+	margin-top: -40px;
+	background-color: #fff;
+	min-height: 100vh;
+	width: 100%;
+	top: 0;
+	left: 0;
+	height: 100%;
+	overflow: hidden;
+	
+	.photo_main_face_head{
+		height: 400rpx;
+		width: 100%;
+		background: linear-gradient( 180deg, #D1DAFF 0%, rgba(209,218,255,0.6) 46%, rgba(254,254,255,0) 100%);
+	}
+	
+	.photo_main_face_1{
+		width: 554rpx;
+		height: 82rpx;
+		margin: 40rpx auto;
+		margin-top: -180rpx;
+	}
+	
+	.photo_main_face_2{
+		width: 510rpx;
+		margin: 20rpx auto;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		.photo_main_face_2_1{
+			color: #999999;
+			font-size: 24rpx;
+		}
+		
+		.photo_main_face_2_2{
+			width: 26rpx;
+			height: 26rpx;
+			margin-top: -13rpx;
+		}
+	}
+	
+	.photo_main_face_3{
+		width: 702rpx;		
+		margin: 30rpx auto;
+		display: flex;
+		flex-wrap: wrap;
+		// justify-content: space-around;
+		
+		
+		.photo_main_face_3_one{
+			width: 136rpx;
+			height: 136rpx;
+			// border-radius: 18rpx;
+			border: solid 2rpx #EAE7F9;
+			background-color: #F5F6FB;
+			.photo_main_face_3_one_icon{
+				width: 26rpx;
+				height: 26rpx;
+				margin-top: -140rpx;
+				margin-left: 100rpx;
+				image{
+					border-radius: 0;
+				}
+			}
+		}
+		
+		
+	}
+	
+	.photo_main_face_4{
+		width:702rpx;
+		height: 80rpx;
+		margin: 40rpx auto;
+		
+	}
+	
+	.photo_main_face_5{
+		width: 702rpx;
+		font-size: 28rpx;
+		color: #333333;
+		margin: 0rpx auto;
+		font-weight: 400;
+	}
+	
+	.photo_main_face_6{
+		width: 702rpx;
+		height: 514rpx;
+		margin: 80rpx auto;
+	}
+	
+	
+}
+