DaLiEH/web/src/views/gui/component/issue.vue

<!--  -->
<template>
  <div class="issue">
    <div class="main">
      <div class="top">
        <h2 v-if="flag === 'tow'">{{ Mylangue ? "趣味课题" : "Quiz" }}</h2>
        <h2 v-else>&nbsp;</h2>
        <i class="el-icon-close" @click="$emit('close')"></i>
      </div>
      <!-- 开始答题 -->
      <div class="begin" v-show="flag === 'one'">
        <div class="begin_left">
          <div class="renwen"></div>
        </div>
        <div class="begin_right">
          <template v-if="Mylangue">
            <p>欢迎来到</p>
            <p>大理洱海科普教育中心趣味问答小游戏，</p>
            <p>您将随机抽取二十道题进行作答，</p>
            <p>答对十二题及以上为闯关成功！</p>
          </template>
          <p v-else>
            You will be given a random selection of 20 questions to answer, and
            if you answer 12 questions correctly or above, you will be declared
            a winner.
          </p>
          <div class="btnn" @click="beginTopic">{{Mylangue?'开始答题':'Start'}}</div>
        </div>
      </div>
      <!-- 答题页面 -->
      <div class="topic" v-if="flag === 'tow'">
        <div class="conBox">
          <p class="topicTxt">
            {{ topicInd + 1 }}.{{ topic[topicInd].title }}---{{
              topic[topicInd].correct
            }}
          </p>
          <!-- 答对或答错之后的页面颜色变化 -->
          <ul class="topic_con" v-if="caseErr">
            <li
              v-for="(item, index) in topic[topicInd].answer"
              :key="index"
              :class="{
                cuoWu: caseABC === item.id,
                zhengQue: item.id === topic[topicInd].correct,
              }"
            >
              <div class="case">
                <!-- 选中了之后的显示 -->
                <div></div>
              </div>
              <span :class="{ active: caseInd === index }">{{
                item.id + "、" + item.txt
              }}</span>
            </li>
          </ul>
          <!-- 答题--选择答案 -->
          <ul class="topic_con" v-else>
            <li
              v-for="(item, index) in topic[topicInd].answer"
              :key="index"
              :class="{ xuanze: caseInd === index }"
            >
              <div class="case" @click="select(index, item.id)">
                <!-- 选中了之后的显示 -->
                <div></div>
              </div>
              <span
                @click="select(index, item.id)"
                :class="{ active: caseInd === index }"
                >{{ item.id + "、" + item.txt }}</span
              >
            </li>
          </ul>
        </div>
        <!-- 下面的按钮 -->
        <div class="topic_btn" @click="nextTi" v-if="caseErr">
          {{ topicInd < 20 ? `${Mylangue?'下一题':'Next'}` : `${Mylangue?'完成问答':'accomplish'}` }}
        </div>
        <div class="topic_btn" @click="btnOk" v-else>{{Mylangue?'确 定':'Confirm'}}</div>
      </div>

      <!-- 答对通关 -->
      <div class="topicDui" v-if="flag === 'three'">
        <img class="tini" src="@/assets/img/win.png" alt="" />
        <div>
          <p>{{Mylangue?'您的得分：':'Your Score：'}}{{ cunot + "0" }}</p>
          <p>{{Mylangue?'分享海报，传播洱海的美丽文化！':"Share this poster to spread the word about Erhai's rich culture."}}</p>
          <img src="share/shareM.png" alt="" v-if="isMobile" />
          <img src="share/share.png" alt="" v-else />
          <a class="btnn" href="share/shareM.png" download v-if="isMobile"
            >保存海报</a
          >
          <a class="btnn" href="share/share.png" download v-else>{{Mylangue?'保存海报':'Save the poster'}}</a>
        </div>
      </div>
      <!-- 答错失败 -->
      <div class="topicCuo" v-if="flag === 'four'">
        <img src="@/assets/img/lose.png" alt="" />
        <p>{{Mylangue?'您的得分：':'Your Score：'}}{{ cunot + "0" }}</p>
        <p>{{Mylangue?'失败乃兵家常事，大侠请重头再来':'Try again!'}}</p>
        <div @click="beginTopic()">{{Mylangue?'重新开始':'Restart'}}</div>
      </div>
    </div>
  </div>
</template>

