frontend-admin/src/features/examwork/ExamManagement/ExamEdit.vue

<template>
  <div v-loading="!orgSetting">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="考试规则设置" name="first">
        <el-form
          ref="form1"
          :model="form"
          :rules="rules"
          label-width="170px"
          inline
          :disabled="disableEdit"
        >
          <el-row>
            <el-form-item label="考试模式" prop="mode">
              <ExamTypeSelect
                :disabled="isEdit"
                v-model="form.mode"
              ></ExamTypeSelect>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="批次编码" prop="code">
              <el-input :disabled="isEdit" v-model.trim="form.code"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="批次名称" prop="name">
              <el-input v-model.trim="form.name"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="考试时间" prop="startEndTimeProxy">
              <el-date-picker
                v-model="form.startEndTimeProxy"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row v-if="!isModeAnytime">
            <el-form-item label="候考时长（分钟）">
              <MinuteInput v-model.trim="form.prepareSeconds"> </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="考试次数限制">
              <el-input-number
                v-model.number.trim="form.examCount"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="考试时长（分钟）">
              <MinuteInput v-model.trim="form.maxDurationSeconds">
              </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row v-if="!isModeAnytime">
            <el-form-item label="迟到时长（分钟）">
              <MinuteInput v-model.trim="form.openingSeconds"> </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="冻结时间（分钟）">
              <MinuteInput v-model.trim="form.minDurationSeconds">
              </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row v-if="!isModeAnytime">
            <el-form-item label="启用集中收卷">
              <el-radio v-model="form.forceFinish" :label="1">是</el-radio>
              <el-radio v-model="form.forceFinish" :label="0">否</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="启用开考口令">
              <el-radio v-model="enableShortCodeProxy" :label="true"
                >是</el-radio
              >
              <el-radio v-model="enableShortCodeProxy" :label="false"
                >否</el-radio
              >
              <el-input
                v-if="enableShortCodeProxy"
                v-model.trim="form.shortCode"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否允许断点续考">
              <el-radio v-model="enableBreakProxy" :label="true">是</el-radio>
              <el-radio v-model="enableBreakProxy" :label="false">否</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="enableBreakProxy" label="断点次数">
              <el-input-number
                v-model.trim="form.breakResumeCount"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="enableBreakProxy" label="断点时长（分钟）">
              <MinuteInput v-model.trim="form.breakExpireSeconds">
              </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="重考是否需要审核">
              <el-radio v-model="form.reexamAuditing" :label="1">是</el-radio>
              <el-radio v-model="form.reexamAuditing" :label="0">否</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="取分策略">
              <el-radio
                v-model="form.recordSelectStrategy"
                :disabled="isEdit"
                label="LATEST"
              >
                最后一次提交
              </el-radio>
              <el-radio
                v-model="form.recordSelectStrategy"
                label="HIGHEST_OBJECTIVE_SCORE"
                :disabled="isEdit"
              >
                客观分最高
              </el-radio>
              <!-- <el-radio
                v-model="form.recordSelectStrategy"
                label="HIGHEST_TOTAL_SCORE"
                :disabled="isEdit"
              >
                总分最高
              </el-radio> -->
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="多选题给分规则">
              <el-radio v-model="form.objectiveScorePolicy" label="EQUAL">
                全对给分
              </el-radio>
              <el-radio v-model="form.objectiveScorePolicy" label="PARTIAL">
                漏选给一半分
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否显示客观分">
              <el-radio v-model="form.showObjectiveScore" :label="1">
                是
              </el-radio>
              <el-radio v-model="form.showObjectiveScore" :label="0">
                否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否允许摄像头拍照作答">
              <el-radio v-model="form.cameraPhotoUpload" :label="1">
                是
              </el-radio>
              <el-radio v-model="form.cameraPhotoUpload" :label="0">
                否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否允许小程序作答">
              <el-radio v-model="form.mobilePhotoUpload" :label="1">
                是
              </el-radio>
              <el-radio v-model="form.mobilePhotoUpload" :label="0">
                否
              </el-radio>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="监考设置" name="second">
        <el-form
          ref="form2"
          :model="form"
          :rules="rules"
          label-width="180px"
          inline
          :disabled="disableEdit"
        >
          <el-row class="tab-invililation">
            <h2>开考检测</h2>
            <el-form-item label="">
              <div class="d-flex flex-column tab-invililation-radio">
                <el-radio v-model="form.entryAuthenticationPolicy" label="OFF">
                  安全级别：<span style="color: #202b4b; font-size: 20px;">
                    无
                  </span>
                  <span class="desc-txt">
                    开考无检测
                  </span>
                </el-radio>
                <el-radio
                  v-model="form.entryAuthenticationPolicy"
                  label="FACE_VERIFY_OPTIONAL"
                >
                  安全级别：<span style="color: #1cd1a1; font-size: 20px;">
                    低
                  </span>
                  <span class="desc-txt"> 开考人脸比对，不强制比对 </span>
                </el-radio>
                <el-radio
                  v-model="form.entryAuthenticationPolicy"
                  label="FACE_VERIFY_FORCE"
                >
                  安全级别：<span style="color: #ff9f43; font-size: 20px;">
                    中
                  </span>
                  <span class="desc-txt"> 开考人脸强制比对 </span>
                </el-radio>
                <el-radio
                  v-model="form.entryAuthenticationPolicy"
                  :disabled="orgSettingDisableLiveness"
                  :title="orgSettingDisableLiveness && '原因：机构禁用活体'"
                  label="LIVENESS_VERIFY"
                >
                  安全级别：<span style="color: red; font-size: 20px;">
                    高
                  </span>
                  <span class="desc-txt"> 开考人脸比对及活体验证 </span>
                </el-radio>
              </div>
            </el-form-item>
          </el-row>
          <el-row class="tab-invililation">
            <h2>过程监控</h2>
            <el-form-item label="是否考中人脸识别">
              <el-radio
                :disabled="!!form.cameraPhotoUpload"
                :title="!!form.cameraPhotoUpload && '原因：拍照作答'"
                v-model="form.inProcessFaceVerify"
                :label="1"
                >是
              </el-radio>
              <el-radio
                :disabled="!!form.cameraPhotoUpload"
                :title="!!form.cameraPhotoUpload && '原因：拍照作答'"
                v-model="form.inProcessFaceVerify"
                :label="0"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row v-if="form.inProcessFaceVerify">
            <el-form-item label="是否考中陌生人脸识别">
              <el-radio
                :disabled="!!form.cameraPhotoUpload"
                :title="!!form.cameraPhotoUpload && '原因：拍照作答'"
                v-model="form.inProcessFaceStrangerIgnore"
                :label="0"
                >是
              </el-radio>
              <el-radio
                :disabled="!!form.cameraPhotoUpload"
                :title="!!form.cameraPhotoUpload && '原因：拍照作答'"
                v-model="form.inProcessFaceStrangerIgnore"
                :label="1"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row v-if="form.inProcessFaceVerify">
            <el-form-item label="是否考开启真实性检测">
              <el-radio
                :disabled="!!form.cameraPhotoUpload"
                :title="!!form.cameraPhotoUpload && '原因：拍照作答'"
                v-model="form.inProcessRealnessVerify"
                :label="1"
                >是
              </el-radio>
              <el-radio
                :disabled="!!form.cameraPhotoUpload"
                :title="!!form.cameraPhotoUpload && '原因：拍照作答'"
                v-model="form.inProcessRealnessVerify"
                :label="0"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否考中活体检测">
              <el-radio
                :disabled="
                  !!form.cameraPhotoUpload || orgSettingDisableLiveness
                "
                :title="
                  (!!form.cameraPhotoUpload || orgSettingDisableLiveness) &&
                  '原因：机构禁用活体或选择拍照作答'
                "
                v-model="form.inProcessLivenessVerify"
                :label="1"
                >是
              </el-radio>
              <el-radio
                :disabled="
                  !!form.cameraPhotoUpload || orgSettingDisableLiveness
                "
                :title="
                  (!!form.cameraPhotoUpload || orgSettingDisableLiveness) &&
                  '原因：机构禁用活体或选择拍照作答'
                "
                v-model="form.inProcessLivenessVerify"
                :label="0"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row v-if="form.inProcessLivenessVerify">
            <el-form-item
              label="活体验证弹出时间段"
              prop="inProcessLivenessFixedRange"
            >
              <MinuteInput
                v-model.trim="form.inProcessLivenessFixedRange[0]"
                style="width: 150px;"
              />
              ~
              <MinuteInput
                v-model.trim="form.inProcessLivenessFixedRange[1]"
                style="width: 150px;"
              />
              <span style="color: red;">
                *活体验证将该时间段内随机出现，且时间段设置不能超过冻结时间
              </span>
            </el-form-item>
          </el-row>
          <el-row v-if="form.inProcessLivenessVerify">
            <el-form-item label="活体验证结果的判定方案">
              <el-radio v-model="form.inProcessLivenessJudgePolicy" label="ANY">
                单条成功则通过
              </el-radio>
              <el-radio v-model="form.inProcessLivenessJudgePolicy" label="ALL">
                所有验证成功则通过
              </el-radio>
              <el-radio
                v-model="form.inProcessLivenessJudgePolicy"
                label="MORE"
              >
                成功次数大于失败则通过
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row class="tab-invililation">
            <h2>监考直播</h2>
            <el-form-item label="是否开启考生端监考直播">
              <el-radio
                :disabled="!!form.cameraPhotoUpload"
                :title="!!form.cameraPhotoUpload && '原因：拍照作答'"
                v-model="form.monitorProxy"
                :label="true"
                >是
              </el-radio>
              <el-radio
                :disabled="!!form.cameraPhotoUpload"
                :title="!!form.cameraPhotoUpload && '原因：拍照作答'"
                v-model="form.monitorProxy"
                :label="false"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <!-- <el-row>
            <el-form-item v-if="form.monitorProxy" label="是否需要视频回放">
              <el-radio v-model="form.monitorRecord" :label="1">是 </el-radio>
              <el-radio v-model="form.monitorRecord" :label="0">否 </el-radio>
            </el-form-item>
          </el-row> -->
          <el-row>
            <el-form-item v-if="form.monitorProxy" label="电脑&手机监控方案">
              <el-checkbox-group v-model="form.monitorVideoSource">
                <div class="d-flex">
                  <div class="d-flex flex-column justify-content-between">
                    <el-checkbox label="CLIENT_CAMERA"
                      >电脑摄像头为主机位</el-checkbox
                    >
                    <el-checkbox label="CLIENT_SCREEN"
                      >电脑开启录屏</el-checkbox
                    >
                    <el-checkbox label="MOBILE_FIRST">手机主机位</el-checkbox>
                    <el-checkbox
                      :disabled="
                        !form.monitorVideoSource.includes('MOBILE_FIRST')
                      "
                      :title="
                        !form.monitorVideoSource.includes('MOBILE_FIRST') &&
                        '原因：先选择手机主机位'
                      "
                      label="MOBILE_SECOND"
                      >手机辅机位</el-checkbox
                    >
                    <span style="color: red; font-size: 12px;"
                      >*主机位设备负责收音及播放监考提示</span
                    >
                  </div>
                  <div
                    style="
                      margin-left: 20px;
                      padding: 10px;
                      font-size: 10px;
                      background: #f0f4f9;
                    "
                  >
                    <div class="d-flex">
                      <div
                        class="d-flex flex-column justify-content-center align-items-center"
                        style="width: 52px !important;"
                      >
                        <div :class="monitorImgSrc('MOBILE_SECOND')" />
                        手机辅机位
                      </div>
                      <div
                        class="d-flex flex-column justify-content-center align-items-center"
                        style="width: 350px !important;"
                      >
                        <div :class="monitorImgSrc('CLIENT_CAMERA')" />
                        电脑摄像头为主机位
                      </div>
                      <div style="width: 52px !important;"></div>
                    </div>
                    <div
                      class="d-flex"
                      style="margin-bottom: -60px; margin-top: -30px;"
                    >
                      <div style="width: 52px !important;"></div>
                      <div
                        class="d-flex flex-column justify-content-center align-items-center"
                        style="width: 350px !important;"
                      >
                        <div :class="monitorImgSrc('CLIENT_SCREEN')" />
                        电脑开启录屏
                      </div>
                      <div style="width: 52px !important;"></div>
                    </div>
                    <div class="d-flex">
                      <div style="width: 52px !important;"></div>
                      <div style="width: 350px !important;"></div>
                      <div
                        class="d-flex flex-column justify-content-center align-items-center"
                        style="width: 52px !important;"
                      >
                        <div :class="monitorImgSrc('MOBILE_FIRST')" />
                        手机主机位
                      </div>
                    </div>
                  </div>
                </div>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="其他设置" name="third">
        <el-form
          :model="form"
          label-width="170px"
          inline
          :disabled="disableEdit"
        >
          <el-row>
            <el-form-item label="考试须知">
              <VEditor
                :value="form.preNoticeClone"
                style="width: 300px;"
                @result="(v) => (form.preNotice = v)"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="须知强制阅读时长">
              <el-input v-model.trim="form.preNoticeStaySeconds">
                <template slot="append">秒</template>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="考后说明">
              <VEditor
                :value="form.postNoticeClone"
                style="width: 300px;"
                @result="(v) => (form.postNotice = v)"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="IP限制">
              <el-radio v-model="form.enableIpLimit" :label="1">是</el-radio>
              <el-radio v-model="form.enableIpLimit" :label="0">否</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="IP段(*表示任意)：">
              <el-input v-model.trim="form.ipAllow"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <div class="tab-footer">
      <el-button
        type="primary"
        @click="save"
        :loading="loading"
        :disabled="disableEdit"
        >保存</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import ExamTypeSelect from "@/components/ExamTypeSelect";
