九宫格抽奖带跑马灯vue代码实现

以下是九宫格抽奖带跑马灯的 Vue 代码实现：

Template 部分：

<template>
  <div class="container">
    <div class="grid">
      <div class="cell" v-for="(item, index) in items" :key="index">
        <div class="content" :class="{active: item.active}" @click="handleClick(index)">
          <span class="title">{{item.title}}</span>
          <img :src="item.img" alt="" class="img">
        </div>
      </div>
    </div>
    <div class="marquee">
      <ul ref="marquee">
        <li v-for="item in marqueeItems" :key="item">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

Script 部分：

<script>
export default {
  data() {
    return {
      items: [
        {title: '奖品1', img: 'img1.jpg', active: false},
        {title: '奖品2', img: 'img2.jpg', active: false},
        {title: '奖品3', img: 'img3.jpg', active: false},
        {title: '奖品4', img: 'img4.jpg', active: false},
        {title: '奖品5', img: 'img5.jpg', active: false},
        {title: '奖品6', img: 'img6.jpg', active: false},
        {title: '奖品7', img: 'img7.jpg', active: false},
        {title: '奖品8', img: 'img8.jpg', active: false},
        {title: '奖品9', img: 'img9.jpg', active: false}
      ],
      marqueeItems: ['恭喜 xxx 获得奖品1', '恭喜 yyy 获得奖品2', '恭喜 zzz 获得奖品3'],
      activeIndex: -1,
      isRunning: false,
      timer: null
    }
  },
  methods: {
    handleClick(index) {
      if (this.isRunning) return
      this.activeIndex = index
      this.isRunning = true
      this.timer = setInterval(() => {
        this.items[this.activeIndex].active = false
        this.activeIndex = (this.activeIndex + 1) % 9
        this.items[this.activeIndex].active = true
      }, 100)
      setTimeout(() => {
        clearInterval(this.timer)
        this.isRunning = false
        this.items[this.activeIndex].active = false
        // TODO: 判断中奖情况
      }, 3000)
    }
  }
}
</script>

Style 部分：

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cell {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.content.active {
  background-color: #f00;
  color: #fff;
}

.title {
  font-size: 24px;
  margin-bottom: 10px;
}

.img {
  width: 80%;
  height: auto;
}

.marquee {
  margin-top: 20px;
}

ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  margin-right: 20px;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}
</style>