|
|
@@ -8,7 +8,11 @@
|
|
|
<i class="el-icon-close" @click="$emit('close')"></i>
|
|
|
</div>
|
|
|
<!-- 开始答题 -->
|
|
|
- <div class="begin" v-show="flag === 'one'">
|
|
|
+ <div
|
|
|
+ class="begin"
|
|
|
+ v-show="flag === 'one'"
|
|
|
+ :class="{ EnActive: !Mylangue }"
|
|
|
+ >
|
|
|
<div class="begin_left">
|
|
|
<div class="renwen"></div>
|
|
|
</div>
|
|
|
@@ -20,11 +24,13 @@
|
|
|
<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
|
|
|
+ You will be given<br /> a random selection of 20 questions to answer,<br /> and
|
|
|
+ if you answer 12 questions correctly or above,<br /> you will be declared
|
|
|
a winner.
|
|
|
</p>
|
|
|
- <div class="btnn" @click="beginTopic">{{Mylangue?'开始答题':'Start'}}</div>
|
|
|
+ <div class="btnn" @click="beginTopic">
|
|
|
+ {{ Mylangue ? "开始答题" : "Start" }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 答题页面 -->
|
|
|
@@ -75,31 +81,52 @@
|
|
|
</div>
|
|
|
<!-- 下面的按钮 -->
|
|
|
<div class="topic_btn" @click="nextTi" v-if="caseErr">
|
|
|
- {{ topicInd < 20 ? `${Mylangue?'下一题':'Next'}` : `${Mylangue?'完成问答':'accomplish'}` }}
|
|
|
+ {{
|
|
|
+ topicInd < 20
|
|
|
+ ? `${Mylangue ? "下一题" : "Next"}`
|
|
|
+ : `${Mylangue ? "完成问答" : "accomplish"}`
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="topic_btn" @click="btnOk" v-else>
|
|
|
+ {{ Mylangue ? "确 定" : "Confirm" }}
|
|
|
</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="" />
|
|
|
+ <img
|
|
|
+ class="tini"
|
|
|
+ :src="require(`@/assets/img/${Mylangue ? 'win' : 'winEn'}.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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <img
|
|
|
+ :src="require(`@/assets/img/${Mylangue ? 'lose' : 'loseEn'}.png`)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p>{{ Mylangue ? "您的得分：" : "Your Score：" }}{{ cunot + "0" }}</p>
|
|
|
+ <p>{{ Mylangue ? "失败乃兵家常事，大侠请重头再来" : "Try again!" }}</p>
|
|
|
+ <div @click="beginTopic()">{{ Mylangue ? "重新开始" : "Restart" }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -147,7 +174,10 @@ export default {
|
|
|
},
|
|
|
//点击确定
|
|
|
btnOk() {
|
|
|
- if (this.caseInd === null) return this.$message.warning(`${this.Mylangue?'未选择答案':'No Answer is Selected'}`);
|
|
|
+ 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";
|
|
|
@@ -286,6 +316,27 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .EnActive {
|
|
|
+ display: block;
|
|
|
+ .begin_left {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 368px;
|
|
|
+ height: 162px;
|
|
|
+ background: url("../../../assets/img/issueEn.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .renwen {
|
|
|
+ left: auto;
|
|
|
+ right: -10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .begin_right{
|
|
|
+ .btnn {
|
|
|
+ margin: 70px auto 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.topic {
|
|
|
position: relative;
|
|
|
padding: 30px 50px;
|
|
|
@@ -334,14 +385,14 @@ export default {
|
|
|
.cuoWu {
|
|
|
.case {
|
|
|
& > div {
|
|
|
- background-color: #FF5050;
|
|
|
+ background-color: #ff5050;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.zhengQue {
|
|
|
.case {
|
|
|
& > div {
|
|
|
- background-color: #50FFA2;
|
|
|
+ background-color: #50ffa2;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -491,6 +542,23 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .EnActive {
|
|
|
+ .begin_left {
|
|
|
+ margin: 40px auto 50px;
|
|
|
+ width: 280px;
|
|
|
+ height: 122px;
|
|
|
+ background: url("../../../assets/img/issueEn.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .renwen {
|
|
|
+ width: 30px;
|
|
|
+ height: 58px;
|
|
|
+ left: auto;
|
|
|
+ right: -5px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.topic {
|
|
|
padding: 10px;
|
|
|
height: calc(100% - 35px);
|
