<template>
  <view class="container">
    <view class="image-row" v-for="(row, rowIndex) in 2" :key="rowIndex">
      <image :src="images[rowIndex * 4 + colIndex]" class="switching-image" v-for="(col, colIndex) in 4" :key="colIndex" :class="transitionClass">
      </image>
    </view>
  </view>
</template>

<script>
  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'
          ],
        currentIndex: 0,
        transitionClass: 'fade'
      }
    },
    mounted() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 3000);
    },
    computed: {
      currentImage() {
        return this.images[this.currentIndex];
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .image-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .switching-image {
    width: 150px;
    height: 150px;
    margin: 0 10px;
  }
  .fade {
    transition: opacity 1s ease-in-out;
    opacity: 0;
  }
  .fade.active {
    opacity: 1;
  }
</style>