知识点作答

src/views/targetImprove/practice/practiceAnswer.vue

@@ -26,7 +26,9 @@
           <div class="content_title">
             <div class="title_name">实用类文本</div>
             <div class="button">
-              <el-button plain class="download_btn">下载试卷</el-button>
+              <el-button plain class="download_btn" @click="downloadPaper"
+                >下载试卷</el-button
+              >
               <el-button type="primary">提交作答</el-button>
             </div>
           </div>
@@ -37,17 +39,42 @@
               :key="index"
             >
               <QuestionItem :question="item"></QuestionItem>
-              <div class="question_footer">
+              <div :class="['question_footer', { img_list: index == 1 }]">
                 <span class="footer_title">我的作答：</span>
-                <div class="upload_answer">
-                  <el-upload
-                    class="avatar-uploader"
-                    action="#"
-                    :show-file-list="false"
-                    :on-success="handleAvatarSuccess"
-                  >
-                    <el-button size="small" plain>拍照/上传答案</el-button>
-                  </el-upload>
+                <template v-if="index == 1">
+                  <div class="upload_answer">
+                    <el-upload
+                      class="img_uploader"
+                      list-type="picture-card"
+                      :auto-upload="false"
+                      :show-file-list="false"
+                      multiple
+                      :on-success="handleAvatarSuccess"
+                    >
+                      <el-button slot="default" class="upload_btn" plain
+                        >拍照/上传答案</el-button
+                      >
+                    </el-upload>
+                    <div
+                      class="upload_list_item"
+                      v-for="(item, index) in fileList"
+                      :key="index"
+                      @click="handlePictureCardPreview(item)"
+                    >
+                      <img :src="item.url" />
+                      <i
+                        @click.stop="handleRemove(file)"
+                        class="el-icon-error upload_list_item_delete"
+                      ></i>
+                    </div>
+                  </div>
+                </template>
+                <div v-else class="upload_answer">
+                  <el-radio-group class="radio_group" v-model="radio">
+                    <el-radio :label="3">备选项</el-radio>
+                    <el-radio :label="6">备选项</el-radio>
+                    <el-radio :label="9">备选项</el-radio>
+                  </el-radio-group>
                 </div>
               </div>
             </div>
@@ -55,6 +82,45 @@
         </div>
       </el-main>
     </el-container>