import MinuteInput from "@/components/MinuteInput";
import { saveExam, getExamDetail } from "@/api/examwork-exam";
import { isNumber } from "lodash-es";
import { searchOrg } from "@/api/system-org";

export default {
  name: "ExamEdit",
  components: { ExamTypeSelect, MinuteInput },
  computed: {
    examId() {
      return this.$route.params.id;
    },
    isEdit() {
      return !!this.examId;
    },
    isModeAnytime() {
      return this.form.mode === "ANYTIME";
    },
    enableShortCodeProxy: {
      get() {
        return !!this.form.shortCode;
      },
      set(v) {
        if (v) {
          this.form.shortCode = "123";
        } else {
          this.form.shortCode = null;
        }
      },
    },
    enableBreakProxy: {
      get() {
        return !!(this.form.breakResumeCount || this.form.breakExpireSeconds);
      },
      set(v) {
        if (v) {
          this.form.breakResumeCount = 1;
          this.form.breakExpireSeconds = 0;
        } else {
          this.form.breakResumeCount = null;
          this.form.breakExpireSeconds = null;
        }
      },
    },
    orgSettingDisableLiveness() {
      return !this.orgSetting?.enableLiveness;
    },
    disableEdit() {
      return this.form.monitorStatus === "FINISHED";
    },
  },
  watch: {
    "form.mode": {
      immediate: true,
      handler(v) {
        if (v === "ANYTIME") {
          this.form.forceFinish = 0;
          this.form.prepareSeconds = 0;
          this.form.openingSeconds = 0;
        }
      },
    },
    "form.startEndTimeProxy": {
      immediate: true,
      handler(v) {
        this.form.startTime = new Date(v[0]).valueOf();
        this.form.endTime = new Date(v[1]).valueOf();
      },
    },
    "form.monitorProxy": {
      immediate: true,
      handler(v) {
        if (!v) {
          this.form.monitorVideoSource = [];
          this.form.monitorRecord = 0;
        }
        if (this.form.monitorVideoSource === null) {
          this.form.monitorVideoSource = [];
        }
      },
    },
    "form.monitorVideoSource": {
      immediate: true,
      handler(v, ov) {
        if (!v) {
          this.form.monitorVideoSource = [];
        }
        if (
          // 没动静，不修改，避免死循环
          (v || []).includes("MOBILE_FIRST") !==
            (ov || []).includes("MOBILE_FIRST") &&
          !this.form.monitorVideoSource.includes("MOBILE_FIRST")
        ) {
          this.form.monitorVideoSource = this.form.monitorVideoSource.filter(
            (v) => v !== "MOBILE_SECOND"
          );
        }
      },
    },
    "form.cameraPhotoUpload": {
      handler(v) {
        if (v) {
          this.form.mobilePhotoUpload = 0;

          this.form.inProcessFaceVerify = 0;
          this.form.inProcessFaceStrangerIgnore = 0;
          this.form.inProcessRealnessVerify = 0;
          this.form.inProcessLivenessVerify = 0;
          this.form.monitorProxy = false;
        }
      },
    },
    "form.mobilePhotoUpload": {
      handler(v) {
        if (v) {
          this.form.cameraPhotoUpload = 0;
        }
      },
    },
  },
  async created() {
    if (this.isEdit) {
      const res = await getExamDetail({ id: this.examId });
      this.form = { ...this.form, ...res.data.data };
      if (!this.form.inProcessLivenessFixedRange) {
        this.form.inProcessLivenessFixedRange = [0, 0];
      }
      this.form.startEndTimeProxy = [this.form.startTime, this.form.endTime];
      this.form.monitorProxy = !!this.form.monitorVideoSource;
      this.form.preNoticeClone = this.form.preNotice;
      this.form.postNoticeClone = this.form.postNotice;
    }

    // sleep
    // await new Promise((res) =>
    //   setTimeout(() => {
    //     res();
    //   }, 3000)
    // );
    const res = await searchOrg(this.$store.state.user.orgId);
    this.orgSetting = res.data.data[0];
    if (!this.orgSetting.enableLiveness) {
      if (this.form.entryAuthenticationPolicy === "LIVENESS_VERIFY") {
        this.form.entryAuthenticationPolicy = "FACE_VERIFY_FORCE";
      }
      this.form.inProcessLivenessVerify = 0;
    }
  },
  data() {
    return {
      activeName: "first",
      form: {
        mode: "",
        code: "",
        name: "",
        startEndTimeProxy: [],
        startTime: 0,
        endTime: 0,
        prepareSeconds: 0,
        maxDurationSeconds: 0,
        openingSeconds: 0,
        minDurationSeconds: 0,
        forceFinish: 1,
        shortCode: "",
        breakResumeCount: 0,
        breakExpireSeconds: 0,
        reexamAuditing: 0,
        recordSelectStrategy: "HIGHEST_OBJECTIVE_SCORE",
        objectiveScorePolicy: "EQUAL",
        showObjectiveScore: 0,
        cameraPhotoUpload: 0,
        mobilePhotoUpload: 0,
        entryAuthenticationPolicy: "OFF",
        inProcessFaceVerify: 0,
        inProcessFaceStrangerIgnore: 0,
        inProcessRealnessVerify: 0,
        inProcessLivenessVerify: 0,
        inProcessLivenessFixedRange: [0, 0],
        inProcessLivenessJudgePolicy: "ALL",
        monitorProxy: false,
        monitorRecord: 0,
        monitorVideoSource: [],
        ipAllow: "",
      },
      rules: {
        mode: { required: true, message: "必填" },
        name: { required: true, message: "必填" },
        code: { required: true, message: "必填" },
        startEndTimeProxy: { required: true, message: "必填" },
        inProcessLivenessFixedRange: {
          validator: (rule, value) => {
            return new Promise((resolve, reject) => {
              const isNull = value === null;
              if (
                (this.form.inProcessLivenessVerify === 0 && isNull) ||
                (value.length === 2 &&
                  isNumber(value[0]) &&
                  isNumber(value[1]) &&
                  value[0] < value[1] &&
                  value[0] > 0 &&
                  value[1] < this.form.minDurationSeconds)
              ) {
                resolve();
                return;
              }
              if (this.form.inProcessLivenessVerify && value[0] <= 0) {
                reject("开始时间必须大于0");
              } else if (
                this.form.inProcessLivenessVerify &&
                value[1] >= this.form.minDurationSeconds
              ) {
                reject("结束时间必须小于冻结时间");
              } else {
                reject("格式错误");
              }
            });
          },
          // message: "格式错误",
        },
      },
      orgSetting: null,
      loading: false,
    };
  },
  methods: {
    monitorImgSrc(monitorSource) {
      const selected = this.form.monitorVideoSource.includes(monitorSource);
      const selectedStr = selected ? "-selected" : "";
      if (monitorSource === "MOBILE_FIRST") {
        return `mobile-first-img${selectedStr}`;
      } else if (monitorSource === "MOBILE_SECOND") {
        return `mobile-second-img${selectedStr}`;
        // return `./imgs/手机监考辅机位${selectedStr}.png`;
      } else if (monitorSource === "CLIENT_CAMERA") {
        // return `./imgs/手机监考辅机位${selectedStr}.png`;
        return `client-camera-img${selectedStr}`;
      } else if (monitorSource === "CLIENT_SCREEN") {
        // return `./imgs/手机监考辅机位${selectedStr}.png`;
        return `client-screen-img${selectedStr}`;
      }

      return "";
    },
    async save() {
      try {
        await this.$refs.form1.validate();
        await this.$refs.form2.validate();
        // await this.$refs.form3.validate();
      } catch (error) {
        console.log(error);
        return;
      }

      try {
        this.loading = true;
        await saveExam(this.form);
        this.$notify({ title: "保存成功", type: "success" });
        this.$router.back();
      } finally {
        this.loading = false;
      }
    },
    cancel() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-invililation {
  > h2 {
    font-size: 20px;
    font-weight: 500;
    color: #8c94ac;
    line-height: 28px;
    margin-bottom: 26px;
  }

  &-radio {
    padding-left: 30px;
    .el-radio {
      margin-bottom: 18px;
      height: 30px;
    }
  }

  .desc-txt {
    color: #fe5863;
    border: 1px solid #fe5863;
    border-radius: 0 6px 6px 0;
    padding: 6px 10px 6px 16px;
    margin-left: 20px;
    border-left: 0;
    position: relative;

    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 12px;
      height: 30px;
      left: -11px;
      top: -1px;
      background-image: url(../../../assets/bg-angle.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}

.mobile-first-img {
  background-image: url(./imgs/手机监考主机位.png);
  background-repeat: no-repeat;
  background-size: 52px 80px;
  width: 52px;
  height: 80px;
  &-selected {
    @extend .mobile-first-img;
    background-image: url(./imgs/手机监考主机位-选中.png);
  }
}

.mobile-second-img {
  background-image: url(./imgs/手机监考辅机位.png);
  background-repeat: no-repeat;
  background-size: 52px 80px;
  width: 52px;
  height: 80px;
  &-selected {
    @extend .mobile-second-img;
    background-image: url(./imgs/手机监考辅机位-选中.png);
  }
}

.client-camera-img {
  background-image: url(./imgs/电脑摄像头主机位.png);
  background-repeat: no-repeat;
  background-size: 33px 40px;
  width: 33px;
  height: 40px;
  &-selected {
    @extend .client-camera-img;
    background-image: url(./imgs/电脑摄像头主机位-选中.png);
  }
}

.client-screen-img {
  background-image: url(./imgs/电脑操作录屏.png);
  background-repeat: no-repeat;
  background-size: 190px 110px;
  width: 190px;
  height: 110px;
  &-selected {
    @extend .client-screen-img;
    background-image: url(./imgs/电脑操作录屏-选中.png);
  }
}
</style>