cpzs-frontend/lottery-app/src/views/LotteryInfo.vue

<template>
  <div class="lottery-info-page">
    <!-- 公告区域 -->
    <div class="notice-section">
      <div class="notice-icon">📊</div>
      <div class="notice-text">实时开奖结果查询，历史数据分析</div>
    </div>

    <!-- 彩票种类区域 -->
    <div class="lottery-section">
      <h2 class="section-title">中国福利彩票</h2>
      <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">
          <svg class="developing-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
          </svg>
        </div>
        <h3>功能开发中</h3>
        <p>该彩票类型的开奖信息查询功能正在开发中，敬请期待！</p>
        <div class="tip-actions">
          <button class="tip-button" @click="hideTip">我知道了</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LotteryInfo',
  data() {
    return {
      showTip: false
    }
  },
  methods: {
    goToShuangseqiu() {
      // 这里可以跳转到双色球开奖信息页面
      this.$router.push('/lottery-info/ssq')
    },
    goToDaletou() {
      // 跳转到大乐透开奖信息页面
      this.$router.push('/lottery-info/dlt')
    },
    showDevelopingTip() {
      this.showTip = true
    },
    hideTip() {
      this.showTip = false
    }
  }
}
</script>

<style scoped>
.lottery-info-page {
  min-height: calc(100vh - 70px);
  background: #f5f5f5;
  overflow-x: hidden;
  padding-top: 16px; /* 顶部添加一些间距，因为没有banner */
}

/* 公告区域 */
.notice-section {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  margin: 16px;
  padding: 8px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

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

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

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

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 16px 0;
  padding-left: 4px;
}

.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: #1890ff;
}

.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.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.tip-content {
  background: white;
  border-radius: 16px;
  padding: 30px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
  border: 2px solid rgba(24, 144, 255, 0.1);
}

.tip-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(24, 144, 255, 0.3);
}

.developing-icon {
  width: 32px;
  height: 32px;
  color: white;
}

.tip-content h3 {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.tip-content p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 25px;
}

.tip-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.tip-button {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  min-width: 100px;
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  color: white;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
}

.tip-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .lottery-info-page {
    padding-top: 12px;
  }
  
  .lottery-section {
    margin: 12px;
    margin-bottom: 20px;
  }
  
  .section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .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;
  }
}

@media (max-width: 480px) {
  .lottery-info-page {
    padding-top: 8px;
  }
  
  .tip-content {
    padding: 25px 20px;
    margin: 0 15px;
  }
  
  .tip-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 15px;
  }
  
  .developing-icon {
    width: 28px;
    height: 28px;
  }
  
  .tip-content h3 {
    font-size: 18px;
  }
  
  .tip-content p {
    font-size: 14px;
  }
  
  .tip-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .tip-button {
    width: 100%;
    padding: 14px 20px;
  }
  
  .notice-section {
    margin: 12px;
    padding: 8px 8px 8px 8px;
  }
  
  .notice-text {
    font-size: 13px;
  }
  
  .lottery-section {
    margin: 8px;
    margin-bottom: 16px;
  }
  
  .section-title {
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .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;
    margin-bottom: 16px;
  }
  
  .section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

/* 桌面端样式 */
@media (min-width: 1024px) {
  .lottery-info-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
  }
  
  .lottery-section {
    margin: 24px 40px 32px 40px;
    padding-right: 16px;
  }
  
  .section-title {
    font-size: 22px;
    margin-bottom: 20px;
  }
  
  .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;
  }
}
</style>