|
|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
|
<view class="phone-kaoshi-page">
|
|
|
<!-- 导航区域 -->
|
|
|
- <view class="phone-navBar-box">
|
|
|
- <view @click="handleBack" class="nav-bar-icon"><uni-icons type="left" size="20"></uni-icons></view>
|
|
|
+ <view class="icon-title-navBar-box">
|
|
|
+ <view @click="handleBack" class="nav-bar-icon"></view>
|
|
|
<text class="nav-bar-title">{{data.ksName}}</text>
|
|
|
</view>
|
|
|
<!-- 第一行 -->
|
|
|
<view class="kaoshi-page-title">
|
|
|
- <view v-if="activeSt">{{stTypes[activeSt.stTypeId]}}</view>
|
|
|
+ <view v-if="activeSt" class="title-types">{{stTypes[activeSt.stTypeId]}}</view>
|
|
|
<view>100分钟</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -36,46 +36,32 @@
|
|
|
|
|
|
</view>
|
|
|
|
|
|
- <view class="kaoshi-bottom-card">
|
|
|
- <view style="margin:0 10px">
|
|
|
- <button class="biaoji-btn" type="primary" size="mini" @click="handleBiaoji">标记</button>
|
|
|
- </view>
|
|
|
- <view @click="showAnswerCard">
|
|
|
- <text style="color: green;">{{activeSt ? activeSt.onlyNum: 0}}</text>/<text>{{data.StListForSearch.length}}</text>
|
|
|
- </view>
|
|
|
- <view style="flex:1;text-align: right;">
|
|
|
- <button type="primary" size="mini" @click="handleCheckJiexi" style="margin-right: 10px">解析</button>
|
|
|
- <button type="primary" size="mini" @click="handleBack">完成</button>
|
|
|
+ <view class="kaoshi-bottom-box">
|
|
|
+ <button class="phone-green-btn bj-btn" hover-class="none" type="default" size="mini" @click="handleBiaoji">标记</button>
|
|
|
+ <view @click="showAnswerCard" class="shiti-num-box">
|
|
|
+ <icon class="shiti-num-icon"></icon>
|
|
|
+ <text class="active-num">{{activeSt ? activeSt.onlyNum: 0}}</text>/<text>{{data.StListForSearch.length}}</text>
|
|
|
</view>
|
|
|
+ <button class="phone-white-btn jx-btn" hover-class="none" type="default" size="mini" @click="handleCheckJiexi">解析</button>
|
|
|
</view>
|
|
|
<template v-if="activeSt">
|
|
|
- <button type="primary" size="mini" class="ks-btn-prev" @click="handlePrev" v-if="!isFistStId">上一题</button>
|
|
|
- <button type="primary" size="mini" class="ks-btn-next" @click="handleNext" v-if="!isLastStId">下一题</button>
|
|
|
+ <button type="default" size="mini" hover-class="none" class="phone-green-btn ks-btn-prev" @click="handlePrev" v-if="!isFistStId">上一题</button>
|
|
|
+ <button type="default" size="mini" hover-class="none"class="phone-green-btn ks-btn-next" @click="handleNext" v-if="!isLastStId">下一题</button>
|
|
|
</template>
|
|
|
|
|
|
<!-- 答题卡 -->
|
|
|
<uni-popup ref="popupRef" background-color="#fff" :is-mask-click="false" :mask-click="false">
|
|
|
- <view class="popup-content" style="height: 100vh">
|
|
|
- <view class="popup-phone-navBar-box">
|
|
|
- <view @click="handlePopupBack" class="nav-bar-icon"><uni-icons type="left" size="20"></uni-icons>
|
|
|
- </view>
|
|
|
+ <view class="answer-card-popup">
|
|
|
+ <view class="icon-title-bjcolor-navBar-box">
|
|
|
+ <view @click="handlePopupBack" class="nav-bar-icon"> </view>
|
|
|
<text class="nav-bar-title">答题卡</text>
|
|
|
</view>
|
|
|
- <view class="main-container">
|
|
|
- <view class="paragraph" v-for="(paragraph,paragraphIndex) in questionData" :key="paragraphIndex">
|
|
|
- <view class="paragraph-title">
|
|
|
- {{paragraph.name}}
|
|
|
- </view>
|
|
|
- <view class="paragraph-qa-content">
|
|
|
- <view class="paragraph-qa" v-for="(qa,qaIndex) in paragraph.qas" :key="qaIndex">
|
|
|
- <view class="paragraph-qa-block">
|
|
|
- <view :class="getQaClass(qa)" @click="answerCardItemClick(qa)">
|
|
|
- {{qa.onlyNum}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
+ <view class="answer-card-content" v-for="(paragraph,paragraphIndex) in questionData" :key="paragraphIndex">
|
|
|
+ <view class="paragraph-title">
|
|
|
+ {{paragraph.name}}
|
|
|
+ </view>
|
|
|
+ <view class="paragraph-qa" v-for="(qa,qaIndex) in paragraph.qas" :key="qaIndex"
|
|
|
+ :class="getQaClass(qa)" @click="answerCardItemClick(qa)">{{qa.onlyNum}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -471,110 +457,3 @@
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .phone-kaoshi-page {
|
|
|
- background-color: #ccc;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .phone-navBar-box {
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- background-color: #fff;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- line-height: 60px;
|
|
|
-
|
|
|
- .nav-bar-icon {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .kaoshi-page-title {
|
|
|
- margin-top: 10px;
|
|
|
- background-color: #fff;
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 10px;
|
|
|
- border-bottom: 1px solid #333;
|
|
|
- }
|
|
|
-
|
|
|
- .kaoshi-shiti-content {
|
|
|
- padding: 20px 20px 0 20px;
|
|
|
- height: calc(100vh - 211px);
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .kaoshi-bottom-card {
|
|
|
- height: 60px;
|
|
|
- width: 100%;
|
|
|
- background-color: #ccc;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- text-align: left;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .ks-btn-prev {
|
|
|
- position: absolute;
|
|
|
- bottom: 150px;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .ks-btn-next {
|
|
|
- position: absolute;
|
|
|
- bottom: 150px;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .popup-phone-navBar-box {
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- background-color: #fff;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- line-height: 60px;
|
|
|
-
|
|
|
- .nav-bar-icon {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .paragraph-qa-content {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .paragraph-qa {
|
|
|
- margin: 10px;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- // 答题卡 答完样式
|
|
|
- .paragraph-qa-block-done {
|
|
|
- background-color: skyblue;
|
|
|
- }
|
|
|
- // 答题卡 未答完样式
|
|
|
- .paragraph-qa-block-init {
|
|
|
- background-color: #ccc;
|
|
|
- }
|
|
|
- // 答题卡 标记样式
|
|
|
- .paragraph-qa-block-mark {
|
|
|
- background-color: orange;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-</style>
|
tanxue