错题巩固更新 增加题目详情公共组件

src/views/targetImprove/components/QuestionItem.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="question_preview">
+    <div class="question_header">
+        <div class="header_index">
+            1
+        </div>
+        <span class="header_type">
+            选择题
+        </span>
+        <span class="header_difficulty">
+            容易
+        </span>
+        <div class="header_exam_name">
+            25-26学年高一下学期期末考试 第14题
+        </div>
+    </div>
+    <div class="question_content" v-html="questionContent">
+        
+    </div>
+  </div>
+</template>
+<script>
+// 题目预览公共组件
+import { mapGetters } from "vuex";
+export default {
+  components: {
+
+  },
+  computed: {
+
+  },
+  data() {
+    return {
+
+      questionContent:"<div class=\"qml-stem\" data-copyright=\"xkw.com-1778721752-107161725521013800-LOqLkjMPMHlPSNdJ2YSObDfSIpJYVbaMq2PwNexeT3jLb8OIq6bBG4DxeSUqDFM9\"><p style=\"text-align: left;\"><span style=\"font-family: 宋体;\">赏析有误的一项是（<span style=\"font-family: 'Times New Roman'\" qml-space-size=\"3\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>）</span></p><p style=\"text-align: center;\"><span style=\"font-family: 楷体;\">十一月四日风雨大作（其二）</span></p><p style=\"text-align: center;\"><span style=\"font-family: 楷体;\">陆游</span></p><p style=\"text-align: center;\"><span style=\"font-family: 楷体;\">僵卧孤村不自哀，尚思为国戍轮台。</span></p><p style=\"text-align: center;\"><span style=\"font-family: 楷体;\">夜阑卧听风吹雨，铁马冰河入梦来。</span></p><div class=\" qml-og\"><table class=\"qml-og\" style=\"width:100%\"><tr><td>A.&nbsp;<span class=\"qml-op\"><span style=\"font-family: 宋体;\">全诗由述志和记梦两部分组成，两者之间是因果关系。</span></span></td></tr><tr><td>B.&nbsp;<span class=\"qml-op\"><span style=\"font-family: 宋体;\">诗中“尚”字表现了诗人强烈而至死不渝的爱国之情，报国之志。</span></span></td></tr><tr><td>C.&nbsp;<span class=\"qml-op\"><span style=\"font-family: 宋体;\">诗的后两句都是写梦境，与前两句写实相映衬。</span></span></td></tr><tr><td colspan=\"1\">D.&nbsp;<span class=\"qml-op\"><span style=\"font-family: 宋体;\">全诗气势豪壮，感情真挚，具有强烈的感染力。</span></span></td></tr></table></div></div>",//总菜单
+    };
+  },
+  watch: {
+    userInfo: {
+      handler(newValue, oldValue) {
+        console.log(newValue, oldValue);
+
+      },
+      deep: true, // 监听对象的深层变化
+    },
+  },
+  created() {
+
+  },
+  mounted() {
+
+
+  },
+  methods: {
+  
+  },
+};
+</script>
+<style lang="scss" scoped>
+
+.question_preview
+{
+    width: 100%;
+    height: auto;
+
+    background: #FFFFFF;
+    border-radius: 10px 10px 10px 10px;
+    border: 1px solid #DCDFE6;
+    padding: 16px;
+    box-sizing: border-box;
+    .question_header
+    {
+        width: 100%;
+        height: 25px;
+        background: #fff;
+        display: flex;
+        justify-content:flex-start;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 16px;
+        .header_index
+        {
+            width: 20px;
+            height: 20px;
+
+
+            line-height: 18px;
+            background: #F3F3F3;
+            border-radius: 2px 2px 2px 2px;
+            font-weight: 500;
+            font-size: 14px;
+            color: #333333;
+            text-align: center;
+        }
+
+        .header_type
+        {
+            font-weight: 550;
+            font-size: 14px;
+            color: #333333;
+        }
+
+        .header_difficulty
+        {
+            font-weight: 400;
+            font-size: 14px;
+            color: #90CB75;
+        }
+
+        .header_exam_name
+        {
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+        }
+    }
+    .question_content
+    {
+        width: 100%;
+        height: auto;
+        background: #fff;
+
+    }
+}
+</style>

src/views/targetImprove/consolidate/index.vue

@@ -2,20 +2,48 @@
   <div class="page_target">
     <TargetSubject></TargetSubject>
     <!-- 错题巩固 -->
+    <div class="consolidate_item">
+      <div class="left_tree">
 
+      </div>
+      <div class="right_list">
+        <div class="question_item" v-for="(item, index) in questionList" :key="index">
+          <QuestionItem :question="item"></QuestionItem>
+        </div>
+
+        <div class="page_jg_20">
+
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import TargetSubject from "@/views/targetImprove/components/TargetSubject.vue"//顶部筛选科目组件
+import QuestionItem from "@/views/targetImprove/components/QuestionItem.vue"//题目公共组件
 import { mapState } from 'vuex'
 export default {
   components: {
     TargetSubject,
+    QuestionItem
 
   },
   data() {
     return {
-
+      questionList: [
+        {
+          
+        },
+        {
+          
+        },
+        {
+          
+        },
+        {
+          
+        },
+      ]
     }
   },
   computed:{
@@ -42,5 +70,31 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.consolidate_item
+{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  height: calc(100% - 50px);
+
+  .left_tree
+  {
+    width: 200px;
+    height: 100%;
+    background: blue;
+  }
+  .right_list
+  {
+    width: calc(100% - 200px);
+    height: 100%;
+    background: #fff;
+    padding: 20px;
+    overflow-y: auto;
+  }
+}
 
+.question_item
+{
+  margin-bottom: 20px;
+}
 </style>

src/views/targetImprove/practice/practiceAnswer.vue

@@ -1,13 +1,9 @@
 <template>
-    <div class="practiceAnswer">
-        <div class="title">
-            <span>练习答案</span>
-        </div>
+    <div class="">
+        
     </div>
 </template>
 
 <style scoped lang="scss">
-.practiceAnswer {
-  background-color: #ffffff;
-}
+
 </style>