DCFronted/src/views/index/Competition.vue

<template>
  <div class="demand-hall">
    <div class="page-header">
      <h1>赛程信息</h1>
      <div class="header-subtitle">
        <span class="date-range">点击即可查看和报名</span>
      </div>
    </div>
    <div class="action-buttons">
      <button class="btn-common btn-gradient btn-margin-right" @click="addNewCompetition">添加赛程</button>
      <button class="btn-common btn-light" @click="refreshCompetitions">刷新赛程</button>
    </div>
    <div class="table-container">
      <table class="maps-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>赛程名称</th>
            <th>比赛时间</th>
            <th>是否结赛</th>
            <th>主办人</th>
            <th>联系方式</th>
            <th>比赛方式</th>
            <th>比赛类型</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(competition, index) in competitions" 
              :key="competition.id" 
              @click="handleCompetitionClick(competition)"
              class="competition-row">
            <td>{{ index + 1 }}</td>
            <td>{{ competition.name }}</td>
            <td>{{ competition.time }}</td>
            <td>
              <span :class="['status-tag', competition.isFinished ? 'finished' : 'ongoing']">
                {{ competition.isFinished ? '已结束' : '进行中' }}
              </span>
            </td>
            <td>{{ competition.organizer }}</td>
            <td>{{ competition.contact }}</td>
            <td>{{ competition.mode }}</td>
            <td>{{ competition.type }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 模拟赛程数据
const competitions = ref([
  {
    id: 1,
    name: '单淘汰赛',
    time: '2024-04-01 14:00',
    isFinished: false,
    organizer: '赵六',
    contact: '13600136000',
    mode: '单阶段',
    type: '单淘汰'
  }
])

// 处理赛程点击事件
const handleCompetitionClick = (competition) => {
  router.push({
    path: `/competition/${competition.id}`,
    query: {
      name: competition.name,
      time: competition.time,
      organizer: competition.organizer,
      contact: competition.contact,
      mode: competition.mode,
      type: competition.type
    }
  })
}

// 刷新赛程数据
const refreshCompetitions = () => {
  // 这里可以添加实际的API调用
  console.log('刷新赛程数据')
}

// 添加新赛程
const addNewCompetition = () => {
  // 这里可以添加跳转到添加赛程页面的逻辑
  console.log('添加新赛程')
}
</script>

<style scoped>
.btn-common {
  display: inline-block;
  padding: 8px 22px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #b6d2ff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
  outline: none;
  box-shadow: none;
  margin-bottom: 20px;
}

.btn-gradient {
  background: linear-gradient(90deg, #71eaeb 0%, #416bdf 100%);
  color: #fff;
  border: 1px solid #71eaeb;
}
.btn-gradient:hover {
  background: linear-gradient(90deg, #416bdf 0%, #71eaeb 100%);
  color: #fff;
  border: 1.5px solid #416bdf;
}

.btn-light {
  background: linear-gradient(90deg, #e3f0ff 0%, #f7fbff 100%);
  color: #2563eb;
  border: 1px solid #b6d2ff;
}
.btn-light:hover {
  background: linear-gradient(90deg, #d0e7ff 0%, #eaf4ff 100%);
  color: #174ea6;
  border: 1.5px solid #2563eb;
}

/* 按钮间距 */
.btn-margin-right {
  margin-right: 16px;
}

.action-buttons {
  margin-bottom: 20px;
}

.competition-row {
  cursor: pointer;
  transition: background-color 0.2s;
}

.competition-row:hover {
  background-color: #f5f7fa;
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-tag.ongoing {
  background-color: #e1f3d8;
  color: #67c23a;
}

.status-tag.finished {
  background-color: #f4f4f5;
  color: #909399;
}

.maps-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.maps-table th,
.maps-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e4e7ed;
}

.maps-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.maps-table tbody tr:last-child td {
  border-bottom: none;
}
</style>