样式优化

pages/YNEduApp/prac/exercises.vue

@@ -33,6 +33,7 @@
         <div class="num">{{ nowNum }}/{{ allNum }}</div>
       </div>
     </div>
+    <u-line></u-line>
 
     <div
       class="question-wrapper"
@@ -82,12 +83,20 @@
         </div>
 
         <div v-if="item.isSelect">
-          <div>正确答案：{{ item.correctGrade }}</div>
+          <div class="answer">
-          <div>你的答案：{{ item.select }}</div>
+            <div>正确答案：{{ item.correctGrade }}</div>
+            <div>你的答案：{{ item.select }}</div>
+          </div>
+          <u-line dashed></u-line>
 
           <div>
-            <div class="analysis">答案解析：</div>
+            <div class="analysis">
-            <div class="analysis-container">{{ item.answerAnaly }}</div>
+              <div class="line" :style="{ height: fontSize - 5 + 'px' }"></div>
+              答案解析：
+            </div>
+            <div class="analysis-container" :style="{ fontSize: fontSize - 2 + 'px' }">
+              {{ item.answerAnaly || '暂无' }}
+            </div>
           </div>
         </div>
       </div>
@@ -142,11 +151,19 @@
         </div>
 
         <div v-if="item.isSelect">
-          <div>正确答案：{{ item.correctGrade.split('').join('、') }}</div>
+          <div class="answer">
-          <div>你的答案：{{ item.select && item.select.join('、') }}</div>
+            <div>正确答案：{{ item.correctGrade.split('').join('、') }}</div>
+            <div>你的答案：{{ item.select && item.select.join('、') }}</div>
+          </div>
+          <u-line dashed></u-line>
 
-          <div class="analysis">知识点</div>
+          <div class="analysis">
-          <div class="analysis-container">{{ item.answerAnaly }}</div>
+            <div class="line" :style="{ height: fontSize - 5 + 'px' }"></div>
+            知识点：
+          </div>
+          <div class="analysis-container" :style="{ fontSize: fontSize - 2 + 'px' }">
+            {{ item.answerAnaly || '暂无' }}
+          </div>
         </div>
       </div>
     </div>
@@ -185,20 +202,12 @@
     </div>
 
     <!-- 提交弹框 -->
-    <u-modal
+    <u-popup :show="showModal" :closeOnClickOverlay="false" mode="center" round="10" customStyle="width: 80% ">
-      :show="showModal"
+      <div class="pop-content">
-      title="本次答题正确率"
+        <div class="top-title">
-      showCancelButton
+          <div class="title">本次答题正确率</div>
-      @cancel="handleConfirm"
+          <div class="correctRate">{{ correctRate }}%</div>
-      @confirm="handleClose"
+        </div>
-      cancelText="继续答题"
-      confirmText="结束答题"
-      :buttonReverse="true"
-      confirmColor="#606266"
-      cancelColor="#2979ff"
-    >
-      <view class="slot-content">
-        <div class="correctRate">{{ correctRate }}%</div>
         <div class="modal-container">
           <div class="item">
             <div class="num">{{ answerNum }}</div>
@@ -213,8 +222,12 @@
             <div>答题时长</div>
           </div>
         </div>
-      </view>
+        <div class="pop-btn">
-    </u-modal>
+          <u-button class="custom-style" plain shape="circle" text="结束答题" @click="handleClose" />
+          <u-button class="custom-style" type="primary" shape="circle" text="继续答题" @click="handleConfirm" />
+        </div>
+      </div>
+    </u-popup>
 
     <!-- 题目选择弹框 -->
     <u-popup
@@ -222,7 +235,7 @@
       @close="showModalSelect = false"
       mode="center"
       round="10"
-      customStyle="width: 90%; height: 50%"
+      customStyle="width: 90%; height: 50% "
     >
       <div class="num-wrapper">
         <div class="correct">
@@ -238,6 +251,7 @@
           <div class="num">{{ nowNum }}/{{ allNum }}</div>
         </div>
       </div>
+      <u-line></u-line>
 
       <div class="topic-content">
         <div class="wrap" v-for="(item, index) in questionListSelect" :key="index">
