<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>