martial-mini/pages/home/home.vue

<template>
  <view class="home-page">
    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular>
        <swiper-item v-for="(banner, index) in banners" :key="index">
          <image class="banner-image" :src="banner" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 精品赛事 -->
    <view class="section">
      <view class="section-header">
        <view class="section-title">
          <text class="bookmark-icon">📋</text>
          <text class="title-text">精品赛事</text>
        </view>
        <view class="more-btn" @click="goToEventList">
          <text>更多</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <!-- 赛事列表 -->
      <view class="event-list">
        <view class="event-item" v-for="(item, index) in eventList" :key="index" @click="goToEventDetail(item)">
          <view class="event-title">{{ item.title }}</view>
          <view class="event-info">
            <text class="info-text">地点：{{ item.location }}</text>
          </view>
          <view class="event-info">
            <text class="info-text">报名时间：{{ item.registerTime }}</text>
          </view>
          <view class="event-info">
            <text class="info-text">比赛时间：{{ item.matchTime }}</text>
          </view>
          <view class="event-info">
            <text class="info-text">报名人数：{{ item.registerCount }}</text>
          </view>
          <view class="event-footer">
            <button class="register-btn" @click.stop="goToRegister(item)">
              {{ item.status === 'finished' ? '报名已结束' : '立即报名' }}
            </button>
          </view>
          <view class="registered-overlay" v-if="item.status === 'finished'">
            <text class="status-text">报名已结束</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        '/static/images/bananer1.png',
        '/static/images/bananer2.png'
      ],
      eventList: [
        {
          id: 1,
          title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
          location: '天津市-天津市体育中心',
          registerTime: '2025.02.01-2025.02.10',
          matchTime: '2025.02.01-2025.02.10',
          registerCount: '25212',
          status: 'open'
        },
        {
          id: 2,
          title: '2025年全国武术套路锦标赛',
          location: '天津市-天津市体育中心',
          registerTime: '2025.02.01-2025.02.10',
          matchTime: '2025.02.01-2025.02.10',
          registerCount: '25212',
          status: 'finished'
        },
        {
          id: 3,
          title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
          location: '天津市-天津市体育中心',
          registerTime: '2025.02.01-2025.02.10',
          matchTime: '2025.02.01-2025.02.10',
          registerCount: '25212',
          status: 'open'
        }
      ]
    };
  },
  methods: {
    goToEventList() {
      uni.navigateTo({
        url: '/pages/event-list/event-list'
      });
    },
    goToEventDetail(item) {
      uni.navigateTo({
        url: '/pages/event-detail/event-detail?id=' + item.id
      });
    },
    goToRegister(item) {
      if (item.status === 'open') {
        uni.navigateTo({
          url: '/pages/register-type/register-type?id=' + item.id
        });
      }
    },
    goToProfile() {
      uni.navigateTo({
        url: '/pages/profile/profile'
      });
    },
    goToMyRegistration() {
      uni.navigateTo({
        url: '/pages/my-registration/my-registration'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
}

.banner-section {
  background: linear-gradient(180deg, #C93639 0%, #f5f5f5 100%);
  padding: 30rpx 30rpx 50rpx;
}

.banner-swiper {
  width: 100%;
  height: 340rpx;
  border-radius: 24rpx;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.section {
  padding: 30rpx;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.bookmark-icon {
  font-size: 36rpx;
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.more-btn {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666666;
}

.arrow {
  font-size: 36rpx;
  margin-left: 5rpx;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.event-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  position: relative;
  overflow: hidden;
}

.event-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

.event-info {
  margin-bottom: 10rpx;
}

.info-text {
  font-size: 26rpx;
  color: #666666;
}

.event-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.register-btn {
  background-color: #C93639;
  color: #fff;
  padding: 16rpx 50rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  border: none;
}

.registered-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-text {
  font-size: 36rpx;
  color: #999999;
}
</style>