|
|
@@ -0,0 +1,922 @@
|
|
|
+<template>
|
|
|
+ <view class="questionBank">
|
|
|
+ <swiper class="swiper" :current="current" @change="swiperChange" :interval="interval">
|
|
|
+ <swiper-item v-for="(bank,bankIndex) in questionList" :key="bankIndex">
|
|
|
+ <view class="pageContent">
|
|
|
+ <view class="pad_8 titBox" >
|
|
|
+ <view class="firstLetter">
|
|
|
+ <view class="leftLetters">
|
|
|
+ <view class="btnType">
|
|
|
+ <text v-if="bank.type==1">单选</text>
|
|
|
+ <text v-if="bank.type==2">多选</text>
|
|
|
+ <text v-if="bank.type==3">判断</text>
|
|
|
+ <text v-if="bank.type==4">案例</text>
|
|
|
+ <text v-if="bank.type==5">简答</text>
|
|
|
+ </view>
|
|
|
+ <text>{{bankIndex+1}}/{{questionList.length}}</text>
|
|
|
+ </view>
|
|
|
+ <view style="color: #666;font-size: 28rpx;"></view>
|
|
|
+ <view class="leftLetters"></view>
|
|
|
+ </view>
|
|
|
+ <view class="titles">
|
|
|
+ <rich-text :nodes="bank.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <template v-if="bank.type == 1">
|
|
|
+ <view class="pad_8 titBox no-margin">
|
|
|
+ <view v-if="!bank.ques">
|
|
|
+ <view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
|
|
|
+ <view class="activeTI">{{ ast[index] }}</view>
|
|
|
+ <view class="flex_auto">{{ item.content }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="bank.ques">
|
|
|
+ <view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
|
|
|
+ <text :class="{right:(item.optionsId == bank.ques) || (item.optionsId == bank.ans),wrong:(item.optionsId == bank.ques) && (bank.ques != bank.ans)}" class="activeTI">{{ ast[index] }}</text>
|
|
|
+ <view class="flex_auto">{{ item.content }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="pad_8 answer">
|
|
|
+ <view>正确答案：{{ast[bank.ans-1]}}</view>
|
|
|
+ <view>我的答案：{{ast[bank.ques-1] || ''}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pad_8 answerInfos">
|
|
|
+ <view class="answerTitle">答案解析</view>
|
|
|
+ <view class="answerContent">
|
|
|
+ <rich-text :nodes="bank.analysisContent"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="bank.type == 2">
|
|
|
+ <view class="pad_8 titBox no-margin">
|
|
|
+
|
|
|
+ <view v-if="!bank.ques">
|
|
|
+ <view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
|
|
|
+ <view :class="{checked:item.checked}" class="activeTI">{{ ast[index] }}</view>
|
|
|
+ <view class="flex_auto">{{ item.content }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="bank.ques">
|
|
|
+ <view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
|
|
|
+ <text :class="{right:bank.ques &&( bank.ques.indexOf(item.optionsId) != -1 ) || bank.ans &&( bank.ans.indexOf(item.optionsId) != -1),wrong:bank.ques && (bank.ques.indexOf(item.optionsId) != -1 ) && bank.ans && ( bank.ans.indexOf(item.optionsId) == -1)}" class="activeTI">{{ ast[index] }}</text>
|
|
|
+ <view class="flex_auto">{{ item.content }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view >
|
|
|
+ <view class="pad_8 answer">
|
|
|
+ <view>正确答案：
|
|
|
+ <text :key="ansItemIndex" v-for="(ansItem,ansItemIndex) in bank.ans">{{ast[ansItem-1]}}</text>
|
|
|
+ </view>
|
|
|
+ <view>我的答案：
|
|
|
+ <text :key="quesItemIndex" v-for="(quesItem,quesItemIndex) in bank.ques">{{ast[quesItem-1]}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pad_8 answerInfos">
|
|
|
+ <view class="answerTitle">答案解析</view>
|
|
|
+ <view class="answerContent">
|
|
|
+ <rich-text :nodes="bank.analysisContent"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="bank.type == 3">
|
|
|
+ <view class="pad_8 titBox no-margin">
|
|
|
+ <view v-if="!bank.ques">
|
|
|
+ <view v-for="(item, index) in judge" :key="index" class="lisSty">
|
|
|
+ <view class="activeTI">{{ ast[index] }}</view>
|
|
|
+ {{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="bank.ques">
|
|
|
+ <view v-for="(item, index) in judge" :key="index" class="lisSty">
|
|
|
+ <text :class="{right:(index == bank.ques) || (index == bank.ans),wrong:(index == bank.ques) && (bank.ques != bank.ans)}" class="activeTI">{{ ast[index] }}</text>
|
|
|
+ {{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view >
|
|
|
+ <view class="pad_8 answer">
|
|
|
+ <view>正确答案：{{ast[bank.ans]}}</view>
|
|
|
+ <view>我的答案：{{ast[bank.ques] || ''}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pad_8 answerInfos">
|
|
|
+ <view class="answerTitle">答案解析</view>
|
|
|
+ <view class="answerContent">
|
|
|
+ <rich-text :nodes="bank.analysisContent"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 简答题 -->
|
|
|
+ <template v-if="bank.type == 5">
|
|
|
+ <view class="pad_8 titBox">
|
|
|
+ <view class="ans">
|
|
|
+ <view class="ans_submit answerInfos" >
|
|
|
+ <view class="answerTitle">我的答案:</view>
|
|
|
+ {{bank.ques.text || ''}}
|
|
|
+ <view class="imgs">
|
|
|
+ <image class="img" v-for="(ques,quesIndex) in bank.ques.imageList" :key="quesIndex" :src="$method.splitImgHost(ques,true)"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="pad_8 answerInfos">
|
|
|
+ <view class="answerTitle">答案解析:</view>
|
|
|
+ <view class="answerContent">
|
|
|
+ <rich-text :nodes="bank.analysisContent"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 案例题 -->
|
|
|
+ <template v-if="bank.type == 4">
|
|
|
+ <view class="pad_8 titBox">
|
|
|
+ <view class="tabs">
|
|
|
+ <view class="tab" :class="{current:tabIndex == bank.current}" :key="tabIndex" v-for="(tab,tabIndex) in bank.jsonStr" @click="tabSelect(tabIndex,bankIndex)">问题{{tabIndex}}</view>
|
|
|
+ </view>
|
|
|
+ <view v-for="(ansItem,ansIndex) in bank.jsonStr" v-if="bank.current == ansIndex" :key="ansIndex">
|
|
|
+ <view class="titles">
|
|
|
+ <rich-text :nodes="ansItem.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ <template v-if="ansItem.type == 1">
|
|
|
+ <view v-if="!bank.ques[ansIndex]">
|
|
|
+ <view v-for="(option, childIndex) in ansItem.optionsList" :key="childIndex" class="lisSty">
|
|
|
+ <view class="activeTI">{{ ast[childIndex] }}</view>
|
|
|
+ <rich-text class="textChild" :nodes="option.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="bank.ques[ansIndex]">
|
|
|
+ <view v-for="(option, childIndex) in ansItem.optionsList" :key="childIndex" class="lisSty">
|
|
|
+ <text :class="{right:(option.optionsId == bank.ques[ansIndex]) || (option.optionsId == bank.ans[ansIndex]),wrong:(option.optionsId == bank.ques[ansIndex]) && (bank.ques[ansIndex] != bank.ans[ansIndex])}" class="activeTI">{{ ast[childIndex] }}</text>
|
|
|
+ <rich-text :nodes="option.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="pad_8 answer">
|
|
|
+ <view>正确答案：{{ast[bank.ans[ansIndex]-1]}}</view>
|
|
|
+ <view>我的答案：{{ast[bank.ques[ansIndex]-1] || ''}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pad_8 answerInfos">
|
|
|
+ <view class="answerTitle">答案解析</view>
|
|
|
+ <view class="answerContent">
|
|
|
+ <rich-text :nodes="option.analysisContent"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="ansItem.type == 2">
|
|
|
+ <view v-if="!bank.ques[ansIndex]">
|
|
|
+ <view v-for="(option, childindex) in ansItem.optionsList" :key="childindex" class="lisSty">
|
|
|
+ <view :class="{checked:option.checked}" class="activeTI">{{ ast[childindex] }}</view>
|
|
|
+ <rich-text :nodes="option.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="bank.ques && bank.ques[ansIndex]">
|
|
|
+ <view v-for="(option, childindex) in ansItem.optionsList" :key="childindex" class="lisSty">
|
|
|
+ <text :class="{right:right(bankIndex,ansIndex,option),wrong:wrong(bankIndex,ansIndex,option)}" class="activeTI">{{ ast[childindex] }}</text>
|
|
|
+ <rich-text :nodes="option.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="pad_8 answer">
|
|
|
+ <view>正确答案：
|
|
|
+ <text :key="ansItemIndex1" v-for="(ansItem1,ansItemIndex1) in bank.ans[ansIndex]">{{ast[ansItem1-1]}}</text>
|
|
|
+ </view>
|
|
|
+ <view>我的答案：
|
|
|
+ <text :key="quesItemIndex" v-for="(quesItem,quesItemIndex) in bank.ques[ansIndex]">{{ast[quesItem-1]}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pad_8 answerInfos">
|
|
|
+ <view class="answerTitle">答案解析</view>
|
|
|
+ <view class="answerContent">
|
|
|
+ <rich-text :nodes="ansItem.analysisContent"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="ansItem.type == 3">
|
|
|
+ <view v-if="!bank.ques[ansIndex]">
|
|
|
+ <view v-for="(option, childindex) in judge" :key="childindex" class="lisSty">
|
|
|
+ <view class="activeTI">{{ ast[childindex] }}</view>
|
|
|
+ {{ option }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="bank.ques[ansIndex]">
|
|
|
+ <view v-for="(option, childindex) in judge" :key="childindex" class="lisSty">
|
|
|
+ <text :class="{right:(childindex == bank.ques[ansIndex]) || (childindex == bank.ans[ansIndex]),wrong:(childindex == bank.ques[ansIndex]) && (bank.ques[ansIndex] != bank.ans[ansIndex])}" class="activeTI">{{ ast[childindex] }}</text>
|
|
|
+ {{ option }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="pad_8 answer">
|
|
|
+ <view>正确答案：{{ast[bank.ans[ansIndex]]}}</view>
|
|
|
+ <view>我的答案：{{ast[bank.ques[ansIndex]] || ''}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pad_8 answerInfos">
|
|
|
+ <view class="answerTitle">答案解析</view>
|
|
|
+ <view class="answerContent">
|
|
|
+ <rich-text :nodes="ansItem.analysisContent"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 简答题 -->
|
|
|
+ <template v-if="ansItem.type == 5">
|
|
|
+ <view class="ans">
|
|
|
+ <view class="ans_submit answerInfos">
|
|
|
+ <view class="answerTitle">我的答案</view>
|
|
|
+ {{bank.ques[ansIndex] && bank.ques[ansIndex].text || ''}}
|
|
|
+ <view class="imgs" v-if="bank.ques[ansIndex] && bank.ques[ansIndex].imageList.length">
|
|
|
+ <image class="img" :key="quesIndex" v-for="(ques,quesIndex) in bank.ques[ansIndex].imageList" :src="$method.splitImgHost(ques,true)"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="pad_8 answerInfos">
|
|
|
+ <view class="answerTitle">答案解析</view>
|
|
|
+ <view class="answerContent">
|
|
|
+ <rich-text :nodes="ansItem.analysisContent"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="footer_btn">
|
|
|
+ <view class="collect" @click="collect(collectList[bankIndex], bankIndex)">
|
|
|
+ <view>
|
|
|
+ <image src="/static/icon/collect.png" mode=""></image>
|
|
|
+ <view>收藏</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex_center" @click="openFooterTab">
|
|
|
+ <view class="up-icon">
|
|
|
+ <image src="/static/up.png"></image>
|
|
|
+ </view>
|
|
|
+ 答题卡
|
|
|
+ </view>
|
|
|
+ <view class="collect" @click="pdsubmit">
|
|
|
+ <view>
|
|
|
+ <image src="/static/jj.png" mode=""></image>
|
|
|
+ <view>交卷</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <u-popup v-model="show" mode="bottom" border-radius="14" height="680rpx">
|
|
|
+ <view class="popupView">
|
|
|
+ <view class="popupTops">
|
|
|
+ <view class="topIcon"></view>
|
|
|
+ 点击编号即可跳转至对应题目
|
|
|
+ </view>
|
|
|
+ <view class="popupContent">
|
|
|
+ <scroll-view scroll-y="true" style="height: 506rpx;">
|
|
|
+ <view class="boxSty">
|
|
|
+ <view v-for="(item, index) in questionList" :key="index" @click="changeIndex(index)" :class="{isRight:isRight(item,index),isWrong:isWrong(item,index)}" class="liListSty">{{ index + 1 }}</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <view class="dialog" v-if="showDialog">
|
|
|
+ <view class="text">左右滑动切换上下题</view>
|
|
|
+ <view class="btn" @click="hideDialog">我知道了</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id:'',
|
|
|
+ current:0,
|
|
|
+ questionList:[],
|
|
|
+ ast: ['A', 'B', 'C', 'D','E','F','G'],
|
|
|
+ judge:['错误','正确'],
|
|
|
+ show: false,
|
|
|
+ showDialog:false,
|
|
|
+ bankList: [],
|
|
|
+ goodsId:'',
|
|
|
+ recordId:'',
|
|
|
+ chapterId:'',
|
|
|
+ moduleId:'',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option){
|
|
|
+ this.id = option.id || '';
|
|
|
+ this.goodsId = option.goodsid || '';
|
|
|
+ this.chapterId = option.chapterId || '';
|
|
|
+ this.moduleId = option.moduleId || '';
|
|
|
+ this.recordId = option.recordId || '';
|
|
|
+
|
|
|
+ let showDialog = uni.getStorageSync('showDialog');
|
|
|
+
|
|
|
+ if(showDialog) {
|
|
|
+ this.showDialog = false;
|
|
|
+ } else {
|
|
|
+ this.showDialog = true;
|
|
|
+ uni.setStorageSync('showDialog','1');
|
|
|
+ }
|
|
|
+ this.goodsQuestionList();
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 是否有上传图片
|
|
|
+ */
|
|
|
+ hasImgs(bank) {
|
|
|
+
|
|
|
+ return bank.ansText.imageList.length == 0;
|
|
|
+ },
|
|
|
+
|
|
|
+ goodsQuestionList() {
|
|
|
+
|
|
|
+ this.$api.examReport(this.recordId).then(res => {
|
|
|
+ this.questionList = JSON.parse(res.data.data.historyExamJson)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ openFooterTab() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ hideDialog() {
|
|
|
+ this.showDialog = false
|
|
|
+ },
|
|
|
+ changeIndex(index) {
|
|
|
+ this.current = index
|
|
|
+ },
|
|
|
+
|
|
|
+ swiperChange(e) {
|
|
|
+ this.current = e.detail.current;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ isRight(item,index) {
|
|
|
+ //单选
|
|
|
+ if(this.questionList[index].ques) {
|
|
|
+ if(item.type == 1) {
|
|
|
+ return this.questionList[index].ques == this.questionList[index].ans;
|
|
|
+ //多选
|
|
|
+ } else if(item.type == 2) {
|
|
|
+ //每一项都相等
|
|
|
+ return this.questionList[index].ques.every((item,i) => {
|
|
|
+ console.log(item == this.questionList[index].ans[i])
|
|
|
+ return item == this.questionList[index].ans[i];
|
|
|
+ })
|
|
|
+ //判断
|
|
|
+ } else if(item.type == 3) {
|
|
|
+ return this.questionList[index].ques == this.questionList[index].ans;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ right(bankIndex,ansIndex,option) {
|
|
|
+ if(this.questionList[bankIndex].ques[ansIndex] && this.questionList[bankIndex].ans[ansIndex]) {
|
|
|
+
|
|
|
+ if((this.questionList[bankIndex].ques[ansIndex].indexOf(option.optionsId) != -1 ) || (this.questionList[bankIndex].ans[ansIndex].indexOf(option.optionsId) != -1)) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ wrong(bankIndex,ansIndex,option) {
|
|
|
+ if(this.questionList[bankIndex].ques[ansIndex] && this.questionList[bankIndex].ans[ansIndex]) {
|
|
|
+
|
|
|
+ if((this.questionList[bankIndex].ques[ansIndex].indexOf(option.optionsId) != -1 ) && (this.questionList[bankIndex].ans[ansIndex].indexOf(option.optionsId) == -1)) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ isWrong(item,index) {
|
|
|
+ if(this.questionList[index].ques) {
|
|
|
+ //单选
|
|
|
+ if(item.type == 1) {
|
|
|
+ return this.questionList[index].ques != this.questionList[index].ans;
|
|
|
+ //多选
|
|
|
+ } else if(item.type == 2) {
|
|
|
+ //每一项都相等
|
|
|
+ return this.questionList[index].ques.some((item,i) => {
|
|
|
+ return item != this.questionList[index].ans[i];
|
|
|
+ })
|
|
|
+ //判断
|
|
|
+ } else if(item.type == 3) {
|
|
|
+ return this.questionList[index].ques != this.questionList[index].ans;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ tabSelect(index,bankindex) {
|
|
|
+
|
|
|
+ this.$set(this.questionList[bankindex],'current',index)
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.questionBank {
|
|
|
+ width:100%;
|
|
|
+ height:100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.swiper {
|
|
|
+ width:100%;
|
|
|
+ flex:1;
|
|
|
+}
|
|
|
+.lisSty {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .flex_auto {
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.activeTI {
|
|
|
+ vertical-align: middle;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1rpx solid #eee;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 46rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 48rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ color: #666;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ color:#fff;
|
|
|
+ background:green;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.wrong {
|
|
|
+ color:#fff;
|
|
|
+ background:red;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.checked {
|
|
|
+ color:#fff;
|
|
|
+ background:blue;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.submit_checkbox {
|
|
|
+ margin:20rpx auto;
|
|
|
+ width: 526rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: rgba(0, 122, 255, 1);
|
|
|
+ color:#fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+}
|
|
|
+.titles {
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+.titBox {
|
|
|
+ padding: 41rpx 25rpx 24rpx 25rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs {
|
|
|
+ margin:10rpx;
|
|
|
+ display: flex;
|
|
|
+ .tab {
|
|
|
+ margin:0 10rpx;
|
|
|
+ width: 96rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ color:#007AFF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ &.current {
|
|
|
+ color:#fff;
|
|
|
+ background: #007AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ans {
|
|
|
+ margin:8rpx 8rpx 8rpx;
|
|
|
+
|
|
|
+ .ans_input {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background:#fff;
|
|
|
+ .top {
|
|
|
+ border-bottom:1rpx solid #EEEEEE;
|
|
|
+ padding: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right:20rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 38rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ width: 168rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background: #007AFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textarea {
|
|
|
+ textarea {
|
|
|
+ width:100%;
|
|
|
+ height:287rpx;
|
|
|
+ padding:10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgs {
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ width:100%;
|
|
|
+ .img {
|
|
|
+ width: 104rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ position:relative;
|
|
|
+ margin:20rpx;
|
|
|
+
|
|
|
+
|
|
|
+ text {
|
|
|
+ position:absolute;
|
|
|
+ right:-15rpx;
|
|
|
+ top:-15rpx;
|
|
|
+ width:30rpx;
|
|
|
+ height:30rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30rpx;
|
|
|
+ color:#fff;
|
|
|
+ background:red;
|
|
|
+ border-radius:50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ans_submit {
|
|
|
+ padding:16rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background:#fff;
|
|
|
+
|
|
|
+ .imgs {
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ width:100%;
|
|
|
+ .img {
|
|
|
+ width: 104rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ position:relative;
|
|
|
+ margin:20rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.firstLetter {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ .leftLetters {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 220rpx;
|
|
|
+ .btnType {
|
|
|
+ padding: 5rpx 10rpx;
|
|
|
+ border: 1rpx solid #007aff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: rgba(0, 122, 255, 0.1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #007aff;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.popupView {
|
|
|
+ height: 100%;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ .popupTops {
|
|
|
+ height: 77rpx;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 77rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ position: relative;
|
|
|
+ .topIcon {
|
|
|
+ position: absolute;
|
|
|
+ top: 10rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 80rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background-color: #999;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popupContent {
|
|
|
+ }
|
|
|
+}
|
|
|
+.pageContent {
|
|
|
+ position:relative;
|
|
|
+ background-color: #eaeef1;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding-top: 8rpx;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+}
|
|
|
+.pad_8 {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0rpx 8rpx 8rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ &.no-margin {
|
|
|
+ margin-top:-16rpx;
|
|
|
+ border-radius: 0 0 16rpx 16rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.answer {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ padding: 0rpx 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #666;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+.footer_btn {
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 10078;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 98rpx;
|
|
|
+ padding: 0rpx 38rpx;
|
|
|
+ border-top: 1rpx solid #eee;
|
|
|
+
|
|
|
+ .flex_center {
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin:0 200rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+
|
|
|
+ .up-icon {
|
|
|
+ margin-bottom:18rpx;
|
|
|
+ width:100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ image {
|
|
|
+ width:58rpx;
|
|
|
+ height:21rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .collect {
|
|
|
+ visibility: hidden;
|
|
|
+ width:100rpx;
|
|
|
+
|
|
|
+ &.show {
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ >view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width:32rpx;
|
|
|
+ height:32rpx;
|
|
|
+ margin-bottom:6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.boxSty {
|
|
|
+ padding: 44rpx 41rpx 0rpx;
|
|
|
+}
|
|
|
+.liListSty {
|
|
|
+ border:1rpx solid #EEEEEE;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 88rpx;
|
|
|
+ color: #333;
|
|
|
+ font-size: 32rpx;
|
|
|
+ float: left;
|
|
|
+ margin: 20rpx 23rpx;
|
|
|
+
|
|
|
+ &.isRight {
|
|
|
+ border:1rpx solid #EEEEEE;
|
|
|
+ color:#fff;
|
|
|
+ background: green;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.isWrong {
|
|
|
+ border:1rpx solid #EEEEEE;
|
|
|
+ color:#fff;
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+}
|
|
|
+.answerInfos {
|
|
|
+ padding: 25rpx 25rpx 25rpx 23rpx;
|
|
|
+}
|
|
|
+.answerTitle {
|
|
|
+ margin-bottom: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+.answerContent {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.textChild {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog {
|
|
|
+ position: fixed;
|
|
|
+ left:0;
|
|
|
+ top:0;
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ background-color: rgba(0,0,0,0.8);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 20000;
|
|
|
+
|
|
|
+ .pointer {
|
|
|
+ width:338rpx;
|
|
|
+ height:240rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 242rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ border: 2rpx solid #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 82rpx;
|
|
|
+ margin:41rpx auto;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.popboxs {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.classTops {
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding: 39rpx 0rpx 4rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+.textStys {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ padding: 36rpx;
|
|
|
+}
|
|
|
+.classFootsty {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 10rpx 0rpx 40rpx;
|
|
|
+ .btnsty {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .btns1 {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #007aff;
|
|
|
+ }
|
|
|
+ .btns2 {
|
|
|
+ margin-left: 40rpx;
|
|
|
+ background-color: #007aff;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
chenxiong