cpzs-frontend-new/src/views/LotterySelection.vue

<template>
  <div class="home-page">
    <!-- 顶部Banner区域 -->
    <div class="banner-section">
      <div class="banner-content">
        <img src="https://jingcaishuju.oss-cn-beijing.aliyuncs.com/banner.png" alt="精彩猪手" class="banner-image" />
      </div>
    </div>

    <!-- 公告区域 -->
    <div class="notice-section" @click="showAnnouncementList">
      <div class="notice-icon">📢</div>
      <div class="notice-content">
        <transition name="notice-slide" mode="out-in">
          <div :key="currentNoticeIndex" class="notice-text">
            {{ currentNoticeText }}
          </div>
        </transition>
      </div>
      <transition name="notice-slide" mode="out-in">
        <div :key="currentNoticeIndex" class="notice-time" v-if="currentNoticeTime">
          {{ currentNoticeTime }}
        </div>
      </transition>
    </div>

    <!-- 彩票种类区域 -->
    <div class="lottery-section">
      <div class="section-header">
        <h2 class="section-title">中国福利彩票 - 智推版</h2>
        <button class="premium-btn" @click="goToPremiumVersion">
          精推版
        </button>
      </div>
      <div class="lottery-grid">
        <!-- 双色球 -->
        <div class="lottery-card available welfare-red-gradient" @click="goToShuangseqiu">
          <div class="lottery-icon">
            <img src="/assets/type/ssq.svg" alt="双色球" />
          </div>
          <div class="lottery-info">
            <h3 class="lottery-name">双色球</h3>
            <p class="lottery-desc">每周二、四、日21:15开奖</p>
          </div>
          <div class="lottery-status available">可用</div>
        </div>

        <!-- 快乐8 -->
        <div class="lottery-card disabled welfare-yellow-gradient" @click="showDevelopingTip">
          <div class="lottery-icon">
            <img src="/assets/type/kl8.svg" alt="快乐8" />
          </div>
          <div class="lottery-info">
            <h3 class="lottery-name">快乐8</h3>
            <p class="lottery-desc">每天21:15开奖</p>
          </div>
          <div class="lottery-status developing">即将开放</div>
        </div>

        <!-- 七乐彩 -->
        <div class="lottery-card disabled welfare-blue-gradient" @click="showDevelopingTip">
          <div class="lottery-icon">
            <img src="/assets/type/7lecai.svg" alt="七乐彩" />
          </div>
          <div class="lottery-info">
            <h3 class="lottery-name">七乐彩</h3>
            <p class="lottery-desc">每周一、三、五21:15开奖</p>
          </div>
          <div class="lottery-status developing">即将开放</div>
        </div>

        <!-- 福彩3D -->
        <div class="lottery-card disabled welfare-purple-gradient" @click="showDevelopingTip">
          <div class="lottery-icon">
            <img src="/assets/type/3D.svg" alt="福彩3D" />
          </div>
          <div class="lottery-info">
            <h3 class="lottery-name">福彩3D</h3>
            <p class="lottery-desc">每天21:15开奖</p>
          </div>
          <div class="lottery-status developing">即将开放</div>
        </div>
      </div>
    </div>

    <!-- 体彩区域 -->
    <div class="lottery-section">
      <h2 class="section-title">中国体育彩票 - 智推版</h2>
      <div class="lottery-grid">
        <!-- 大乐透 -->
        <div class="lottery-card available sports-orange-gradient" @click="goToDaletou">
          <div class="lottery-icon">
            <img src="/assets/type/daletou.svg" alt="大乐透" />
          </div>
          <div class="lottery-info">
            <h3 class="lottery-name">大乐透</h3>
            <p class="lottery-desc">每周一、三、六21:25开奖</p>
          </div>
          <div class="lottery-status available">可用</div>
        </div>

        <!-- 排列三 -->
        <div class="lottery-card disabled sports-yellow-gradient" @click="showDevelopingTip">
          <div class="lottery-icon">
            <img src="/assets/type/pailie3.svg" alt="排列三" />
          </div>
          <div class="lottery-info">
            <h3 class="lottery-name">排列三</h3>
            <p class="lottery-desc">每天21:25开奖</p>
          </div>
          <div class="lottery-status developing">即将开放</div>
        </div>

        <!-- 七星彩 -->
        <div class="lottery-card disabled sports-blue-gradient" @click="showDevelopingTip">
          <div class="lottery-icon">
            <img src="/assets/type/7xingcai.svg" alt="七星彩" />
          </div>
          <div class="lottery-info">
            <h3 class="lottery-name">七星彩</h3>
            <p class="lottery-desc">每周二、五、日21:25开奖</p>
          </div>
          <div class="lottery-status developing">即将开放</div>
        </div>

        <!-- 排列五 -->
        <div class="lottery-card disabled sports-purple-gradient" @click="showDevelopingTip">
          <div class="lottery-icon">
            <img src="/assets/type/pailie5.svg" alt="排列五" />
          </div>
          <div class="lottery-info">
            <h3 class="lottery-name">排列五</h3>
            <p class="lottery-desc">每天21:25开奖</p>
          </div>
          <div class="lottery-status developing">即将开放</div>
        </div>
      </div>
    </div>

    <!-- 开发中提示框 -->
    <div v-if="showTip" class="tip-overlay" @click="hideTip">
      <div class="tip-content" @click.stop>
        <div class="tip-icon">🚧</div>
        <h3>功能开发中</h3>
        <p>该彩票类型的智能分析功能正在开发中，敬请期待！</p>
        <button class="tip-button" @click="hideTip">我知道了</button>
      </div>
    </div>

    <!-- 公告列表弹窗 -->
    <div v-if="showAnnouncementModal" class="announcement-modal-overlay" @click="hideAnnouncementList">
      <div class="announcement-modal-content" @click.stop>
        <div class="announcement-modal-header">
          <h3>📢 全部公告</h3>
          <button class="close-btn" @click="hideAnnouncementList">×</button>
        </div>
        <div class="announcement-modal-body">
          <div v-if="allAnnouncements.length === 0" class="no-announcement">
            暂无公告
          </div>
          <div v-else class="announcement-list">
            <div 
              v-for="item in allAnnouncements" 
              :key="item.id" 
              class="announcement-item"
              :class="{ 'is-top': item.priority === 1 }"
            >
              <div class="announcement-item-header">
                <span v-if="item.priority === 1" class="top-tag">置顶</span>
                <span class="announcement-title">{{ item.title }}</span>
                <span class="announcement-time">{{ formatFullTime(item.createTime) }}</span>
              </div>
              <div class="announcement-content">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { lotteryApi } from '../api/index.js'

