jpcj-pc/src/views/home/selectExamSubject/index.vue

<template>
  <div class="content">
    <div class="bg-white pl50 pt30">
      <div class="flex items-center">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">仿真模拟考试</span>
        <span>（注意科目四，各车型一样）</span>
        <div class="flex">
          <div
            @click="goDriveExam('xc')"
            class="lh34 ml15 select-border1 round4 pr15 pl15"
          >
            轿车
          </div>
          <div
            @click="goDriveExam('kc')"
            class="lh34 ml15 select-border1 round4 pr15 pl15"
          >
            客车
          </div>
          <div
            @click="goDriveExam('hc')"
            class="lh34 ml15 select-border1 round4 pr15 pl15"
          >
            货车
          </div>
        </div>
        <div class="lh34 ml15 select-border1 round4 pr15 pl15">错误回顾</div>
      </div>
      <div class="flex items-center pt30 pb30">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">全部错误题回顾</span>
        <div class="lh34 round4 pr15 pl15 select-border1 mr15">错误回顾</div>
        <div class="lh34 round4 pr15 pl15 select-border1">清空全部错题</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {

    return {

    };
  },
  methods: {
    goDriveExam(gs:string) {
      this.$router.push({
        path:'/driverExam',
        query:{
          gs:gs,
          ...this.$route.query
        }

      })
      
    }
  },
});
</script>

<style lang="scss" scoped>
.select-border1 {
  border: 1px solid #f9de5b;
}
.select-border2 {
  border: 1px solid #f9de5b;
}
.select-border3 {
  border: 1px solid #d8d8d8;
}
.select-border1:hover {
  border: 1px solid #f9de5b;
  background-color: #f9de5b;
  cursor: pointer;
}
.select-border2:hover {
  border: 1px solid #f9de5b;
  background-color: rgba(255, 247, 204, 1);
  cursor: pointer;
}
.radius4 {
  border-radius: 4px;
}
.bg-primary-yellow {
  background-color: #f9de5b;
}
.bg-light-yellow {
  background: #fff7cc;
}

.w1603 {
  width: 1603px;
}

.content {
  padding: 0 30px;
  padding-top: 21px;
  padding-bottom: 30px;

  .vertical-line {
    width: 5px;
    height: 20px;
    background: #f9de5b;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
  }
}
</style>