知识库页面

src/pages/knowledge/exam/examcontent/components/submit.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+const handleClick = () => {
+  uni.navigateTo({
+    url: '/pages/knowledge/exam/index',
+  })
+}
+</script>
+
+<template>
+  <view class="submit-success">
+    <view class="success-icon">
+      <view class="icon-circle">
+        <text class="icon-check">✓</text>
+      </view>
+    </view>
+    <view class="success-title">交卷成功</view>
+    <view class="success-message">
+      请稍后在【我的考试-已考试】中查看成绩。
+    </view>
+    <view class="success-button">
+      <view class="button" @click="handleClick">查看我的考试</view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.submit-success {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 80vh;
+  padding: 40rpx;
+
+  .success-icon {
+    margin-bottom: 64rpx;
+    .icon-circle {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 50%;
+      background-color: #52c41a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon-check {
+        font-size: 96rpx;
+        color: #ffffff;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .success-title {
+     font-size: 36rpx;
+    font-weight: 500;
+    color: #31373d;
+    margin-bottom: 32rpx;
+  }
+
+  .success-message {
+    font-size: 28rpx;
+    color: #86909c;
+    text-align: center;
+    margin-bottom: 80rpx;
+    line-height: 1.5;
+  }
+
+  .success-button {
+    width: 100%;
+    max-width: 400rpx;
+
+    .button {
+      width: 100%;
+      height: 88rpx;
+      border: 1px solid #d4d6d9;
+      border-radius: 8rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32rpx;
+      color: #31373d;
+      background-color: #ffffff;
+      transition: all 0.3s ease;
+
+      &:active {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+</style>

src/pages/knowledge/exam/examcontent/index.vue

@@ -1,11 +1,59 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import oipimg from '@/assets/OIP-C.jpg'
+import { useMessage } from 'wot-design-uni'
+const message = useMessage()
 const show = ref(false)
 const handleClose = () => {
   console.log('关闭弹窗')
   //   show.value = false
 }
+
+// 30分钟定时器
+const remainingTime = ref(30 * 60)
+const timer = ref(null)
+
+// 格式化时间为 HH:MM:SS 格式
+const formatTime = (seconds) => {
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = seconds % 60
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+// 开始定时器
+const startTimer = () => {
+  if (timer.value) return
+
+  timer.value = setInterval(() => {
+    if (remainingTime.value > 0) {
+      remainingTime.value--
+    } else {
+      clearInterval(timer.value)
+      timer.value = null
+      handleSubmit()
+    }
+  }, 1000)
+}
+
+// 停止定时器
+const stopTimer = () => {
+  if (timer.value) {
+    clearInterval(timer.value)
+    timer.value = null
+  }
+}
+
+// 组件挂载时启动定时器
+onMounted(() => {
+  startTimer()
+})
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  stopTimer()
+})
+
 const list = ref([
   {
     type: '第一题 单选题',
@@ -471,6 +519,38 @@ const handleActive = (value, index) => {
   activeIndex.value = `${value.type}-${index}`
 }
 
+const isDone = (item: any) => {
+  if (!item) return false
+  // single choice / 判断题 may write selected value to `item.value`
+  if (item.value !== undefined && item.value !== null && item.value !== '')
+    return true
+  // 简答题
+  if (item.answer && item.answer !== '') return true
+  // fallback for other naming
+  if (item.userAnswer && item.userAnswer !== '') return true
+  // 填空题 blanks
+  if (item.blanks && Array.isArray(item.blanks)) {
+    if (
+      item.blanks.some((b: any) => b && b.value !== undefined && b.value !== '')
+    )
+      return true
+  }
+  // 多选题 / options may toggle option.value to boolean when bound incorrectly
+  if (item.options && Array.isArray(item.options)) {
+    if (
+      item.options.some(
+        (o: any) =>
+          o &&
+          (o.checked === true ||
+            o.selected === true ||
+            (typeof o.value === 'boolean' && o.value === true))
+      )
+    )
+      return true
+  }
+  return false
+}
+
 const isFirstQuestion = computed(() => {
   const currentIndex = activeIndex.value.split('-')[1]
   return Number(currentIndex) === 0
@@ -499,14 +579,40 @@ const handleNext = () => {
     activeIndex.value = `${currentType}-${Number(currentIndex) + 1}`
   }
 }
+const handleSubmit = () => {
+  message
+    .confirm({
+      msg: '交卷后将无法撤回操作，确认交卷？',
+      title: '提示',
+      cancelButtonProps: {
+        type: 'default',
+        customClass: 'cancel-button',
+      },
+      confirmButtonProps: {
+        type: 'success',
+        customClass: 'custom-shadow',
+      },
+    })
+    .then(() => {
+      uni.navigateTo({
+        url: '/pages/knowledge/exam/examcontent/components/submit',
+      })
+    })
+    .catch((error) => {
+      console.log('点击了取消')
+    })
+}
+const clickclose = ()=>{
+  show.value = false
+}
 </script>
 <template>
   <view class="examcontent_box">
     <view class="examcontent_remainingtime_submit">
       <view class="examcontent_remainingtime">
-        剩余时间：<span>00:00:00</span>
+        剩余时间：<span>{{ formatTime(remainingTime) }}</span>
       </view>
-      <view class="examcontent_submit"> 提交考试 </view>
+      <view class="examcontent_submit" @tap="handleSubmit"> 提交考试 </view>
     </view>
     <view class="examcontent_title">
       {{ currentTitle.MainTitle }}
@@ -515,20 +621,25 @@ const handleNext = () => {
       <view class="examcontent_question_title">
         {{ currentTitle.SubTitle.title }}</view
       >
+      <view
+        class="examcontent_question_imgs"
+        v-if="currentTitle?.SubTitle?.isimgs"
+      >
+        <image
+          :src="currentTitle?.SubTitle?.isimgs"
+          class="examcontent_question_imgs_img"
+        ></image>
+      </view>
       <view class="examcontent_question_item">
-        <view
-          class="examcontent_question_imgs"
-          v-if="currentTitle?.SubTitle?.isimgs"
-        >
-          <image
-            :src="currentTitle?.SubTitle?.isimgs"
-            class="examcontent_question_imgs_img"
-          ></image>
-        </view>
         <view class="examcontent_question_items">
           <template v-if="currentTitle.MainTitle?.includes('单选题')">
             <wd-radio-group
-              style="display: flex; flex-direction: column;gap: 80rpx"
+              style="
+                display: flex;
+                flex-direction: column;
+                gap: 80rpx;
+                align-items: flex-start;
+              "
               v-model="currentTitle.SubTitle['value']"
               shape="dot"
               inline
@@ -541,7 +652,7 @@ const handleNext = () => {
               </wd-radio>
             </wd-radio-group>
           </template>
-          <template v-if="currentTitle.MainTitle?.includes('多选题')">
+          <template v-else-if="currentTitle.MainTitle?.includes('多选题')">
             <wd-checkbox
               v-model="value.value"
               shape="square"
@@ -553,6 +664,55 @@ const handleNext = () => {
               }}</span>
             </wd-checkbox>
           </template>
+          <template v-else-if="currentTitle.MainTitle?.includes('判断题')">
+            <wd-radio-group
+              style="
+                display: flex;
+                flex-direction: column;
+                gap: 80rpx;
+                align-items: flex-start;
+              "
+              v-model="currentTitle.SubTitle['value']"
+              shape="dot"
+              inline
+            >
+              <wd-radio
+                v-for="value in currentTitle.SubTitle.options"
+                :value="value.value"
+              >
+                {{ value.label }}
+              </wd-radio>
+            </wd-radio-group>
+          </template>
+          <template v-else-if="currentTitle.MainTitle?.includes('填空题')">
+            <view class="examcontent_question_blanks">
+              <view
+                class="examcontent_question_blank_item"
+                v-for="(blank, index) in currentTitle.SubTitle.blanks"
+                :key="index"
+              >
+                <text class="examcontent_question_blank_label">{{
+                  `填空${index + 1}: `
+                }}</text>
+                <wd-input
+                  v-model="blank.value"
+                  :placeholder="blank.placeholder"
+                  class="examcontent_question_blank_input"
+                />
+              </view>
+            </view>
+          </template>
+          <template v-else-if="currentTitle.MainTitle?.includes('简答题')">
+            <view class="examcontent_question_answer">
+              <text class="examcontent_question_answer_title">请作答：</text>
+              <wd-textarea
+                v-model="currentTitle.SubTitle.answer"
+                placeholder="请输入答案"
+                rows="4"
+                class="examcontent_question_answer_textarea"
+              />
+            </view>
+          </template>
         </view>
       </view>
     </view>
@@ -585,7 +745,7 @@ const handleNext = () => {
     >
       <view class="popup-header">
         <text class="popup-title">题目总览</text>
-        <view class="popup-close" @click="handleClose">
+        <view class="popup-close" @click="clickclose">
           <view class="close-icon"></view>
         </view>
       </view>
@@ -605,8 +765,11 @@ const handleNext = () => {
           </view>
           <view class="question-numbers">
             <view
-              class="question-number active"
-              :class="{ tapactive: activeIndex === `${value.type}-${index}` }"
+              class="question-number"
+              :class="{
+                tapactive: activeIndex === `${value.type}-${index}`,
+                done: isDone(item),
+              }"
               v-for="(item, index) in value.titlelist"
               @tap="handleActive(value, index)"
               :key="index"
@@ -629,8 +792,11 @@ const handleNext = () => {
           </view>
           <view class="question-numbers">
             <view
-              class="question-number active"
-              :class="{ tapactive: activeIndex === `${value.type}-${index}` }"
+              class="question-number"
+              :class="{
+                tapactive: activeIndex === `${value.type}-${index}`,
+                done: isDone(item),
+              }"
               v-for="(item, index) in value.titlelist"
               @tap="handleActive(value, index)"
               :key="index"
@@ -653,8 +819,11 @@ const handleNext = () => {
           </view>
           <view class="question-numbers">
             <view
-              class="question-number active"
-              :class="{ tapactive: activeIndex === `${value.type}-${index}` }"
+              class="question-number"
+              :class="{
+                tapactive: activeIndex === `${value.type}-${index}`,
+                done: isDone(item),
+              }"
               v-for="(item, index) in value.titlelist"
               @tap="handleActive(value, index)"
               :key="index"
@@ -677,8 +846,11 @@ const handleNext = () => {
           </view>
           <view class="question-numbers">
             <view
-              class="question-number active"
-              :class="{ tapactive: activeIndex === `${value.type}-${index}` }"
+              class="question-number"
+              :class="{
+                tapactive: activeIndex === `${value.type}-${index}`,
+                done: isDone(item),
+              }"
               v-for="(item, index) in value.titlelist"
               @tap="handleActive(value, index)"
               :key="index"
@@ -701,8 +873,11 @@ const handleNext = () => {
           </view>
           <view class="question-numbers">
             <view
-              class="question-number active"
-              :class="{ tapactive: activeIndex === `${value.type}-${index}` }"
+              class="question-number"
+              :class="{
+                tapactive: activeIndex === `${value.type}-${index}`,
+                done: isDone(item),
+              }"
               v-for="(item, index) in value.titlelist"
               @tap="handleActive(value, index)"
               :key="index"
@@ -712,6 +887,7 @@ const handleNext = () => {
         </view>
       </view>
     </wd-popup>
+    <wd-message-box></wd-message-box>
   </view>
 </template>
 <style scoped lang="scss">
@@ -719,6 +895,21 @@ html,
 body {
   overflow: hidden;
 }
+:deep() {
+  .wd-message-box {
+    .custom-shadow {
+      border-radius: 8rpx;
+      background-color: #215acd;
+      color: #ffffff;
+    }
+    .cancel-button {
+      border-radius: 8rpx;
+      background-color: #ffffff;
+      color: #31373d;
+      border: 1px solid #d4d6d9;
+    }
+  }
+}
 .examcontent_box {
   height: calc(100vh - 88rpx);
   display: flex;
@@ -766,7 +957,7 @@ body {
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 104rpx;
+    gap: 98rpx;
     .examcontent_question_title {
       font-weight: 400;
       font-style: 55 Regular;
@@ -774,18 +965,19 @@ body {
       leading-trim: NONE;
       color: #31373d;
     }
-    .examcontent_question_item {
+    .examcontent_question_imgs {
       width: 100%;
-      .examcontent_question_imgs {
+      height: 260rpx;
+      // margin-bottom: 32rpx;
+      .examcontent_question_imgs_img {
         width: 100%;
-        height: 350rpx;
-        margin-bottom: 32rpx;
-        .examcontent_question_imgs_img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
+        height: 100%;
+        object-fit: cover;
       }
+    }
+    .examcontent_question_item {
+      width: 100%;
+
       .examcontent_question_items {
         display: flex;
         flex-direction: column;
@@ -796,6 +988,52 @@ body {
           font-size: 28rpx;
           color: #1f1f1f;
         }
+        .examcontent_question_blanks {
+          display: flex;
+          flex-direction: column;
+          gap: 40rpx;
+          .examcontent_question_blank_item {
+            display: flex;
+            align-items: center;
+            gap: 20rpx;
+            .examcontent_question_blank_label {
+              font-size: 28rpx;
+              color: #31373d;
+              white-space: nowrap;
+              margin-right: 20rpx;
+            }
+            .examcontent_question_blank_input {
+              height: 64rpx;
+              flex: 1;
+              border: 1px solid #d4d6d9;
+              border-radius: 8rpx;
+              padding: 20rpx;
+              font-size: 28rpx;
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+        .examcontent_question_answer {
+          width: 100%;
+          .examcontent_question_answer_title {
+            font-weight: 400;
+            font-style: 55 Regular;
+            font-size: 28rpx;
+            color: #1f1f1f;
+          }
+          .examcontent_question_answer_textarea {
+            margin-top: 18rpx;
+            width: 94%;
+            border: 1px solid #d4d6d9;
+            border-radius: 8rpx;
+            padding: 20rpx;
+            font-size: 28rpx;
+            min-height: 200rpx;
+            resize: vertical;
+          }
+        }
       }
     }
   }
@@ -928,11 +1166,11 @@ body {
           align-items: center;
           font-size: 33.6rpx;
           color: #000000;
-          //   &.active {
-          //     background-color: #215acd;
-          //     color: #ffffff;
-          //     border-color: #215acd;
-          //   }
+          &.done {
+            background-color: #215acd;
+            color: #ffffff;
+            border-color: #215acd;
+          }
         }
         .tapactive {
           background-color: #ebf3ff;

src/pages/knowledge/exam/examresults/index.vue

@@ -0,0 +1,508 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const list = ref([
+  {
+    type: 'single',
+    title: '第一题单选题(本题分值1分)',
+    score: 1,
+    list: [
+      {
+        title: '这是本题的题目，请选择',
+        answer: [
+          {
+            title: 'A.答案1',
+            isRight: true,
+          },
+          {
+            title: 'B.答案2',
+            isRight: false,
+          },
+          {
+            title: 'B.答案3',
+            isRight: '',
+          },
+          {
+            title: 'B.答案4',
+            isRight: '',
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+      {
+        title: '这是本题的题目，请选择',
+        answer: [
+          {
+            title: 'A.答案1',
+            isRight: '',
+          },
+          {
+            title: 'B.答案2',
+            isRight: true,
+          },
+          {
+            title: 'B.答案3',
+            isRight: '',
+          },
+          {
+            title: 'B.答案4',
+            isRight: false,
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+    ],
+  },
+  {
+    type: 'single',
+    title: '第二题多选题(本题分值1分)',
+    score: 1,
+    list: [
+      {
+        title: '这是本题的题目，请选择',
+        answer: [
+          {
+            title: 'A.答案1',
+            isRight: true,
+          },
+          {
+            title: 'B.答案2',
+            isRight: true,
+          },
+          {
+            title: 'B.答案3',
+            isRight: true,
+          },
+          {
+            title: 'B.答案4',
+            isRight: false,
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+      {
+        title: '这是本题的题目，请选择',
+        answer: [
+          {
+            title: 'A.答案1',
+            isRight: false,
+          },
+          {
+            title: 'B.答案2',
+            isRight: true,
+          },
+          {
+            title: 'B.答案3',
+            isRight: false,
+          },
+          {
+            title: 'B.答案4',
+            isRight: true,
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+    ],
+  },
+  {
+    type: 'single',
+    title: '第三题判断题(本题分值1分)',
+    score: 1,
+    list: [
+      {
+        title: '这是本题的题目，请选择',
+        answer: [
+          {
+            title: 'A.答案1',
+            isRight: true,
+          },
+          {
+            title: 'B.答案2',
+            isRight: false,
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+      {
+        title: '这是本题的题目，请选择',
+        answer: [
+          {
+            title: 'A.答案1',
+            isRight: false,
+          },
+          {
+            title: 'B.答案2',
+            isRight: true,
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+    ],
+  },
+  {
+    type: 'single',
+    title: '第四题填空题(本题分值1分)',
+    score: 1,
+    list: [
+      {
+        title: '1.这是本题的题目(),(),()',
+        answer: [
+          {
+            title: 'A.填空',
+            answertext: '考生输入的答案1',
+            isRight: true,
+          },
+          {
+            title: 'B.填空',
+            answertext: '考生输入的答案2',
+            isRight: true,
+          },
+          {
+            title: 'C.填空',
+            answertext: '考生输入的答案3',
+            isRight: false,
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+      {
+        title: '2.这是本题的题目(),(),()',
+        answer: [
+          {
+            title: 'A.填空',
+            answertext: '考生输入的答案1',
+            isRight: true,
+          },
+          {
+            title: 'B.填空',
+            answertext: '考生输入的答案2',
+            isRight: false,
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+    ],
+  },
+  {
+    type: 'single',
+    title: '第五题简答题(本题分值1分)',
+    score: 1,
+    list: [
+      {
+        title: '1.这是本题的题目。',
+        answer: [
+          {
+            title: '这是一个简答题',
+            answertext:
+              '考生输入的答案考生输入的答案考生输入的答案考生输入的答案考生输入的答案考生输入的答案',
+            Correctanswer: '正确答案正确答案正确答案正确答案正确答案正确答案',
+            isRight: true,
+          },
+        ],
+        AnswerExplanation:
+          '解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析解析',
+      },
+    ],
+  },
+]) as any
+</script>
+<template>
+  <view class="knowledgebase_exam_explanation">
+    <view class="knowledgebase_exam_explanation_title">
+      考试名称考试名称考试名称考试考试名称考试名称考试名称
+    </view>
+    <view class="knowledgebase_exam_explanation_content">
+      <view class="knowledgebase_exam_explanation_content_title">
+        考试说明
+      </view>
+      <view class="knowledgebase_exam_explanation_content_text">
+        考试说明考试说明考试说明考试说明考试说明考试说明考试说明。
+      </view>
+    </view>
+    <view class="knowledgebase_exam_explanation_float">
+      <view class="knowledgebase_exam_explanation_float_title">
+        考试总分
+        <span class="knowledgebase_exam_explanation_float_title_score"
+          >100分</span
+        ></view
+      >
+      <view class="knowledgebase_exam_explanation_float_title">
+        及格分数
+        <span class="knowledgebase_exam_explanation_float_title_score"
+          >60分</span
+        ></view
+      >
+      <view class="knowledgebase_exam_explanation_float_title">
+        考试时长
+        <span class="knowledgebase_exam_explanation_float_title_score"
+          >90分钟</span
+        ></view
+      >
+      <view class="knowledgebase_exam_explanation_float_title">
+        考生得分
+        <span
+          class="knowledgebase_exam_explanation_float_title_score"
+          style="color: #215acd"
+          >80分</span
+        ></view
+      >
+      <view class="knowledgebase_exam_explanation_float_title">
+        考试结果
+        <span
+          class="knowledgebase_exam_explanation_float_title_score"
+          style="color: #38b865"
+          >及格</span
+        ></view
+      >
+    </view>
+    <view class="AnswerDetails">
+      <view class="AnswerDetails_title">答题详情</view>
+      <view class="AnswerDetails_content" v-for="value in list">
+        <view class="AnswerDetails_content_box">
+          <view class="AnswerDetails_content_title">{{ value.title }}</view>
+          <view class="AnswerDetails_content_item" v-for="items in value.list">
+            <view class="Thisquestiontitle">
+              <view class="AnswerDetails_content_item_title">
+                {{ items.title }}
+              </view>
+              <view class="AnswerDetails_content_item_answer">
+                <text
+                  :style="
+                    values.isRight === true
+                      ? 'color: #38B865'
+                      : values.isRight === false
+                        ? 'color: #EB5E12'
+                        : ''
+                  "
+                  v-for="values in items?.answer"
+                  :key="values.title"
+                >
+                  <text
+                    v-if="
+                      value.title.includes('单选题') ||
+                      value.title.includes('多选题') ||
+                      value.title.includes('判断题')
+                    "
+                    >{{ values.title }}</text
+                  >
+                  <text v-else-if="value.title.includes('填空题')">{{
+                    ` ${values.title}: ${values.answertext}`
+                  }}</text>
+                  <text v-else-if="value.title.includes('简答题')">{{
+                    ` ${values.title}: ${values.answertext}`
+                  }}</text>
+                  <wd-icon
+                    v-if="values.isRight"
+                    style="
+                      color: #38b865;
+                      text-align: center;
+                      margin-left: 20rpx;
+                    "
+                    name="check-circle-filled"
+                    size="16px"
+                  ></wd-icon>
+                  <wd-icon
+                    v-else-if="values.isRight === false"
+                    style="
+                      color: #eb5e12;
+                      text-align: center;
+                      margin-left: 20rpx;
+                    "
+                    name="close-circle-filled"
+                    size="16px"
+                  ></wd-icon>
+                </text>
+              </view>
+            </view>
+            <view class="AnswerExplanation_box">
+              <view class="Correctanswer" style="margin-bottom: 48rpx">
+                <text class="Correctanswer_title">正确答案 : </text>
+                <text
+                  v-if="value.title.includes('简答题')"
+                  class="Correctanswer_title Content"
+                  v-for="values in items?.answer.filter((a) => a.isRight)"
+                  :key="values.title"
+                >
+                  {{ `${values.Correctanswer};` }}
+                </text>
+                <text
+                  v-else
+                  class="Correctanswer_title Content"
+                  v-for="values in items?.answer.filter((a) => a.isRight)"
+                  :key="values.title"
+                >
+                  {{ `${values.title};` }}
+                </text>
+              </view>
+              <view class="AnswerExplanation">
+                <view class="Correctanswer_title" style="margin-bottom: 32rpx"
+                  >答案解析:</view
+                >
+                <text class="Correctanswer_Content">{{
+                  items.AnswerExplanation
+                }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<style scoped lang="scss">
+html,
+body {
+  overflow: hidden;
+}
+.knowledgebase_exam_explanation {
+  height: calc(100vh - 88rpx);
+  display: flex;
+  flex-direction: column;
+  padding: 24rpx;
+  box-sizing: border-box;
+}
+.knowledgebase_exam_explanation_title {
+  font-family: Alibaba PuHuiTi 2;
+  font-weight: 500;
+  font-style: 65 Medium;
+  font-size: 48rpx;
+  leading-trim: NONE;
+  line-height: 48rpx;
+  letter-spacing: 0px;
+  color: #31373d;
+}
+.knowledgebase_exam_explanation_content {
+  margin-top: 80rpx;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+  .knowledgebase_exam_explanation_content_title {
+    font-weight: 500;
+    font-style: 65 Medium;
+    font-size: 36rpx;
+    leading-trim: NONE;
+    letter-spacing: 0px;
+    color: #31373d;
+  }
+  .knowledgebase_exam_explanation_content_text {
+    font-weight: 400;
+    font-style: 55 Regular;
+    font-size: 28rpx;
+    line-height: 48rpx;
+    letter-spacing: 0px;
+    color: #4e5969;
+  }
+}
+.knowledgebase_exam_explanation_float {
+  margin-top: 48rpx;
+  margin-bottom: 48rpx;
+  border-top: 1rpx solid #eeeeee;
+  border-bottom: 1rpx solid #eeeeee;
+  padding-top: 48rpx;
+  padding-bottom: 48rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+  .knowledgebase_exam_explanation_float_title {
+    font-weight: 400;
+    font-style: 55 Regular;
+    font-size: 28rpx;
+    letter-spacing: 0px;
+    color: #4e5969;
+    .knowledgebase_exam_explanation_float_title_score {
+      margin-left: 48rpx;
+      color: #31373d;
+    }
+  }
+}
+.AnswerDetails {
+  flex: 1;
+  overflow-y: auto;
+  .AnswerDetails_title {
+    font-weight: 500;
+    font-style: 65 Medium;
+    font-size: 36rpx;
+    leading-trim: NONE;
+    letter-spacing: 0px;
+    color: #31373d;
+    margin-bottom: 48rpx;
+  }
+  .AnswerDetails_content {
+    // width: 100%;
+    // display: flex;
+    // flex-direction: column;
+    // gap: 24rpx;
+    margin-bottom: 24rpx;
+    .AnswerDetails_content_box {
+      display: flex;
+      flex-direction: column;
+      gap: 24rpx;
+    }
+    .AnswerDetails_content_title {
+      width: 100%;
+      height: 96rpx;
+      background-color: #f7f9fa;
+      padding-left: 32rpx;
+      box-sizing: border-box;
+      line-height: 88rpx;
+
+      font-weight: 500;
+      font-size: 32rpx;
+      color: #31373d;
+    }
+    .AnswerDetails_content_item {
+      box-sizing: border-box;
+      padding: 32rpx;
+      width: 100%;
+      background-color: #f7f9fa;
+      .Thisquestiontitle {
+        border-bottom: 1rpx solid #e6e8eb;
+        box-sizing: border-box;
+        padding-bottom: 48rpx;
+        margin-bottom: 48rpx;
+        .AnswerDetails_content_item_title {
+          margin-bottom: 48rpx;
+          font-weight: 400;
+          font-size: 32rpx;
+          color: #31373d;
+        }
+        .AnswerDetails_content_item_answer {
+          display: flex;
+          flex-direction: column;
+          gap: 52rpx;
+
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #31373d;
+        }
+      }
+      .AnswerExplanation_box {
+        .Correctanswer_title {
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #31373d;
+        }
+        .Content {
+          color: #38b865;
+          margin-right: 10rpx;
+        }
+        .Correctanswer_Content {
+          font-weight: 400;
+          font-size: 32rpx;
+          color: #4e5969;
+          line-height: 56rpx;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/knowledge/exam/examresults/scoresnotreleased.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import kong from '@/assets/kong.png'
+const handleClick = () => {
+  uni.navigateTo({
+    url: '/pages/knowledge/exam/index',
+  })
+}
+</script>
+
+<template>
+  <view class="submit-success">
+    <view class="success-icon">
+      <view class="icon-circle">
+        <image style="width: 100%; height: 100%;" :src="kong" alt="loading" />
+        <!-- <text class="icon-check">✓</text> -->
+      </view>
+    </view>
+    <view class="success-title">正在批改......</view>
+    <view class="success-message">
+      请稍后在【我的考试-已考试】中查看成绩。
+    </view>
+    <view class="success-button">
+      <view class="button" @click="handleClick">查看我的考试</view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.submit-success {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 80vh;
+  padding: 40rpx;
+
+  .success-icon {
+    margin-bottom: 64rpx;
+    .icon-circle {
+      width: 500rpx;
+      height: 300rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .success-title {
+    font-size: 36rpx;
+    font-weight: 500;
+    color: #31373d;
+    margin-bottom: 32rpx;
+  }
+
+  .success-message {
+    font-size: 28rpx;
+    color: #86909c;
+    text-align: center;
+    margin-bottom: 80rpx;
+    line-height: 1.5;
+  }
+
+  .success-button {
+    width: 100%;
+    max-width: 400rpx;
+
+    .button {
+      width: 100%;
+      height: 88rpx;
+      border: 1px solid #d4d6d9;
+      border-radius: 8rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32rpx;
+      color: #31373d;
+      background-color: #ffffff;
+      transition: all 0.3s ease;
+
+      &:active {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+</style>

src/pages/knowledge/exam/explanation/index.vue

@@ -1,3 +1,4 @@
+<script setup lang="ts"></script>
 <template>
   <view class="knowledgebase_exam_explanation">
     <view class="knowledgebase_exam_explanation_title">
@@ -31,12 +32,24 @@
         ></view
       >
     </view>
+    <wd-button class="knowledgebase_exam_explanation_float_button"
+      >开始考试</wd-button
+    >
+    <!-- <wd-button disabled class="knowledgebase_exam_explanation_float_button"
+      >考试将于2026-2-1 19:00开始</wd-button
+    > -->
   </view>
 </template>
 <style scoped lang="scss">
+html,
+body {
+  overflow: hidden;
+}
 .knowledgebase_exam_explanation {
+  height: calc(100vh - 88rpx);
   display: flex;
   flex-direction: column;
+  // justify-content: space-between;
   padding: 24rpx;
   box-sizing: border-box;
 }
@@ -93,4 +106,11 @@
     }
   }
 }
+.knowledgebase_exam_explanation_float_button {
+  margin-top: auto;
+  width: 100%;
+  background-color: #215acd !important;
+  height: 80rpx !important;
+  border-radius: 8rpx !important;
+}
 </style>

src/pages/knowledge/exam/index.vue

@@ -42,19 +42,23 @@ const Examtaken = ref([
     id: 1,
     name: '考试6',
     examTime: '2023-08-01 10:00:00',
-    Status: '进行中',
+    Status: '已出分',
+    Result: '及格',
+    Score: '80分',
   },
   {
     id: 2,
     name: '考试8',
     examTime: '2023-08-01 10:00:00',
-    Status: '未开始',
+    Status: '已出分',
+    Result: '不及格',
+    Score: '880分',
   },
   {
     id: 3,
     name: '考试9',
     examTime: '2023-08-01 10:00:00',
-    Status: '缺考',
+    Status: '待出分',
   },
   {
     id: 4,
@@ -67,16 +71,30 @@ const statusColorMap = {
   进行中: '#EB5E12',
   未开始: '#215ACD',
   缺考: '#A4AAB2',
+  已出分: '#38B865',
+  待出分: '#215ACD',
 }
-const toExamDetail = (id) => {
-  uni.navigateTo({
-    url: '/pages/knowledge/exam/examcontent/index',
-  })
+const toExamDetail = (data) => {
+  if (data.Status === '未开始') {
+    uni.navigateTo({
+      url: '/pages/knowledge/exam/explanation/index',
+    })
+  } else if (data.Status === '进行中') {
+    uni.navigateTo({
+      url: '/pages/knowledge/exam/examcontent/index',
+    })
+  }
 }
-const ExamtakenDetail = (id) => {
-  uni.navigateTo({
-    url: '/pages/knowledge/exam/explanation/index',
-  })
+const ExamtakenDetail = (data) => {
+  if (data.Status === '待出分') {
+    uni.navigateTo({
+      url: '/pages/knowledge/exam/examresults/scoresnotreleased',
+    })
+  } else if (data.Status === '已出分') {
+    uni.navigateTo({
+      url: '/pages/knowledge/exam/examresults/index',
+    })
+  }
 }
 </script>
 <template>
@@ -97,7 +115,7 @@ const ExamtakenDetail = (id) => {
         v-if="activeId === 1"
         class="content_item"
         v-for="(item, index) in waitingForTheExam"
-        @click="toExamDetail(item.id)"
+        @click="toExamDetail(item)"
         :key="index"
       >
         <view class="content_item_title">
@@ -114,7 +132,7 @@ const ExamtakenDetail = (id) => {
         v-else
         class="content_item"
         v-for="(item, index) in Examtaken"
-        @click="ExamtakenDetail(item.id)"
+        @click="ExamtakenDetail(item)"
         :key="'else-' + index"
       >
         <view class="content_item_title">
@@ -125,6 +143,17 @@ const ExamtakenDetail = (id) => {
             >{{ item.Status }}</span
           >
         </view>
+        <view class="content_item_result_score" v-if="item.Status === '已出分'">
+          <view class="content_item_result"
+            >考试结果：<text
+              :style="{ color: item.Result === '及格' ? '#38B865' : '#EB5E12' }"
+              >{{ item.Result }}</text
+            ></view
+          >
+          <view class="content_item_score"
+            >分数：<text>{{ item.Score }}</text></view
+          >
+        </view>
         <view class="content_item_time">{{ item.examTime }}</view>
       </view>
     </view>
@@ -174,11 +203,13 @@ body {
   gap: 24rpx;
   margin-top: 46rpx;
   .content_item {
-    height: 150rpx;
+    // height: 150rpx;
     border-bottom: 1px solid #eeeeee;
     display: flex;
     flex-direction: column;
     gap: 30rpx;
+    padding-bottom: 24rpx;
+    box-sizing: border-box;
     // justify-content: center;
     // gap: 12rpx;
     .content_item_title {
@@ -208,6 +239,12 @@ body {
         white-space: nowrap;
       }
     }
+    .content_item_result_score {
+      display: flex;
+      gap: 24rpx;
+      color: #31373d;
+      font-size: 28rpx;
+    }
     .content_item_time {
       font-size: 28rpx;
       font-weight: 400;

src/pages/knowledge/index.vue

@@ -1,6 +1,56 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-
+import searchimg from '@/assets/searchimgs.png'
+const list = ref([
+  {
+    backcolor: '#215ACD',
+  },
+  {
+    backcolor: '#38B865',
+  },
+  {
+    backcolor: '#EB5E12',
+  },
+  {
+    backcolor: '#215ACD',
+  },
+  {
+    backcolor: '#215ACD',
+  },
+  {
+    backcolor: '#38B865',
+  },
+  {
+    backcolor: '#215ACD',
+  },
+  {
+    backcolor: '#38B865',
+  },
+  {
+    backcolor: '#EB5E12',
+  },
+  {
+    backcolor: '#8848D7',
+  },
+  {
+    backcolor: '#EB5E12',
+  },
+  {
+    backcolor: '#8848D7',
+  },
+  {
+    backcolor: '#38B865',
+  },
+  {
+    backcolor: '#EB5E12',
+  },
+  {
+    backcolor: '#8848D7',
+  },
+  {
+    backcolor: '#8848D7',
+  },
+])
 const handleKnowledgeSearch = () => {
   uni.navigateTo({
     url: '/pages/knowledge/search/index',
@@ -14,7 +64,7 @@ const handleMyExamination = () => {
 </script>
 <template>
   <view class="knowledge">
-    <view class="header_nav">{{ $t('tabbar.knowledgebase') }}</view>
+    <view class="header_nav">知识学院</view>
     <view class="header_nav_item">
       <view class="header_nav_item_items" @tap="handleKnowledgeSearch">
         <span>知识搜索</span>
@@ -27,8 +77,17 @@ const handleMyExamination = () => {
     </view>
     <view class="main_list">
       <view class="main_list_title">最近查看</view>
-      <view class="main_list_items" v-for="(item, index) in 50">
-        <view class="main_list_items_icon"></view>
+      <view class="main_list_items" v-for="(item, index) in list" :key="index">
+        <view
+          class="main_list_items_icon"
+          :style="{ background: item.backcolor }"
+        >
+          <view
+            class="main_list_items_icon_line"
+            v-for="(line, lineIndex) in 3"
+            :key="lineIndex"
+          ></view>
+        </view>
         <view class="main_list_items_text">
           <span>我的文件</span>
           <span>文档介绍</span>
@@ -83,10 +142,16 @@ body {
       display: flex;
       justify-content: space-between;
       .left_items {
-        background-color: #79a6ff;
+        background-image: url('../../assets/searchimgs.png');
+        background-size: contain;
+        background-position: center bottom;
+        background-repeat: no-repeat;
       }
       .right_items {
-        background-color: #aee1ca;
+        background-image: url('../../assets/exam.png');
+        background-size: contain;
+        background-position: center bottom;
+        background-repeat: no-repeat;
       }
       .header_nav_item_items_icon {
         width: 96rpx;
@@ -155,8 +220,21 @@ body {
       .main_list_items_icon {
         width: 74rpx;
         height: 86rpx;
-        background-color: #79a6ff;
-        border-radius: 12rpx;
+        border-radius: 20rpx;
+        padding: 20rpx;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .main_list_items_icon_line {
+          width: 100%;
+          height: 6rpx;
+          border-radius: 4rpx;
+          background-color: #ffffff;
+          &:nth-child(1) {
+            width: 60%;
+          }
+        }
       }
     }
   }

src/pages/knowledge/search/index.vue

@@ -1,4 +1,55 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+const list = ref([
+  {
+    backcolor: '#215ACD',
+  },
+  {
+    backcolor: '#38B865',
+  },
+  {
+    backcolor: '#EB5E12',
+  },
+  {
+    backcolor: '#215ACD',
+  },
+  {
+    backcolor: '#215ACD',
+  },
+  {
+    backcolor: '#38B865',
+  },
+  {
+    backcolor: '#215ACD',
+  },
+  {
+    backcolor: '#38B865',
+  },
+  {
+    backcolor: '#EB5E12',
+  },
+  {
+    backcolor: '#8848D7',
+  },
+  {
+    backcolor: '#EB5E12',
+  },
+  {
+    backcolor: '#8848D7',
+  },
+  {
+    backcolor: '#38B865',
+  },
+  {
+    backcolor: '#EB5E12',
+  },
+  {
+    backcolor: '#8848D7',
+  },
+  {
+    backcolor: '#8848D7',
+  },
+])
 const itemClick = (index: number) => {
   uni.navigateTo({
     url: '/pages/knowledge/search/details/index',
@@ -13,10 +64,19 @@ const itemClick = (index: number) => {
     <view class="main_list">
       <view
         class="main_list_items"
-        v-for="(item, index) in 50"
+        v-for="(item, index) in list"
         @tap="itemClick(index)"
       >
-        <view class="main_list_items_icon"></view>
+        <view
+          class="main_list_items_icon"
+          :style="{ background: item.backcolor }"
+        >
+          <view
+            class="main_list_items_icon_line"
+            v-for="(line, lineIndex) in 3"
+            :key="lineIndex"
+          ></view>
+        </view>
         <view class="main_list_items_text">
           <span>我的文件</span>
           <span>文档介绍</span>
@@ -102,8 +162,21 @@ body {
       .main_list_items_icon {
         width: 74rpx;
         height: 86rpx;
-        background-color: #79a6ff;
-        border-radius: 12rpx;
+        border-radius: 20rpx;
+        padding: 20rpx;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .main_list_items_icon_line {
+          width: 100%;
+          height: 6rpx;
+          border-radius: 4rpx;
+          background-color: #ffffff;
+          &:nth-child(1) {
+            width: 60%;
+          }
+        }
       }
     }
   }