176 lines
3.9 KiB
Vue
176 lines
3.9 KiB
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> |