update

src/components/components/askStatic.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="sjBox"
-    v-if="askJSONC && askJSONC.askJson"
-  >
+  <div class="sjBox" v-if="askJSONC && askJSONC.askJson">
     <div class="a_add_title">
       <div style="font-size: 25px">{{ askJSONC.askJson.askTitle }}</div>
     </div>
@@ -16,6 +13,11 @@
           <div>
             <span>{{ index + 1 + "、" + item.askstitle }}</span>
           </div>
+          <el-button
+            type="primary"
+            @click="getA(checkJson[index].checkPerson, item.checkList)"
+            >查看答题学生</el-button
+          >
         </div>
         <div class="a_add_body">
           <div class="a_add_input width100">
@@ -28,7 +30,10 @@
                 v-for="(item1, checkIndex) in item.askItem"
                 :key="checkIndex"
               >
-                <span>{{ item.checkList[checkIndex] }}</span>
+                <span
+                  :class="{ right: item.answer == checkIndex }"
+                  v-html="item.checkList[checkIndex]"
+                ></span>
                 <span>{{
                   checkJson[index].checkCount[checkIndex]
                     ? checkJson[index].checkCount[checkIndex]
@@ -50,6 +55,38 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      title="查看"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="900px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div v-for="(item, index) in timu" :key="index" class="borderB">
+          <div v-html="item" class="s_title"></div>
+          <div class="stuBox" style="margin-top: 20px;align-items: flex-start;">
+            <div style="margin: 0 0 10px 0; min-width: 70px; color: #adadad">
+              选择同学：
+            </div>
+            <div
+              v-for="(pe, pi) in person[index]"
+              :key="index + '-' + pi"
+              class="stuBox"
+              style="flex-wrap: wrap"
+            >
+              <span class="studentClass">{{ pe }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >关 闭</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -59,6 +96,9 @@ export default {
   data() {
     return {
       askJSONC: {},
+      dialogVisible: false,
+      person: [],
+      timu: [],
     };
   },
   watch: {
@@ -66,13 +106,23 @@ export default {
       this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
     },
   },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    getA(person, timu) {
+      this.person = person;
+      this.timu = timu;
+      this.dialogVisible = true;
+    },
+  },
   mounted() {
     this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
   },
 };
 </script>
 
-<style>
+<style scoped>
 .sjBox {
   margin-top: 25px;
   /* max-height: 420px; */
@@ -165,4 +215,83 @@ export default {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: rgba(0, 0, 0, 0.1);
 }
+
+.right {
+  color: rgb(0 123 255);
+  position: relative;
+}
+.right::after {
+  content: "";
+  position: absolute;
+  background-image: url(../../assets/right.png);
+  width: 15px;
+  height: 15px;
+  background-size: 100% 100%;
+  top: 50%;
+  margin-left: 10px;
+  transform: translateY(-50%);
+}
+
+.dialog_diy >>> .el-dialog__header,
+.dialog_diy1 >>> .el-dialog__header {
+  background: #002e81 !important;
+  padding: 15px 20px;
+}
+.dialog_diy >>> .el-dialog__title,
+.dialog_diy1 >>> .el-dialog__title {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn,
+.dialog_diy1 >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close,
+.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover,
+.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.dialog_diy1 >>> .el-dialog__body {
+  padding: 0;
+}
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer,
+.dialog_diy1 >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.s_title {
+  /* margin-top: 10px; */
+  font-size: 18px;
+  margin-bottom: 10px;
+  word-break: break-word;
+  /* min-width: calc(100% / 2 - 200px); */
+}
+.stuBox {
+  display: flex;
+  /* flex-wrap: wrap; */
+  align-items: center;
+}
+.studentClass {
+  background: #46a1eb;
+  color: #fff;
+  width: 90px;
+  height: 25px;
+  text-align: center;
+  line-height: 25px;
+  border-radius: 5px;
+  margin: 0 15px 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 5px;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.borderB {
+  margin-bottom: 10px;
+  border-bottom: 1px solid #d8d8d8;
+}
 </style>