<template>
    <view class="content">
		<u-search placeholder="景区/关键词搜索" v-model="search" :clearabled="true" @change="query" :show-action="true" action-text="搜索" :animation="true"></u-search>
        <view class="swiper">
			<u-swiper :list="list"></u-swiper>
		</view>
		<view class="title">
			<view class="shuxian"></view>
			<view>我的VLOG视频集</view>
		</view>
		<view class="myvolg" style="justify-content: center;">
			<view class="item">
				<navigator url="../vlogList/vlogList">
					<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
				</navigator>
			</view>
			<view class="item">
				<navigator url="../vlogList/vlogList">
					<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
				</navigator>
			</view>
			<view class="item">
				<navigator url="../vlogList/vlogList">
					<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
				</navigator>
			</view>
			<view class="access">
				<navigator url="../vlogList/vlogList">
					<view class="btnn">
						<image src="../../../static/img/vlog/icon/icon_clicktoenter.png"></image>
						<view style="color: #fff;font-weight: bold;margin-left: 5rpx;">
							点击进入
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="title">
			<view class="shuxian"></view>
			<view>定制我的照片集</view>
		</view>
		<navigator url="../vlogList/vlogList">
			<view class="photoGallery">
				<image class="img" src="../../../static/img/vlog/icon/bg.jpg"></image>
				<view class="access"></view>
				<view class="btnn">
					<image src="../../../static/img/vlog/icon/icon_clicktoenter.png"></image>
					<view>
						开始制作
					</view>
				</view>
			</view>
		</navigator>
		<view class="title">
			<view class="shuxian"></view>
			<view>景区模板</view>
		</view>
		<view class="row">
			<navigator url="../scenicList/scenicList" class="item">
				<u-icon name="play-circle" class="icon"></u-icon>
				<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
				<text>长江索道</text>
			</navigator>
			<navigator url="../scenicList/scenicList" class="item">
				<u-icon name="play-circle" class="icon"></u-icon>
				<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
				<text>云端之眼·高空观景台</text>
			</navigator>
		</view>
		<view class="bottom">
			<image src="../../../static/img/vlog/icon/bottom.png"></image>
			<navigator url="../vlogface/vlogface">
				<view class="paizhao">
					<image src="../../../static/img/vlog/icon/icon_scan.png"></image>
				</view>
			</navigator>
		</view>
		
    </view>
</template>
<script>
export default {
    data() {
        return {
			search:"",//景区
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
				}
			],
        }
    },
	onLoad(){//代替 vue 里面的 created
		this.openCamera()
	},
	onReady() {//代替 vue 里面的 mounted
	},
    methods: {
		openCamera(){//用户首次进入打开摄像头
			uni.authorize({
				scope:'scope.camera',
				success: (res) => {
					console.log('摄像头已打开');
				},
				fail: (res) => {
					uni.showModal({
						content:'检测到您没打开摄像头权限，是否去设置打开？',
						confirmText: "确认",
						cancelText:'取消',
						success: (res) => {
							if(res.confirm){
								uni.openSetting({
									success: (res) => {
										console.log(res);
									}
								})
							}else{
								uni.navigateBack({delta:1})
							}
						}
					})
				}
			})
		},
		query(){//查询
		}
      
    }
}
</script>
<style lang="scss" scoped>
	.content{padding: 0 20rpx;box-sizing: border-box;margin: 0 auto;
		.swiper{margin-top: 20rpx;}
		.title{margin-top: 40rpx;display: flex;align-items: center;
			.shuxian{height: 30rpx;width: 5rpx;background-color: #3688FF;margin-right: 20rpx;}
			view{font-weight: bold;}
		}
		.myvolg{height: 150rpx;border-radius: 10rpx;background-color: #212B44;margin-top: 20rpx;display: flex;justify-content: start;
			.item:not(first-child){width: 25%;height: 100%;padding:10rpx 10rpx;
				image{width: 100%;height:130rpx;border-radius: 10rpx;}
			}
			.item:first-child{width: 25%;height: 100%;padding-right:10rpx;
				image{width: 100%;height:130rpx;border-radius: 10rpx;}
			}
			.access{width: 25%;height: 100%;
				.btnn{height: 50rpx;display: flex;align-items: center;padding-top: 75rpx;padding-left: 10rpx;
					image{width: 40rpx;height: 40rpx;}
				}
			}
		}
		.photoGallery{height: 150rpx;border-radius: 10rpx;background-color: #212B44;margin-top: 20rpx;position: relative;
			.img{width: 100%;height: 100%;border-radius: 10rpx;}
			.access{width: 100%;height: 100%;position: absolute;background-color: #000000;top: 0;opacity: 0.3;border-radius: 10rpx;}
			.btnn{display: flex;justify-content: center;align-items: center;color: #fff;position: absolute;left:50%;top:50%;transform: translate(-50%, -50%);font-weight: bold;font-size: 32rpx;
				image{width: 40rpx;height: 40rpx;margin-right: 10rpx;}
			}
		}
		.row{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 20rpx;padding-bottom: 250rpx;
			.item{width: 49%;height: 200rpx;margin-top: 15rpx;position: relative;
				image{width: 100%;height: 100%;border-radius: 10rpx;}
				.icon{position: absolute;left:50%;top:50%;transform: translate(-50%, -50%);font-size: 50rpx;}
			}
		}
		.bottom{height: 150rpx;width: 100%;position: relative;position: fixed;bottom: 0;right:0rpx;
			image{width: 100%;height: 100rpx;position: relative;position: fixed;bottom: 0;}
			.paizhao{height: 160rpx;width: 160rpx;z-index: 1;position: absolute;left:50%;top:22%;transform: translate(-50%, -50%);
				image{height: 100%;width: 100%;}
			}
		}
	}
</style>