Blame view

src/components/setAnswer.vue 17.1 KB
d5987f6a   阿宝   组件修改答案
1
  <template>
45504a95   阿宝   即时测页面,以及小题修改答案
2
3
4
5
6
7
8
    <div
      class="el-dialog-wrapper"
      v-show="diaVisible"
      width="400"
      center
      @click.self="cancel"
    >
dd5150c5   阿宝   数据同步
9
10
      <div class="el-dialog-content">
        <p class="title">
9309dc5d   梁保满   任课老师接口完成
11
          设置答案 <i class="fa fa-exchange"></i>
45504a95   阿宝   即时测页面,以及小题修改答案
12
          <!-- 设置答案 -->
dd5150c5   阿宝   数据同步
13
          <i class="el-icon-close" @click="cancel"></i>
d5987f6a   阿宝   组件修改答案
14
        </p>
9309dc5d   梁保满   任课老师接口完成
15
16
17
18
19
20
21
22
23
24
25
26
27
        <div class="dia-question-box">
          <p class="dia-tips">点击批量设置答案按钮,批量设置答案</p>
          <div v-for="(subQuestions, index) in FormQuestionList" :key="index">
            <p
              class="set-ans-btn"
              v-if="
                subQuestions.qusType &&
                subQuestions.subNum &&
                subQuestions.subNum > 4
              "
            >
              <el-button type="primary" @click="setFormAns(index)"
                >批量设置答案</el-button
dd5150c5   阿宝   数据同步
28
              >
9309dc5d   梁保满   任课老师接口完成
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
            </p>
            <div class="sub-questions" :key="index" v-else>
              <div class="qs-num">题{{ subQuestions.questionIndex }}</div>
              <div class="qs-options qs-options2">
                <p v-if="subQuestions.questionType == 4" class="answer-box">
                  <span
                    class="answer-s"
                    :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
                    @click="subQuestions.correctAnswer = 1"
                    >✓</span
                  >
                  <span
                    class="answer-s"
                    :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
                    @click="subQuestions.correctAnswer = 2"
                    >✗</span
                  >
                </p>
                <p v-if="subQuestions.questionType == 3" class="answer-box">
                  <span
                    class="answer-s"
                    v-for="option in subQuestions.answerOptions.split(',')"
                    :class="
                      subQuestions.correctAnswer.includes(option) ? 'active' : ''
                    "
                    :key="option"
                    @click="changAnswer(subQuestions, option)"
                    >{{ option }}</span
                  >
                </p>
                <p v-if="subQuestions.questionType == 2" class="answer-box">
                  <span
                    class="answer-s"
                    v-for="option in subQuestions.answerOptions.split(',')"
                    :class="subQuestions.correctAnswer == option ? 'active' : ''"
                    :key="option"
                    @click="subQuestions.correctAnswer = option"
                    >{{ option }}</span
                  >
                </p>
45504a95   阿宝   即时测页面,以及小题修改答案
69
              </div>
d5987f6a   阿宝   组件修改答案
70
71
            </div>
          </div>
45504a95   阿宝   即时测页面,以及小题修改答案
72
        </div>
dd5150c5   阿宝   数据同步
73
74
75
76
77
78
79
80
        <div class="footer-box">
          <el-button class="dia-btn" type="primary" @click="saveAnswer"
            >确 定</el-button
          >
          <el-button class="dia-btn" type="danger" @click="cancel"
            >取 消</el-button
          >
        </div>
d5987f6a   阿宝   组件修改答案
81
      </div>
9309dc5d   梁保满   任课老师接口完成
82
83
84
      <el-dialog
        title="批量设置答案"
        :visible.sync="diaSetAns"
236b1f0e   梁保满   周末-飞书bug
85
        :close-on-click-modal="false"
9309dc5d   梁保满   任课老师接口完成
86
87
88
        width="400"
        :modal-append-to-body="false"
      >
11a4e518   梁保满   背题组卷修改答案设置,即使测随堂问...
89
        <div class="qs-options set-questions">
