login_task_web/src/components/play/GamePage.vue

<template>
  <div class="game-page">
    <!-- 顶部标签页 -->
    <div class="tab-header">
      <div class="tab-item active">代练大区</div>
      <div class="tab-item status-tab">状态</div>
      <div class="tab-item target-tab">目标点数</div>
    </div>
    <div class="tab-header">
      <div class="tab-item active">{{ regionDesc || (region === 'Q' ? 'QQ区' : region === 'V' ? '微信区' : region) }}</div>
      <div class="tab-item status-tab">{{ displayStatus }}</div>
      <div class="tab-item target-tab" v-if="progressDisplayFormat === '1'">{{ completedPoints || 0 }}/{{ totalPoints || 0 }}</div>
      <div class="tab-item target-tab" v-else>差：{{ remainingPoints }}</div>

    </div>
    

    <div class="tab-content">
      <!-- 状态提示 -->
      <div class="status-message" :class="statusMessageClass">
        {{ statusMessage }}
      </div>
      <!-- 游戏截图展示区域 -->
      <div class="image-gallery">
        <div class="image-item" v-if="machineId">
          <img :src="`https://uzi1.cn/image/${machineId}/首次主页.png?t=${timestamp}`"  alt="首次主页" class="game-image" />
          <div class="image-label">首次主页</div>
        </div>
        <div class="image-item" v-if="machineId">
          <img :src="`https://uzi1.cn/image/${machineId}/首次赏金.png?t=${timestamp}`" alt="首次赏金" class="game-image" style="transform: rotate(-90deg);" />
          <div class="image-label">首次赏金</div>
        </div>
        <div class="image-item" v-if="machineId">
          <img :src="`https://uzi1.cn/image/${machineId}/中途赏金.png?t=${timestamp}`" alt="中途赏金" class="game-image" />
          <div class="image-label">中途赏金</div>
        </div>
        <div class="image-item" v-if="machineId">
          <img :src="`https://uzi1.cn/image/${machineId}/结束赏金.png?t=${timestamp}`" alt="结束赏金" class="game-image" />
          <div class="image-label">结束赏金</div>
        </div>
      </div>

      <!-- 底部状态显示 -->
      <div class="bottom-status">
        ID: {{ machineId || 'N/A' }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GamePage',
  props: {
    region: {
      type: String,
      required: true
    },
    regionDesc: {
      type: String,
      default: null
    },
    machineId: {
      type: String,
      default: null
    },
    displayStatus: {
      type: String,
      required: true
    },
    completedPoints: {
      type: Number,
      default: 0
    },
    totalPoints: {
      type: Number,
      default: 0
    },
    statusMessage: {
      type: String,
      required: true
    },
    statusMessageClass: {
      type: String,
      default: ''
    },
    assets: {
      type: Object,
      default: null
    },
    currentPoints: {
      type: Number,
      default: 0
    },
    codeNo: {
      type: String,
      default: null
    },
    progressDisplayFormat: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      timestamp: Date.now()
    }
  },
  computed: {
    remainingPoints() {
      const total = this.totalPoints || 0
      const completed = this.completedPoints || 0
      const diff = total - completed
      return diff > 0 ? diff : 0
    }
  },
  mounted() {
    this.setupImageRefresh()
  },
  methods: {
    setupImageRefresh() {
      setInterval(() => {
        this.timestamp = Date.now()
      }, 5000)
    }
  }
}
</script>

<style scoped>
.game-page {
  flex: 1;
  background: white;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.tab-header {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.tab-item {
  flex: 1;
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: #4CAF50;
  color: white;
  border-bottom-color: #4CAF50;
}

.tab-item.status-tab {
  background: #2196F3;
  color: white;
}

.tab-item.target-tab {
  color: #f44336;
  font-weight: 600;
}

.tab-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.status-message {
  background: #fff3cd;
  color: #856404;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  border-left: 4px solid #f44336;
}

.status-message-completed {
  background: #d4edda !important;
  color: #155724 !important;
  border-left: 4px solid #28a745 !important;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.game-image {
  width: 100%;
  max-width: 150px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
}

.image-label {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  text-align: center;
}

.bottom-status {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  margin: 0 -16px -16px -16px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

@media (max-width: 768px) {
  .tab-item {
    padding: 10px 8px;
    font-size: 12px;
  }
  
  .status-message {
    font-size: 13px;
    padding: 10px 12px;
  }
  
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .image-item {
    padding: 8px;
  }
  
  .game-image {
    max-width: 120px;
  }
  
  .image-label {
    font-size: 11px;
  }
}
</style>