export default {
  name: 'LotterySelection',
  data() {
    return {
      showTip: false,
      announcements: [],
      currentNoticeIndex: 0,
      noticeTimer: null,
      showAnnouncementModal: false,
      allAnnouncements: []
    }
  },
  computed: {
    currentNoticeText() {
      if (this.announcements.length === 0) {
        return '暂无公告'
      }
      return this.announcements[this.currentNoticeIndex]?.content || '暂无公告'
    },
    currentNoticeTime() {
      if (this.announcements.length === 0) {
        return ''
      }
      const announcement = this.announcements[this.currentNoticeIndex]
      if (!announcement || !announcement.createTime) {
        return ''
      }
      return this.formatTime(announcement.createTime)
    }
  },
  mounted() {
    this.loadAnnouncements()
    // 记录页面访问PV
    this.recordPV()
  },
  beforeUnmount() {
    this.clearNoticeTimer()
  },
  methods: {
    goToShuangseqiu() {
      this.$router.push('/shuangseqiu')
    },
    goToDaletou() {
      this.$router.push('/daletou')
    },
    goToPremiumVersion() {
      this.$router.push('/lottery-premium')
    },
    showDevelopingTip() {
      this.showTip = true
    },
    hideTip() {
      this.showTip = false
    },
    // 加载公告
    async loadAnnouncements() {
      try {
        const response = await lotteryApi.getTopAnnouncements()
        if (response && response.success && response.data) {
          this.announcements = response.data
          if (this.announcements.length > 1) {
            this.startNoticeTimer()
          }
        }
      } catch (error) {
        console.error('加载公告失败:', error)
      }
    },
    // 开始轮播定时器
    startNoticeTimer() {
      this.clearNoticeTimer()
      this.noticeTimer = setInterval(() => {
        this.currentNoticeIndex = (this.currentNoticeIndex + 1) % this.announcements.length
      }, 10000) // 每10秒切换一次
    },
    // 清除定时器
    clearNoticeTimer() {
      if (this.noticeTimer) {
        clearInterval(this.noticeTimer)
        this.noticeTimer = null
      }
    },
    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp)
      const year = String(date.getFullYear()).slice(-2)
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    // 格式化完整时间
    formatFullTime(timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    // 显示公告列表
    async showAnnouncementList() {
      try {
        const response = await lotteryApi.getPublishedAnnouncements()
        if (response && response.code === 0 && response.data) {
          this.allAnnouncements = response.data
        } else {
          this.allAnnouncements = []
        }
      } catch (error) {
        console.error('获取公告列表失败:', error)
        this.allAnnouncements = []
      }
      this.showAnnouncementModal = true
    },
    // 隐藏公告列表
    hideAnnouncementList() {
      this.showAnnouncementModal = false
    },
    // 记录页面访问PV
    async recordPV() {
      try {
        await lotteryApi.recordPageView('/')
      } catch (error) {
        console.error('记录PV失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.home-page {
  min-height: calc(100vh - 70px);
  background: #f5f5f5;
  overflow-x: hidden;
}

/* Banner区域 */
.banner-section {
  position: relative;
  overflow: hidden;
  height: 55.56vw; /* 9:5宽高比 (5/9 = 0.5556) */
  max-height: 360px;
  min-height: 200px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

.banner-section .banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.banner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.7) 0%, rgba(247, 147, 30, 0.7) 100%);
  z-index: 2;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 20px;
}

.banner-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.banner-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 4px 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.banner-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* 公告区域 */
.notice-section {
  background: #fff2e6;
  border: 1px solid #ffd4a3;
  margin: 16px auto;
  max-width: calc(100% - 32px);
  padding: 8px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.notice-section:hover {
  background: #ffe8cc;
  border-color: #ffb366;
}

.notice-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.notice-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 20px;
}

.notice-text {
  font-size: 14px;
  color: #d48806;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-time {
  font-size: 12px;
  color: #d48806;
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

/* 公告轮播动画 */
.notice-slide-enter-active,
.notice-slide-leave-active {
  transition: all 0.5s ease;
}

.notice-slide-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.notice-slide-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

/* 彩票区域 */
.lottery-section {
  margin: 16px auto;
  margin-bottom: 24px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
}

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

.section-title {
  font-size: 18px;
  font-weight: bold;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px 0;
  padding-left: 4px;
}

.section-header .section-title {
  margin-bottom: 0;
}

.premium-btn {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.premium-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
  background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
}

.premium-btn:active {
  transform: translateY(0);
}

.lottery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.lottery-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 110px;
  width: 100%;
  box-sizing: border-box;
}

.lottery-card.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border-color: #ff6b35;
}

.lottery-card.disabled {
  opacity: 0.85;
}

.lottery-card.disabled:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.lottery-icon {
  width: 96px;
  height: 96px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lottery-icon img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
}

.lottery-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lottery-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.lottery-desc {
  font-size: 12px;
  color: #666;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

  .lottery-status {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
  }

.lottery-status.available {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.lottery-status.developing {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

/* 体育彩票渐变样式 */
.sports-orange-gradient {
  background: linear-gradient(90deg, rgba(254, 150, 51, 1) 0%, rgba(246, 102, 77, 1) 100%) !important;
  color: white !important;
  border: none !important;
}

.sports-orange-gradient .lottery-name,
.sports-orange-gradient .lottery-desc {
  color: white !important;
}

.sports-yellow-gradient {
  background: linear-gradient(90deg, rgba(251, 216, 48, 1) 0%, rgba(255, 174, 1, 1) 100%) !important;
  color: white !important;
  border: none !important;
}

.sports-yellow-gradient .lottery-name,
.sports-yellow-gradient .lottery-desc {
  color: white !important;
}

.sports-blue-gradient {
  background: linear-gradient(90deg, rgba(77, 225, 219, 1) 0%, rgba(39, 138, 241, 1) 100%) !important;
  color: white !important;
  border: none !important;
}

.sports-blue-gradient .lottery-name,
.sports-blue-gradient .lottery-desc {
  color: white !important;
}

.sports-purple-gradient {
  background: linear-gradient(90deg, rgba(191, 132, 252, 1) 0%, rgba(114, 89, 248, 1) 100%) !important;
  color: white !important;
  border: none !important;
}

.sports-purple-gradient .lottery-name,
.sports-purple-gradient .lottery-desc {
  color: white !important;
}

/* 福利彩票渐变样式 */
.welfare-red-gradient {
  background: linear-gradient(90deg, rgba(254, 150, 51, 1) 0%, rgba(246, 102, 77, 1) 100%) !important;
  color: white !important;
  border: none !important;
}

.welfare-red-gradient .lottery-name,
.welfare-red-gradient .lottery-desc {
  color: white !important;
}

.welfare-yellow-gradient {
  background: linear-gradient(90deg, rgba(251, 216, 48, 1) 0%, rgba(255, 174, 1, 1) 100%) !important;
  color: white !important;
  border: none !important;
}

.welfare-yellow-gradient .lottery-name,
.welfare-yellow-gradient .lottery-desc {
  color: white !important;
}

.welfare-blue-gradient {
  background: linear-gradient(90deg, rgba(77, 225, 219, 1) 0%, rgba(39, 138, 241, 1) 100%) !important;
  color: white !important;
  border: none !important;
}

.welfare-blue-gradient .lottery-name,
.welfare-blue-gradient .lottery-desc {
  color: white !important;
}

.welfare-purple-gradient {
  background: linear-gradient(90deg, rgba(191, 132, 252, 1) 0%, rgba(114, 89, 248, 1) 100%) !important;
  color: white !important;
  border: none !important;
}

.welfare-purple-gradient .lottery-name,
.welfare-purple-gradient .lottery-desc {
  color: white !important;
}

/* 渐变卡片的状态标签样式 */
.sports-orange-gradient .lottery-status,
.sports-yellow-gradient .lottery-status,
.sports-blue-gradient .lottery-status,
.sports-purple-gradient .lottery-status,
.welfare-red-gradient .lottery-status,
.welfare-yellow-gradient .lottery-status,
.welfare-blue-gradient .lottery-status,
.welfare-purple-gradient .lottery-status {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.tip-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.tip-content {
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  max-width: 300px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

.tip-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.tip-content h3 {
  font-size: 18px;
  color: #333;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.tip-content p {
  color: #666;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.tip-button {
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tip-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.tip-button:active {
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-section {
    height: 55.56vw;
    max-height: 280px;
    min-height: 190px;
  }
  
  .banner-content {
    flex-direction: row;
    text-align: left;
    padding: 16px;
  }
  
  .banner-title {
    font-size: 22px;
  }
  
  .banner-subtitle {
    font-size: 13px;
  }
  
  .lottery-section {
    margin: 12px auto;
    margin-bottom: 20px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .premium-btn {
    font-size: 15px;
    padding: 4px 10px;
    min-width: 90px;
  }
  
  .lottery-grid {
    gap: 10px;
  }
  
  .lottery-card {
    padding: 14px;
    min-height: 100px;
  }
  
  .lottery-icon {
    width: 84px;
    height: 84px;
    margin-right: 10px;
    margin-bottom: 0;
  }
  
  .lottery-icon img {
    width: 84px;
    height: 84px;
  }
  
  .lottery-name {
    font-size: 15px;
  }
  
  .lottery-desc {
    font-size: 11px;
    margin-bottom: 10px;
  }
}

/* 专门针对430px宽度的屏幕 */
@media (max-width: 430px) {
  .banner-section {
    height: 239px; /* 430 * 5/9 ≈ 239 */
  }
}

@media (max-width: 480px) {
  .tip-overlay {
    padding: 16px;
  }
  
  .tip-content {
    padding: 24px 20px;
    border-radius: 12px;
  }
  
  .tip-icon {
    font-size: 32px;
    margin-bottom: 12px;
  }
  
  .tip-content h3 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .tip-content p {
    font-size: 13px;
    margin-bottom: 16px;
  }
  
  .tip-button {
    padding: 8px 20px;
    font-size: 13px;
  }
  
  .banner-section {
    height: 55.56vw;
    max-height: 239px;
    min-height: 180px;
  }
  
  .banner-content {
    padding: 12px;
  }
  
  .banner-icon {
    font-size: 28px;
    margin-bottom: 6px;
  }
  
  .banner-title {
    font-size: 20px;
  }
  
  .banner-subtitle {
    font-size: 12px;
  }
  
  .notice-section {
    margin: 12px auto;
    max-width: calc(100% - 24px);
    padding: 8px 8px 8px 8px;
  }
  
  .notice-text {
    font-size: 13px;
  }
  
  .lottery-section {
    margin: 8px auto;
    margin-bottom: 16px;
    max-width: calc(100% - 16px);
  }
  
  .section-title {
    font-size: 15px;
  }
  
  .premium-btn {
    font-size: 14px;
    padding: 3.5px 9px;
    min-width: 80px;
  }
  
  .lottery-grid {
    gap: 8px;
  }
  
  .lottery-card {
    padding: 12px;
    min-height: 88px;
  }
  
  .lottery-icon {
    width: 72px;
    height: 72px;
    margin-right: 8px;
    margin-bottom: 0;
  }
  
  .lottery-icon img {
    width: 72px;
    height: 72px;
  }
  
  .lottery-name {
    font-size: 16px;
  }
  
  .lottery-desc {
    font-size: 13px;
    margin-bottom: 8px;
  }
  
      .lottery-status {
      font-size: 10px;
      padding: 3px 6px;
      top: 10px;
      right: 10px;
    }
}

/* 超小屏幕优化 */
@media (max-width: 400px) {
  .lottery-card {
    padding: 10px;
    min-height: 90px;
  }
  
  .lottery-icon {
    width: 60px;
    height: 60px;
    margin-right: 8px;
  }
  
  .lottery-icon img {
    width: 60px;
    height: 60px;
  }
  
  .lottery-name {
    font-size: 14px;
    margin-bottom: 2px;
  }
  
  .lottery-desc {
    font-size: 11px;
    margin-bottom: 0;
    line-height: 1.2;
  }
  
  .lottery-status {
    font-size: 9px;
    padding: 2px 4px;
    top: 8px;
    right: 8px;
    border-radius: 4px;
  }
  
  .lottery-grid {
    gap: 8px;
  }
  
  .lottery-section {
    margin: 12px auto;
    margin-bottom: 16px;
    max-width: calc(100% - 24px);
  }
  
  .section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

/* 桌面端样式 */
@media (min-width: 1024px) {
  .home-page {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .banner-section {
    height: 55.56vw;
    max-height: 380px;
    min-height: 240px;
  }
  
  .banner-content {
    padding: 40px;
  }
  
  .banner-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  
  .banner-title {
    font-size: 32px;
  }
  
  .banner-subtitle {
    font-size: 16px;
  }
  
  .lottery-section {
    margin: 24px 40px 32px 40px;
  }
  
  .section-header {
    margin-bottom: 20px;
  }
  
  .section-title {
    font-size: 22px;
  }
  
  .premium-btn {
    font-size: 17px;
    padding: 6px 14px;
    min-width: 120px;
  }
  
  .lottery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  
  .lottery-card {
    padding: 20px;
    min-height: 160px;
    flex-direction: column;
    text-align: center;
  }
  
  .lottery-icon {
    width: 80px;
    height: 80px;
    margin-right: 0;
    margin-bottom: 16px;
    align-self: center;
  }
  
  .lottery-icon img {
    width: 80px;
    height: 80px;
  }
  
  .lottery-info {
    align-items: center;
    text-align: center;
  }
  
  .lottery-name {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .lottery-desc {
    font-size: 13px;
    margin-bottom: 0;
  }
  
  .lottery-status {
    font-size: 13px;
    padding: 5px 10px;
    position: static;
    margin-top: 8px;
    align-self: center;
  }
}

/* 公告列表弹窗样式 */
.announcement-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.announcement-modal-content {
  background: white;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.announcement-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.announcement-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #333;
}

.announcement-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.no-announcement {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.announcement-item {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

.announcement-item:hover {
  background: #f5f5f5;
  border-color: #ddd;
}

.announcement-item.is-top {
  background: #fff8e6;
  border-color: #ffd591;
}

.announcement-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.top-tag {
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.announcement-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.announcement-time {
  font-size: 12px;
  color: #999;
}

.announcement-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;
  word-break: break-word;
}

.announcement-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

@media (max-width: 480px) {
  .announcement-modal-content {
    max-height: 90vh;
    border-radius: 12px;
  }
  
  .announcement-modal-header {
    padding: 16px 20px;
  }
  
  .announcement-modal-body {
    padding: 12px 16px;
  }
  
  .announcement-item {
    padding: 12px;
  }
  
  .announcement-title {
    font-size: 15px;
  }
  
  .announcement-content {
    font-size: 13px;
  }
}
</style>