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

<template>
  <div class="content">
    <div class="bg-white pl50 pt30">
      <div class="flex items-center mb20">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">练习技巧</span>

        <div class="flex">
          <div
            @click="goThreeStudyExam"
            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">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">仿真模拟考试</span>

        <div class="flex">
          <div
            @click="goThreeExam"
            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: {
    goThreeExam() {
      this.$router.push({
        path: "/threeExam",
        query: {
          ...this.$route.query,
        },
      });
    },
    goThreeStudyExam() {
      this.$router.push({
        path: "/threeStudyExam",
        query: {
          ...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>