关于使用vue进行考试页面的开发

Posted 2021-02-21 dragonkings

//页面分为左右两部分，下面是主要的代码
<div class="container">
    <el-container style="height: calc(100vh - 90px); border: 1px solid #eee">
      <el-aside
        width="300px"
        style="background-color: #EBEBEB"
      >
        <el-image
          :src="src"
          class="showImg"
        >
          <div
            slot="error"
            class="image-slot"
          >
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <el-form
          ref="form"
          v-model="form"
          size="mini"
          style="width: 270px;margin-left: 30px"
          label-position="left"
        >
          <el-form-item
            label="姓名："
            label-width="60px"
          >
            <span>{{ form.userTitle }}</span>
          </el-form-item>
          <el-form-item
            label="身份证号："
            label-width="90px"
          >
            <span>{{ form.userIdcard }}</span>
          </el-form-item>
          <el-form-item
            label="单位："
            label-width="60px"
          >
            <span>{{ form.corpName }}</span>
          </el-form-item>
        </el-form>
        <div style="height: 50px;line-height: 50px;background-color:#DDDDDD; margin-left: 10px;width: 280px">
          <span style="font-size: 18px;font-weight:700;color: rgb(96, 98, 102);margin-left: 100px">试题导航</span>
        </div>
        <div class="note">
          <div
            style="background-color: #7D7D7D;margin-left: 30px"
            class="all"
          ></div>
          <span class="textStyle">全部</span>
          <div
            style="background-color: #05C826;"
            class="all"
          ></div>
          <span class="textStyle">正确</span>
          <div
            style="background-color: #E70012"
            class="all"
          ></div>
          <span class="textStyle">错误</span>
        </div>
        <ul class="sole">
          <li
            v-for="(item,index) in list"
            :key="index"
            :class="item.title"
            :style="{background:item.color}"
            @click="toTegional(index)"
          >
            {{ index+1 }}
          </li>
        </ul>
      </el-aside>
      <el-container>
        <el-header style="text-align: left; font-size: 14px;height: 60px">
          <div style="margin: 20px 20px 0">
            <span
              v-if="isReady"
              style=" font-family: Arial;"
            >共计试题{{ count }}道，已做{{ finished }}道，完成率{{ rate }}%，答对{{ successCount }}道，正确率{{ unRate }}%，总分：{{ allScore }}，得分：{{ trueScore }}</span>
            <span
              v-else
              style=" font-family: Arial;"
            >共计试题{{ count }}道，已做{{ finished }}道，完成率{{ rate }}%</span>
            <span
              class="timeruning"
              style="margin-left: 20px"
            >考试时间共1小时30分钟，距离考试结束还有{{ hr }}:{{ min }}:{{ sec }}</span>
            <el-button
              type="text"
              style="color:#1e8cfb;float:right;padding: 0 0 0"
              :disabled="isSubmit"
              @click="handleClick()"
            >
              提交
            </el-button>
          </div>
        </el-header>

        <el-main>
          <div
            ref="rightContent"
            style="height: calc(100vh - 160px);"
          >
            <div
              v-for="(item,index) in list"
              :key="index"
            >
              <el-card
                :id="‘a‘+index"
                class="box-card"
              >
                <div style="background-color: #EEEEEE;width: 100%; height: 80px">
                  <div style="padding-top: 20px">
                    <p style="display: inline;margin-left: 20px">
                      {{ index + 1 }}.{{ item.title }}
                    </p>
                    <p
                      v-if="item.type==‘1‘"
                      style="display: inline;margin-left: 10px"
                    >
                      (单选题)
                    </p>
                    <p
                      v-else-if="item.type===‘2‘"
                      style="display: inline;margin-left: 10px"
                    >
                      (多选题)
                    </p>
                    <p
                      v-else-if="item.type===‘3‘"
                      style="display: inline;margin-left: 10px"
                    >
                      (判断题)
                    </p>
                    <p
                      v-if="item.type!==‘3‘&&isReady"
                      style="display: inline;margin-left: 10px"
                    >
                      正确答案：{{ item.answer }}
                    </p>
                    <p
                      v-else-if="item.type===‘3‘&&item.answer===‘1‘&&isReady"
                      style="display: inline;margin-left: 10px"
                    >
                      正确答案：对
                    </p>
                    <p
                      v-else-if="item.type===‘3‘&&item.answer===‘0‘&&isReady"
                      style="display: inline;margin-left: 10px"
                    >
                      正确答案：错
                    </p>
                    <p style="display: inline;float: right;margin-right: 20px">
                      本题{{ item.score }}分
                    </p>
                  </div>
                </div>
                <el-radio-group
                  v-if="item.type===‘1‘"
                  v-model="item.examValue"
                  @change="onChange(item)"
                >
                  <ul>
                    <li
                      v-for="(item1,index1) in item.examQBankDetailsList"
                      :key="index1"
                      style="margin:10px 0 10px 20px"
                    >
                      <el-radio
                        :value="item1.options"
                        :label="order[index1]"
                        :disabled="isReady"
                      >
                        {{ order[index1] }}.{{ item1.options }}
                      </el-radio>
                    </li>
                  </ul>
                </el-radio-group>
                <el-checkbox-group
                  v-else-if="item.type===‘2‘"
                  v-model="item.examValue"
                  @change="onChange(item)"
                >
                  <ul>
                    <li
                      v-for="(item1,index1) in item.examQBankDetailsList"
                      :key="index1"
                      style="margin:10px 0 10px 20px"
                    >
                      <el-checkbox
                        :value="item1.options"
                        :label="order[index1]"
                        :disabled="isReady"
                      >
                        {{ order[index1] }}.{{ item1.options }}
                      </el-checkbox>
                    </li>
                  </ul>
                </el-checkbox-group>
                <el-radio-group
                  v-else-if="item.type===‘3‘"
                  v-model="item.examValue"
                  @change="onChange(item)"
                >
                  <ul>
                    <li style="margin:10px 0 10px 20px">
                      <el-radio
                        label="1"
                        :disabled="isReady"
                      >
                        对
                      </el-radio>
                    </li>
                    <li style="margin:10px 0 10px 20px">
                      <el-radio
                        label="0"
                        :disabled="isReady"
                      >
                        错
                      </el-radio>
                    </li>
                  </ul>
                </el-radio-group>
              </el-card>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

