<div class="answer-wrapper"> <div class="item-wrapper" v-for="(item, index) in states.answerSheet" :key="index"> <div class="answer-item" :class="{ isAnswer: !item.isAnswer, isUnAnswer: item.isUnAnswer }"> {{ index + 1 }} </div> </div> </div> </div> <div class="exam-detail"> <Title title="考试情况" /> <div class="detail-wrapper"> <div class="total"> <div>一共</div> <div class="common-color">{{ states.answerSheet.length }}题</div> </div> <div class="correct"> <div>答对</div> <div class="correct-color">{{ states.correctNum }}题</div> </div> <div class="error"> <div>答错</div> <div class="error-color">{{ states.errorNum }}题</div> </div> <div class="time"> <div>总用时</div> <div class="common-color">{{ states.examTime }}</div> </div> </div> </div> </div> </view> </template> <script> export default { props: { states: { type: Object, default: () => {} }, isStudyTask: { type: Boolean, default: false }, isTrain: { type: Boolean, default: false } }, data() { return { goUrl: '/pages/myExam/index' } }, mounted() { if (this.isStudyTask) { this.goUrl = '/pages/learningTasks/index' } else if (this.isTrain) { this.goUrl = '/pages/myTraining/index' } else { this.goUrl = '/pages/myExam/index' } }, methods: { onBackPress(options) { console.log(options) if (options.from == 'backbutton') { // 来自手势返回 console.log('手势返回') // 返回为 true 时，不会执行返回操作，可以自定义返回逻辑 // 返回为 false 或者不返回时，则执行默认返回操作 return true } // 返回为 false 或者不返回时，则执行默认返回操作 return false } } } </script> <style lang="scss" scoped> .content { padding: 0 20px; .progress { margin-top: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; // 第二个元素 &:nth-child(2) { font-size: 40px; font-weight: 600; color: #638dee; } .item { // 向上移动 transform: translateY(-170px); } .score { font-size: 36px; color: #638fed; } .isPass { font-size: 22px; color: #333; } } .exam-wrapper { transform: translateY(-150px); display: flex; flex-direction: column; justify-content: space-between; font-size: 14px; color: #8a8a8a; line-height: 30px; .exam-item { display: flex; justify-content: space-between; } } .answer-sheet { transform: translateY(-140px); .answer-wrapper { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; .item-wrapper { width: 20%; height: 60px; display: flex; justify-content: center; align-items: center; .answer-item { width: 39px; height: 39px; line-height: 39px; text-align: center; border-radius: 50%; background: #7cd1b6; color: #fff; &.isAnswer { background: #f87b55; } &.isUnAnswer { background: #8a8a8a; } } } } } .exam-detail { transform: translateY(-130px); .detail-wrapper { padding: 16px 0; display: flex; justify-content: space-around; align-items: center; font-size: 14px; color: #8a8a8a; line-height: 30px; background-color: #f4f9fe; border-radius: 5px; .total, .correct, .error, .time { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } } } // 通用颜色 .common-color { color: #1989fa; } // 正确颜色 .correct-color { color: #48d66b; } // 错误颜色 .error-color { color: #f87b55; } } </style>