9309dc5d   梁保满   任课老师接口完成
90
91
92
          <p>{{ setSubPro(formAns.qusType) }}:</p>
          <p class="ipt">
            <el-input
f5729396   梁保满   批量设置答案
93
              ref="formAnsIpt"
813d4d64   梁保满   批量设置答案添加输入
94
              v-if="formAns.qusType == 2 || formAns.qusType == 3"
9309dc5d   梁保满   任课老师接口完成
95
              v-model="formAns.answerList"
813d4d64   梁保满   批量设置答案添加输入
96
97
98
99
100
101
102
              @keydown.native="keydownAnswer($event, formAns.qusType)"
              @input="setAllAnswer($event, formAns.qusType)"
            ></el-input>
            <el-input
              v-if="formAns.qusType == 4"
              v-model="formAns.answerList"
              readonly=""
9309dc5d   梁保满   任课老师接口完成
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
            ></el-input>
          </p>
          <p class="answer-box">
            <template v-if="formAns.qusType == 4">
              <span
                class="answer-s active"
                @click="
                  formAns.answerList.length < formAns.subNum
                    ? (formAns.answerList += '✓')
                    : ''
                "
                >✓</span
              >
              <span
                class="answer-s active"
                @click="
                  formAns.answerList.length < formAns.subNum
                    ? (formAns.answerList += '✗')
                    : ''
                "
                >✗</span
              >
            </template>
            <template v-if="formAns.qusType == 3">
              <span
                class="answer-s active"
                v-for="option in formAns.answerOptions.split(',')"
                :key="option"
                @click="setMultiple(formAns, option)"
                >{{ option }}</span
              >
              <span
                class="answer-s active"
def690b2   梁保满   批量设置答案
136
                @click="setMultiple(formAns, ',')"
9309dc5d   梁保满   任课老师接口完成
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
                >,</span
              >
            </template>
            <template v-if="formAns.qusType == 2" class="answer-box">
              <span
                class="answer-s active"
                v-for="option in formAns.answerOptions.split(',')"
                :key="option"
                @click="
                  formAns.answerList.length < formAns.subNum
                    ? (formAns.answerList += option)
                    : ''
                "
                >{{ option }}</span
              >
            </template>
            <span
              class="answer-s delButton"
              @click="formAns.answerList = formAns.answerList.slice(0, -1)"
              >x</span
            >
11a4e518   梁保满   背题组卷修改答案设置,即使测随堂问...
158
            <span class="answer-s ac" @click="formAns.answerList = ''">ac</span>
9309dc5d   梁保满   任课老师接口完成
159
160
161
162
163
164
165
          </p>
        </div>
        <div class="dialog-footer" slot="footer">
          <el-button @click="saveFormAns">确 定</el-button>
          <el-button @click="diaSetAns = false">取 消</el-button>
        </div>
      </el-dialog>
dd5150c5   阿宝   数据同步
166
    </div>
d5987f6a   阿宝   组件修改答案
167
168
169
  </template>
  
  <script>
45504a95   阿宝   即时测页面,以及小题修改答案
170
  import { deepClone, checkAnswer } from "utils";
