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

//页面分为左右两部分，下面是主要的代码
<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>

 js可以参考这进行动态交互，这个是一次提交完成的，你们也可以做一道题提交一次，这样退出后进来还可以接着考试

   return {
            form: '',
            isReady: false,
            isSubmit: false,
            src:
                   'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            examValue: '',
            count: 0,
            successCount: 0,
            finished: 0,
            order: ['A', 'B', 'C', 'D', 'E', 'F'],
            list: [],
            chengeList: [],
            hr: 0,
            min: 0,
            sec: 0,
            allScore: 0,
            trueScore: 0,
            countTime: "", // 测评时间
        };
    },
    computed: {
        unRate: function() {
            if (this.successCount === 0) {
                return 0
            }
            return Math.round(this.successCount / this.count * 100)

        },
        rate: function() {
            if (this.finished === 0) {
                return 0
            }
            return Math.round(this.finished / this.count * 100)

        },
    },
    created() {
        this.getMenus();
        this.getStyle();      
        this.timer();
    },
    mounted() {
        if (window.sessionStorage.getItem('finished') !== null) {
            this.finished = window.sessionStorage.getItem('finished');
        }
        if (window.sessionStorage.getItem('isReady') !== null) {
            this.isReady = true;
            this.isSubmit = true;
        }
    },
    destroyed() {
        clearTimeout(this.setTime);
        clearTimeout(this.setTimer);
        window.sessionStorage.removeItem('finished');
        window.sessionStorage.removeItem('timed');
        window.sessionStorage.removeItem('chengeList');
        window.sessionStorage.removeItem('isReady');
    },
    methods: {
           getStyle() {
            var api = '  '
            this.axios
                .get(api, {})
                .then(res => {
                    if (res.data.success) {
                      let bankStyle = res.data.data.id;
                      this.countTime = res.data.data.strExt2;
                      this.getAll(bankStyle);
                                    // 定义结束时间戳
                    if (window.sessionStorage.getItem('timed') !== null) {
                        this.end =
                                Date.parse(new Date()) +
                                parseInt(window.sessionStorage.getItem('timed'), 10);
                    } else {
                        // eslint-disable-next-line radix
                        this.end = Date.parse(new Date()) + parseInt(this.countTime);
                    }
                    this.countdown();
                    } else {
                        this.$message.error('查询信息错误');
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
         timer() {
            const that = this;
            let api = "";
            this.axios
                .get(api, {})
                .then(res => {
                    if (res.data.success) {
                      that.setTimer = setTimeout(function() {
                            that.timer();
                        }, 300000);
                      } else {
                        console.log("请求数据失败");
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        countdown() {
            // 定义当前时间戳
            const now = Date.parse(new Date());
            if (now >= this.end) {
                this.hr = 0;
                this.min = 0;
                this.sec = 0;
                this.$message.warning('测评结束');
                clearTimeout(this.setTimer);
                this.isReady = true;
                return;
            }
            // 用结束时间减去当前时间获得倒计时时间戳
            const msec = this.end - now;
            window.sessionStorage.setItem('timed', msec);
            let hr = parseInt((msec / 1000 / 60 / 60) % 24, 10); // 算出小时数
            let min = parseInt((msec / 1000 / 60) % 60, 10); // 算出分钟数
            let sec = parseInt((msec / 1000) % 60, 10); // 算出秒数
            // 给数据赋值
            this.hr = hr > 9 ? hr : '0' + hr;
            this.min = min > 9 ? min : '0' + min;
            this.sec = sec > 9 ? sec : '0' + sec;
            // 定义this指向
            const that = this;
            // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
            this.setTime = setTimeout(function() {
                that.countdown();
            }, 1000);
        },
        getAll(val) {
            let that = this;
            let api =  ;
            this.axios
                .get(api, {})
                .then(res => {
                    if (res.data.success) {
                        if (
                            window.sessionStorage.getItem('chengeList') !== null
                        ) {
                            that.list = JSON.parse(
                                window.sessionStorage.getItem('chengeList'),
                            );
                            that.chengeList = that.list;
                            that.count = that.list.length;
                        } else {
                            that.count = res.data.data.length;
                            that.list = res.data.data.map(v => {
                                v.examValue = [];
                                v.color = '';
                                v.chooseAnswer = '';
                                v.typeName = "";
                                if(v.type !== '3') {
                                    v.answers = [];
                                    for(let i in v.examQBankDetailsList) {
                                        if(v.type === '1') {
                                            if (v.examQBankDetailsList[i].isRight === 1) {
                                                v.answers = this.order[i];
                                            }
                                            v.typeName = "(单选题)"
                                        }else if(v.type === '2') {
                                            if (v.examQBankDetailsList[i].isRight === 1) {
                                                v.answers.push(this.order[i]);
                                            }
                                            v.typeName = "(多选题)"
                                        }
                                    }
                                }else if (v.type === '3') {
                                    v.typeName = "(判断题)"
                                     v.answers = v.answer;
                                }
                                if (v.type === '2') {
                                    v.answers.sort();
                                    v.answer = v.answers.join(',');
                                } else {
                                    v.answer = v.answers;
                                }
                                return v;
                            });
                            that.chengeList = that.list;
                        }
                    } else {
                        this.$message.error('查询信息错误');
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // 获取信息
        getMenus() {
            var params = {
                id: sessionStorage.getItem('p_id'),
            };
            var api = '';
            this.axios
                .post(api, params, {})
                .then(res => {
                    if (res.data.success) {
                        this.form = res.data.data[0];
                        this.form.corpName = sessionStorage.getItem('corpName');
                    } else {
                        this.$message.error('查询信息错误');
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        onChange(e) {
            window.sessionStorage.removeItem('chengeList');
            window.sessionStorage.removeItem('finished');
            if (e.type === '2') {
                if (e.examValue.length > 0) {
                    e.color = '#7D7D7D';
                } else {
                    e.color = '';
                }
            } else {
                e.color = '#7D7D7D';
            }
            for (let i in this.chengeList) {
                if (this.chengeList[i].id === e.id) {
                    if (
                        this.chengeList[i].type === '1' ||
                            this.chengeList[i].type === '3'
                    ) {
                        if (
                            this.chengeList[i].chooseAnswer === '' &&
                                e.examValue !== ''
                        ) {
                            this.finished++;
                        } else if (
                            this.chengeList[i].chooseAnswer !== '' &&
                                e.examValue === ''
                        ) {
                            this.finished--;
                        }
                        this.chengeList[i].chooseAnswer = this.chengeList[
                            i
                        ].examValue;
                    } else if (this.chengeList[i].type === '2') {
                        if (
                            this.chengeList[i].chooseAnswer === '' &&
                                e.examValue.length !== 0
                        ) {
                            this.finished++;
                        } else if (
                            this.chengeList[i].chooseAnswer !== '' &&
                                e.examValue.length === 0
                        ) {
                            this.finished--;
                        }
                        e.examValue.sort();
                        this.chengeList[i].chooseAnswer = e.examValue.join(',');
                    }
                    this.chengeList[i] = e;
                    window.sessionStorage.setItem('finished', this.finished);
                    window.sessionStorage.setItem(
                        'chengeList',
                        JSON.stringify(this.chengeList),
                    );
                    return;
                }
            }
        },
        toTegional(val) {
            let id = '#a' + val;
            document.querySelector(id).scrollIntoView(true);
        },
        handleClick() {
            this.$confirm('是否确定提交?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
              })
                  .then(() => {
                      this.commitClick();
                  })
                  .catch(() => {
                      this.$message({
                          showClose: true,
                          duration: 1000,
                          type: 'info',
                          message: '已取消提交',
                      });
                });
        },
        commitClick() {
            if (this.hr === 0 && this.min === 0 && this.sec === 0) {
                // task
            } else {
                for (let i in this.chengeList) {
                    if (this.chengeList[i].chooseAnswer === '') {
                        this.$message.warning('还有试题未作答');
                        return;
                    }
                }
            }
            const loading = this.$loading({
                    lock: true,
                    text: '提交中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                });
           let times = parseInt(this.countTime) - parseInt(window.sessionStorage.getItem('timed'), 10);
           const api = "";
            this.axios
                .post(api, this.chengeList, {})
                .then(res => {
                    if (res.data.success) {
                         loading.close();
                        this.$message.success('提交成功');
                        this.allScore = res.data.data[1];
                        this.trueScore = res.data.data[0];
                        let Recordid = res.data.data[3];
                        window.sessionStorage.removeItem('isReady');
                        this.isReady = true;
                        this.isSubmit = true;
                        window.sessionStorage.setItem('isReady', this.isReady);
                        clearTimeout(this.setTime);
                        clearTimeout(this.setTimer);
                        let scores = this.trueScore / this.allScore;
                        this.$confirm('测评结束正确率为' + scores.toFixed(2) * 100 + '%是否退出', '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          type: 'warning'
                        }).then(() => {
                      
                        }).catch(() => {
                        });
                    }else{
                         loading.close();
                        this.$message.error('提交失败');
                        return;
                    }
                })
                .catch(error => {
                     loading.close();
                    console.log(error);
                    this.$message.error('提交失败');
                    return;
                });
            for (let i in this.chengeList) {
                if (
                    this.chengeList[i].type === '1' ||
                        this.chengeList[i].type === '3'
                ) {
                    if (
                        this.chengeList[i].chooseAnswer ===
                            this.chengeList[i].answer
                    ) {
                        this.chengeList[i].color = '#05C826';
                        this.successCount++;
                    } else {
                        this.chengeList[i].color = '#E70012';
                    }
                } else if (this.chengeList[i].type === '2') {
                    if (
                        this.chengeList[i].chooseAnswer ===
                            this.chengeList[i].answer
                    ) {
                        this.chengeList[i].color = '#05C826';
                        this.successCount++;
                    } else {
                        this.chengeList[i].color = '#E70012';
                    }
                }
            }
            window.sessionStorage.removeItem('chengeList');
            window.sessionStorage.setItem(
                'chengeList',
                JSON.stringify(this.chengeList),
            );
        },
    },