下面的截图是实现后哦的样式

下面是使用的样式

<style scoped lang="scss">
    .container {
        height: calc(100vh - 90px);
        background-color: #f9f9f9;
    }
    .showImg {
        width: 125px;
        height: 150px;
        display: block;
        margin-left: 87px;
        margin-top: 20px;
        background-color: #dadcdc;
    }

    .sole {
        width: 280px;
        height: auto;
        list-style-type: none;
        margin-left: 10px;
    }

    .sole li {
        width: 40px;
        height: 40px;
        float: left;
        border: solid 1px #dddddd;
        text-align: center;
        line-height: 40px;
        background-color: #fcfcfc;
    }
    .note {
        width: 280px;
        height: 40px;
        list-style-type: none;
        margin-left: 10px;
        background-color: #f6f6f6;
    }
    .note .all {
        width: 20px;
        height: 20px;
        float: left;
        border: solid 1px;
        margin-top: 10px;
    }
    .textStyle {
        width: 50px;
        float: left;
        margin-left: 5px;
        margin-top: 10px;
    }
    /deep/ .el-card__body {
        padding: 0 0 0 !important;
    }
    .box-card {
        margin-top: 10px;
    }
    p {
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
        background-color: #409eff !important;
        border-color: #409eff !important;
    }

    /deep/ .el-checkbox__input.is-disabled.is-checked + span.el-checkbox__label {
        color: #409eff !important;
    }
</style>