From d4db394b58e31902f950542e0c0faef693f6d889 Mon Sep 17 00:00:00 2001
From: Wxp <YNNU@2025>
Date: Tue, 12 Aug 2025 18:22:50 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/icon/finish.png   |  Bin 0 -> 2220 bytes
 public/images/icon/learning.png |  Bin 0 -> 7450 bytes
 src/components/ExamDetail.vue   | 3836 +++++++++++++++++++++++++++++++
 src/views/Profile.vue           |  513 ++---
 4 files changed, 4026 insertions(+), 323 deletions(-)
 create mode 100644 public/images/icon/finish.png
 create mode 100644 public/images/icon/learning.png
 create mode 100644 src/components/ExamDetail.vue

diff --git a/public/images/icon/finish.png b/public/images/icon/finish.png
new file mode 100644
index 0000000000000000000000000000000000000000..4601285f138c214ab06c2b42084b45a46efdf767
GIT binary patch
literal 2220
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

literal 0
HcmV?d00001

diff --git a/public/images/icon/learning.png b/public/images/icon/learning.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ad46e1542dbe36250896f1536256f0ea316fe01
GIT binary patch
literal 7450
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
Y01Ln(b$1cDyZ`_I07*qoM6N<$f>oj$ga7~l

literal 0
HcmV?d00001

diff --git a/src/components/ExamDetail.vue b/src/components/ExamDetail.vue
new file mode 100644
index 0000000..f948249
--- /dev/null
+++ b/src/components/ExamDetail.vue
@@ -0,0 +1,3836 @@
+<template>
+  <AppLayout>
+    <div class="page flex-col">
+    <div class="group_1 flex-col">
+      <div class="image-text_11 flex-row justify-between">
+        <img
+          class="thumbnail_1"
+          referrerpolicy="no-referrer"
+          src="../assets/img/SketchPngfba15ce53f43b8b9388b6f22aa4d92623e677b1945944224702d33532a84da5d.png"
+        />
+        <span class="text-group_1">C.安全标签</span>
+      </div>
+      <img
+        class="image_1"
+        referrerpolicy="no-referrer"
+        src="../assets/img/SketchPng1c3fd4f1da2ca443d31889b5505075224cce90ba279062417047bdd43b8ed5cc.png"
+      />
+    </div>
+    <div class="group_2 flex-col">
+      <div class="group_36 flex-col">
+        <div class="box_13 flex-row">
+          <div class="text-wrapper_1 flex-col"><span class="text_12">用户中心&nbsp;&gt;&nbsp;我的练习&gt;</span></div>
+          <span class="text_13">这里是试卷名称的练习结果</span>
+        </div>
+        <div class="box_14 flex-row justify-between">
+          <div class="section_1 flex-col">
+            <span class="paragraph_1">
+              <br />
+              <br />
+              C++语言程序设计基础考试
+            </span>
+            <div class="box_15 flex-row">
+              <span class="text_14">01【单选題】</span>
+              <div class="section_2 flex-col">
+                <div class="text-wrapper_2 flex-col"><span class="text_15">2分</span></div>
+              </div>
+              <span class="text_16">+5分</span>
+            </div>
+            <div class="box_16 flex-row">
+              <img
+                class="thumbnail_5"
+                referrerpolicy="no-referrer"
+                src="../assets/img/SketchPng51c1f99cd7b1c15c6efdc0480d16ff2681be4bef17a9dedfcaac33f2976fbd81.png"
+              />
+              <span class="text_17">
+                危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装件）上粘贴，或者拴挂与包装内危险化学品相符的化学品（&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;）和安全技术说明书。
+              </span>
+            </div>
+            <img
+              class="thumbnail_6"
+              referrerpolicy="no-referrer"
+              src="../assets/img/SketchPngd685067044861e44fedf3fa2d886e5113bd9fb1fcbaddbb3aea61d47f174530c.png"
+            />
+            <div class="group_9 flex-row">
+              <div class="image-text_12 flex-row justify-between">
+                <img
+                  class="thumbnail_7"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPngba1ebd609feef44b1b081a2a9f18720b9d9e66a7cff9ce51622c1db5220d6d36.png"
+                />
+                <span class="text-group_2">B.应急处理措施</span>
+              </div>
+            </div>
+            <div class="group_10 flex-row">
+              <div class="image-text_13 flex-row justify-between">
+                <img
+                  class="thumbnail_8"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPngfba15ce53f43b8b9388b6f22aa4d92623e677b1945944224702d33532a84da5d.png"
+                />
+                <span class="text-group_3">C.安全标签</span>
+              </div>
+            </div>
+            <div class="group_11 flex-row">
+              <div class="image-text_14 flex-row justify-between">
+                <img
+                  class="thumbnail_9"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPngfba15ce53f43b8b9388b6f22aa4d92623e677b1945944224702d33532a84da5d.png"
+                />
+                <span class="text-group_4">D.产品合格证</span>
+              </div>
+            </div>
+            <div class="box_17 flex-row">
+              <div class="text-wrapper_3 flex-col"><span class="text_18">回答正确</span></div>
+              <div class="text-wrapper_4">
+                <span class="text_19">正确答案：</span>
+                <span class="text_20">B</span>
+              </div>
+              <div class="text-wrapper_5">
+                <span class="text_21">你的答案：</span>
+                <span class="text_22">B</span>
+              </div>
+            </div>
+            <div class="text-wrapper_6 flex-col">
+              <span class="text_23">答案解析：</span>
+              <span class="text_24">
+                答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答
+              </span>
+            </div>
+            <div class="box_18 flex-row">
+              <span class="text_25">02【多选題】</span>
+              <div class="group_14 flex-col">
+                <div class="text-wrapper_7 flex-col"><span class="text_26">2分</span></div>
+              </div>
+            </div>
+            <span class="text_27">
+              危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装件）上粘贴，或者拴挂与包装内危险化学品相符的化学品（&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;）和安全技术说明书。
+            </span>
+            <div class="grid_2 flex-row">
+              <div class="box_6 flex-col">
+                <div class="image-text_15 flex-row justify-between">
+                  <div class="image-wrapper_3 flex-col">
+                    <img
+                      class="thumbnail_10"
+                      referrerpolicy="no-referrer"
+                      src="../assets/img/SketchPngba1ebd609feef44b1b081a2a9f18720b9d9e66a7cff9ce51622c1db5220d6d36.png"
+                    />
+                  </div>
+                  <span class="text-group_5">A.操作规范说明书</span>
+                </div>
+                <img
+                  class="image_6"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPng1c3fd4f1da2ca443d31889b5505075224cce90ba279062417047bdd43b8ed5cc.png"
+                />
+              </div>
+              <div class="box_7 flex-col">
+                <div class="image-text_16 flex-row justify-between">
+                  <img
+                    class="thumbnail_11"
+                    referrerpolicy="no-referrer"
+                    src="../assets/img/SketchPngba1ebd609feef44b1b081a2a9f18720b9d9e66a7cff9ce51622c1db5220d6d36.png"
+                  />
+                  <span class="text-group_6">B.应急处理措施</span>
+                </div>
+                <img
+                  class="image_7"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPngd3ec698892f355c11c8a5fcf8cc8b77eda0b1bf98582c3d8a6034f92b66215f8.png"
+                />
+              </div>
+              <div class="box_8 flex-col">
+                <div class="image-text_17 flex-row justify-between">
+                  <img
+                    class="thumbnail_12"
+                    referrerpolicy="no-referrer"
+                    src="../assets/img/SketchPngba1ebd609feef44b1b081a2a9f18720b9d9e66a7cff9ce51622c1db5220d6d36.png"
+                  />
+                  <span class="text-group_7">D.产品合格证</span>
+                </div>
+                <img
+                  class="image_8"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPngd3ec698892f355c11c8a5fcf8cc8b77eda0b1bf98582c3d8a6034f92b66215f8.png"
+                />
+              </div>
+              <div class="box_9 flex-col">
+                <div class="image-text_18 flex-row justify-between">
+                  <img
+                    class="thumbnail_13"
+                    referrerpolicy="no-referrer"
+                    src="../assets/img/SketchPngfba15ce53f43b8b9388b6f22aa4d92623e677b1945944224702d33532a84da5d.png"
+                  />
+                  <span class="text-group_8">E.产品标签</span>
+                </div>
+                <img
+                  class="image_9"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPng1c3fd4f1da2ca443d31889b5505075224cce90ba279062417047bdd43b8ed5cc.png"
+                />
+              </div>
+            </div>
+            <div class="box_19 flex-row">
+              <div class="text-wrapper_8 flex-col"><span class="text_28">回答错误</span></div>
+              <div class="text-wrapper_9">
+                <span class="text_29">正确答案：</span>
+                <span class="text_30">BC</span>
+              </div>
+              <div class="text-wrapper_10">
+                <span class="text_31">你的答案：</span>
+                <span class="text_32">AE</span>
+              </div>
+              <span class="text_33">-5分</span>
+            </div>
+            <div class="text-wrapper_11 flex-col">
+              <span class="text_34">答案解析：</span>
+              <span class="text_35">
+                答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答案解析答
+              </span>
+            </div>
+            <div class="text-wrapper_12 flex-col"><span class="text_36">重新练习</span></div>
+            <img
+              class="thumbnail_14"
+              referrerpolicy="no-referrer"
+              src="../assets/img/SketchPngd0745b9ee85d1fd2251cde7df5f13cdc38cfb57ba7f1ca467638a1196af0a4fc.png"
+            />
+            <div class="group_16 flex-row">
+              <img
+                class="thumbnail_15"
+                referrerpolicy="no-referrer"
+                src="../assets/img/SketchPngfba15ce53f43b8b9388b6f22aa4d92623e677b1945944224702d33532a84da5d.png"
+              />
+              <span class="text_37">A.操作规范说明书</span>
+            </div>
+          </div>
+          <div class="section_4 flex-col">
+            <img
+              class="thumbnail_16"
+              referrerpolicy="no-referrer"
+              src="../assets/img/SketchPnga3b5c8bcf25b6ef6b920ad0da099bae25ac23fcd4f2db31113c9943762f8fedb.png"
+            />
+            <div class="box_10 flex-row">
+              <div class="text-group_13 flex-col justify-between">
+                <span class="text_38">120</span>
+                <span class="text_39">最高分</span>
+              </div>
+              <img
+                class="image_10"
+                referrerpolicy="no-referrer"
+                src="../assets/img/SketchPng3d331115a0edec480a435e4d8196c579859cd575974011dc6c87a8bdd21e9a47.png"
+              />
+              <div class="group_37 flex-col justify-between">
+                <div class="text-wrapper_80 flex-row">
+                  <span class="text_40">第</span>
+                  <span class="text_41">10</span>
+                  <span class="text_42">名</span>
+                </div>
+                <span class="text_43">参与人数100人</span>
+              </div>
+              <img
+                class="image_11"
+                referrerpolicy="no-referrer"
+                src="../assets/img/SketchPng3d331115a0edec480a435e4d8196c579859cd575974011dc6c87a8bdd21e9a47.png"
+              />
+              <div class="text-group_14 flex-col justify-between">
+                <span class="text_44">90</span>
+                <span class="text_45">答对题数</span>
+              </div>
+            </div>
+            <div class="box_11 flex-col">
+              <span class="text_46">答题卡</span>
+              <span class="text_47">单选（10）</span>
+              <div class="group_38 flex-row">
+                <div class="text-wrapper_14 flex-col"><span class="text_48">01</span></div>
+                <div class="group_19 flex-row">
+                  <span class="text_49">01</span>
+                  <div class="text-wrapper_15 flex-col"><span class="text_50">01</span></div>
+                </div>
+                <div class="text-wrapper_16 flex-col"><span class="text_51">01</span></div>
+                <div class="text-wrapper_17 flex-col"><span class="text_52">01</span></div>
+                <div class="text-wrapper_18 flex-col"><span class="text_53">01</span></div>
+              </div>
+              <div class="group_39 flex-row">
+                <div class="text-wrapper_19 flex-col"><span class="text_54">01</span></div>
+                <div class="text-wrapper_20 flex-col"><span class="text_55">01</span></div>
+                <div class="text-wrapper_21 flex-col"><span class="text_56">01</span></div>
+                <div class="text-wrapper_22 flex-col"><span class="text_57">01</span></div>
+                <div class="text-wrapper_23 flex-col"><span class="text_58">01</span></div>
+              </div>
+              <div class="group_40 flex-row">
+                <div class="text-wrapper_24 flex-col"><span class="text_59">01</span></div>
+                <div class="text-wrapper_25 flex-col"><span class="text_60">01</span></div>
+                <div class="text-wrapper_26 flex-col"><span class="text_61">01</span></div>
+              </div>
+              <span class="text_62">多选（10）</span>
+              <div class="group_41 flex-row">
+                <div class="text-wrapper_27 flex-col"><span class="text_63">01</span></div>
+                <div class="text-wrapper_28 flex-col"><span class="text_64">01</span></div>
+                <div class="text-wrapper_29 flex-col"><span class="text_65">01</span></div>
+                <div class="text-wrapper_30 flex-col"><span class="text_66">01</span></div>
+                <div class="text-wrapper_31 flex-col"><span class="text_67">01</span></div>
+              </div>
+              <div class="group_42 flex-row">
+                <div class="text-wrapper_32 flex-col"><span class="text_68">01</span></div>
+                <div class="text-wrapper_33 flex-col"><span class="text_69">01</span></div>
+                <div class="text-wrapper_34 flex-col"><span class="text_70">01</span></div>
+                <div class="text-wrapper_35 flex-col"><span class="text_71">01</span></div>
+                <div class="text-wrapper_36 flex-col"><span class="text_72">01</span></div>
+              </div>
+              <div class="group_43 flex-row justify-between">
+                <div class="text-wrapper_37 flex-col"><span class="text_73">01</span></div>
+                <div class="text-wrapper_38 flex-col"><span class="text_74">01</span></div>
+              </div>
+              <span class="text_75">判断（10）</span>
+              <div class="group_44 flex-row">
+                <div class="text-wrapper_39 flex-col"><span class="text_76">01</span></div>
+                <div class="text-wrapper_40 flex-col"><span class="text_77">01</span></div>
+                <div class="text-wrapper_41 flex-col"><span class="text_78">01</span></div>
+                <div class="text-wrapper_42 flex-col"><span class="text_79">01</span></div>
+                <div class="text-wrapper_43 flex-col"><span class="text_80">01</span></div>
+              </div>
+              <div class="group_45 flex-row">
+                <div class="text-wrapper_44 flex-col"><span class="text_81">01</span></div>
+                <div class="text-wrapper_45 flex-col"><span class="text_82">01</span></div>
+                <div class="text-wrapper_46 flex-col"><span class="text_83">01</span></div>
+                <div class="text-wrapper_47 flex-col"><span class="text_84">01</span></div>
+                <div class="text-wrapper_48 flex-col"><span class="text_85">01</span></div>
+              </div>
+              <div class="group_46 flex-row">
+                <div class="text-wrapper_49 flex-col"><span class="text_86">01</span></div>
+                <div class="text-wrapper_50 flex-col"><span class="text_87">01</span></div>
+                <div class="text-wrapper_51 flex-col"><span class="text_88">01</span></div>
+                <span class="text_89">01</span>
+              </div>
+              <span class="text_90">填空（10）</span>
+              <div class="group_47 flex-row">
+                <div class="text-wrapper_52 flex-col"><span class="text_91">01</span></div>
+                <div class="text-wrapper_53 flex-col"><span class="text_92">01</span></div>
+                <div class="text-wrapper_54 flex-col"><span class="text_93">01</span></div>
+                <div class="text-wrapper_55 flex-col"><span class="text_94">01</span></div>
+                <div class="text-wrapper_56 flex-col"><span class="text_95">01</span></div>
+              </div>
+              <div class="group_48 flex-row">
+                <div class="text-wrapper_57 flex-col"><span class="text_96">01</span></div>
+                <div class="text-wrapper_58 flex-col"><span class="text_97">01</span></div>
+                <div class="text-wrapper_59 flex-col"><span class="text_98">01</span></div>
+                <div class="text-wrapper_60 flex-col"><span class="text_99">01</span></div>
+                <div class="text-wrapper_61 flex-col"><span class="text_100">01</span></div>
+              </div>
+              <div class="group_49 flex-row">
+                <div class="text-wrapper_62 flex-col"><span class="text_101">01</span></div>
+                <div class="text-wrapper_63 flex-col"><span class="text_102">01</span></div>
+                <div class="text-wrapper_64 flex-col"><span class="text_103">01</span></div>
+                <div class="text-wrapper_65 flex-col"><span class="text_104">01</span></div>
+                <div class="text-wrapper_66 flex-col"><span class="text_105">01</span></div>
+              </div>
+              <span class="text_106">简答（10）</span>
+              <div class="group_50 flex-row">
+                <div class="text-wrapper_67 flex-col"><span class="text_107">01</span></div>
+                <div class="text-wrapper_68 flex-col"><span class="text_108">01</span></div>
+                <div class="text-wrapper_69 flex-col"><span class="text_109">01</span></div>
+                <div class="text-wrapper_70 flex-col"><span class="text_110">01</span></div>
+                <div class="text-wrapper_71 flex-col"><span class="text_111">01</span></div>
+              </div>
+              <div class="group_51 flex-row">
+                <div class="text-wrapper_72 flex-col"><span class="text_112">01</span></div>
+                <div class="text-wrapper_73 flex-col"><span class="text_113">01</span></div>
+                <div class="text-wrapper_74 flex-col"><span class="text_114">01</span></div>
+                <div class="text-wrapper_75 flex-col"><span class="text_115">01</span></div>
+                <div class="text-wrapper_76 flex-col"><span class="text_116">01</span></div>
+              </div>
+              <div class="text-wrapper_77 flex-col"><span class="text_117">01</span></div>
+              <div class="group_52 flex-row">
+                <img
+                  class="thumbnail_17"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPng02c7405480ecea03384e56acb9741b8ba125dff9a825f1efc664aac74c78b594.png"
+                />
+                <span class="text_118">答对</span>
+                <img
+                  class="thumbnail_18"
+                  referrerpolicy="no-referrer"
+                  src="../assets/img/SketchPng0966a015820b8b38f7e9e77bb02f81ba6469567f877e003e1ed3e60ac79575c5.png"
+                />
+                <span class="text_119">答错</span>
+              </div>
+              <div class="group_34 flex-row">
+                <div class="image-text_19 flex-row justify-between">
+                  <img
+                    class="thumbnail_19"
+                    referrerpolicy="no-referrer"
+                    src="../assets/img/SketchPngfba15ce53f43b8b9388b6f22aa4d92623e677b1945944224702d33532a84da5d.png"
+                  />
+                  <span class="text-group_11">只看错题</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box_12 flex-col">
+          <div class="text-wrapper_78 flex-col"><span class="text_120">难度:4.8</span></div>
+          <span class="text_121">得分</span>
+          <span class="text_122">98</span>
+          <span class="text_123">答题日期：2025-07-10&nbsp;12：00</span>
+          <span class="text_124">答题时间：100/120</span>
+          <span class="text_125">题目数量：100</span>
+          <img
+            class="image_12"
+            referrerpolicy="no-referrer"
+            src="../assets/img/SketchPng21155c50e0092a434ab4b3aaf4a42629165d10a31cec8992a0c2755b9e6a29c0.png"
+          />
+        </div>
+      </div>
+
+    </div>
+  </div>
+  </AppLayout>
+</template>
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import AppLayout from './layout/AppLayout.vue'
+
+// 定义接口
+interface ExamOption {
+  id: string
+  text: string
+  image?: string
+}
+
+interface ExamQuestion {
+  id: number
+  title: string
+  content: string
+  options: ExamOption[]
+  correctAnswers: string[]
+  userAnswers: string[]
+  isCorrect: boolean
+}
+
+interface ExamDetail {
+  id: number
+  title: string
+  examDate?: string
+  practiceDate?: string
+  duration: number
+  totalQuestions: number
+  correctCount: number
+  wrongCount: number
+  score: number
+  questions: ExamQuestion[]
+}
+
+// 定义props
+const props = defineProps<{
+  currentExamDetail: ExamDetail
+  currentDetailType: 'exam' | 'practice'
+}>()
+
+// 定义emits
+const emit = defineEmits(['close'])
+
+// 关闭考试详情
+const closeExamDetail = () => {
+  emit('close')
+}
+
+// 获取答题项的样式
+const getAnswerItemClass = (questionId: number) => {
+  const question = props.currentExamDetail.questions.find(q => q.id === questionId)
+  if (!question) return ''
+  if (question.userAnswers.length === 0) return 'not-answered'
+  return question.isCorrect ? 'correct' : 'wrong'
+}
+</script>
+<style scoped>
+body * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
+}
+button {
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  outline: none;
+  background-color: transparent;
+}
+button:active {
+  opacity: 0.6;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+.justify-start {
+  display: flex;
+  justify-content: flex-start;
+}
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+.justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
+.justify-evenly {
+  display: flex;
+  justify-content: space-evenly;
+}
+.justify-around {
+  display: flex;
+  justify-content: space-around;
+}
+.justify-between {
+  display: flex;
+  justify-content: space-between;
+}
+.align-start {
+  display: flex;
+  align-items: flex-start;
+}
+.align-center {
+  display: flex;
+  align-items: center;
+}
+.align-end {
+  display: flex;
+  align-items: flex-end;
+}
+
+
+.page {
+  position: fixed;
+  top: 65px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #f5f5f5;
+  z-index: 1000;
+  overflow-y: auto;
+}
+
+.group_1 {
+  width: 336px;
+  height: 278px;
+  background: url(../assets/img/SketchPng9bbe2b1aa0e878b2f298e43a09c58342fa153a645185ba930203a432fdd60449.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 847px 0 0 991px;
+}
+
+.image-text_11 {
+  width: 112px;
+  height: 22px;
+  margin: 14px 0 0 18px;
+}
+
+.thumbnail_1 {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.text-group_1 {
+  width: 80px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.image_1 {
+  width: 300px;
+  height: 212px;
+  margin: 12px 0 18px 18px;
+}
+
+.group_2 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1961px;
+  background: url(../assets/img/SketchPng1f76983c33555ca23c8d8a8641aa70ae9c7a64a591921cd77d5abf3382182dad.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.group_3 {
+  height: 70px;
+  width: 1920px;
+}
+
+.group_4 {
+  height: 70px;
+  background: url(../assets/img/SketchPng7f01f41ca2a2aa6566eef20f79df09ddac55da4417beab7ce39e00caeb2e6775.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 1920px;
+}
+
+.box_1 {
+  width: 1920px;
+  height: 70px;
+  background: url(../assets/img/SketchPng8691cda48d274a4b8b7d7c03bec40c8a124f00094bc8db099cb474eca822f3e2.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.image_2 {
+  width: 72px;
+  height: 61px;
+  margin: 4px 0 0 30px;
+}
+
+.box_2 {
+  width: 671px;
+  height: 31px;
+  margin: 23px 0 0 38px;
+}
+
+.text_1 {
+  width: 36px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.group_5 {
+  position: relative;
+  width: 621px;
+  height: 31px;
+  background: url(../assets/img/SketchPng69cf8fdd16f16db69350936072d27923134180cc5fe96f9b4561e8af30d27a88.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.thumbnail_2 {
+  width: 15px;
+  height: 16px;
+  margin: 4px 0 0 34px;
+}
+
+.text_2 {
+  width: 72px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 6px;
+}
+
+.text_3 {
+  width: 72px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 48px;
+}
+
+.text_4 {
+  width: 72px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 48px;
+}
+
+.text_5 {
+  width: 72px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 48px;
+}
+
+.text_6 {
+  width: 36px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 0 50px 0 48px;
+}
+
+.image-wrapper_1 {
+  height: 18px;
+  background: url(../assets/img/SketchPng3e4dbbb3fb119f1e8681ae696e2c0515085af1e15994bff699f54d008176c2a9.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 42px;
+  position: absolute;
+  left: 574px;
+  top: -9px;
+}
+
+.image_3 {
+  width: 22px;
+  height: 7px;
+  margin: 6px 0 0 10px;
+}
+
+.box_3 {
+  width: 283px;
+  height: 70px;
+  margin-left: 280px;
+}
+
+.image_4 {
+  width: 1px;
+  height: 70px;
+}
+
+.thumbnail_3 {
+  width: 16px;
+  height: 16px;
+  margin: 27px 0 0 22px;
+}
+
+.text_7 {
+  width: 126px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 24px 0 0 14px;
+}
+
+.image_5 {
+  width: 1px;
+  height: 70px;
+  margin-left: 103px;
+}
+
+.thumbnail_4 {
+  width: 18px;
+  height: 18px;
+  margin: 26px 0 0 44px;
+}
+
+.text_8 {
+  width: 72px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 23px 0 0 7px;
+}
+
+.label_1 {
+  width: 24px;
+  height: 24px;
+  margin: 23px 0 0 29px;
+}
+
+.text_9 {
+  width: 72px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 23px 0 0 4px;
+}
+
+.label_2 {
+  width: 24px;
+  height: 24px;
+  margin: 23px 0 0 20px;
+}
+
+.text_10 {
+  width: 54px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 23px 0 0 4px;
+}
+
+.image-wrapper_2 {
+  height: 28px;
+  background: url(../assets/img/SketchPngdb7d86aae70709cb9fab9fb434ccc5cff4782024cb933b5a62a501c3f58cbe57.png) -1px -1px
+    no-repeat;
+  background-size: 30px 30px;
+  width: 28px;
+  margin: 22px 0 0 36px;
+}
+
+.label_3 {
+  width: 26px;
+  height: 26px;
+  margin: 1px 0 0 1px;
+}
+
+.text_11 {
+  width: 54px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 23px 46px 0 10px;
+}
+
+.group_36 {
+  position: relative;;
+  width: 100%;
+  height: 1669px;
+}
+
+.box_13 {
+  width: 309px;
+  height: 20px;
+  margin: 28px 0 0 120px;
+}
+
+.text-wrapper_1 {
+  height: 20px;
+  width: 249px;
+}
+
+.text_12 {
+  width: 136px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text_13 {
+  width: 167px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin-left: -107px;
+}
+
+.box_14 {
+  width: 1420px;
+  height: 1513px;
+  margin: 20px 0 88px 120px;
+}
+
+.section_1 {
+  position: relative;
+  width: 1093px;
+  height: 1513px;
+  background: url(../assets/img/SketchPng3f34b5195dc770058465327296cd4a7685abb4b97bc4850d7cdf01c622bb0c71.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.paragraph_1 {
+  width: 239px;
+  height: 40px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 20px;
+  font-weight: NaN;
+  text-align: left;
+  line-height: 20px;
+  margin: 6px 0 0 20px;
+}
+
+.box_15 {
+  width: 1053px;
+  height: 26px;
+  margin: 42px 0 0 20px;
+}
+
+.text_14 {
+  width: 100px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 136, 209, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.section_2 {
+  height: 20px;
+  width: 36px;
+  margin: 1px 0 0 6px;
+}
+
+.text-wrapper_2 {
+  height: 20px;
+  background: url(../assets/img/SketchPng784631da64c587e3bb588abbfd9695d3641075f1c3b7674559bb6182edd4303b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 36px;
+}
+
+.text_15 {
+  width: 20px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(0, 136, 209, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 2px 0 0 8px;
+}
+
+.text_16 {
+  width: 27px;
+  height: 17px;
+  overflow-wrap: break-word;
+  color: rgba(255, 54, 54, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 17px;
+  margin: 9px 0 0 884px;
+}
+
+.box_16 {
+  position: relative;
+  width: 978px;
+  height: 44px;
+  margin: 8px 0 0 20px;
+}
+
+.thumbnail_5 {
+  width: 14px;
+  height: 14px;
+  margin: 4px 0 0 492px;
+}
+
+.text_17 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 978px;
+  height: 44px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  line-height: 22px;
+}
+
+.thumbnail_6 {
+  width: 18px;
+  height: 18px;
+  margin: 24px 0 0 20px;
+}
+
+.group_9 {
+  width: 1053px;
+  height: 50px;
+  background: url(../assets/img/SketchPng497c2c7870f50072ce8928fa8ad148d0a1c81e8dea997390532755ffd2b46b92.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 52px 0 0 20px;
+}
+
+.image-text_12 {
+  width: 142px;
+  height: 22px;
+  margin: 14px 0 0 19px;
+}
+
+.thumbnail_7 {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.text-group_2 {
+  width: 110px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.group_10 {
+  width: 1053px;
+  height: 50px;
+  background: url(../assets/img/SketchPng497c2c7870f50072ce8928fa8ad148d0a1c81e8dea997390532755ffd2b46b92.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 24px 0 0 20px;
+}
+
+.image-text_13 {
+  width: 112px;
+  height: 22px;
+  margin: 14px 0 0 19px;
+}
+
+.thumbnail_8 {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.text-group_3 {
+  width: 80px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.group_11 {
+  width: 1053px;
+  height: 50px;
+  background: url(../assets/img/SketchPng497c2c7870f50072ce8928fa8ad148d0a1c81e8dea997390532755ffd2b46b92.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 20px 0 0 20px;
+}
+
+.image-text_14 {
+  width: 128px;
+  height: 22px;
+  margin: 14px 0 0 19px;
+}
+
+.thumbnail_9 {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.text-group_4 {
+  width: 96px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.box_17 {
+  width: 316px;
+  height: 33px;
+  margin: 15px 0 0 20px;
+}
+
+.text-wrapper_3 {
+  height: 33px;
+  background: url(../assets/img/SketchPnga70e6d9d42732182c24e96247b78d1421bd817230a49c4a1424c4c2d4979e9ce.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 100px;
+}
+
+.text_18 {
+  width: 56px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 7px 0 0 22px;
+}
+
+.text-wrapper_4 {
+  width: 80px;
+  height: 20px;
+  overflow-wrap: break-word;
+  font-size: 0;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 7px 0 0 27px;
+}
+
+.text_19 {
+  width: 80px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text_20 {
+  width: 80px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(2, 136, 209, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text-wrapper_5 {
+  width: 80px;
+  height: 20px;
+  overflow-wrap: break-word;
+  font-size: 0;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 7px 0 0 29px;
+}
+
+.text_21 {
+  width: 80px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text_22 {
+  width: 80px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(2, 136, 209, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text-wrapper_6 {
+  width: 1053px;
+  height: 71px;
+  background: url(../assets/img/SketchPng5dbce10b6716c788b9c46e8fb35d489f2cd3025d242d845e60a55b04542386b2.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 12px 0 0 20px;
+}
+
+.text_23 {
+  width: 60px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 13px 0 0 14px;
+}
+
+.text_24 {
+  width: 966px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(73, 112, 135, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 2px 0 16px 14px;
+}
+
+.box_18 {
+  width: 135px;
+  height: 22px;
+  margin: 21px 0 0 21px;
+}
+
+.text_25 {
+  width: 100px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 136, 209, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.group_14 {
+  height: 20px;
+  width: 36px;
+  margin: 1px 0 0 -1px;
+}
+
+.text-wrapper_7 {
+  height: 20px;
+  background: url(../assets/img/SketchPng784631da64c587e3bb588abbfd9695d3641075f1c3b7674559bb6182edd4303b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 36px;
+}
+
+.text_26 {
+  width: 20px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(0, 136, 209, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 2px 0 0 8px;
+}
+
+.text_27 {
+  width: 1049px;
+  height: 44px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  line-height: 22px;
+  margin: 12px 0 0 20px;
+}
+
+.grid_2 {
+  width: 696px;
+  height: 570px;
+  flex-wrap: wrap;
+  margin: 24px 0 0 19px;
+}
+
+.box_6 {
+  width: 336px;
+  height: 278px;
+  background: url(../assets/img/SketchPng9bbe2b1aa0e878b2f298e43a09c58342fa153a645185ba930203a432fdd60449.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 0 23px 13px 0;
+}
+
+.image-text_15 {
+  width: 159px;
+  height: 22px;
+  margin: 14px 0 0 18px;
+}
+
+.image-wrapper_3 {
+  height: 20px;
+  background: url(../assets/img/SketchPngfba15ce53f43b8b9388b6f22aa4d92623e677b1945944224702d33532a84da5d.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-top: 1px;
+  width: 20px;
+}
+
+.thumbnail_10 {
+  width: 20px;
+  height: 20px;
+}
+
+.text-group_5 {
+  width: 127px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.image_6 {
+  width: 300px;
+  height: 212px;
+  margin: 12px 0 18px 18px;
+}
+
+.box_7 {
+  width: 336px;
+  height: 278px;
+  background: url(../assets/img/SketchPng9bbe2b1aa0e878b2f298e43a09c58342fa153a645185ba930203a432fdd60449.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 13px;
+}
+
+.image-text_16 {
+  width: 142px;
+  height: 22px;
+  margin: 14px 0 0 18px;
+}
+
+.thumbnail_11 {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.text-group_6 {
+  width: 110px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.image_7 {
+  width: 300px;
+  height: 212px;
+  margin: 12px 0 18px 18px;
+}
+
+.box_8 {
+  width: 336px;
+  height: 278px;
+  background: url(../assets/img/SketchPng9bbe2b1aa0e878b2f298e43a09c58342fa153a645185ba930203a432fdd60449.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 0 22px 13px 0;
+}
+
+.image-text_17 {
+  width: 128px;
+  height: 22px;
+  margin: 14px 0 0 18px;
+}
+
+.thumbnail_12 {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.text-group_7 {
+  width: 96px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.image_8 {
+  width: 300px;
+  height: 212px;
+  margin: 12px 0 18px 18px;
+}
+
+.box_9 {
+  width: 336px;
+  height: 278px;
+  background: url(../assets/img/SketchPng9bbe2b1aa0e878b2f298e43a09c58342fa153a645185ba930203a432fdd60449.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 13px;
+}
+
+.image-text_18 {
+  width: 110px;
+  height: 22px;
+  margin: 14px 0 0 18px;
+}
+
+.thumbnail_13 {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.text-group_8 {
+  width: 78px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.image_9 {
+  width: 300px;
+  height: 212px;
+  margin: 12px 0 18px 18px;
+}
+
+.box_19 {
+  width: 1049px;
+  height: 33px;
+  margin: 21px 0 0 20px;
+}
+
+.text-wrapper_8 {
+  height: 33px;
+  background: url(../assets/img/SketchPng8b1aa45fb7dce8ef69e62106daf5cedd17fa9a6a6b484d2d68d1c86aeb672ef1.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 100px;
+}
+
+.text_28 {
+  width: 56px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 7px 0 0 22px;
+}
+
+.text-wrapper_9 {
+  width: 90px;
+  height: 20px;
+  overflow-wrap: break-word;
+  font-size: 0;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 7px 0 0 27px;
+}
+
+.text_29 {
+  width: 90px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text_30 {
+  width: 90px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(2, 136, 209, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text-wrapper_10 {
+  width: 89px;
+  height: 20px;
+  overflow-wrap: break-word;
+  font-size: 0;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 7px 0 0 19px;
+}
+
+.text_31 {
+  width: 89px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text_32 {
+  width: 89px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(254, 46, 47, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+.text_33 {
+  width: 27px;
+  height: 17px;
+  overflow-wrap: break-word;
+  color: rgba(57, 204, 67, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 17px;
+  margin: 10px 0 0 697px;
+}
+
+.text-wrapper_11 {
+  width: 1053px;
+  height: 71px;
+  background: url(../assets/img/SketchPng5dbce10b6716c788b9c46e8fb35d489f2cd3025d242d845e60a55b04542386b2.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 12px 0 0 20px;
+}
+
+.text_34 {
+  width: 60px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 13px 0 0 14px;
+}
+
+.text_35 {
+  width: 966px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(73, 112, 135, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 2px 0 16px 14px;
+}
+
+.text-wrapper_12 {
+  height: 42px;
+  background: url(../assets/img/SketchPng0700788222217cd282ba478ef4ad7d71d8276224d8c68471582b4070d73e3b91.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 165px;
+  margin: 21px 0 0 19px;
+}
+
+.text_36 {
+  width: 64px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 22px;
+  margin: 12px 0 0 51px;
+}
+
+.thumbnail_14 {
+  width: 11px;
+  height: 9px;
+  margin: 25px 0 1px 591px;
+}
+
+.group_16 {
+  position: absolute;
+  left: 20px;
+  top: 190px;
+  width: 1053px;
+  height: 50px;
+  background: url(../assets/img/SketchPng497c2c7870f50072ce8928fa8ad148d0a1c81e8dea997390532755ffd2b46b92.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.thumbnail_15 {
+  width: 20px;
+  height: 20px;
+  margin: 15px 0 0 19px;
+}
+
+.text_37 {
+  width: 127px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: justify;
+  white-space: nowrap;
+  line-height: 22px;
+  margin: 14px 875px 0 12px;
+}
+
+.section_4 {
+  width: 305px;
+  height: 1405px;
+  margin-top: 103px;
+}
+
+.thumbnail_16 {
+  width: 16px;
+  height: 16px;
+}
+
+.box_10 {
+  width: 300px;
+  height: 107px;
+  background: url(../assets/img/SketchPng11143fba9150a0ca84cfcc13a40e46053de1fb446b1fe113503b05276a83be08.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  justify-content: flex-center;
+  margin: 145px 0 0 5px;
+}
+
+.text-group_13 {
+  width: 44px;
+  height: 58px;
+  margin: 24px 0 0 25px;
+}
+
+.text_38 {
+  width: 44px;
+  height: 28px;
+  overflow-wrap: break-word;
+  color: rgba(243, 133, 5, 1);
+  font-size: 24px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 28px;
+}
+
+.text_39 {
+  width: 30px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 10px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  line-height: 20px;
+  margin: 10px 0 0 8px;
+}
+
+.image_10 {
+  width: 1px;
+  height: 30px;
+  margin: 39px 0 0 26px;
+}
+
+.group_37 {
+  width: 68px;
+  height: 56px;
+  margin: 24px 0 0 25px;
+}
+
+.text-wrapper_80 {
+  width: 49px;
+  height: 28px;
+  margin-left: 11px;
+}
+
+.text_40 {
+  width: 8px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 8px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  line-height: 20px;
+  margin-top: 8px;
+}
+
+.text_41 {
+  width: 29px;
+  height: 28px;
+  overflow-wrap: break-word;
+  color: rgba(255, 54, 54, 1);
+  font-size: 24px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 28px;
+  margin-left: 1px;
+}
+
+.text_42 {
+  width: 8px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 8px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  line-height: 20px;
+  margin: 8px 0 0 3px;
+}
+
+.text_43 {
+  width: 68px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 10px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin-top: 10px;
+}
+
+.image_11 {
+  width: 1px;
+  height: 30px;
+  margin: 39px 0 0 22px;
+}
+
+.text-group_14 {
+  width: 40px;
+  height: 56px;
+  margin: 24px 25px 0 23px;
+}
+
+.text_44 {
+  width: 29px;
+  height: 29px;
+  overflow-wrap: break-word;
+  color: rgba(63, 118, 237, 1);
+  font-size: 24px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 28px;
+  margin-left: 4px;
+}
+
+.text_45 {
+  width: 40px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 10px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin-top: 9px;
+}
+
+.box_11 {
+  width: 301px;
+  height: 1113px;
+  background: url(../assets/img/SketchPng61aafab990d864c83b1c4c36d4e217630ad83afa75224096ff38f72a7f228893.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 24px 0 0 4px;
+}
+
+.text_46 {
+  width: 48px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin: 17px 0 0 20px;
+}
+
+.text_47 {
+  width: 81px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin: 33px 0 0 18px;
+}
+
+.group_38 {
+  width: 261px;
+  height: 36px;
+  margin: 16px 0 0 20px;
+}
+
+.text-wrapper_14 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_48 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_19 {
+  position: relative;
+  width: 44px;
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+}
+
+.text_49 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_15 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  width: 44px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.text_50 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_16 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_51 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_17 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_52 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_18 {
+  height: 36px;
+  background: url(../assets/img/SketchPngcff70026f2affa70be7e808bda61c9ec51984cf5c507218140bc74df8e4e999a.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_53 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_39 {
+  width: 261px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_19 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_54 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_20 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_55 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_21 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_56 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_22 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_57 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_23 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_58 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_40 {
+  width: 153px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_24 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_59 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_25 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_60 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_26 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_61 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text_62 {
+  width: 81px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin: 16px 0 0 18px;
+}
+
+.group_41 {
+  width: 261px;
+  height: 36px;
+  margin: 17px 0 0 20px;
+}
+
+.text-wrapper_27 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_63 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_28 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_64 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_29 {
+  height: 36px;
+  background: url(../assets/img/SketchPngc41f4314f1cc6cda40beff8362269364653d425c883bd1304c20b9b68b9988c1.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_65 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_30 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_66 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_31 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_67 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_42 {
+  width: 261px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_32 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_68 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_33 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_69 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_34 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_70 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_35 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_71 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_36 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_72 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_43 {
+  width: 98px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_37 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_73 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_38 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  width: 44px;
+}
+
+.text_74 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text_75 {
+  width: 81px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin: 18px 0 0 18px;
+}
+
+.group_44 {
+  width: 261px;
+  height: 36px;
+  margin: 21px 0 0 20px;
+}
+
+.text-wrapper_39 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_76 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_40 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_77 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_41 {
+  height: 36px;
+  background: url(../assets/img/SketchPng8e76edef45db26b28371f86735f64b75abd8b138a90c0476e284c1c973f7d653.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_78 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_42 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_79 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_43 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_80 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_45 {
+  width: 261px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_44 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_81 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_45 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_82 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_46 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_83 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_47 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_84 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_48 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_85 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_46 {
+  width: 197px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_49 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_86 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_50 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_87 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_51 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_88 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text_89 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 21px;
+}
+
+.text_90 {
+  width: 81px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin: 17px 0 0 18px;
+}
+
+.group_47 {
+  width: 261px;
+  height: 36px;
+  margin: 23px 0 0 20px;
+}
+
+.text-wrapper_52 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_91 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_53 {
+  height: 36px;
+  background: url(../assets/img/SketchPng3fac9a4a107f3a1a81946ee5db3ef78bfd31b3ac703bda5395e672c36ee28d18.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_92 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_54 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_93 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_55 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_94 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_56 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_95 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_48 {
+  width: 261px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_57 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_96 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_58 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_97 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_59 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_98 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_60 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_99 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_61 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_100 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_49 {
+  width: 261px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_62 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_101 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_63 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_102 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_64 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_103 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_65 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_104 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_66 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_105 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text_106 {
+  width: 81px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin: 15px 0 0 18px;
+}
+
+.group_50 {
+  width: 261px;
+  height: 36px;
+  margin: 25px 0 0 20px;
+}
+
+.text-wrapper_67 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_107 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_68 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_108 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_69 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_109 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_70 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_110 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_71 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_111 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_51 {
+  width: 261px;
+  height: 36px;
+  margin: 10px 0 0 20px;
+}
+
+.text-wrapper_72 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+}
+
+.text_112 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_73 {
+  height: 36px;
+  background: url(../assets/img/SketchPng828d9e9673d29bcd2dc1451c44d32b9b234ff01aaf74d271cb7bae23d9f48457.png)
+    0px 0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_113 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_74 {
+  height: 36px;
+  background: url(../assets/img/SketchPng563dd3c5f8d3bb7d07ef8699100dbac3521d8d4766905df56de92df375dbff24.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 11px;
+  width: 44px;
+}
+
+.text_114 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 10px;
+}
+
+.text-wrapper_75 {
+  height: 36px;
+  background: url(../assets/img/SketchPng0541641d1ddd9c407477f039f5f34a4c19e232437d3f5f023f9e096dcf00d3b2.png) -1px
+    0px no-repeat;
+  background-size: 45px 36px;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_115 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_76 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10px;
+  width: 44px;
+}
+
+.text_116 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.text-wrapper_77 {
+  height: 36px;
+  background: url(../assets/img/SketchPng53988c4e5008988121dd8557fc33307d7e6738cd6f16281f5f3ef8e0bd66290b.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 44px;
+  margin: 10px 0 0 20px;
+}
+
+.text_117 {
+  width: 23px;
+  height: 23px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 23px;
+  margin: 6px 0 0 11px;
+}
+
+.group_52 {
+  width: 108px;
+  height: 20px;
+  margin: 33px 0 0 21px;
+}
+
+.thumbnail_17 {
+  width: 13px;
+  height: 13px;
+  margin-top: 4px;
+}
+
+.text_118 {
+  width: 28px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin-left: 7px;
+}
+
+.thumbnail_18 {
+  width: 13px;
+  height: 13px;
+  margin: 4px 0 0 12px;
+}
+
+.text_119 {
+  width: 28px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 14px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin-left: 7px;
+}
+
+.group_34 {
+  width: 262px;
+  height: 50px;
+  background: url(../assets/img/SketchPnga820d2a1516d668e10fe110590e2d6c700ee708e8c997105b77b4505ae85fd67.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 13px 0 33px 18px;
+}
+
+.image-text_19 {
+  width: 90px;
+  height: 22px;
+  margin: 14px 0 0 18px;
+}
+
+.thumbnail_19 {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.text-group_11 {
+  width: 64px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.box_12 {
+  position: absolute;
+  left: 1240px;
+  top: 68px;
+  width: 300px;
+  height: 244px;
+  background: url(../assets/img/SketchPng9271cc65e47774abd5f07964cbd381d9caaa2693d2d1deff1748e46fe4e83869.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.text-wrapper_78 {
+  height: 20px;
+  background: url(../assets/img/SketchPng7569757ecdc8cc55fcf60907bb72c212eb547bbb622aa9c3f3b61d2dddb2a75a.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 56px;
+  margin: 21px 0 0 224px;
+}
+
+.text_120 {
+  width: 38px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 10px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+  margin: 3px 0 0 10px;
+}
+
+.text_121 {
+  width: 24px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 42px 0 0 136px;
+}
+
+.text_122 {
+  width: 49px;
+  height: 47px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 40px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 47px;
+  margin: -6px 0 0 126px;
+}
+
+.text_123 {
+  width: 172px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 28px 0 0 20px;
+}
+
+.text_124 {
+  width: 105px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 3px 0 0 20px;
+}
+
+.text_125 {
+  width: 81px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 12px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 4px 0 11px 20px;
+}
+
+.image_12 {
+  position: absolute;
+  left: 68px;
+  top: 43px;
+  width: 168px;
+  height: 84px;
+}
+
+.image-text_20 {
+  width: 494px;
+  height: 93px;
+  margin: 68px 0 0 388px;
+}
+
+.image-wrapper_5 {
+  width: 207px;
+  height: 53px;
+  margin-left: 6px;
+}
+
+.image_13 {
+  width: 62px;
+  height: 53px;
+}
+
+.image_14 {
+  width: 113px;
+  height: 51px;
+  margin-top: 2px;
+}
+
+.text-group_12 {
+  width: 494px;
+  height: 26px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 26px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 30px;
+  margin-top: 14px;
+}
+
+.image_15 {
+  width: 1px;
+  height: 140px;
+  margin: 43px 0 0 78px;
+}
+
+.image_16 {
+  width: 108px;
+  height: 107px;
+  margin: 61px 0 0 78px;
+}
+
+.text-wrapper_81 {
+  width: 537px;
+  height: 104px;
+  margin: 61px 205px 0 31px;
+}
+
+.text_126 {
+  width: 399px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+}
+
+.text_127 {
+  width: 445px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-top: 25px;
+}
+
+.text_128 {
+  width: 537px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: NaN;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-top: 25px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 391d604..36574f7 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -111,6 +111,11 @@
             <div v-for="course in filteredCourses" :key="course.id" class="box_2 flex-row justify-between">
               <div class="block_4 flex-col">
                 <div class="box_3 flex-row justify-between">
+                  <div class="status-image-container">
+                    <img class="status-image" referrerpolicy="no-referrer"
+                      :src="course.status === 'learning' ? '/images/icon/learning.png' : '/images/icon/finish.png'"
+                      alt="{{ getStatusText(course.status) }}" />
+                  </div>
                   <img class="thumbnail_4" referrerpolicy="no-referrer" :src="bannerImage" :alt="bannerAlt" />
                   <span :class="['status-text', course.status]">{{ getStatusText(course.status) }}</span>
                 </div>
@@ -359,7 +364,7 @@
 
               <!-- 分数显示 -->
               <div class="exam-score-badge" v-if="exam.score !== null">
-                <span class="score-text">{{ exam.score }}分</span>
+                <span class="score-text">{{ exam.score }}<span>分</span></span>
               </div>
 
               <!-- 考试信息 -->
@@ -385,9 +390,6 @@
 
               <!-- 底部操作区域 -->
               <div class="exam-footer">
-                <div class="exam-status-left">
-                  <span class="exam-status-text">{{ getExamStatusText(exam.status) }}</span>
-                </div>
                 <div class="exam-action-right">
                   <button v-if="exam.status === 'upcoming'" class="action-btn upcoming-btn" @click="startExam(exam.id)">
                     未开始
@@ -401,6 +403,9 @@
                     查看详情
                   </button>
                 </div>
+                <div class="exam-status-left">
+                  <span class="exam-status-text">{{ getExamStatusText(exam.status) }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -422,69 +427,64 @@
           <div class="course-divider"></div>
 
           <!-- 练习网格 -->
-          <div class="practice-grid">
-            <div v-for="practice in filteredPractices" :key="practice.id" class="practice-card">
-              <!-- 分数标签 -->
+          <div class="exam-grid">
+            <div v-for="practice in filteredPractices" :key="practice.id" class="exam-card">
+              <!-- 考试标题 -->
+              <div class="exam-title">{{ practice.title }}</div>
+
+              <!-- 分数显示 -->
               <div v-if="practice.status === 'finished'" class="practice-score-badge">
-                <span class="score-text">{{ practice.score }}分</span>
+                <span class="score-text">{{ practice.score }} <span>分</span></span>
               </div>
 
-              <!-- 练习标题 -->
-              <h3 class="practice-title">{{ practice.title }}</h3>
-
-              <!-- 练习详情 -->
-              <div class="practice-details">
-                <div class="practice-meta-item">
+              <!-- 考试信息 -->
+              <div class="exam-details">
+                <div class="exam-meta-item">
                   <span class="meta-label">练习日期：</span>
                   <span class="meta-value">{{ practice.practiceDate }}</span>
                 </div>
-                <div class="practice-meta-item">
+                <div class="exam-meta-item">
                   <span class="meta-label">练习时间：</span>
                   <span class="meta-value">{{ practice.duration }}分钟</span>
                 </div>
-                <div class="practice-meta-item">
+                <div class="exam-meta-item">
                   <span class="meta-label">题库数量：</span>
                   <span class="meta-value">{{ practice.questionCount }}</span>
                 </div>
               </div>
 
-
-
-              <!-- 练习统计/简介 -->
+              <!-- 动态显示内容 -->
               <div v-if="practice.status === 'finished'" class="practice-stats">
-                <div class="stats-item correct">
-                  <span class="stats-label">答对</span>
-                  <span class="stats-number">{{ practice.correctCount }}题</span>
+                <div class="stat-row">
+                  <span class="stat-label">答对</span>
+                  <span class="stat-value correct">{{ practice.correctCount || 0 }}<span>题</span></span>
                 </div>
-                <div class="stats-item wrong">
-                  <span class="stats-label">答错</span>
-                  <span class="stats-number">{{ practice.wrongCount }}题</span>
+                <!-- 分割线 -->
+                <div class="divider"></div>
+                <div class="stat-row">
+                  <span class="stat-label">答错</span>
+                  <span class="stat-value wrong">{{ practice.wrongCount || 0 }}<span>题</span></span>
                 </div>
               </div>
-
-              <!-- 练习简介（练习中状态） -->
-              <div v-else class="practice-intro">
-                <div class="intro-title">练习简介</div>
-                <div class="intro-content">
-                  练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。
-                </div>
+              <div v-else class="exam-description">
+                {{ practice.description || '该练习包含' + practice.questionCount + '道题目，涵盖了相关知识点。' }}
               </div>
 
-              <!-- 练习底部 -->
-              <div class="practice-footer">
-                <div class="practice-status-left">
-                  <span class="practice-status-text">{{ practice.status === 'ongoing' ? '练习中' : '已结束' }}</span>
-                </div>
-                <div class="practice-action-right">
-                  <button v-if="practice.status === 'ongoing'" class="action-btn ongoing-btn"
+              <!-- 底部操作区域 -->
+              <div class="exam-footer">
+                <div class="exam-action-right">
+                  <button v-show="practice.status === 'ongoing'" class="action-btn ongoing-btn"
                     @click="continuePractice(practice.id)">
                     继续练习
                   </button>
-                  <button v-else-if="practice.status === 'finished'" class="action-btn finished-btn"
+                  <button v-show="practice.status === 'finished'" class="action-btn finished-btn"
                     @click="viewPracticeDetail(practice.id)">
                     查看详情
                   </button>
                 </div>
+                <div class="exam-status-left">
+                  <span class="exam-status-text">{{ practice.status === 'ongoing' ? '练习中' : '已结束' }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -909,184 +909,8 @@
   </n-modal>
 
   <!-- 考试详情页面 -->
-  <div v-if="showExamDetail && currentExamDetail" class="exam-detail-overlay">
-    <div class="exam-detail-container">
-      <!-- 头部导航 -->
-      <div class="exam-detail-header">
-        <div class="breadcrumb">
-          <span @click="closeExamDetail" class="breadcrumb-link">用户中心</span>
-          <span class="breadcrumb-separator">></span>
-          <span @click="closeExamDetail" class="breadcrumb-link">{{ currentDetailType === 'exam' ? '我的考试' : '我的练习'
-          }}</span>
-          <span class="breadcrumb-separator">></span>
-          <span class="breadcrumb-current">{{ currentExamDetail.title }}</span>
-        </div>
-      </div>
-
-      <!-- 考试内容区域 -->
-      <div class="exam-detail-content">
-        <!-- 左侧题目区域 -->
-        <div class="exam-questions-section">
-          <div class="exam-title-section">
-            <h1 class="exam-main-title">{{ currentExamDetail.title }}</h1>
-          </div>
-
-          <!-- 题目列表 -->
-          <div class="questions-container">
-            <div v-for="(question, index) in currentExamDetail.questions" :key="question.id" class="question-item">
-              <!-- 题目标题 -->
-              <div class="question-header">
-                <span class="question-number">{{ String(index + 1).padStart(2, '0') }}</span>
-                <span class="question-type">{{ question.title }}</span>
-                <span class="question-score">+59</span>
-              </div>
-
-              <!-- 题目内容 -->
-              <div class="question-content">
-                {{ question.content }}
-              </div>
-
-              <!-- 选项列表 -->
-              <div class="question-options">
-                <div v-for="option in question.options" :key="option.id" class="option-item" :class="{
-                  'option-selected': question.userAnswers.includes(option.id),
-                  'option-correct': question.correctAnswers.includes(option.id),
-                  'option-wrong': question.userAnswers.includes(option.id) && !question.correctAnswers.includes(option.id)
-                }">
-                  <div class="option-checkbox">
-                    <input type="checkbox" :checked="question.userAnswers.includes(option.id)" disabled />
-                  </div>
-                  <div class="option-content">
-                    <span class="option-text">{{ option.text }}</span>
-                    <div v-if="option.image" class="option-image">
-                      <img :src="option.image" :alt="option.text" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 题目底部信息 -->
-              <div class="question-footer">
-                <div class="answer-status-box" :class="question.isCorrect ? 'status-correct' : 'status-wrong'">
-                  {{ question.isCorrect ? '回答正确' : '回答错误' }}
-                </div>
-                <div class="question-stats">
-                  <span class="correct-answer">正确答案：{{ question.correctAnswers.join(', ') }}</span>
-                  <span class="user-answer">你的答案：{{ question.userAnswers.join(', ') || '未作答' }}</span>
-                </div>
-              </div>
-
-              <!-- 题目解析 -->
-              <div class="question-analysis">
-                <div class="analysis-title">答案解析：</div>
-                <div class="analysis-content">
-                  这道题考查的是危险化学品安全管理的相关知识点，根据相关法规要求，危险化学品生产企业应当提供完整的安全技术说明书和应急处理措施。
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 底部提交按钮 -->
-          <div class="exam-submit-section">
-            <button class="submit-btn">
-              重新练习
-            </button>
-          </div>
-        </div>
-
-        <!-- 右侧信息区域 -->
-        <div class="exam-info-section">
-          <!-- 分数圆环 -->
-          <div class="score-circle-container">
-            <div class="score-circle">
-              <div class="score-inner">
-                <div class="score-number">{{ currentExamDetail.score }}</div>
-              </div>
-            </div>
-            <div class="score-label">得分</div>
-          </div>
-
-          <!-- 考试统计 -->
-          <div class="exam-stats">
-            <div class="stat-item">
-              <span class="stat-label">{{ currentDetailType === 'exam' ? '交卷时间：' : '练习时间：' }}</span>
-              <span class="stat-value">{{ currentDetailType === 'exam' ? (currentExamDetail as any).examDate :
-                (currentExamDetail as any).practiceDate }}</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">{{ currentDetailType === 'exam' ? '考试时长：' : '练习时长：' }}</span>
-              <span class="stat-value">{{ currentExamDetail.duration }}分钟</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">{{ currentDetailType === 'exam' ? '考试题量：' : '练习题量：' }}</span>
-              <span class="stat-value">{{ currentExamDetail.totalQuestions }}题</span>
-            </div>
-          </div>
-
-          <!-- 答题统计 -->
-          <div class="answer-stats">
-            <div class="stats-row">
-              <div class="stat-box correct">
-                <div class="stat-number">{{ currentExamDetail.correctCount }}</div>
-                <div class="stat-text">答对题数</div>
-              </div>
-              <div class="stat-box wrong">
-                <div class="stat-number">{{ currentExamDetail.wrongCount }}</div>
-                <div class="stat-text">答错题数</div>
-              </div>
-              <div class="stat-box total">
-                <div class="stat-number">{{ currentExamDetail.totalQuestions - currentExamDetail.correctCount -
-                  currentExamDetail.wrongCount }}</div>
-                <div class="stat-text">答对题数</div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 答题卡 -->
-          <div class="answer-card">
-            <div class="card-title">答题卡</div>
-            <div class="card-sections">
-              <!-- 单选题部分 -->
-              <div class="card-section">
-                <div class="section-title">单选 (10)</div>
-                <div class="answer-grid">
-                  <div v-for="i in 15" :key="i" class="answer-item" :class="getAnswerItemClass(i)">
-                    {{ String(i).padStart(2, '0') }}
-                  </div>
-                </div>
-              </div>
-
-              <!-- 多选题部分 -->
-              <div class="card-section">
-                <div class="section-title">多选 (10)</div>
-                <div class="answer-grid">
-                  <div v-for="i in 15" :key="i + 15" class="answer-item" :class="getAnswerItemClass(i + 15)">
-                    {{ String(i).padStart(2, '0') }}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 答题卡图例 -->
-            <div class="card-legend">
-              <div class="legend-item">
-                <span class="legend-color correct"></span>
-                <span class="legend-text">答对</span>
-              </div>
-              <div class="legend-item">
-                <span class="legend-color wrong"></span>
-                <span class="legend-text">答错</span>
-              </div>
-              <div class="legend-checkbox">
-                <input type="checkbox" id="showOnlyWrong" />
-                <label for="showOnlyWrong">只看错题</label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <ExamDetail v-if="showExamDetail && currentExamDetail" :currentExamDetail="currentExamDetail"
+    :currentDetailType="currentDetailType" @close="closeExamDetail" />
 
 
 </template>
@@ -1097,6 +921,7 @@ import { useMessage, NModal, NUpload, NInput, NForm, NFormItem, NButton } from '
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
 import SafeAvatar from '@/components/common/SafeAvatar.vue'
+import ExamDetail from '../components/ExamDetail.vue';
 
 const { t, locale } = useI18n()
 
@@ -2438,7 +2263,9 @@ const getFileIcon = () => {
   }
 }
 
-// 已移除未使用的新建文件夹函数，避免构建时报未使用错误
+const createNewFolder = () => {
+  message.info('新建文件夹功能开发中...')
+}
 
 const renameFile = (fileId: number) => {
   message.info(`重命名文件 ${fileId}`)
@@ -2664,10 +2491,10 @@ onMounted(() => {
 
 /* 主要内容区域 */
 .profile-content {
-  width: 80vw;
+  /* width: 80vw; */
   /* 调整为80vw */
-  min-height: calc(100vh - 6.4vh);
-  margin: 2.08vh auto 0 auto;
+  min-height: 1415px;
+  margin: 3vh auto 0 auto;
   /* 距离顶部40px转换为vh */
   position: relative;
   background: #f6f6f6;
@@ -2677,15 +2504,14 @@ onMounted(() => {
 .block_14 {
   position: relative;
   width: 13.4vw;
-  /* 20vw缩小33% = 20vw * 0.67 = 13.4vw */
-  min-height: calc(100vh - 6.4vh);
+  height: auto;
   background: #ffffff;
   /* 改为白色背景 */
-  border-right: 0.05vw solid rgba(232, 232, 232, 1);
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-bottom: 30px;
   /* 内容居中 */
 }
 
@@ -2740,12 +2566,12 @@ onMounted(() => {
 
 /* 分割线 */
 .menu-divider {
-  width: 10vw;
+  width: 11vw;
   /* 与菜单项宽度一致 */
   height: 0.05vh;
   /* 1px转换为vh */
   background: #E6E6E6;
-  margin: 1.5vh 0;
+  margin: 0;
   /* 上下间距 */
 }
 
@@ -2758,20 +2584,20 @@ onMounted(() => {
 .image-text_24,
 .image-text_25,
 .image-text_26 {
-  width: 10vw;
+  width: 11vw;
   /* 进一步缩小菜单项宽度，适应新的导航栏宽度 */
   height: auto;
   /* 自适应高度 */
   min-height: 3vh;
   /* 设置最小高度，让盒子更大 */
-  margin: 1.5vh 0;
+  margin: 1.5vh;
   /* 减小间距：从2.34vh减少到1.5vh */
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
   /* 菜单项内容居中 */
   cursor: pointer;
-  padding: 1.2vh 0.5vw;
+  padding: 1.5vh 0 1.5vh 1.8vw;
   /* 增加上下内边距，让盒子更高 */
   border-radius: 0.31vw;
   /* 6px转换为vw */
@@ -2830,7 +2656,7 @@ onMounted(() => {
 .text-group_24,
 .text-group_25,
 .text-group_26 {
-  font-size: 1.04vw;
+  font-size: 16px;
   /* 20px转换为vw */
   color: rgba(102, 102, 102, 1);
   /* 默认灰色 */
@@ -2869,15 +2695,15 @@ onMounted(() => {
 
 /* 右侧课程列表区域 */
 .group_5 {
-  width: 60vw;
+  width: 65vw;
   /* 保持60vw宽度 */
   min-height: calc(100vh - 6.4vh);
-  padding: 2.08vh 2.08vw;
+  padding: 2.08vh 1.9vw;
   /* 40px转换为vh和vw */
   background: rgba(255, 255, 255, 1);
   overflow-y: auto;
   margin-left: 1.56vw;
-  /* 30px转换为vw：30/1920*100 = 1.56vw */
+  margin-bottom: 30px;
 }
 
 /* 课程筛选标签 */
@@ -2886,7 +2712,7 @@ onMounted(() => {
   height: 2.08vh;
   /* 40px转换为vh */
   align-items: center;
-  margin-bottom: 1.67vh;
+  margin: 10px 0 20px 0;
   /* 32px转换为vh */
   gap: 2.81vw;
   /* 54px转换为vw：54/1920*100 = 2.81vw */
@@ -2968,36 +2794,45 @@ onMounted(() => {
 
 /* 课程缩略图区域 */
 .block_4 {
-  width: 10.42vw;
-  /* 200px转换为vw */
   margin-right: 1.04vw;
-  /* 20px转换为vw */
 }
 
 .box_3 {
-  width: 10.42vw;
+  width: 202px;
   /* 200px转换为vw */
-  height: 15.63vh;
+  height: 156px;
   /* 大幅增加高度到300px转换为vh，让图片展示到外部盒子高度 */
   position: relative;
-  border-radius: 0.42vw;
+  border-radius: 5px;
   /* 8px转换为vw */
   overflow: hidden;
 }
 
 .thumbnail_4 {
   width: 100%;
-  height: 100%;
+  height: 156px;
   object-fit: cover;
 }
 
 /* 状态标签 */
+.status-image-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+
+.status-image {
+  width: 66px;
+  height: 22px;
+}
+
 .status-text {
   position: absolute;
   top: 26vh;
   /* 12px转换为vh */
-  left: 0.63vw;
-  /* 12px转换为vw */
+  right: 0.63vw;
+  /* 调整到右侧 */
   padding: 0.21vh 0.63vw;
   /* 4px 12px转换 */
   border-radius: 0.21vw;
@@ -3033,11 +2868,11 @@ onMounted(() => {
 }
 
 .text_16 {
-  font-size: 0.94vw;
+  font-size: 18px;
   /* 18px转换为vw */
-  color: rgba(51, 51, 51, 1);
+  color: #000000;
   font-family: 'Microsoft YaHei', Arial, sans-serif;
-  font-weight: 500;
+  font-weight: 600;
   flex: 1;
 }
 
@@ -3050,16 +2885,16 @@ onMounted(() => {
 .text_17 {
   font-size: 0.73vw;
   /* 14px转换为vw */
-  color: rgba(250, 173, 20, 1);
+  color: #999999;
   font-family: 'Microsoft YaHei', Arial, sans-serif;
   font-weight: normal;
 }
 
 /* 讲师信息 */
 .text_18 {
-  font-size: 0.73vw;
+  font-size: 14px;
   /* 14px转换为vw */
-  color: rgba(102, 102, 102, 1);
+  color: #999;
   font-family: 'Microsoft YaHei', Arial, sans-serif;
   font-weight: normal;
   margin-bottom: 0.42vh;
@@ -3068,13 +2903,14 @@ onMounted(() => {
 
 /* 课程描述 */
 .text_19 {
-  font-size: 0.73vw;
+  font-size: 14px;
   /* 14px转换为vw */
-  color: rgba(102, 102, 102, 1);
+  color: #999;
   font-family: 'Microsoft YaHei', Arial, sans-serif;
   font-weight: normal;
   line-height: 1.5;
-  margin-bottom: 0.83vh;
+  margin-top: 5px;
+  margin-bottom: 22px;
   /* 16px转换为vh */
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -3085,7 +2921,7 @@ onMounted(() => {
 /* 课程统计信息 */
 .group_7 {
   align-items: center;
-  gap: 1.04vw;
+  gap: 5px;
   /* 20px转换为vw */
 }
 
@@ -3100,19 +2936,20 @@ onMounted(() => {
 .text_20,
 .text_21,
 .text_22 {
-  font-size: 0.73vw;
+  font-size: 14px;
   /* 14px转换为vw */
-  color: rgba(102, 102, 102, 1);
+  color: #999;
   font-family: 'Microsoft YaHei', Arial, sans-serif;
   font-weight: normal;
+  margin-right: 10px;
 }
 
 /* 操作按钮 */
 .text-wrapper_2 {
-  background: rgba(2, 134, 206, 1);
-  border-radius: 0.31vw;
+  background: #0288D1;
+  border-radius: 5px;
   /* 6px转换为vw */
-  padding: 0.42vh 0.83vw;
+  padding: 6px 22px;
   /* 8px 16px转换 */
   cursor: pointer;
   transition: background-color 0.3s ease;
@@ -3124,9 +2961,9 @@ onMounted(() => {
 }
 
 .text_23 {
-  font-size: 0.73vw;
+  font-size: 14px;
   /* 14px转换为vw */
-  color: rgba(255, 255, 255, 1);
+  color: white;
   font-family: 'Microsoft YaHei', Arial, sans-serif;
   font-weight: normal;
   text-align: center;
@@ -3151,16 +2988,15 @@ onMounted(() => {
 }
 
 .pagination-item {
-  min-width: 2.08vw;
-  /* 40px转换为vw */
-  height: 2.08vh;
-  /* 40px转换为vh */
+  min-width: 38px;
+  height: 38px;
+  background: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.73vw;
   /* 14px转换为vw */
-  color: rgba(102, 102, 102, 1);
+  color: #666666;
   font-family: 'Microsoft YaHei', Arial, sans-serif;
   cursor: pointer;
   border-radius: 0.21vw;
@@ -3168,7 +3004,6 @@ onMounted(() => {
   transition: all 0.3s ease;
   padding: 0.52vh 0.83vw;
   /* 10px 16px转换 */
-  background: rgba(255, 255, 255, 1);
   border: 0.05vw solid rgba(232, 232, 232, 1);
 }
 
@@ -3178,16 +3013,15 @@ onMounted(() => {
 }
 
 .pagination-item.active {
-  background: rgba(2, 134, 206, 1);
+  background: #0088D1;
   color: rgba(255, 255, 255, 1);
-  border-color: rgba(2, 134, 206, 1);
+  border-color: #0088D1;
 }
 
 .pagination-item.disabled {
   color: rgba(204, 204, 204, 1);
   cursor: not-allowed;
   border-color: rgba(232, 232, 232, 1);
-  background: rgba(248, 248, 248, 1);
 }
 
 .pagination-item.disabled:hover {
@@ -3198,7 +3032,7 @@ onMounted(() => {
 
 .nav-button {
   min-width: 3.65vw;
-  /* 70px转换为vw，导航按钮稍宽一些 */
+  border: none;
 }
 
 .page-number {
@@ -3751,8 +3585,7 @@ onMounted(() => {
 
 .exam-card {
   background: #ffffff;
-  border: 1px solid #e8e8e8;
-  border-radius: 8px;
+  border: 1.5px solid #D8D8D8;
   padding: 20px;
   position: relative;
   min-height: 280px;
@@ -3768,30 +3601,36 @@ onMounted(() => {
 
 .exam-title {
   font-size: 16px;
-  font-weight: 600;
   color: #333;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
   line-height: 1.4;
+  border-bottom: 1.5px solid #E6E6E6;
+  padding-bottom: 10px;
 }
 
 .exam-score-badge {
   position: absolute;
-  top: 15px;
-  right: 15px;
-  background: #fff2e8;
-  border: 1px solid #ffb366;
+  top: 11px;
+  right: 18px;
+  background: white;
+  border: 1px solid #FF6F0F;
   border-radius: 4px;
-  padding: 4px 8px;
+  padding: 0 11px;
 }
 
 .score-text {
-  font-size: 14px;
+  font-size: 20px;
   font-weight: bold;
-  color: #ff8c00;
+  color: #FF6F0F;
+}
+
+.score-text span {
+  margin-left: 2px;
+  font-size: 10px;
 }
 
 .exam-details {
-  margin-bottom: 16px;
+  margin-bottom: 5px;
 }
 
 .exam-meta-item {
@@ -3801,25 +3640,25 @@ onMounted(() => {
 }
 
 .meta-label {
-  color: #666;
+  color: #999;
   min-width: 70px;
 }
 
 .meta-value {
-  color: #333;
+  color: #999;
   font-weight: 500;
 }
 
 .exam-description {
-  font-size: 13px;
-  color: #666;
-  line-height: 1.5;
+  padding: 8px 10px;
+  font-size: 12px;
+  color: #497087;
   margin-bottom: auto;
   flex: 1;
   overflow: hidden;
-  display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  background-color: #F5F8FB;
 }
 
 .exam-footer {
@@ -3828,7 +3667,6 @@ onMounted(() => {
   align-items: center;
   margin-top: auto;
   padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
   flex-shrink: 0;
 }
 
@@ -3838,17 +3676,17 @@ onMounted(() => {
 }
 
 .exam-status-text {
-  font-size: 14px;
-  color: #666;
+  font-size: 12px;
+  color: #999;
 }
 
 .exam-action-right {
   display: flex;
+  gap: 10px;
 }
 
 .action-btn {
   padding: 6px 16px;
-  border-radius: 4px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -3858,9 +3696,9 @@ onMounted(() => {
 }
 
 .upcoming-btn {
-  background: #f5f5f5;
-  color: #999;
-  border: 1px solid #e8e8e8;
+  background: #F5F8FB;
+  color: #999999;
+  border: none;
 }
 
 .upcoming-btn:hover {
@@ -3868,7 +3706,7 @@ onMounted(() => {
 }
 
 .ongoing-btn {
-  background: #1890ff;
+  background: #0288D1;
   color: white;
 }
 
@@ -3877,12 +3715,12 @@ onMounted(() => {
 }
 
 .finished-btn {
-  background: #52c41a;
+  background: #0288D1;
   color: white;
 }
 
 .finished-btn:hover {
-  background: #73d13d;
+  background: #01579B;
 }
 
 .files-container {
@@ -3907,8 +3745,8 @@ onMounted(() => {
 }
 
 .files-icon {
- width: 15px;
- height: 15px;
+  width: 15px;
+  height: 15px;
 }
 
 .course-name {
@@ -4095,9 +3933,9 @@ onMounted(() => {
   .text_12,
   .text_13,
   .text_14 {
-    font-size: 2.5vw;
+    font-size: 2.16px;
     /* 手机端调整字体大小 */
-    padding: 0.8vh 0;
+    padding: 10px 0;
     /* 保持无左右内边距 */
   }
 
@@ -4365,7 +4203,7 @@ onMounted(() => {
 
   .text_16 {
     font-size: 0.83vw;
-    /* 16px转换为vw */
+
   }
 
   .text_19 {
@@ -4537,24 +4375,28 @@ onMounted(() => {
 /* 考试详情页面样式 */
 .exam-detail-overlay {
   position: fixed;
-  top: 0;
+  top: 60px;
+  /* 留出导航栏的空间 */
   left: 0;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 60px);
+  /* 减去导航栏的高度 */
   background: #f5f5f5;
-  z-index: 1000;
+  z-index: 999;
+  /* 降低z-index，确保导航栏可见 */
   overflow-y: auto;
 }
 
 .exam-detail-container {
-  max-width: 1200px;
   margin: 0 auto;
   background: #f5f5f5;
   min-height: 100vh;
 }
 
 .exam-detail-header {
-  padding: 16px 24px;
+  margin: auto;
+  width: 1420px;
+  padding: 24px 0;
   background: #f5f5f5;
 }
 
@@ -4609,9 +4451,11 @@ onMounted(() => {
 }
 
 .exam-detail-content {
+  margin: auto;
+  max-width: 1420px;
   display: flex;
   gap: 24px;
-  padding: 24px;
+  padding: 0;
   background: #f5f5f5;
 }
 
@@ -4944,12 +4788,28 @@ onMounted(() => {
 }
 
 .stat-label {
-  color: #666;
+  font-size: 10px;
+  color: #497087;
 }
 
 .stat-value {
+  margin-left: 20px;
   color: #333;
   font-weight: 500;
+  font-size: 18px;
+}
+
+.stat-value span {
+  margin-left: 2px;
+  font-size: 10px;
+}
+
+.stat-value.correct {
+  color: #3F76ED;
+}
+
+.stat-value.wrong {
+  color: #FE2E2F;
 }
 
 .answer-stats {
@@ -5179,7 +5039,7 @@ onMounted(() => {
   width: 100%;
 }
 
-.practice-grid {
+.exam-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
@@ -5213,16 +5073,16 @@ onMounted(() => {
 
 .practice-score-badge {
   position: absolute;
-  top: 15px;
-  right: 15px;
-  background: #fff2e8;
-  border: 1px solid #ffb366;
+  top: 11px;
+  right: 18px;
+  background: white;
+  border: 1px solid #FF6F0F;
   border-radius: 4px;
-  padding: 4px 8px;
+  padding: 0 11px;
 }
 
 .practice-details {
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
 .practice-meta-item {
@@ -5246,12 +5106,19 @@ onMounted(() => {
 .practice-stats {
   display: flex;
   gap: 16px;
-  margin-bottom: 16px;
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 6px;
+  height: 54px;
+  background: #F5F8FB;
+  align-items: center;
+  justify-content: space-evenly;
 }
 
+.divider {
+  width: 1px;
+  height: 20px;
+  background: #EBEBEB;
+}
+
+
 .stats-item {
   display: flex;
   flex-direction: column;