d5987f6a   阿宝   组件修改答案
171
172
173
174
175
176
177
178
179
  export default {
    name: "SetAnswer",
    props: {
      diaVisible: false, //修改答案
      paperId: "",
      questionList: Array,
    },
    data() {
      return {
9309dc5d   梁保满   任课老师接口完成
180
        diaSetAns: false,
d5987f6a   阿宝   组件修改答案
181
182
        editType: true, //修改答案模式
        FormQuestionList: [],
9309dc5d   梁保满   任课老师接口完成
183
184
185
186
187
188
189
190
        FormQuestionList: [],
        formAns: {
          endIndex: 0, //相同题目最后一位题目的questionIndex
          qusType: "", //题目类型
          subNum: 0, //数量
          answerOptions: [], //答案选项
          answerList: "", //答案列表-字符串
        },
d5987f6a   阿宝   组件修改答案
191
192
193
194
      };
    },
    watch: {
      questionList: {
9309dc5d   梁保满   任课老师接口完成
195
196
197
198
199
200
201
202
        handler: function (val) {
          const questions = deepClone(val).sort((a, b) => {
            return a.questionIndex - b.questionIndex;
          });
          this.FormQuestionList = deepClone(questions);
          let types = [{}];
          let addndex = 0;
          this.FormQuestionList?.map((sub, index) => {
813d4d64   梁保满   批量设置答案添加输入
203
            if (!!sub.questionType && sub.questionType != 5) {
9309dc5d   梁保满   任课老师接口完成
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
              if (sub.questionType == types[addndex].qusType) {
                //同类型批量答案+1
                types[addndex].subNum += 1;
                if (
                  types[addndex].answerOptions.length < sub.answerOptions.length
                ) {
                  types[addndex].answerOptions = sub.answerOptions;
                }
                types[addndex].answerList += this.setAnswer(
                  sub.questionType,
                  sub.correctAnswer
                );
                if (index == this.questionList.length - 1) {
                  //循环最后类型数量大于等于5,保存批量答案
                  if (types[addndex].subNum && types[addndex].subNum >= 5) {
                    types[addndex].endIndex = sub.questionIndex;
                    types[addndex].index = index;
                  }
                }
45504a95   阿宝   即时测页面,以及小题修改答案
223
              } else {
9309dc5d   梁保满   任课老师接口完成
224
225
226
227
                if (types[addndex].subNum && types[addndex].subNum >= 5) {
                  //不同类型时如果原有类型数量大于等于5,保存批量答案
                  types[addndex].endIndex =
                    this.questionList[index - 1].questionIndex;
813d4d64   梁保满   批量设置答案添加输入
228
                  types[addndex].index = index - 1;
9309dc5d   梁保满   任课老师接口完成
229
230
                  addndex += 1;
                  types[addndex] = {};
45504a95   阿宝   即时测页面,以及小题修改答案
231
                }
9309dc5d   梁保满   任课老师接口完成
232
233
234
235
236
237
238
239
                //不同类型初始化批量答案
                types[addndex].qusType = sub.questionType;
                types[addndex].subNum = 1;
                types[addndex].answerOptions = sub.answerOptions;
                types[addndex].answerList = this.setAnswer(
                  sub.questionType,
                  sub.correctAnswer
                );
45504a95   阿宝   即时测页面,以及小题修改答案
240
              }
9309dc5d   梁保满   任课老师接口完成
241
            }
45504a95   阿宝   即时测页面,以及小题修改答案
242
          });
9309dc5d   梁保满   任课老师接口完成
243
244
245
246
247
248
249
250
251
252
253
254
          for (let i = 0; i < types.length; i++) {
            if (types[i].qusType == 3) {
              types[i].answerList = types[i].answerList.slice(0, -1);
            }
            if (types[i].subNum >= 5) {
              item.subQuestions.splice(
                types[i].index + i + 1,
                0,
                deepClone(types[i])
              );
            }
          }
d5987f6a   阿宝   组件修改答案
255
256
257
258
259
        },
        deep: true,
      },
    },
    methods: {
9309dc5d   梁保满   任课老师接口完成
260
261
262
      setFormAns(indexs) {
        //初始化要修改的答案
        this.formAns = { ...this.FormQuestionList[indexs] };
f5729396   梁保满   批量设置答案
263
        let startIndex = this.formAns.endIndex - this.formAns.subNum;
11a4e518   梁保满   背题组卷修改答案设置,即使测随堂问...
264
265
        let answerList = "";
        this.FormQuestionList[index].map((item, subIdx) => {
f5729396   梁保满   批量设置答案
266
267
268
269
270
271
272
273
274
275
276
          if (subIdx >= startIndex) {
            answerList += this.setAnswer(item.questionType, item.correctAnswer);
            if (subIdx != indexs) {
              if (!!item.qusType) {
                answerList = "";
              }
            } else {
              if (item.qusType == 3) {
                answerList = answerList.slice(0, -1);
              }
              this.formAns.answerList = answerList;
11a4e518   梁保满   背题组卷修改答案设置,即使测随堂问...
277
            }
11a4e518   梁保满   背题组卷修改答案设置,即使测随堂问...
278
279
          }
        });
9309dc5d   梁保满   任课老师接口完成
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
        this.diaSetAns = true;
      },
      saveFormAns() {
        //批量修改答案
        let EndIndex;
        let subNum = this.formAns.subNum - 1;
        this.FormQuestionList.some((item, index) => {
          if (this.formAns.endIndex == item.questionIndex) {
            EndIndex = index;
            return;
          }
        });
        for (let i = 0; i <= subNum; i++) {
          let correctAnswer = "";
          if (this.formAns.qusType == 2) {
f5729396   梁保满   批量设置答案
295
            correctAnswer = this.formAns.answerList[subNum - i] || "";
9309dc5d   梁保满   任课老师接口完成
296
          } else if (this.formAns.qusType == 3) {
f5729396   梁保满   批量设置答案
297
            correctAnswer = this.formAns.answerList.split(",")[subNum - i] || "";
9309dc5d   梁保满   任课老师接口完成
298
          } else if (this.formAns.qusType == 4) {
f5729396   梁保满   批量设置答案
299
300
301
302
303
304
            correctAnswer =
              this.formAns.answerList[subNum - i] == "✓"
                ? 1
                : this.formAns.answerList[subNum - i] == "✗"
                ? 2
                : "";
9309dc5d   梁保满   任课老师接口完成
305
306
307
308
309
          }
          this.questionList[EndIndex - i].correctAnswer = correctAnswer;
        }
        this.diaSetAns = false;
      },
d5987f6a   阿宝   组件修改答案
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
      setSubPro(type) {
        let tit;
        switch (type) {
          case 2:
            tit = "单选题";
            break;
          case 3:
            tit = "多选题";
            break;
          case 4:
            tit = "判断题";
            break;
          case 5:
            tit = "主观题";
            break;
        }
        return tit;
      },
813d4d64   梁保满   批量设置答案添加输入
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
      // keydownAnswer(event) {
      //   //快速答案设置禁止输入
      //   if (
      //     event.key == "Meta" ||
      //     event.key == "CapsLock" ||
      //     event.key == "Shift" ||
      //     event.key == "Enter" ||
      //     event.key == "Alt" ||
      //     event.key == "Backspace" ||
      //     event.key == "Delete" ||
      //     event.key == "ArrowUp" ||
      //     event.key == "ArrowDown" ||
      //     event.key == "ArrowLeft" ||
      //     event.key == "v" ||
      //     event.key == "V" ||
      //     event.key == "ArrowRight"
      //   ) {
      //     return;
      //   } else {
      //     event.returnValue = "";
      //   }
      // },
      keydownAnswer(event, type) {
        let answerA = "ABCDEFG";
        let answer_a = "abcdefg";
        answerA = answerA.substring(0, this.formAns.subNum);
        answer_a = answer_a.substring(0, this.formAns.subNum);
        answerA += answer_a;
        answerA = type == 2 ? answerA : answerA + ",";
d5987f6a   阿宝   组件修改答案
357
358
359
360
361
362
363
364
365
366
367
368
369
370
        if (
          event.key == "Meta" ||
          event.key == "CapsLock" ||
          event.key == "Shift" ||
          event.key == "Enter" ||
          event.key == "Alt" ||
          event.key == "Backspace" ||
          event.key == "Delete" ||
          event.key == "ArrowUp" ||
          event.key == "ArrowDown" ||
          event.key == "ArrowLeft" ||
          event.key == "v" ||
          event.key == "V" ||
          event.key == "ArrowRight"
813d4d64   梁保满   批量设置答案添加输入
371
        )
d5987f6a   阿宝   组件修改答案
372
          return;
813d4d64   梁保满   批量设置答案添加输入
373
        if (!answerA.includes(event.key)) {
d5987f6a   阿宝   组件修改答案
374
375
376
          event.returnValue = "";
        }
      },
813d4d64   梁保满   批量设置答案添加输入
377
378
379
380
381
382
383
384
385
386
      setAllAnswer(event, type) {
        let str = this.formAns.answerList;
        let str2 = checkAnswer(
          str,
          type,
          this.formAns.answerOptions.split(",").length,
          this.formAns.subNum
        );
        this.formAns.answerList = str2;
      },
9309dc5d   梁保满   任课老师接口完成
387
388
389
390
391
392
393
      setAnswer(type, ans) {
        let txt = "";
        if (type == 2) {
          txt = ans;
        } else if (type == 3) {
          txt = ans + ",";
        } else if (type == 4) {
813d4d64   梁保满   批量设置答案添加输入
394
          txt = ans == 1 ? "✓" : ans == 2 ? "✗" : "";
9309dc5d   梁保满   任课老师接口完成
395
396
397
        }
        return txt;
      },
f5729396   梁保满   批量设置答案
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
      insertTxtAndSetcursor(answerList, str) {
        let element = this.$refs.formAnsIpt.$el.children[0]; // 获取到指定标签
        let startPos = element.selectionStart; // 获取光标开始的位置
        if (startPos === undefined) {
          // 如果没有光标位置 不操作
          return answerList;
        } else {
          return {
            text:
              answerList.substring(0, startPos) +
              str +
              answerList.substring(startPos), // 将文本插入
            startPos: startPos + str.length,
          };
        }
      },
9309dc5d   梁保满   任课老师接口完成
414
      setMultiple(obj, answer) {
d5987f6a   阿宝   组件修改答案
415
        //多选答案设置
f5729396   梁保满   批量设置答案
416
417
        let resault = this.insertTxtAndSetcursor(obj.answerList || "", answer);
        obj.answerList = resault.text;
d5987f6a   阿宝   组件修改答案
418
419
420
421
        let str = obj.answerList;
        let str2 = checkAnswer(
          str,
          3,
9309dc5d   梁保满   任课老师接口完成
422
          obj.answerOptions.split(",").length,
b2d3d803   梁保满   批量设置答案优化
423
          obj.subNum
d5987f6a   阿宝   组件修改答案
424
425
        );
        obj.answerList = str2;
f5729396   梁保满   批量设置答案
426
427
        this.$refs.formAnsIpt.$el.children[0].focus();
        this.$refs.formAnsIpt.$el.children[0].selectionStart = resault.startPos;
d5987f6a   阿宝   组件修改答案
428
429
430
431
432
433
434
435
436
437
438
439
440
      },
      changAnswer(sub, option) {
        //设置多选答案
        let str = new RegExp(option, "g");
        if (sub.correctAnswer?.includes(option)) {
          sub.correctAnswer = sub.correctAnswer.replace(str, "");
        } else {
          let arrs = (sub.correctAnswer && sub.correctAnswer.split("")) || [];
          arrs.push(option);
          sub.correctAnswer = arrs.sort().join("");
        }
      },
      async saveAnswer() {
8ea67428   梁保满   飞书bug
441
442
443
444
        let questionList = [...this.FormQuestionList];
        for (let i = 0; i < questionList.length; i++) {
          if (questionList[i].qusType) {
            questionList.splice(i, 1);
9309dc5d   梁保满   任课老师接口完成
445
446
            i--;
          }
45504a95   阿宝   即时测页面,以及小题修改答案
447
448
        }
        console.log(questionList);
9309dc5d   梁保满   任课老师接口完成
449
450
        const { data, status, message } = await this.$request.setPeriodAnswer({
          periodId: this.paperId,
d5987f6a   阿宝   组件修改答案
451
452
453
          questionList: questionList,
        });
        if (status == 0) {
dd5150c5   阿宝   数据同步
454
          this.$emit("saveSuccess");
d5987f6a   阿宝   组件修改答案
455
456
457
458
459
        } else {
          this.$message.error(message);
        }
      },
      cancel() {
dd5150c5   阿宝   数据同步
460
        this.$emit("cancel");
d5987f6a   阿宝   组件修改答案
461
462
463
464
465
466
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
dd5150c5   阿宝   数据同步
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
  .el-dialog-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2022;
    .el-dialog-content {
      width: 600px;
45504a95   阿宝   即时测页面,以及小题修改答案
482
      background: #fff;
dd5150c5   阿宝   数据同步
483
      border-radius: 10px;
45504a95   阿宝   即时测页面,以及小题修改答案
484
      padding: 16px 20px 20px;
dd5150c5   阿宝   数据同步
485
    }
45504a95   阿宝   即时测页面,以及小题修改答案
486
    .title {
dd5150c5   阿宝   数据同步
487
488
      font-size: 18px;
      position: relative;
45504a95   阿宝   即时测页面,以及小题修改答案
489
490
      margin-bottom: 20px;
      .el-icon-close {
dd5150c5   阿宝   数据同步
491
        position: absolute;
45504a95   阿宝   即时测页面,以及小题修改答案
492
493
494
        top: 0;
        right: 12px;
        padding: 2px;
dd5150c5   阿宝   数据同步
495
496
        font-size: 16px;
        cursor: pointer;
45504a95   阿宝   即时测页面,以及小题修改答案
497
498
499
500
501
502
503
504
        &:hover {
          color: #667ffa;
        }
      }
      .fa-exchange {
        color: #999;
        cursor: pointer;
        &:hover {
dd5150c5   阿宝   数据同步
505
506
507
508
509
510
511
          color: #667ffa;
        }
      }
    }
  }
  .footer-box {
    text-align: center;
45504a95   阿宝   即时测页面,以及小题修改答案
512
    padding-top: 20px;
dd5150c5   阿宝   数据同步
513
  }
d5987f6a   阿宝   组件修改答案
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
  .sub-questions {
    width: 100%;
    display: flex;
    &:hover {
      background: #f8f8f8;
    }
    & > div {
      min-height: 40px;
      padding: 5px;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .qs-num {
      width: 80px;
      font-size: 16px;
      color: #333;
      font-weight: 500;
    }
    .qs-options {
      flex: 1;
    }
    .qs-options2 {
      text-align: left;
      justify-content: flex-start;
      padding-left: 20px;
      .answer-s {
        cursor: pointer;
        border-color: #667ffd;
        color: #667ffd;
        margin: 0 15px;
        &.active {
          color: #fff;
        }
      }
    }
    :deep(.el-select) {
      .el-input__inner {
        border-radius: 20px;
        border-color: #667ffd;
        width: 150px;
        height: 32px;
        line-height: 32px;
        background: rgba($color: #667ffd, $alpha: 0.05);
      }
      .el-input__icon {
        line-height: 32px;
      }
    }
  }
45504a95   阿宝   即时测页面,以及小题修改答案
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
  .dia-tips {
    line-height: 18px;
    padding-bottom: 10px;
  }
  .set-questions {
    display: flex;
    padding-right: 20px;
    margin-bottom: 20px;
    .qs-num {
      width: 80px;
      padding-top: 6px;
      .txt {
        font-size: 16px;
        line-height: 18px;
        margin-bottom: 6px;
      }
    }
    .qs-options {
      flex: 1;
      .ipt {
        margin-bottom: 5px;
      }
      .answer-box {
        .answer-s {
          cursor: pointer;
          user-select: none;
          &:first-of-type {
            margin-left: 0;
          }
        }
      }
    }
    .delButton {
      border-color: #ff6868;
      background: #ff6868 url("../assets/images/arrow.png") no-repeat center;
      background-size: 19px;
      color: transparent;
    }
    .ac {
      border-color: #ff6868;
      background: #ff6868;
      color: #fff;
    }
  }
d5987f6a   阿宝   组件修改答案
609
  </style>