@@ -270,8 +284,10 @@ import {
   updStudyDurationExamPractice
 } from '@/api/eduApp'
 import config from '@/config'
+import uLine from '../../../uni_modules/uview-ui/components/u-line/u-line.vue'
 
 export default {
+  components: { uLine },
   data() {
     return {
       isLoading: false,
@@ -752,25 +768,6 @@ export default {
       // 计算正确率 = 正确题数 / 已答题数
       this.correctRate = rate == 'NaN' ? '0' : rate
       this.showModal = true
-      // const params = {
-      //   id: this.practiceId
-      // }
-      // uni.request({
-      //   url: config.baseUrl + '/exam-student/studentPractice/getPracticeQuestionRate',
-      //   method: 'post',
-      //   data: params,
-      //   header: {
-      //     'Content-Type': 'application/x-www-form-urlencoded',
-      //     Authorization: uni.getStorageSync('access_token')
-      //   },
-      //   success: res => {
-      //     console.log('🚀 ~ handleSubmit ~ res:', res)
-      //     res = res.data
-      //   },
-      //   fail: err => {
-      //     console.log(err)
-      //   }
-      // })
     },
     handleConfirm() {
       console.log('确认')
@@ -872,6 +869,7 @@ export default {
     openSelect() {
       if (this.isAddLoading) return
       this.isAddLoading = true
+      // this.showModalSelect = true
       // const res = await this.getPracticeQuestionList()
       // console.log('🚀 ~ openSelect ~ res:', res)
       // this.questionListSelect = res.data
@@ -958,40 +956,75 @@ export default {
   justify-content: flex-end;
   align-items: center;
 }
+.answer {
+  margin: 15px 0;
+  padding: 10px;
+  background: #f6f9fc;
+  border-radius: 5px;
+}
+.pop-content {
+  .top-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-weight: 700;
+    background: #1f92df;
+    border-radius: 10px 10px 0 0;
+    line-height: 1;
+    .title {
+      margin: 20px 0;
+      font-size: 16px;
+    }
+    .correctRate {
+      margin-bottom: 20px;
+      font-size: 28px;
+    }
+  }
+
+  .modal-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin: 20px 10px;
+    background: #f6f9fc;
+    border-radius: 5px;
+    height: 73px;
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: #9d9b9b;
+      font-size: 14px;
+      .num {
+        font-size: 19px;
+        font-weight: 600;
+        color: #3185f0;
+      }
+    }
+  }
+
+  .pop-btn {
+    margin-bottom: 20px;
+    padding: 0 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .custom-style {
+      width: 100px;
+    }
+  }
+}
 .wrapper {
   height: 100vh;
   /* background: url('/static/images/question-bg.png') no-repeat; */
   background: #fff;
   background-size: 100% 100%;
-
-  .slot-content {
-    width: 100%;
-    .correctRate {
-      text-align: center;
-    }
-
-    .modal-container {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      margin-top: 20px;
-      background: #f5f8fb;
-      border-radius: 5px;
-      height: 73px;
-
-      .item {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        color: #9d9b9b;
-        .num {
-          color: #3185f0;
-        }
-      }
-    }
-  }
   .topic-content {
+    padding: 10px;
     display: flex;
     /* justify-content: space-between; */
     align-items: flex-start;
@@ -1097,13 +1130,22 @@ export default {
     }
 
     .analysis {
-      margin-top: 20px;
+      margin-top: 8px;
       font-weight: 700;
+      display: flex;
+      align-items: center;
+      .line {
+        border: 2px solid #1f92df;
+        margin-right: 4px;
+      }
     }
     .analysis-container {
       margin-top: 6px;
       color: #475583;
       text-indent: 1em;
+      background: #f6f9fc;
+      border-radius: 5px;
+      padding: 10px;
     }
   }
 
@@ -1115,12 +1157,13 @@ export default {
   .num-wrapper {
     display: flex;
     justify-content: space-around;
-    margin: 15px 6%;
+    margin: 15px 9%;
 
     .correct,
     .error,
     .total {
       display: flex;
+      justify-content: center;
       align-items: center;
       margin: 0 6px;
     }