web/src/views/activity/index.vue
@@ -1,26 +1,29 @@
和你<template>
<template>
  <div class="activity-page">
    <div class="page-card">
      <h3 class="card-title">比赛信息</h3>
      <!-- 搜索和操作栏 -->
      <div class="toolbar">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="title-section">
          <h1 class="page-title">比赛信息</h1>
          <p class="page-subtitle">管理您的精彩比赛</p>
        </div>
      </div>
      <!-- 搜索工具栏 -->
      <div class="search-toolbar">
        <el-input
          v-model="searchForm.name"
          placeholder="请输入比赛名称"
          style="width: 300px"
          style="width: 200px"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
          @clear="handleClear"
        />
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          搜索
          查询
        </el-button>
        <el-button type="success" @click="handleAdd">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增比赛
        </el-button>
@@ -37,15 +40,25 @@
            <el-tag :type="getStatusType(row.stateName)">{{ row.stateName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template #default="{ row }">
            <div class="table-actions">
              <el-button type="warning" size="small" @click="handleEdit(row)">
                编辑
              </el-button>
              <el-button type="danger" size="small" @click="handleDelete(row)">
                删除
              </el-button>
              <el-button
                text
                :icon="Edit"
                size="small"
                @click="handleEdit(row)"
                class="action-btn edit-btn"
                title="编辑"
              />
              <el-button
                text
                :icon="Delete"
                size="small"
                @click="handleDelete(row)"
                class="action-btn delete-btn"
                title="删除"
              />
            </div>
          </template>
        </el-table-column>
@@ -72,6 +85,7 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { getActivities } from '@/api/activity'
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
const loading = ref(false)
const router = useRouter()
@@ -105,6 +119,12 @@
// 搜索
const handleSearch = () => {
  pagination.page = 1
  loadData()
}
// 清空搜索
const handleClear = () => {
  searchForm.name = ''
  loadData()
}
@@ -165,32 +185,128 @@
})
</script>
<style lang="scss" scoped>
<style scoped>
.activity-page {
  .card-title {
    margin-bottom: 20px;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
  padding: 20px;
}
.page-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 20px;
}
.title-section {
  flex: 1;
}
.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.2;
}
.page-subtitle {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}
/* 工具栏样式 */
.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
/* 搜索工具栏样式 */
.search-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
/* 搜索框样式 */
.search-icon {
  color: #999;
}
.search-button {
  margin-right: 4px;
}
/* 表格操作按钮样式 */
.table-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.action-btn {
  padding: 4px;
  border: none;
  background: transparent !important;
  transition: all 0.2s ease;
}
.edit-btn {
  color: #409eff;
}
.edit-btn:hover {
  color: #337ecc;
  transform: scale(1.2);
  background: rgba(64, 158, 255, 0.1) !important;
}
.delete-btn {
  color: #f56c6c;
}
.delete-btn:hover {
  color: #dd6161;
  transform: scale(1.2);
  background: rgba(245, 108, 108, 0.1) !important;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/* 响应式适配 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
  }
  .table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  .toolbar .el-input {
    width: 100% !important;
    max-width: 280px;
  }
}
</style>