<template>
	<view>
		<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
			<view class="bck">
				<view style="width: 100%;height: 15px;"></view>
				<view class="title">
					<view>
						专属于你的
					</view>
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star1.png" mode="widthFix"></image>
					<view>
						寻宝<text>指南</text>
					</view>
				</view>
				<scroll-view scroll-y="true">

					<view class="tips">
						<view class="tips-item">
							<view class="tips-hint">
								<image class="image1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/TIPS1.png" mode="heightFix"></image>
								<image class="image2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star2.png" mode="widthFix"></image>
							</view>
							<view class="tips-title">
								寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币
							</view>
							<view class="tips-vedio">
								<video src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/tips1.mp4"></video>
							</view>
						</view>
						<view class="tips-item">
							<view class="tips-hint2">
								<image class="image1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/TIPS2.png" mode="heightFix"></image>
								<image class="image2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star3.png" mode="widthFix"></image>
							</view>
							<view class="tips-title">
								寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币
							</view>
							<view class="tips-vedio">
								<video src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/tips1.mp4"></video>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</touch-popup>
	</view>
</template>
<script setup>
	const app = getApp()
	import {
		ref,
		defineExpose,
		computed,
		onMounted
	} from 'vue'
	import touchPopup from '@/components/touch-popup/touch-popup'
	const popup = ref() // ref组件


	const open = () => {
		popup.value.open()
	}
	defineExpose({
		open
	}) // 暴露方法
</script>
<style scoped>
	scroll-view {
		height: calc(100% - 105px);
	}

	.tips-hint2 {
		position: absolute;
		left: 15px;
		top: -10px;
	}

	.tips-hint {
		position: absolute;
		right: 15px;
		top: -10px;
	}

	.image1 {
		height: 15px;
		z-index: 1;
		position: relative;
	}

	.image2 {
		width: 24px;
		position: absolute;
		left: -10px;
		top: -10px;
	}

	.tips-title {
		font-size: 13px;
		padding: 10px 5px;
	}

	video {
		border-radius: 15px;
	}

	.tips-vedio {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 10px;
	}

	.tips-item {
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 20px;
		padding: 5px;
		margin-top: 20px;
		position: relative;
	}

	.tips {
		display: flex;
		padding: 0 30px 15px 30px;
		flex-direction: column;
	}

	.title view:first-child {
		font-size: 17px;
	}

	.title view:last-child {
		font-size: 20px;
	}

	.title text {
		color: #ffb800;
	}

	.title image {
		position: absolute;
		width: 25px;
		height: auto;
		left: 20px;
		bottom: 0;
	}

	.title {
		display: flex;
		font-weight: 400;
		flex-direction: column;
		padding: 15px 30px;
		line-height: 30px;
		position: relative;
	}

	.bck {
		height: 100%;
		background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/bck.png') no-repeat;
		background-size: 750rpx;
		background-position: bottom;
	}
</style>