JingTieXueTang.H5/src/views/home/answer/page-answer.vue

<template>
  <div class="page-answer-box">
    <!-- 答题练习 -->
    <div class="answer-practice">
      <div class="answer-practice-title">答题练习</div>
      <div class="answer-practice-describe">坚持练习掌握优质内容</div>
      <div class="answer-practice-list">
        <div
          class="answer-practice-item"
          v-for="(item, index) in answerPracticeList"
          :key="index"
          @click="handleClickAnswerPracticeFun(item)"
        >
          <div class="answer-practice-item-img">
            <van-image width="100%" height="100%" :src="item.url" fit="cover" />
          </div>
          <div class="answer-practice-item-type-name">{{ item.type.name }}</div>
          <div class="answer-practice-item-title">
            <div>{{ item.title[0] }}</div>
            <div>{{ item.title[1] }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 竞赛答题 -->
    <div class="answer-race">
      <div class="answer-race-title">竞赛答题</div>
      <div class="answer-race-list">
        <div
          class="answer-race-item"
          v-for="(item, index) in answerRaceList"
          :key="index"
          @click="handleClickAnswerRaceFun(item)"
        >
          <div class="answer-race-item-title">{{ item.title }}</div>
          <div class="answer-race-item-describe">{{ item.describe }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "page-answer",
  components: {},
  data() {
    return {
      answerPracticeList: [], // 答题练习的列表数据
      answerRaceList: [] // 竞赛答题的列表数据
    };
  },
  computed: {},
  created() {
    this.initDataFun(); // 初始化数据
  },
  methods: {
    // 初始化数据
    initDataFun() {
      this.getAnswerPracticeListFun(); // 查询：答题练习的列表数据
      this.getAnswerRaceListFun(); // 查询：竞赛答题的列表数据
    },
    // 查询：答题练习的列表数据
    getAnswerPracticeListFun() {
      this.answerPracticeList = [
        {
          id: 1,
          url: require("@/assets/image/answer/01.png"),
          title: ["不积跬步", "无以至千里"],
          type: { name: "今日答题", code: "daily-questions" }
        },
        {
          id: 2,
          url: require("@/assets/image/answer/02.png"),
          title: ["周而复始", "方得始终"],
          //   weekly-questions
          type: { name: "每周答题", code: "daily-questions" }
        },
        {
          id: 3,
          url: require("@/assets/image/answer/03.png"),
          title: ["闻道有先后", "术业有专攻"],
          type: { name: "专项答题", code: "daily-questions" }
        }
      ];
    },
    // 查询：竞赛答题的列表数据
    getAnswerRaceListFun() {
      this.answerRaceList = [
        {
          id: 1,
          title: "闯关答题",
          describe: "10题一关，答对继续，答错出局"
        }
        // {
        //   id: 2,
        //   title: "双人PK",
        //   describe: "两两PK，舍我其谁"
        // }
      ];
    },
    // 操作：点击了答题练习中的某个
    handleClickAnswerPracticeFun(item) {
      this.$store.commit("updateAnswerItemStore", {
        field: "answerRecruitId",
        value: item.type.code // item.id
      });
      this.$router.push({ name: "answerRecruit" });
    },
    // 操作：点击了竞赛答题中的某个
    handleClickAnswerRaceFun(item) {
      switch (item.id) {
        case this.answerRaceList[0].id:
          this.$router.push({ name: "throughQuestionStart" });
          break;
        case this.answerRaceList[1].id:
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.page-answer-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.6rem;
  .answer-practice {
    padding: 0.5rem 0.5rem;
    border-bottom: 2px solid #e6e6e6;
    .answer-practice-title {
      padding-bottom: 0.5rem;
      font-size: 0.7rem;
      color: #000;
      font-weight: bold;
    }
    .answer-practice-describe {
      margin-bottom: 0.5rem;
      font-size: 0.65rem;
      color: #8d8d8d;
    }
    .answer-practice-list {
      display: flex;
      justify-content: space-between;
      .answer-practice-item {
        width: 31%;
        padding: 0.75rem 0;
        border: 1px solid #e4e8eb;
        border-radius: 4px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        .answer-practice-item-img {
          width: 2rem;
          height: 2rem;
          overflow: hidden;
        }
        .answer-practice-item-title {
          font-size: 0.6rem;
          margin-top: 0.25rem;
        }
        .answer-practice-item-type-name {
          font-size: 0.7rem;
          font-weight: bold;
          margin: 0.3rem;
        }
      }
    }
  }
  .answer-race {
    padding: 0.5rem 0.5rem;
    .answer-race-title {
      padding-bottom: 0.5rem;
      font-size: 0.7rem;
      color: #000;
      font-weight: bold;
    }
    .answer-race-item {
      padding: 0 0.5rem 0.5rem;
      margin-bottom: 0.7rem;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      .answer-race-item-title {
        height: 2rem;
        border-bottom: 1px solid #e4e8eb;
        line-height: 2rem;
        text-align: center;
        font-size: 0.7rem;
        font-weight: bold;
        color: #000;
      }
      .answer-race-item-describe {
        margin: 0.5rem 0;
      }
    }
  }
}
</style>