<script>
//引入题目
import { questions } from "./data.js";
export default {
  name: "issue",
  components: {},
  data() {
    //这里存放数据
    return {
      flag: "one",
      // 题目组
      topic: [],
      topicInd: 0, //用来控制题目的索引
      cunot: 0, //用来记录答对的题目个数
      caseInd: null, //用来控制选择的样式
      caseABC: null, //用来记录当前选择的答案，进行判断
      caseErr: "", //点击确定判断答对了还是错了'zhengQue'--答对；'cuoWu'--答错
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //点击答错里面的下一题
    nextTi() {
      // 最后一题
      if (this.topicInd === 19 && this.cunot >= 12) {
        this.flag = "three";
      } else if (this.topicInd === 19 && this.cunot < 12) {
        this.flag = "four";
      }
      this.caseErr = "";
      if (this.topicInd < 20) this.topicInd++;
    }, //选择题目
    select(index, id) {
      this.caseInd = index;
      this.caseABC = id;
    },
    //点击确定
    btnOk() {
      if (this.caseInd === null) return this.$message.warning(`${this.Mylangue?'未选择答案':'No Answer is Selected'}`);
      if (this.topic[this.topicInd].correct === this.caseABC) {
        // console.log('答对了');
        this.caseErr = "zhengQue";
        this.cunot++;
      } else {
        // console.log('答错了');
        this.caseErr = "cuoWu";
      }
      this.caseInd = null;
    },
    // 点击开始答题
    beginTopic() {
      this.caseInd = null;
      this.cunot = 0;
      this.topicInd = 0;
      this.caseErr = "";
      this.flag = "tow";
      this.getTopic();
    },
    // 封装随机获取10道题目
    getTopic() {
      this.topic = [];
      let arr = [];
      for (let i = 0; i < 101; i++) {
        //一个从0到101的数组
        arr.push(i);
      }
      arr.sort(function () {
        //随机打乱这个数组
        return Math.random() - 0.5;
      });
      arr.length = 20; //改写长度
      arr.forEach((v) => {
        this.topic.push(questions[v]);
      });
      // console.log(999, this.topic); //控制台会输出20个不同的数
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log('题目长度',questions.length);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
::-webkit-scrollbar-thumb {
  outline: 2px solid #165491;
}
.issue {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  .main {
    padding: 20px;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 1100px;
    height: 700px;
    background: url("../../../assets/img/bg.png");
    background-size: 100% 100%;
    .top {
      margin-bottom: 20px;
      margin-top: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #165491;
      font-weight: 700;
      font-size: 22px;
      & > i {
        cursor: pointer;
        font-size: 30px;
      }
    }
    .begin {
      margin: 20px auto 0;
      display: flex;
      width: 750px;
      height: 450px;
      .begin_left {
        position: relative;
        width: 286px;
        height: 470px;
        background: url("../../../assets/img/issue.png");
        background-size: 100% 100%;
        .renwen {
          position: absolute;
          left: 10px;
          bottom: 0;
          width: 45px;
          height: 88px;
          background: url("../../../assets/img/renwen.png");
          background-size: 100% 100%;
        }
      }
      .begin_right {
        padding-top: 80px;
        flex: 1;
        color: #fff;
        & > p {
          text-align: center;
          margin-bottom: 20px;
          font-size: 24px;
          &:nth-of-type(1) {
            width: 94%;
          }
        }
        .btnn {
          padding-right: 20px;
          cursor: pointer;
          margin: 100px auto 0;
          width: 257px;
          height: 75px;
          background: url("../../../assets/img/btn.png");
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
        }
      }
    }
    .topic {
      position: relative;
      padding: 30px 50px;
      border-radius: 3px;
      width: 100%;
      height: 530px;
      background-color: rgba(22, 84, 145, 0.5);
      color: #fff;
      .topicTxt {
        font-size: 20px;
        line-height: 30px;
      }
      .topic_con {
        width: 90%;
        margin: 0 auto;
        li {
          display: flex;
          height: 80px;
          align-items: center;
          .case {
            cursor: pointer;
            width: 30px;
            height: 30px;
            border: 2px solid #fff;
            margin-right: 30px;
            border-radius: 50%;
            & > div {
              margin: 3px;
              width: 20px;
              height: 20px;
              background-color: transparent;
              border-radius: 50%;
            }
          }
          & > span {
            font-size: 18px;
          }
        }
        .xuanze {
          .case {
            & > div {
              background-color: #fff;
            }
          }
        }
        .cuoWu {
          .case {
            & > div {
              background-color: #FF5050;
            }
          }
        }
        .zhengQue {
          .case {
            & > div {
              background-color: #50FFA2;
            }
          }
        }
      }
      .topic_btn {
        padding-right: 20px;
        cursor: pointer;
        margin: 10px auto 0;
        width: 257px;
        height: 75px;
        background: url("../../../assets/img/btn.png");
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
      }
      .error {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        p {
          margin: 20px;
          font-size: 24px;
          text-align: center;
        }
        div {
          padding-right: 20px;
          cursor: pointer;
          margin: 10px auto 0;
          width: 257px;
          height: 75px;
          background: url("../../../assets/img/btn.png");
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
        }
      }
    }
    // 答题失败的页面
    .topicCuo {
      width: 100%;
      text-align: center;
      color: #fff;
      & > img {
        width: 300px;
        height: 300px;
      }
      & > p {
        text-align: center;
        font-size: 20px;
        margin: 15px 0;
      }
      & > div {
        padding-right: 20px;
        cursor: pointer;
        margin: 80px auto 0;
        width: 257px;
        height: 75px;
        background: url("../../../assets/img/btn.png");
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
      }
    }
    // 答题通过的页面
    .topicDui {
      color: #fff;
      .tini {
        position: absolute;
        top: 60px;
        left: 10px;
      }
      & > div {
        text-align: center;
        & > p {
          font-size: 22px;
        }
        & > img {
          margin: 30px 0;
          max-width: 600px;
          max-height: 410px;
        }
        .btnn {
          padding-right: 20px;
          cursor: pointer;
          margin: 0px auto 0;
          width: 257px;
          height: 75px;
          background: url("../../../assets/img/btn.png");
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
        }
      }
    }
  }
}
@media only screen and (max-width: 800px) {
  .issue {
    .main {
      top: auto;
      bottom: 5px;
      transform: translate(-50%, 0);
      width: 100%;
      max-width: 350px;
      height: calc(100vh - 40px);
      background: url("../../../assets/imgM/bg.png");
      background-size: 100% 100%;
      padding-top: 70px;
      .top {
        margin-bottom: 5px;
        margin-top: 0;
      }
      .begin {
        width: 100%;
        margin: 0 auto;
        display: block;
        .begin_left {
          margin: 0 auto;
          width: 130px;
          height: 240px;
          .renwen {
            left: -15px;
          }
        }
        .begin_right {
          padding-top: 10px;
          & > p {
            font-size: 16px;
          }
          .btnn {
            padding-right: 10px;
            width: 140px;
            height: 42px;
            margin: 10px auto 0;
            font-size: 16px;
          }
        }
      }
      .topic {
        padding: 10px;
        height: calc(100% - 35px);
        .topicTxt {
          font-size: 18px;
          line-height: 24px;
        }
        .topic_con {
          & > li {
            height: auto;
            padding: 10px 0;
            font-size: 16px;
            .case {
              width: 20px;
              height: 20px;
              margin-right: 15px;
              min-width: 20px;
              & > div {
                width: 10px;
                height: 10px;
              }
            }
          }
        }
        .conBox {
          height: calc(100% - 60px);
          overflow-y: auto;
        }
        .topic_btn {
          padding-right: 10px;
          position: absolute;
          left: 50%;
          bottom: 20px;
          transform: translateX(-50%);
          width: 140px;
          height: 42px;
          font-size: 16px;
        }
        .error {
          & > p {
            font-size: 16px;
          }
          .errBtn {
            padding-right: 10px;
            width: 140px;
            height: 42px;
            margin: 10px auto 0;
            font-size: 16px;
          }
        }
      }
      .topicCuo {
        & > img {
          width: 200px;
          height: 200px;
        }
        & > div {
          padding-right: 10px;
          width: 140px;
          height: 42px;
          margin: 50px auto 0;
          font-size: 16px;
        }
      }
      .topicDui {
        padding-top: 60px;
        .tini {
          width: 120px;
          height: 120px;
          left: 50%;
          transform: translateX(-50%);
          top: 55px;
        }
        & > div {
          & > p {
            font-size: 16px;
          }
          & > img {
            max-height: 280px;
          }
          .btnn {
            padding-right: 10px;
            width: 140px;
            height: 42px;
            margin: 10px auto 0;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>