|
|
@@ -37,7 +37,7 @@
|
|
|
<view class="ph_box" v-if="rankinglShow">
|
|
|
<view class="ph_box2">
|
|
|
<view class="phb">排行榜</view>
|
|
|
- <view class="phb_box" v-for="item in rankingList" :key="item.name">
|
|
|
+ <view class="phb_box" v-for="item in rankingList" :key="item.index">
|
|
|
<view class="phb_item">
|
|
|
<view class="phb_pm">
|
|
|
<image style="width: 100%; height: 100%" src="/static/img/img_no1@2x.png"></image>
|
|
|
@@ -63,7 +63,7 @@
|
|
|
<!-- 开始答题 -->
|
|
|
<view class="" v-if="resultShow">
|
|
|
<view class="tm_box">
|
|
|
- <view @click="answerShow = false" style="position: absolute; top: -36rpx; left: 10rpx" class="">
|
|
|
+ <view @click="answerShow = false" style="cursor: pointer; position: absolute; top: -36rpx; left: 10rpx" class="">
|
|
|
<image style="width: 80rpx; height: 80rpx" src="/static/img/icon_back@2x.png"></image>
|
|
|
</view>
|
|
|
<view class="tihao">{{ i }}</view>
|
|
|
@@ -73,7 +73,7 @@
|
|
|
<!-- 答案 -->
|
|
|
<view class="daAn_box">
|
|
|
<!-- -->
|
|
|
- <view @click="selectBtn(index)" v-for="(item, index) in list.optionList" :key="item.label" class="daAn_item" :class="{ active: index == selectTab2 }">
|
|
|
+ <view @click="selectBtn(index)" v-for="(item, index) in list.optionList" :key="item.index" class="daAn_item" :class="{ active: index == selectTab2 }">
|
|
|
{{ item.label }}
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -83,31 +83,30 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 答题结果 -->
|
|
|
- <view class="jieGuo" v-if="jieGuoShow">
|
|
|
- <view class="tm_box">
|
|
|
- <view class="dt_end">答题结束</view>
|
|
|
- </view>
|
|
|
- <view class="fraction">
|
|
|
- <text style="font-size: 38rpx">{{ recordNumber * 10 }}分</text>
|
|
|
- </view>
|
|
|
- <view class="txt_box">
|
|
|
- <view class="txt_">共计{{ anNiuList.length }}题，您答对了 {{ recordNumber }} 道题！</view>
|
|
|
- <view class="txt_">恭喜您！耗时 1分30秒 完成！</view>
|
|
|
+ </view>
|
|
|
+ <!-- 答题结果 -->
|
|
|
+ <view class="jieGuo" v-if="jieGuoShow">
|
|
|
+ <view class="tm_box2">
|
|
|
+ <view class="dt_end">答题结束</view>
|
|
|
+ </view>
|
|
|
+ <view class="fraction">
|
|
|
+ <text>{{ recordNumber * 10 }}分</text>
|
|
|
+ </view>
|
|
|
+ <view class="txt_box">
|
|
|
+ <view class="txt_">共计{{ anNiuList.length }}题，您答对了 {{ recordNumber }} 道题！</view>
|
|
|
+ <!-- <view class="txt_">恭喜您！耗时 {{ cost_time }} 完成！</view> -->
|
|
|
+ </view>
|
|
|
+ <!-- 查看排行榜按钮 -->
|
|
|
+ <view class="restart">
|
|
|
+ <view class="dt">
|
|
|
+ <image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
|
|
|
</view>
|
|
|
- <!-- 重新答题按钮 -->
|
|
|
- <view class="restart" @click="restartBtn">
|
|
|
- <view class="dt">
|
|
|
- <image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
|
|
|
- </view>
|
|
|
- <view class="dt_box">重新开始</view>
|
|
|
- <view class="dt">
|
|
|
- <image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
|
|
|
- </view>
|
|
|
+ <view @click="phbBtn" class="dt_box">查看排行榜</view>
|
|
|
+ <view class="dt">
|
|
|
+ <image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
<!-- 菜单按钮 -->
|
|
|
<view class="caidan" @click="navBtn">
|
|
|
<image class="img" src="../../../static/img/icon_menu@2x.png"></image>
|
|
|
@@ -162,10 +161,12 @@ export default {
|
|
|
},
|
|
|
// 开始答题
|
|
|
starBtn() {
|
|
|
+ // this.startTime = new Date().getTime(); // 记录开始时间戳
|
|
|
+
|
|
|
this.answerShow = true;
|
|
|
this.$api.startChallenge({}, function (res) {
|
|
|
that.anNiuList = res.data.question_data;
|
|
|
- console.log(that.anNiuList.length, '开始答题');
|
|
|
+ // console.log(that.anNiuList.length, '开始答题');
|
|
|
});
|
|
|
|
|
|
setTimeout(() => {
|
|
|
@@ -217,7 +218,7 @@ export default {
|
|
|
},
|
|
|
// 完成答题
|
|
|
completeBtn() {
|
|
|
- // console.log(this.selectTab, '56565656');
|
|
|
+ this.endTime = new Date().getTime(); // 记录结束时间戳
|
|
|
if (!this.selectTab) {
|
|
|
this.$common.normalToShow('还未选择答案');
|
|
|
return false;
|
|
|
@@ -243,23 +244,18 @@ export default {
|
|
|
}, 500);
|
|
|
this.starShow = false;
|
|
|
this.resultShow = true;
|
|
|
-
|
|
|
- // this.answerShow = true;
|
|
|
- this.rankinglShow = true;
|
|
|
-
|
|
|
- // this.jieGuoShow = true;
|
|
|
- this.$api.getTopList({}, function (res) {
|
|
|
- console.log(res, '排行');
|
|
|
- that.rankingList = res.data;
|
|
|
- });
|
|
|
+ this.jieGuoShow = true;
|
|
|
+ // this.yongShi = this.startTime - this.endTime;
|
|
|
}
|
|
|
},
|
|
|
- // 重新答题
|
|
|
- restartBtn() {
|
|
|
- this.starBtn();
|
|
|
- // this.nextBtn();
|
|
|
- // this.jieGuoShow = false;
|
|
|
- // this.resultShow = true;
|
|
|
+ // 排行榜
|
|
|
+ phbBtn() {
|
|
|
+ this.$api.getTopList({}, function (res) {
|
|
|
+ console.log(res, '排行');
|
|
|
+ that.rankingList = res.data;
|
|
|
+ });
|
|
|
+ this.jieGuoShow = false;
|
|
|
+ this.rankinglShow = true;
|
|
|
},
|
|
|
|
|
|
close() {
|
|
|
@@ -297,8 +293,10 @@ export default {
|
|
|
}
|
|
|
.jieGuo {
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 15%;
|
|
|
+ top: 400rpx;
|
|
|
+ left: 32%;
|
|
|
+ height: 1000rpx;
|
|
|
+ background-color: #efe6d8;
|
|
|
}
|
|
|
.box {
|
|
|
width: 1800rpx;
|
|
|
@@ -343,6 +341,7 @@ export default {
|
|
|
margin-top: 2%;
|
|
|
display: flex;
|
|
|
width: 180rpx;
|
|
|
+ cursor: pointer;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.img {
|
|
|
@@ -371,6 +370,7 @@ export default {
|
|
|
margin-top: 260rpx;
|
|
|
}
|
|
|
.dt_box {
|
|
|
+ cursor: pointer;
|
|
|
width: 300rpx;
|
|
|
height: 80rpx;
|
|
|
font-size: 48rpx;
|
|
|
@@ -490,7 +490,7 @@ export default {
|
|
|
margin-top: 50rpx;
|
|
|
text-align: center;
|
|
|
line-height: 100rpx;
|
|
|
-
|
|
|
+ cursor: pointer;
|
|
|
border: #a65729 1px solid;
|
|
|
background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
@@ -519,6 +519,16 @@ export default {
|
|
|
height: 260rpx;
|
|
|
border-bottom: 1px solid #ddd0c4;
|
|
|
}
|
|
|
+.tm_box2 {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-bottom: 1px solid #ddd0c4;
|
|
|
+}
|
|
|
.tihao {
|
|
|
width: 90rpx;
|
|
|
height: 80rpx;
|
|
|
@@ -549,7 +559,7 @@ export default {
|
|
|
.daAn_item {
|
|
|
width: 520rpx;
|
|
|
height: 120rpx;
|
|
|
-
|
|
|
+ cursor: pointer;
|
|
|
font-size: 36rpx;
|
|
|
color: #563530;
|
|
|
margin-top: 50rpx;
|
|
|
@@ -562,6 +572,7 @@ export default {
|
|
|
margin: auto;
|
|
|
font-size: 40rpx;
|
|
|
text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
line-height: 90rpx;
|
|
|
letter-spacing: 0.2em;
|
|
|
background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
|
