合成照相馆小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
photo_uniapp/pagesA/photo/face.vue

134 lines
2.7 KiB

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