backend-Tv/pages/index/index.vue

<template>
	<div class="container" @back="pageBack">
		<div class="grid-container">
			<div v-for="(item, index) in images" :key="index" class="grid-item" :class="{ flipped: isFlipped[index] }">
				<image class="img-front" :src="item[0]" alt="" />
				<image class="img-back" :src="item[1]" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				images: [
					['/static/image/collected.png', '/static/image/collected1.png'],
					['/static/image/favicon.png', '/static/image/favicon1.png'],
					['/static/image/freeok.png', '/static/image/freeok1.png'],
					['/static/image/fullscreen.png', '/static/image/fullscreen1.png']
				],
				// 每个卡片当前是否显示第二张图
				isFlipped: [false, false, false, false],
				transitionClass: 'fade'
			}
		},
		methods: {
			...mapMutations(['showPage']),
			async pageBack(e) {
				uni.showModal({
					title: '提示',
					content: '是否退出',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							plus.runtime.quit();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return false;
			}
		},
		async mounted() {
			const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

			while (true) { // 循环播放

				// 👇 第一阶段：依次翻转到背面
				for (let i = 0; i < this.images.length; i++) {
					this.$set(this.isFlipped, i, true);
					await delay(1000); // 每个间隔 500ms（动画时间 2s 是 CSS 控制的）
				}

				await delay(2000); // ⏸️ 所有卡片都翻转完成后暂停 1 秒

				// 👇 第二阶段：依次翻转回正面
				for (let i = 0; i < this.images.length; i++) {
					this.$set(this.isFlipped, i, false);
					await delay(1000); // 每个间隔 500ms
				}

				await delay(2000); // 可选：一轮结束后暂停一下再开始下一轮
			}
		}
	}
</script>

<style>
	* {
		/* 清除默认样式 */
		margin: 0;
		padding: 0;
	}

	body {
		/* 定义变量 */
		--img-width: 180rpx;
		--img-height: 100vh;
	}

	.container {
		/* 设为flex容器 */
		display: flex;
		/* 设置子元素水平居中 */
		justify-content: center;
		/* 设置子元素垂直居中 */
		align-items: center;
		/* 设置容器宽高为整个可视区的宽高 */
		width: 100vw;
		height: 100vh;
		background-color: #eeffff;
	}

	.grid-container {
		position: relative;
		/* 设为grid容器 */
		display: grid;
		/* 设置为4列，列宽为200px（图片宽度） */
		grid-template-columns: repeat(4, var(--img-width));
		/* 设为两行，行高为270px（图片高度） */
		grid-template-rows: repeat(1, var(--img-height));
		/* 设置行列间距为20px */
		gap: 10rpx;

		/* 设置观测距离 Z=0 平面*/
		perspective: 1600px;
		/* 设置观测位置 */
		perspective-origin: 50% 50%;
	}

	.grid-item {
		position: relative;
		transition: transform 2s ease-in-out;
		transform-style: preserve-3d;
	}

	/* 可以为每个 item 设置不同延迟 */
	.grid-item:nth-child(1) {
		transition-delay: 0s;
	}

	.grid-item:nth-child(2) {
		transition-delay: 0.2s;
	}

	.grid-item:nth-child(3) {
		transition-delay: 0.4s;
	}

	.grid-item:nth-child(4) {
		transition-delay: 0.6s;
	}

	.grid-item.flipped {
		transform: rotateY(180deg);
	}

	.grid-item:hover {
		/* 沿Y轴旋转180° */
		transform: rotateY(180deg);
	}

	.img-front,
	.img-back {
		/* 设为绝对定位 */
		position: absolute;
		/* 距离父元素上边距和左边距均为0 */
		top: 0;
		left: 0;
		/* 图片的默认大小（父盒子的宽高） */
		width: 100%;
		height: 100%;

		border-radius: 6px;
		box-shadow: 0 0 6px 1px #666;

		/* 设置图片背面不可见 */
		backface-visibility: hidden;
	}

	.img-front {
		/* 提高堆叠顺序 */
		z-index: 2;
	}

	.img-back {
		/* 卡片反面图默认背面朝向观察者 */
		transform: rotateY(-180deg);
	}
</style>