Knowledge_Test_Vue/src/views/HomeView.vue

<template>
  <div class="home">
      <img src="../assets/enter.jpg" alt="进入测试" class="image" @click="jumpPage">
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'App',
  data() {
    return {
      activeTab: 'question'
    }
  },
  methods:{
    async jumpPage(){
      const submissionData={
        // jwcode:91000001,//有成绩的
        // jwcode:90098888,//有成绩的
        // jwcode:90098889,//有成绩的
        // jwcode:90098890,//有成绩的
        // jwcode:90098891,//有成绩的
        // jwcode:90098892,//有成绩的
        // jwcode:90098893,//没有成绩的
        jwcode:90098894,//没有成绩的
      };
      localStorage.setItem('submissionData', JSON.stringify(submissionData));
      console.log('存储的数据:', localStorage.getItem('submissionData'));
      try{
        const res = await axios.post('http://192.168.40.41:8000/api/knowledge/scores',submissionData);
        this.score = res.data.data[0].score;
        console.log(this.score);
        if(this.score==null){
          this.$router.push('/text');
        }
        else{
          this.$router.push('/report');
        }
      }catch(err){
          this.$router.push('/text');
      }
    }
  },
  async mounted(){
    localStorage.removeItem('submissionData');
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home {
  position: relative;
  min-height: 100vh;
  display: flex;
  background-image: url('@/assets/home.jpg');
  background-size: cover;
  background-position: center;
}

.image {
  position: fixed;
  width: 200px;
  min-height: 160px;
  max-height: 160px;
  object-fit: contain;
  bottom: 70px;
  left: 682px;
  /* left: 35.5%; */
}

.image:hover {
  transform: scale(1.2);
  filter: brightness(1.1);
}
</style>