+    <div class="page_dialog">
+      <el-dialog :visible.sync="dialogVisible">
+        <div class="dialog_center padding_20">
+          <div class="dialog_img">
+            <img style="width: 100%" :src="dialogImageUrl" />
+          </div>
+        </div>
+      </el-dialog>
+      <el-dialog
+        title="下载试卷"
+        width="360px"
+        :visible.sync="dialogPaperVisible"
+      >
+        <div class="dialog_center padding_20">
+          <div class="dialog_paper">
+            <div class="dialog_paper_item">
+              <span class="dialog_paper_title">试卷名称：</span>
+              <el-radio-group class="radio_group" v-model="radio">
+                <el-radio :label="3">A4</el-radio>
+                <el-radio :label="6">A3</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="dialog_paper_item">
+              <span class="dialog_paper_title">下载格式：</span>
+              <el-radio-group class="radio_group" v-model="radio">
+                <el-radio :label="3">PDF</el-radio>
+                <el-radio :label="6">Word</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogPaperVisible = false">取 消</el-button>
+          <el-button type="primary" @click="ConfirmDownloadPaper"
+            >确 定</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
@@ -66,11 +132,44 @@ export default {
   data() {
     return {
       questionList: [{}, {}, {}, {}],
+      fileList: [
+        {
+          name: "food.jpeg",
+          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+        {
+          name: "food2.jpeg",
+          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+      ],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      dialogPaperVisible: false,
+      radio: 3,
     };
   },
   watch: {},
   mounted() {},
-  methods: {},
+  methods: {
+    //删除图片
+    handleRemove(file) {
+      console.log(file);
+    },
+    //图片预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleAvatarSuccess() {},
+    //下载试卷
+    downloadPaper() {
+      this.dialogPaperVisible = true;
+    },
+    //确定下载
+    ConfirmDownloadPaper() {
+      this.dialogPaperVisible = false;
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -214,29 +313,179 @@ export default {
           background: #ffffff;
           border-radius: 10px 10px 10px 10px;
           border: 1px solid #dcdfe6;
-          :deep(.question_preview){
+          :deep(.question_preview) {
             padding: 16px;
+            box-sizing: border-box;
           }
           &:first-child {
             margin-top: 0;
           }
           margin-top: 20px;
           .question_footer {
-            padding: 16px;
+            padding: 20px 16px;
             background-color: #f8f8f9;
             border-top: 1px solid #dcdfe6;
             display: flex;
-            align-items: center;
+            // align-items: center;
+            &.img_list {
+              padding: 16px;
+              .footer_title {
+                line-height: 48px;
+              }
+            }
             .footer_title {
               font-weight: 500;
               font-size: 14px;
               color: #333333;
+              line-height: 24px;
             }
             .upload_answer {
-                flex: 1;
+              flex: 1;
+              display: flex;
+              flex-wrap: wrap;
+              .img_uploader {
+                // display: flex;
+                // flex-direction: row-reverse;
+                // justify-content: flex-end;
+                // align-items: center;
+                :deep(.el-upload-list--picture-card) {
+                  .el-upload-list__item {
+                    width: 64px;
+                    height: 48px;
+                    margin: 0 20px 8px 0;
+                    background-color: #f0f4f8;
+                    border-radius: 2px 2px 2px 2px;
+                    border: 1px solid #ebeef5;
+                  }
+                }
+                :deep(.el-upload--picture-card) {
+                  background-color: transparent;
+                  border: 0;
+                  height: 48px;
+                  width: auto;
+                  line-height: 48px;
+                  border-radius: 0;
+                  margin-right: 22px;
+                }
+                .upload_btn {
+                  border: 1px solid #2e64fa;
+                  font-weight: 400;
+                  font-size: 14px;
+                  color: #2e64fa;
+                  padding: 9px 15px;
+                }
+              }
+              .upload_list_item {
+                width: 64px;
+                height: 48px;
+                margin: 0 20px 8px 0;
+                background-color: #f0f4f8;
+                border-radius: 2px 2px 2px 2px;
+                border: 1px solid #ebeef5;
+                box-sizing: border-box;
+                overflow: hidden;
+                position: relative;
+                cursor: pointer;
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: cover;
+                }
+                .upload_list_item_delete {
+                  position: absolute;
+                  top: 3px;
+                  right: 3px;
+                  font-size: 16px;
+                  cursor: pointer;
+                  color: rgba(0, 0, 0, 0.5);
+                }
+              }
+            }
+            .radio_group {
+              :deep(.el-radio) {
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #333333;
+                margin-right: 20px;
+                .el-radio__input {
+                  &.is-checked + .el-radio__label {
+                    color: #333333;
+                  }
+                  &.is-checked .el-radio__inner {
+                    border-color: #2e64fa;
+                    background-color: #ffff;
+                  }
+                  .el-radio__inner {
+                    width: 16px;
+                    height: 16px;
+                    border-color: rgba(0, 0, 0, 0.2);
+                    &::after {
+                      width: 10px;
+                      height: 10px;
+                      background-color: #2e64fa;
+                    }
+                  }
+                }
+                .el-radio__label {
+                  padding-left: 4px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.dialog_img {
+  height: 70vh;
+  overflow: auto;
+}
+.dialog_paper {
+  padding: 8px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  .dialog_paper_item {
+    height: 36px;
+    display: flex;
+    align-items: center;
+    .dialog_paper_title {
+      font-weight: 400;
+      font-size: 14px;
+      color: #303133;
+      margin-right: 10px;
+    }
+    .radio_group {
+      :deep(.el-radio) {
+        line-height: 24px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        margin-right: 40px;
+        .el-radio__input {
+          &.is-checked + .el-radio__label {
+            color: #333333;
+          }
+          &.is-checked .el-radio__inner {
+            border-color: #2e64fa;
+            background-color: #ffff;
+          }
+          .el-radio__inner {
+            width: 16px;
+            height: 16px;
+            border-color: rgba(0, 0, 0, 0.2);
+            &::after {
+              width: 10px;
+              height: 10px;
+              background-color: #2e64fa;
             }
           }
         }
+        .el-radio__label {
+          padding-left: 4px;
+        }
       }
     }
   }