Parcourir la source

修改了 dia;og 全局css 样式

wangguoxi il y a 6 mois
Parent
commit
00f9f07140

+ 29 - 0
src/styles/common.scss

@@ -10450,4 +10450,33 @@ body {
 
 .mr_10 {
     margin-right: 10px;
+}
+
+
+.mm_dialog {
+  * {
+        box-sizing: border-box;
+  }
+  .el-dialog {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .el-dialog__body {
+    padding: 40px 20px;
+  }
+
+  .el-dialog__header {
+    height: 48px;
+    padding: 12px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    background-color: #F5F7FA;
+  }
+
+  .el-dialog__footer {
+    padding: 20px;
+    border: 1px solid #E9E9E9;
+  }
 }

+ 20 - 29
src/views/analysisReport/wrongQuestion/Download.vue

@@ -1,9 +1,14 @@
 <template>
-    <el-dialog title="个性化提升手册" :visible="visible" width="530px" @close="handleClose">
+    <el-dialog title="个性化提升手册" class="mm_dialog" :visible="visible" width="360px" @close="handleClose">
         <div class="box">
-            <div class="item" :class="{ active: active === 1 }" @click="changeAnswer(1)">答案解析在每题后</div>
-            <div class="item" :class="{ active: active === 2 }" @click="changeAnswer(2)">答案解析在尾部</div>
-            <div class="item" :class="{ active: active === 0 }" @click="changeAnswer(0)">无答案解析</div>
+            <div class="item" :class="{ isAnswer: isAnswer === 1 }" @click="isAnswer = 1">
+                有答案解析
+                <i class="iconfont icon_Check" v-if="isAnswer === 1"></i>
+            </div>
+            <div class="item" :class="{ isAnswer: isAnswer === 0 }" @click="isAnswer = 0">
+                无答案解析
+                <i class="iconfont icon_Check" v-if="isAnswer === 0"></i>
+            </div>
         </div>
         <span slot="footer" class="dialog-footer">
             <el-button @click="handleClose">取 消</el-button>
@@ -34,7 +39,7 @@ export default {
 
     data() {
         return {
-            active: 1
+            isAnswer: 1
         };
     },
 
@@ -43,22 +48,12 @@ export default {
             this.$emit('update:visible', false);
         },
 
-        changeAnswer(value) {
-            this.active = value;
-        },
-
         download() {
             const loadingInstance = CreateLoadingInstance()
-            let isAnswer = this.active;
-
-            if (this.active === 1 || this.active === 2) {
-                isAnswer = 1;
-            }
-
             downloadStudentErrorQuestion({
                 examId: this.examId,
                 subjectCode: this.subjectCode,
-                isAnswer
+                isAnswer: this.isAnswer
             }).then(response => {
                 const blob2 = new Blob([response.data], {
                     type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
@@ -81,19 +76,19 @@ export default {
 .box {
     display: flex;
     justify-content: space-between;
-    padding: 20px 0;
 
     .item {
+        width: 150px;
+        height: 50px;
+        line-height: 50px;
         text-align: center;
         font-size: 14px;
-        line-height: 22px;
         color: #909399;
-        padding: 15px 20px;
         background: #EDEFF6;
         border-radius: 4px;
         cursor: pointer;
 
-        &.active {
+        &.isAnswer {
             color: #2B65FF;
             background: #fff;
             border: 2px solid #2B65FF;
@@ -111,16 +106,12 @@ export default {
                 border-left-color: transparent;
             }
 
-            /* 对勾图形(使用伪元素并旋转) */
-            &::before {
-                content: '√';
-                color: #fff;
+            .iconfont {
                 position: absolute;
-                right: 5px;
-                bottom: -5px;
-                border-top-color: transparent;
-                border-left-color: transparent;
-                // transform: rotate(45deg);
+                right: 0;
+                bottom: -18px;
+                font-size: 16px;
+                color: #ffffff;
                 z-index: 1;
             }
         }

+ 5 - 2
src/views/analysisReport/wrongQuestion/index.vue

@@ -103,8 +103,8 @@
                             </div>
 
                             <div class="content" v-if="question.parseShow && !question.answerShow">
-                                <div class="flex" style="align-items: center;">
-                                    <div class="flex_left">知识点:</div>
+                                <div class="flex">
+                                    <div class="flex_left" style="line-height: 28px;">知识点:</div>
                                     <div class="flex_right">
                                         <template v-if="question.knowledgePoint && question.knowledgePoint.length > 0">
                                             <KnowledgePoint v-for="(know, index) in question.knowledgePoint"
@@ -393,6 +393,9 @@ export default {
 
     .flex_right {
         flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
     }
 }