修改了部分样式问题

src/App.vue

@@ -12,9 +12,9 @@ export default {
     name: "App",
     mounted() {
         // // INFO: 本地调试，自动登录
-        // if (process.env.NODE_ENV === 'development') {
-        //     this.SubmitLogin();
-        // }
+        if (process.env.NODE_ENV === 'development') {
+            this.SubmitLogin();
+        }
     },
     methods: {
         SubmitLogin() {

src/styles/common.scss

@@ -10413,7 +10413,7 @@ body {
   height: 40px;
   line-height: 40px;
   text-align: center;
-  font-size: 14px;
+  font-size: 16px;
   outline: none;
   background: transparent;
   color: #606266;
@@ -10425,4 +10425,25 @@ body {
       background-color: #2E64FA ;
       color: #ffffff;
   }
+}
+
+
+.easy {
+    color: #90CB75;
+}
+
+.medium_easy {
+    color: #FAC858;
+}
+
+.medium {
+    color: #5470C6;
+}
+
+.medium_hard {
+    color: #EA7ACB;
+}
+
+.hard {
+    color: #EE6666;
 }

src/views/analysisReport/wrongQuestion/KnowledgePoint.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="knowledge_point"> {{ text }} </div>
+</template>
+
+<script>
+export default {
+    props: {
+        text: String
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.knowledge_point {
+    font-size: 14px;
+    color: #3BA272;
+    border: 1px solid #3BA272;
+    background-color: rgba(#3BA272, 0.1);
+    line-height: 20px;
+    text-align: center;
+    padding: 4px 10px;
+    display: inline-block;
+    border-radius: 4px;
+    user-select: none;
+    margin-right: 10px;
+}
+</style>

src/views/analysisReport/wrongQuestion/index.vue

@@ -58,23 +58,28 @@
                             <div class="card_footer">
                                 <div class="gray">知识点：</div>
                                 <template v-if="question.knowledgePoint && question.knowledgePoint.length > 0">
-                                    <el-tag type="success" size="small" v-for="(know, index) in question.knowledgePoint"
+                                    <KnowledgePoint v-for="(know, index) in question.knowledgePoint" :key="index"
+                                        :text="know" />
+
+                                    <!-- <el-tag type="success" size="small" v-for="(know, index) in question.knowledgePoint"
                                         :key="index">
                                         {{ know }}
-                                    </el-tag>
+                                    </el-tag> -->
                                 </template>
                             </div>
                         </div>
 
                         <div class="card_buttom">
                             <div class="btn_box">
-                                <span class="black" :class="{ blue: question.answerShow }" size="small" @click="ShowAnserAndParse(1, question);">
+                                <span class="black" :class="{ blue: question.answerShow }" size="small"
+                                    @click="ShowAnserAndParse(1, question);">
                                     <i class="iconfont icon_daan"></i>
                                     我的答案
                                     <i class="answerShow_content" v-if="question.answerShow && !question.parseShow"></i>
                                 </span>
 
-                                <span class="black" :class="{ blue: question.parseShow }" size="small" @click="ShowAnserAndParse(2, question);">
+                                <span class="black" :class="{ blue: question.parseShow }" size="small"
+                                    @click="ShowAnserAndParse(2, question);">
                                     <i class="iconfont icon_jiexi"></i>
                                     查看解析
                                     <i class="parseShow_content" v-if="question.parseShow && !question.answerShow"></i>
@@ -130,51 +135,39 @@
 
                     <!-- 变式题推送，无数据 -->
                     <div class="question_card" v-if="question.variationQuestion">
-                        <!-- TODO: 这个地方后端暂无数据 -->
                         <div class="card_top">
                             <div class="card_top_info">
                                 <div class="left">
-                                    <span class="number">1</span>
+                                    <span class="number"
+                                        :class="countLevel(question.variationQuestion.questionLevel).color">
+                                        {{ countLevel(question.variationQuestion.questionLevel).text }}
+                                    </span>
                                     <span class="gray">试题类型：</span>
-                                    <span class="black">选择题</span>
-                                    <span class="tag">高频错题</span>
+                                    <span class="black" style="margin-right: 20px;">
+                                        {{ question.variationQuestion.questionType }}
+                                    </span>
+                                    <span class="gray">难度：</span>
+                                    <span :class="countDiffcutyClass(question.variationQuestion.difficulty)">{{
+                                        question.variationQuestion.difficulty }}</span>
                                 </div>
-                                <div class="right">
+                                <!-- <div class="right">
                                     <span class="gray">来源：</span>
                                     <span class="black">这是一场考试名称</span>
-                                </div>
+                                </div> -->
                             </div>
 
-                            <div class="question_content">这是题目内容</div>
-
-                            <div class="yuwen">
+                            <div class="question_content" v-html="question.variationQuestion.questionStem">这是题目内容</div>
 
+                            <!-- <div class="yuwen">
                                 <span class="btn_span active">1</span>
                                 <span class="btn_span">2</span>
 
                                 <div class="question_list"></div>
-                            </div>
-
-                            <div class="card_footer">
-                                <div class="footer_item">
-                                    <span class="gray">满分：</span>
-                                    <span class="blue">5.0</span>
-                                    <span class="gray">分</span>
-                                </div>
-                                <div class="footer_item">
-                                    <span class="gray">我的得分：</span>
-                                    <span class="blue">5.0</span>
-                                    <span class="gray">分</span>
-                                </div>
-                                <div class="footer_item">
-                                    <span class="gray">难度</span>
-                                    <span class="blue">一般</span>
-                                </div>
-                            </div>
+                            </div> -->
 
                             <div class="card_footer">
                                 <div class="gray">知识点：</div>
-                                <el-tag type="success" size="small">标签二</el-tag>
+                                <KnowledgePoint :text="question.variationQuestion.knowledgePoint" />
                             </div>
                         </div>
                     </div>
@@ -203,10 +196,12 @@ import Download from './Download.vue';
 import loadImg from './loadImg.js'
 import { Loading } from 'element-ui';
 import NoData from './NoData/NoData.vue';
+import KnowledgePoint from './KnowledgePoint.vue';
 export default {
     components: {
         Download,
         NoData,
+        KnowledgePoint,
     },
 
     data() {
@@ -260,14 +255,37 @@ export default {
     },
 
     methods: {
+        countDiffcutyClass(difficulty) {
+            console.log(difficulty);
+
+            // 容易：#90CB75    较易：#FAC858  一般：#5470C6  较难：#EA7ACB  困难：#EE6666
+            const classMap = {
+                '容易': 'easy',
+                '较易': 'medium_easy',
+                '一般': 'medium',
+                '较难': 'medium_hard',
+                '困难': 'hard'
+            }
+            return classMap[difficulty] || ''
+        },
+
+        countLevel(num) {
+            const arr = ['拔高题', '进阶题', '巩固题']
+            const color = ['easy', 'medium', 'hard']
+            return {
+                text: arr[num - 1],
+                color: color[num - 1],
+            }
+        },
+
         ShowAnserAndParse(type, question) {
             if (type === 1) {
-                question.answerShow = !question.answerShow; 
+                question.answerShow = !question.answerShow;
                 question.parseShow = false
             }
 
             if (type === 2) {
-                question.parseShow = !question.parseShow; 
+                question.parseShow = !question.parseShow;
                 question.answerShow = false
             }
         },
@@ -501,13 +519,15 @@ export default {
             &::before {
                 content: '';
                 position: absolute;
-                right: 20px; /* 根据需要调整三角水平位置 */
-                top: 24px; /* 三角放置在外部，超出上方 */
+                right: 20px;
+                /* 根据需要调整三角水平位置 */
+                top: 24px;
+                /* 三角放置在外部，超出上方 */
                 width: 0;
                 height: 0;
                 border-left: 10px solid transparent;
                 border-right: 10px solid transparent;
-                border-bottom: 12px solid  #ffffff;
+                border-bottom: 12px solid #ffffff;
                 z-index: 2;
             }
         }
@@ -518,13 +538,15 @@ export default {
             &::before {
                 content: '';
                 position: absolute;
-                right: 20px; /* 根据需要调整三角水平位置 */
-                top: 24px; /* 三角放置在外部，超出上方 */
+                right: 20px;
+                /* 根据需要调整三角水平位置 */
+                top: 24px;
+                /* 三角放置在外部，超出上方 */
                 width: 0;
                 height: 0;
                 border-left: 10px solid transparent;
                 border-right: 10px solid transparent;
-                border-bottom: 12px solid  #ffffff;
+                border-bottom: 12px solid #ffffff;
                 z-index: 2;
             }
         }