|
@@ -48,6 +48,35 @@
|
|
|
<view v-if="problemList[problemListIndex].image" class="problem-img">
|
|
|
<image mode="widthFix" :src="problemList[problemListIndex].image"></image>
|
|
|
</view>
|
|
|
+ <view v-if="!hiddenFunction" class="funcicon-list">
|
|
|
+ <div @click="collectTopics" :class="!problemList[problemListIndex].isCollect?'funcicon-item':'funcicon-item funcicon-item_select'" >
|
|
|
+ <van-icon style="margin-right:8rpx;" v-if="!problemList[problemListIndex].isCollect" name="star-o" size="10px" />
|
|
|
+ <van-icon style="margin-right:8rpx;" color="#ffde00ff" v-if="problemList[problemListIndex].isCollect" name="star" size="10px" />
|
|
|
+ <span>收藏</span>
|
|
|
+ </div>
|
|
|
+ <div @click="
|
|
|
+ readQuestionAndAnswer();
|
|
|
+ completeQuestion();
|
|
|
+ " class="funcicon-item funcicon-item_select">
|
|
|
+ <m-jp-icon style="margin-right:8rpx;" type="a-dtda" size="10px" />
|
|
|
+ <span>读题+答案</span>
|
|
|
+ </div>
|
|
|
+ <div @click="readQuestion()" class="funcicon-item funcicon-item_select">
|
|
|
+ <m-jp-icon style="margin-right:8rpx;" type="duti" size="10px" />
|
|
|
+ <span>读题</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ explainJqVisible = true;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ class="function-item"
|
|
|
+ >
|
|
|
+ <m-jp-icon type="jqjj" size="25px" />
|
|
|
+ <span>技巧讲解</span>
|
|
|
+ </div> -->
|
|
|
+ </view>
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
<!-- 单项选择 -->
|
|
|
<view v-if="
|
|
@@ -70,9 +99,9 @@
|
|
|
problemList[problemListIndex].isCompleted
|
|
|
">
|
|
|
<view v-for="(item, index) in problemList[problemListIndex].optsArr" :key="index" class="problem-select pl30">
|
|
|
- <icon v-if="item.isAnswer && item.selected" class="icon-box-img" type="success" color="#06c05f" size="37">
|
|
|
+ <icon v-if="item.isAnswer && item.selected" class="icon-box-img" type="success" color="#06c05f" size="30">
|
|
|
</icon>
|
|
|
- <icon v-if="!item.isAnswer && item.selected" class="icon-box-img" type="clear" color="red" size="37"></icon>
|
|
|
+ <icon v-if="!item.isAnswer && item.selected" class="icon-box-img" type="clear" color="red" size="30"></icon>
|
|
|
<text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
|
|
|
numberToLetter(index)
|
|
|
}}</text>
|
|
@@ -112,9 +141,9 @@
|
|
|
problemList[problemListIndex].isCompleted
|
|
|
" style="margin-top: 0">
|
|
|
<view v-for="(item, index) in problemList[problemListIndex].optsArr" :key="index" class="problem-select">
|
|
|
- <icon v-if="item.isAnswer && item.selected" class="icon-box-img" type="success" color="#06c05f" size="37">
|
|
|
+ <icon v-if="item.isAnswer && item.selected" class="icon-box-img" type="success" color="#06c05f" size="30">
|
|
|
</icon>
|
|
|
- <icon v-if="!item.isAnswer && item.selected" class="icon-box-img" type="clear" size="37" color="red"></icon>
|
|
|
+ <icon v-if="!item.isAnswer && item.selected" class="icon-box-img" type="clear" size="30" color="red"></icon>
|
|
|
<text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
|
|
|
numberToLetter(index)
|
|
|
}}</text>
|
|
@@ -126,7 +155,6 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
-
|
|
|
<!-- #ifdef MP-TOUTIAO -->
|
|
|
<!-- 判断 -->
|
|
|
<view v-if="
|
|
@@ -186,9 +214,7 @@
|
|
|
<text class="problem-opAnswer">{{ item.value }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
<!-- 多选 -->
|
|
|
-
|
|
|
<view v-if="
|
|
|
problemList[problemListIndex].questionType == 3 &&
|
|
|
!problemList[problemListIndex].isCompleted
|
|
@@ -237,90 +263,93 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<funList :midFunc="midFunc" v-if="!hiddenFunction" @collect="collectTopics" @readQuestionAndAnswer="
|
|
|
- readQuestionAndAnswer();
|
|
|
-completeQuestion();
|
|
|
- " :problemListItem="problemList[problemListIndex]"></funList>
|
|
|
+ readQuestionAndAnswer();
|
|
|
+ completeQuestion();
|
|
|
+ " :problemListItem="problemList[problemListIndex]"></funList>
|
|
|
|
|
|
<!-- #endif -->
|
|
|
<view v-if="!hiddenFunction" class="function-list">
|
|
|
- <div @click="collectTopics" class="function-item">
|
|
|
- <van-icon
|
|
|
- v-if="!problemList[problemListIndex].isCollect"
|
|
|
- name="star-o"
|
|
|
- size="25px"
|
|
|
- />
|
|
|
- <van-icon
|
|
|
- color="#ffde00ff"
|
|
|
- v-if="problemList[problemListIndex].isCollect"
|
|
|
- name="star"
|
|
|
- size="25px"
|
|
|
- />
|
|
|
- <span>收藏</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- @click="
|
|
|
+ <div @click="collectTopics" class="function-item">
|
|
|
+ <van-icon v-if="!problemList[problemListIndex].isCollect" name="star-o" size="25px" />
|
|
|
+ <van-icon color="#ffde00ff" v-if="problemList[problemListIndex].isCollect" name="star" size="25px" />
|
|
|
+ <span>收藏</span>
|
|
|
+ </div>
|
|
|
+ <div @click="
|
|
|
readQuestionAndAnswer();
|
|
|
- completeQuestion();
|
|
|
- "
|
|
|
- class="function-item"
|
|
|
- >
|
|
|
- <m-jp-icon type="a-dtda" size="25px" />
|
|
|
- <span>读题+答案</span>
|
|
|
- </div>
|
|
|
- <div @click="readQuestion()" class="function-item">
|
|
|
- <m-jp-icon type="duti" size="25px" />
|
|
|
- <span>读题</span>
|
|
|
- </div>
|
|
|
- <!-- <div
|
|
|
- @click="
|
|
|
- () => {
|
|
|
- explainJqVisible = true;
|
|
|
- }
|
|
|
- "
|
|
|
- class="function-item"
|
|
|
- >
|
|
|
- <m-jp-icon type="jqjj" size="25px" />
|
|
|
- <span>技巧讲解</span>
|
|
|
- </div> -->
|
|
|
- </view>
|
|
|
+ completeQuestion();
|
|
|
+ " class="function-item">
|
|
|
+ <m-jp-icon type="a-dtda" size="25px" />
|
|
|
+ <span>读题+答案</span>
|
|
|
+ </div>
|
|
|
+ <div @click="readQuestion()" class="function-item">
|
|
|
+ <m-jp-icon type="duti" size="25px" />
|
|
|
+ <span>读题</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ explainJqVisible = true;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ class="function-item"
|
|
|
+ >
|
|
|
+ <m-jp-icon type="jqjj" size="25px" />
|
|
|
+ <span>技巧讲解</span>
|
|
|
+ </div> -->
|
|
|
+ </view>
|
|
|
<!-- 底部的栏目 -->
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
- <van-tabbar height="20px">
|
|
|
+ <van-tabbar height="20px;">
|
|
|
<van-tabbar-item @click="goBeforeTopics"><van-icon slot="icon" custom-style="transform: rotate(90deg);"
|
|
|
- custom-class="last-subject" name="down" size="18px" />上一题
|
|
|
+ custom-class="last-subject" name="down" size="18px" />
|
|
|
+ <text style="font-size:24rpx">上一题</text>
|
|
|
</van-tabbar-item>
|
|
|
<van-tabbar-item style="text-align: center;">
|
|
|
<view>
|
|
|
<view>
|
|
|
- <icon slot="icon" class="icon-box-img" type="success" size="9px"></icon>{{ trueNum }}
|
|
|
+ <icon slot="icon" class="icon-box-img" type="success" size="9px"></icon><text style="margin-left:8rpx;">{{
|
|
|
+ trueNum }}</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
- <icon slot="icon" class="icon-box-img" type="clear" color="red" size="9px"></icon> {{ falseNum }}
|
|
|
+ <icon slot="icon" class="icon-box-img" type="clear" color="red" size="9px"></icon><text
|
|
|
+ style="margin-left:8rpx;">{{ falseNum }}</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
- {{ trueNum+ falseNum}}/{{ problemList.length }}
|
|
|
+ <text style="font-size:24rpx"> {{ trueNum + falseNum }}/{{ problemList.length }}</text>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
|
|
|
|
|
|
</van-tabbar-item>
|
|
|
- <van-tabbar-item>
|
|
|
- 技巧讲解
|
|
|
+ <van-tabbar-item style="position:relative;">
|
|
|
+
|
|
|
+ <image @tap="() => {
|
|
|
+ explainJqVisible = true
|
|
|
+
|
|
|
+ }" class="jqIcon" src="https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/mp-wx/exercise/jsIcon.png">
|
|
|
+ </image>
|
|
|
+ <van-icon style="opacity: 0;display: block;" name="info-o" slot="icon" size="18px" />
|
|
|
+ <span>
|
|
|
+ <text style="font-size:24rpx">技巧讲解</text>
|
|
|
+ </span>
|
|
|
+
|
|
|
+
|
|
|
</van-tabbar-item>
|
|
|
<!-- <van-tabbar-item><van-icon slot="icon" size="18px" name="description" />{{
|
|
|
- problemListIndex + 1
|
|
|
- }}/{{ problemListTotal }}
|
|
|
- </van-tabbar-item> -->
|
|
|
+ problemListIndex + 1
|
|
|
+ }}/{{ problemListTotal }}
|
|
|
+ </van-tabbar-item> -->
|
|
|
<van-tabbar-item @click="
|
|
|
() => {
|
|
|
explainJsVisible = true;
|
|
|
}
|
|
|
- "><van-icon name="info-o" slot="icon" size="18px" />官方解释
|
|
|
+ "><van-icon name="info-o" slot="icon" size="18px" />
|
|
|
+ <text style="font-size:24rpx">官方解释</text>
|
|
|
</van-tabbar-item>
|
|
|
<van-tabbar-item @click="goNextTopics"><van-icon slot="icon" custom-style="transform: rotate(-90deg);"
|
|
|
- custom-class="last-subject" name="down" size="18px" />下一题
|
|
|
+ custom-class="last-subject" name="down" size="18px" /><text style="font-size:24rpx">下一题</text>
|
|
|
</van-tabbar-item>
|
|
|
</van-tabbar>
|
|
|
<!-- #endif -->
|
|
@@ -436,12 +465,12 @@ completeQuestion();
|
|
|
</view>
|
|
|
</view>
|
|
|
</van-overlay>
|
|
|
- <explainJq @close="
|
|
|
+ <explainJq @close="
|
|
|
() => {
|
|
|
explainJqVisible = false;
|
|
|
}
|
|
|
- " :explainJq="problemList[problemListIndex].explainJq" :explainjsmp3="problemList[problemListIndex].explainjqmp3"
|
|
|
- :show="explainJqVisible">
|
|
|
+ " :explainJq="problemList[problemListIndex].explainJq" :explainMp3="problemList[problemListIndex].explainMp3"
|
|
|
+ :explainJqGif="problemList[problemListIndex].explainJqGif" :show="explainJqVisible">
|
|
|
|
|
|
</explainJq>
|
|
|
<explainJs @close="
|
|
@@ -451,10 +480,11 @@ completeQuestion();
|
|
|
" :explainJs="problemList[problemListIndex].explainJs" :explainjsmp3="problemList[problemListIndex].explainjsmp3"
|
|
|
:show="explainJsVisible"></explainJs>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
import countDown from "@/components/countDown/index";
|
|
|
import mRadio from "@/components/m-radio/m-radio.vue";
|
|
|
import mRadioGroup from "@/components/m-radio-group/m-radio-group.vue";
|
|
@@ -1302,6 +1332,16 @@ export default {
|
|
|
padding-left: 30rpx;
|
|
|
}
|
|
|
|
|
|
+.jqIcon {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -40%);
|
|
|
+ width: 166rpx;
|
|
|
+ height: 166rpx;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
.answer {
|
|
|
padding-left: 16rpx;
|
|
|
padding-bottom: 16rpx;
|
|
@@ -1554,7 +1594,7 @@ export default {
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
|
background: #01c18d;
|
|
|
-
|
|
|
+ color: #fff;
|
|
|
box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.16);
|
|
|
}
|
|
|
|
|
@@ -1573,7 +1613,30 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.funcicon-list{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ .funcicon-item{
|
|
|
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border:2rpx solid #8A9099;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ color: #8A9099;
|
|
|
+ }
|
|
|
+ .funcicon-item_select{
|
|
|
+ border-color: #498EF5;
|
|
|
+ color: #498EF5;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
.function-list {
|
|
|
width: 100%;
|
|
|
font-size: 13px;
|
|
@@ -1590,7 +1653,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- font-size: 13px;
|
|
|
+ font-size: 26rpx;
|
|
|
font-weight: 400;
|
|
|
color: #8a9099;
|
|
|
|