先上效果图

 

 样式

<template>
  <div class="activity-questions">
    <h1>活动题库</h1>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else>
      <div v-if="questions.length === 0" class="no-questions">暂无题库</div>
      <div v-else class="questions-container">
        <div v-for="question in questions" :key="question.id" class="question-item">
          <img v-if="question.image_url" :src="question.image_url" alt="题目图片" class="question-image" />
          <p class="question-text">{{ question.description }}</p>
          <div class="options">
            <p v-if="question.option_a">A: {{ question.option_a }}</p>
            <p v-if="question.option_b">B: {{ question.option_b }}</p>
            <p v-if="question.option_c">C: {{ question.option_c }}</p>
            <p v-if="question.option_d">D: {{ question.option_d }}</p>
            <p v-if="question.option_e">E: {{ question.option_e }}</p>
            <p v-if="question.option_f">F: {{ question.option_f }}</p>
            <p v-if="question.option_g">G: {{ question.option_g }}</p>
            <p v-if="question.option_h">H: {{ question.option_h }}</p>
            <p v-if="question.option_i">I: {{ question.option_i }}</p>
            <p v-if="question.option_j">J: {{ question.option_j }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getQuestionsByActivityConfig } from '@/api/biz/biz_question';

export default {
  name: 'ActivityQuestions',
  data() {
    return {
      activityId: null,
      questions: [],
      loading: true,
    };
  },
  async created() {
    const urlParams = new URLSearchParams(window.location.search);
    this.activityId = urlParams.get('activity_id') || '1';

    if (this.activityId) {
      try {
        const response = await getQuestionsByActivityConfig(this.activityId);
        if (response && response.code === 200) {
          this.questions = response.data;
        } else {
          console.error('题库加载失败', response);
        }
      } catch (error) {
        console.error('获取题库时发生错误', error);
      } finally {
        this.loading = false;
      }
    } else {
      console.error('活动ID未提供');
      this.loading = false;
    }
  },
};
</script>

<style scoped>
.activity-questions {
  text-align: center;
  padding: 20px;
}
.loading {
  font-size: 18px;
  color: #888;
}
.no-questions {
  font-size: 18px;
  color: #888;
}
.questions-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  justify-content: center;
}
.question-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.question-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.question-text {
  font-size: 18px;
  margin-top: 10px;
  font-weight: bold;
}
.options p {
  font-size: 16px;
  margin: 5px 0;
}
</style>