CSS + JS + Vue 实现 LoL 赛事中心功能

在游戏或电竞网站中，赛事中心是一个用于展示即将到来、正在进行和已经结束的比赛的区域。以下是一个使用 Vue.js、CSS 和 JavaScript 来实现的 League of Legends (LoL) 赛事中心功能的简单示例。

Vue 组件

创建一个 EventCenter.vue 组件：

<template>
  <div>
    <h3>LoL 赛事中心</h3>
    <button @click="filterEvents('upcoming')">即将到来</button>
    <button @click="filterEvents('live')">正在进行</button>
    <button @click="filterEvents('past')">已结束</button>
    <div v-for="(event, index) in filteredEvents" :key="index" class="event-item">
      <h4>{{ event.name }}</h4>
      <p>状态：{{ event.status }}</p>
      <p>时间：{{ event.time }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: 'upcoming', // 默认过滤条件
      events: [
        { id: 1, name: '比赛1', status: 'upcoming', time: '2023-10-01' },
        { id: 2, name: '比赛2', status: 'live', time: '2023-09-20' },
        { id: 3, name: '比赛3', status: 'past', time: '2023-09-10' },
        // 更多比赛...
      ],
      filteredEvents: [],
    };
  },
  methods: {
    filterEvents(status) {
      this.filter = status;
      this.filteredEvents = this.events.filter((event) => event.status === this.filter);
    },
  },
  mounted() {
    this.filterEvents(this.filter); // 初始化
  },
};
</script>

<style scoped>
.event-item {
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 10px;
}

button {
  margin: 5px;
}
</style>

解释

1. 数据和状态: 我们有一个 filter 用于存储当前的过滤条件，一个 events 数组用于存储所有的赛事，以及一个 filteredEvents 数组用于存储过滤后的赛事。

2. 赛事过滤逻辑: 我们定义了一个 filterEvents 方法，该方法会根据传入的状态（即将到来、正在进行、已结束）来过滤赛事。

3. 展示赛事: 在模板中，我们用一个 div 来展示过滤后的赛事。

4. 初始化: 在 mounted 生命周期钩子中，我们调用 filterEvents 方法来初始化 filteredEvents。

5. 样式: 我们用简单的 CSS 来添加样式，使每个赛事都有一个边框，并设置了适当的边距和填充。

这个组件实现了一个基础的 LoL 赛事中心功能，你可以根据需要进行更多的定制和扩展，比如添加赛事详情页、赛事回顾、实时得分等。希望这个简单的示例能帮助你实现你需要的功能！