activitys-uniapp/components/alert/timelinePopup.vue

<template>
	<view class="">
		
		<view class="modal" :class="timelineShow ? 'show' : ''" @click="timelineShow = false">
			<image class="img" src="/static/poster/arrow.png"></image>
			<template v-if="PopupTyPe === 'friendsCircle'">
				<view class="view text-white">
					<view class="flex align-center text-bold margin-bottom" style="font-size: 36upx;">
						<view class="bg-base flex justify-center align-center margin-right"
							style="width: 50upx;height: 50upx;border-radius: 16upx;">1</view>
						<view class="flex align-center">
							<view>点击右上角</view>
							<image class="margin-lr-sm" src="/static/poster/point.png" style="width: 60upx;height: 38upx;">
							</image>
							<view>按钮</view>
						</view>
					</view>
					<view class="flex align-center text-bold" style="font-size: 36upx;">
						<view class="bg-base flex justify-center align-center margin-right"
							style="width: 50upx;height: 50upx;border-radius: 16upx;">2</view>
						<view class="flex align-center">
							<view>选择</view>
							<image class="margin-lr-sm" src="/static/poster/pyq.png" style="width: 48upx;height: 48upx;">
							</image>
							<view>分享到朋友圈</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="view text-white">
					<view class="flex align-center text-bold margin-bottom" style="font-size: 36upx;">
						<view class="bg-base flex justify-center align-center margin-right"
							style="width: 50upx;height: 50upx;border-radius: 16upx;">1</view>
						<view class="flex align-center">
							<view>点击右上角</view>
							<image class="margin-lr-sm" src="/static/poster/point.png" style="width: 60upx;height: 38upx;">
							</image>
							<view>按钮</view>
						</view>
					</view>
					<view class="flex align-center text-bold" style="font-size: 36upx;">
						<view class="bg-base flex justify-center align-center margin-right"
							style="width: 50upx;height: 50upx;border-radius: 16upx;">2</view>
						<view class="flex align-center">
							<view>选择</view>
							<image class="margin-lr-sm" src="/static/poster/zhuanfa.png" style="width: 48upx;height: 48upx;">
							</image>
							<view>转发给好友</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				timelineShow: false,
				PopupTyPe: '', //朋友圈：friendsCircle 朋友：friend
			};
		},
		methods: {
			show() {
				this.timelineShow = true
			}
		}
	};
</script>

<style lang="scss" scoped>
	.modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
	}

	.modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.img {
		position: fixed;
		top: 120px;
		right: 60px;
		width: 127px;
		height: 184px;
	}

	.view {
		position: fixed;
		top: 340px;
		right: 50upx;
		text-align: center;
		width: 550upx;
		height: 480upx;
	}
</style>